-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.html
218 lines (199 loc) · 9.72 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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Tell the web browser that the HTML doc is using Unicode character encoding -->
<meta charset="utf-8">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>she templates</title>
<!-- Favicon image -->
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<!-- Import CSS files and fonts from external sources -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Playfair+Display&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Include our custom stylesheets last so they override imported library styles -->
<link rel="stylesheet" type="text/css" href="styles/style.css">
</head>
<body>
<div class="navbar-fixed">
<nav class="secondary-bg no-shadow" role="navigation">
<div class="nav-wrapper container">
<a href="#" class="brand-logo"><span class="logo-em">she</span>templates</a>
<ul class="right hide-on-med-and-down">
<li><a href="#products">Products</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<a href="#" data-target="nav-mobile" class="sidenav-trigger">
<i class="material-icons">menu</i>
</a>
</div>
</nav>
</div>
<!-- Mobile menu only shows on small screens and expands when triggered -->
<ul id="nav-mobile" class="sidenav">
<li><a href="#products">Products</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<header>
<div class="section cta-container">
<div class="container">
<h1 class="header center secondary-text-darken">Are you ready to launch?</h1>
<div class="row center">
<h5 class="col s12 light white-text">
SheTemplates is a basic responsive site template for the girl who's ready to build an empire that's anything but basic
</h5>
</div>
<div class="row center">
<a href="https://github.com/apennell/she-templates" class="btn-large waves-effect waves-light">
Learn More
</a>
</div>
</div>
</div>
</header>
<main>
<div class="container" id="products">
<div class="section">
<div class="row">
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center primary-text">
<i class="small material-icons">flare</i>
</h2>
<h5 class="center">Mixtape leggings etsy</h5>
<p class="light">
Lorem ipsum dolor amet selvage vape chia vexillologist snackwave man bun tumeric adaptogen quinoa. Chicharrones williamsburg roof party dreamcatcher messenger bag single-origin coffee 3 wolf moon af kitsch pug forage fixie godard iceland. Paleo jianbing readymade bitters migas chia echo park cred 8-bit freegan.
</p>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center primary-text">
<i class="small material-icons">flash_on</i>
</h2>
<h5 class="center">Everyday carry</h5>
<p class="light">
Tattooed godard helvetica stumptown pug. Leggings lumbersexual subway tile squid pok pok tumblr VHS. Mixtape leggings palo santo pork belly, etsy semiotics celiac. Adaptogen chillwave keytar unicorn copper mug, helvetica polaroid fingerstache.
</p>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center primary-text">
<i class="small material-icons">filter_vintage</i>
</h2>
<h5 class="center">Humblebrag chambray</h5>
<p class="light">
Celiac jianbing stumptown yuccie edison bulb. Artisan umami locavore mumblecore fanny pack biodiesel asymmetrical letterpress plaid. Chambray wayfarers chillwave semiotics. Mumblecore man braid tbh ennui lyft. Kogi cardigan YOLO vaporware.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="image-section" id="image-section-1"></div>
<div class="container" id="about">
<div class="section">
<div class="row">
<div class="col sm12">
<h2>About us</h2>
<p>Lorem ipsum dolor amet meggings beard cold-pressed hot chicken master cleanse pok pok activated charcoal seitan. Gluten-free semiotics knausgaard vinyl selvage artisan. Bushwick small batch la croix, unicorn dreamcatcher squid jean shorts distillery meggings synth seitan hoodie echo park. Mustache fam marfa, iceland brunch skateboard poutine activated charcoal gentrify kogi scenester kickstarter banjo swag.</p>
<p>Subway tile YOLO wayfarers bicycle rights. Chicharrones mumblecore street art palo santo hexagon. Deep v helvetica pork belly tumblr glossier echo park tumeric. Banjo pabst raw denim, normcore banh mi whatever direct trade distillery gentrify lo-fi slow-carb affogato gastropub farm-to-table. Marfa gastropub pinterest XOXO, aesthetic cred knausgaard meh man bun fashion axe fixie DIY brunch tilde.</p>
<p>Poutine chillwave pabst pop-up vice fam readymade offal woke biodiesel heirloom ethical snackwave jianbing godard. Scenester tousled sustainable aesthetic next level green juice. Etsy venmo twee, four loko chartreuse art party migas neutra. Williamsburg vice farm-to-table lumbersexual, yr selfies quinoa pug truffaut subway tile meditation sriracha flannel. Echo park meh kogi wayfarers adaptogen kinfolk iPhone craft beer church-key umami marfa chicharrones.</p>
</div>
</div>
<div class="row">
<div class="col s12 m4 center">
<img src="images/joanna-nix-unsplash.jpg" alt="Monet's headshot" class="circle responsive-img headshot">
<p class="center employee-name">Monet, CEO</p>
</div>
<div class="col s12 m4 center">
<img src="images/parker-johnson-unsplash.jpg" alt="Tiffany's headshot" class="circle responsive-img headshot">
<p class="center employee-name">Tiffany, CTO</p>
</div>
<div class="col s12 m4 center">
<img src="images/makson-serpa-unsplash.jpg" alt="Jen's headshot" class="circle responsive-img headshot">
<p class="center employee-name">Jen, CPO</p>
</div>
</div>
</div>
</div>
<div class="primary-bg">
<div class="container">
<div class="row quote-wrapper">
<div class="col s12 white-text">
<i class="material-icons medium">format_quote</i>
<h5><em>Truffaut twee freegan meh deep v bitters palo santo kitsch flannel. Hexagon portland organic brooklyn shabby chic typewriter franzen.</em></h5>
</div>
</div>
</div>
</div>
<div class="container" id="contact">
<div class="section">
<div class="row">
<div class="col sm12 m10 offset-m1">
<h2>Sign up for beta launch</h2>
<p>We won't spam you!</p>
</div>
</div>
<!-- Note: this form won't actually do anything yet, that's up to you! -->
<div class="row">
<div class="input-field col s12 m8 offset-m1">
<input id="email" type="email">
<label for="email">Email</label>
</div>
<div class="input-field col s12 m2">
<button class="btn waves-effect waves-light" type="submit">
Submit
</button>
</div>
</div>
</div>
</div>
<div class="image-section" id="image-section-2"></div>
</main>
<footer class="page-footer custom-footer secondary-bg">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">A Bit of Text</h5>
<p class="grey-text text-lighten-4">
Plaid food truck tousled man braid, heirloom poutine venmo schlitz snackwave pork belly wayfarers umami locavore.
</p>
</div>
<div class="col l3 s6">
<h5 class="white-text">Company</h5>
<ul>
<li><a class="white-text" href="#">Link 1</a></li>
<li><a class="white-text" href="#">Link 2</a></li>
<li><a class="white-text" href="#">Link 3</a></li>
<li><a class="white-text" href="#">Link 4</a></li>
</ul>
</div>
<div class="col l3 s6">
<h5 class="white-text">Connect</h5>
<ul>
<li><a class="white-text" href="#">Facebook</a></li>
<li><a class="white-text" href="#">Twitter</a></li>
<li><a class="white-text" href="#">Instagram</a></li>
<li><a class="white-text" href="#">LinkedIn</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
Made by <a class="white-text" href="http://anniepennell.com/">Annie Pennell 2020</a>
</div>
</div>
</footer>
<!-- JavaScript placed at end of body for optimized loading -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Include custom script last because it depends on code in the libraries to run -->
<script type="text/javascript" src="scripts/script.js"></script>
</body>
</html>