index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <link rel="stylesheet" href="Styles/index.css"> 
    <link rel="stylesheet" href="Styles/defaults.css"> 
    <link rel="stylesheet" href="fontawesome-free-5.15.4-web/css/all.css">
</head>
<body>

<!------------------- The Header Section--------------->

  <section class="header" id="top">
    <nav class="navLinks">
       <div class="nav-links">
        <ul class="MenuItem">
          <li> <a href="#">Home</a> </li>
          <li> <a href="centers.html">Centers</a> </li> 
           <li> <a href="login.html">Login</a> </li>
           <!-- <li> <a href="forums.html">Forums</a> </li> -->
          <li> <a href="appoint.php">Appointments</a></li>
        </ul>
      </div>
    </nav>
    <div class="welcome">
      <h1>Welcome to DOC4U</h1>
      <p>Where, optimizing your time and providing better services for you is our priority. Your time, our priority!, do more in less time ❤️ 
     </p>
      <div class="know"><a href="about.html" class="more">Know more</a></div> 
      <div class="know"><a href="login.html" class="join">Join Us</a></div> 
    </div>
  </section>

  <!------------ SERVICES ------------->

  <section class="services">
    <h2>What we offer</h2>
    <h4>We provide you with these opportunities to provide and receive the best care effectively and efficiently</h4>
    <h3>For Patients</h3>
    <h4>We offer you with services to optimize your time, and to keep your records safely.</h4>
    <div class="users patients" id="patients">
      <div>
        <p>Appointments</p>
        <li>Book appointments for free</li>
        <li>Set reminders for appointments</li>
        <img src="images/reminder.png" alt="Do a little anim here" width="150" height="150">
      </div>
      <div>
        <p>Receive treatment</p>
        <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint, magni?</li>
        <img src="images/pat-fight.png" alt="Do a little anim here" width="150" height="150">
      </div>
      <div>
        <p>Record keeping</p>
        <li>Free and safe record keeping</li>
        <li>Safe access to records...</li>
        <img src="images/records.png" alt="Do a little anim here" width="150" height="150">
      </div>
      <div>
        <p>Discussion Forums</p>
        <li>Intresting health topics by doctors and patients</li>
        <li>FAQs and Question and Answer sessions
        </li>
        <img src="images/forum.png" alt="Do a little anim here" width="150" height="150">
      </div>
   </div>

   <h3>For Doctors</h3>
   <h4>We offer you a better way to manage and improve your patietnts satisfaction and giving you the opportunity to 
     showcase yourself and your talents to the world and help you increase your patient base
   </h4>
    <div class="users doctors" id="doctors">
      <div>
        <p>Reduce patient waiting time</p>
        <li>Eliminate waiting time before attendance</li>
        <img src="images/time-2hands.png" alt="" width="150" height="150"> 
      </div>
      <div>
        <p>Optimise online visibility</p>
        <li>Offer services online to patients</li>
        <img src="images/visible-color.png" alt="" width="150" height="150"> 
      </div>
      <div>
        <p>Manage availability</p>
        <li>Lorem ipsum dolor sit, amet consectetur adipisicing</li>
        <img src="images/available.png" alt="" width="150" height="150"> 
      </div>
     <div>
       <p>Increase your patient base</p>
        <li>Create and manage forums</li>
        <img src="images/doc-faq.png" alt="" width="150" height="150"> 
     </div>
     </ul>
   </div>
 </section>

  <!------------ OBJECTIVES ----------->

 <section class="objectives">
    <div class="objs">
      <h2>About Us</h2>
      <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ducimus hic facere itaque saepe iste rem possimus soluta quibusdam officia illo deserunt aliquam alias porro sit, tempore, ipsam qui eum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae debitis natus fuga enim maiores qui, iste sapiente porro dolores tenetur velit, neque vel eius accusantium dolor, obcaecati perspiciatis? Voluptatum, fuga.
      </p>
    </div>
  </section>

 <!-- Just a small detailed information -->

  <section class="little-information">
      <h3>What will you be getting into?</h3>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem expedita, facere neque labore sed ab sunt. Temporibus obcaecati illo, eos deserunt corrupti rerum! 
      </p>
      <h4>Other Things</h4> 
      <div class="nice-middle">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad, necessitatibus.</p>
        <img src="images/doc-heart.png" alt="Do a little anim here" width="150" height="150">
        <p>Explicabo deserunt quidem blanditiis ipsa exercitationem accusamus provident soluta voluptatum!</p>
        <img src="images/doctor-icon.png" alt="Do a little anim here" width="150" height="150">
        <p>Porro maxime laudantium ad eius animi earum voluptatum? Ullam, consequatur!</p>
        <img src="images/time-1hand.png" alt="Do a little anim here" width="150" height="150">
      </div>

      <a href="doctor/signup.php">Register Doctor</a>
      <a href="">Join Forums</a>
      <a href="">Set Admin</a>
    </section>

    <!-- ABOUT US -->

    <section class="contact" id="contact">
      <div class="follow">
      <h2>Follow Us</h2>
      <p>Our social media handles</p>
      <img src="images/linkdln.png" alt="Linkedin" width="30" height="30">
      <img src="images/facebook.png" alt="Facebook" width="30" height="30">
      <img src="images/instagram.png" alt="Instagram" width="30" height="30">
    </div>
    <div class="chat">
      <h2>Contact Us</h2>
      <p>Our contact details</p>
      <i class="fa fa-phone"></i>
      <img src="images/whatsapp.png" alt="whatsapp" width="25" height="25">
    </div>
    </section>

   <!------------------- Footer ---------------->
    <footer>
        <h4>Doc4U</h4>
        <p>&copy; 2023 Khing's Corp. All rights reserved</p>
        <p>Terms and Conditions apply</p>
    </footer>
      
  </body>
</html>