From f45d2fb7666146e78f361841601e1a6d8f6caf92 Mon Sep 17 00:00:00 2001 From: Isha Date: Wed, 3 Jul 2024 01:04:58 +0530 Subject: [PATCH] =?UTF-8?q?=E2=80=A2Responsivee?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Css-Files/aboutus.css | 196 ++++------ Html-Files/Css-Files/Experiencestyle.css | 437 +++++++++++++++++++++- Html-Files/Css-Files/styles.css | 72 ++++ Html-Files/Doctor Experience.html | 134 ++++--- Html-Files/news.html | 298 ++++++++++----- index.html | 457 ++++++++++------------- rateus.css | 72 ++++ rateus.html | 52 ++- style.css | 351 ++++++++++++++++- 9 files changed, 1521 insertions(+), 548 deletions(-) diff --git a/Css-Files/aboutus.css b/Css-Files/aboutus.css index 190f8bfa..b2938c3c 100644 --- a/Css-Files/aboutus.css +++ b/Css-Files/aboutus.css @@ -13,105 +13,81 @@ } .about-service { - height: 360px; - width: 1200px; - margin-left: 150px; - margin-top: -40px; display: flex; justify-content: center; align-items: center; + flex-wrap: wrap; + margin-top: -40px; } .sec-1, .sec-2 { - height: 360px; - width: 600px; -} - -.sec-2 { + flex: 1 1 50%; display: flex; align-items: center; justify-content: center; +} + +.sec-1 img { + width: 100%; + max-width: 520px; + height: auto; + margin: 30px; +} + +.sec-2 { flex-direction: column; gap: 8px; + padding: 20px; } .a-1, .a-2, .a-3 { - height: 94px; - width: 500px; display: flex; - align-items: left; + align-items: center; justify-content: left; background-color: #111111; border-radius: 11px; + width: 100%; + max-width: 500px; + padding: 10px; + margin: 5px 0; } .a-l, .b-l, .c-l { - height: 58px; + display: flex; + align-items: center; + justify-content: center; width: 58px; + height: 58px; border-radius: 50%; - margin-top: 17px; - margin-left: 15px; border: 2px solid #2f7f81; } .a-r, -.b-r { - height: 58px; - width: 380px; - margin-top: 19px; - margin-left: 20px; -} - +.b-r, .c-r { - height: 58px; - width: 380px; - margin-left: 20px; - margin-top: 17px; -} - -.head-1, -.head-2 { - height: 28px; - width: 380px; + margin-left: 15px; + color: white; } .head-1 { font-size: 18px; + font-weight: bold; } .head-2 { - font-size: 10px; - margin-top: 7px; -} -.h-icon { - margin-left: 10px; - margin-top: 11px; -} - -.q-icon { - margin-left: 7px; - margin-top: 7px; -} - -.a-icon { - margin-left: 14px; - margin-top: 15px; -} -.about-img { - height: 300px; - width: 520px; - margin-left: 40px; - margin-top: 30px; + font-size: 14px; + margin-top: 5px; } .about-us-block { display: flex; - justify-content: space-evenly; + flex-wrap: wrap; + justify-content: space-around; margin-top: 80px; } @@ -122,107 +98,91 @@ display: flex; flex-direction: column; gap: 1rem; - width: 35%; - height: 18rem; - border: 1px solid rgba(206, 212, 218, 1); + width: 45%; + max-width: 400px; + height: auto; + border: 2px solid #1c413b; border-radius: 8px; + padding: 1rem; margin-bottom: 21px; + transition: background 0.3s, color 0.3s; } -.about-us-community { - border: 2px solid #1c413b; -} - -.about-us-community:hover { - background: #1c413b; - color: white; -} - -.about-us-location { - border: 2px solid #1c413b; -} - +.about-us-community:hover, +.about-us-product:hover, +.about-us-event:hover, .about-us-location:hover { background: #1c413b; color: white; } -.about-us-product { - border: 2px solid #1c413b; -} - -.about-us-product:hover { - background: #1c413b; - color: white; -} - -.about-us-event { - border: 2px solid #1c413b; -} - -.about-us-event:hover { - background: #1c413b; - color: white; -} - .about-us-blk-text { font-size: 20px; font-weight: 600; line-height: 30px; - letter-spacing: 0em; - text-align: left; - margin-top: 1rem; } .about-us-blk-para { font-size: 16px; font-weight: 400; line-height: 25px; - letter-spacing: 0em; - text-align: left; - margin-left: 1rem; - margin-right: 1rem; + margin: 0 1rem; } -@media only screen and (max-width: 768px) { - .about-us-block { +@media only screen and (max-width: 1250px) { + .about-us { + width: 90%; + } + + .about-service { flex-direction: column; - justify-content: center; align-items: center; } - .about-us-community, - .about-us-event, - .about-us-location, - .about-us-product { - width: 90%; - height: 100%; - padding: 0.5rem; + .sec-1, + .sec-2 { + width: 100%; + } + + .sec-1 img { + margin: 20px; } -} -@media only screen and (max-width: 1020px) { .about-us-block { flex-direction: column; - justify-content: center; align-items: center; } .about-us-community, + .about-us-product, .about-us-event, - .about-us-location, - .about-us-product { - width: 90% !important; - height: 100%; - padding: 0.5rem; + .about-us-location { + width: 90%; + max-width: 600px; } } -@media only screen and (max-width: 1250px) { +@media only screen and (max-width: 768px) { + .about-us-heading { + font-size: 32px; + } + + .about-service { + margin-left: 0; + } + .about-us-community, + .about-us-product, .about-us-event, - .about-us-location, - .about-us-product { - width: 45%; + .about-us-location { + width: 100%; + } + + .about-us-blk-text { + font-size: 18px; + } + + .about-us-blk-para { + font-size: 14px; } } diff --git a/Html-Files/Css-Files/Experiencestyle.css b/Html-Files/Css-Files/Experiencestyle.css index 799b31ab..3db97393 100644 --- a/Html-Files/Css-Files/Experiencestyle.css +++ b/Html-Files/Css-Files/Experiencestyle.css @@ -415,4 +415,439 @@ align-items: center; text-align: center; padding: 1rem 0.5rem 2rem 0.5rem; } - } \ No newline at end of file + } + + + /* added */ + +footer { + bottom: 0; + background-color: var(--footer-bg); + width: 100%; + display: flex; + align-items: center; + flex-direction: column; +} + +.footer-wrapper { + display: flex; + flex-direction: column; + max-width: 80rem; + width: 100%; + margin: 0 auto; + padding: 1rem; +} + +.footer-columns { + display: flex; + flex-direction: column; + width: 100%; +} + +.other-columns { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 2rem 1rem; + width: 100%; + padding-top: 2rem; +} + +.other-columns ul { + display: flex; + flex-direction: column; + gap: 0.75rem; + list-style-type: none; + padding: 0; + margin: 0; + font-weight: 600; +} + +.other-columns ul a { + color: var(--text-color); + text-decoration: none; + font-size: 0.85rem; +} + +.other-columns ul a:hover { + text-decoration: underline; +} + +.footer-bottom { + width: 100%; + color: var(--text-color); + background-color: var(--footer-bottom-bg); +} + +.footer-bottom-wrapper { + display: flex; + flex-direction: column; + max-width: 80rem; + margin: 0 auto; + width: 100%; + gap: 1rem; + justify-content: center; + align-items: center; + padding: 1rem; + text-align: center; +} + +.footer-bottom small { + font-size: 1rem; + white-space: wrap; +} + +.social-wrapper { + display: flex; + justify-content: center; + gap: 0.5rem; +} + +.social-links { + display: flex; + gap: 0.5rem; + align-items: center; + +} + +.social-links a div i { + color: #afb6c7; +} + +.social-links a div i:hover { + color: #fff; +} + +.follow-us { + font-family: sans-serif; +} + +@media (min-width: 600px) { + .footer-bottom-wrapper { + flex-direction: row; + justify-content: space-between; + } + .footer-bottom small { + font-size: smaller; + } +} + +@media (max-width: 600px) { + .footer-bottom-wrapper { + text-align: center; + } +} + +/* feedback added */ +.feed { + display: flex; + flex-direction: column; + align-items: center; + padding: 1rem; +} + +.feedback { + border-radius: 1rem; + background-color: #fff; + padding: 2rem 4rem; + box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, + rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; + margin: 50px auto; + width: 90%; + max-width: 800px; +} + +.feedback h1 { + color: black; + font-size: 2rem; + margin-bottom: 0.3rem; + font-family: "Poppins", sans-serif; + text-align: center; +} + +.feedback p { + color: black; + font-size: 1.1rem; + font-family: "Poppins", sans-serif; + text-align: center; +} + +.emoji { + padding: 1rem 0; + width: 100%; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1rem; + justify-items: center; +} + +.btn { + background-color: transparent; + border: none; + font-size: 2rem; + font-family: "Poppins", sans-serif; + transition: 0.2s ease-in; + cursor: pointer; +} + +.btn:hover { + transform: scale(1.5); +} + +.ques { + margin: 0.5rem 0; + text-align: center; +} + +.feedback #textarea { + padding: 1rem; + width: 100%; + background-color: transparent; + border: 0.1rem solid black; + border-radius: 0.5rem; + color: black; + margin-bottom: 0.6rem; + resize: none; +} + +.feedback #textarea:focus { + box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; +} + +.radiobtn { + width: 100%; + display: flex; + justify-content: space-around; + margin: 1rem 0; +} + +.one { + display: flex; + align-items: center; +} + +.input { + font-family: "Poppins", sans-serif; + font-size: 1rem; + appearance: none; + width: 2rem; + height: 2rem; + border: 0.1rem solid black; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + margin-right: 0.5rem; +} + +.input::before { + content: " "; + width: 1rem; + height: 1rem; + border-radius: 50%; + transition: 0.2s; +} + +.input:checked::before { + background-color: #1977cc; +} + +.label { + color: black; + font-family: "Poppins", sans-serif; + font-size: 1.1rem; +} + +.info { + width: 100%; + display: flex; + justify-content: center; + margin: 1rem 0; + margin-bottom: -20px; +} + +.center { + width: 100%; + text-align: center; +} + +.submit_button { + width: 50%; + max-width: 200px; + background-color: white; + border-radius: 0.5rem; + border: none; + font-size: 1.4rem; + font-family: "Poppins", sans-serif; + padding: 1rem 2rem; + cursor: pointer; + color: #000; + transition: background-color 0.2s, transform 0.2s; +} + +.submit_button:active { + background-color: white; + transform: scale(1); +} + +.bsubmit_button:hover { + background-color: rgb(63, 155, 124); +} + +@media (min-width: 600px) { + .feedback { + padding: 2rem 4rem; + width: 60%; + } + + .submit_button { + width: 15%; + } +} + +@media (max-width: 600px) { + .feedback { + width: 95%; + padding: 1rem; + } + + .submit_button { + width: 100%; + } + + .emoji { + grid-template-columns: repeat(1, 1fr); + justify-content: center; + } +} +@media screen and (max-width : 768px) { + .emoji { + grid-template-columns: repeat(2, 1fr); + margin-right: 25px; + } +} +@media screen and (max-width: 960px) and (min-width:600px){ + .submit_button { + width: 100%; + } +} + + +.hamburger{ + display: none; + cursor: pointer; + position: absolute; + top: 29px; + left: 1.5%; +} +.line{ + width: 30px; + height: 5px; + margin: 4px 4px; + background-color: white; +} +@media only screen and (max-width: 820px){ +.hamburger{ + display: block; +} +.header_container{ + flex-direction: column; + align-items:start; + height: 24.8rem; + transition: 0.55s all ease-out; + /* padding-top: 5px; */ +} +.nav_link{ + flex-direction: column; + position: relative; + bottom: 40px; +} +/* .nav-link li{ + margin-bottom: 5px; +} */ +.nav-h{ + height: 5.5rem; + width: 100vw; +} +.vis-h{ + opacity: 0; +} +.img{ + position: relative; + left: 300px; + bottom: 12px; +} +} +.emoji input { + display: none; + } + .emoji label { + font-size: 2rem; + cursor: pointer; + padding: 5px; + } + .emoji input:checked + label { + background-color: rgb(41, 136, 138); + } + .nav_menu{ + display: flex; + } + .nav_link{ + display: flex; + } +.iti--allow-dropdown input { + padding-left: 50px; + background-color: black; /* Adjust padding to prevent overlap */ +} + +.iti.iti--allow-dropdown { + margin-left: 250px; +} + + + + +.filter-sort { +display: flex; +align-items: center; + +/* added */ +flex-wrap: wrap; +} + +.filter-sort label { +margin-right: 10px; +} + +.filter-sort select, +.filter-sort input[type="range"] { +margin-right: 20px; +/* added */ +margin-bottom: 10px; +} + +/* added */ +#sort-btn { + margin-bottom: 10px; /* Add some bottom margin for spacing */ +} +/* Responsive adjustments */ +@media (max-width: 768px) { + .filter-sort label, + .filter-sort select, + .filter-sort input[type="range"], + #sort-btn { + margin-right: 0; + margin-bottom: 10px; /* Adjust spacing for smaller screens */ + width: 100%; /* Make elements full width */ + } + + .filter-sort { + flex-direction: column; /* Stack items vertically */ + align-items: flex-start; /* Align items to the start */ + } +} + +@media (max-width: 480px) { + header { + padding: 5px; /* Reduce padding for smaller screens */ + } +} \ No newline at end of file diff --git a/Html-Files/Css-Files/styles.css b/Html-Files/Css-Files/styles.css index 41a187f1..ceccaece 100644 --- a/Html-Files/Css-Files/styles.css +++ b/Html-Files/Css-Files/styles.css @@ -317,3 +317,75 @@ section::before { width: 100%; } } + + +.hamburger{ + display: none; + cursor: pointer; + position: absolute; + top: 50px; + left: 1.5%; + } + .line{ + width: 30px; + height: 5px; + margin: 4px 4px; + background-color: white; + } + @media only screen and (max-width: 820px){ + .hamburger{ + display: block; + } + .header_container{ + flex-direction: column; + align-items:start; + height: 24.8rem; + transition: 0.55s all ease-out; + /* padding-top: 5px; */ + } + .nav_link{ + flex-direction: column; + position: relative; + bottom: 40px; + } + /* .nav-link li{ + margin-bottom: 5px; + } */ + .nav-h{ + height: 5.5rem; + width: 100vw; + } + .vis-h{ + opacity: 0; + } + .img{ + position: relative; + left: 300px; + bottom: 12px; + } + } + .emoji input { + display: none; + } + .emoji label { + font-size: 2rem; + cursor: pointer; + padding: 5px; + } + .emoji input:checked + label { + background-color: rgb(41, 136, 138); + } + .nav_menu{ + display: flex; + } + .nav_link{ + display: flex; + } + .iti--allow-dropdown input { + padding-left: 50px; + background-color: black; /* Adjust padding to prevent overlap */ + } + + .iti.iti--allow-dropdown { + margin-left: 250px; + } \ No newline at end of file diff --git a/Html-Files/Doctor Experience.html b/Html-Files/Doctor Experience.html index 69c822de..8b3d5e29 100644 --- a/Html-Files/Doctor Experience.html +++ b/Html-Files/Doctor Experience.html @@ -104,42 +104,47 @@
-
+ +
+ + +
+

Find a Doctor

+
+ + + + + 1000 + +
+
@@ -152,12 +157,12 @@

Find a Doctor

Quick Links


@@ -183,7 +188,9 @@

Legal


+ +
+ +
+ +
+ +
+ +
+ +
+ + +
+ +
+ + +
@@ -1254,19 +1207,13 @@

Shikha Pandey







-