html-css-booleaner/index.html at main · AngelaFerraro18/html-css-booleaner · 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
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Booleaner</title>

    <!-- Inserimento foglio di stile -->
     <link rel="stylesheet" href="Css/style.css">
    <!-- /Inserimento foglio di stile -->
</head>

<body>

    <!-- Intestazione della pagina -->
    <header>
        <div id="logo-bg"></div>
        <div id="pattern-bg"></div>
    </header>
    <!-- /Intestazione della pagina -->

    <!-- Impostazione corpo della pagina -->
    <main>
        <section>
            <h1>Internet deve essere al servizio del "bene pubblico": il manifesto di Tim-Berners Lee</h1>
                <h2 class="colore-grigio">Scritto da <span id="titolo">The Booleaner</span><br>
                <span id="data">il 10/10/2020</span></h2>


                <div id="immagine-tim-1"></div>

                <div id="immagine-tim-2"></div>

                <p>1st Photo: John S. anf James L. Knight Foundation, by Scott Herichsen<br>
                2nd Photo: Wikimedia, by Paul Clarke</p>
        </section>

        <section>
            <p class="paragrafo1">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores illo ipsa possimus sed necessitatibus deleniti aliquid, quod voluptate, nulla odit sapiente tenetur officiis! Saepe, ab ipsam? Corporis reprehenderit possimus nostrum. Lorem ipsum dolor sit amet consectetur adipisicing elit. <span class="evidenziato">Beatae libero assumenda, odio, odit architecto numquam ad non totam inventore ea impedit consectetur ullam eaque modi dignissimos quod!</span> Nam, aspernatur delectus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum ipsa hic libero, illum consequatur perspiciatis ratione tenetur placeat accusamus! Eveniet, asperiores ea! Fuga, architecto! Magnam fuga eius dolore corrupti quisquam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore illum nihil sapiente nostrum, dolore iure ducimus consequatur hic. Magni quisquam id, porro debitis alias natus totam mollitia laborum animi ipsa! Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque impedit neque adipisci illum id autem laudantium odit dolores, ullam facere facilis aliquid vel natus enim rem. Qui, natus. Ex, magnam!
            </p>

            <ul>
                <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque nulla rem, ab ipsam suscipit unde dolor facilis incidunt perferendis natus nemo asperiores voluptatem vitae odio nihil dolorem? Doloremque, quia culpa.</li>
                <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sapiente rerum praesentium, ex, omnis cumque necessitatibus autem tempore possimus amet exercitationem consequatur tenetur. Eum, saepe pariatur. In tempore quidem iure fuga!</li>
                <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita eveniet atque debitis autem dignissimos reprehenderit eos ducimus voluptate, nostrum impedit iste, delectus voluptatibus harum nemo adipisci pariatur dicta cupiditate? Voluptate.</li>
            </ul>
        </section>

        <section>
            <table>
                <!-- Intestazione tabella -->
                 <thead>
                    <tr>
                        <th>Lorem ipsum</th>
                        <th>Lorem ipsum</th>
                        <th>Lorem ipsum</th>
                    </tr>
                 </thead>
                <!-- /Intestazione tabella -->
                <!-- Corpo della tabella -->
                 <tbody>
                    <tr class="riga-colorata">
                        <td>Lorem ipsum</td>
                        <td>Lorem ipsum</td>
                        <td>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam eaque autem omnis eius cupiditate veniam! Modi quibusdam animi perspiciatis quo reprehenderit non voluptatibus ad voluptatem deleniti delectus, nam neque enim.</td>
                    </tr>
                    <tr>
                        <td>Lorem ipsum</td>
                        <td>Lorem ipsum</td>
                        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, animi ex illo eius blanditiis pariatur quod vitae quos exercitationem voluptas quae ut dolorum fuga ipsum distinctio temporibus est ipsa nam?</td>
                    </tr>
                 </tbody>
                 <!-- /Corpo della tabella -->
                 <!-- Fine della tabella -->
                 <tfoot>
                    <tr class="riga-colorata">
                        <td>Lorem ipsum</td>
                        <td>Lorem ipsum</td>
                        <td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quasi veritatis maiores saepe asperiores, odio, soluta exercitationem minima quod impedit eum similique aspernatur! Ipsam, a alias nemo atque omnis inventore?</td>
                    </tr>
                 </tfoot>
                 <!-- /fine della tabella -->
            </table>

            <p class="paragrafo1">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Porro non quisquam a delectus, veritatis similique incidunt perspiciatis necessitatibus, officia animi autem eos, tempora dignissimos alias! <span class="evidenziato">Ipsum hic magnam culpa facere?Lorem ipsum dolor sit, amet consectetur adipisicing elit.</span>Esse, est sint excepturi quae alias quis ab odio atque repudiandae dolorem omnis illo consectetur vitae architecto? Doloribus velit facere debitis magni?Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet possimus itaque recusandae laborum, magni eius voluptate quaerat facilis quis cumque deserunt incidunt culpa at ad, consequuntur minima quisquam exercitationem! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorum molestias eveniet aliquid voluptates dolorem, numquam laboriosam, magni vitae vero autem molestiae, animi quidem velit dicta sit at perferendis eaque corrupti. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo quidem voluptate repellendus nulla necessitatibus qui labore minima quaerat dicta possimus iusto dignissimos ex numquam ab, blanditiis itaque! Totam, ullam provident! Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate molestias esse iure eaque, dolor reiciendis iusto sint quaerat in autem et commodi adipisci veniam cum id rerum impedit aliquam dolore! Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate possimus temporibus, corporis consectetur nostrum deleniti harum labore? Quibusdam impedit quod ipsa numquam, laborum magnam odio assumenda ipsum saepe expedita. Commodi!</p>
        </section>

        <section>
            <h3 class="colore-grigio">Potrebbero interessarti</h3>
                <div id="container1">
                    <p class="frase-bianca"><strong>Lorem ipsum dolor</strong></p>
                    <img id="immaginepc">
                </div>

                <div id="container2">
                    <p class="frase-bianca"><strong>Lorem ipsum dolor</strong></p>
                    <img id="immaginegraf">
                </div>

        </section>

    </main>
    <!-- /Impostazione corpo della pagina -->

</body>

</html>