├── 4-dots.png
├── doc-1.png
├── doc-2.png
├── doc-3.png
├── doc-4.png
├── header.png
├── about-img.png
├── banner-1-img.png
├── banner-2-img.png
├── close-icon.png
├── doc-group-2.png
├── banner-two-bg.png
├── ham-menu-icon.png
├── script.js
├── README.md
├── index.html
└── style.css


/4-dots.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mohittiwari98/Hospital-website/HEAD/4-dots.png


--------------------------------------------------------------------------------
/doc-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mohittiwari98/Hospital-website/HEAD/doc-1.png


--------------------------------------------------------------------------------
/doc-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mohittiwari98/Hospital-website/HEAD/doc-2.png


--------------------------------------------------------------------------------
/doc-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mohittiwari98/Hospital-website/HEAD/doc-3.png


--------------------------------------------------------------------------------
/doc-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mohittiwari98/Hospital-website/HEAD/doc-4.png


--------------------------------------------------------------------------------
/header.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mohittiwari98/Hospital-website/HEAD/header.png


--------------------------------------------------------------------------------
/about-img.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mohittiwari98/Hospital-website/HEAD/about-img.png


--------------------------------------------------------------------------------
/banner-1-img.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mohittiwari98/Hospital-website/HEAD/banner-1-img.png


--------------------------------------------------------------------------------
/banner-2-img.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mohittiwari98/Hospital-website/HEAD/banner-2-img.png


--------------------------------------------------------------------------------
/close-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mohittiwari98/Hospital-website/HEAD/close-icon.png


--------------------------------------------------------------------------------
/doc-group-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mohittiwari98/Hospital-website/HEAD/doc-group-2.png


--------------------------------------------------------------------------------
/banner-two-bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mohittiwari98/Hospital-website/HEAD/banner-two-bg.png


--------------------------------------------------------------------------------
/ham-menu-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mohittiwari98/Hospital-website/HEAD/ham-menu-icon.png


--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
 1 | //script file or javascript part
 2 | //const navbarshowBtn 
 3 | //navbar
 4 | const navbarShowBtn = document.querySelector('.navbar-show-btn');
 5 | const navbarCollapseDiv = document.querySelector('.navbar-collapse');
 6 | const navbarHideBtn = document.querySelector('.navbar-hide-btn');
 7 | 
 8 | navbarShowBtn.addEventListener('click', function(){
 9 |     navbarCollapseDiv.classList.add('navbar-show');
10 | });
11 | navbarHideBtn.addEventListener('click', function(){
12 |     navbarCollapseDiv.classList.remove('navbar-show');
13 | });
14 | 
15 | // changing search icon image on window resize
16 | window.addEventListener('resize', changeSearchIcon);
17 | function changeSearchIcon(){
18 |     let winSize = window.matchMedia("(min-width: 1200px)");
19 |     if(winSize.matches){
20 |         document.querySelector('.search-icon img').src = "images/search-icon.png";
21 |     } else {
22 |         document.querySelector('.search-icon img').src = "images/search-icon-dark.png";
23 |     }
24 | }
25 | changeSearchIcon();
26 | 
27 | // stopping all animation and transition
28 | let resizeTimer;
29 | window.addEventListener('resize', () =>{
30 |     document.body.classList.add('resize-animation-stopper');
31 |     clearTimeout(resizeTimer);
32 |     resizeTimer = setTimeout(() => {
33 |         document.body.classList.remove('resize-animation-stopper');
34 |     }, 400);
35 | });
36 | 
37 | 
38 | 
39 | 
40 | 
41 | 
42 | 
43 | 
44 | 
45 | 
46 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Hospital-website
 2 |  <div align="center">
 3 |   <img src="banner-2-img.png" alt="DevOpsShack Banner">
 4 | </div>
 5 | 🏥 Hospital Website
 6 | A fully responsive, modern, and user-friendly Hospital Management Website built using HTML, CSS, and JavaScript. It provides a seamless experience for patients, doctors, and administrative staff — whether for booking appointments, viewing services, or contacting the hospital.
 7 | 
 8 | <div align="center">
 9 |   <img src="banner-1-img.png" alt="DevOpsShack Banner">
