/*!
* Start Bootstrap - Agency Bootstrap Theme (https://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*Entrainement CSS FILE
*Editor : Eloi BERLINGER
*Version : 0.0
*/
@font-face {
font-family: 'Poppins-Regular';
src: url('../src/fonts/Poppins/Poppins-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'open-sans-condensed';
src: url('../src/fonts/open-sans-condensed/OpenSans-CondLight.ttf') format('truetype');
size-adjust: 130%;
}
html,
body {
-webkit-tap-highlight-color: transparent;
width: 100%;
height: 100%;
margin: 0;
font-family: 'Poppins-Regular','open-sans-condensed', sans-serif;
background: #f3f3f3;
overflow-x: hidden;
}
/* navbar regular css start */
.navbar-area {
height: 100%;
background: #0073A7;
}
.site-navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
a.site-logo {
padding: 10px;
font-size: 26px;
font-weight: 800;
text-transform: uppercase;
color: #fff;
text-decoration: none;
}
.site-navbar ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
.site-navbar ul li a {
color: #fff;
padding: 30px 20px;
display: block;
text-decoration: none;
text-transform: uppercase;
text-align: center;
}
.site-navbar ul li a:hover {
background: rgba(255, 255, 255, .1);
}
/* navbar regular css end */
/* nav-toggler css start */
.nav-toggler {
border: none;
padding: 5px;
background-color: transparent;
cursor: pointer;
height: 39px;
display: none;
}
.nav-toggler span,
.nav-toggler span:before,
.nav-toggler span:after {
width: 28px;
height: 3px;
background-color: #fff;
display: block;
transition: .3s;
}
.nav-toggler span:before {
content: '';
transform: translateY(-9px);
}
.nav-toggler span:after {
content: '';
transform: translateY(6px);
}
.nav-toggler.toggler-open span {
background-color: transparent;
}
.nav-toggler.toggler-open span:before {
transform: translateY(0px) rotate(45deg);
}
.nav-toggler.toggler-open span:after {
transform: translateY(-3px) rotate(-45deg);
}
/* nav-toggler css start */
/* intro-area css start */
.intro-area {
height: calc(100vh - 61px);
display: flex;
align-items: center;
text-align: center;
color: #fff;
}
.intro-area h2 {
font-size: 50px;
font-weight: 300;
line-height: 50px;
margin-bottom: 25px;
}
.intro-area p {
font-size: 18px;
}
/* intro-area css end */
/* mobile breakpoint start */
@media screen and (max-width: 767px) {
.container {
max-width: 720px;
}
/* navbar css for mobile start */
.nav-toggler {
display: block;
}
.site-navbar {
min-height: 60px;
}
.site-navbar ul {
position: absolute;
width: 100%;
height: calc(200vh - 60px);
left: 0;
top: 60px;
flex-direction: column;
align-items: center;
background-color: #0073A7;
max-height: 0;
overflow: hidden;
transition: .3s;
}
.site-navbar ul li {
width: 100%;
text-align: center;
}
/* Assurez-vous que le menu déroulant a un z-index élevé */
.site-navbar ul {
position: absolute;
width: 100%;
height: calc(200vh - 60px);
left: 0;
top: 60px;
flex-direction: column;
align-items: center;
background-color: #0073A7;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s;
z-index: 1000; /* Assurez-vous que cette valeur est suffisamment élevée */
}
.site-navbar ul.open {
max-height: 100vh;
overflow: visible;
}
.site-navbar ul li:hover {
background-color: rgba(255, 255, 255, .1);
}
.site-navbar ul li a {
padding: 25px;
background-color: #0073A7;
}
.site-navbar ul li a:hover {
background-color: rgba(255, 255, 255, .1);
}
.site-navbar ul.open {
max-height: 100vh;
overflow: visible;
}
.intro-area h2 {
font-size: 36px;
margin-bottom: 15px;
}
/* navbar css for mobile end */
}
/* mobile breakpoint end */
/*
============== Content PAGE ==============
*/
.content{
margin: 15px 5%;
}
.content a{
color: black;
}
@media screen and (max-width: 800px) {
.content img{
width: 100%;
height: auto;
}
}
/*
============== Home PAGE ==============
*/
/*
positionnement des liens sur les logos des réseaux sociaux de l'image
#slider_instalink {
position: relative;
width: 100%;
height: 0px;
}
#slider_instalink a {
content: '';
background-color: red;
height: 5vh;
width: 5vh;
transform: translate(-50%, -50%);
position: absolute;
left: 50%;
top: 49.5vh;
}
*/
.home_heading_image {
position: relative;
width: 100%;
height: 100vh; /* Utilisez 100vh pour couvrir toute la hauteur de la fenêtre */
overflow: hidden; /* Cache tout débordement */
display: inline-block;
}
.home_heading_image img {
width: 100%;
height: 100%;
object-fit: cover; /* Assure que l'image couvre tout l'espace disponible */
margin: 0;
}
.social-links {
position: absolute;
top: 70%; /* Ajustez cette valeur selon la position souhaitée */
left: 50%; /* Ajustez cette valeur selon la position souhaitée */
transform: translate(-50%, -50%);
display: flex;
gap: 10px;
}
.social-links a {
display: block;
width: 30px; /* Ajustez selon la taille de vos icônes */
height: 30px; /* Ajustez selon la taille de vos icônes */
background-size: cover;
background-position: center;
}
.facebook-link {
background-image: url('path/to/facebook-icon.png'); /* Chemin vers votre icône Facebook */
}
.instagram-link {
background-image: url('path/to/instagram-icon.png'); /* Chemin vers votre icône Instagram */
}
.linkedin-link {
background-image: url('path/to/linkedin-icon.png'); /* Chemin vers votre icône LinkedIn */
}
/* Media Queries pour les petits écrans */
@media (max-width: 767px) {
.social-links {
top: 90%; /* Ajustez cette valeur pour les petits écrans */
gap: 5px; /* Réduisez l'espace entre les icônes */
}
.social-links a {
width: 25px; /* Ajustez la taille pour les petits écrans */
height: 25px; /* Ajustez la taille pour les petits écrans */
}
}
/*
=================================== OUVERTURE page ===================
*/
.ouverture_titlespan_contentimage{
display: flex;
font-size: 18px;
text-decoration: underline;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin: 10px 0px;
}
.mentions_legales_content{
margin-left: 10%;
margin-right: 10%;
}
/*
=================================== CONTACT CONTAINER ===================
*/
@media screen and (min-width: 1080px) {
.contact_page_text {
width: 100%;
}
}
.contact_page_container{
vertical-align: middle;
text-align: center;
}
.contact_page_text{
text-align: left;
display: inline-block;
}
.contact_container {
margin: 50px;
border: solid #0073A7 1px;
display: inline-block;
padding: 10px;
}
.contact_container .error_title {
color: red;
}
.contact_container .success_title {
color: green;
}
.contact_container .form_container {
text-align: left;
}
.contact_container .form_container .inputacacher {
display: none;
}
.contact_container .form_container .form_item .checkbox_label {
margin: 0;
padding: 0;
vertical-align: middle;
}
.contact_container .form_container .form_item input {
height: 30px;
border: none;
font-size: 16px;
}
.contact_container .form_container .form_item textarea {
height: 50px;
border: none;
font-size: 16px;
}
.contact_container .button .button_link {
border: solid #0073A7 1px;
border-radius: 10px;
padding: 15px 30px;
display: inline-block;
transition-duration: 1s;
}
.contact_container .button .button_link:hover {
background-color: #0073A7;
color: white;
transition-duration: 1s;
cursor: pointer;
}
.contact_container .button a {
text-decoration: none;
color: #0073A7;
}
/* Style pour le conteneur de la page de contact */
.contact_page_container {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
text-align: center;
}
.contact_page_text {
text-align: left;
max-width: 600px;
margin-bottom: 20px;
width: 100%;
}
.contact_page_text h1 {
font-size: 2.5rem;
margin-bottom: 10px;
}
.contact_page_text p {
font-size: 1rem;
line-height: 1.6;
}
/* Style pour le conteneur du formulaire */
.contact_container {
width: 100%;
max-width: 600px;
border: 1px solid #0073A7;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
box-sizing: border-box; /* Assure que le padding est inclus dans la largeur totale */
}
.contact_container .error_title {
color: red;
margin-bottom: 10px;
}
.contact_container .success_title {
color: green;
margin-bottom: 10px;
}
/* Style pour les éléments du formulaire */
.form_container .form_item {
margin-bottom: 15px;
}
.form_container .form_item label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.form_container .form_item input,
.form_container .form_item textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 1rem;
box-sizing: border-box; /* Assure que le padding est inclus dans la largeur totale */
transition: border-color 0.3s;
}
.form_container .form_item input:focus,
.form_container .form_item textarea:focus {
border-color: #0073A7;
outline: none;
}
.form_container .form_item textarea {
resize: vertical;
}
/* Style pour le bouton */
.button .button_link {
background-color: #0073A7;
color: white;
border: none;
border-radius: 5px;
padding: 15px 20px;
cursor: pointer;
transition: background-color 0.3s;
width: 100%; /* Assure que le bouton s'étend sur toute la largeur du conteneur */
}
.button .button_link:hover {
background-color: #005f8a;
}
/* Style pour les images de carte de visite */
.contact_page_container img {
max-width: 100%;
height: auto;
margin-top: 20px;
border-radius: 8px;
}
/* Media Queries pour les petits écrans */
@media (max-width: 767px) {
.contact_page_text,
.contact_container {
max-width: 100%;
}
.contact_page_container {
padding: 10px;
}
}
@media screen and (max-width: 800px) {
.contact_container .form_container .form_item textarea {
width: 100%;
}
}
/*
------- FOOTER ------
*/
footer {
width: 100%;
background: #FFFFFF;
}
footer .footer_content {
display: flex;
align-items: center;
justify-content: center;
}
footer .footer_item {
display: inline-block;
margin: 50px;
}
footer .footer_item ul {
list-style-type: none;
padding: 0;
}
footer .footer_item ul li {
margin: 7px 0;
}
footer .footer_item ul li a {
color: black;
text-decoration: none;
}
footer .footer_profil_picture {
height: 100px;
width: 100px;
border-radius: 5px;
}
footer .footer_droits {
text-align: center;
padding: 10px 0 20px 0;
}
footer .footer_droits a {
color: black;
}
@media screen and (max-width: 800px) {
footer .footer_content {
display: block;
align-items: baseline;
}
footer .footer_item {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
footer .footer_item h3 {
margin-right: 25%;
}
}
/*
============== MAINTENANCE PAGE ==============
*/
.maintenance_content span {
text-align: center;
display: block;
font-family: sans-serif;
}
.maintenance_content span:nth-child(1) {
margin-top: 15%;
font-size: 40px;
}
.maintenance_content span:nth-child(2) {
font-size: 14px;
}