index.html

<!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>
		<link rel="stylesheet" href="./css/style.css">
	</head>

	<body>
		<!-- Intestazione con logo e background -->
		<header>
			<img src="./img/logo.svg" alt="TheBooleanerLogo">
		</header>

		<!-- Inizio Main -->
		<main>
			<!-- Inizio sezione titolo e immagini -->
			<section>
				<h1>Internet deve essere al servizio del "bene pubblico": Il manifesto di Tim Berners-Lee</h1>
				<p>Scritto da <a href="https://boolean.careers">The Booleaner</a><br>il 10/10/2020</p>
				<img src="./img/tim-1.jpg" alt="tim-1">
				<img src="./img/tim-2.jpg" alt="tim-2">
				<p>
					1st Photo: Jhon S. and James l. Knight Foundation, by Scott Herrichien
					<br>
					2nd Photo: Wikimedia, by Paul Clarke
				</p>
			</section>

			<!-- Inizio articolo principale -->
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent aliquam ligula convallis faucibus vestibulum. Aenean ac quam ac lorem mattis sagittis vitae posuere lacus. Praesent vitae dui molestie, ultrices leo vulputate, interdum dolor. Phasellus aliquet blandit risus non pretium. Vivamus bibendum semper sollicitudin. <b>Suspendisse efficitur ipsum eget gravida gravida.</b> In interdum enim at ligula rhoncus, eget faucibus dui tempus. Donec vel urna arcu. Sed vulputate neque vitae neque molestie, sed convallis justo commodo. In pellentesque diam et massa cursus, et maximus dolor pulvinar. Suspendisse consequat ultrices aliquet.</p>

			<ul>
				<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum unde sint in iusto voluptate! Tempore delectus nisi nulla a ex repellat ipsum libero sint id assumenda laudantium, odio recusandae eligendi!</li>
				<li>Aenean ac quam ac lorem mattis sagittis vitae posuere lacus. Praesent vitae dui molestie, ultrices leo vulputate, interdum dolor.</li>
				<li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laboriosam, <b>necessitatibus incidunt.</b> Iusto ab doloremque et quam explicabo voluptates enim reiciendis saepe labore molestiae, corrupti ratione, qui id, reprehenderit quis facere!</li>
			</ul>

			<!-- Inizio tabella dati -->

			<table>
				<thead>
					<tr class="header-tab">
						<th class="tablespacing">Lorem ipsum dolor</th>
						<th class="tablespacing">Lorem ipsum dolor</th>
						<th>Lorem ipsum dolor</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>Lorem ipsum dolor</td>
						<td>Lorem ipsum dolor</td>
						<td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem cum quaerat, nobis repellendus tempore sed illo qui voluptatibus doloribus nisi officiis facilis enim perferendis labore culpa magni magnam totam aliquid?</td>
					</tr>
					<tr class="pair-row">
						<td>Lorem ipsum dolor</td>
						<td>Lorem ipsum dolor</td>
						<td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem cum quaerat, nobis repellendus tempore sed illo qui voluptatibus doloribus nisi officiis facilis enim perferendis labore culpa magni magnam totam aliquid?</td>
					</tr>
					<tr class=>
						<td>Lorem ipsum dolor</td>
						<td>Lorem ipsum dolor</td>
						<td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem cum quaerat, nobis repellendus tempore sed illo qui voluptatibus doloribus nisi officiis facilis enim perferendis labore culpa magni magnam totam aliquid?</td>
					</tr>
				</tbody>
			</table>

			<!-- Articolo finale -->

			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent aliquam ligula convallis faucibus vestibulum. Aenean ac quam ac lorem mattis sagittis vitae posuere lacus. Praesent vitae dui molestie, ultrices leo vulputate, interdum dolor. Phasellus aliquet blandit risus non pretium. Vivamus bibendum semper sollicitudin. Suspendisse efficitur ipsum eget gravida gravida. In interdum enim at ligula rhoncus, eget faucibus dui tempus. Donec vel urna arcu. Sed vulputate neque vitae neque molestie, sed convallis justo commodo. In pellentesque diam et massa cursus, et maximus dolor pulvinar. Suspendisse consequat ultrices aliquet.
			</p>

		</main>

		<!-- Inizio footer -->

		<footer>

			<h3>Potrebbero interessarti</h3>
			<img src="./img/monitor.jpg" alt="monitor1">
			<br>
			<img src="./img/graph.jpg" alt="grafico1">

		</footer>

	</body>
</html>