ciao io sono sara by @sara demme - Codewith.it

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

References

<h1>Titolo di intestazione di primo livello
nameDetermina il nome degli elementi HTML o fornisce dati su un attributo associato.
_parentApre collegamenti ipertestuali nell'elemento genitore
<thead>Definisce un gruppo di intestazione all'interno di una tabella.
valueValore alfanumerico o booleano contenuto in un elemento
rowspanDefinisce il numero di righe su cui una cella di una tabella deve estendersi.

Users

Log in to search for users

Explore

Find inspiration

esercitazione 3

Roba info triangoli

La Storia di Cappuccetto Rosso

Esempio Gestione del testo

locandiera murgia

informatica|inglese

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>
  <title>ciao io sono sara</title>
  
  </STYLE>
</head>

<body >

<div id="menu">menu

</div>
  <style="BACKGROUND-COLOR:PINK">
 <DIV id="header">
   <h1
   style="COLOR:WHITE;FONT-SIZE:30PX">INTERIOR DESIGN

  </h1>
 


    <p id="primop">
    Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione. È sopravvissuto non solo a più di cinque secoli, ma anche al passaggio alla videoimpaginazione, pervenendoci sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la diffusione dei fogli di caratteri trasferibili “Letraset”, che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includeva versioni del Lorem Ipsum.

  </p>
 
  </div>
<UL ID="ELENCO">

<LI>CASA</LI>
<LI>APPARTAMENTO</LI>
<LI>ATTICO</LI>
<LI>TERRATTETTO</LI>
<LI>VILLA</LI>
</UL>
  <img src="http://www.pixolo.it/wp-content/uploads/2012/08/02117_heavensgate_2560x1600-627x391.jpg"></img>

  <H2 id="TIT-1">
    GIARDINI
  </H2>

  <P id="secondop">
    È universalmente riconosciuto che un lettore che osserva il layout di una pagina viene distratto dal contenuto testuale se questo è leggibile. Lo scopo dell’utilizzo del Lorem Ipsum è che offre una normale distribuzione delle lettere (al contrario di quanto avviene se si utilizzano brevi ).
     </P>
<DIV>
  <h2 id="TIT-2">
    TERRAZZE
  </h2>

  <P id="terzop">
    Al contrario di quanto si pensi, Lorem Ipsum non è semplicemente una sequenza casuale di caratteri. Risale ad un classico della letteratura latina del 45 AC, cosa che lo rende vecchio di 2000 anni. Richard McClintock, professore di latino al Hampden-Sydney College in Virginia, ha ricercato una delle più oscure parole latine, consectetur, da un passaggio del Lorem Ipsum e ha scoperto tra i vari testi in cui è citata, la fonte da cui è tratto il testo, le sezioni 1.10.32 and 1.10.33 del "de Finibus Bonorum et Malorum" di Cicerone. Questo testo è un trattato su teorie di etica, molto popolare nel Rinascimento. La prima riga del Lorem Ipsum, "Lorem ipsum dolor sit amet..", è tratta da un passaggio della sezione 1.10.32.

Il brano standard del Lorem Ipsum usato sin dal sedicesimo secolo è riprodotto qui di seguito per coloro che fossero interessati. Anche le sezioni 1.10.32 e 1.10.33 del "de Finibus Bonorum et Malorum" di Cicerone sono riprodotte nella loro forma originale, accompagnate dalla traduzione inglese del 1914 di H. Rackham.
</P>
  </div>
<DIV class="YELLOW">
<h2 id="TIT-3">
   VERANDE
</h2>

<p id="quartop">
  Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione. È sopravvissuto non solo a più di cinque secoli, ma anche al passaggio alla videoimpaginazione, pervenendoci sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la diffusione dei fogli di caratteri trasferibili “Letraset”, che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includeva versioni del Lorem Ipsum.
</p>
</DIV>
<DIV>
<P id="quintop">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
  </P>
</DIV>
<DIV id="foter">
<P >
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</P></DIV>
</body>

  @import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');

body
{color: aquamarine;
font-size:30px;
font-family:'Satisfy';
margin: auto;
}
h1{
  font-size:50px !important;
  font-family: 'Courier New', Courier, monospace;
  
  

}
h2{
  font-size: 40px;
  color: blueviolet;
font-family: 'Courier New' ;
}
h1,h2 {
  text-align: center;
  padding-top: 40;
  text-shadow:10px 10px 20px black
  
}
img{
  width:500px;
 margin: auto;
 border-radius: 10px;
 margin-top: 150px;
 margin-right: 40px;
 margin-left: 40px;
 float:right;
 
}
div#header,div#foter{
  background-color: black;
  background-image: linear-gradient( to top, black,pink);
  background-image: conic-gradient(pink,black,pink);
  background-image: url(https://media.istockphoto.com/id/1415846196/it/foto/costruttore-che-lavora-sodo-sulla-scala-costruendo-una-capanna-di-tronchi.jpg?s=1024x1024&w=is&k=20&c=X-JMACrQW1fk3XWAJK8c04YvL-3_703qae-3Xs3n0CE=);
  background-size: cover;
  opacity: 0.5; 
  
  padding: 50 0;
  border-bottom: 20px solid orangered;
}
  P{
    margin: 20 80;
    text-align: left;
   

  }
  p#secondop,p#terzop,p#quartop,p#quintop{

  
    background-color: blueviolet;
    border: 3px solid orangered;
    padding: 40;
    border-top-left-radius: 100px;
    border-bottom-right-radius: 100px;
    box-shadow: 20px 20px 40px 20px blanchedalmond;
    
   
  }
  p#secondop{
    width: 40%;
  }
 P#SECONDOP:hover{
  background-color: blue;
  color: blueviolet;
 }
 H2:hover{
  color: orangered;
 }

div#menu{
  background-color: black;
  position: fixed;
  padding: 20px;
  width: 100%;
  opacity: 0.5;
}
UL#ELENCO LI:first-child
{color: black;

}
UL#ELENCO LI:last-child
{color: blueviolet;

}
UL#ELENCO LI:nth-child(ODD){
color: orangered;
}
*{transition: all  1s ease-in;}
h2{transition: 10S ease;}
  

@media SCREEN AND ( MAX-WIDTH:500px){
div#menu

  display: none;
}
}