-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
97 lines (97 loc) · 3.54 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flex Layouts</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<main class="main columns">
<section class="column main-column">
<a href="#" class="article first-article">
<figure class="article-imgage is-4by3">
<img src="https://s3.amazonaws.com/cms-assets.tutsplus.com/uploads/users/1366/posts/26611/attachment/image-01.png" alt="">
</figure>
<div class="article-body">
<h2 class="article-title">
Hello world.
</h2>
<p class="article-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eligendi, voluptate, sapiente modi sint voluptatibus numquam eum praesentium, recusandae facilis cupiditate vitae temporibus totam minima illo doloribus laboriosam eveniet dolorem? Asperiores assumenda minus corrupti quo sint eius officia dicta explicabo dolor aliquam cupiditate eveniet consequatur ipsa itaque, nemo harum fugiat soluta natus necessitatibus ex suscipit, rem odio. Debitis officiis, quisquam.
</p>
<footer class="article-info">
<span>By Joe Smith</span>
<span>42 comments</span>
</footer>
</div>
</a>
<a href="#" class="article">
<figure class="article-image is-16yb9">
<img src="https://s3.amazonaws.com/cms-assets.tutsplus.com/uploads/users/1366/posts/26611/attachment/image-02.png" alt="">
</figure>
<div class="article-body">
<h2 class="article-title">
Hello World.
</h2>
<p class="article-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus consequatur qui nihil, laudantium tempore minus at velit nostrum veniam incidunt saepe non error unde praesentium quae suscipit odit fuga quidem.Ab maiores ratione repellendus ut rerum commodi, quia sed, tempore doloremque natus, hic fugiat illum illo cumque incidunt ducimus non quis consectetur itaque blanditiis. Neque, maiores? Itaque libero voluptas maiores.
</p>
<footer class="artile-info">
<span>By Jane Smith</span>
<span>53 comments</span>
</footer>
</div>
</a>
</section>
<section class="column">
<a href="#" class="article">
<figure class="article-image is-3by2">
<img src="https://s3.amazonaws.com/cms-assets.tutsplus.com/uploads/users/1366/posts/26611/attachment/image-03.png" alt="">
</figure>
<div class="article-body">
<h2 class="article-title">
Hello World.
</h2>
<p class="article-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<footer class="article-info">
<span>By Jamie Smith</span>
<span>12 comments</span>
</footer>
</div>
</a>
<a href="#" class="article">
<div class="article-body">
<h2 class="article-title">
Hello World.
</h2>
<p class="article-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<footer class="article-info">
<span>By John Smith</span>
<span>53 comments</span>
</footer>
</div>
</a>
<a href="#" class="article">
<div class="article-body">
<h2 class="article-title">
Hello World.
</h2>
<p class="article-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<footer class="article-info">
<span>By Jamie Smith</span>
<span>1 comment</span>
</footer>
</div>
</a>
</section>
</main>
</body>
</html>