html-css-booleaner/index.html at main · Marcap00/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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="author" content="Marcapp00">
        <meta name="description" content="The Booleaner journal">
        <link rel="stylesheet" href="style.css">
        <title>The Booleaner</title>
    </head>

    <body>
        <header>
            <div id="container-logo">
                <img class="header-image" src="img/logo.svg" alt="">
            </div>

        </header>
        <div class="container">


            <main>
                <!--Title Section-->
                <section id="title-section">
                    <!--Title-->
                    <h1>Internet deve essere al servizio del "bene pubblico": il manifesto di Tim Berners Lee</h1>
                    <!--Caption-->
                    <div class="caption-title">
                        Scritto da <span id="caption-title-text">The Booleaner</span>
                    </div>
                    <div class="caption-title-date">il 10/10/2020</div>
                </section>

                <!--Images Section-->
                <section id="images-section">
                    <!--Images-->
                    <div class="images">
                        <img src="img/tim-1.jpg" alt="Tim Berners Lee speaks">
                        <img src="img/tim-2.jpg" alt="Tim Berners Lee">
                    </div>
                    <!--Caption Images-->
                    <div class="caption-images">
                        1st Photo: John S. and James L. Knight foundation, by Scott Henrichsen
                        <br>
                        2nd Photo: Tim Berners Lee, by Paul Clarke
                    </div>
                </section>

                <!--Text section-->
                <section id="text-section">
                    <!--paragraph-->
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste similique laborum a minus natus nam, velit tempora?
                        <span class="highlighter">
                            Corrupti consequuntur nemo quae dicta veritatis quam.
                        </span>
                         Sunt quam dignissimos minima obcaecati quisquam.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste similique laborum a minus natus nam, velit tempora? Corrupti consequuntur nemo quae dicta veritatis quam. Sunt quam dignissimos minima obcaecati quisquam
                    </p>
                    <!--List of things-->
                    <ul>
                        <li>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident, impedit sint deleniti perferendis laborum at nesciunt error, perspiciatis reprehenderit unde amet repellat ullam dignissimos exercitationem harum! Consequatur illo odio dolores!
                        </li>
                        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta placeat id accusamus! Laudantium quo quia cupiditate eveniet at nostrum voluptatem tempora libero, laboriosam doloremque! Dolorum, nostrum exercitationem. Velit, rem in.
                        </li>
                        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum dicta hic libero, tempora eos natus nostrum reprehenderit temporibus architecto vitae tempore modi fugiat molestiae veritatis dignissimos consequuntur laudantium possimus doloribus?
                        </li>
                    </ul>
                </section>

                <!--Table-->
                <section id="table">
                    <table>
                        <!--Head row-->
                        <thead>
                            <tr>
                                <th >Lorem ipsum dolor</th>
                                <th >Lorem ipsum dolor</th>
                                <th >Lorem ipsum dolor</th>
                              </tr>
                        </thead>

                        <tbody>
                            <!--First row-->
                            <tr class="row">
                                <td class="element">Lorem ipsum dolor</td>
                                <td class="element">Lorem ipsum dolor</td>
                                <td >Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero consequatur minima labore sequi corrupti, quidem magnam aut, obcaecati recusandae, reprehenderit accusantium unde minus quaerat totam voluptatibus ullam illo! Soluta, dolor?</td>
                              </tr>
                              <!--Second Row-->
                              <tr>
                                <td class="element">Lorem ipsum dolor</td>
                                <td class="element">Lorem ipsum dolor</td>
                                <td >Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ducimus nostrum cum pariatur quas odit fugit provident voluptatibus ut voluptatum dolores eum vitae consectetur, eos voluptas dolore numquam. Odio, ea numquam!</td>
                              </tr>
                              <!--Third Row-->
                              <tr class="row">
                                <td class="element">Lorem ipsum dolor</td>
                                <td class="element">Lorem ipsum dolor</td>
                                <td >Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas ullam sint rerum sequi aut aspernatur? Libero temporibus eius natus sequi. Minima ab voluptate suscipit? Non vero ipsa cumque minima. Labore.</td>
                              </tr>
                        </tbody>

                    </table>
                </section>
                <!--second paragraph-->
                <p>
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad dolore architecto vel et cumque quasi, reprehenderit omnis dolores blanditiis hic sequi, adipisci, recusandae voluptates magnam quisquam excepturi doloremque impedit. Nesciunt?
                    <span class="highlighter">
                    Suscipit tenetur inventore doloribus alias atque aliquam, labore esse magni sunt incidunt.
                    </span>
                    Cumque dolorum vel consequuntur quis debitis excepturi asperiores impedit, laborum alias aliquam sunt eligendi quasi. Obcaecati, soluta sunt!
                </p>
            </main>

            <footer>

                <!--Title footer-->
                <h3>Potrebbero interessarti</h3>
                <!--Footer images-->
                <figure>
                    <div class="footer-image monitor">Lorem ipsum dolor</div>
                    <div class="footer-image graph">Lorem ipsum dolor</div>
                </figure>
            </footer>
        </div>

    </body>
</html>