html_css_example/index.html at main · lorenaizzo/html_css_example · 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
88
89
90
91
92
93
94
95
96
97
<!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">
    <title>Bugs</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <a href="#menu"><img src="images/keyboard_arrow_up-24px.svg" class="up"></a>
    <div class="container">
        <header id="menu">
            <nav>
                <ul>
                    <li>Home</li>
                    <li>Post</li>
                    <li>Coments</li>
                </ul>
            </nav>
            <div>
                <img src="images/bug_report-24px.svg" alt="logo" class="logo">
            </div>
            <nav>
                <ul class="menu2">
                    <li>About</li>
                    <li>Contact</li>
                </ul>
            </nav>
        </header>
        <div class="cuerpo">
            <section>
                <div class="columna">
                    <article>
                        <p class="copete">5 months ago in Journey</p>
                        <h1>How can we sing about love?</h1>
                        <img src="images/22.jpg" alt="imagen 22" class="imgArt">
                        <p class="descripcion">Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</p>
                    </article>
                    <article>
                        <p class="copete">5 months ago in Lifestyle</p>
                        <h1>Oh, I guess they have the blues</h1>
                        <img src="images/18.jpg" alt="imagen 18" class="imgArt">
                        <p class="descripcion">Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</p>
                    </article>
                    <article>
                        <p class="copete">8 months ago in Work</p>
                        <h1>How can we, how can we sing about ourselves?</h1>
                        <img src="images/12.jpg" alt="imagen 12" class="imgArt">
                        <p class="descripcion">Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</p>
                    </article>
                </div>
                <div class="columna">
                    <article>
                        <p class="copete">5 months ago in Lifestyle</p>
                        <h1>The king is made of paper</h1>
                        <img src="images/5.jpg" alt="imagen 5" class="imgArt">
                        <p class="descripcion">Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</p>
                    </article>
                    <article>
                        <p class="copete">7 months ago in Work</p>
                        <h1>Crying on the news</h1>
                        <img src="images/13.jpg" alt="imagen 13" class="imgArt">
                        <p class="descripcion">Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</p>
                    </article>
                    <article>
                        <p class="copete">10 months ago in Journey</p>
                        <h1>How can you not sing about love?</h1>
                        <img src="images/1.jpg" alt="imagen 1" class="imgArt">
                        <p class="descripcion">Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</p>
                    </article>
                </div>
            </section>
            <aside>
                <div class="content">
                    <h1>About</h1>
                    <p>Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</p>
                </div>
                <div class="content">
                    <h1>Popular Stories</h1>
                    <h2>The blind man</h2>
                    <img src="images/2.jpg" alt="imagen 2" class="img-aside">
                    <p class="copete">5 months ago in Lifestyle </p>
                    <h2>Crying on the news</h2>
                    <img src="images/3.jpg" alt="imagen 2" class="img-aside">
                    <p class="copete">8 months ago in Work</p>

                </div>
            </aside>
        </div>
    </div>
<footer>
    <h1>Subscribe to our newsletter</h1>
    <p>Join our monthly newsletter and never miss out on new stories and promotions.</p>
</footer>
</body>
</html>