From 40efac0f93aa2876bdd64ffe5aa743ae56ac6415 Mon Sep 17 00:00:00 2001 From: Vaishnavi Patil <143169451+vaishnavip27@users.noreply.github.com> Date: Sat, 15 Jun 2024 02:29:07 +0530 Subject: [PATCH] UI enhancement of About Us section (#559) * rapidoc * UI enhancement of About Us section --------- Co-authored-by: Vamshi Maskuri <117595548+varshith257@users.noreply.github.com> --- Css-Files/aboutus.css | 251 ++++++++++++++++++++++++++++++------------ img/asterisk.svg | 15 +++ img/heart.svg | 4 + img/question.svg | 12 ++ index.html | 62 ++++++++++- 5 files changed, 272 insertions(+), 72 deletions(-) create mode 100644 img/asterisk.svg create mode 100644 img/heart.svg create mode 100644 img/question.svg diff --git a/Css-Files/aboutus.css b/Css-Files/aboutus.css index e54f3166..190f8bfa 100644 --- a/Css-Files/aboutus.css +++ b/Css-Files/aboutus.css @@ -1,119 +1,228 @@ .about-us { - display: block; - margin: auto; - width: 52.5rem; - height: 100%; - background-color: white; + display: block; + margin: auto; + width: 52.5rem; + height: 100%; } .about-us-heading { - text-align: center; - font-size: 40px; - margin-bottom: 5rem; - margin-top: 5rem; + text-align: center; + font-size: 40px; + margin-bottom: 5rem; + margin-top: 5rem; +} + +.about-service { + height: 360px; + width: 1200px; + margin-left: 150px; + margin-top: -40px; + display: flex; + justify-content: center; + align-items: center; +} + +.sec-1, +.sec-2 { + height: 360px; + width: 600px; +} + +.sec-2 { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 8px; +} + +.a-1, +.a-2, +.a-3 { + height: 94px; + width: 500px; + display: flex; + align-items: left; + justify-content: left; + background-color: #111111; + border-radius: 11px; +} + +.a-l, +.b-l, +.c-l { + height: 58px; + width: 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; +} + +.c-r { + height: 58px; + width: 380px; + margin-left: 20px; + margin-top: 17px; +} + +.head-1, +.head-2 { + height: 28px; + width: 380px; +} + +.head-1 { + font-size: 18px; +} + +.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; } .about-us-block { - display: flex; - justify-content: space-evenly; + display: flex; + justify-content: space-evenly; + margin-top: 80px; } -.about-us-community, .about-us-product, .about-us-event, .about-us-location { - display: flex; - flex-direction: column; - gap: 1rem; - width: 35%; - height: 18rem; - border: 1px solid rgba(206, 212, 218, 1); - border-radius: 8px; - margin-bottom: 21px; +.about-us-community, +.about-us-product, +.about-us-event, +.about-us-location { + display: flex; + flex-direction: column; + gap: 1rem; + width: 35%; + height: 18rem; + border: 1px solid rgba(206, 212, 218, 1); + border-radius: 8px; + margin-bottom: 21px; } .about-us-community { - border: 2px solid #1c413b; + border: 2px solid #1c413b; } .about-us-community:hover { - background: #1c413b; - color: white; + background: #1c413b; + color: white; } .about-us-location { - border: 2px solid #1c413b; + border: 2px solid #1c413b; } .about-us-location:hover { - background: #1c413b; - color: white; + background: #1c413b; + color: white; } .about-us-product { - border: 2px solid #1c413b; + border: 2px solid #1c413b; } .about-us-product:hover { - background: #1c413b; - color: white; + background: #1c413b; + color: white; } .about-us-event { - border: 2px solid #1c413b; + border: 2px solid #1c413b; } .about-us-event:hover { - background: #1c413b; - color: white; + 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; + 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; + font-size: 16px; + font-weight: 400; + line-height: 25px; + letter-spacing: 0em; + text-align: left; + margin-left: 1rem; + margin-right: 1rem; } @media only screen and (max-width: 768px) { - .about-us-block { - 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; - } + .about-us-block { + 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; + } } @media only screen and (max-width: 1020px) { - .about-us-block { - flex-direction: column; - justify-content: center; - align-items: center; - } - - .about-us-community, .about-us-event, .about-us-location, .about-us-product { - width: 90% !important; - height: 100%; - padding: 0.5rem; - } + .about-us-block { + flex-direction: column; + justify-content: center; + align-items: center; + } + + .about-us-community, + .about-us-event, + .about-us-location, + .about-us-product { + width: 90% !important; + height: 100%; + padding: 0.5rem; + } } @media only screen and (max-width: 1250px) { - .about-us-community, .about-us-event, .about-us-location, .about-us-product { - width: 45%; - } -} \ No newline at end of file + .about-us-community, + .about-us-event, + .about-us-location, + .about-us-product { + width: 45%; + } +} diff --git a/img/asterisk.svg b/img/asterisk.svg new file mode 100644 index 00000000..80cd0388 --- /dev/null +++ b/img/asterisk.svg @@ -0,0 +1,15 @@ + + + + + + + + + + \ No newline at end of file diff --git a/img/heart.svg b/img/heart.svg new file mode 100644 index 00000000..7b293ca4 --- /dev/null +++ b/img/heart.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/img/question.svg b/img/question.svg new file mode 100644 index 00000000..d73f9362 --- /dev/null +++ b/img/question.svg @@ -0,0 +1,12 @@ + + + + question + + + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index 93b7f82f..e1161469 100644 --- a/index.html +++ b/index.html @@ -435,11 +435,71 @@

Medicine use

- +

About Us

+ +
+
+ +
+
+
+
+
+ +
+
+
+
HEALTH CHECKUPS
+
Bootcamps, personalised check-ups,newsletter, it's all here
+
+
+
+
+
+ + + + + + +
+
+
+
EMERGENCY WARDS
+
Avoid rush and get immediate medical assistance, the wards and vacancies.
+
+
+
+
+
+ + question + + + + + + + + +
+
+
+
SERVICES
+
An apple a day won't keep Rapidoc away. We are always here at your service, bringing to you the best facilities.
+
+
+
+