generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
gallery.html
101 lines (90 loc) · 4.82 KB
/
gallery.html
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
<!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">
<meta name="description" content="Cutting Edge Color hair salon specialized in color">
<meta name="keywords" content="hair, hair salon, hair color, hair dye">
<link rel="stylesheet" href="assets/css/style.css">
<title>PP1 - Vibrant Cuts</title>
</head>
<body>
<!-- Header -->
<header>
<div class="header-container">
<div class="logo">
<a href="index.html">
<h1 id="logo">Vibrant Cuts</h1>
</a>
</div>
<nav class="navigation">
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="prices.html">Prices</a>
</li>
<li>
<a href="gallery.html" class="active">Gallery</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
</nav>
</div>
</header>
<!-- Gallery text -->
<section>
<div id="gallery-txt">
<h2>Our work</h2>
<p>Here, you will find a variety of color and cutting transformations that showcase our range of skills. From precision cuts and bold colors to subtle highlights and layered styles, our salon can help you achieve any look you desire. Book your appointment today at Vibrant Cuts and see the difference a professional stylist can make.</p>
</div>
</section>
<!-- Gallery images -->
<section>
<div id="photos">
<img src="assets/images/blonde-curls.jpg" alt="Woman with blonde curls">
<img src="assets/images/short-red-curls.webp" alt="Woman red short curly hair">
<img src="assets/images/pink-flowers.webp" alt="Woman with pink hair standing by a tree with white flowers">
<img src="assets/images/blonde-ombre-curls.webp" alt="Woman with dark to blonde ombre curls">
<img src="assets/images/blonde-short.webp" alt="Woman with blonde short hair">
<img src="assets/images/blonde-to-shoulder.webp" alt="Woman with blonde straight hair to shoulders">
<img src="assets/images/blue-bangs.webp" alt="Woman with blonde hair and blue bangs">
<img src="assets/images/cold-ombre.webp" alt="Woman with a cold dark to blonde ombre">
<img src="assets/images/cold-omre-warm-highlights.webp" alt="Woman with a cold dark to blonde ombre and warm blonde hightlights">
<img src="assets/images/cold-purple.webp" alt="Woman with cold purple hair">
<img src="assets/images/curl-cut.webp" alt="Woman with dark hair">
<img src="assets/images/cut-afro.webp" alt="Woman with trimmed hair">
<img src="assets/images/dusty-pink.webp" alt="Woman with long dusty pink hair">
<img src="assets/images/highlights.webp" alt="Woman with blonde highlights">
<img src="assets/images/magenta-long.webp" alt="Woman with long hair dyed in magenta">
<img src="assets/images/blonde-pink-ombre.webp" alt="Woman with a blonde and pink ombre">
<img src="assets/images/rainbow-color.webp" alt="Woman with hair dyed with all the colors from the rainbow">
<img src="assets/images//rainbow-highlitghts.webp" alt="Girl with rainbow colored highlights">
<img src="assets/images/strawberry-pink-ombre.webp" alt="Woman with a strawberry pink ombre">
<img src="assets/images/turquise-long.webp" alt="Woman with long turquise hair">
</div>
</section>
<!-- Footer -->
<footer class="social-network">
<p>08-123 456 789</p>
<ul>
<li class="social-icons">
<a href="https://www.facebook.com/" target="_blank" aria-label="Visit our Facebook page. Opens in a new tab." rel="noopener"><i class="fa-brands fa-square-facebook"></i></a>
</li>
<li class="social-icons">
<a href="https://www.instagram.com/" target="_blank" aria-label="Visit our Instagram page. Opens in a new tab." rel="noopener"><i class="fa-brands fa-instagram"></i></a>
</li>
<li class="social-icons">
<a href="https://twitter.com/" target="_blank" aria-label="Visit our Twitter page. Opens in a new tab." rel="noopener"><i class="fa-brands fa-square-twitter"></i></a>
</li>
</ul>
<p>Stockholm, Sweden</p>
</footer>
<!-- Fontawesome kit-->
<script src="https://kit.fontawesome.com/16606b6431.js" crossorigin="anonymous"></script>
</body>
</html>