html-css-booleaner/index.html at master · Gaki13/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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>The booleaner</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <header>
            <!-- pattern con titolo  -->
            <div class="header">
                <img id="logo" src="img/logo.svg" alt="the booleaner">
            </div>

        </header>

        <main>
            <!-- articolo -->
            <h1>Internet deve essere al servizio del "bene pubblico": il manifesto di Tim Berners-Lee</h1>

            <div class="autore">
                Scritto da <span>The Booleaner</span>  <br>
                 <div id="data">il 14/03/2022</div>
            </div>

            <div class="foto">
                <img src="img/tim-1.jpg" alt="foto tim">
                <img src="img/tim-2.jpg" alt="foto 2 tim">
                <br>
                1st Photo: John S. and James L. Knight Foundation, by Scott Henrichsen <br>
                2nd Photo: Wikimedia, by Paul Clarke
            </div>

            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa necessitatibus, corporis in dolorum soluta sint quas alias ipsum laboriosam nulla veniam laborum ab a quod nihil at facilis voluptatum odio. at facilis voluptatum odio at facilis voluptatum odio at facilis voluptatum odio Lorem ipsum dolor <span class="sottolineato">cum ut velit ullam alias voluptatibus corrupti odio</span>sit amet consectetur adipisicing eli . Eligendi doloribus fugit, ea quos fugiat voluptatem totam,  odit aspernatur. Eum nisi laborum optio. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Qui dolore esse suscipit illo dolorem cum ratione, aliquam magnam fugit velit maxime aliquid, voluptatibus, reprehenderit dolor vel! Cumque reprehenderit ea officiis.
            </p>

            <ul class="elenco">
                <li>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit explicabo fugit eos ratione cupiditate similique sapiente magni, et delectus amet recusandae ut quo minus autem in. Ex eos nemo magni!
                </li>
                <li>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis ipsam nemo illum consequatur mollitia quaerat a, nostrum nesciunt quod debitis repellendus ex ut doloribus quo totam, perferendis praesentium atque enim!
                </li>
                <li>
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique exercitationem nobis dolor at corporis dicta nostrum harum suscipit recusandae accusantium aspernatur earum hic, dolore labore praesentium ab temporibus laborum adipisci.
                </li>
            </ul>

            <table style="width: 100%;">
                <thead>
                    <tr>
                        <th style="width: 20%;">lorem ipsum dolor</th>
                        <th style="width: 20%;">lorem ipsum dolor</th>
                        <th style="width: 60%;">lorem ipsum dolor</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="colonna">
                        <td>lorem ipsum dolor</td>
                        <td>lorem ipsum dolor</td>
                        <td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo necessitatibus esse eius cum dicta quis ab, corporis minus qui molestias quidem repellat similique. Neque architecto, atque dolor enim consectetur minus. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo repudiandae laborum animi eius vero facere recusandae laudantium temporibus natus harum nemo distinctio dolores, quaerat, rem ipsum ratione adipisci nobis perferendis. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magnam, cupiditate reiciendis esse aut temporibus commodi nemo, minima consequuntur nihil soluta quidem ab suscipit inventore rerum magni quibusdam quia animi beatae.</td>
                    </tr>
                    <tr>
                        <td>lorem ipsum dolor</td>
                        <td>lorem ipsum dolor</td>
                        <td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo necessitatibus esse eius cum dicta quis ab, corporis minus qui molestias quidem repellat similique. Neque architecto, atque dolor enim consectetur minus. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo repudiandae laborum animi eius vero facere recusandae laudantium temporibus natus harum nemo distinctio dolores, quaerat, rem ipsum ratione adipisci nobis perferendis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium repellendus nulla eum culpa maxime ut doloribus, quis ducimus magnam quam incidunt animi eaque provident cum, sed tempore suscipit magni esse!</td>
                    </tr>
                    <tr class="colonna">
                        <td>lorem ipsum dolor</td>
                        <td>lorem ipsum dolor</td>
                        <td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo necessitatibus esse eius cum dicta quis ab, corporis minus qui molestias quidem repellat similique. Neque architecto, atque dolor enim consectetur minus. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo repudiandae laborum animi eius vero facere recusandae laudantium temporibus natus harum nemo distinctio dolores, quaerat, rem ipsum ratione adipisci nobis perferendis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium minima velit laborum error itaque, recusandae amet nam hic ratione, aspernatur quos dolore! Laboriosam, blanditiis quia. Quis neque facere ratione atque!</td>
                    </tr>

                </tbody>
            </table>

            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa necessitatibus, corporis in dolorum soluta sint quas alias ipsum laboriosam nulla veniam laborum ab a quod nihil at facilis voluptatum odio. Lorem ipsum dolor sit amet consectetur adipisicing elit .  voluptatibus corrupti odio odit aspernatur. Eum nisi laborum optio. Lorem ipsum, dolor sit amet consectetur adipisicing elit. <span class="sottolineato">Eligendi doloribus fugit, ea quos fugiat voluptatem totam, cum ut velit ullam alias</span>Qui dolore esse suscipit illo dolorem cum ratione, aliquam magnam fugit velit maxime aliquid , voluptatibus, reprehenderit dolor vel! Cumque reprehenderit ea officiis.
            </p>


        </main>

        <footer>
            <!-- sezione potrebbe interessarti -->
            <h3>Potrebbero Interessarti</h3>
            <div class="monitor">
                Lorem ipsum dolor

            </div>
            <div class="graph">
                Lorem ipsum dolor

            </div>
        </footer>
    </body>
</html>