Barbershop/index.html at main · Hakimziyech18/Barbershop · 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
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BarberShop</title>
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="index-media-query.css">
  </head>
  <body>
    <nav>
      <a href="/BarberShop/">Home</a>
      <a href="#hairstyles">Hairstyles</a>
      <a href="#pricing">Pricing</a>
      <a href="#media">Media</a>
    </nav>
    <!--Hero-->
    <section class="hero">
      <h1>Welcome to Barber Shop</h1>
      <img src="./logo.png" alt="barbershop">
    </section>

    <!-- Sub hero section-->
    <section class="sub-hero">
      <h2>More than just a haircut, we're your partner in <span> crafting a signature look </span> that relects your unique personality.</h2>
      <img src="/pexels-marvin-sacdalan-276316567-13138585.jpg" alt="barbing photo">
    </section>

    <!--Hairstyles-->
    <section id="hairstyles">
      <h2>Hairstyles You Need to Try in 2024</h2>
      <ul>
        <li>Short Curly Haircut & Low Drop Fade.</li>
        <li>Short Textured Quiff & Mid Fade.</li>
        <li>High Temp Fade & Short Spiked Wavy Hair.</li>
        <li>High Fade Mohawk.</li>
        <li>Classic Short Comb-Over.</li>
        <li>Side Swept Crew Cut.</li>
        <li>Buzz Cut With Beard.</li>
        <li>Curly Flat Top.</li>
      </ul>
    </section>

    <!--Pricing-->
    <section id="pricing">
      <h2>Pricing</h2>
      <table border="1">
        <thead>
          <tr>
            <th>Type</th>
            <th>Price</th>
          </tr>
        </thead>
        <tbody>
          <tr border="100">
            <td>Adult Haircut</td>
            <td>#1000</td>
          </tr>
          <tr>
            <td>Youth Haircut</td>
            <td>#800</td>
          </tr>
          <tr>
            <td>Beard trim</td>
            <td>#300</td>
          </tr>
          <tr>
            <td>Edge up</td>
            <td>#300</td>
          </tr>
        </tbody>
      </table>
    </section>

    <!--Media-->
    <section id="media">
      <h2>Have fun while we make you look beautiful</h2>
      <h4>Listen to nature</h4>
      <audio controls>
        <source src="/audio.ogg"/>
      </audio>
      <h4>Watch movie</h4>
      <video controls>
        <source src="/video.mp4"/>
      </video>
    </section>

    <!--About us-->
    <section id="about-us">
      <h2>About us</h2>
      <p>
        We're not just cutting hair, we're building legacies. Since 2022, we've been a cornerstone of the community, crafting sharp styles and even sharper confidence for generations of men. Our founder, Unclebigbay, believed in the power of a great haircut to transform not just one's appearance, but one's outlook. Every snip, shave, and style is fueled by that same passion, ensuring you walk out feeling empowered and ready to conquer the world. We're more than just barbers, we're your confidantes, your stylists, your cheerleaders. Come join us, experience the legacy, and discover what a truly great haircut can do.
      </p>
    </section>
    <!--Contact us-->
    <section id="contact-us">
      <h2>Contact us</h2>
      <h3>Don't wait another minute. Walk in for a walk-in or schedule your next transformation online.</h3>
      <form action="">
        <label for="">Name</label>
        <input type="text">
        <label for="">Address</label>
        <input type="text">
        <label for="">Other details</label>
        <textarea name="" id=""></textarea>
        <button>Submit</button>
      </form>
      <h3>OR</h3>
      <p>
        Chat with us on X (Twitter)
        <a href="https://x.com/hakiimii18">@hakiimii18</a>
      </p>
    </section>
  </body>
</html>