diff --git a/Html-Files/Css-Files/styles.css b/Html-Files/Css-Files/styles.css index f0803764..284a682a 100644 --- a/Html-Files/Css-Files/styles.css +++ b/Html-Files/Css-Files/styles.css @@ -1,27 +1,25 @@ -/* @import url('http://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap'); */ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap'); -* -{ +* { margin: 0; padding: 0; box-sizing: border-box; - font-family: 'Poppins',sans-serif; + font-family: 'Poppins', sans-serif; } -section -{ +section { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #095a55; - + position: relative; } -section::before -{ + +section::before { content: ''; position: absolute; - top: 10; + top: 0; left: 0; width: 50%; height: 100%; @@ -30,27 +28,26 @@ section::before .nav_link { list-style: none; - } - - .nav_link li { +} + +.nav_link li { padding: 5px 20px; display: inline-block; color: white; - } - - .nav_link li a { +} + +.nav_link li a { transition: all 0.3s ease 0s; color: white; text-decoration: none; - } - - .nav_link li a:hover { +} + +.nav_link li a:hover { color: #55a5ea; text-decoration: underline 2.5px rgb(3, 3, 94); - } - - .header_container { - /* background-color: #d9d9d9; */ +} + +.header_container { background-color: #022a2d; opacity: 0.9; display: flex; @@ -58,11 +55,11 @@ section::before justify-content: space-between; align-items: center; height: 60px; - margin: auto; - } + width: 100%; + padding: 0 20px; +} -.container -{ +.container { position: relative; min-width: 1100px; min-height: 550px; @@ -70,11 +67,9 @@ section::before z-index: 1000; /* border-radius: 22px; */ /* background-color: #fff; */ - } -.container .contactInfo -{ +.container .contactInfo { position: absolute; top: 40px; width: 350px; @@ -83,29 +78,23 @@ section::before z-index: 1; padding: 40px; display: flex; - justify-content: center; flex-direction: column; justify-content: space-between; box-shadow: 0 20px 25px rgba(0,0,0,0.15); border-radius: 22px; } -.container .contactInfo h2 -{ +.container .contactInfo h2 { color: #fff; - font-size:24px; + font-size: 24px; font-weight: 500; } -.container .contactInfo ul.info -{ - position: relative; +.container .contactInfo ul.info { margin: 20px 0; } -.container .contactInfo ul.info li -{ - position: relative; +.container .contactInfo ul.info li { list-style: none; display: flex; margin: 20px 0; @@ -113,37 +102,28 @@ section::before align-items: flex-start; } -.container .contactInfo ul.info li span:nth-child(1) -{ +.container .contactInfo ul.info li span:nth-child(1) { width: 30px; min-width: 30px; } -/* for gmail */ -.container .contactInfo ul.info li span a -{ +.container .contactInfo ul.info li span a { color: #fff; text-decoration: none; - width: 30px; - min-width: 30px; - } -.container .contactInfo ul.info li span:nth-child(1) img -{ +.container .contactInfo ul.info li span:nth-child(1) img { max-width: 100%; filter: invert(1); } -.container .contactInfo ul.info li span:nth-child(2) -{ +.container .contactInfo ul.info li span:nth-child(2) { color: #fff; margin-left: 10px; font-weight: 300; } .container .contactInfo ul.sci { - position: relative; display: flex; } @@ -158,15 +138,11 @@ section::before .container .contactInfo ul.sci li a img { filter: invert(1); - background-color: transparent; - width: 25px; /* Adjust the width as needed */ - height: 25px; /* Adjust the height as needed */ + width: 25px; + height: 25px; } - - -.container .contactForm -{ +.container .contactForm { position: absolute; padding: 70px 50px; padding-left: 250px; @@ -178,41 +154,34 @@ section::before border-radius: 22px; } -.container .contactForm h2 -{ +.container .contactForm h2 { color: #0f3959; font-size: 24px; font-weight: 500; } -.container .contactForm .formBox -{ - position: relative; +.container .contactForm .formBox { display: flex; justify-content: space-between; flex-wrap: wrap; padding-top: 30px; } -.container .contactForm .formBox .inputBox -{ - position: relative; +.container .contactForm .formBox .inputBox { margin-bottom: 35px; + width: 100%; } -.container .contactForm .formBox .inputBox.w50 -{ +.container .contactForm .formBox .inputBox.w50 { width: 47%; } -.container .contactForm .formBox .inputBox.w100 -{ +.container .contactForm .formBox .inputBox.w100 { width: 100%; } .container .contactForm .formBox .inputBox input, -.container .contactForm .formBox .inputBox textarea -{ +.container .contactForm .formBox .inputBox textarea { width: 100%; resize: none; padding: 5px 0; @@ -224,13 +193,11 @@ section::before border-bottom: 1px solid #777; } -.container .contactForm .formBox .inputBox textarea -{ +.container .contactForm .formBox .inputBox textarea { height: 120px; } -.container .contactForm .formBox .inputBox span -{ +.container .contactForm .formBox .inputBox span { position: absolute; left: 0; padding: 5px 0; @@ -243,20 +210,16 @@ section::before .container .contactForm .formBox .inputBox input:focus ~ span, .container .contactForm .formBox .inputBox input:valid ~ span, .container .contactForm .formBox .inputBox textarea:focus ~ span, -.container .contactForm .formBox .inputBox textarea:valid ~ span -{ +.container .contactForm .formBox .inputBox textarea:valid ~ span { transform: translateY(-20px); - font-size: 12px; + font-size: 12px; font-weight: 400; letter-spacing: 1px; color: #095a55; font-weight: 500; } -/* Css for the submit button */ -.container .contactForm .formBox .inputBox input[type="submit"] -{ - position: relative; +.container .contactForm .formBox .inputBox input[type="submit"] { cursor: pointer; background: #095a55; border-radius: 20px; @@ -264,35 +227,29 @@ section::before border: none; max-width: 150px; padding: 12px; - } -.container .contactForm .formBox .inputBox input[type="submit"]:hover{ +.container .contactForm .formBox .inputBox input[type="submit"]:hover { background: #0d9480; } -/* make the form responsive */ -@media (max-width: 1200px) -{ - .container - { +/* Responsive adjustments */ +@media (max-width: 1200px) { + .container { width: 90%; - min-width: auto; margin: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.2); } - .container .contactInfo - { + .container .contactInfo { top: 0; height: 550px; position: relative; box-shadow: none; - border-radius: 0px; + border-radius: 0; } - .container .contactForm - { + .container .contactForm { position: relative; width: calc(100% - 350px); padding-left: 0; @@ -300,14 +257,12 @@ section::before padding: 40px; height: 550px; box-shadow: none; - border-radius: 0px; + border-radius: 0; } } -@media (max-width: 991px) -{ - section - { +@media (max-width: 991px) { + section { display: flex; justify-content: center; align-items: center; @@ -315,60 +270,49 @@ section::before background: #fff38e; } - section::before - { + section::before { display: none; } - .container - { - display: flex; + .container { flex-direction: column-reverse; } - .container .contactForm - { + .container .contactForm { width: 100%; height: auto; - border-radius: 0px; + border-radius: 0; } - .container .contactInfo - { + .container .contactInfo { width: 100%; height: auto; flex-direction: row; - border-radius: 0px; + border-radius: 0; } - .container .contactInfo ul.sci - { - position: relative; - display: flex; - justify-content: center; - align-items: center; + + .container .contactInfo ul.sci { + justify-content: center; + align-items: center; } } -@media (max-width: 600px) -{ - .container .contactForm - { +@media (max-width: 600px) { + .container .contactForm { padding: 25px; } - .container .contactInfo{ + .container .contactInfo { padding: 25px; flex-direction: column; align-items: flex-start; } - .container .contactInfo ul.sci - { + .container .contactInfo ul.sci { margin-top: 40px; } - .container .contactForm .formBox .inputBox.w50 - { + .container .contactForm .formBox .inputBox.w50 { width: 100%; } } diff --git a/index.html b/index.html index 2206baae..496c471f 100644 --- a/index.html +++ b/index.html @@ -493,18 +493,18 @@

