-
Notifications
You must be signed in to change notification settings - Fork 0
/
indexCopy.html
129 lines (129 loc) · 6.38 KB
/
indexCopy.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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foot Forward</title>
<link rel="stylesheet" href="styleCopy.css">
<link href="https://fonts.googleapis.com/css2?family=Catamaran:wght@400;600&family=Nova+Flat&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/243b648db7.js" crossorigin="anonymous"></script>
</head>
<body>
<header id="home">
<div class="headerContainer">
<input type="checkbox">
<div class="toggle">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<nav>
<ul>
<li><a href=#home><span>Home</span></a></li>
<li><a href="#about">About</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<div class="socialMediaContainer">
<ul>
<li><a href="https://www.instagram.com/"><i class="fab fa-instagram"></i></a></li>
<li><a href="https://www.facebook.com/"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="https://www.snapchat.com/l/en-gb/"><i class="fab fa-snapchat-ghost"></i></a></li>
<li><a href="https://twitter.com/?lang=en"><i class="fab fa-twitter"></i></a></li>
</ul>
</div>
<h1>Foot <span class="break">Forward</span></h1>
</div>
</header>
<main>
<section class="about clearfix" id="about">
<div class="imageContainer right"></div>
<div class="text left">
<div class="textContainer">
<h2>We specialize in:</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident corporis harum commodi nobis eaque voluptatum facilis saepe accusantium recusandae. Neque numquam illo fugiat doloremque consequatur labore in explicabo dolorem eos odio ipsam, soluta mollitia veritatis. Aut!</p>
<button class="read" href="#">Read More</button>
</div>
</div>
<div class="imageContainer left"></div>
<div class="text right">
<div class="textContainer">
<h2>Footcare:</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt provident praesentium aperiam cum facere nam accusantium incidunt quisquam a corrupti sed omnis quaerat, quas perspiciatis. Perspiciatis, est optio velit consectetur soluta laborum? Pariatur ut adipisci nam.</p>
<button class="read" href="#">Read More</button>
</div>
</div>
</section>
<section class="blog" id="blog">
<div class="wrapper clearfix">
<div class="imageContainer Bottom">
<img src="./assets/image-6@2x.png" alt="shoes walking through puddles">
</div>
<div class="text">
<div class="textContainer">
<h2>Giving Back:</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum necessitatibus sunt dolorum veniam beatae delectus, suscipit blanditiis hic dolore, fugit soluta dolor nisi quae velit consequuntur veritatis aut neque nulla, nobis recusandae. Deserunt odio quas quos voluptas, doloremque blanditiis officiis sunt fuga fugiat explicabo quam perspiciatis, totam quasi nostrum? Sint expedita tempora dolores qui vel voluptates! Accusantium quia provident, magni maiores, voluptas delectus, consectetur animi enim magnam accusamus ex deserunt?</p>
<button class="read" href="#">Read More</button>
</div>
</div>
</div>
</section>
<section class="links">
<ul>
<li><a href="#products"><i class="fas fa-shopping-bag" href="#"></i></a><span>Products</span></li>
<li><a href="#community"><i class="fas fa-users" href="#"></i></a><span>Community</span></li>
<li><a href="#reachOut"><i class="fas fa-phone" href="#"></i></a><span>Reach Out</span></li>
</ul>
</section>
<section class="gram">
<div class="wrapper">
<h2>The Gram</h2>
<div class="gallery">
<ul class="clearfix">
<li>
<img src="./assets/image-2@2x.png" alt="black sneakers held in the sky" href="#">
</li>
<li>
<img src="./assets/image-3@2x.png" alt="black sneakers held in the sky" href="#">
</li>
<li>
<img src="./assets/image-4@2x.png" alt="black sneakers held in the sky" href="#">
</li>
</ul>
</div>
</div>
</section>
</main>
<footer>
<div class="wrapper">
<nav>
<ul>
<li><a href=#home>Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<div class="clearfix contact" id="contact">
<div class="info" id="info">
<h2>Contact</h2>
<p>info@email.com | 123-456-7890 </p>
<p>123 some road, Toronto, ON</p>
<p>A5A 5A5, Canada</p>
</div>
<div class="email">
<h2>Stay Updated</h2>
<p>Subscribe to our newsletter to stay updated</p>
<div class="clearfix">
<label for="email"></label>
<input type="email" id="email" name="email" value="email address">
<button class="sub">Subscribe</button>
</div>
</div>
</div>
</div>
<p class="copyright"> Copyright © 2019 HackerYou</p>
</footer>
</body>
</html>