KoalaSEO-Task/index.html at master · abluey/KoalaSEO-Task · 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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <meta name="description" content="Pets love getting groomed here! Voted best salon in Birmingham 2020: Groom. Book now at 12345678900.">
    <meta name="keywords" content="Pet, Groomer, Grooming, Birmingham, Groom, Salon">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>groom</title>

	<link rel="stylesheet" type="text/css" href="./static/css/main.css">
	<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
	<script src="https://kit.fontawesome.com/167b44c09c.js" crossorigin="anonymous"></script>
</head>

<body style="padding: 0;margin: 0;">
	<nav>
		<div style="justify-content: space-between;" onclick="window.location.href='/'">
			<img src="./static/imgs/logo.png" alt="Logo of Groom" height="60">
			<img src="./static/imgs/logoText.png" alt="Text logo of Groom" height="40">
		</div>
	</nav>

	<!-- the short introduction before About-Us -->
	<header>
		<div style="height: 100%;width: 40%;display: flex;justify-content: center;align-items: center;">
		</div>
		<div class="hero_img">
		</div>
		<div class="hero_text">
			<h1 class="hero_text1">Grooming, done right.</h1>
			<p class="hero_text2">Voted Birmingham's best salon 2020</p>
			<!-- button -->
			<div class="btn">
				<p style="margin: 0;font-family: 'Yomogi', cursive;font-size: 1.4rem">Book an App</p>
			</div>
		</div>
	</header>

	<!-- About-Us -->
	<div class="about-us">
		<h2 class="wiggle">About Us</h2>
		<p class="wiggle-content">
			Does your pet shed like a truck? Does it shed leaves like blossoms in the spring? Our award-winning groomers are here to help. With 13 shops set up all over Birmingham (and more around the country!), there has to be at least one which satisfies your pet's needs.
			<br />
			Each store comes equipped with scissors, tables, and also chairs. Your pet will have the grooming of a lifetime by our specially-trained groomers.
			<br />
			Come to us with a mop and we'll get you... a pet!
		</p>
	</div>

	<!-- Pricing section -->
	<div class="pricing">
		<h2 class="wiggle">Pricing</h2>
		<div style="display: flex;align-items: center;">
			<div class="pricing-container-small">20 pounds for small pets! Includes small dogs, small cats, and large birds.</div>
			<div id="pricing-container-large">50 pounds for a package of 3 grooming sessions!</div>
			<div class="pricing-container-small">Sign up for a membership now and get 10% off whenever you make a booking!</div>
		</div>
	</div>

	<!-- Gallery -->
	<div class="gallery">
		<h2 class="wiggle">Gallery</h2>
		<div class="gallery-container">
			<img src="./static/imgs/dog1.jpg"
			alt="A white dog with a black head against a pink backdrop"
			style="height: 400px;width: 600px; padding: 10px;">

			<img src="./static/imgs/dog2.jpg"
			alt="A brown-and-white puppy lying down against a blurred bedroom backdrop"
			style="height: 366px;width: 274; padding: 10px;">

			<img src="./static/imgs/dog3.jpeg"
			alt="A white-and-black dog with its tongue out"
			style="height: 170px;width: 255px; padding: 10px;">

			<img src="./static/imgs/dog4.jpeg"
			alt="A white-and-brown dog with black markings, with its front paws on a bright green stool"
			style="height: 600px;width: 400px; padding: 10px;">

			<img src="./static/imgs/dog5.jpeg"
			alt="A brown dog with glasses sitting at a table, with an open book on it"
			style="height: 600px; padding: 10px;"
			onclick="document.getElementById('secret').style.display='flex'">
		</div>
	</div>

	<!-- Contact-Us -->
	<div class="contact-us">
		<h2 class="wiggle">Contact Us</h2>
		<div style="display: flex;width: 100%;justify-content: space-around;align-items: center;">
			<p style="font-family: 'Arvo', serif;font-size: 1.3rem;"><i class="fas fa-phone"></i> 01234 567 890</p>
			<p style="font-family: 'Arvo', serif;font-size: 1.3rem;"><i class="fas fa-envelope"></i> groom@gmail.com</p>
			<p style="font-family: 'Arvo', serif;font-size: 1.3rem;"><i class="fab fa-instagram"></i> groomgroomers</p>
		</div>
	</div>

	<!-- Footer -->
	<footer>
		<p>Groom © 2021 All Rights Reserved</p>
	</footer>

	<p aria-hidden="true" style="display: none;" id="secret">You found the secret! Use code smartdoggo at checkout for 30% off</p>

</body>
</html>