diff --git a/images/ambulance-gif.gif b/images/ambulance-gif.gif new file mode 100644 index 0000000..651a7cf Binary files /dev/null and b/images/ambulance-gif.gif differ diff --git a/index.html b/index.html index af057e6..599f246 100644 --- a/index.html +++ b/index.html @@ -1,71 +1,40 @@ - AmbuFlow - - - - - - - - + + - - + + + + - - -
- +
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+ -
-
-
-
+
+

Welcome to the Ambulance Monitoring System

@@ -553,69 +294,76 @@

Resource Management

- -
- Meet the Team -
-

Meet the Team

-

- Learn more about our dedicated team working tirelessly to ensure - efficient ambulance monitoring and resource management. -

- Go to Team -
+
+ +
+ Meet the Team +
+

Meet the Team

+

+ Learn more about our dedicated team working tirelessly to ensure + efficient ambulance monitoring and resource management. +

+ Go to Team +
+
- -
- Contact Us -
-

Contact Us

-

- Reach out to us for any inquiries or assistance. We're here to - help you 24/7 with our emergency services. -

- Go to Contact -
+ +
+ Contact Us +
+

Contact Us

+

+ Reach out to us for any inquiries or assistance. We're here to + help you 24/7 with our emergency services. +

+ Go to Contact
- - - - - - - - - - - - - - - - + + + - + + \ No newline at end of file diff --git a/src/css/indexmain.css b/src/css/indexmain.css new file mode 100644 index 0000000..c362a44 --- /dev/null +++ b/src/css/indexmain.css @@ -0,0 +1,454 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap'); + +* { + font-family: 'Poppins', sans-serif; +} + +html { + overflow-y: scroll; + overflow-x: hidden; + scroll-behavior: smooth; +} + +html::-webkit-scrollbar { + width: 9px; + transition: width 0.3s ease; + margin: 10px; +} + +html::-webkit-scrollbar-thumb { + border-radius: 10px; + background: rgba(216, 216, 216, 0.74); + box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); +} + +html::-webkit-scrollbar-thumb:window-inactive { + background: rgb(156, 156, 156); +} + + +body { + margin: 0; + font-family: Arial, sans-serif; + background-color: #e4eaf1; +} + +#loader-wrapper { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1001; +} + +#loader-wrapper .loader-section { + position: fixed; + top: 0; + width: 51%; + height: 100%; + background: #EEEEEE; + z-index: 1000; + -webkit-transform: translateX(0); + transform: translateX(0); +} + +#loader-wrapper .loader-section.section-left { + left: 0; +} + +#loader-wrapper .loader-section.section-right { + right: 0; +} + +#loader { + display: block; + position: relative; + left: 50%; + top: 50%; + width: 150px; + height: 150px; + margin: -75px 0 0 -75px; + border-radius: 50%; + border: 3px solid transparent; + border-top-color: #DC5F00; + -webkit-animation: spin 2s linear infinite; + animation: spin 2s linear infinite; + z-index: 99999; +} + +#loader:before { + content: ""; + position: absolute; + top: 5px; + left: 5px; + right: 5px; + bottom: 5px; + border-radius: 50%; + border: 3px solid transparent; + border-top-color: #373A40; + -webkit-animation: spin 3s linear infinite; + animation: spin 3s linear infinite; +} + +#loader:after { + content: ""; + position: absolute; + top: 15px; + left: 15px; + right: 15px; + bottom: 15px; + border-radius: 50%; + border: 3px solid transparent; + border-top-color: #686D76; + -webkit-animation: spin 1.5s linear infinite; + animation: spin 1.5s linear infinite; +} + +.loaded #loader-wrapper { + visibility: hidden; + -webkit-transform: translateY(-100%); + transform: translateY(-100%); + -webkit-transition: all 0.3s 1s ease-out; + transition: all 0.3s 1s ease-out; +} + +.loaded #loader-wrapper .loader-section.section-left { + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); +} + +.loaded #loader-wrapper .loader-section.section-right { + -webkit-transform: translateX(100%); + transform: translateX(100%); + -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); +} + +.loaded #loader { + opacity: 0; + -webkit-transition: all 0.3s ease-out; + transition: all 0.3s ease-out; +} + +@-webkit-keyframes spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +@keyframes spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +.container { + margin: 0 auto; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 10px 20px; +} + +.brand-name { + font-family: 'poppins', sans-serif; + font-weight: bold; + margin-right: 0.5rem; + font-size: 1.5rem; + color: #2980B9; +} + +.ambu { + font-family: 'poppins', sans-serif; + font-weight: bold; + font-size: 1.5rem; + color: #e81a1a; +} + +.logo { + display: flex; + align-items: center; + margin-top: 0.7rem; +} + +.logo img { + margin: 0 5px; +} + +.logo span { + font-size: 2rem; + font-weight: 600; +} + +.menu { + display: flex; + justify-content: center; + align-items: center; + position: fixed; + width: 100%; + bottom: 1rem; + z-index: 1000; +} + +.menu ul { + background-color: rgb(240, 236, 236); + display: flex; + justify-content: center; + align-items: center; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.40); + list-style: none; + padding: 0.6rem 0.4rem; + border-radius: 50px; + overflow: hidden; +} + +.menu_links { + padding: 0.55rem; + color: rgb(78, 77, 77); + text-decoration: none; + font-size: 13.5px; + display: block; + border-radius: 50px; + position: relative; +} + +.menu_links.active { + color: white; + background-color: #000; +} + +.menu ul li { + margin-left: 7px; +} + +.menu ul li:first-child { + margin-left: 3px; +} + +.menu ul li:first-child a { + padding: 5px 8px; + position: relative; + top: 3px; + /* transform: translateY(2px); */ + color: #373A40; +} +.menu ul li:first-child:hover { + background-color: rgb(226, 223, 223); + border-radius: 50%; +} + +.menu_links span { + display: block; + transition: 0.5s; +} + +.menu_links:hover span { + transform: translateY(-70px); +} + +.menu_links:hover { + background-color: rgb(226, 223, 223); + /* background-color: rgb(226, 223, 223); */ + transition: 0.5s; +} + +.menu_links::before { + content: ""; + position: absolute; + content: attr(data-link); + top: 100%; + opacity: 0; + transition: 0.5s; +} + +.menu_links:hover:before { + top: 20%; + opacity: 1; +} + +.menu_links.active:hover { + color: white; + background-color: #000; +} + +.menu_links.active:before { + color: white; + background-color: #000; +} + + +.main_content { + display: flex; + justify-content: space-between; + align-items: center; +} + +.main_heading { + display: flex; + justify-content: center; + align-items: flex-start; + flex-direction: column; + width: 42rem; + margin-left: 4rem; + text-align: left; +} + +.main_heading h1 { + position: relative; + padding: 0; + margin: 0; + color: #5875b3; + font-size: 3.5rem; +} + +.main_heading h2 { + position: relative; + font-size: 3.5rem; + color: white; + margin: 0; + -webkit-text-stroke: 0.1vw #2c3e50; + text-transform: uppercase; +} + +.main_heading h2::before { + content: attr(data-link_h2); + position: absolute; + top: 0; + left: 0; + width: 0; + height: 100%; + color: #f03a3a; + -webkit-text-stroke: 0vw #f03a3a; + border-right: 2px solid #f03a3a; + overflow: hidden; + animation: animate 6s linear infinite; +} + +@keyframes animate { + + 0%, + 10%, + 100% { + width: 0%; + } + + 70%, + 90% { + width: 100%; + } +} + +.main_heading p { + font-size: 1.3rem; + font-weight: 500; +} + +.main_content img { + width: 40rem; +} + +.buttons { + display: flex; + align-items: center; +} + +.buttons a { + text-decoration: none; + padding: 10px 20px; + border-radius: 50px; + margin-left: 10px; + font-size: 0.9rem; + font-weight: 500; + transition: background-color 0.3s, color 0.3s; +} + +.get-started { + background-color: #5875b3; + color: #ffffff; + display: flex; +} + +.get-started ion-icon { + font-size: 23px; + padding-left: 8px; + position: relative; + bottom: 2px; +} + +.get-started:hover { + /* background-color: #2563eb; */ + transform: scale(1.1); + transition: 0.5s; +} + +.quick-ft { + display: flex; + flex-direction: column; + /* justify-content: start; */ + align-items: start; + + margin-left: 3rem; + +} + + +@media (max-width: 768px) { + .menu ul { + flex-direction: column; + background-color: #f9fafb; + position: absolute; + top: 60px; + left: 0; + width: 100%; + display: none; + } + + .menu ul.show { + display: flex; + } + + .menu-toggle { + display: block; + cursor: pointer; + } + + .menu ul li { + margin: 10px 0; + } + + .menu_links { + padding: 10px 20px; + + } +} + +footer { + background-color: #C4D7FF; + color: #f3f4f6; + text-align: center; + padding: 15px 0; + width: 100%; +} + +.subtext { + font-size: 1.2rem; + color: #1d4ed8; + margin-top: 20px; +} \ No newline at end of file diff --git a/team.html b/team.html index 6149bde..2eb55ed 100644 --- a/team.html +++ b/team.html @@ -49,11 +49,11 @@ .team-section { - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 22px; - animation: fadeIn 1s ease-in-out; + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 22px; + animation: fadeIn 1s ease-in-out; } @@ -136,9 +136,10 @@ /* Icon color change to blue on hover */ } - a .social-icon .twitter:hover{ + a .social-icon .twitter:hover { color: white; } + .fa-x-twitter:hover { color: black; /* Icon color change to black on hover */ @@ -231,18 +232,18 @@ -
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
-
@@ -262,147 +263,162 @@ style="width: 50px; height: auto" />
- -
- - Get started -
-
- - -
-

