Css de home (1/2)


Nous allons passer au css de la page home.js, celle-ci aura une image de fond.

Pour commencer, nous allons écrire la classe home, puis on ouvre les accolades, background-image : url() puis l'url de votre image de votre choix. Vous pouvez prendre n'importe quelle image qui vous appartient ou libre de droit. Entre apostrophe, je vais mettre l'url de l'image que j'ai pris sur Unsplash.

L'image sera positionnée au centre, il n'y aura aucune répétition et celle-ci recouvrira tout l'écran. La hauteur sera de 100vh.

En ce qui concerne le reste, tout ce qui dépassera sera invisible et pour la position de titre, celui-ci sera en display flex, aligné horizontalement et verticalement au centre.

Pour le h1 de home, il y aura une marge de 0, un padding de 0, une couleur un peu plus claire que le noir, un fond transparent : rgba(255,255,255,0.8), border-radius de 20px puis un box-shadow de 0 2px 4px black.

.home {
background-image: url('https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1950&q=80');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.home h1 {
margin: 0;
padding: 0;
color: #222;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 20px;
box-shadow: 0 2px 4px black;
}