You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
128 lines
3.4 KiB
128 lines
3.4 KiB
/* Style global */
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow-x: hidden;
|
|
border: dashed purple;
|
|
}
|
|
|
|
/* Style pour chaque section avec image de fond */
|
|
.background {
|
|
width: 100%; /* Chaque div prend tt la largeur de l'écra */
|
|
height: 100vh; /* Chaque div prend tt la hauteur de l'écran */
|
|
background-attachment: scroll; /* Permet de "rattacher" les images au site ce qui crée un défilement d'image un peu comme apple */
|
|
background-size: cover; /* L'image de fond couvre toute et se redimensionne auto pour garder ses proportions la div */
|
|
background-position: center; /* Centre background dans la div */
|
|
display: flex; /* Aide à la mise en colonne des background mais j'en sais pas plus */
|
|
justify-content: center; /* Centrer horizontalement le txt dans une div*/
|
|
align-items: center; /* Centrer verticalement le txt dans une div*/
|
|
text-align: center; /* Grace a flexbox inutile*/
|
|
color: white; /* Couleur de la div */
|
|
font-size: 2rem; /* Après recherche, dépend des browsers mais 1 rem représente 1 * font-size de la racine qui est 16px en général */
|
|
overflow: hidden; /* Empèche de défiler horizontalement si les images dépassent sur les côtés de la fenêtre */
|
|
z-index:2;
|
|
}
|
|
|
|
#photo {
|
|
position: absolute; /* L'image reste à la même position même lors du défilement */
|
|
display:block;
|
|
right: 22vw;
|
|
bottom:0vh;
|
|
height: 85vh; /* L'image prend toute la hauteur de la fenêtre */
|
|
width: auto; /* Laisse la largeur s'adapter automatiquement à la hauteur */
|
|
rotate: 320deg;
|
|
transform: scaleX(-1);
|
|
z-index:0;
|
|
|
|
}
|
|
|
|
#a{
|
|
margin-left:95%;
|
|
z-index:2;
|
|
}
|
|
|
|
header {
|
|
height: 100vh; /* Header prend aussi tout l'écran */
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: rgb(51, 45, 45);
|
|
border: dashed green;
|
|
}
|
|
|
|
#header_background {
|
|
position: absolute;
|
|
height: 100vh;
|
|
width: 30vw;
|
|
display: flex;
|
|
right: 0vw;
|
|
background-color:rgb(73, 73, 73);
|
|
box-shadow: -30px 0 15px rgba(0, 0, 0, 0.5); /* Ombre de 25px à droite */
|
|
z-index: 1;
|
|
border: dashed red;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.pages{
|
|
z-index: 1;
|
|
}
|
|
|
|
#automobile {
|
|
background-image: url("RS4.jpg");
|
|
}
|
|
|
|
#ski {
|
|
background-image: url("ski.jpg");
|
|
}
|
|
|
|
#avion {
|
|
background-image: url("avion.jpg");
|
|
}
|
|
|
|
#informatique{
|
|
background-image: url("matrix.jpg");
|
|
display:flex;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
}
|
|
|
|
#gradient{
|
|
width: 100vw;
|
|
height: 100px;
|
|
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 1));
|
|
}
|
|
|
|
.titleBackground{
|
|
color: rgba(255, 255, 255, 0.596);
|
|
background-color: rgba(0, 0, 0, 0.5); /* Ajoute un fond semi-transparent derrière le texte */
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.titleBackground:hover{
|
|
color: white;
|
|
background-color: rgba(0, 0, 0); /* Ajoute un fond semi-transparent derrière le texte */
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
#reseaux{
|
|
text-align: center;
|
|
}
|
|
|
|
#liens{
|
|
border: dashed blue;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.logo{
|
|
height: 50px;
|
|
width: auto;
|
|
}
|
|
|
|
#piedPage{
|
|
background: linear-gradient(black, green);
|
|
} |