forked from ironhack-labs/lab-css-ironhack-news
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
81 lines (75 loc) · 2.74 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>flexbox</title>
<title>Ironhack News</title>
<link rel="stylesheet" href="styles/style.css" />
</head>
<body>
<header>
<h1 class="newspaper-name">Ironhack News</h1>
<nav>
<ul class="navbar">
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Tech</a></li>
<li><a href="#">Sports</a></li>
</ul>
</nav>
</header>
<main>
<article class="main-article">
<div class="image">
<img src="images/main-article.jpg" alt="Article 1 Image"/>
</div>
<div class="content">
<h2>Main Article</h2>
<p>
This is the first article's content. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Morbi ac lacinia nibh, nec faucibus
enim. Nullam quis lorem posuere, hendrerit tellus eget, tincidunt
ipsum. Nam nulla tortor, elementum in elit nec, fermentum dignissim
sapien. Sed a mattis nisi, sit amet dignissim elit. Sed finibus eros
sit amet ipsum scelerisque interdum. Curabitur justo nibh,
</p>
<button class="btn btn-blue">Read more</button>
</div>
</article>
<section class="articles-container">
<article class="article">
<img src="images/article-1.jpg" alt="Article 1 Image" />
<h2>Article 1</h2>
<p>
This is the second article's content. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
</p>
<button class="btn btn-blue">Read more</button>
</article>
<article class="article">
<img src="images/article-2.jpg" alt="Article 2 Image" />
<h2>Article 2</h2>
<p>
This is the third article's content. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
</p>
<button class="btn btn-blue">Read more</button>
</article>
<article class="article">
<img src="images/article-3.jpg" alt="Article 3 Image" />
<h2>Article 3</h2>
<p>
This is the third article's content. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
</p>
<button class="btn btn-blue">Read more</button>
</article>
</section>
</main>
<!-- DO NOT REMOVE - viewport width label -->
<span class="viewport-dimensions"></span>
<!-- DO NOT REMOVE - A simple JS script used to display the viewport width label -->
<script src="javascript/width-label.js"></script>
</body>
</html>