diff --git a/styles.css b/styles.css index f049b97..3fac271 100644 --- a/styles.css +++ b/styles.css @@ -1,149 +1,152 @@ /* Global styles */ body { - font-family: 'Poppins', sans-serif; - margin: 0; - padding: 0; - background-image: url('images/background.jpg'); - background-size: cover; - background-repeat: no-repeat; - background-position: center; - background-attachment: fixed; - color: #fff; - min-height: 100vh; - position: relative; - padding-bottom: 60px; /* Adjust this value based on the height of your footer */ + font-family: 'Poppins', sans-serif; + margin: 0; + padding: 0; + background-image: url('images/background.jpg'); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + background-attachment: fixed; + color: #fff; + min-height: 100vh; + position: relative; + padding-bottom: 60px; + /* Adjust this value based on the height of your footer */ } body::before { - content: ""; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.6); - z-index: -1; + content: ""; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.6); + z-index: -1; } header { - padding: 20px; - display: flex; - justify-content: space-between; - align-items: center; - position: sticky; - background-color: rgba(0, 0, 0, 0.8); - z-index: 1000; - top: 0; + padding: 20px; + display: flex; + justify-content: space-between; + align-items: center; + position: sticky; + background-color: rgba(0, 0, 0, 0.8); + z-index: 1000; + top: 0; } nav { - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; } .logo img { - height: 40px; + height: 40px; } .nav-links a { - color: #fff; - text-decoration: none; - margin-left: 20px; - transition: color 0.3s ease; + color: #fff; + text-decoration: none; + margin-left: 20px; + transition: color 0.3s ease; } .nav-links a:hover { - color: #ccc; + color: #ccc; } main { - display: sticky; - justify-content: center; - align-items: center; - min-height: calc(100vh - 120px); - padding-bottom: 20px; /* Adjust this value based on the height of your footer */ + display: sticky; + justify-content: center; + align-items: center; + min-height: calc(100vh - 120px); + padding-bottom: 20px; + /* Adjust this value based on the height of your footer */ } .hero { - text-align: center; + text-align: center; } div.text-container { - max-width: 800px; - margin: 0 auto; - padding: 0 20px; - box-sizing: border-box; + max-width: 800px; + margin: 0 auto; + padding: 0 20px; + box-sizing: border-box; } div.text-container p { - margin-bottom: 0px; - margin-top: 0px; + margin-bottom: 0px; + margin-top: 0px; } div.text-container h3 { - margin-bottom: 5px; - margin-top: 25px; + margin-bottom: 5px; + margin-top: 25px; } .hero h1 { - font-size: 48px; - margin-bottom: 20px; + font-size: 48px; + margin-bottom: 20px; } .hero p { - font-size: 18px; - margin-bottom: 40px; + font-size: 18px; + margin-bottom: 40px; } .btn { - margin-top: 15px; - display: inline-block; - background-color: #fff; - color: #000; - text-decoration: none; - padding: 12px 24px; - border-radius: 4px; - transition: background-color 0.3s ease; - margin-bottom: 75px; + margin-top: 15px; + display: inline-block; + background-color: #fff; + color: #000; + text-decoration: none; + padding: 12px 24px; + border-radius: 4px; + transition: background-color 0.3s ease; + margin-bottom: 75px; } .btn:hover { - background-color: #ccc; + background-color: #ccc; } footer { - padding: 20px; - text-align: center; - background-color: rgba(0, 0, 0, 0.8); - position: fixed; - width: 100%; - bottom: 0; + padding: 20px; + text-align: center; + background-color: rgba(0, 0, 0, 0.8); + position: fixed; + width: 100%; + bottom: 0; } footer p { - margin-top: 10px; - margin-bottom: 10px; + margin-top: 10px; + margin-bottom: 10px; } /* Mobile-only styles */ @media screen and (max-width: 768px) { - .logo { - text-align: center; - } - - .nav-links { - text-align: center; - margin-top: 15px; - } - - .nav-links a { - display: block; - margin: 10px 0; - } - - main { - padding-bottom: 80px; /* Adjust this value based on the height of your footer */ - } -} + .logo { + text-align: center; + } + + .nav-links { + text-align: center; + margin-top: 15px; + } + + .nav-links a { + display: block; + margin: 10px 0; + } + + main { + padding-bottom: 80px; + /* Adjust this value based on the height of your footer */ + } +} \ No newline at end of file