diff --git a/styles.css b/styles.css index e4be3c8..0b2df3c 100644 --- a/styles.css +++ b/styles.css @@ -1,4 +1,5 @@ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"); + /* ===( CODE AASHU )=== */ :root { --primary-color: #12ac8e; @@ -9,6 +10,9 @@ --text-light: #767268; --white: #ffffff; --max-width: 1200px; + --shadow: 0px 10px 30px rgba(0,0,0,0.1); + --card-shadow: 0px 8px 20px rgba(0,0,0,0.08); + --transition: 0.3s ease-in-out; } * { @@ -17,6 +21,13 @@ box-sizing: border-box; } +body { + font-family: "Poppins", sans-serif; + background-color: #f7f9fc; + color: var(--text-dark); + line-height: 1.6; +} + .section__container { max-width: var(--max-width); margin: auto; @@ -30,31 +41,43 @@ color: var(--text-dark); } +/* =========================== + BUTTONS +=========================== */ .btn { padding: 0.75rem 2rem; - outline: none; + border-radius: 50px; border: none; + cursor: pointer; font-size: 1rem; - white-space: nowrap; + font-weight: 500; color: var(--white); - background-color: var(--secondary-color); - border-radius: 5px; - cursor: pointer; + background: var(--secondary-color); + transition: var(--transition); } +.btn:hover { + background: var(--primary-color); + transform: translateY(-3px); +} + +/* =========================== + IMAGES & LINKS +=========================== */ img { width: 100%; - display: flex; + display: block; + border-radius: 10px; } a { text-decoration: none; + color: inherit; } -body { - font-family: "Poppins", sans-serif; -} - +/* =========================== + HEADER & NAVBAR +=========================== */ header { background-image: linear-gradient( to right, @@ -62,7 +85,7 @@ header { rgba(18, 172, 142, 0.7) ), url("assets/header.jpg"); - background-position: center center; + background-position: center; background-size: cover; background-repeat: no-repeat; } @@ -70,13 +93,13 @@ header { .nav__container { padding: 2rem 1rem; display: flex; - align-items: center; justify-content: space-between; + align-items: center; } .nav__logo { - font-size: 1.5rem; - font-weight: 600; + font-size: 1.8rem; + font-weight: 700; color: var(--white); } @@ -85,16 +108,16 @@ header { } .nav__links { - list-style: none; display: flex; align-items: center; - justify-content: center; gap: 2rem; } .link a { padding: 0.5rem; color: var(--primary-color-light); + font-weight: 500; + transition: var(--transition); } .link a:hover { @@ -105,22 +128,26 @@ header { display: flex; align-items: center; gap: 5rem; + flex-wrap: wrap; + padding-top: 4rem; } .header__container h1 { margin-bottom: 1rem; - max-width: 800px; font-size: 3.5rem; - line-height: 4rem; + line-height: 1.2; color: var(--white); } .header__container p { margin-bottom: 2rem; - max-width: 600px; color: var(--primary-color-light); + max-width: 600px; } +/* =========================== + FORM +=========================== */ .header__form { width: 100%; max-width: 350px; @@ -130,19 +157,24 @@ header { display: grid; gap: 1rem; padding: 2rem; - background-color: var(--white); - border-radius: 10px; - box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2); + background: var(--white); + border-radius: 15px; + box-shadow: var(--shadow); } .header__form input { padding: 1rem; - outline: none; + border-radius: 8px; border: none; - font-size: 1rem; - color: var(--primary-color); background-color: var(--primary-color-light); - border-radius: 5px; + color: var(--primary-color); + font-size: 1rem; + outline: none; + transition: var(--transition); +} + +.header__form input:focus { + box-shadow: 0px 0px 8px rgba(18, 172, 142, 0.4); } .header__form input::placeholder { @@ -151,7 +183,7 @@ header { .form__btn { background-color: var(--primary-color); - transition: 0.3s; + transition: var(--transition); } .form__btn:hover { @@ -159,194 +191,158 @@ header { } .header__form h4 { + color: var(--primary-color); font-size: 1.5rem; font-weight: 700; - color: var(--primary-color); + text-align: center; } +/* =========================== + SERVICES +=========================== */ .service__header { display: flex; - align-items: center; justify-content: space-between; - gap: 2rem; + align-items: center; + flex-wrap: wrap; + gap: 1rem; } .service__header__content p { - max-width: 600px; color: var(--text-light); } .service__btn { - padding: 0.75rem 1rem; - outline: none; - font-size: 1rem; - color: var(--primary-color); + padding: 0.75rem 1.5rem; + border-radius: 50px; border: 1px solid var(--primary-color); - background-color: transparent; - border-radius: 5px; - white-space: nowrap; - cursor: pointer; - transition: 0.3s; + background: transparent; + color: var(--primary-color); + transition: var(--transition); } .service__btn:hover { - color: var(--white); background-color: var(--primary-color); + color: var(--white); } .service__grid { margin-top: 4rem; display: grid; - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; } .service__card { - padding: 2rem; text-align: center; - border-radius: 10px; - box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1); - cursor: pointer; + padding: 2rem 1rem; + border-radius: 15px; + box-shadow: var(--card-shadow); + transition: var(--transition); +} + +.service__card:hover { + transform: translateY(-5px); + box-shadow: 0px 15px 30px rgba(0,0,0,0.15); } .service__card span { display: inline-block; - margin-bottom: 1rem; - padding: 10px 20px; + padding: 15px; font-size: 2.5rem; - color: var(--primary-color); + border-radius: 50%; background-color: var(--primary-color-light); - border-radius: 100%; - transition: 0.3s; + color: var(--primary-color); + transition: var(--transition); +} + +.service__card:hover span { + background-color: var(--primary-color); + color: var(--primary-color-light); } .service__card h4 { - margin-bottom: 0.5rem; - font-size: 1.2rem; - font-weight: 600; + margin: 1rem 0 0.5rem; color: var(--text-dark); } .service__card p { - margin-bottom: 1rem; color: var(--text-light); } .service__card a { color: var(--primary-color); + font-weight: 500; + transition: var(--transition); } .service__card a:hover { color: var(--primary-color-dark); } -.service__card:hover span { - color: var(--primary-color-light); - background-color: var(--primary-color); -} - -.about__container { +/* =========================== + ABOUT US +=========================== */ +.about__container, +.why__container { display: grid; - grid-template-columns: repeat(2, 1fr); + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; align-items: center; } -.about__content p { - margin-bottom: 1rem; +.about__content p, +.why__content p { color: var(--text-light); } -.about__image img { - max-width: 400px; - margin: auto; - border-radius: 10px; -} - -.why__container { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 2rem; - align-items: center; -} - +.about__image img, .why__image img { - max-width: 400px; - margin: auto; - border-radius: 10px; -} - -.why__content p { - color: var(--text-light); + max-width: 100%; + border-radius: 15px; } +/* =========================== + WHY CHOOSE US GRID +=========================== */ .why__grid { - margin-top: 4rem; + margin-top: 2rem; display: grid; - grid-template-columns: 80px auto; - gap: 2rem; + grid-template-columns: 60px auto; + gap: 1rem 2rem; } .why__grid span { display: inline-flex; align-items: center; justify-content: center; - font-size: 2.5rem; - color: var(--primary-color); - border-radius: 10px; - box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1); -} - -.why__grid h4 { - margin-bottom: 0.5rem; - font-size: 1.2rem; - font-weight: 600; - color: var(--text-dark); -} - -.why__grid p { - color: var(--text-light); -} - -.doctors__header { - display: flex; - align-items: center; - justify-content: space-between; - gap: 2rem; -} - -.doctors__header__content p { - max-width: 600px; - color: var(--text-light); -} - -.doctors__nav { - display: flex; - align-items: center; - gap: 1rem; -} - -.doctors__nav span { - padding: 5px 15px; - font-size: 1.5rem; + font-size: 2rem; color: var(--primary-color); - background-color: var(--primary-color-light); - cursor: pointer; + border-radius: 12px; + box-shadow: var(--card-shadow); } +/* =========================== + DOCTORS +=========================== */ .doctors__grid { - margin-top: 4rem; display: grid; - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; + margin-top: 2rem; } .doctors__card { text-align: center; - box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1); - border-radius: 10px; - cursor: pointer; + border-radius: 15px; + box-shadow: var(--card-shadow); overflow: hidden; + transition: var(--transition); +} + +.doctors__card:hover { + transform: translateY(-5px); + box-shadow: 0px 15px 30px rgba(0,0,0,0.15); } .doctors__card__image { @@ -356,61 +352,46 @@ header { .doctors__socials { position: absolute; - left: 0; bottom: -4rem; + left: 0; width: 100%; display: flex; - align-items: center; justify-content: center; gap: 1rem; - transition: 0.5s; -} - -.doctors__socials span { - display: inline-block; - padding: 6px 12px; - font-size: 1.5rem; - color: var(--text-dark); - background-color: var(--white); - border-radius: 5px; - cursor: pointer; - transition: 0.3s; -} - -.doctors__socials span:hover { - color: var(--primary-color); + transition: var(--transition); } .doctors__card:hover .doctors__socials { - bottom: 2rem; + bottom: 1rem; } -.doctors__card h4 { - margin-top: 1rem; - font-size: 1.2rem; - font-weight: 600; +.doctors__socials span { + background: var(--white); color: var(--text-dark); + padding: 6px 12px; + border-radius: 10px; + transition: var(--transition); } -.doctors__card p { - margin-bottom: 1rem; - color: var(--text-light); +.doctors__socials span:hover { + color: var(--primary-color); } +/* =========================== + FOOTER +=========================== */ .footer { background-color: var(--primary-color-light); + padding: 4rem 1rem 2rem; } .footer__container { display: grid; - grid-template-columns: 400px repeat(3, 1fr); + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; } -.footer__col h3 { - margin-bottom: 1rem; - font-size: 1.5rem; - font-weight: 600; +.footer__col h3, .footer__col h4 { color: var(--primary-color); } @@ -418,131 +399,167 @@ header { color: var(--secondary-color); } -.footer__col h4 { - margin-bottom: 1rem; - font-size: 1.2rem; - font-weight: 600; - color: var(--primary-color); -} - .footer__col p { - margin-bottom: 1rem; color: var(--text-dark); + margin-bottom: 0.5rem; cursor: pointer; - transition: 0.3s; + transition: var(--transition); } .footer__col p:hover { color: var(--primary-color); } -.footer__col i { - color: var(--primary-color); -} - .footer__bar { background-color: var(--primary-color); + padding: 0.5rem 1rem; } .footer__bar__content { max-width: var(--max-width); margin: auto; - padding: 0.5rem 1rem; display: flex; - align-items: center; justify-content: space-between; - gap: 2rem; + flex-wrap: wrap; + gap: 1rem; } .footer__bar__content p { - font-size: 0.8rem; color: var(--white); + font-size: 0.85rem; } -.footer__socials { - display: flex; - align-items: center; - gap: 1rem; - font-size: 1rem; +.footer__socials span { + font-size: 1.2rem; color: var(--white); cursor: pointer; + transition: var(--transition); } -@media (width < 900px) { - .service__grid { - grid-template-columns: repeat(2, 1fr); - gap: 1rem; - } +.footer__socials span:hover { + color: var(--secondary-color); +} - .about__container { - grid-template-columns: repeat(1, 1fr); +/* =========================== + MEDIA QUERIES +=========================== */ +@media (max-width: 1024px) { + .header__container { + flex-direction: column; } +} - .about__image { - grid-area: 1/1/2/2; +@media (max-width: 768px) { + .nav__links { + display: none; } +} - .about__content { +@media (max-width: 600px) { + .service__header, + .doctors__header { + flex-direction: column; text-align: center; + gap: 1rem; } - .why__container { - grid-template-columns: repeat(1, 1fr); + .why__grid { + grid-template-columns: 50px auto; + gap: 1rem 1rem; } +} +/* =========================== + NAVBAR ENHANCEMENT +=========================== */ +.nav__container { + padding: 1.5rem 2rem; + display: flex; + justify-content: space-between; + align-items: center; + background: rgba(255, 255, 255, 0.05); /* subtle glass effect */ + backdrop-filter: blur(10px); + border-radius: 15px; + box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1); + transition: all 0.3s ease; + position: sticky; + top: 1rem; + z-index: 100; +} - .why__content { - text-align: center; - } +.nav__logo { + font-size: 1.8rem; + font-weight: 700; + color: var(--white); + letter-spacing: 1px; + text-transform: uppercase; +} - .why__grid { - text-align: left; - } +.nav__logo span { + color: var(--secondary-color); + transition: 0.3s; +} - .doctors__grid { - grid-template-columns: repeat(2, 1fr); - gap: 1rem; - } +.nav__logo:hover span { + color: var(--primary-color); +} - .footer__container { - grid-template-columns: repeat(2, 1fr); - } +.nav__links { + display: flex; + align-items: center; + gap: 2.5rem; } -@media (width < 780px) { - .nav__links { - display: none; - } +.link a { + padding: 0.5rem 0.8rem; + color: var(--primary-color-light); + font-weight: 500; + position: relative; + transition: all 0.3s ease; +} - .header__container { - flex-direction: column; - } +.link a::after { + content: ""; + position: absolute; + left: 0; + bottom: -3px; + width: 0; + height: 2px; + background: var(--secondary-color); + transition: 0.3s; } -@media (width < 600px) { - .service__header { - flex-direction: column; - text-align: center; - } +.link a:hover { + color: var(--white); +} - .service__grid { - grid-template-columns: repeat(1, 1fr); - } +.link a:hover::after { + width: 100%; +} - .why__grid { - column-gap: 1rem; - } +.nav__container .btn { + padding: 0.6rem 1.8rem; + font-size: 0.95rem; + font-weight: 600; + border-radius: 50px; + background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); + box-shadow: 0px 5px 15px rgba(0,0,0,0.2); + transition: all 0.3s ease; +} - .doctors__header { - flex-direction: column; - text-align: center; - } +.nav__container .btn:hover { + transform: translateY(-2px); + box-shadow: 0px 8px 20px rgba(0,0,0,0.3); +} - .doctors__grid { - grid-template-columns: repeat(1, 1fr); +/* =========================== + MOBILE NAV +=========================== */ +@media (max-width: 768px) { + .nav__links { + display: none; /* for hamburger menu */ } - .footer__bar__content { - flex-direction: column; - gap: 1rem; + .nav__container { + padding: 1rem 1.5rem; } }