SITO by @sara demme - Codewith.it

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

Referenze

postDefinisce un metodo di invio di dati al server
<th>Definisce una cella di intestazione di una tabella HTML.
<hr>Inserisce una linea orizzontale
<strong>Definisce una parte del testo importante con formattazione in grassetto.
methodDetermina il metodo di invio dei dati di un form al server
<h3>Titolo di intestazione di terzo livello

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Layout Dark Elegante (sezione)

pagina America(2)

LEZIONE 1 BOLLEAN

Indovna il numero

Keter Signature

Analizzatore Exif

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 name="viewport" content="width=device-width, initial-scale=1.0">
  
    <title>SITO</title>
</head>
<BODY>
  <nav>
        <ul>
            <li><a href="#">HOME</a></li>
            <LI><A href="#">KITCHEN</A></LI>
            <li><a href="#">LIVING</a></li>
            <li><a href="#">OUTDOOR</a></li>
            <LI><A href="#">NIGHT ZONE</A></LI>
            <li><a href="#">CONTACT</a></li>
        </ul>
    </nav>
<img src="https://www.villeecasali.com/wp-content/uploads/2016/10/Cucine-moderne-960x640.jpg">
<div id="button">
 <button>SCOPRI DI PIU</button>
</div>
<div>
  
  <h1>ARREDAMENTO E MOLTO ALTRO</h1>
 <P>
    Il generatore di testo pseudo-leggibile è utile per designer e progettisti di layout durante la compilazione di layout e siti di test. Questa tecnica consente di creare facilmente l'effetto di riempire il sito con contenuto di testo. Il testo fish o Lorem Ipsum è volutamente reso privo di significato logico in modo che l'utente possa concentrarsi sulla percezione visiva del layout. Questo generatore di testo sarà utile per designer e designer di layout che necessitano di testo casuale per riempire siti e layout. La generazione del testo viene eseguita in base al numero di paragrafi. Non dovresti usare il testo generato per progetti reali.
  </p>
</div>
<DIV> <h2> OUTDOOR</h2></DIV>
<div id="IMG">
  <img src= "https://mondodesign.it/wp-content/uploads/2017/03/Idee-Arredare-Giardino.jpg" id="img2">
  <img src= "https://mondodesign.it/wp-content/uploads/2017/03/Arredamento-Giardino-Pavimentato-03.jpg"id="img3">
</div>
<div>
<DIV id="CONTENITORE">
<p id="P2" class="STESSASEZIONE">
  Ci sono molti servizi sul web che creano testo casuale, una raccolta priva di significato di parole casuali che sembrano solo testo reale. Individualmente, ogni parola significa qualcosa, ma insieme si legge come eresia. Per ottenere un testo normale, le sostituzioni casuali da sole non sono sufficienti: sono necessarie reti neurali. 
</p>


  <P id="P3" class="STESSASEZIONE">
    Ci sono molti servizi sul web che creano testo casuale, una raccolta priva di significato di parole casuali che sembrano solo testo reale. Individualmente, ogni parola significa qualcosa, ma insieme si legge come eresia. Per ottenere un testo normale, le sostituzioni casuali da sole non sono sufficienti: sono necessarie reti neurali. 
  </P>
</div>
<div id="foter">
<p id="f1" class="fot">Ci sono molti servizi sul web che creano testo casuale, una raccolta priva di significato di parole casuali che sembrano solo testo reale. .
</p>
<p id="f2" class="fot">Ci sono molti servizi sul web che creano testo casuale, una raccolta priva di significato di parole casuali che sembrano solo testo reale.</p>
<p id="f3" class="fot">Ci sono molti servizi sul web che creano testo casuale, una raccolta priva di significato di parole casuali che sembrano solo testo reale. </p>






</div>













</BODY>




























</html>

*{
  margin: 0px;
  padding: 0px;
}

nav {
    background-color: #060606;
    opacity: 0.5;
    color: #fff;
    position: fixed;
    width: 100%;
    min-width: 200px;
    height: 80PX;
}

nav ul {
    list-style: none;
    padding: 20PX;
    margin: 0;
    display: flex;
    
}

nav li {
    margin-right: 40px;
    
}


nav a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}
NAV A:hover{
  color:orangered;
  opacity: 1;
  transition:  3s 0.1s  ;
  cursor: pointer;

    
  }

IMG{ 
  width: 100% ;

}
BUTTON{
  text-align: center;
  width: 200PX;
  height: 50px;
  background-color: #060606;
  color: white;
  margin-top: 60px;
  }
BUTTON:HOVER{
  background-color: black;
  opacity: 0.7;
  color: white;
}
#button{
text-align: center;
}


H1{
  margin-top: 90PX;
  text-align: center;
  color: orangered;
  background-color: #060606;
  opacity: 0.7
   ;
}
P{
  padding: 50PX 150;
  line-height: 150%;
  margin-top: 0PX;
  
  background-color: #060606;
opacity: 0.7;
color: white;

}
h2{
  color: black;
  text-align: center;
  margin-top: 0px;
  font-size: 40PX;
  font-weight: bold;
  font-style: oblique;
 text-decoration: underline;
 float: none;
}

 
 #IMG{
  display: flex;
  justify-content: center;
  justify-content: space-around;
 }

#img2,#img3 {
 box-shadow: 1px 1px 50px black;
 width: 400px;
 margin-top: 40px;}
 #IMG2{margin-left: 50PX;

 }
 #IMG3{
  margin-right: 50px;
 }

P.STESSASEZIONE{
  background-color: orangered;
  opacity: 0.8;
   margin:50px 80px;
 padding: 40 60px;
 box-shadow:10PX 10PX 50PX #060606;
  
}
#P2{
  border:2PX solid #060606;
  
  
}
#P3{
border: 2px solid black;
}

#CONTENITORE{
  display: flex;
 
}
#foter {
  display: flex;
  height: 400PX;
}
#f1,#f2,#f3{
  padding: 140PX 80PX;

}
P.FOT:hover{
  color: orangered;
  
}