-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
125 lines (99 loc) · 5.24 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
<!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" />
<!--Google Font-->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap" rel="stylesheet">
<title>The News Times</title>
<!--Custom CSS-->
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<header class="brand-header">
<h1 class="brand">The News Times</h1>
</header>
<section class="row">
<article class="story quarter">
<h1 class="article-title">Student Learns HTML</h1>
<p class="article-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic ad in quas alias non!
Expedita similique et dolore illum
doloremque vel accusantium ut eos tempora sequi, doloribus vitae mollitia praesentium ex ullam? Dolorem
labore fugiat
neque nostrum porro vero fugit.</p>
<p class="article-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam corrupti, eius
odio neque incidunt esse fuga veritatis
ipsum, eligendi mollitia, porro quasi provident nisi sit! Doloribus, eligendi nemo, ad laudantium
cupiditate aspernatur
eveniet asperiores modi praesentium voluptas eos sunt odio.</p>
</article>
<article class="story main-story">
<h1 class="article-title"><em>BREAKING: Puppies Are Adorable</em></h1>
<img class="article-img" src="http://placecorgi.com/500/250" />
<p class="article-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, dolores? Illo
dolores, rerum iste aut porro doloribus
fugit itaque voluptas.</p>
<p class="article-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium incidunt ullam
ea magni ipsam perferendis ratione
pariatur enim repellendus quia?</p>
</article>
<article class="story quarter">
<h1 class="article-title">CSS Is Apparently a Thing</h1>
<p class="article-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic ad in quas alias non!
Expedita similique et dolore illum
doloremque vel accusantium ut eos tempora sequi, doloribus vitae mollitia praesentium ex ullam? Dolorem
labore fugiat
neque nostrum porro vero fugit.</p>
<p class="article-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam corrupti, eius
odio neque incidunt esse fuga veritatis
ipsum, eligendi mollitia, porro quasi provident nisi sit! Doloribus, eligendi nemo, ad laudantium
cupiditate aspernatur
eveniet asperiores modi praesentium voluptas eos sunt odio.</p>
</article>
</section>
<section class="row">
<article class="story quarter"> <!--quater 25% of space in Flexbox-->
<h1 class="article-title">Boy Likes Turtles</h1>
<p class="article-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, perferendis!
Accusamus asperiores quod vitae architecto
natus alias fugiat aliquam unde sint expedita repellat rerum, obcaecati hic placeat recusandae quaerat.
Dolores excepturi
earum minus magni! Animi aperiam eligendi molestias necessitatibus ducimus.</p>
<p class="article-text">Voluptate, ut, cupiditate ducimus vitae blanditiis ex impedit debitis est tempora
dolores nam sed. Esse nobis ea inventore
qui enim quia beatae ab commodi laboriosam quam aliquam aut perspiciatis fuga nam rerum temporibus
voluptatum explicabo
voluptate, pariatur ullam laudantium eligendi.</p>
</article>
<ul class="story three-quarter the-sections"> <!--three quarter 75% of Space + the-sections Columns FlexBox-->
<li class="site-section site-section-politics">
<a href="#" class="section-link">
Politics
</a>
</li>
<li class="site-section site-section-tech">
<a href="#" class="section-link">
Technology
</a>
</li>
<li class="site-section site-section-local">
<a href="#" class="section-link">
Local
</a>
</li>
<li class="site-section site-section-opinion">
<a href="#" class="section-link">
Opinion
</a>
</li>
<li class="site-section site-section-sports">
<a href="#" class="section-link">
Sports
</a>
</li>
</ul>
</section>
</body>
</html>