484 lines
8.6 KiB
CSS
484 lines
8.6 KiB
CSS
/* ------------- */
|
|
/* HTML */
|
|
/* ------------- */
|
|
|
|
html,
|
|
body {
|
|
background-color: #1e1e1e;
|
|
color: #eff1f3;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: auto;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* --------------- */
|
|
/* Header */
|
|
/* --------------- */
|
|
|
|
header {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 10px 40px;
|
|
}
|
|
|
|
header a {
|
|
text-decoration: none;
|
|
color: #eff1f3;
|
|
}
|
|
|
|
header ul {
|
|
list-style: none;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
header li {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.header_text {
|
|
display: flex;
|
|
flex-grow: 1; /* Le conteneur des liens prend toute la place disponible */
|
|
justify-content: center; /* Centre les liens horizontalement */
|
|
gap: 15%; /* Espace entre les liens */
|
|
font-weight: 600;
|
|
}
|
|
|
|
.header_text a {
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.header_text li a:hover {
|
|
color: #00a8e8;
|
|
}
|
|
|
|
.bouton_connexion {
|
|
padding: 10px 20px;
|
|
border-radius: 900px;
|
|
font-size: 16px; /* Taille de la police */
|
|
border-color: #00a8e8;
|
|
color: #eff1f3;
|
|
background-color: #00a8e8;
|
|
margin-top: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.bouton_connexion:hover {
|
|
border-color: #eff1f3;
|
|
color: #00a8e8;
|
|
background-color: #eff1f3; /* Changer la couleur au survol */
|
|
}
|
|
|
|
#smart_building {
|
|
width: 13%;
|
|
margin-left: -40px;
|
|
height: auto;
|
|
}
|
|
|
|
/* --------------------- */
|
|
/* Inscription */
|
|
/* --------------------- */
|
|
|
|
h1 {
|
|
font-size: 45px; /* Taille de la police */
|
|
color: #eff1f3;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
label {
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
color: #eff1f3;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
select {
|
|
appearance: none; /* Supprime le style natif */
|
|
background: white;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#inscription {
|
|
display: flex; /* Ajouté pour aligner les enfants */
|
|
justify-content: center; /* Centrer les éléments verticalement */
|
|
align-items: center; /* Centrer les éléments horizontalement */
|
|
flex: 1; /* Prend toute la hauteur de l'écran */
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
.tour {
|
|
width: 23%;
|
|
height: 640px;
|
|
border-radius: 33px;
|
|
padding-left: 8%;
|
|
background-image: url("/images/tour.jpg");
|
|
background-size: cover;
|
|
}
|
|
|
|
.page-inscription {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
border-radius: 24px;
|
|
background-color: #2c2c2c;
|
|
padding: 40px 100px; /* Augmente l'espace intérieur */
|
|
width: 100%; /* Prend toute la largeur disponible */
|
|
max-width: 400px; /* Définit une largeur max pour éviter qu'elle ne devienne trop étroite */
|
|
box-shadow: 0 4px 8px 0 rgba(21, 21, 21, 0.2);
|
|
}
|
|
|
|
.form-group {
|
|
width: 100%;
|
|
position: relative; /* Position relative */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.form-group .icon {
|
|
position: absolute;
|
|
left: 15px; /* Ajuste la position des icônes */
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.form-group .icon svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
fill: #191717;
|
|
}
|
|
|
|
.form-control-inscription {
|
|
width: 100%;
|
|
padding-left: 50px; /* Remplissage à gauche de 50px */
|
|
padding-right: 40px;
|
|
height: 48px; /* Hauteur de 48px */
|
|
border-radius: 34px; /* Bordure arrondie */
|
|
font-size: 16px; /* Taille de la police */
|
|
letter-spacing: 0.5px; /* Espacement des lettres */
|
|
background-color: #eff1f3; /* Couleur de fond */
|
|
border: none; /* Supprimer la bordure */
|
|
}
|
|
|
|
.form-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px; /* espace entre label et champ */
|
|
flex-wrap: nowrap; /* évite le retour à la ligne */
|
|
}
|
|
|
|
.bouton-inscription {
|
|
padding: 10px 20px;
|
|
border-radius: 900px;
|
|
font-size: 16px; /* Taille de la police */
|
|
border-color: #00a8e8;
|
|
color: #eff1f3;
|
|
background-color: #00a8e8;
|
|
margin-top: 0; /* Centrage vertical */
|
|
cursor: pointer;
|
|
}
|
|
|
|
.bouton-inscription:hover {
|
|
border-color: #eff1f3;
|
|
color: #00a8e8;
|
|
background-color: #eff1f3; /* Changer la couleur au survol */
|
|
}
|
|
|
|
.boutons {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 20px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
/* Alignement parfait du bouton "Photo" */
|
|
.custom-file-upload {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
background-color: #004fa9;
|
|
color: #eff1f3;
|
|
padding: 10px 20px;
|
|
border-radius: 900px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.custom-file-upload:hover {
|
|
background-color: #eff1f3;
|
|
color: #004fa9;
|
|
border: 1px solid #004fa9;
|
|
}
|
|
|
|
/* Alignement du SVG */
|
|
.custom-file-upload svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
vertical-align: middle;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
.case {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
margin-right: 9%;
|
|
}
|
|
|
|
.lien {
|
|
background: none;
|
|
border: none;
|
|
font-family: inherit; /* pour garder la cohérence du texte */
|
|
display: inline-block; /* Permet de mieux gérer la taille du soulignement */
|
|
text-align: center;
|
|
margin-bottom: 15px;
|
|
font-size: 23px; /* Taille de la police */
|
|
color: #eff1f3;
|
|
text-decoration: none; /* Supprime le soulignement par défaut */
|
|
text-underline-offset: 10px; /* Augmente l'espace entre le texte et le soulignement */
|
|
cursor: pointer;
|
|
padding-bottom: 10px; /* Ajoute un petit espace sous le texte */
|
|
position: relative; /* Positionner l'élément par rapport à son parent */
|
|
}
|
|
|
|
.lien::after {
|
|
content: "";
|
|
display: block;
|
|
width: 120%; /* La ligne est maintenant 1.5 fois plus grande que le texte */
|
|
height: 2px; /* Épaisseur du soulignement */
|
|
background-color: #eff1f3; /* Couleur du soulignement */
|
|
position: absolute;
|
|
left: 50%; /* Centre la ligne horizontalement */
|
|
transform: translateX(
|
|
-50%
|
|
); /* Déplace la ligne pour qu'elle soit exactement centrée */
|
|
bottom: 0;
|
|
}
|
|
|
|
.lien:hover {
|
|
color: #0077b6;
|
|
}
|
|
|
|
/* --------------- */
|
|
/* Footer */
|
|
/* --------------- */
|
|
|
|
footer {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: 14px;
|
|
text-transform: uppercase;
|
|
padding: 20px;
|
|
margin-top: auto; /* Cela force le footer à se pousser vers le bas */
|
|
}
|
|
|
|
.copyright {
|
|
padding: 10px 20px;
|
|
}
|
|
|
|
footer a {
|
|
text-decoration: none;
|
|
color: #eff1f3;
|
|
}
|
|
|
|
.footer_link {
|
|
display: flex;
|
|
flex-grow: 1;
|
|
gap: 10%;
|
|
}
|
|
|
|
.footer_link a {
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.copyright {
|
|
padding: 10px 20px;
|
|
}
|
|
|
|
/* ---------------------- */
|
|
/* Media Queries */
|
|
/* ---------------------- */
|
|
|
|
/* GRAND ÉCRAN (> 1440px) */
|
|
@media (min-width: 1440px) {
|
|
h1 {
|
|
font-size: 48px;
|
|
}
|
|
|
|
.tour {
|
|
height: 700px;
|
|
}
|
|
|
|
.form-control-inscription {
|
|
font-size: 18px;
|
|
height: 52px;
|
|
}
|
|
}
|
|
|
|
/* TABLETTE - Moyenne (1025px à 1440px) */
|
|
@media (max-width: 1440px) and (min-width: 1025px) {
|
|
h1 {
|
|
font-size: 48px;
|
|
}
|
|
|
|
.tour {
|
|
height: 600px;
|
|
}
|
|
|
|
.page-inscription {
|
|
padding: 40px;
|
|
}
|
|
|
|
.form-control-inscription {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
/* TABLETTE - Petite (769px à 1024px) */
|
|
@media (max-width: 1024px) and (min-width: 769px) {
|
|
header {
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
gap: 20px;
|
|
}
|
|
|
|
#smart_building {
|
|
width: 100px;
|
|
margin: 0;
|
|
}
|
|
|
|
.header_text {
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 30px;
|
|
}
|
|
|
|
.bouton_connexion {
|
|
padding: 8px 16px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 40px;
|
|
text-align: center;
|
|
}
|
|
|
|
.tour {
|
|
width: 100%;
|
|
height: 300px;
|
|
}
|
|
|
|
.form-control-inscription {
|
|
font-size: 15px;
|
|
}
|
|
}
|
|
|
|
/* MOBILE (≤ 768px) */
|
|
@media (max-width: 768px) {
|
|
header {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 15px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.header_text {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.bouton_connexion {
|
|
width: auto;
|
|
padding: 10px 16px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
#smart_building {
|
|
width: 80px;
|
|
margin-left: 0;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 32px;
|
|
text-align: center;
|
|
}
|
|
|
|
.tour {
|
|
height: 250px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.form-control-inscription {
|
|
font-size: 14px;
|
|
height: 44px;
|
|
}
|
|
|
|
footer {
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
text-align: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.footer_link {
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.copyright {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
/* TÉLÉPHONE TRÈS PETIT (≤ 480px) */
|
|
@media (max-width: 480px) {
|
|
h1 {
|
|
font-size: 26px;
|
|
}
|
|
|
|
.form-control-inscription {
|
|
font-size: 13px;
|
|
padding-left: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
.form-group .icon svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.page-inscription {
|
|
padding: 20px 10px;
|
|
}
|
|
|
|
.bouton-inscription {
|
|
font-size: 14px;
|
|
padding: 8px 14px;
|
|
}
|
|
|
|
.lien {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.tour {
|
|
width: 60px;
|
|
}
|
|
} |