-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
119 lines (108 loc) · 6.39 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Outfitted | Home</title>
<meta charset="utf-8">
<meta name="author" content="Raina Patterson">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="Outfitted is a clothing re-sale shop located in Milwaukee, Wi. Owned and operated by Martin Gil.">
<link rel="stylesheet" href="https://use.typekit.net/odk0prm.css"> <link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="window">
<header>
<div class="container">
<img class="hero-img" src="hero-image.jpeg" alt="Image of clothes hanging on a rack in a store">
<div class="hero-txt">
<h1><a href="index.html">Outfitted</a></h1>
<p>Get outfitted by Martin Gil</p>
</div>
</div>
<nav>
<ul>
<div class="nav-container">
<div class="nav-item"><li><a href="index.html">Home</a></li></div>
<div class="nav-item"><li><a href="#">Store</a></li></div>
<div class="nav-item"><li><a href="contact.html">Contact</a></li></div>
<div class="nav-item"><li><a href="about.html">About</a></li></div>
<div class="nav-item"><li><a href="#">Check Out</a></li></div>
</div>
</ul>
</nav>
</header>
<!-- end of header -->
<main>
<section class="home-section-one">
<h2>Choose a category:</h2>
<ul>
<div class="category">
<div class="category-item"><li><a href="#"><img src="Got_milk_hat.JPEG" alt="A white hat that says 'got milk?'">Hats</a></li></div>
<div class="category-item"><li><a href="#"><img src="bulls_jacket.JPG" alt="A Chicago Bulls leather jacket">Jackets</a></li></div>
<div class="category-item"><li><a href="#"><img src="sonic_youth_shirt.JPEG" alt="A green Sonic Youth t-shrit">Shirts</a></li></div>
<div class="category-item"><li><a href="#"><img src="deftones_sweater.JPEG" alt="A blue Deftones band pull over sweater">Sweaters</a></li></div>
<div class="category-item"><li><a href="#"><img src="UMBRO_green_soccer_shorts.jpg" alt="A pair of dark green soccer shorts">Bottoms</a></li></div>
</div>
</ul>
</section>
<!-- end of section one -->
<section class="home-section-two">
<h3>Unique Style</h3>
<div class="hometwo">
<div class="hometwo-items">
<p>Outfitted offers unique clothing articles that represent the 90's trends and fashion.</p>
<p>We have vintage clothing for people looking to have a unique style.</p>
</div>
<div class="hometwo-items">
<img src="home-rollerblades.jpeg" alt="Image of a girl sitting on concrete steps wearing roller blades">
</div>
</div>
</section>
<!-- end of section two -->
<section class="home-section-three">
<h3>Collect Pieces</h3>
<p>Add style to your life, collect pieces, or find your new favorite article-Outfitted has what you need.</p>
<img src="home-pinkhead.jpeg" alt="A statue head wearing an orange hat and a blue shirt.">
</section>
<!-- end of section three -->
<section class="home-section-four">
<h3>Stay Updated!</h3>
<p>Sign up for our emailing list to be updated on new arrivals for items you like!</p>
<form>
<label for="FirstName">First Name</label>
<input type="text" name="FirstName" id="FirstName"><br>
<label for ="LastName">Last Name</label>
<input type="text" name="LastName" id="LastName"><br>
<label for ="YourEmail">Your Email</label>
<input type="text" name="YourEmail" id="YourEmail"><br>
<p>Select items you are interested in...</p><br>
<input type="checkbox" id="shirts" name="interested_in" value="shirts">
<label for="shirts">Shirts</label><br>
<input type="checkbox" id="sweaters" name="interested_in" value="sweaters">
<label for="sweaters">Sweaters</label><br>
<input type="checkbox" id="jackets" name="interested_in" value="jackets">
<label for="jackets">Jackets</label><br>
<input type="checkbox" id="hats" name="interested_in" value="hats">
<label for="hats">Hats</label><br>
<input type="checkbox" id="bottoms" name="interested_in" value="bottoms">
<label for="bottoms">Bottoms</label><br>
<input id="mybutton" type="button" value="Sign Up">
</form>
</section>
<!-- end of section four -->
</main>
<!-- closes main -->
<footer>
<div>
<p>Tag us on social media and give us a follow!</p>
<img src="twitter.icon.png" alt="Twitter icon">
<img src="instagram.icon.png" alt="Instagram icon">
<img src="tiktok.icon.png" alt="TikTok icon">
</div>
<small>© 2022. This website is for educational purposes only.</small>
</footer>
<!-- end of footer -->
</div>
<!-- closes "window" -->
</body>
<!-- closes body -->
</html>