-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
139 lines (132 loc) · 9 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Selectors Pracitce</title>
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/custom.css">
</head>
<body>
<header>
<h1 class="logo">Make Stuff<br>Great Again</h1>
<button id="menu-button" class="menu-button">MENU</button>
<nav class="nav hide-menu">
<ul class="menu-items">
<li class="menu-item menu-close" id="menu-close">CLOSE</li>
<li><a class="menu-item" href="#shop">Shop</a></li>
<li><a class="menu-item" href="#blog">Blog</a></li>
<li><a class="menu-item" href="#about">About</a></li>
<li><a class="menu-item" href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section class="above-the-fold" id="above-the-fold">
<div class="card">
<button type="button">See Our Stuff!</button>
<p>We have the best stuff. People are saying they love our stuff. Our stuff is tremendous.</p>
</div>
<div class="card">
<button type="button">BUY Our Stuff!</button>
<p>We have the best stuff. People are saying they love our stuff. Our stuff is tremendous.</p>
</div>
<div class="card">
<button type="button">Learn About Our Stuff!</button>
<p>We have the best stuff. People are saying they love our stuff. Our stuff is tremendous.</p>
</div>
</section>
<section id="shop" class="shop">
<h2 class="section-header">Shop</h2>
<hr>
<div id="gallery" class="gallery">
<figure>
<img src="https://pbs.twimg.com/profile_images/570520774532816896/EMvl0uHx.png" alt="picture of stuff">
<figcaption>This image is fantastic.</figcaption>
</figure>
<figure>
<img src="./img/stuff.jpg" alt="picture of stuff">
<figcaption>This image is fantastic.</figcaption>
</figure>
<figure>
<img src="./img/stuff.jpg" alt="picture of stuff">
<figcaption>This image is fantastic.</figcaption>
</figure>
<figure>
<img src="./img/stuff.jpg" alt="picture of stuff">
<figcaption>This image is fantastic.</figcaption>
</figure>
<figure>
<img src="./img/stuff.jpg" alt="picture of stuff">
<figcaption>This image is fantastic.</figcaption>
</figure>
<figure>
<img src="./img/stuff.jpg" alt="picture of stuff">
<figcaption>This image is fantastic.</figcaption>
</figure>
</div>
</section>
<section id="blog" class="blog">
<h2 class="section-header">Blog</h2>
<hr>
<article class="blog-article">
<h3 class="article-title">Our Stuff Is Great</h3>
<p>Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin
words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. </p>
<p>Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin
words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. </p>
<p>Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin
words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. </p>
</article>
<article class="blog-article">
<h3 class="article-title">Our Stuff Is Tremendous</h3>
<p>Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin
words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. </p>
<p>Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin
words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. </p>
<p>Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin
words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. </p>
</article>
<article class="blog-article">
<h3 class="article-title">Everybody Is Saying They Love Our Stuff</h3>
<p>Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin
words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. </p>
<p>Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin
words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. </p>
<p>Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin
words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. Lorem ipsum and other latin words. </p>
</article>
</section>
<section id="about" class="about">
<h2 class="section-header">About</h2>
<hr>
<p>It was a gloomy, Wednesday afternoon many generations ago when Jane Doe and John Smith had grown tired of all their stuff. All of their stuff was too complex and diverse. They missed the days when all their stuff was simple, predictable, and
comfortable.</p>
<p>Jane had the bigly idea to "make stuff great again" ®, like it used to be when she was younger. Then next day, Jane and John began creating what everybody knows today as "Make Stuff Great Again."</p>
<p>To learn about our stuff, please see our <a href="#shop">shop</a>, check out our <a href="#blog">blog</a>, or even <a href="#contact">contact us</a>.</p>
</section>
<section id="contact" class="contact">
<h2 class="section-header">Contact</h2>
<hr>
<form action="index.html" method="post">
<input class="form-input" type="text" name="dest_email" value="[email protected]" style="display: none">
<input class="form-input" type="text" name="name" value="" placeholder="Your Name">
<input class="form-input" type="email" name="email" value="" placeholder="Email">
<div class="form-input">
<input type="radio" name="gender" value="male"><label>Male</label>
<input type="radio" name="gender" value="female"><label>Female</label>
</div>
<textarea class="form-input" name="message" rows="12" cols="28" placeholder="Your message..."></textarea>
<input class="form-input" type="submit" value="SEND">
</form>
</section>
</main>
<footer>
<address>
<p>© 2016 by Make Stuff Great Again ®.</p>
</address>
</footer>
<script src="js/main.js"></script>
</body>
</html>