forked from abluey/KoalaSEO-Task
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
83 lines (78 loc) · 5.34 KB
/
Copy pathindex.html
File metadata and controls
83 lines (78 loc) · 5.34 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="./static/css/main.css">
<title>Little Bobby B's Dog Groomers</title>
<meta name="description" content="Little Bobby B's dog top voted grooming salon booking website in the birmingham area">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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;">
<div style="height: 100px;width: calc(100% - 40px);background-color: white;display: flex;justify-content: flex-start;align-items: center;margin: 0px 20px;">
<div style="justify-content: center;align-items: center;display:flex;cursor: pointer;" onclick="window.location.href='/'">
<img src="./static/imgs/logo.png" height="60" alt="Dog groom logo">
<img src="./static/imgs/logoText.png" height="40" alt="Logo text">
</div>
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
</div>
<div style="height: 600px;display: flex;align-items: center;">
<div style="height: 100%;width: 40%;background-color: #e5e5e5;display: flex;justify-content: center;align-items: center;">
</div>
<div style="height: 100%;width: 60%;background-image: url('./static/imgs/grooming.jpg');background-repeat: no-repeat;background-size: cover;background-position: center;" class="hero_img">
</div>
<div style="position: absolute;left: 10%;z-index: 2;transform: translateX(40px);">
<p style="color: #29b462;font-size: 4rem;font-family: 'Caveat', cursive;margin-bottom: 0px;">Grooming, done right.</p>
<p style="color: #ee957f;font-family: 'Caveat', cursive;font-size: 2rem;margin-top: 5px;">Voted birmingham's best salon 2020</p>
<div style="padding: 15px;border:2px solid #ee957f;width: fit-content;cursor: pointer;color: #ee957f" class="btn">
<p style="margin: 0;font-family: 'Yomogi', cursive;font-size: 1.4rem">Book an App.</p>
</div>
</div>
</div>
<div style="display: flex;justify-content: center;align-items: center;padding: 100px 40px;flex-direction: column;max-width: 1000px;margin: auto;margin-bottom: 100px;">
<p style="font-family: 'Arvo', serif;font-size: 3rem;" class="wiggle">About Us</p>
<p style="font-family: 'Arvo', serif;font-size: 1.3rem;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,
molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum
numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium
optio, eaque rerum! Provident similique accusantium nemo autem. Veritatis
obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam
nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit,
tenetur error, harum nesciunt ipsum debitis quas aliquid. Reprehenderit.
</p>
</div>
<div style="background-image: url('./static/imgs/dog1.jpg');height: 700px;background-color: #EE957F;" class="pricing">
<p style="font-family: 'Arvo', serif;font-size: 3rem;" class="wiggle">Pricing</p>
<div style="display: flex;align-items: center;">
<div id="pricing-container-small"></div>
<div id="pricing-container-large"></div>
<div id="pricing-container-small"></div>
</div>
</div>
<div style="display: flex;justify-content: center;align-items: center;padding: 100px 40px;flex-direction: column;max-width: 1000px;margin: auto;">
<p style="font-family: 'Arvo', serif;font-size: 3rem;" class="wiggle">Gallery</p>
<div style="display: flex;max-width: 1000px;justify-content: center;align-items: center;flex-wrap: wrap;margin: auto;">
<img src="./static/imgs/dog1.jpg" style="height: 400px;width: 600px; padding: 10px;" alt="Dog portrait">
<img src="./static/imgs/dog2.jpg" style="height: 366px;width: 274px; padding: 10px;" alt="Dog peeking at camera">
<img src="./static/imgs/dog3.jpg" style="height: 170px;width: 256px; padding: 10px;" alt="Dog standing by window">
<img src="./static/imgs/dog4.jpg" style="height: 600px;width: 400px; padding: 10px;" alt="Dog standing on box">
<img src="./static/imgs/dog5.jpg" style="height:600px; padding: 10px;" onclick="document.getElementById('secret').style.display='flex'" alt="Dog reading">
</div>
</div>
<div style="display: flex;justify-content: center;align-items: center;padding: 100px 40px;flex-direction: column;max-width: 1000px;margin: auto;">
<p style="font-family: 'Arvo', serif;font-size: 3rem;" class="wiggle">Contact Us</p>
<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>
<div style="height: 80px;width: calc(100% - 80px);background-color: #404249;display: flex;padding: 0px 40px;align-items: center;color: white;font-family: 'Arvo', serif;">
Groom © 2021 All Rights Reserved
</div>
<p aria-hidden="true" style="display: none;" id="secret">You found the secret! Use code smartdoggo at checkout for 30% off</p>
</body>
</html>