test/index.html at main · RUKKY76/test · 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
116
117
118
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Barber shop</title>
</head>
<body>

  <nav>
    <a href="/">Home</a>
    <a href="#hairstyles">Hairstyles</a>
    <a href="#pricing">Pricing</a>
    <a href="#media">Media</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </nav>

  <!-- Hero -->
  <section>
    <h1>Welcome to barber Shop</h1>
    <img src="./images/barberlogo.jpg"/>
    <h2>
      More than just a haircut,we're yout partner in crafting a signature look that reflects your unique personality.
    </h2>
    <img src="./images/barbershop.jpg"/>
  </section>
    <!-- Hairstyle -->
  <section id="hairstyles">
    <h2>Hairstyles You Need to Try in 2024</h2>
    <ul>
      <li>Short Curly Haircut & Low Drop Fade.</li>
      <li>Shirt 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>
          <td>Adult haircut</td>
          <td>#1000</td>
        </tr>
        <tr>
          <td>Youth haircut</td>
          <td>#800</td>
        </tr>
        <tr>
          <td>Berad 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 beautiful</h2>
    <h4>Listen to nature</h4>
    <audio controls>
      <source src="./images/audio.ogg"/>
    </audio>
    <h4>Watch movie</h4>
    <video controls>
      <source src="./images/video.mp4"/>
    </video>
  </section>

    <!-- About -->
  <section id="about">
    <h2>About us</h2>
    <p>we're not just cutting hairs,we're building legacies.B&H has been a cornerstone of the community, crafting sharp styles and even sharper confidence for generations of men .Our founder,B&H believed in the power of a great haircut to transform not just the appearance , but one's outlook. Every snip, shave, and style has that same passion, ensuring you walk out feeling empowered and ready to conquer the world. We're more than just barber, we're your stylist , your cheerleaders. Come join us ,experience the legacy, and discover what truly great haircut can do.</p>
  </section>

  <!-- Contact -->
  <section id="contact">
    <h2>Contact us</h2>
    <h3>
      Don't wait another minute. Walk in for a walk-in or scheldule your next transformation online.
    </h3>
    <form>
      <label>Name</label>
      <input/>
      <br>
      <br>
      <label>Adress</label>
      <input/>
      <br>
      <br>
      <label>Other Details</label>
      <textarea></textarea>
      <br>
      <br>
      <button>Submit</button>
    </form>
    <h3>OR</h3>
    <p>Chat with us on X(Twitter) <a href="https://x.com/mofedoko?s=21&t=2cYeJXhOatQ49u5xVGqyYg">@Mofe</a></p>
  </section>
</body>
</html>