-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
261 lines (250 loc) · 14.3 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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tags -->
<meta charset="utf-8">
<meta name="description" content="Tighty Whities(TM) helps YOU create your own
custom-made high-quality T-shirt designs and bring them to life
from artwork to photos for LESS! We provide YOU shipping,
production, and excellent customer service right to your door!">
<meta name="keywords" content="T-shirts, custom T-shirt printing, designs">
<meta name="author" content="Ben Yee, Certified Front-End Web Developer">
<meta name="copyright" content="Copyright (c) 2019 by Tighty Whities(TM), LLC">
<!-- Flexbox and CSS styles -->
<link rel="stylesheet" href="css/flexboxgrid.css">
<link rel="stylesheet" href="css/style.css">
<!-- Font Awesome Icons CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.1/css/all.css" integrity="sha384-IT8OQ5/IfeLGe8ZMxjj3QQNqT0zhBJSiFCL3uolrGgKRuenIU+mMS94kck/AHZWu" crossorigin="anonymous">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<!-- Favicon -->
<link rel="icon" type="image/vnd.microsoft.icon" href="images/favicon.ico">
<title>Tighty Whities | High Quality Custom T-Shirts for LESS!</title>
</head>
<body>
<!-- HEADER -->
<header id="main-header">
<div class="container">
<div class="row end-sm end-md end-lg center-xs middle-xs middle-sm middle-md middle-lg">
<div class="col-xs-12 col-sm-2 col-md-2 col-lg-2">
<h1><span class="primary-text">Tighty</span> Whities<sup>™</sup></h1>
</div>
<div class="col-xs-12 col-sm-10 col-md-10 col-lg-10">
<nav id="navbar">
<ul>
<li class="current"><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><i class="fas fa-shopping-cart" title="Your shopping cart"></i></li>
</ul>
</nav>
</div>
</div>
</div>
</header> <!-- end HEADER -->
<!-- SHOWCASE -->
<section id="showcase">
<div class="container">
<div class="row center-xs center-sm center-md center-lg middle-xs middle-sm middle-md middle-lg">
<div class="col-xs-10 col-sm-10 col-md-10 col-lg-7 showcase-content">
<h1>T-Shirt <span class="catalog-text">Catalog</span></h1>
</div>
</div>
</div>
</section><!-- end SHOWCASE -->
<!-- CATALOG -->
<section id="catalog">
<div class="container">
<div class="row center-sm center-md center-lg center-xs middle-xs middle-sm middle-md middle-lg">
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-3">
<div class="box"><img src="images/tshirts/tshirt_1.jpg" alt="Typographic Style shirt" class="catalog-item">
<h2>$7.77</h2>
<h3>International Typographic Style</h3>
<p class="description">Simple. Clean. Font. For the narcistic graphic designer with bragging rights! Show them your style!</p>
<p class="buybutton"><button type="submit">Buy Now</button></p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-3">
<div class="box"><img src="images/tshirts/tshirt_2.jpg" alt="King Gizzard and the Lizard Wizard classic shirt" class="catalog-item">
<h2>$9.99</h2>
<h3>King Gizzard and the Wizard Lizard</h3>
<p class="description">Going retro? Rock out! For the classic <strong>"King Gizzard and the Lizard Wizard"</strong> fan!</p>
<p class="buybutton"><button type="submit">Buy Now</button></p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-3">
<div class="box"><img src="images/tshirts/tshirt_3.jpg" alt="Urban Attack Event Crew shirt" class="catalog-item">
<h2>$11.69</h2>
<h3>Urban Attack Event Crew Shirt</h3>
<p class="description">Wanna run an obstacle course in the UK? Go for it! Orange you glad to be an easy target!</p>
<p class="buybutton"><button type="submit">Strike Me!</button></p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-3">
<div class="box"><img src="images/tshirts/tshirt_4.jpg" alt="Born To Fly Drones shirt" class="catalog-item">
<h2>$15.82</h2>
<h3>Born to Fly Drones Shirt</h3>
<p class="description">Wanna fly a drone? Wear this with pride and chase one right now (You might run into a classified military one from Boeing®)!</p>
<p class="buybutton"><button type="submit">Buy Me</button></p>
</div>
</div>
</div><!-- end first row -->
<div class="row center-sm center-md center-lg center-xs middle-xs middle-sm middle-md middle-lg">
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-3">
<div class="box"><img src="images/tshirts/tshirt_5.jpg" alt="Local Business Funny shirt" class="catalog-item">
<h2>$5.55</h2>
<h3>Support Your Local Business Funny Shirt</h3>
<p class="description">Need a laugh for the day? Try wearing this to your next work party and relax!</p>
<p class="buybutton"><button type="submit">Get Me!</button></p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-3">
<div class="box"><img src="images/tshirts/tshirt_6.jpg" alt="Pirate King shirt" class="catalog-item">
<h2>$8.88</h2>
<h3>Pirate King Shirt</h3>
<p class="description">Ahoy matey! Wear this scary Long John Silver shirt to your next fun event!</p>
<p class="buybutton"><button type="submit">Buy Now</button></p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-3">
<div class="box"><img src="images/tshirts/tshirt_7.jpg" alt="Don't Text and Drive shirt" class="catalog-item">
<h2 class="sale">$1.99 - On Sale Now</h2>
<h3>Don't Text & Drive Shirt</h3>
<p class="description">Wear our most discounted shirt and spread the word to everyone the RIGHT thing to do!</p>
<p class="buybutton"><button type="submit">Want Now</button></p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-3">
<div class="box"><img src="images/tshirts/tshirt_8.png" alt="Boston 5K Run shirt" class="catalog-item">
<h2>$4.44</h2>
<h3>Vintage Boston 5K Run Shirt</h3>
<p class="description">To commemorate the Boston 5K Marathon on May 11th, 2013, we want every athlete to proudly wear this for the next Boston event!</p>
<p class="buybutton"><button type="submit">Buy Now</button></p>
</div>
</div>
</div><!-- end second row -->
<div class="row center-sm center-md center-lg center-xs middle-xs middle-sm middle-md middle-lg">
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-3">
<div class="box"><img src="images/tshirts/tshirt_9.png" alt="Grandma's shirt" class="catalog-item">
<h2>$33.33</h2>
<h3>Professional Grandma Shirt</h3>
<p class="description">Buy something for your active Grandma to show that you love and care for her!</p>
<p class="buybutton"><button type="submit">Buy Now</button></p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-3">
<div class="box"><img src="images/tshirts/tshirt_10.jpg" alt="LFO shirt" class="catalog-item">
<h2>$9.66</h2>
<h3>Lyte Funkie Ones (LFO) Shirt</h3>
<p class="description">Going more modern style? Show your pride by wearing the official LFO Band T-shirt!</p>
<p class="buybutton"><button type="submit">Purchase Now</button></p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-3">
<div class="box"><img src="images/tshirts/tshirt_11.jpg" alt="Little Mix 5 Shirt" class="catalog-item">
<h2>$9.99</h2>
<h3>Little Mix 5 (LM5) Shirt</h3>
<p class="description">If you're a splendid fan of the Little Mix group for their fifth studio album (LM5), then be dandy and wear this shirt!</p>
<p class="buybutton"><button type="submit">Buy Me</button>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-3">
<div class="box"><img src="images/tshirts/tshirt_12.jpg" alt="New York shirt" class="catalog-item">
<h2>$12.97</h2>
<h3>The Big Apple Shirt</h3>
<p class="description">Do you really love New York but not the Yankees? Heading to the Big Apple? Try wearing this one!</p>
<p class="buybutton"><button type="submit">Purchase Now</button>
</div>
</div>
</div><!-- end third row -->
<div class="row center-sm center-md center-lg center-xs middle-xs middle-sm middle-md middle-lg">
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-3">
<div class="box"><img src="images/tshirts/tshirt_13.jpg" alt="Green Athletic Sports shirt" class="catalog-item">
<h2>$14.46</h2>
<h3>Green Athletic Sports Shirt</h3>
<p class="description">Plain Jane for the day - wear this ordinary genuine athletic shirt to the gym!</p>
<p class="buybutton"><button type="submit">Buy Now</button>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-3">
<div class="box"><img src="images/tshirts/tshirt_14.png" alt="Bunkerd Bulldog Shirt" class="catalog-item">
<h2>$20.23</h2>
<h3>Bunkerd Bulldog Shirt</h3>
<p class="description">Go bold and stylish like this guy. Sorry he's not included.</p>
<p class="buybutton"><button type="submit">Get It!</button>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-3">
<div class="box"><img src="images/tshirts/tshirt_15.jpg" alt="Sleep Psychedelic Shirt" class="catalog-item">
<h2>$19.99</h2>
<h3>Sleep Style Shirt</h3>
<p class="description">Go Retro to the 60s or 70s if you're in a hippie mood!</p>
<p class="buybutton"><button type="submit">Buy Now</button>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-3">
<div class="box"><img src="images/tshirts/tshirt_16.jpg" alt="Bright Orange Shirt" class="catalog-item">
<h2>$10.57</h2>
<h3>Organic Orange Shirt</h3>
<p class="description">Orange you glad to be plain? Nothing special here.</p>
<p class="buybutton"><button type="submit">Buy Now</button>
</div>
</div>
</div><!-- end forth row -->
</div>
</section><!-- end CATALOG section -->
<!-- COMPANY -->
<section id="company">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<h4>Contact Us</h4>
<ul>
<li><i class="fas fa-phone-alt"></i> 1-(800)-555-1212 </li>
<li><i class="far fa-envelope"></i> <a class="footlinks" href="mailto:support@tightywhities.com" title = "E-mail us!">support@tightywhities.com</a> </li>
<li><i class="fas fa-map-marked-alt"></i> 123 Main Street <br />
Westport, CT 06880, USA</li>
</ul>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<h4>About Us</h4>
<p><span class="primary-text">Tighty</span> <strong>Whities</strong>™ helps <strong>YOU</strong> create your own custom-made high-quality T-shirt designs and bring them to life
from artwork to photos for LESS!</p>
<h4><a href="privacy.html" class="footlinks" title="Read the fine print!">Privacy Policy</a></h4>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<h4><i class="fa fa-check"></i> Newsletter</h4>
<p>Subscribe to our newsletter for updates on upcoming T-shirt designs, <i class="fas fa-tags"> discounts </i>, and more!</p>
<form>
<input type="text" name="email" placeholder="Enter Email">
<button type="submit" name="button">Submit</button>
</form>
</div>
</div>
</div>
</section><!-- end COMPANY section -->
<!-- FOOTER -->
<footer id="main-footer">
<div class="container">
<div class="row center-xs center-sm center-md center-lg">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<p>Copyright © 2019 | Tighty Whities™, LLC | All Rights Reserved.</p>
</div>
</div><!-- end Copyright -->
</div>
</footer><!-- end main FOOTER -->
<footer id="credits">
<div class="container">
<div class="row center-xs center-sm center-md center-lg">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"><br />
<h5>Credits and Acknowledgments:</h5>
<p>Special thanks to Brad at <a href="https://www.traversymedia.com/" target="_blank">Traversy Media</a> for his invaluable online <a href="https://youtu.be/qlA7dputiNc" target="_blank">YouTube®</a> tutorial using <a href="http://flexboxgrid.com/" target="_blank">Flexbox Grid</a>.<br />
I would also like to thank <a href="http://www.jonahcastro.com/" target="_blank">Jonah Castro</a> at <a href="http://www.frameworktv.com" target="_blank">Framework TV</a> for his supportive feedback and other fellow students in Slack.
</p><br />
</div>
</div>
</div>
</footer><!-- end credits -->
</body>
</html>