Benvenuti nella seconda e ultima parte sul tutorial per creare un portfolio in HTML e CSS.
In questa ultima parte andremo a stilizzare il layout e gli elementi del nostro sito web. Iniziamo!
Nota: se ti sei perso l’articolo sul CSS, clicca qua, se ti sei perso l’articolo sul Box-Model, clicca qua.
Reset del Box-Model
Come già spiegato, ogni elemento in HTML di default ha uno stile definito dal box-model.
Facendo così, stiamo dicendo al browser che stiamo resettando tutti gli elementi e che tutti gli elementi devono avere lo stesso font.
Inoltre, non voglio che gli elementi siano orizzontalmente visibili fuori dallo schermo
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Nerko One", sans-serif;
font-style: normal;
}
body {
overflow-x: hidden;
}Menu | Nav
Il menu è progettato per occupare l’intera larghezza dello schermo e il 10% dell’altezza totale della finestra. Per ottenere questo layout, abbiamo utilizzato le seguenti proprietà CSS:
nav {
width: 100vw; height: 10vh;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #003459;
}
Logo
Il logo occupa il 20% della larghezza del menu e l’intera altezza. Viene centrato sia verticalmente che orizzontalmente:
nav .logo {
width: 20%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
I link all’interno del logo sono stilizzati per essere bianchi e in grassetto:
nav .logo a {
color: #fff;
text-decoration: none;
font-weight: bold;
}
Menu
Il menu occupa il 50% della larghezza del menu e l’intera altezza. Gli elementi della lista sono distribuiti uniformemente:
nav .menu {
width: 50%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
nav .menu ul {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-around;
padding: 0;
margin: 0;
list-style-type: none;
}
Gli elementi della lista sono privi di stili predefiniti e i link sono bianchi:
nav .menu ul li {
list-style-type: none;
}
nav .menu ul li a {
text-decoration: none;
color: #fff;
}
Social
La sezione social occupa il restante 20% della larghezza del menu e utilizza uno spazio uniforme tra le icone sociali:
nav .social {
width: 20%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 10%;
}
nav .social i {
color: #fff;
}
Introduzione | Header
La sezione di introduzione occupa il 90% dell’altezza della finestra e l’intera larghezza dello schermo. Gli elementi all’interno sono organizzati verticalmente:
header {
width: 100vw; /* Larghezza completa dello schermo */
height: 90vh; /* Altezza del 90% della finestra del browser */
display: flex;
align-items: center; /* Centratura verticale */
justify-content: center; /* Centratura orizzontale */
}
Header Left
La parte sinistra dell’introduzione occupa il 40% della larghezza e il 50% dell’altezza del contenitore:
header .header-left {
width: 40%;
height: 50%;
display: flex;
align-items: flex-start; /* Allineamento in alto */
justify-content: center; /* Centratura orizzontale */
flex-direction: column; /* Disposizione verticale */
}
Header Right
La parte destra occupa il 50% della larghezza e l’80% dell’altezza del contenitore. Il contenuto è centrato:
header .header-right {
width: 50%;
height: 80%;
display: flex;
align-items: center; /* Centratura verticale */
justify-content: center; /* Centratura orizzontale */
flex-direction: column; /* Disposizione verticale */
}
Il testo nella parte sinistra è stilizzato per avere colori e dimensioni specifiche, e i link sono stilizzati con uno sfondo blu e testo bianco:
header .header-left p {
color: #003459;
font-size: 30px;
font-weight: bold;
}
header .header-left h1 {
color: #003459;
font-size: 100px;
font-weight: bold;
}
header .header-left a {
color: #fff;
background-color: #003459;
padding: 15px 10px;
border-radius: 5px;
text-decoration: none;
}
Nella parte destra, l’immagine è ritagliata in una forma circolare e occupa l’80% dell’altezza disponibile:
header .header-right img {
height: 80%;
clip-path: circle(); /* Ritaglio circolare */
}
Chi Sono
La sezione “Chi Sono” occupa il 100% della larghezza e l’altezza è automatica per adattarsi al contenuto. Gli elementi figli sono larghezza 40% e altezza 30%:
#chi-sono {
height: auto;
width: 100vw;
display: block;
padding-bottom: 10%; /* Spazio sotto la sezione */
}
Il titolo e il testo hanno margini e dimensioni del font specificati, mentre gli elementi .year sono stilizzati con un bordo e una dimensione di padding:
#chi-sono h1 {
margin-left: 10%;
color: #003459;
font-size: 50px;
}
#chi-sono p {
margin-left: 10%;
color: #003459;
width: 60%;
font-size: 20px;
}
#chi-sono .year {
width: 40%;
height: 30%;
margin-left: 10%;
margin-top: 5%;
border: 5px solid #003459;
border-radius: 10px;
padding: 10px 0;
}
#chi-sono .year ul {
width: 100%;
height: 100%;
}
#chi-sono .year ul li {
margin-left: 10%;
}
#chi-sono .year ul li p {
margin: 0;
font-size: 30px;
}
Progetti
La sezione “Progetti” segue un approccio simile a “Chi Sono”, ma include una disposizione flex per contenere più progetti. I progetti sono visualizzati in una griglia con un gap uniforme tra di loro:
#progetti {
height: auto;
width: 100vw;
display: block;
padding-bottom: 10%;
}
#progetti h1 {
margin-left: 10%;
color: #003459;
font-size: 50px;
}
#progetti p {
margin-left: 10%;
color: #003459;
width: 60%;
font-size: 20px;
}
#progetti .progetti-container {
margin-top: 50px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
gap: 50px;
}
#progetti .progetti-container .progetto {
width: 30%;
height: 50vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 10px; /* Corretto "10x" in "10px" */
}
Le anteprime dei progetti sono impostate per coprire l’80% della larghezza e il 50% dell’altezza, con immagini di sfondo specifiche:
#progetti .progetti-container #progetto1 .preview,
#progetti .progetti-container #progetto2 .preview,
#progetti .progetti-container #progetto3 .preview {
width: 80%;
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#progetti .progetti-container #progetto1 .preview {
background-image: url('./../img/progetto1.jpg');
}
#progetti .progetti-container #progetto2 .preview {
background-image: url('./../img/progetto2.jpg');
}
#progetti .progetti-container #progetto3 .preview {
background-image: url('./../img/progetto3.jpg');
}
Il titolo e il testo dei progetti sono stilizzati per essere chiari e leggibili:
#progetti .progetti-container .progetto h1 {
font-size: 35px;
}
#progetti .progetti-container .progetto p {
font-size: 20px;
width: 100%;
}
Contattami
La sezione “Contattami” e il modulo sono progettati per avere una disposizione verticale, con ogni input e label uno sotto l’altro:
.contattami {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#contattami h1 {
color: #003459;
font-size: 50px;
margin-top: 10px;
margin-bottom: 10px;
}
#contattami p {
margin-left: 10%;
color: #003459;
width: 60%;
font-size: 20px;
margin-top: 10px;
margin-bottom: 10px;
}
Il modulo è centrato e dispone di un gap tra gli elementi. Gli input e le aree di testo hanno bordi e padding specifici, e il pulsante di invio è stilizzato per avere uno sfondo blu e testo bianco:
.contattami form {
width: 30%;
height: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 10px;
border: 1px solid #003459;
}
.contattami form label {
font-size: 25px;
color: #003459;
}
.contattami form input,
.contattami form textarea {
outline: none;
border: 1px solid #003459;
border-radius: 5px;
padding: 5px;
}
.contattami form input[type='submit'] {
background-color: #003459;
color: white;
padding: 10px 15px;
}
.contattami form textarea {
resize: vertical;
}Conclusione
Il codice CSS che abbiamo esplorato fornisce un design coeso e funzionale per un sito web, strutturato in sezioni ben definite. Ogni parte del sito è progettata con attenzione ai dettagli per garantire un’esperienza utente ottimale e un’estetica accattivante.
In sintesi, questo design CSS non solo migliora l’aspetto visivo del sito, ma ottimizza anche la sua usabilità. Ogni sezione è progettata per garantire una navigazione intuitiva e una presentazione chiara delle informazioni, contribuendo a un’esperienza utente complessivamente soddisfacente. Con una gestione attenta dei layout e degli stili, il sito web è pronto a fornire un’esperienza coerente e professionale per tutti gli utenti.
