Sito Progetto Italiano by @PicentinoD - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

<object>Incorpora risorse varie nella pagina web.
<audio>Il tag <audio> HTML permette di inserire contenuti musicali e suoni nel documento
crossoriginGestisce richieste tra documenti provenienti da origini differenti.
<h6>Titolo di intestazione di sesto livello
<tfoot>Definisce il footer o sezione inferiore di una tabella.
<nav>Definisce un menu di navigazione

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Progetti scolastici.html

JS Strutture dati e funzioni es3

UX / Web Design, Freelance – Pro

esercizio 03 pagina form

Autoscuola Eur Torrino Fabrizio e

spotify dashboard

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <title>L'illuminismo
    </title>
    <style>
	p {
  	background-color: #DBC9AC;
      text-align: left;
      font-family: "Arial";
      font-style: italic;
      line-height: 100%;
	}
      h2 {
        color: #E7EAEF;
        background-color: #9C4A1A;
        text-align: center;
      }
      h3 {
        text-shadow: 0 0 5px rgba(13,13,13,1);
      }
      h4 {
        color: #FF0000;
      }
      #titolo-tabella {
        text-align: center;
        color: #217074;
      }
    </style>
  </head>
  <body bgcolor="#E6D6BB">
    <div class="header">
  <a href="#default" class="logo">L'illuminismo</a>
  <div class="header-right">
    <a class="active" href="#Giovanni">Giovanni</a>
    <a href="#Illuminismo">Illuminismo</a>
    <a href="#Esponenti">Esponenti</a>
    <a href="#Beccaria">Beccaria</a>
  </div>
</div>
    <div class="content">
    <div id="Giovanni">
      <h2 class="Giovanni"> Giovanni Senzaterra </h2>
      <h4>Giovanni Senzaterra e la Magna Charta libertatum</h4>
      <p > Dopo lo scioglimento del patto di obbedienza e della marcia verso Londra (dovuto al non aver rispettato i diritti e privilegi) dei borghesi nei confronti di Giovanni senza terra che fu costretto a concedere la Magna carta libertatum. <br>
      La Magna Charta riconosce per iscritto i diritti dei feudatari, della Chiesa, delle città inglesi e degli «uomini liberi» (escludendo dunque i servi della gleba) nei confronti del sovrano d'Inghilterra, limitandone i poteri.
      </p>
      <img src="https://i0.wp.com/www.frammentirivista.it/wp-content/uploads/2021/01/5cc100162400003300221a91.jpeg?ssl=1" alt="Giovanni Senzaterra"
           height = "300" class="center"/>
    </div>
    <div id="Illuminismo">
      <h2 class="Illuminismo">L'illuminismo</h2>
      <h4>L'età dei lumi: Il ragionamento è libertà.
      </h4>
      <p >Nel XVIII secolo è iniziato l’illuminismo, un movimento culturale laico sviluppato in tutta Europa, ma trova la sua massima influenza in Francia. I principi dell’illuminismo sono cosmopolita, fratellanza, uguaglianza e libertà. <br>
•	Cosmopolita: ovvero “uomo di mondo”, per gli illuministi, l’uomo che ragionava era considerato cosmopolita; <br>
•	Uguaglianza: uno dei principi più importanti dell’illuminismo, dice che siamo tutti uguali per natura perché siamo accomunati dalla ragione; <br>
•	Libertà: per gli illuministi è un diritto assoluto, che però non significa che siamo liberi di fare quello che vogliamo, perché come disse Voltaire, la mia libertà finisce quando limito la tua.

      </p>
      <img src="https://miro.medium.com/max/1000/1*y7457FGb_MTmrPP3GFYZDg.png" alt="Illuminismo"
           height = "300" class="center"/>
      <div id="Esponenti">
      <h2>Voltaire e Montesquieu
      </h2>
      <h4>L'età dei lumi: Il ragionamento è libertà.
      </h4>
      <p class="Esponenti">I massimi esperti dell’illuminismo sono: <br><br>
