SITO by @sara demme - Codewith.it

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

References

animation-delayDetermina il tempo prima dell'avvio di una animazione in secondi (es. 1s) o millisecondi (ms)
<map>Inserisce immagini mappa cliccabili in un documento
<option>Serve ad inserire una voce in un menu di selezione.
downloadConsente di scaricare file al click di collegamento ipertestuale.
listCollega un elemento input con una lista di opzioni datalist
<textarea>Area di testo libero espandibile per form HTML

Users

Log in to search for users

Explore

Find inspiration

Coppa del mondo

Esercizio 1 Html

black - social bar

Le bambole Mattel

26/01/2024 pagina html

Turni settimanali tabella

conta vocali con array

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 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;
  
}