Layout by @carmian - Codewith.it

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

Referenze

<body>Tag primario di un documento HTML
dirnameInvia informazioni sulla direzione di scrittura da un elemento input
<h4>Titolo di intestazione di quarto livello
heightDetermina l'altezza di un elemento HTML in pixel
postDefinisce un metodo di invio di dati al server
listCollega un elemento input con una lista di opzioni datalist

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

SUAMI NOVILLO 3BSC

HTML OR. LISTA TAGS TEST

La ricetta della torta della nonn

hate this project

Design & Comunicazione Digitale ??

cpa continuing professional educat

Riconoscitore tasti

La Magica Storia del Basket Moderno

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