body { font-family: Arial, sans-serif; background-color: #f0f0f0; } header { background-color: #6c5ce7; color: #fff; padding: 1em; text-align: center; } header nav ul { list-style: none; margin: 0; padding: 0; } header nav ul li { display: inline-block; margin-right: 20px; } header nav a { color: #fff; text-decoration: none; } #hero { background-image: linear-gradient(to bottom, #6c5ce7, #a29bfe); background-size: 100% 300px; background-position: 0% 100%; height: 100vh; display: flex; justify-content: center; align-items: center; color: #fff; } #hero h1 { font-size: 48px; } #hero p { font-size: 18px; } #about { padding: 2em; } #projects { padding: 2em; } .filter-btn { background-color: #6c5ce7; color: #fff; border: none; padding: 10px 20px; font-size: 16px; cursor: pointer; } .filter-btn:hover { background-color: #a29bfe; } .project-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; } .project { background-color: #fff; padding: 20px; border: 1px solid #ddd; } .project img { width: 100%; height: 150px; object-fit: cover; } .project h3 { font-size: 18px; } .project p { font-size: 14px; } #skills { padding: 2em; } .skill-bar { margin-bottom: 20px; } .skill-bar span { font-size: 16px; } .progress-bar { background-color: #6c5ce7; height: 10px; border-radius: 10px; } #contact { padding: 2em; } #contact form { display: flex; flex-direction: column; } #contact input, #contact textarea { padding: 10px; margin-bottom: 20px; border: 1px solid #ccc; } #contact button { background-color: #6c5ce7; color: #fff; border: none; padding: 10px 20px; font-size: 16px; cursor: pointer; } #contact button:hover { background-color: #a29bfe; }