html-css-booleaner/index.html at main · PierdomenicoPacilio/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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Booleaner</title>

    <!-- collegamento con file css -->
    <link rel="stylesheet" href="css/style.css">
    <!-- /collegamento con file css -->

</head>

<body>

    <header>
        <!-- upper line -->
        <div class="pattern">
            <div class="logo">
            </div>
        </div>
        <!-- /upper line -->
    </header>

    <main>
        <!-- titolo dell'articolo -->
        <h1>Internet deve essere al servizio del "bene pubblico": il manifesto di Tim Berners-Lee</h1>
        <span class="grigio">Scritto da </span> <span class="azzurrino">The Booleaner</span> <br>
        <p class="grigio piccolo">il 10/10/2020</p>
        <!-- /titolo dell'articolo -->

        <!-- immagini dell'articolo-->
        <img src="css/img/tim-1.jpg" alt="Tim Berners-Lee1">
        <img src="css/img/tim-2.jpg" alt="Tim Berners-Lee2"> <br>
        <span class="piccolo">1st Photo: John S. and James L. Knight Foundation, by Scott Henrichsen</span> <br>
        <span class="piccolo">2nd Photo: Wikikmedia, by Paul Clarke</span>
        <!-- /immagini dell'articolo-->

        <p class="paragrafo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud <span class="sottolineato">exerci tation ullamcorper suscipit lobortis nisi ut aliquip ex ea commodo consequat</span>. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

        <ul>
            <li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</span></li>
            <li><span>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisi ut aliquip ex ea commodo consequat.</span></li>
            <li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</span></li>
        </ul>

        <table>
            <!-- intestazione tabella -->
            <thead>
                <tr>
                    <th><strong>Lorem ipsum dolor</strong></th>
                    <th><strong>Lorem ipsum dolor</strong></th>
                    <th class="terzo"><strong>Lorem ipsum dolor</strong></th>
                </tr>
            </thead>
            <!-- /intestazione tabella -->

            <!-- corpo tabella -->
            <tbody>
                <tr>
                    <th>Lorem ipsum dolor</th>
                    <th>Lorem ipsum dolor</th>
                    <th>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium eos quo, placeat consectetur ullam fugiat similique perferendis repellendus illo mollitia eveniet expedita a quia modi. Totam saepe quibusdam natus harum.</th>
                </tr>
                <tr class="bianco">
                    <th>Lorem ipsum dolor</th>
                    <th>Lorem ipsum dolor</th>
                    <th>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium eos quo, placeat consectetur ullam fugiat similique perferendis repellendus illo mollitia eveniet expedita a quia modi. Totam saepe quibusdam natus harum.</th>
                </tr>
                <tr>
                    <th>Lorem ipsum dolor</th>
                    <th>Lorem ipsum dolor</th>
                    <th>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium eos quo, placeat consectetur ullam fugiat similique perferendis repellendus illo mollitia eveniet expedita a quia modi. Totam saepe quibusdam natus harum.</th>
                </tr>
            </tbody>
            <!-- /corpo tabella -->
        </table>

        <p class="paragrafo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nis ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel <span class="sottolineato">illum dolore eu feugiat nulla facilisis at vero eros et accumsan et justo</span> odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

    </main>

    <footer>
        <p class="grigio extra"><strong>Potrebbero interessarti</strong></p>
        <div class="extra1">
            <h3>Lorem ipsum dolor</h3>
        </div>
        <div class="extra2">
            <h3>Lorem ipsum dolor</h3>
        </div>
    </footer>

</body>

</html>