amélioration page d'accueil
This commit is contained in:
44
index.html
44
index.html
@@ -11,11 +11,11 @@
|
|||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<div class="header-placeholder"></div>
|
||||||
<header>
|
<header>
|
||||||
<h2 class="logo">Logo</h2>
|
<h2 class="logo">Logo</h2>
|
||||||
<nav class="navigation">
|
<nav class="navigation">
|
||||||
<a href ="#">Accueil</a>
|
<a href ="#">Acceuil</a>
|
||||||
<a href ="#">Réservation</a>
|
<a href ="#">Réservation</a>
|
||||||
<a href ="#">À propos</a>
|
<a href ="#">À propos</a>
|
||||||
<a href ="#">Contact</a>
|
<a href ="#">Contact</a>
|
||||||
@@ -87,11 +87,51 @@
|
|||||||
Explorez vos vacances avec Pegasus, votre partenaire idéal pour la location d'équipement de loisir.
|
Explorez vos vacances avec Pegasus, votre partenaire idéal pour la location d'équipement de loisir.
|
||||||
Des aventures en plein air aux moments de détente, nous avons tout ce dont vous avez besoin.
|
Des aventures en plein air aux moments de détente, nous avons tout ce dont vous avez besoin.
|
||||||
</p>
|
</p>
|
||||||
|
<p>Explorez la liberté de voyager sans contraintes géographiques grâce à notre service de location de véhicules tout-terrain. Peu importe où vous vous trouvez, notre réseau de location s'étend à travers diverses régions, vous permettant de planifier des escapades dans des endroits aussi variés que majestueux.</p>
|
||||||
|
<p>Notre flotte diversifiée comprend des camping-cars, des caravanes, des vans aménagés et d'autres véhicules de loisir, tous conçus pour offrir le parfait équilibre entre confort et aventure. Que vous souhaitiez vous échapper en pleine nature, explorer des plages isolées ou vous immerger dans l'effervescence des festivals, nos véhicules sont prêts à répondre à vos besoins.</p>
|
||||||
|
<p>L'un des avantages majeurs de notre service est la possibilité de vous déplacer dans n'importe quel environnement. Nos véhicules tout-terrain sont équipés pour affronter diverses conditions routières, des routes pavées aux sentiers de montagne escarpés. Profitez de la polyvalence et de la facilité de conduite, que ce soit en ville, à la campagne ou dans des zones plus reculées.</p>
|
||||||
|
<p>Notre processus de location est simple et flexible. Choisissez le véhicule qui correspond à votre style d'aventure, déterminez les dates de location et préparez-vous à vivre une expérience unique. Nous mettons l'accent sur la qualité, la sécurité et la satisfaction de nos clients, vous assurant ainsi une escapade mémorable en toute tranquillité d'esprit.</p>
|
||||||
|
<p>Que vous soyez un routard chevronné ou un novice en quête de nouvelles expériences, notre site de location de véhicules de loisir vous offre la clé pour ouvrir les portes de l'aventure. Embarquez avec nous pour des voyages sans limites, des souvenirs impérissables et des moments de liberté totale. Réservez dès maintenant et préparez-vous à explorer le monde à votre rythme.</p>
|
||||||
<p>
|
<p>
|
||||||
Réservez dès maintenant et transformez vos vacances en expériences inoubliables.
|
Réservez dès maintenant et transformez vos vacances en expériences inoubliables.
|
||||||
</p>
|
</p>
|
||||||
<p class="slogan">Vivez l'aventure, louez avec Pegasus!</p>
|
<p class="slogan">Vivez l'aventure, louez avec Pegasus!</p>
|
||||||
</section>
|
</section>
|
||||||
|
<section class="gallery">
|
||||||
|
<h2>Nos Photos</h2>
|
||||||
|
<div class="photo-grid">
|
||||||
|
<div class="photo">
|
||||||
|
<img src="montgolfiere.jpg" alt="Montgolfière">
|
||||||
|
<div class="comment">
|
||||||
|
<h3>Commentaire 1</h3>
|
||||||
|
<p>Ceci est le commentaire pour la photo de la montgolfière.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="photo">
|
||||||
|
<img src="jetski.jpg" alt="Jet Ski">
|
||||||
|
<div class="comment">
|
||||||
|
<h3>Commentaire 2</h3>
|
||||||
|
<p>Ceci est le commentaire pour la photo du jet ski.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="photo">
|
||||||
|
<img src="motoneige.jpg" alt="Motoneige">
|
||||||
|
<div class="comment">
|
||||||
|
<h3>Commentaire 3</h3>
|
||||||
|
<p>Ceci est le commentaire pour la photo de la motoneige.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="photo">
|
||||||
|
<img src="buggy.jpg" alt="Buggy">
|
||||||
|
<div class="comment">
|
||||||
|
<h3>Commentaire 4</h3>
|
||||||
|
<p>Ceci est le commentaire pour la photo du buggy.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
BIN
jetski.jpg
Normal file
BIN
jetski.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 MiB |
BIN
montgolfiere.jpg
Normal file
BIN
montgolfiere.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
BIN
motoneige.jpg
Normal file
BIN
motoneige.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
54
script.js
54
script.js
@@ -1,22 +1,44 @@
|
|||||||
const wrapper = document.querySelector('.wrapper');
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
const loginLink = document.querySelector('.login-link');
|
const wrapper = document.querySelector('.wrapper');
|
||||||
const registerLink = document.querySelector('.register-link');
|
const loginLink = document.querySelector('.login-link');
|
||||||
const btnPopup = document.querySelector('.btnLogin-popup');
|
const registerLink = document.querySelector('.register-link');
|
||||||
const iconClose = document.querySelector('.icon-close');
|
const btnPopup = document.querySelector('.btnLogin-popup');
|
||||||
|
const iconClose = document.querySelector('.icon-close');
|
||||||
|
|
||||||
|
function openLoginForm(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
wrapper.classList.add('active-popup');
|
||||||
|
}
|
||||||
|
|
||||||
registerLink.addEventListener('click', ()=> {
|
function closeLoginForm(event) {
|
||||||
wrapper.classList.add('active');
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
wrapper.classList.remove('active-popup');
|
||||||
|
}
|
||||||
|
|
||||||
|
registerLink.addEventListener('click', function (event) {
|
||||||
|
openLoginForm(event);
|
||||||
|
wrapper.classList.add('active');
|
||||||
|
});
|
||||||
|
|
||||||
|
loginLink.addEventListener('click', function (event) {
|
||||||
|
openLoginForm(event);
|
||||||
|
wrapper.classList.remove('active');
|
||||||
|
});
|
||||||
|
|
||||||
|
btnPopup.addEventListener('click', openLoginForm);
|
||||||
|
|
||||||
|
iconClose.addEventListener('click', closeLoginForm);
|
||||||
});
|
});
|
||||||
|
|
||||||
loginLink.addEventListener('click', ()=> {
|
window.addEventListener('scroll', function() {
|
||||||
wrapper.classList.remove('active');
|
var headerPlaceholder = document.querySelector('.header-placeholder');
|
||||||
});
|
var header = document.querySelector('header');
|
||||||
|
|
||||||
btnPopup.addEventListener('click', ()=> {
|
if (window.scrollY >= header.offsetTop) {
|
||||||
wrapper.classList.add('active-popup');
|
headerPlaceholder.style.display = 'block';
|
||||||
});
|
} else {
|
||||||
|
headerPlaceholder.style.display = 'none';
|
||||||
iconClose.addEventListener('click', ()=> {
|
}
|
||||||
wrapper.classList.remove('active-popup');
|
|
||||||
});
|
});
|
||||||
83
style.css
83
style.css
@@ -11,13 +11,15 @@ body {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background: black;
|
background: white;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
background: #162938;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -84,7 +86,7 @@ header {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.wrapper {
|
.wrapper {
|
||||||
position: relative;
|
position: fixed;
|
||||||
width: 400px;
|
width: 400px;
|
||||||
height: 440px;
|
height: 440px;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
@@ -98,6 +100,9 @@ header {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transform: scale(0);
|
transform: scale(0);
|
||||||
transition: transform .5s ease, height .2s ease;
|
transition: transform .5s ease, height .2s ease;
|
||||||
|
top: 50;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrapper.active-popup {
|
.wrapper.active-popup {
|
||||||
@@ -156,7 +161,7 @@ header {
|
|||||||
|
|
||||||
.form-box h2 {
|
.form-box h2 {
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
color: white;
|
color: #162938;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -164,7 +169,7 @@ header {
|
|||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
border-bottom: 2px solid whitesmoke;
|
border-bottom: 2px solid #162938;
|
||||||
margin: 30px 0;
|
margin: 30px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -174,7 +179,7 @@ header {
|
|||||||
left: 5px;
|
left: 5px;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
color: whitesmoke;
|
color: #162938;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
transition: .5s;
|
transition: .5s;
|
||||||
@@ -193,7 +198,7 @@ header {
|
|||||||
border: none;
|
border: none;
|
||||||
outline: none;
|
outline: none;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
color:whitesmoke;
|
color:#162938;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
padding: 0 35px 0 5px;
|
padding: 0 35px 0 5px;
|
||||||
|
|
||||||
@@ -208,7 +213,7 @@ header {
|
|||||||
|
|
||||||
.remember-forgot {
|
.remember-forgot {
|
||||||
font-size: .9em;
|
font-size: .9em;
|
||||||
color: whitesmoke;
|
color: #162938;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
margin: -15px 0 15px;
|
margin: -15px 0 15px;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -217,7 +222,7 @@ header {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.remember-forgot label input {
|
.remember-forgot label input {
|
||||||
accent-color: purple;
|
accent-color: #162938;
|
||||||
margin-right: 3px;
|
margin-right: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -244,7 +249,7 @@ header {
|
|||||||
|
|
||||||
.login-register {
|
.login-register {
|
||||||
font-size: .9em;
|
font-size: .9em;
|
||||||
color: #FBFCFC;
|
color: #162938;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
margin: 25px 0 10px;
|
margin: 25px 0 10px;
|
||||||
@@ -262,9 +267,11 @@ header {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.presentation {
|
.presentation {
|
||||||
text-align: center;
|
display: flex;
|
||||||
margin-top: 80px;
|
flex-direction: column;
|
||||||
color: #fff;
|
align-items: center;
|
||||||
|
margin-top: 150px;
|
||||||
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.presentation h1 {
|
.presentation h1 {
|
||||||
@@ -281,6 +288,56 @@ header {
|
|||||||
.presentation .slogan {
|
.presentation .slogan {
|
||||||
font-size: 1.3em;
|
font-size: 1.3em;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #f5a623;
|
color: #08121a;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.gallery {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 20px;
|
||||||
|
text-align: left; /* Nouvelle ligne ajoutée pour aligner le texte à gauche */
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
background-color: rgba(255, 255, 255, 0.9);
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 0 0 10px 10px;
|
||||||
|
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment h3 {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
color: #162938;
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-placeholder {
|
||||||
|
height: 80px;
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user