Tu veux découvrir les ateliers et cours proposés par les Makers près de chez toi ? Rejoins-nous >> par ici <<
Dans ce tuto vous verrez comment faire la mise en page de votre porte folio en CSS.
Il y a 4 fichiers qui vous sont donnés contenant le code des différentes pages. Ce tuto vous explique quelles lignes vous pouvez modifier pour personnaliser votre portfolio.
Budget : 0€
Pour commencer vous allez créer un nouveau fichier et l’enregistrer en .CSS comme sur l'image maintenant que vous savez enregistrer un fichier en CSS passons au codage.
Vous pouvez voir différents rassemblements de ligne de code qui correspondent à différentes parties de votre page web. Chaque partie est composée d’une balise (par exemple body) et de ligne de code entre des accolades.
margin: 0 ; permet de coller votre body (le contenue du site) au bord de la page.
color: black; change la couleur du texte en noir (si vous souhaiter l’afficher dans une autre couleur il vous suffit de la marquer en anglais à la place de black).
font-size: 25px; change la taille du texte en pixel (en changeant la valeur vous pouvez l’augmenter ou la réduire).
background-color:black; change la couleur de fond de la menu barre en noir
display: flex;
justify-content: space-around; ces deux lignes permettent de mettre un espace entre les options du menu mais également avec les bords.
padding-top:50px;
padding-bottom:50px; ces deux lignes permettent de mettre une marge égale en haut et en bas (pour changer la marge il suffit de changer la valeur).
text-decoration:none; permet de ne pas avoir nos options du menu soulignées (sans cette ligne elles le sont).
font-family: arial; met la police en arial (attention certain moteur de recherche ne prennent pas en compte certaine police).
a:hover permet d’agir sur l’élément lorsque l’on passe notre souris dessus
opacity: 0.5; règle l’opacité du menu (changer la valeur change la transparence).
text-align: justify; permet de régler automatiquement les espaces entre les mots pour que le texte prenne toute la ligne.
float: left; permet au texte de se mettre à coter de l’image.
On va maintenant voir le fonctionnement des slides glissantes de la page d’accueil
Pour animer ces slides on utilise des fonctions keyframes. Recopiez la première accolade on pourra ensuite modifier le reste.
Le .slider définit l’espace où les images se déplacent, il se doit donc d’être de mêmes dimensions que les images pour qu’elles puissent s’afficher entièrement.
Le overflow :hidden ; permet de ne pas afficher les parties de l’image qui dépassent du slider.
On attribue à notre slider un margin auto pour le centre.
Dans le .slides
width : calc(500px*3) ; permet de dire aux images de s’aligner (500px correspond à la largeur des images).
animation: glisse 20s infinite; permet d’effectuer l’action du dessus en 20 secondes. On peut modifier sa valeur pour changer le temps de glissement.
Dans le .slide
float: left; Les images s’alignent de gauche à droite
@keyframes glisse permet de choisir à quel moment on veut que la slide change.
@keyframes glisse {
0%{
transform: translateX(0); à 0% du temps on reste sur la position initiale
}
25%{
transform: translateX(-500px); à 25% du temps on déplace la slide de 500 pixels vers la droite
}
50%{
transform: translateX(-1000px); à 50% du temps on déplace la slide de 500 pixels vers la droite
}
75%{
transform: translateX(-500px); à 75% du temps on déplace la slide de 500 pixels vers la gauche
}
100%{
transform: translateX(0px); à 1005% du temps on déplace la slide de 500 pixels vers la gauche
}
}
Ces lignes permettent de déplacer le slide d’image en image puisqu’elles font 500 pixels de largeur d’abord vers la gauche puis vers la droite. Cette action se répète à l’infini.
Comme pour la barre de menu ici on décide de changer l’opacité des images pour les rendre semi-transparentes lorsque l’on passe notre souris dessus grâce à opacity : 0,5 ;.
Ces dernières lignes du css permettent de définir la police du lien vers notre CV avec
font-familly : arial ; et de le centrer grâce à la fonction text-align :center ;.
background-image:url("https://repare-pc.com/wp-content/uploads/2016/12/logiciels-gratuits.png");
background-size:500px;
background-attachment: unfixed;
background-repeat: no-repeat;
background-position: 50% 70%;
Ici notre fond d’écran est une image (pour changer l’image il suffit de prendre l’url internet de l’image que vous voulez) qui fait 500 pixels qui reste au centre de votre écran quand vous descendez dans la page. Le 50% correspond au milieu de la ligne et le 70% à sa hauteur dans la page.
text-decoration: underline; souligne le texte.
left: 70%; met votre paragraphe à gauche
max-width: 40%; donne une taille maximale en largeur à votre paragraphe
border: 1px solid; met une bordure de 1pixel continue.
flex-direction: column; met le l’email et le LinkedIn en colonne
border-radius: 30px; arrondie les bords de l’encadrement de votre mail.
Align-items: center;
felx-direction: column; permet d’aligner vos projets les uns en dessous des autres
Pour mettre votre site web en ligne rien de plus simple, il vous suffit de trouver un hébergeur gratuit ou payant sur internet vous inscrire et de d’uploader vos fichier html, css et autre documents permettant au site de fonctionner pour que la page web soit créée. Nous avons par exemple utilisés un hébergeur gratuit de 000webhost.com avec une petite contrepartie, le nom de leur site est présent dans l’adresse du notre et leur logo s’affiche sur notre page.
Le site que nous avons créé est disponible à cette adresse :
