Blog Picentino by @PicentinoD - Codewith.it

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

References

colspanDefinisce il numero di colonne di una cella all'interno di una tabella.
<strong>Definisce una parte del testo importante con formattazione in grassetto.
hrefDefinisce l'URL della risorsa/pagina di destinazione.
<abbr>Inserisce abbreviazioni e acronimi
formnovalidateImpedisce la convalida di un singolo elemento input
forSpecifica a quale id è associato l'elemento in cui è dichiarato.

Users

Log in to search for users

Explore

Find inspiration

Copia testo in appunti

Prima pagina web

voxel characters generator

Heads Or Tails Random Tally

formattazione_testo.html.(2)

INFORMATICA - ESERCIZIO 3

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <title>Blog Picentino Davide
    </title>
    <style>
	.Libra {
  	background-color: #d9d9d9;
      text-align: center;
      font-style: italic;
      line-height: 100%;
	}
	.ResetEarth {
  	background-color: #d9d9d9;
      }
      h2 {
        color: #E7EAEF;
        background-color: #217074;
        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="#FFFFFF">
    <div class="header">
  <a href="#default" class="logo">Blog Picentino Davide</a>
  <div class="header-right">
    <a class="active" href="#Libra">Libra</a>
    <a href="#rEarth">rEarth</a>
    <a href="#titolo-tabella">Tabella</a>
  </div>
</div>
    <div class="content">
    <div id="Libra">
      <h2> Fintech Libra, la criptovaluta di Facebook
      </h2>
      <h6>17/11/2019
      </h6>
      <h4>La criptovaluta presentata da Facebook punta a creare un nuovo sistema finanziario globale.
      </h4>
      <p class="Libra"> Libra è una criptovaluta creata da un'associazione di aziende tra cui figura anche Facebook, che è l'artefice principale del progetto: la Libra Association raccoglie 28 membri fondatori, che potranno raccogliere ulteriori adesioni nei prossimi mesi. In quanto criptovaluta funziona sulla base di una piattaforma blockchain, i cui nodi validatori delle transazioni saranno i partecipanti all'associazione. Il suo valore sarà garantito dalla codi un paniere formato da valute internazionali e titoli di debito a breve termine, la cui composizione non è stata resa nota. Ma si candida a essere una valuta digitale globale.
      </p>
      <img src="https://i2.res.24o.it/images2010/Editrice/ILSOLE24ORE/ILSOLE24ORE/2019/06/24/Politica%20e%20societa/ImmaginiWeb/Ritagli/2019-06-21T100922Z_2137099395_RC141DEAAD20_RTRMADP_3_FACEBOOK-CRYPTO-kmHG--1020x533@IlSole24Ore-Web.JPG" alt="Libra Immagine"
           height = "300" class="center"/>
    </div>
    <div id="rEarth">
      <h2>Reset Earth, il videogioco Onu per insegnare a scuola la tutela dell’ambiente
      </h2>
      <h6>18/03/2021
      </h6>
      <h4>Il segretario Onu Megumi Seki all'evento del Corriere alla Digital Week per il lancio di CampBus 2021
      </h4>
      <p class="ResetEarth"> Un Ozono. Un Pianeta. Una possibilità. Con questo slogan si apre Reset Earth, il videogioco sviluppato dalle Nazioni Unite per portare nelle scuole una modalità differente per insegnare a ragazzi e ragazze l’importanza di vivere in modo sostenibile. L’idea è di imparare giocando, il motto latino ludendo docere che è alla base della filosofia di CampBus, il progetto educativo del Corriere della Sera che da settembre viaggerà nelle scuole italiane. «Utilizzare un videogame per insegnare temi così importanti come il rispetto dell’ambiente significa cercare di avvicinarci al linguaggio di quel target fondamentale che sono i ragazzi e le ragazze. La generazione di uomini e donne di domani», ha spiegato Megumi Seki, responsabile del Segretariato Onu per l’Ozono, ospite di «Io mi gioco il Pianeta», l’evento che ha dato il via alla nuova edizione del progetto che vuole portare la didattica digitale, per quanto possibile in presenza, nelle scuole. 
      </p>
      <img src="https://i0.wp.com/venti-trenta.it/wp-content/uploads/2021/02/venti-trenta_reset_earth.jpg?resize=1140%2C641&ssl=1" alt="Libra Immagine"
           height = "300" class="center"/>
      <h3 id="titolo-tabella">
        Classifica Serie A
      </h3>
      <table class="styled-table">
        <thead>
          <tr>
            <th>Posizione
            </th>
            <th>Squadra
            </th>
            <th>Punti
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="team-vincente">
            <td>1
            </td>
            <td>Napoli
            </td>
            <td>25
            </td>
          </tr>
          <tr>
            <td>2
            </td>
            <td>Lazio
            </td>
            <td>23
            </td>
          </tr>
          <tr>
            <td>3
            </td>
            <td>Milan
            </td>
            <td>20
            </td>
          </tr>
          <tr>
            <td>3
            </td>
            <td>Juve
            </td>
            <td>18
            </td>
          </tr>
          <tr>
            <td>4
            </td>
            <td>Cremonese
            </td>
            <td>17
            </td>
          </tr>
          <tr>
            <td>5
            </td>
            <td>Udinese
            </td>
            <td>16
            </td>
          </tr>
        </tbody>
      </table>
    </div>
      
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      
    </div>
  </body>
</html>

@keyframes logo {
  from {color: rgb(255,255,255);}
  to {color: 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://images.newscientist.com/wp-content/uploads/2020/09/16181027/credit_mohamed-khaki-eyeem-getty-images_web.jpg?crop=16:9,smart&width=1200&height=675&upscale=true");
  	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(255,255,255);
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 56px;
}

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

/* cambio bg quando ci passa il mouse */
.header :hover {
  background-color: #00000050;
  color: black;
  text-shadow: 0 0 5px rgb(255,255,255);
  animation-name: logo;
  animation-duration: 0.75s;
  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: #217074;
  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;
}

.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: #217074;
      	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 #217074;
	}
	.styled-table tbody tr.team-vincente {
    font-weight: bold;
    color: #217074;
}
	.center {
  	display: block;
  	margin-left: auto;
  	margin-right: auto;
  	width: auto;
	}

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