style.css

/* Import Canva Sans Font */ @font-face { font-family: 'Canva Sans'; src: url('fonts/CanvaSans-Regular.otf') format('opentype'); } body { font-family: 'Canva Sans', Arial, sans-serif; color: #333; line-height: 1.6; background-color: #f4f4f9; } /* Navbar */ .navbar { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; background-color: #333; color: #fff; } .nav-links { display: flex; list-style-type: none; } .nav-links li { margin: 0 1rem; } .nav-links a { color: #fff; text-decoration: none; font-weight: bold; transition: color 0.3s; } .nav-links a:hover { color: #4a90e2; } .logo { font-size: 1.5rem; color: #4a90e2; text-decoration: none; font-weight: bold; } /* Header */ .header { background-color: #4a90e2; color: #fff; text-align: center; padding: 3rem 1rem; } .header h1 { font-size: 2.5rem; margin-bottom: 0.5rem; } .header p { font-size: 1.25rem; } .button { display: inline-block; margin-top: 1rem; padding: 0.75rem 1.5rem; background-color: #333; color: #fff; text-decoration: none; border-radius: 5px; transition: background-color 0.3s; } .button:hover { background-color: #555; } /* Editions Section */ .editions { padding: 2rem 1rem; text-align: center; background-color: #fff; } .editions h2 { font-size: 2rem; margin-bottom: 1rem; } .edition-columns { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 1rem; } .edition { width: 45%; padding: 1rem; background-color: #e9e9f3; border-radius: 8px; } .edition h3 { font-size: 1.5rem; color: #4a90e2; margin-bottom: 0.5rem; } .edition ul { list-style-type: none; padding-left: 0; margin-top: 0.5rem; } .edition ul li { margin-bottom: 0.5rem; } /* Download Section */ .download { padding: 2rem 1rem; text-align: center; background-color: #4a90e2; color: #fff; } .download h2 { font-size: 2rem; margin-bottom: 1rem; } /* Footer */ .footer { padding: 1rem; text-align: center; background-color: #333; color: #fff; font-size: 0.9rem; } /* Scroll Reveal Animations */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.active { opacity: 1; transform: translateY(0); } /* Navbar Color Change on Scroll */ .navbar.scrolled { background-color: #222; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } /* Button Pulse Animation */ .pulse { animation: pulse 1s infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } /* Responsive Navbar */ @media (max-width: 768px) { .nav-links { flex-direction: column; align-items: center; } .nav-links li { margin: 0.5rem 0; } }