Meet Our Team

-
-
- Service Manager -

Service Manager

-

Responsible for coordinating ambulance services and ensuring timely responses.

-
-
- Rescue Specialist -

Rescue Specialist

-

Trained to provide immediate care and transport patients safely to hospitals.

-
-
- Call Operator -

Call Operator

-

First point of contact for emergencies, dispatching ambulances efficiently.

+ +
+ + Get started +
-
- GPS Technician -

GPS Technician

-

Manages real-time tracking systems for effective ambulance navigation.

+ + +
+

Meet Our Team

+
+
+ Service Manager +

Service Manager

+

Responsible for coordinating ambulance services and ensuring timely responses.

+
+
+ Rescue Specialist +

Rescue Specialist

+

Trained to provide immediate care and transport patients safely to hospitals.

+
+
+ Call Operator +

Call Operator

+

First point of contact for emergencies, dispatching ambulances efficiently.

+
+
+ GPS Technician +

GPS Technician

+

Manages real-time tracking systems for effective ambulance navigation.

+
-
- -
-< + +
+ <
+ + +
+
+ Contact Us +

Contact Us

+
+
+

+ Reach out to us for any inquiries or assistance. We're here to + help you 24/7 with our emergency services. +

+ Go to Contact +
+
+ +
+
- - -
-
+
+
+ Contact Us

Contact Us

-
-
-

- Reach out to us for any inquiries or assistance. We're here to - help you 24/7 with our emergency services. -

- Go to Contact -
+
- +
+

+ Reach out to us for any inquiries or assistance. We're here to + help you 24/7 with our emergency services. +

+ Go to Contact +
+
-
-
-
- - Contact Us -

Contact Us

- -
-
-

- Reach out to us for any inquiries or assistance. We're here to - help you 24/7 with our emergency services. -

- Go to Contact -
-
-
- -
- - - - - - - - - - - +
+ + + + + + + +