mirror of
https://github.com/LucasVbr/game-lib.git
synced 2026-05-13 17:21:51 +00:00
Lucàs
100 lines
3.6 KiB
CSS
100 lines
3.6 KiB
CSS
/*
|
|
* jeu.css
|
|
*
|
|
* Feuille de style utilisé dans la page
|
|
* jeu.html.
|
|
*
|
|
* @author Vabre Lucas
|
|
*/
|
|
|
|
/* ### Zone de Navigation ### */
|
|
.jeu-nav {
|
|
background-color: var(--overlay-color); /* Met en couleur de fond la deuxieme couleur principale */
|
|
border-radius: var(--border-radius-5); /* Met une bordure de 5px */
|
|
}
|
|
|
|
.jeu-nav ul li { /* Element de la zone de navigation */
|
|
display: inline-block; /* Affiche les éléments */
|
|
vertical-align: middle; /* Aligne verticalement les éléments */
|
|
}
|
|
|
|
/* ### Affichage de la partie principale ### */
|
|
.jeu-part {
|
|
display: inline-flex; /* Affiche les éléments flexiblement */
|
|
width: 100%; /* Prend la totalité du container */
|
|
height: 500px; /* A une hauteur minimale de 500px */
|
|
}
|
|
|
|
#picture-ingame { /* Image du jeu */
|
|
background-repeat: no-repeat; /* Ne pas répéter l'image si l'espace alloué est plus grand qu'elle même */
|
|
width: 70%; /* Prend 70% du container */
|
|
height: 500px; /* Prend les 500px du container */
|
|
border-radius: var(--border-radius-5); /* Bordure arrondis de l'élément */
|
|
background-size: cover; /* L'image prend la totalité de l'espace qui lui est attribué */
|
|
background-position: center center; /* Place l'image au centre de l'espace alloué */
|
|
overflow: hidden; /* Cache le surplus de la photo */
|
|
}
|
|
|
|
#picture-ingame iframe { /* Vidéo importée de Youtube */
|
|
width: 100%; /* Prend la totalité de la taille qui lui est attribué */
|
|
height: 100%; /* Prend la totalité de la hauteur qui lui est attribué */
|
|
}
|
|
|
|
/* ### Partie droite de la vidéo/image ### */
|
|
.side-part {
|
|
margin-left: 16px; /* Met une marge de 16 vers la gauche */
|
|
width: 30%; /* Prend 30% du container */
|
|
}
|
|
|
|
.background-picture-cover { /* Fond du logo du jeu */
|
|
background-color: var(--overlay-color); /* Couleur de fond du logo du jeu */
|
|
border-radius: var(--border-radius-5); /* Bordures arrondis */
|
|
padding: 10px; /* Marges intenes de tout les cotés */
|
|
height: 30%; /* Prend 30% de la hauteur */
|
|
}
|
|
|
|
|
|
#picture-logo { /* Logo du jeu */
|
|
background-position: center center; /* Centre le logo du jeu */
|
|
background-size: contain; /* Toute l'image doit etre présente dans le bloc */
|
|
background-repeat: no-repeat; /* Ne pas répéter l'image si il y a trop d'espace */
|
|
height: 100%; /* Prend 100% de la hauteur qui lui est alloué */
|
|
}
|
|
|
|
.text-part { /* Partie textuelle du jeu */
|
|
background-color: var(--overlay-color); /* Couleur de fond */
|
|
border-radius: var(--border-radius-5); /* Bordures arrondis */
|
|
padding: 5px; /* Marge interne de tout les cotés */
|
|
margin-top: 16px; /* Marge de tout les cotés */
|
|
}
|
|
|
|
.text-part h2 { /* Titre du jeu */
|
|
margin-top: 5px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* ### Partie du prix ### */
|
|
.price-part {
|
|
text-align: right; /* Aligne le texte à droite */
|
|
margin: 0 10px 10px 0; /* Met une marge de 10px a droite et en bas */
|
|
display: block; /* Affiche les élément l'un en dessous de l'autre */
|
|
}
|
|
|
|
#price { /* Element contenant la valeur du prix */
|
|
margin-bottom: 16px; /* Met une marge vers le bas */
|
|
font-size: 1.1em; /* Change la taille de la police */
|
|
}
|
|
|
|
/* ### Partie plus d'info ### */
|
|
.plus-info {
|
|
margin-top: 100px; /* Met une marge vers le haut */
|
|
background-color: var(--overlay-color); /* Couleur de fond */
|
|
border-radius: var(--border-radius-5); /* Bordure arrondis */
|
|
padding: 15px /* Marge interne de tout les cotés */
|
|
}
|
|
|
|
.plus-info table { /* Tableau interne de la partie "plus d'info" */
|
|
text-align: center; /* Centre les éléments du tableau */
|
|
width: 100%; /* Prend la totalité de la longueur de la page */
|
|
padding-bottom: 30px; /* Crée une marge interne vers le bas */
|
|
} |