Layout by @carmian - Codewith.it

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

Referenze

<caption>Definisce didascalie all'interno di una tabella
_blankApre i collegamenti ipertestuali in una nuova scheda del browser
<table>Tag primario per la creazione di tabelle
animation-directionProprietà CSS per definire la direzione di esecuzione di un'animazione
disabledImpedisce la modifica di un input
<div>Crea contenitori generici o sezioni in una pagina

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

esercitazione 7

Our first web page!

pagina prova sara

riepilogativo 2

esercitazione5.html

Design & Comunicazione Digitale ??

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