10 | </div>
11 | 
12 | 🏗️ Features
13 | 🖼️ Landing Page with welcoming hero section
14 | 
15 | 🩺 Doctor Profiles with specialization, experience, and contact
16 | 
17 | 🗓️ Appointment Booking Form
18 | 
19 | 🏥 Department Pages (e.g., Cardiology, Orthopedics, Neurology)
20 | 
21 | 📰 Blog or Health Tips section
22 | 
23 | 📞 Contact Page with embedded map and form
24 | 
25 | 🌓 Dark/Light Mode Toggle
26 | 
27 | ### Techstack
28 | ![Context-API](https://img.shields.io/badge/Context--Api-000000?style=for-the-badge&logo=react) ![Chart.js](https://img.shields.io/badge/chart.js-F5788D.svg?style=for-the-badge&logo=chart.js&logoColor=white) ![Next JS](https://img.shields.io/badge/Next-black?style=for-the-badge&logo=next.js&logoColor=white) ![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white) ![Three js](https://img.shields.io/badge/threejs-black?style=for-the-badge&logo=three.js&logoColor=white) ![Web3.js](https://img.shields.io/badge/web3.js-F16822?style=for-the-badge&logo=web3.js&logoColor=white) ![FastAPI](https://img.shields.io/badge/FastAPI-005571?style=for-the-badge&logo=fastapi)
29 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Revo</title>
  8 |     
  9 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 10 |     <!-- normalize css -->
 11 |     <link rel = "stylesheet" href = "normalize.css">
 12 |     <!-- custom css -->
 13 |     <link rel = "stylesheet" href = "style.css">
 14 | </head>
 15 | <body>
 16 |     
 17 | 
 18 |     <!-- header -->
 19 |     <header class = "header bg-blue">
 20 |         <nav class = "navbar bg-blue">
 21 |             <div class = "container flex">
 22 |                 <a href = "index.html" class = "navbar-brand">
 23 |                     <img src = "logo.png" alt = "site logo">
 24 |                 </a>
 25 |                 <button type = "button" class = "navbar-show-btn">
 26 |                     <img src = "ham-menu-icon.png">
 27 |                 </button>
 28 | 
 29 |                 <div class = "navbar-collapse bg-white">
 30 |                     <button type = "button" class = "navbar-hide-btn">
 31 |                         <img src = "close-icon.png">
 32 |                     </button>
 33 |                     <ul class = "navbar-nav">
 34 |                         <li class = "nav-item">
 35 |                             <a href = "#" class = "nav-link">Home</a>
 36 |                         </li>
 37 |                         <li class = "nav-item">
 38 |                             <a href = "#" class = "nav-link">About</a>
 39 |                         </li>
 40 |                         <li class = "nav-item">
 41 |                             <a href = "#" class = "nav-link">Service</a>
 42 |                         </li>
 43 |                         <li class = "nav-item">
 44 |                             <a href = "#" class = "nav-link">Doctors</a>
 45 |                         </li>
 46 |                         <li class = "nav-item">
 47 |                             <a href = "#" class = "nav-link">Departments</a>
 48 |                         </li>
 49 |                         <li class = "nav-item">
 50 |                             <a href = "#" class = "nav-link">Blog</a>
 51 |                         </li>
 52 |                         <li class = "nav-item">
 53 |                             <a href = "#" class = "nav-link">Contact</a>
 54 |                         </li>
 55 |                     </ul>
 56 |                     <div class = "search-bar">
 57 |                         <form>
 58 |                             <div class = "search-bar-box flex">
 59 |                                 <span class = "search-icon flex">
 60 |                                     <img src = "search-icon-dark.png">
 61 |                                 </span>
 62 |                                 <input type = "search" class = "search-control" placeholder="Search here">
 63 |                             </div>
 64 |                         </form>
 65 |                     </div>
 66 |                 </div> 
 67 |             </div>
 68 |         </nav>
 69 | 
 70 |         <div class = "header-inner text-white text-center">
 71 |             <div class = "container grid">
 72 |                 <div class = "header-inner-left">
 73 |                     <h1>your most trusted<br> <span>health partner</span></h1>
 74 |                     <p class = "lead">the best match services for you</p>
 75 |                     <p class = "text text-md">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam, nulla odit esse necessitatibus corporis voluptatem?</p>
 76 |                     <div class = "btn-group">
 77 |                         <a href = "#" class = "btn btn-white">Learn More</a>
 78 |                         <a href = "#" class = "btn btn-light-blue">Sign In</a>
 79 |                     </div>
 80 |                 </div>
 81 |                 <div class = "header-inner-right">
 82 |                     <img src = "header.png">
 83 |                 </div>
 84 |             </div>
 85 |         </div>
 86 |     </header>
 87 |     <!-- end of header -->
 88 | 
 89 |     <main>
 90 |         <!-- about section -->
 91 |         <section id = "about" class = "about py">
 92 |             <div class = "about-inner">
 93 |                 <div class = "container grid">
 94 |                     <div class = "about-left text-center">
 95 |                         <div class = "section-head">
 96 |                             <h2>About Us</h2>
 97 |                             <div class = "border-line"></div>
 98 |                         </div>
 99 |                         <p class = "text text-lg">Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae molestias delectus facilis, temporibus eum consectetur, a debitis exercitationem quae distinctio aliquid ea ipsam vitae esse amet soluta maxime dolorem? Inventore ut maiores illo ipsum nisi, nulla eligendi unde reiciendis quod voluptas velit sit voluptate perferendis cum pariatur molestiae tenetur repellat!</p>
100 |                         <a href = "#" class = "btn btn-white">Learn More</a>
101 |                     </div>
102 |                     <div class = "about-right flex">
103 |                         <div class = "img">
104 |                             <img src = "about-img.png">
105 |                         </div>
106 |                     </div>
107 |                 </div>
108 |             </div>
109 |         </section>
110 |         <!-- end of about section -->
111 | 
112 |         <!-- banner one -->
113 |         <section id = "banner-one" class = "banner-one text-center">
114 |             <div class = "container text-white">
115 |                 <blockquote class = "lead"><i class = "fas fa-quote-left"></i> When you are young and healthy, it never occurs to you that in a single second your whole life could change. <i class = "fas fa-quote-right"></i></blockquote>
116 |                 <small class = "text text-sm">- Anonim Nano</small>
117 |             </div>
118 |         </section>
119 |         <!-- end of banner one -->
120 | 
121 |         <!-- services section -->
122 |         <section id = "services" class = "services py">
123 |             <div class = "container">
124 |                 <div class = "section-head text-center">
125 |                     <h2 class = "lead">The Best Doctor gives the least medicines</h2>
126 |                     <p class = "text text-lg">A perfect way to show your hospital services</p>
127 |                     <div class = "line-art flex">
128 |                         <div></div>
129 |                         <img src = "4-dots.png">
130 |                         <div></div>
131 |                     </div>
132 |                 </div>
133 |                 <div class = "services-inner text-center grid">
134 |                     <article class = "service-item">
135 |                         <div class = "icon">
136 |                             <img src = "service-icon-1.png">
137 |                         </div>
138 |                         <h3>Cardio Monitoring</h3>
139 |                         <p class = "text text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis possimus doloribus facilis velit, assumenda tempora quas mollitia quos voluptatibus consequatur!</p>
140 |                     </article>
141 | 
142 |                     <article class = "service-item">
143 |                         <div class = "icon">
144 |                             <img src = "service-icon-2.png">
145 |                         </div>
146 |                         <h3>Medical Treatment</h3>
147 |                         <p class = "text text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis possimus doloribus facilis velit, assumenda tempora quas mollitia quos voluptatibus consequatur!</p>
148 |                     </article>
149 | 
150 |                     <article class = "service-item">
151 |                         <div class = "icon">
152 |                             <img src = "service-icon-3.png">
153 |                         </div>
154 |                         <h3>Emergency Help</h3>
155 |                         <p class = "text text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis possimus doloribus facilis velit, assumenda tempora quas mollitia quos voluptatibus consequatur!</p>
156 |                     </article>
157 | 
158 |                     <article class = "service-item">
159 |                         <div class = "icon">
160 |                             <img src = "service-icon-4.png">
161 |                         </div>
162 |                         <h3>First Aid</h3>
163 |                         <p class = "text text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis possimus doloribus facilis velit, assumenda tempora quas mollitia quos voluptatibus consequatur!</p>
164 |                     </article>
165 |                 </div>
166 |             </div>
167 |         </section>
168 |         <!-- end of services section -->
169 | 
170 |         <!-- banner two section -->
171 |         <section id = "banner-two" class = "banner-two text-center">
172 |             <div class = "container grid">
173 |                 <div class = "banner-two-left">
174 |                     <img src = "banner-2-img.png">
175 |                 </div>
176 |                 <div class = "banner-two-right">
177 |                     <p class = "lead text-white">When you are young and healthy, it never occurs to you that in a single second your whole life could change.</p>
178 |                     <div class = "btn-group">
179 |                         <a href = "#" class = "btn btn-white">Learn More</a>
180 |                         <a href = "#" class = "btn btn-light-blue">Sign In</a>
181 |                     </div>
182 |                 </div>
183 |             </div>
184 |         </section>
185 |         <!-- end of banner two section -->
186 | 
187 |         <!-- doctors section -->
188 |         <section id = "doc-panel" class = "doc-panel py">
189 |             <div class = "container">
190 |                 <div class = "section-head">
191 |                     <h2>Our Doctor Panel</h2>
192 |                 </div>
193 | 
194 |                 <div class = "doc-panel-inner grid">
195 |                     <div class = "doc-panel-item">
196 |                         <div class = "img flex">
197 |                             <img src = "doc-1.png" alt = "doctor image">
198 |                             <div class = "info text-center bg-blue text-white flex">
199 |                                 <p class = "lead">mayank guppta</p>
200 |                                 <p class = "text-lg">Medicine</p>
201 |                             </div>
202 |                         </div>
203 |                     </div>
204 | 
205 |                     <div class = "doc-panel-item">
206 |                         <div class = "img flex">
207 |                             <img src = "doc-2.png" alt = "doctor image">
208 |                             <div class = "info text-center bg-blue text-white flex">
209 |                                 <p class = "lead">elizabeth ira</p>
210 |                                 <p class = "text-lg">Cardiology</p>
211 |                             </div>
212 |                         </div>
213 |                     </div>
214 | 
215 |                     <div class = "doc-panel-item">
216 |                         <div class = "img flex">
217 |                             <img src = "doc-3.png" alt = "doctor image">
218 |                             <div class = "info text-center bg-blue text-white flex">
219 |                                 <p class = "lead">ananya</p>
220 |                                 <p class = "text-lg">Medicine</p>
221 |                             </div>
222 |                         </div>
223 |                     </div>
224 |                 </div>
225 |             </div>
226 |         </section>
227 |         <!-- end of doctors section -->
228 | 
229 |         <!-- package services section -->
230 |         <section id = "package-service" class = "package-service py text-center">
231 |             <div class = "container">
232 |                 <div class = "package-service-head text-white">
233 |                     <h2>Package Service</h2>
234 |                     <p class = "text text-lg">Best service package for you</p>
235 |                 </div>
236 |                 <div class = "package-service-inner grid">
237 |                     <div class = "package-service-item bg-white">
238 |                         <div class = "icon flex">
239 |                             <i class = "fas fa-phone fa-2x"></i>
240 |                         </div>
241 |                         <h3>Regular Case</h3>
242 |                         <p class = "text text-sm">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur, asperiores. Expedita, reiciendis quos beatae at consequatur voluptatibus fuga iste adipisci.</p>
243 |                         <a href = "#" class = "btn btn-blue">Read More</a>
244 |                     </div>
245 | 
246 |                     <div class = "package-service-item bg-white">
247 |                         <div class = "icon flex">
248 |                             <i class = "fas fa-calendar-alt fa-2x"></i>
249 |                         </div>
250 |                         <h3>Serious Case</h3>
251 |                         <p class = "text text-sm">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur, asperiores. Expedita, reiciendis quos beatae at consequatur voluptatibus fuga iste adipisci.</p>
252 |                         <a href = "#" class = "btn btn-blue">Read More</a>
253 |                     </div>
254 |                     
255 |                     <div class = "package-service-item bg-white">
256 |                         <div class = "icon flex">
257 |                             <i class = "fas fa-comments fa-2x"></i>
258 |                         </div>
259 |                         <h3>Emergency Case</h3>
260 |                         <p class = "text text-sm">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur, asperiores. Expedita, reiciendis quos beatae at consequatur voluptatibus fuga iste adipisci.</p>
261 |                         <a href = "#" class = "btn btn-blue">Read More</a>
262 |                     </div>
263 |                 </div>
264 |             </div>
265 |         </section>
266 |         <!-- end of package services section -->
267 | 
268 |         <!-- posts section -->
269 |         <section id = "posts" class = "posts py">
270 |             <div class = "container">
271 |                 <div class = "section-head">
272 |                     <h2>Latest Post</h2>
273 |                 </div>
274 |                 <div class = "posts-inner grid">
275 |                     <article class = "post-item bg-white">
276 |                         <div class = "img">
277 |                             <img src = "post-1.jpg">
278 |                         </div>
279 |                         <div class = "content">
280 |                             <h4>Inspiring stories of person and family centered care during a global pandemic.</h4>
281 |                             <p class = "text text-sm">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolor voluptas eius recusandae sunt obcaecati esse facere cumque. Aliquid, cupiditate debitis.</p>
282 |                             <p class = "text text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis quia ipsam, quis iure sed nulla.</p>
283 |                             <div class = "info flex">
284 |                                 <small class = "text text-sm"><i class = "fas fa-clock"></i> October 27, 2021</small>
285 |                                 <small class = "text text-sm"><i class = "fas fa-comment"></i> 5 comments</small>
286 |                             </div>
287 |                         </div>
288 |                     </article>
289 | 
290 |                     <article class = "post-item bg-white">
291 |                         <div class = "img">
292 |                             <img src = "post-2.jpg">
293 |                         </div>
294 |                         <div class = "content">
295 |                             <h4>Inspiring stories of person and family centered care during a global pandemic.</h4>
296 |                             <p class = "text text-sm">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolor voluptas eius recusandae sunt obcaecati esse facere cumque. Aliquid, cupiditate debitis.</p>
297 |                             <p class = "text text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis quia ipsam, quis iure sed nulla.</p>
298 |                             <div class = "info flex">
299 |                                 <small class = "text text-sm"><i class = "fas fa-clock"></i> October 27, 2021</small>
300 |                                 <small class = "text text-sm"><i class = "fas fa-comment"></i> 5 comments</small>
301 |                             </div>
302 |                         </div>
303 |                     </article>
304 | 
305 |                     <article class = "post-item bg-white">
306 |                         <div class = "img">
307 |                             <img src = "post-3.jpg">
308 |                         </div>
309 |                         <div class = "content">
310 |                             <h4>Inspiring stories of person and family centered care during a global pandemic.</h4>
311 |                             <p class = "text text-sm">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolor voluptas eius recusandae sunt obcaecati esse facere cumque. Aliquid, cupiditate debitis.</p>
312 |                             <p class = "text text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis quia ipsam, quis iure sed nulla.</p>
313 |                             <div class = "info flex">
314 |                                 <small class = "text text-sm"><i class = "fas fa-clock"></i> October 27, 2021</small>
315 |                                 <small class = "text text-sm"><i class = "fas fa-comment"></i> 5 comments</small>
316 |                             </div>
317 |                         </div>
318 |                     </article>
319 |                 </div>
320 |             </div>
321 |         </section>
322 |         <!-- end of posts section -->
323 | 
324 |         <!-- contact section -->
325 |         <section id = "contact" class = "contact py">
326 |             <div class = "container grid">
327 |                 <div class = "contact-left">
328 |                     <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2384.6268289831164!2d-6.214682984112116!3d53.29621947996855!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x486709e0c9c80f8f%3A0x92f408d10f2277c2!2sREVO!5e0!3m2!1sen!2snp!4v1636264848776!5m2!1sen!2snp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
329 |                 </div>
330 |                 <div class = "contact-right text-white text-center bg-blue">
331 |                     <div class = "contact-head">
332 |                         <h3 class = "lead">Contact Us</h3>
333 |                         <p class = "text text-md">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga.</p>
334 |                     </div>
335 |                     <form>
336 |                         <div class = "form-element">
337 |                             <input type = "text" class = "form-control" placeholder="Your name">
338 |                         </div>
339 |                         <div class = "form-element">
340 |                             <input type = "email" class = "form-control" placeholder="Your email">
341 |                         </div>
342 |                         <div class = "form-element">
343 |                             <textarea rows = "5" placeholder="Your Message" class = "form-control"></textarea>
344 |                         </div>
345 |                         <button type = "submit" class = "btn btn-white btn-submit">
346 |                             <i class = "fas fa-arrow-right"></i> Send Message
347 |                         </button>
348 |                     </form>
349 |                 </div>
350 |             </div>
351 |         </section>
352 |         <!-- end of contact section -->
353 |     </main>
354 | 
355 |     <!-- footer  -->
356 |     <footer id = "footer" class = "footer text-center">
357 |         <div class = "container">
358 |             <div class = "footer-inner text-white py grid">
359 |                 <div class = "footer-item">
360 |                     <h3 class = "footer-head">about us</h3>
361 |                     <div class = "icon">
362 |                         <img src = "logo.png">
363 |                     </div>
364 |                     <p class = "text text-md">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis saepe incidunt fugiat optio corporis ea!</p>
365 |                     <address>
366 |                         Medic Clinic <br>
367 |                         69 Deerpark Rd, Mount Merrion <br>
368 |                         Co. Dublin, A94 E9D3 <br>
369 |                         Ireland
370 |                     </address>
371 |                 </div>
372 | 
373 |                 <div class = "footer-item">
374 |                     <h3 class = "footer-head">tags</h3>
375 |                     <ul class = "tags-list flex">
376 |                         <li>medical care</li>
377 |                         <li>emergency</li>
378 |                         <li>therapy</li>
379 |                         <li>surgery</li>
380 |                         <li>medication</li>
381 |                         <li>nurse</li>
382 |                     </ul>
383 |                 </div>
384 | 
385 |                 <div class = "footer-item">
386 |                     <h3 class = "footer-head">Quick Links</h3>
387 |                     <ul>
388 |                         <li><a href = "#" class = "text-white">Our Services</a></li>
389 |                         <li><a href = "#" class = "text-white">Our Plan</a></li>
390 |                         <li><a href = "#" class = "text-white">Privacy Policy</a></li>
391 |                         <li><a href = "#" class = "text-white">Appointment Schedule</a></li>
392 |                     </ul>
393 |                 </div>
394 | 
395 |                 <div class = "footer-item">
396 |                     <h3 class = "footer-head">make an appointment</h3>
397 |                     <p class = "text text-md">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, omnis.</p>
398 |                     <ul class = "appointment-info">
399 |                         <li>8:00 AM - 11:00 AM</li>
400 |                         <li>2:00 PM - 05:00 PM</li>
401 |                         <li>8:00 PM - 11:00 PM</li>
402 |                         <li>
403 |                             <i class = "fas fa-envelope"></i>
404 |                             <span>revomedic@gmail.com</span>
405 |                         </li>
406 |                         <li>
407 |                             <i class = "fas fa-phone"></i>
408 |                             <span>+003 478 2834(00)</span>
409 |                         </li>
410 |                     </ul>
411 |                 </div>
412 |             </div>
413 | 
414 |             <div class = "footer-links">
415 |                 <ul class = "flex">
416 |                     <li><a href = "#" class = "text-white flex"> <i class = "fab fa-facebook-f"></i></a></li>
417 |                     <li><a href = "#" class = "text-white flex"> <i class = "fab fa-twitter"></i></a></li>
418 |                     <li><a href = "#" class = "text-white flex"> <i class = "fab fa-linkedin"></i></a></li>
419 |                 </ul>
420 |             </div>
421 |         </div>
422 |     </footer>
423 |     <!-- end of footer  -->
424 | 
425 | 
426 |     <!-- custom js -->
427 |     <script src = "script.js"></script>
428 | </body>
429 | </html>
430 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
   1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
   2 | 
   3 | 
   4 | :root{
   5 |     --fros-blue-color: #0050d5;
   6 |     --light-blue-color: #16c5ff;
   7 |     --dark-color: #202020;
   8 |     --light-gray: #dedede;
   9 |     --dark-gray: #a1a1a0;
  10 |     --light-color: #fff;
  11 |     --poppins-font: 'Poppins', sans-serif;
  12 |     --transition: all 0.3s ease-in-out;
  13 |     --box-shadow: 0 0 15px 2px rgba(0, 0, 0, 0.2)!important;
  14 | }
  15 | 
  16 | /* some resets */
  17 | *{
  18 |     padding: 0;
  19 |     margin: 0;
  20 |     -webkit-box-sizing: border-box;
  21 |             box-sizing: border-box;
  22 | }
  23 | html{
  24 |     font-size: 10px;
  25 | }
  26 | body{
  27 |     font-size: 1.6rem;
  28 |     line-height: 1.6;
  29 |     font-family: var(--poppins-font);
  30 | }
  31 | img{
  32 |     width: 100%;
  33 |     display: block;
  34 | }
  35 | ul{
  36 |     list-style: none;
  37 | }
  38 | a{
  39 |     text-decoration: none;
  40 |     color: var(--dark-color);
  41 | }
  42 | .bg-blue{
  43 |     background-color: var(--fros-blue-color);
  44 | }
  45 | .bg-white{
  46 |     background-color: var(--light-color);
  47 | }
  48 | .text-blue{
  49 |     color: var(--fros-blue-color);
  50 | }
  51 | .text-white{
  52 |     color: var(--light-color);
  53 | }
  54 | 
  55 | /* button */
  56 | .btn, button{
  57 |     border: none;
  58 |     cursor: pointer;
  59 | }
  60 | .btn{
  61 |     padding: .9rem 4rem;
  62 |     border-radius: 3rem;
  63 |     display: inline-block;
  64 |     background-color: var(--light-color);
  65 |     font-weight: 500;
  66 |     -webkit-box-shadow: 0 0 7px 2px rgba(0, 0, 0, 0.2);
  67 |             box-shadow: 0 0 7px 2px rgba(0, 0, 0, 0.2);
  68 |     -webkit-transition: var(--transition);
  69 |     -o-transition: var(--transition);
  70 |     transition: var(--transition);
  71 | }
  72 | .btn-white{
  73 |     color: var(--fros-blue-color);
  74 | }
  75 | .btn-light-blue{
  76 |     background-color: var(--light-blue-color);
  77 |     color: var(--light-color);
  78 | }
  79 | .btn-blue{
  80 |     background-color: var(--fros-blue-color);
  81 |     color: var(--light-color);
  82 | }
  83 | .btn-group{
  84 |     display: -webkit-box;
  85 |     display: -ms-flexbox;
  86 |     display: flex;
  87 |     -ms-flex-wrap: wrap;
  88 |         flex-wrap: wrap;
  89 |     -webkit-box-align: center;
  90 |         -ms-flex-align: center;
  91 |             align-items: center;
  92 | }
  93 | .btn-group .btn{
  94 |     width: 100%;
  95 | }
  96 | .btn-group .btn:first-child{
  97 |     margin-bottom: 2rem;
  98 | }
  99 | .btn:hover{
 100 |     -webkit-box-shadow: var(--box-shadow);
 101 |             box-shadow: var(--box-shadow);
 102 | }
 103 | 
 104 | .container{
 105 |     max-width: 95vw;
 106 |     margin: 0 auto;
 107 |     padding: 0 1rem;
 108 | }
 109 | .flex{
 110 |     display: -webkit-box;
 111 |     display: -ms-flexbox;
 112 |     display: flex;
 113 |     -webkit-box-align: center;
 114 |         -ms-flex-align: center;
 115 |             align-items: center;
 116 |     -webkit-box-pack: center;
 117 |         -ms-flex-pack: center;
 118 |             justify-content: center;
 119 | }
 120 | .grid{
 121 |     display: grid;
 122 | }
 123 | input{
 124 |     outline: 2;
 125 | }
 126 | .lead{
 127 |     font-size: 25px;
 128 |     text-transform: capitalize;
 129 | }
 130 | h1, h2, h3{
 131 |     text-transform: capitalize;
 132 |     margin-top: 0;
 133 |     line-height: 1.3;
 134 | }
 135 | .text{
 136 |     opacity: 0.9;
 137 | }
 138 | .text-md{
 139 |     font-size: 1.5rem;
 140 | }
 141 | .text-lg{
 142 |     font-size: 2rem;
 143 |     font-weight: 500;
 144 | }
 145 | .text-sm{
 146 |     font-size: 1.3rem;
 147 | }
 148 | .py{
 149 |     padding: 10.9rem 0;
 150 | }
 151 | .text-center{
 152 |     text-align: center;
 153 | }
 154 | 
 155 | /* header */
 156 | .header{
 157 |     min-height: 100vh;
 158 | }
 159 | .navbar{
 160 |     position: fixed;
 161 |     top: 0;
 162 |     left: 0;
 163 |     width: 100%;
 164 |     padding: 3.2rem 0;
 165 |     z-index: 999;
 166 | }
 167 | .navbar .container{
 168 |     -webkit-box-pack: justify;
 169 |         -ms-flex-pack: justify;
 170 |             justify-content: space-between;
 171 | }
 172 | .navbar-brand img{
 173 |     width: 168px;
 174 | }
 175 | .navbar-show-btn, .navbar-hide-btn{
 176 |     background-color: transparent;
 177 |     width: 30px;
 178 |     -webkit-transition: var(--transition);
 179 |     -o-transition: var(--transition);
 180 |     transition: var(--transition);
 181 | }
 182 | button[class ^= navbar]:hover{
 183 |     -webkit-transform: scale(1.1);
 184 |         -ms-transform: scale(1.1);
 185 |             transform: scale(1.1);
 186 | }
 187 | 
 188 | 
 189 | .navbar-collapse{
 190 |     position: fixed;
 191 |     top: 0;
 192 |     right: 0;
 193 |     width: 100%;
 194 |     height: 100%;
 195 |     padding: 8rem 3rem;
 196 |     display: -webkit-box;
 197 |     display: -ms-flexbox;
 198 |     display: flex;
 199 |     -webkit-box-orient: vertical;
 200 |     -webkit-box-direction: normal;
 201 |         -ms-flex-direction: column;
 202 |             flex-direction: column;
 203 |     -webkit-box-pack: justify;
 204 |         -ms-flex-pack: justify;
 205 |             justify-content: space-between;
 206 |     -webkit-box-shadow: -3px 0 10px 4px rgba(0, 0, 0, 0.1);
 207 |             box-shadow: -3px 0 10px 4px rgba(0, 0, 0, 0.1);
 208 |     -webkit-transform: translateX(110%);
 209 |         -ms-transform: translateX(110%);
 210 |             transform: translateX(110%);
 211 |     -webkit-transition: var(--transition);
 212 |     -o-transition: var(--transition);
 213 |     transition: var(--transition);
 214 |     z-index: 1000;
 215 | }
 216 | /* navbar show class */
 217 | .navbar-show{
 218 |     -webkit-transform: translateX(0);
 219 |         -ms-transform: translateX(0);
 220 |             transform: translateX(0);
 221 | }
 222 | .navbar-hide-btn{
 223 |     position: absolute;
 224 |     right: 2rem;
 225 |     top: 4.5rem;
 226 | }
 227 | .nav-item{
 228 |     margin: 1.4rem 0;
 229 | }
 230 | .nav-link{
 231 |     opacity: 0.5;
 232 |     font-weight: 600;
 233 |     -webkit-transition: var(--transition);
 234 |     -o-transition: var(--transition);
 235 |     transition: var(--transition);
 236 |     display: inline-block;
 237 | }
 238 | .nav-link:hover{
 239 |     opacity: 1;
 240 |     color: var(--fros-blue-color);
 241 |     -webkit-transform: translateX(10px);
 242 |         -ms-transform: translateX(10px);
 243 |             transform: translateX(10px);
 244 | }
 245 | .search-icon{
 246 |     display: block;
 247 |     width: 27px;
 248 |     margin-right: 1rem;
 249 | }
 250 | .search-control::-webkit-input-placeholder{
 251 |     color: var(--light-gray);
 252 | }
 253 | .search-control::-moz-placeholder{
 254 |     color: var(--light-gray);
 255 | }
 256 | .search-control:-ms-input-placeholder{
 257 |     color: var(--light-gray);
 258 | }
 259 | .search-control::-ms-input-placeholder{
 260 |     color: var(--light-gray);
 261 | }
 262 | .search-control::placeholder{
 263 |     color: var(--light-gray);
 264 | }
 265 | .search-control{
 266 |     height: 27px;
 267 |     width: 100%;
 268 |     border-radius: 1.9rem;
 269 |     border: 2px solid var(--light-gray);
 270 |     padding: 0 1.5rem;
 271 | }
 272 | 
 273 | /* header inner */
 274 | .header-inner{
 275 |     padding-top: 16rem;
 276 | }
 277 | .header-inner-left h1{
 278 |     font-size: 4rem;
 279 |     font-weight: 300;
 280 |     margin-bottom: 0;
 281 | }
 282 | .header-inner-left h1 span{
 283 |     font-weight: 600;
 284 |     text-transform: uppercase;
 285 | }
 286 | .header-inner-left .lead{
 287 |     opacity: 0.9;
 288 | }
 289 | .header-inner-left .text{
 290 |     margin: 5.8rem 0;
 291 |     max-width: 500px;
 292 |     margin-right: auto;
 293 |     margin-left: auto;
 294 | }
 295 | .header-inner-left .btn-group{
 296 |     -webkit-box-pack: center;
 297 |         -ms-flex-pack: center;
 298 |             justify-content: center;
 299 | }
 300 | .header-inner-right{
 301 |     margin-top: 6rem;
 302 | }
 303 | .header-inner-right img{
 304 |     max-width: 520px;
 305 |     margin: 0 auto;
 306 | }
 307 | 
 308 | /* about section */
 309 | .section-head h2{
 310 |     font-size: 4rem;
 311 |     font-weight: 500;
 312 |     margin-bottom: 3rem;
 313 |     text-align: center;
 314 | }
 315 | .border-line{
 316 |     height: .4rem;
 317 |     width: 100%;
 318 |     margin-right: auto;
 319 |     margin-left: auto;
 320 |     background-color: var(--light-gray);
 321 |     position: relative;
 322 | }
 323 | .border-line::after{
 324 |     content: "";
 325 |     position: absolute;
 326 |     top: 0;
 327 |     left: 50%;
 328 |     -webkit-transform: translateX(-50%);
 329 |         -ms-transform: translateX(-50%);
 330 |             transform: translateX(-50%);
 331 |     height: 100%;
 332 |     width: 102px;
 333 |     background-color: var(--light-blue-color);
 334 | }
 335 | .about-left{
 336 |     margin-bottom: 6rem;
 337 | }
 338 | .about-right{
 339 |     margin-top: 16.8rem;
 340 | }
 341 | .about-left .text{
 342 |     margin: 5.6rem 0;
 343 |     line-height: 2.3;
 344 | }
 345 | .about .btn-white{
 346 |     color: var(--dark-gray);
 347 | }
 348 | .about-right .img{
 349 |     width: 100%;
 350 |     background-color: #3983fe;
 351 |     max-width: 537px;
 352 |     position: relative;
 353 | }
 354 | .about-right .img img{
 355 |     padding-top: 10rem;
 356 |     -webkit-transform: scaleX(1.03);
 357 |         -ms-transform: scaleX(1.03);
 358 |             transform: scaleX(1.03);
 359 | }
 360 | .about-right .img::after, .about-right .img::before{
 361 |     content: "";
 362 |     position: absolute;
 363 |     width: 100%;
 364 |     height: 100%;
 365 | }
 366 | .about-right .img::after{
 367 |     top: -56px;
 368 |     left: 0;
 369 |     background-color: #0060ff;
 370 |     z-index: -1;
 371 | }
 372 | .about-right .img::before{
 373 |     top: -112px;
 374 |     left: 0;
 375 |     background-color: var(--fros-blue-color);
 376 |     z-index: -2;
 377 | }
 378 | 
 379 | /* banner one section */
 380 | .banner-one{
 381 |     background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 80, 213, 0.9)), to(rgba(0, 90, 213, 0.85))), url('../images/banner-1-img.png') top/cover no-repeat;
 382 |     background: -o-linear-gradient(rgba(0, 80, 213, 0.9), rgba(0, 90, 213, 0.85)), url('../images/banner-1-img.png') top/cover no-repeat;
 383 |     background: linear-gradient(rgba(0, 80, 213, 0.9), rgba(0, 90, 213, 0.85)), url('../images/banner-1-img.png') top/cover no-repeat;
 384 |     height: 480px;
 385 |     display: -webkit-box;
 386 |     display: -ms-flexbox;
 387 |     display: flex;
 388 |     -webkit-box-align: center;
 389 |         -ms-flex-align: center;
 390 |             align-items: center;
 391 |     -webkit-box-pack: center;
 392 |         -ms-flex-pack: center;
 393 |             justify-content: center;
 394 | }
 395 | .banner-one .lead{
 396 |     font-size: 2.8rem;
 397 |     font-weight: 500;
 398 |     max-width: 600px;
 399 | }
 400 | .banner-one .text-sm{
 401 |     font-weight: 500;
 402 | }
 403 | 
 404 | /* services section */
 405 | .services .section-head .text-lg{
 406 |     color: var(--dark-gray);
 407 |     margin-top: -2rem;
 408 | }
 409 | .services .section-head img{
 410 |     margin: 3.7rem auto;
 411 | }
 412 | .line-art{
 413 |     max-width: 240px;
 414 |     margin: auto;
 415 | }
 416 | .line-art img{
 417 |     width: 30px;
 418 | }
 419 | .line-art div{
 420 |     width: 100px;
 421 |     height: 2px;
 422 |     background-color: var(--light-gray);
 423 | }
 424 | .services-inner{
 425 |     padding: 6rem 0;
 426 | }
 427 | .service-item{
 428 |     padding: 3rem;
 429 |     margin-bottom: 3rem;
 430 | }
 431 | .service-item:last-child{
 432 |     margin-bottom: 0;
 433 | }
 434 | .service-item .icon img{
 435 |     width: 80px;
 436 |     margin: auto;
 437 | }
 438 | .service-item h3{
 439 |     margin: 5rem 0;
 440 |     opacity: 0.7;
 441 | }
 442 | 
 443 | /* banner two section */
 444 | .banner-two{
 445 |     background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 80, 213, 0.9)), to(rgba(0, 90, 213, 0.85))), url('../images/banner-two-bg.png') top/cover no-repeat;
 446 |     background: -o-linear-gradient(rgba(0, 80, 213, 0.9), rgba(0, 90, 213, 0.85)), url('../images/banner-two-bg.png') top/cover no-repeat;
 447 |     background: linear-gradient(rgba(0, 80, 213, 0.9), rgba(0, 90, 213, 0.85)), url('../images/banner-two-bg.png') top/cover no-repeat;
 448 |     padding: 13.6rem 0;
 449 | }
 450 | .banner-two-left img{
 451 |     max-width: 620px;
 452 |     margin: auto;
 453 | }
 454 | .banner-two-right .lead{
 455 |     font-size: 2.2rem;
 456 |     margin-top: 6rem;
 457 | }
 458 | .banner-two-right .btn-group{
 459 |     margin-top: 6rem;
 460 |     -webkit-box-pack: center;
 461 |         -ms-flex-pack: center;
 462 |             justify-content: center;
 463 | }
 464 | 
 465 | /* doctors panel */
 466 | .doc-panel-inner{
 467 |     margin-top: 8rem;
 468 | }
 469 | .doc-panel-item{
 470 |     margin-bottom: 6rem;
 471 | }
 472 | .doc-panel-item:last-child{
 473 |     margin-bottom: 0;
 474 | }
 475 | .doc-panel-item .img{
 476 |     position: relative;
 477 |     height: 440px;
 478 |     background-color: var(--light-gray);
 479 |     overflow: hidden;
 480 |     -webkit-box-align: end;
 481 |         -ms-flex-align: end;
 482 |             align-items: flex-end;
 483 | }
 484 | .doc-panel-item .img .info{
 485 |     position: absolute;
 486 |     bottom: -100%;
 487 |     left: 0;
 488 |     width: 100%;
 489 |     height: 100px;
 490 |     -webkit-box-orient: vertical;
 491 |     -webkit-box-direction: normal;
 492 |         -ms-flex-direction: column;
 493 |             flex-direction: column;
 494 |     -webkit-transition: var(--transition);
 495 |     -o-transition: var(--transition);
 496 |     transition: var(--transition);
 497 | }
 498 | .doc-panel-item .img{
 499 |     max-width: 357px;
 500 |     margin-left: auto;
 501 |     margin-right: auto;
 502 | }
 503 | .doc-panel-item:hover .info{
 504 |     bottom: 0;
 505 | }
 506 | 
 507 | /* package service */
 508 | .package-service-inner{
 509 |     margin-top: 14rem;
 510 | }
 511 | .package-service{
 512 |     background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 80, 213, 0.85)), to(rgba(0, 80, 213, 0.95))), url('../images/package-service-img.jpg') center/cover no-repeat;
 513 |     background: -o-linear-gradient(rgba(0, 80, 213, 0.85), rgba(0, 80, 213, 0.95)), url('../images/package-service-img.jpg') center/cover no-repeat;
 514 |     background: linear-gradient(rgba(0, 80, 213, 0.85), rgba(0, 80, 213, 0.95)), url('../images/package-service-img.jpg') center/cover no-repeat;
 515 | }
 516 | .package-service-head{
 517 |     color: var(--light-color);
 518 | }
 519 | .package-service-head h2{
 520 |     font-size: 39px;
 521 | }
 522 | .package-service-item{
 523 |     padding: 3rem 5rem;
 524 |     position: relative;
 525 |     margin-bottom: 12rem;
 526 | }
 527 | .package-service-item:last-child{
 528 |     margin-bottom: 0;
 529 | }
 530 | .package-service-item .icon{
 531 |     width: 86px;
 532 |     height: 86px;
 533 |     background-color: var(--light-blue-color);
 534 |     border-radius: 2rem;
 535 |     border-bottom-right-radius: 0;
 536 |     color: var(--light-color);
 537 |     position: absolute;
 538 |     top: -43px;
 539 |     left: 50%;
 540 |     -webkit-transform: translateX(-50%) rotate(45deg);
 541 |         -ms-transform: translateX(-50%) rotate(45deg);
 542 |             transform: translateX(-50%) rotate(45deg);
 543 | }
 544 | .package-service-item .icon i{
 545 |     -webkit-transform: rotate(-45deg);
 546 |         -ms-transform: rotate(-45deg);
 547 |             transform: rotate(-45deg);
 548 | }
 549 | .package-service-item h3{
 550 |     opacity: 0.7;
 551 |     margin: 8rem 0 4rem 0;
 552 | }
 553 | .package-service-item .text-sm{
 554 |     color: var(--dark-gray);
 555 | }
 556 | .package-service-item .btn{
 557 |     margin: 4rem 0;
 558 | }
 559 | 
 560 | /* posts section */
 561 | .posts{
 562 |     background-color: var(--light-gray);
 563 | }
 564 | .posts-inner{
 565 |     margin-top: 6rem;
 566 | }
 567 | .post-item{
 568 |     padding: 1.2rem;
 569 |     -webkit-box-shadow: var(--box-shadow);
 570 |             box-shadow: var(--box-shadow);
 571 |     margin-bottom: 6rem;
 572 | }
 573 | .post-item:last-child{
 574 |     margin-bottom: 0;
 575 | }
 576 | .post-item .content{
 577 |     padding: 3rem 2rem 1rem 2rem;
 578 | }
 579 | .post-item h4{
 580 |     margin-bottom: 1rem;
 581 | }
 582 | .post-item .text{
 583 |     padding: 1rem 0;
 584 | }
 585 | .post-item .info{
 586 |     -webkit-box-pack: justify;
 587 |         -ms-flex-pack: justify;
 588 |             justify-content: space-between;
 589 |     color: var(--dark-gray);
 590 | }
 591 | .post-item .info .text{
 592 |     padding-bottom: 0;
 593 | }
 594 | 
 595 | /* contact section */
 596 | .contact-left{
 597 |     margin-bottom: 6rem;
 598 |     height: 100%;
 599 | }
 600 | .contact-left iframe{
 601 |     width: 100%;
 602 |     height: 100%;
 603 |     -o-object-fit: cover;
 604 |        object-fit: cover;
 605 | }
 606 | .contact-right{
 607 |     padding: 5rem 4rem;
 608 | }
 609 | .contact-right form{
 610 |     margin-top: 5rem;
 611 | }
 612 | .form-element .form-control{
 613 |     width: 100%;
 614 |     background-color: #3373dd;
 615 |     border: none;
 616 |     outline: 0;
 617 |     padding: 1rem 1.6rem;
 618 |     margin-bottom: 1.6rem;
 619 |     color: var(--light-color);
 620 | }
 621 | .form-element .form-control::-webkit-input-placeholder{
 622 |     color: var(--light-color);
 623 | }
 624 | .form-element .form-control::-moz-placeholder{
 625 |     color: var(--light-color);
 626 | }
 627 | .form-element .form-control:-ms-input-placeholder{
 628 |     color: var(--light-color);
 629 | }
 630 | .form-element .form-control::-ms-input-placeholder{
 631 |     color: var(--light-color);
 632 | }
 633 | .form-element .form-control::placeholder{
 634 |     color: var(--light-color);
 635 | }
 636 | .btn-submit{
 637 |     margin-top: 4rem;
 638 | }
 639 | .btn-submit i{
 640 |     margin-right: 2rem;
 641 | }
 642 | 
 643 | /* footer */
 644 | .footer{
 645 |     background-color: var(--dark-color);
 646 | }
 647 | .footer-item{
 648 |     margin-bottom: 6rem;
 649 | }
 650 | .footer-item:last-child{
 651 |     margin-bottom: 0;
 652 | }
 653 | .footer-head{
 654 |     text-transform: uppercase;
 655 |     font-weight: 500;
 656 |     font-size: 2.4rem;
 657 |     margin-bottom: 4rem;
 658 | }
 659 | .footer-item .icon{
 660 |     width: 120px;
 661 |     margin: auto;
 662 | }
 663 | .footer-item .text{
 664 |     padding: 3rem 0;
 665 |     max-width: 500px;
 666 |     margin-right: auto;
 667 |     margin-left: auto;
 668 | }
 669 | .footer-item address{
 670 |     font-size: 1.5rem;
 671 |     font-style: normal;
 672 | }
 673 | .footer-item .tags-list{
 674 |     -ms-flex-wrap: wrap;
 675 |         flex-wrap: wrap;
 676 | }
 677 | .footer-item .tags-list li{
 678 |     margin: .5rem 1rem;
 679 |     padding: .5rem 1rem;
 680 |     background-color: rgb(58, 58, 58);
 681 |     border-radius: .4rem;
 682 | }
 683 | .footer-item a{
 684 |     margin-bottom: 1rem;
 685 |     display: inline-block;
 686 |     -webkit-transition: var(--transition);
 687 |     -o-transition: var(--transition);
 688 |     transition: var(--transition);
 689 | }
 690 | .footer-item a:hover{
 691 |     color: var(--dark-gray);
 692 | }
 693 | .footer-item:last-child .text{
 694 |     padding-top: 0;
 695 | }
 696 | .footer-item .appointment-info li{
 697 |     margin: 1rem 0;
 698 | }
 699 | .footer-item .appointment-info li span{
 700 |     margin-left: 1rem;
 701 | }
 702 | .footer-links{
 703 |     border-top: 2px solid var(--dark-gray);
 704 |     padding: 4.5rem 0;
 705 | }
 706 | .footer-links li{
 707 |     margin: 0 2.4rem;
 708 |     font-size: 2rem;
 709 | }
 710 | .footer-links li a{
 711 |     height: 40px;
 712 |     width: 40px;
 713 |     border-radius: 50%;
 714 |     border: 2px solid var(--light-color);
 715 |     -webkit-transition: var(--transition);
 716 |     -o-transition: var(--transition);
 717 |     transition: var(--transition);
 718 | }
 719 | .footer-links li a:hover{
 720 |     background-color: var(--light-color);
 721 |     color: var(--fros-blue-color);
 722 | }
 723 | 
 724 | 
 725 | 
 726 | 
 727 | /* Media Queries */
 728 | @media(min-width: 450px){
 729 |     .navbar-collapse{
 730 |         width: 320px;
 731 |     }
 732 |     .btn-group .btn{
 733 |         width: auto;
 734 |     }
 735 |     .btn-group .btn:first-child{
 736 |         margin-right: 48px;
 737 |         margin-bottom: 0;
 738 |     }
 739 |     .border-line{
 740 |         width: 405px;
 741 |     }
 742 | 
 743 | }
 744 | 
 745 | @media(min-width: 768px){
 746 |     .header-inner-left h1{
 747 |         font-size: 5.7rem;
 748 |     }
 749 |     .services-inner, .doc-panel-inner{
 750 |         grid-template-columns: repeat(2, 1fr);
 751 |     }
 752 |     .doc-panel-inner{
 753 |         -webkit-column-gap: 3rem;
 754 |            -moz-column-gap: 3rem;
 755 |                 column-gap: 3rem;
 756 |     }
 757 |     .doc-panel .section-head h2{
 758 |         text-align: left;
 759 |     }
 760 |     .package-service-inner, .posts-inner, .footer-inner{
 761 |         grid-template-columns: repeat(2, 1fr);
 762 |         -webkit-column-gap: 6rem;
 763 |            -moz-column-gap: 6rem;
 764 |                 column-gap: 6rem;
 765 |     }
 766 |     .footer-inner{
 767 |         text-align: left;
 768 |     }
 769 |     .footer-item .icon, .footer-item .text{
 770 |         margin-left: 0;
 771 |     }
 772 |     .footer-item .tags-list{
 773 |         -webkit-box-pack: start;
 774 |             -ms-flex-pack: start;
 775 |                 justify-content: flex-start;
 776 |     }
 777 | }
 778 | 
 779 | @media(min-width: 992px){
 780 |     .header-inner{
 781 |         padding-top: 3.2rem;
 782 |     }
 783 |     .header-inner .container{
 784 |         grid-template-columns: 545px auto;
 785 |         -webkit-box-align: center;
 786 |             -ms-flex-align: center;
 787 |                 align-items: center;
 788 |         height: calc(100vh - 32px);
 789 |         position: relative;
 790 |     }
 791 |     .header-inner-left{
 792 |         text-align: left;
 793 |     }
 794 |     .header-inner-left .text{
 795 |         margin-left: 0;
 796 |     }
 797 |     .header-inner-left .btn-group{
 798 |         -webkit-box-pack: start;
 799 |             -ms-flex-pack: start;
 800 |                 justify-content: start;
 801 |     }
 802 |     .header-inner-right img{
 803 |         position: absolute;
 804 |         bottom: 0;
 805 |         right: 0;
 806 |         padding-left: 5rem;
 807 |     }
 808 |     .about-inner .container{
 809 |         grid-template-columns: repeat(2, 1fr);
 810 |         -webkit-column-gap: 3rem;
 811 |            -moz-column-gap: 3rem;
 812 |                 column-gap: 3rem;
 813 |     }
 814 |     .about-left{
 815 |         text-align: left;
 816 |         margin-bottom: 0;
 817 |     }
 818 |     .about-left .section-head h2{
 819 |         text-align: left;
 820 |     }
 821 |     .border-line{
 822 |         margin-left: 0;
 823 |     }
 824 |     .border-line::after{
 825 |         left: 0;
 826 |         -webkit-transform: translateX(0);
 827 |             -ms-transform: translateX(0);
 828 |                 transform: translateX(0);
 829 |     }
 830 |     .about-right{
 831 |         margin-left: auto;
 832 |         margin-top: 11.2rem;
 833 |     }
 834 | 
 835 |     .banner-two .container{
 836 |         grid-template-columns: repeat(2, 1fr);
 837 |         -webkit-box-align: center;
 838 |             -ms-flex-align: center;
 839 |                 align-items: center;
 840 |         -webkit-column-gap: 6rem;
 841 |            -moz-column-gap: 6rem;
 842 |                 column-gap: 6rem;
 843 |     }
 844 |     .banner-two-right{
 845 |         text-align: left;
 846 |     }
 847 |     .banner-two-right .btn-group{
 848 |         -webkit-box-pack: start;
 849 |             -ms-flex-pack: start;
 850 |                 justify-content: flex-start;
 851 |     }
 852 |     .banner-two-right .lead{
 853 |         margin-top: 0;
 854 |     }
 855 |     .banner-two-left img{
 856 |         width: 100%;
 857 |         max-width: 100%;
 858 |     }
 859 |     .doc-panel-inner{
 860 |         grid-template-columns: repeat(3, 1fr);
 861 |     }
 862 |     .doc-panel-item{
 863 |         margin-bottom: 0;
 864 |     }
 865 |     .package-service-inner{
 866 |         grid-template-columns: repeat(3, 1fr);
 867 |     }
 868 |     .package-service-item{
 869 |         margin-bottom: 0;
 870 |     }
 871 | 
 872 |     .contact .container{
 873 |         grid-template-columns: repeat(2, 1fr);
 874 |         -webkit-column-gap: 2.4rem;
 875 |            -moz-column-gap: 2.4rem;
 876 |                 column-gap: 2.4rem;
 877 |     }
 878 | }
 879 | 
 880 | @media(min-width: 1200px){
 881 |     .navbar-show-btn, .navbar-hide-btn{
 882 |         display: none;
 883 |     }
 884 |     .navbar-collapse{
 885 |         -webkit-transform: translateX(0);
 886 |             -ms-transform: translateX(0);
 887 |                 transform: translateX(0);
 888 |         position: relative;
 889 |         -webkit-box-orient: horizontal;
 890 |         -webkit-box-direction: normal;
 891 |             -ms-flex-direction: row;
 892 |                 flex-direction: row;
 893 |         -webkit-box-pack: end;
 894 |             -ms-flex-pack: end;
 895 |                 justify-content: flex-end;
 896 |         -webkit-box-align: center;
 897 |             -ms-flex-align: center;
 898 |                 align-items: center;
 899 |         width: 100%;
 900 |         height: auto;
 901 |         padding: 0;
 902 |         background-color: transparent;
 903 |         -webkit-box-shadow: none;
 904 |                 box-shadow: none;
 905 |         -webkit-transition: none;
 906 |         -o-transition: none;
 907 |         transition: none;
 908 |     }
 909 |     .navbar-nav{
 910 |         display: -webkit-box;
 911 |         display: -ms-flexbox;
 912 |         display: flex;
 913 |     }
 914 |     .nav-item{
 915 |         margin: 0;
 916 |         margin-left: 3.5rem;
 917 |     }
 918 |     .nav-link{
 919 |         color: var(--light-color);
 920 |         opacity: 1;
 921 |         font-weight: 500;
 922 |         position: relative;
 923 |     }
 924 |     .nav-link::after{
 925 |         content: "";
 926 |         position: absolute;
 927 |         top: 100%;
 928 |         left: 0;
 929 |         height: 2px;
 930 |         width: 0;
 931 |         background-color: var(--light-color);
 932 |         opacity: 0;
 933 |         -webkit-transition: var(--transition);
 934 |         -o-transition: var(--transition);
 935 |         transition: var(--transition);
 936 |     }
 937 |     .nav-link:hover{
 938 |         -webkit-transform: none;
 939 |             -ms-transform: none;
 940 |                 transform: none;
 941 |         color: var(--light-color);
 942 |     }
 943 |     .nav-link:hover::after{
 944 |         opacity: 1;
 945 |         width: 100%;
 946 |     }
 947 |     .search-bar{
 948 |         margin-left: 5.5rem;
 949 |     }
 950 |     .search-inner-right{
 951 |         width: 100%;
 952 |     }
 953 |     .search-inner-right img{
 954 |         padding-left: 0;
 955 |         max-width: 647px;
 956 |     }
 957 |     .search-control{
 958 |         width: 150px;
 959 |     }
 960 |     .header-inner-right{
 961 |         width: 100%;
 962 |     }
 963 |     .header-inner-right img{
 964 |         padding-left: 0;
 965 |         max-width: 647px;
 966 |     }
 967 | 
 968 |     .services-inner{
 969 |         grid-template-columns: repeat(4, 1fr);
 970 |         -webkit-column-gap: 2rem;
 971 |            -moz-column-gap: 2rem;
 972 |                 column-gap: 2rem;
 973 |     }
 974 |     .service-item{
 975 |         margin-bottom: 0;
 976 |     }
 977 |     .doc-panel-inner{
 978 |         -webkit-column-gap: 9rem;
 979 |            -moz-column-gap: 9rem;
 980 |                 column-gap: 9rem;
 981 |     }
 982 |     .posts-inner{
 983 |         grid-template-columns: repeat(3, 1fr);
 984 |     }
 985 |     .post-item{
 986 |         margin-bottom: 0;
 987 |     }
 988 | 
 989 |     .contact .container{
 990 |         grid-template-columns: auto 514px;
 991 |     }
 992 |     .footer-inner{
 993 |         grid-template-columns: repeat(4, 1fr);
 994 |         -webkit-column-gap: 6rem;
 995 |            -moz-column-gap: 6rem;
 996 |                 column-gap: 6rem;
 997 |     }
 998 | }
 999 | 
1000 | @media(min-width: 1480px){
1001 |     /* general */
1002 |     .container{
1003 |         max-width: 81vw;
1004 |     }
1005 | }
1006 | 
1007 | /* transition and animation stopper */
1008 | .resize-animation-stopper *{
1009 |     -webkit-animation: none!important;
1010 |             animation: none!important;
1011 |     -webkit-transition: none!important;
1012 |     -o-transition: none!important;
1013 |     transition: none!important;
1014 | }
1015 | 
1016 | 
1017 | 


--------------------------------------------------------------------------------