SITO by @sara demme - Codewith.it

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

Referenze

<td>Definisce una cella di una tabella HTML.
styleDefinisce regole e stili CSS all'interno di un tag HTML (inline CSS)
maxImposta il valore numerico o temporale massimo per un elemento input
<source>Il tag HTML <source> si usa per indicare una o più risorse multimediali per elementi media
acceptDefinisce e filtra il formato dei file per il tag <input type=file>
<div>Crea contenitori generici o sezioni in una pagina

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Review of Functions I

Esercizi 05/03/2024 es7

Test navbar fix

Esercitazione n.1

Modal Animations

Il Mondo della Tecnologia

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