WebDevCourse-HTML-Newspaper-exercise/index.html at master · tipoidarraga/WebDevCourse-HTML-Newspaper-exercise · 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
98
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/styles.css">
    <title>DevsNews</title>
</head>
<body>
    <header>
        <nav>
            <a href="/index.html">Inicio</a>
            <a href="/deportes.html">Deportes</a>
            <a href="/internacional.html">internacional</a>
            <a href="/contacto.html">Contacto</a>
        </nav>
    </header>
    <div>
        <figure>
            <img class="logo" src="/img/logo.svg" alt="Logo">
        </figure>
    </div>
    <div>
        <figure>
            <img src="/img/banner.jpg" alt="banner principal">
        </figure>
    </div>
    <main>
        <h1>
            Noticias del mundo de los desarrolladores
        </h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat sint blanditiis reprehenderit quae aut non, delectus deleniti aliquam. Quaerat, consequuntur!
        </p>
        <section>
            <h2>
                Noticias destacadas de la semana
            </h2>
            <article>
                <h3>
                    ¿Cuándo comienzan los cuartos de final de la UEFA Chamopns League?
                </h3>
                <small>DEPORTES</small>
                <figure>
                    <img src="/img/champions.jpg" alt="Imagen de la copa de la champions league">
                </figure>
                <p>
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquid optio tenetur necessitatibus repudiandae repellat consequatur aliquam temporibus accusantium pariatur, incidunt neque? Aspernatur ea, aut voluptas impedit maxime voluptate! Laboriosam soluta odit veritatis non voluptates? Neque deleniti facilis veniam aspernatur consequatur optio at, aut ratione sunt modi sapiente, eos debitis et quam odit minima illum! Fugit quis sunt earum? Id qui magnam esse asperiores ex minus voluptatibus sapiente ad maxime, ducimus molestias aspernatur quod sequi voluptatum quisquam quas molestiae sit reprehenderit reiciendis deserunt aut animi modi eaque. Omnis culpa, reiciendis asperiores eum mollitia, aliquam voluptatem sit sint nemo, saepe modi vero.
                </p>
            </article>
            <hr>
            <article>
                <h3>
                    Las mejores jugadas de Messi en la temporada
                </h3>
                <small>DEPORTES</small>
                <figure>
                    <img src="/img/messi.jpg" alt="Lionel Messi">
                </figure>
                <p>
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquid optio tenetur necessitatibus repudiandae repellat consequatur aliquam temporibus accusantium pariatur, incidunt neque? Aspernatur ea, aut voluptas impedit maxime voluptate! Laboriosam soluta odit veritatis non voluptates? Neque deleniti facilis veniam aspernatur consequatur optio at, aut ratione sunt modi sapiente, eos debitis et quam odit minima illum! Fugit quis sunt earum? Id qui magnam esse asperiores ex minus voluptatibus sapiente ad maxime, ducimus molestias aspernatur quod sequi voluptatum quisquam quas molestiae sit reprehenderit reiciendis deserunt aut animi modi eaque. Omnis culpa, reiciendis asperiores eum mollitia, aliquam voluptatem sit sint nemo, saepe modi vero.
                </p>
            </article>
            <article>
                <h3>
                    Trump impone nuevas medidas para migrantes en EEUU
                </h3>
                <small>INTERNACIONAL</small>
                <figure>
                    <img src="/img/trump.jpg" alt="presidente Trump">
                </figure>
                <p>
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquid optio tenetur necessitatibus repudiandae repellat consequatur aliquam temporibus accusantium pariatur, incidunt neque? Aspernatur ea, aut voluptas impedit maxime voluptate! Laboriosam soluta odit veritatis non voluptates? Neque deleniti facilis veniam aspernatur consequatur optio at, aut ratione sunt modi sapiente, eos debitis et quam odit minima illum! Fugit quis sunt earum? Id qui magnam esse asperiores ex minus voluptatibus sapiente ad maxime, ducimus molestias aspernatur quod sequi voluptatum quisquam quas molestiae sit reprehenderit reiciendis deserunt aut animi modi eaque. Omnis culpa, reiciendis asperiores eum mollitia, aliquam voluptatem sit sint nemo, saepe modi vero.
                </p>
            </article>
            <article>
                <h3>
                    El aislamiento preventivo se renueva hasta el 30 de Agosto
                </h3>
                <small>INTERNACIONAL</small>
                <figure>
                    <img src="/img/covid19.jpg" alt="Corona virus célula">
                </figure>
                <p>
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquid optio tenetur necessitatibus repudiandae repellat consequatur aliquam temporibus accusantium pariatur, incidunt neque? Aspernatur ea, aut voluptas impedit maxime voluptate! Laboriosam soluta odit veritatis non voluptates? Neque deleniti facilis veniam aspernatur consequatur optio at, aut ratione sunt modi sapiente, eos debitis et quam odit minima illum! Fugit quis sunt earum? Id qui magnam esse asperiores ex minus voluptatibus sapiente ad maxime, ducimus molestias aspernatur quod sequi voluptatum quisquam quas molestiae sit reprehenderit reiciendis deserunt aut animi modi eaque. Omnis culpa, reiciendis asperiores eum mollitia, aliquam voluptatem sit sint nemo, saepe modi vero.
                </p>
            </article>
        </section>
    </main>

    <footer>
        <a href="/index.html">Inicio</a>
        <a href="/deportes.html">Deportes</a>
        <a href="/internacional.html">internacional</a>
        <a href="/contacto.html">Contacto</a>
    </footer>
</body>
</html>