-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
131 lines (131 loc) · 6.45 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<title>Blog</title>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<header>
<div class="main-1">
<h1>Move thinking forvard.</h1>
<p>Medium is a community of readers and writers offering unique perspectives on ideas large and small.</p>
<p>Sign up to read and interact with what matters most to you.</p>
<div class="buttons">
<div>Get started</div>
<div>Learn more</div>
</div>
</div>
</header>
<div class="main-block">
<article class="container">
<section class="content-box news">
<div class="named">
<div class="avatar-1"></div>
<p class="name gray"><span class="mark">Alyssa Coppelman</span> in <span class="mark">Vantage</span></p>
<time class="gray time-post" datetime="2004-07-24T18:18:18+04:00">2 days ago • 10 min read</time>
</div>
<div class="photo"></div>
<h1>Photos From Cuba's Pre-AirBnB Room Rentals Community</h1>
<p class="gray text">Check-in to Meg Griffiths' luminous portrait of...</p>
<p class="more gray"><a href="#">Read more...</a></p>
<div class="like-1 gray icon"></div>
<div class="arrows icon"></div>
<div class="bookmark icon"></div>
</section>
<section class="content-box news">
<div class="avatar-2"></div>
<div class="named">
<p class="name"><span class="mark">eve peyser</span></p>
<time class="gray" datetime="2004-07-24T18:18:18+04:00">3 days ago • 3 min read</time>
</div>
<h1>An Open Letter to Hulu Support</h1>
<p class="text letter">Update: <span class="italica">@hulu_support</span> responded and removed him from my account. I love you <span class="italica">@hulu_support</span>.</p>
<p class="text letter"><span class="italica">@hulu_support</span> i swear to god ther's nothing i can do to get this guy i used to date off my hulu plus.</p>
<p class="more gray"><a href="#">Read more...</a></p>
<div class="like-2 gray icon"></div>
<div class="arrows icon"></div>
<div class="bookmark icon responce"></div>
</section>
</article>
<div class="container">
<aside class="full-page">
<section class="full-page discussion">
<header class="full-page">
<h2 class="title-s block-s">Featured tags</h2>
<a href="#" class="more-nav gray block-s">Learn more</a>
</header>
<ul class="full-page news-menu menu gray">
<li class="content-box block-s"><a href="#">Terrorism</a></li>
<li class="content-box block-s"><a href="#">2016 Election</a></li>
<li class="content-box block-s"><a href="#">Hillary Clinton</a></li>
<li class="content-box block-s"><a href="#">Barnie Sanders</a></li>
<li class="content-box block-s"><a href="#">Refugees</a></li>
<li class="content-box block-s"><a href="#">ISIS</a></li>
<li class="content-box block-s"><a href="#">NCAA</a></li>
<li class="content-box block-s"><a href="#">Twitter</a></li>
<li class="content-box block-s"><a href="#">Artificial Intelligence</a></li>
<li class="content-box block-s"><a href="#">Moves</a></li>
<li class="content-box block-s"><a href="#">Ted Cruz</a></li>
<li class="content-box block-s"><a href="#">Donald Trump</a></li>
<li class="content-box block-s"><a href="#">BlackLivesMatter</a></li>
<li class="content-box block-s"><a href="#">Mental Health</a></li>
<li class="content-box block-s"><a href="#">Poetry</a></li>
<li class="content-box block-s"><a href="#">LGBTQ</a></li>
</ul>
</section>
<section class="full-page discussion">
<header class="full-page">
<h2 class="title-s block-s">Top stories on Medium</h2>
<a href="#" class="more-nav block-s gray">See more</a>
</header>
<div class="item full-page news-menu">
<div class="number content-box">1</div>
<p>Here are the Top Tech Companies' Secrets ...</p>
<p class="gray">Sarah Cooper</p>
</div>
<div class="item full-page news-menu">
<div class="number content-box">2</div>
<p>The Dropcam Team</p>
<p class="gray">Greg Duffy</p>
</div>
<div class="item full-page news-menu">
<div class="number content-box">3</div>
<p>Twitter Might Be The Most-Advertise Com...</p>
<p class="gray">jon henderen</p>
</div>
<div class="item full-page news-menu">
<div class="number content-box">4</div>
<p>What Happened To My Friend Roger?</p>
<p class="gray">Pendarvis H.</p>
</div>
<div class="item full-page news-menu">
<div class="number content-box">5</div>
<p>My Times as a Booker for a 'Sensual Masseu...</p>
<p class="gray">Megan Reynilds</p>
</div>
</section>
</aside>
<footer class="footer-page full-page">
<ul class="menu gray">
<li class="gray block-s"><a href="#">Helo</a></li>
<li class="gray block-s"><a href="#">Careers</a></li>
<li class="gray block-s"><a href="#">Developers</a></li>
<li class="gray block-s"><a href="#">Blog</a></li>
<li class="gray block-s"><a href="#">Privacy</a></li>
<li class="gray block-s"><a href="#">Terms</a></li>
<li class="gray block-s"><a href="#">About</a></li>
</ul>
</footer>
</div>
</div>
</body>
</html>