lab-css-ironhack-news/index.html at master · Theodor-gif/lab-css-ironhack-news · GitHub

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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ironhack News</title>
    <link rel="stylesheet" href="styles/style.css" />
  </head>
  <body>
    <header>
      <h1 class="newspaper-name" id="top">Ironhack News</h1>
      <section class="menu-icon">
        <nav>
          <hr/>
          <hr/>
          <hr/>
        </nav>
      </section>
      <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>
    <a href="#top" alt="back-to-top">Back to top</a>

    <!-- 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>