Untitled
body { font-family: 'Roboto', sans-serif; margin: 0; padding: 0; background-color: #e0f7fa; color: #004d40; } header { display: flex; justify-content: space-between; align-items: center; padding: 20px; background-color: #004d40; color: #e0f7fa; } header .logo { font-size: 26px; font-weight: bold; } header nav ul { list-style: none; display: flex; gap: 15px; } header nav ul li a { color: #e0f7fa; text-decoration: none; font-weight: bold; } .hero { background-image: url('hero-bg.jpg'); background-size: cover; background-position: center; color: #004d40; text-align: center; padding: 80px 20px; background-color: rgba(224, 247, 250, 0.8); } .hero h1 { font-size: 42px; margin-bottom: 10px; } .hero p { font-size: 22px; } #portfolio { padding: 40px 20px; text-align: center; } #portfolio h2 { font-size: 34px; margin-bottom: 20px; } .projects { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; } .project { width: 280px; background-color: #ffffff; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); overflow: hidden; display: flex; flex-direction: column; } .project img { width: 100%; height: auto; } .project-info { padding: 15px; text-align: left; } .project-info h3 { font-size: 20px; margin-bottom: 5px; } .project-info p { font-size: 16px; } #about { padding: 40px 20px; text-align: center; background-color: #ffffff; } #about h2 { font-size: 34px; margin-bottom: 20px; } #about img { width: 140px; height: auto; border-radius: 50%; margin-bottom: 20px; } #about p { font-size: 18px; line-height: 1.6; } footer { background-color: #004d40; color: #e0f7fa; padding: 40px 20px; text-align: center; } footer h2 { font-size: 34px; margin-bottom: 20px; } footer form { display: flex; flex-direction: column; gap: 10px; max-width: 400px; margin: 0 auto; } footer form input, footer form textarea { padding: 10px; border: none; border-radius: 5px; font-size: 16px; } footer form button { padding: 10px; border: none; border-radius: 5px; background-color: #00796b; color: #e0f7fa; cursor: pointer; font-size: 16px; } @media (max-width: 768px) { header { flex-direction: column; align-items: flex-start; } header nav ul { flex-direction: column; gap: 10px; } .projects { flex-direction: column; } .project { width: 100%; } .hero { padding: 50px 20px; } }
Leave a Comment