VOLTAIRE
Pensiero: Credeva che si dovesse rinunciare ad una parte della propria liberta per il bene collettivo. <br><br>
MONTESQUIEU
Montesquieu prende in considerazione tre diversi modelli di governo, per discuterne le differenze e descrivere in che modo si rapportino alle leggi. Perché sia garantita la libertà dei cittadini i tre poteri devono essere separati, detenuti da soggetti diversi e devono limitarsi a vicenda. La libertà politica, secondo Montesquieu, «non consiste affatto nel fare ciò che si vuole», bensì «è il diritto di fare tutto quello che le leggi permettono»

      </p>
      <img src="https://www.blogdibruco.it/wp-content/uploads/2020/12/69cdef43d32009bebffb9441c2329c.jpg" alt=p
           height = "300" class="center"/>
    </div>
      <div id="Beccaria">
      <p>
      <h2>Cesare Beccaria
      </h2>
      <h4>Sottotilo da decidere
      </h4>
      <p>Nasce a Milano nel 1738, dove l’illuminismo inizia a fiorire. Beccaria decide di fare giurisprudenza e va a Pavia. A 22 anni legge le lettere persiane di Montesquieu e si appassiona. Beccaria fonderà insieme ai fratelli Verri il Caffè, il quale scrisse il primo articolo, che farà da portavoce del movimento illuminista lombardo. Il posto è visitato in maggioranza dagli illuministi, che con linguaggio chiaro e brillante, affrontano questioni legate al benessere della società.
Beccaria tra il 1763-1764 scrive la sua opera più importante “Dei delitti e delle pene”. Nell’opera Beccaria affronta il problema della legittimità dei governi di punire coloro che in qualsiasi modo contravvengono a quanto stabilito dalle leggi, in quanto,  come affermavano gli illuministi, tra il cittadino e lo Stato si stabiliva un “patto sociale” in base al quale ogni cittadini rinunciava a una piccola parte della propria libertà per il raggiungimento della maggior felicità possibile, garantita a ciascuno dall’azione dello Stato.

      </p>
      <img src="https://upload.wikimedia.org/wikipedia/commons/8/83/Cesare_Beccaria.jpg" alt=p
           height = "300" class="center"/>
      
    </div>
      
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </body>
</html>

*{ }
  @keyframes logo {
  from {color: rgb(0,0,0);
    text-shadow: 0px 0px 10px rgb(255,255,255);}
  to {color: rgb(255,255,255);
    text-shadow: 0px 0px 10px rgb(0,0,0);}
}

.content {
  margin-top:80px;
  margin-left: -8px;
  margin-right: -8px;
}
/* Stile dell'header*/
.header {
  	height: 80px;
  	margin-left: -8px;
  	margin-right: -8px;
  	margin-top: -80px;
  	position: fixed;
  	overflow: hidden;
  	background-image: url("https://upload.wikimedia.org/wikipedia/commons/c/cb/Salon_de_Madame_Geoffrin.jpg");
  	background-size: cover;
  	background-position: 25% 60%;
	background-repeat: no-repeat;
	box-shadow: 0px 5px 8px 4px rgba(0,0,0,0.4);
	width:100%;
}
/* Stile dei link dell'header */
.header a {
  float: left;
  color: rgb(0,0,0);
  text-shadow: 0px 0px 5px rgb(255,255,255);
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-weight: light;
  font-family: "Lucida Handwriting";
  font-size: 12px;
  line-height: 56px;
  width: 75px
}

/* Stile del "logo" */
.header a.logo {
  color: #000000;
  font-size: 25px;
  font-weight: bold;
  font-family: "Lucida Handwriting";
  text-shadow: 0 0 5px rgb(255,255,255);
  text-align:
}

/* cambio bg quando ci passa il mouse */
.header :hover {
  background-color: #00000050;
  text-shadow: 0 0 5px rgb(0,0,0);
  animation-name: logo;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-direction: normal;
}

/* stile del link attivo che pero' non funziona*/
.header a.active {
  background-color: rgba(0,0,0,0.75);
  color: #A78B71;
  font-family: "Lucida Handwriting";
  text-shadow: 0 0 5px rgba(13,13,13,1);
}

/* sposta la sezione dei link sulla destra */
.header-right {
  float: right;
}

/* stile tabella */
.styled-table {
      	
    	border-collapse: collapse;
    	margin-left: auto;  
		margin-right: auto; 
    	font-size: 0.9em;
    	font-family: sans-serif;
    	min-width: 400px;
    	box-shadow: 0 0 20px rgba(13,13,13,0.5);
	}
	.styled-table thead tr {
    	background-color: #752E0F;
      	color: #ffffff;
   	 	text-align: left;
	}
	.styled-table th,
	.styled-table td {
    	padding: 12px 15px;
	}
	.styled-table tbody tr {
    	border-bottom: thin solid #000000;
	}

	.styled-table tbody tr:nth-of-type(even) {
    	background-color: #f3f3f3;
	}

	.styled-table tbody tr:first-of-type {
    	border-bottom: 3px solid #9C4A1A;
	}
	.styled-table tbody tr.team-vincente {
    font-weight: bold;
    color: #9C4A1A;
}
	.center {
  	display: block;
  	margin-left: auto;
  	margin-right: auto;
  	width: auto;
	}

$(".header").click(function() {
    if ($(".active").removeClass("active")) {
        $(this).removeClass("active");
    }
    $(this).addClass("active");
});