Health Post

-
+ + + @@ -536,123 +536,167 @@

Patient Portal

-
+ +
+
+
+

Patient Portal

+

Access your medical records, lab results, and prescription history securely.

+
+
-
-
-

Make an Appointment

-

We listed the docs, we made you a form. You make us an appointment.



+ + +
+
+
+ + +
+ +
+
+

Make an Appointment

+

We listed the docs, we made you a form. You make us an appointment.

+ + +
+ +
+ +
+
+ +
+
+ +
+ + + +
+ + + + +
-
- -
- -
- - -
-
- -
-
- - -
-
-
- + + +
+ +
+
+ + +
+ + + + + + +
+ + +
+
+ +
+ + + + + +
- + - -
-
- -
-
- - -
-
-
-
- - -
-
- - -
-
- - -
-
- -
- -
- - - -
- -
-
+ + + +
diff --git a/style.css b/style.css index cb76f3ac..3a8b667d 100644 --- a/style.css +++ b/style.css @@ -1006,71 +1006,112 @@ section { -/*################----Appointments----################*/ -.layout { - /*border: 2px solid #ccc; */ - background-color: #3fbcc051; - border-radius: 30px; - padding: 50px; - width: 700px; +/* Overall section styling */ +#appointment.appointment.section-bg { + background-color:#022a2d; + padding: 50px 0; + box-sizing: border-box; + width: 90%; + max-width: 900px; margin: 0 auto; + padding: 20px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + text-align: center; + margin-bottom: 7%; + border-radius: 20px; + display: grid; + width: 30; } -.appointment .php-email-form { - width: 100%; +/* Section title styling */ +.section-title h2 { + font-size: 28px; + color: #fff; + display: flex; + margin-bottom: 20px; } -.appointment .php-email-form .form-group { - padding-bottom: 8px; +.section-title p { + color: #fff; + text-align: center; + font-size: 16px; + margin-bottom: 30px; + } -.appointment .php-email-form input, -.appointment .php-email-form textarea, -.appointment .php-email-form select { - margin-left: 175px; - border-radius: 0; - box-shadow: none; - font-size: 14px; - background: #badaf7; - border-radius: 10px; - padding: 10px !important; - color: #6c757d; +/* Form styling */ +.php-email-form { + display: flex; + flex-wrap: wrap; + color: #badaf7; + + } +.col-md-4.form-group { -.appointment .php-email-form input:focus, -.appointment .php-email-form textarea:focus, -.appointment .php-email-form select:focus { - border-color: #3fbcc0a6; + width: calc(50% - 15px); + +} +.form-group { + margin-bottom: 15px; + + width: calc(50% - 15px); + color: #badaf7; +} +.form-group.d-flex { + display: flex; + flex-wrap: wrap; + color: #badaf7; } -.appointment .php-email-form input, -.appointment .php-email-form select { - height: 44px; + +.form-control, +.form-select { + border: 1px solid #ccc; + padding: 10px; + border-radius: 4px; + height: 50px; width: 50%; + +} +.php-email-form .form-control, +.php-email-form .form-select { + background-color: #badaf7; } -.appointment .php-email-form textarea { - padding: 10px 12px; +.form-control:focus, +.form-select:focus { + border-color: #999; + outline: none; + color: #badaf7; } -.appointment .php-email-form button[type="submit"] { - margin-left: 250px; - background: #3fbcc0a6; - border: 0; - padding: 10px 35px; - color: #fff; - transition: 0.4s; - border-radius: 50px; +/* Text area styling */ +.form-group textarea { + resize: none; +} + +/* Submit button styling */ +.text-center button { + background-color:#55a5ea; + color: #000; + padding: 10px 20px; + border: none; + border-radius: 4px; + cursor: pointer; + transition: 0.3s ease; + margin-left: 120px; } -.appointment .php-email-form button[type="submit"]:hover { - background: #3fbcc0bd; +.text-center button:hover { + background-color: #4bb6b7; } + /*################----Doctors----################*/ .doctors { background: #000;