This repository has been archived by the owner on May 12, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
260 lines (240 loc) · 12.5 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name='viewport' content='width=device-width, initial-scale=1'>
<!-- Stylesheets -->
<link rel='stylesheet' href='css/reset.css'>
<link rel='stylesheet' href='css/style.css'>
<link rel='stylesheet' href='css/header.css'>
<link rel='stylesheet' href='css/navigation.css'>
<link rel='stylesheet' href='css/responsive_navigation.css'>
<link rel='stylesheet' href='css/search_bar.css'>
<link rel='stylesheet' href='css/article_section.css'>
<link rel='stylesheet' href='css/card.css'>
<link rel='stylesheet' href='css/responsive_card.css'>
<link rel='stylesheet' href='css/card_types.css'>
<link rel='stylesheet' href='css/recipe_card.css'>
<!-- Google Fonts -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Font Awesome -->
<link rel='stylesheet' href='css/font-awesome/css/font-awesome.min.css'>
<title>A New Spoon</title>
</head>
<body class='body'>
<header class='top-bar'>
<a href='#' class='logo'><img src='img/logo.svg' alt='Logo'></a>
<div class='search-bar'>
<form action='#'><input type='search' placeholder='Search...'></form>
</div>
<div class='menu-button'>Menu<span class='trigger'></span></div>
</header>
<main class='main-content'>
<nav class='navigation'>
<ul>
<li class='navigation-label'>Menu</li>
<li class='home active'><a href='#'>Home</a></li>
<li class='recipes'><a href='#'>Recipes <span class='count'>3</span></a></li>
<li class='lifestyle'><a href='#'>Lifestyle <span class='count'>2</span></a></li>
<li class='excersise'><a href='#'>Excersise & Diets <span class='count'>4</span></a></li>
<li class='locations'><a href='#'>Locations</a></li>
<li class='chapters'><a href='#'>Chapters</a></li>
<li class='spoon_store'><a href='#'>Spoon Store</a></li>
<li class='company'><a href='#'>About</a></li>
</ul>
<ul>
<li class='navigation-label'>Contribute</li>
<li class='action-btn'><a href='#'>Join The Fun :D</a></li>
</ul>
</nav>
<section class='content-wrapper'>
<article class='article-section'>
<div class='title-card'>
<span class='title'>Newest Stories</span>
<a class='more' href='#'>More <i class='fa fa-angle-right'></i></a>
</div>
<section class='card healthier quit-caffeine'>
<div class='category'>Lifestyle</div>
<div class='title-content'>
<h3>Why I Quit Caffeine and I Have Never Been Happier</h3>
<hr>
<div class='intro'>I chose to break one of the hardest addictions known to man in order to finally start taking care of myself.</div>
<div class='author-info'>
<i class='fa fa-pencil fa-flip-horizontal'></i>
<a href='#'>BryAna Stearns</a> at <a href='#'>American University</a>
</div>
</div>
<div class='card-info'>Here's the backstory of why I decided to quit caffeine: the sophomore slump of college was real, and I was drowning in it. Things get a little scary and well I had to quit.</div>
<div class='utility-info'>
<ul class='utility-list'>
<li class='comments'><i class='fa fa-comments'></i> 10</li>
<li class='date'><i class='fa fa-calendar'></i> 06.08.17</li>
</ul>
</div>
<div class='gradient-overlay'></div>
<div class='color-overlay'></div>
</section>
<section class='card healthier self-care-students'>
<div class='category'>Lifestyle</div>
<div class='title-content'>
<h3>Self-Care for Student Leaders</h3>
<hr>
<div class='intro'>Student leaders have to help themselves before they can help others.</div>
<div class='author-info'>
<i class='fa fa-pencil fa-flip-horizontal'></i>
<a href='#'>Kate Maxwell</a> at <a href='#'>North Carolina State University</a>
</div>
</div>
<div class='card-info'>Student leaders face a variety of challenges throughout their academic careers, from personal to professional situations. If you are a student leader, here's 5 ways to help alleviate some of your stress.</div>
<div class='utility-info'>
<ul class='utility-list'>
<li class='comments'><i class='fa fa-comments'></i> 12</li>
<li class='date'><i class='fa fa-calendar'></i> 06.06.17</li>
</ul>
</div>
<div class='gradient-overlay'></div>
<div class='color-overlay'></div>
</section>
<section class='card spoon-university food-holidays'>
<div class='category'>Lifestyle</div>
<div class='title-content'>
<h3>11 Food Holidays this Summer You Need to Know About</h3>
<hr>
<div class='intro'>You thought I was only here for the food? Well, you're right.</div>
<div class='author-info'>
<i class='fa fa-pencil fa-flip-horizontal'></i>
<a href='#'>Sina D'Amico</a> at <a href='#'>Penn State University</a>
</div>
</div>
<div class='card-info'>There’s nothing quite like having an entire day dedicated to a food you love so dearly – let's just call it a food holiday. Are there food holidays you probably don't know about. The answer is a short simple yes.</div>
<div class='utility-info'>
<ul class='utility-list'>
<li class='comments'><i class='fa fa-comments'></i> 15</li>
<li class='date'><i class='fa fa-calendar'></i> 06.05.17</li>
</ul>
</div>
<div class='gradient-overlay'></div>
<div class='color-overlay'></div>
</section>
<section class='card healthier wisdom-teeth'>
<div class='category'>Lifestyle</div>
<div class='title-content'>
<h3>9 Healthy Things to Consume When You Get Your Wisdom Teeth Out</h3>
<hr>
<div class='intro'>Because not being able to chew is rough.</div>
<div class='author-info'>
<i class='fa fa-pencil fa-flip-horizontal'></i>
<a href='#'>Emily Breay</a> at <a href='#'>University of California - Berkeley</a>
</div>
</div>
<div class='card-info'>Wisdom teeth surgeries warrant hilarious videos of things said under medication, days spent in bed binging movies and shows, and milkshakes on milkshakes. But what if you want to eat healthy through the pain?</div>
<div class='utility-info'>
<ul class='utility-list'>
<li class='comments'><i class='fa fa-comments'></i> 13</li>
<li class='date'><i class='fa fa-calendar'></i> 06.05.17</li>
</ul>
</div>
<div class='gradient-overlay'></div>
<div class='color-overlay'></div>
</section>
</article>
<article class='article-section'>
<div class='title-card'>
<span class='title'>Trending Stories</span>
<a class='more' href='#'>More <i class='fa fa-angle-right'></i></a>
</div>
<section class='card healthier never-stop-running'>
<div class='category'>Excersise</div>
<div class='title-content'>
<h3>Why I Run Every Chance I Get</h3>
<hr>
<div class='intro'>Everything I've learned about myself I've learned through running.</div>
<div class='author-info'>
<i class='fa fa-pencil fa-flip-horizontal'></i>
<a href='#'>Allison Curley</a> at <a href='#'>Wake Forest University</a>
</div>
</div>
<div class='card-info'>Anyone who's ever been a runner knows the sport can teach you so much about your body, life and personality. Heres my full experience of the sport and the things I believe it can do.</div>
<div class='utility-info'>
<ul class='utility-list'>
<li class='comments'><i class='fa fa-comments'></i> 23</li>
<li class='date'><i class='fa fa-calendar'></i> 06.08.17</li>
</ul>
</div>
<div class='gradient-overlay'></div>
<div class='color-overlay'></div>
</section>
<section class='card spoon-university starbucks'>
<div class='category'>Lifestyle</div>
<div class='title-content'>
<h3>7 Secret Ways to Earn More Free Stuff at Starbucks</h3>
<hr>
<div class='intro'>I apologize in advance for enabling your caffeine addiction.</div>
<div class='author-info'>
<i class='fa fa-pencil fa-flip-horizontal'></i>
<a href='#'>Sydney te Wildt</a> at <a href='#'>Georgetown University</a>
</div>
</div>
<div class='card-info'>Calling all coffee lovers. Throughout my many adventures of going to get coffee and frappes I learned to hack the system. Its actually possible to get free stuff at Starbucks. (I Swear)</div>
<div class='utility-info'>
<ul class='utility-list'>
<li class='comments'><i class='fa fa-comments'></i> 20</li>
<li class='date'><i class='fa fa-calendar'></i> 05.25.17</li>
</ul>
</div>
<div class='gradient-overlay'></div>
<div class='color-overlay'></div>
</section>
<section class='card spoon-university dunkin-donuts-healthy'>
<div class='category'>Lifestyle</div>
<div class='title-content'>
<h3>What to Order at Dunkin' Donuts When You're Trying to Be Healthy</h3>
<hr>
<div class='intro'>Do it for all that is good and of course the donuts.</div>
<div class='author-info'>
<i class='fa fa-pencil fa-flip-horizontal'></i>
<a href='#'>Shannon Carney</a> at <a href='#'>Fairfield University</a>
</div>
</div>
<div class='card-info'>Dunkin' Donuts is an institution that serves up delicious coffees and bakery treats. But in a land of all things donuts, bagels, and "extra extra," is healthy Dunkin' Donuts food an impossible reality?</div>
<div class='utility-info'>
<ul class='utility-list'>
<li class='comments'><i class='fa fa-comments'></i> 22</li>
<li class='date'><i class='fa fa-calendar'></i> 05.23.17</li>
</ul>
</div>
<div class='gradient-overlay'></div>
<div class='color-overlay'></div>
</section>
<section class='card spoon-university watermelon-dessert-pizza'>
<div class='category'>Recipe</div>
<div class='title-content'>
<h3>This Summer Watermelon Dessert Pizza is a BBQ Game Changer</h3>
<hr>
<div class='intro'>A healthy sweet treat that beats the heat.</div>
<div class='author-info'>
<i class='fa fa-pencil fa-flip-horizontal'></i>
<a href='#'>Jody Brimacombe</a> at <a href='#'>University of St.Andrews</a>
</div>
</div>
<div class='card-info'>There's nothing worse than showing up at a barbecue and realizing that people brought the same thing as you. Think its hard to bring something new. This watermelon dessert pizza will prove you wrong.</div>
<div class='utility-info'>
<ul class='utility-list'>
<li class='comments'><i class='fa fa-comments'></i> 21</li>
<li class='date'><i class='fa fa-calendar'></i> 06.05.17</li>
</ul>
</div>
<div class='gradient-overlay'></div>
<div class='color-overlay'></div>
</section>
</article>
</section>
</main>
</body>
<footer>
<script src='js/jquery-3.2.1.min.js'></script>
<script src='js/index.js'></script>
</footer>
</html>