Doc/centers.html at main · Fuangi/Doc · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!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>Centers</title>
        <link rel="stylesheet" href="Styles/stylesheet.css">
        <link rel="stylesheet" href="Styles/defaults.css">
        <link rel="stylesheet" href="Styles/index.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="index.html">Home</a> </li>
                <li> <a href="#">Centers</a> </li>
                <li> <a href="login.html">Login</a> </li>
                <!-- <li> <a href="about.html">About</a> </li> -->
                <!-- <li> <a href="appoint.html">Appointments</a></li> -->
              </ul>
           </div>
       </nav>
       <div class="welcome">
            <h1>Choose your Doctor</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum suscipit, sed repellendus facere officiis, quis deserunt explicabo delectus dolorem laboriosam officia iure, eos tenetur sapiente nemo accusamus reiciendis unde? Dignissimos?
            </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>

     <div class="something">
        <h2>Browse through</h2>
            <p>So let's jump right into looking for our doctors and booking our appointments... </p>
     </div>
     <section class="profiles">
        <figure>
            <img src="images/femael-doctor.jpg" alt="Doctor you" width="200" height="200">
            <figcaption><button class="btn">Dr Anders</button></figcaption>
        </figure>

        <figure>
            <img src="images/consultation.jpg" alt="Doctor sm1" width="200" height="200">
            <figcaption><button class="btn">Dr B</button></figcaption>
        </figure>

        <figure>
            <img src="images/Pic4.jpg" alt="Doctor me" width="200" height="200">
            <figcaption><button class="btn">Dr C</button></figcaption>
        </figure>
        <figure>
            <img src="images/holding-hands.jpg" alt="Doctor me" width="200" height="200">
            <figcaption><button class="btn">Dr D</button></figcaption>
        </figure>
<!-- set the buttons in such a way that when someone clicks on it, it should take the person to the appointment page with the person's name and the buton values -->
     </section>

        <div class="message">
         <h2> How we work </h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae quibusdam ratione nulla! Quibusdam nobis eius architecto hic ratione tempora earum.
            Neque amet at dignissimos fugit nam ullam, suscipit aspernatur quasi consequuntur expedita repudiandae odit facere illum voluptates. Est, saepe nemo!</p>
            <p>Quam fugit aliquam recusandae animi provident rerum quas tempora, quidem velit facilis possimus iusto asperiores aut sed? Numquam, vel omnis?</p>
         </div>


    <!------------ 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> -->

      <!-- 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="fad fa-envelop"></i>
        <i class="fa fa-phone"></i>
        <i class="fab fa-whatsapp"></i>
      </div>
      </section>
     <footer>
        <p>&copy; Khing's Corp</p>
     </footer>
    </body>
 </html>