Layout by @carmian - Codewith.it

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

Referenze

<base>Specifica l'URL di base per tutti gli URL relativi all'interno della pagina.
valueValore alfanumerico o booleano contenuto in un elemento
postDefinisce un metodo di invio di dati al server
<hr>Inserisce una linea orizzontale
dirnameInvia informazioni sulla direzione di scrittura da un elemento input
_parentApre collegamenti ipertestuali nell'elemento genitore

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Le mie materie preferite

Snapchat URL Viewer

Articoli di Pugilato

Esercizi 05/03/2024 es9

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 lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Layout</title>
    <link
      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div id="logo">
      <img src="https://bellinarte.wordpress.com/wp-content/uploads/2021/01/img_20210127_225029_resized_20210127_113744417.jpg?w=594$0">
    </div>
    <div id="contenitore-menu">
      <div class="tasti">1</div>
      <div class="tasti">2</div>
      <div class="tasti">3</div>
      <div class="tasti">4</div>
    </div>
    <div id="contenitore-intestazione">
      <div id="autore"><span>Andrea</span><span>Carminati</span></div>
      <div id="titolo">PORTFOLIO</div>
      <div id="sottotitolo">exempla</div>
    </div>
    <div id="contenuto">
      <section id="welcome-section"><h2>Benvenuti</h2></section>
      <h3>Testo di benvenuto nel mio sito</h3>
      <section id="projects"><p>I miei progetti</p>
      <div class="project-tile">
        <div class="progetti"><a href="">ProgettoA</a></div>
        <div class="progetti"><a href="">ProgettoB</a></div>
        <div class="progetti"><a href="">ProgettoC</a></div>
        <div class="progetti"><a href="">ProgettoD</a></div>
        <div class="progetti"><a href="">ProgettoE</a></div>
        <div class="progetti"><a href="">ProgettoF</a></div>
      </div>
    </section>
    </div>
    <footer>
      <p>indirizzo</p>
      <a id="profile-link" href="" target="_blank">sito profilo</a>
    </footer>

  

  </body>
</html>

*{
  box-sizing: border-box;
  border: 0px solid black;
}

span{
  border: none;
}

#contenitore-menu{
  width: 19%;
  max-width: 190px
  ;
  height: 40%;
  text-align: center;
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: fixed;
  top: 30%;
}

#logo{
  width: 150px;
  height: 150px;
  position: fixed;
  top: 1%;
  border: 1px solid black;
  display: flex;
}

#contenitore-intestazione{
  width: 80%;
  margin-left: 20%;
  height: 20%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 640px;
  
}

#autore{
  justify-content: space-between;
  display: flex;
  letter-spacing: 100%;
  font-size: 1.3rem;
  font-style: italic;
  min-width: 640px;
}

#titolo{
  text-align: center;
  letter-spacing: 100%;
  font-size: 2rem;
}

#sottotitolo{
  
  text-align: center;
  letter-spacing: 100%;
  font-size: 1rem;
}
img{
  width: 100%;
}

#contenuto{
margin-left: 20%;
float: right;
}
footer{
  position: fixed;
  bottom: 3%;
  left: 40%;
  right: 40%;
  text-align: center;
}
#projects{
  text-align: center;
  height: 350px;
}
.project-tile{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.progetti{
  width: 200px;
  height: 150px;
  
}
html{
  max-width: 1000px;
  margin: auto;
}
h2, h3{
  text-align: center;
  letter-spacing: 50%;
}
h2{
  margin-bottom: 0;
}
a{
  text-decoration: none;
  color: black;
}