amélioration page d'accueil
This commit is contained in:
parent
acfc5b0679
commit
a3b7f3e09f
BIN
buggy.jpg
Normal file
BIN
buggy.jpg
Normal file
Binary file not shown.
|
After 
(image error) Size: 170 KiB |
48
index.html
48
index.html
@ -11,11 +11,11 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="header-placeholder"></div>
|
||||
<header>
|
||||
<h2 class="logo">Logo</h2>
|
||||
<nav class="navigation">
|
||||
<a href ="#">Accueil</a>
|
||||
<a href ="#">Acceuil</a>
|
||||
<a href ="#">Réservation</a>
|
||||
<a href ="#">À propos</a>
|
||||
<a href ="#">Contact</a>
|
||||
@ -85,13 +85,53 @@
|
||||
<h1>Bienvenue chez Pegasus</h1>
|
||||
<p>
|
||||
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>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>
|
||||
Réservez dès maintenant et transformez vos vacances en expériences inoubliables.
|
||||
</p>
|
||||
<p class="slogan">Vivez l'aventure, louez avec Pegasus!</p>
|
||||
</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>
|
||||
BIN
jetski.jpg
Normal file
BIN
jetski.jpg
Normal file
Binary file not shown.
|
After 
(image error) Size: 3.5 MiB |
BIN
montgolfiere.jpg
Normal file
BIN
montgolfiere.jpg
Normal file
Binary file not shown.
|
After 
(image error) Size: 130 KiB |
BIN
motoneige.jpg
Normal file
BIN
motoneige.jpg
Normal file
Binary file not shown.
|
After 
(image error) Size: 75 KiB |
56
script.js
56
script.js
@ -1,22 +1,44 @@
|
||||
const wrapper = document.querySelector('.wrapper');
|
||||
const loginLink = document.querySelector('.login-link');
|
||||
const registerLink = document.querySelector('.register-link');
|
||||
const btnPopup = document.querySelector('.btnLogin-popup');
|
||||
const iconClose = document.querySelector('.icon-close');
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const wrapper = document.querySelector('.wrapper');
|
||||
const loginLink = document.querySelector('.login-link');
|
||||
const registerLink = document.querySelector('.register-link');
|
||||
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', ()=> {
|
||||
wrapper.classList.add('active');
|
||||
function closeLoginForm(event) {
|
||||
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', ()=> {
|
||||
wrapper.classList.remove('active');
|
||||
});
|
||||
|
||||
btnPopup.addEventListener('click', ()=> {
|
||||
wrapper.classList.add('active-popup');
|
||||
});
|
||||
|
||||
iconClose.addEventListener('click', ()=> {
|
||||
wrapper.classList.remove('active-popup');
|
||||
window.addEventListener('scroll', function() {
|
||||
var headerPlaceholder = document.querySelector('.header-placeholder');
|
||||
var header = document.querySelector('header');
|
||||
|
||||
if (window.scrollY >= header.offsetTop) {
|
||||
headerPlaceholder.style.display = 'block';
|
||||
} else {
|
||||
headerPlaceholder.style.display = 'none';
|
||||
}
|
||||
});
|
||||
83
style.css
83
style.css
@ -11,13 +11,15 @@ body {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
background: black;
|
||||
background: white;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
position: fixed;
|
||||
background: #162938;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
@ -84,7 +86,7 @@ header {
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
position: relative;
|
||||
position: fixed;
|
||||
width: 400px;
|
||||
height: 440px;
|
||||
background: transparent;
|
||||
@ -98,6 +100,9 @@ header {
|
||||
overflow: hidden;
|
||||
transform: scale(0);
|
||||
transition: transform .5s ease, height .2s ease;
|
||||
top: 50;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.wrapper.active-popup {
|
||||
@ -156,7 +161,7 @@ header {
|
||||
|
||||
.form-box h2 {
|
||||
font-size: 2em;
|
||||
color: white;
|
||||
color: #162938;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -164,7 +169,7 @@ header {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
border-bottom: 2px solid whitesmoke;
|
||||
border-bottom: 2px solid #162938;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
@ -174,7 +179,7 @@ header {
|
||||
left: 5px;
|
||||
transform: translateY(-50%);
|
||||
font-size: 1em;
|
||||
color: whitesmoke;
|
||||
color: #162938;
|
||||
font-weight: 500;
|
||||
pointer-events: none;
|
||||
transition: .5s;
|
||||
@ -193,7 +198,7 @@ header {
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 1em;
|
||||
color:whitesmoke;
|
||||
color:#162938;
|
||||
font-weight: 600;
|
||||
padding: 0 35px 0 5px;
|
||||
|
||||
@ -208,7 +213,7 @@ header {
|
||||
|
||||
.remember-forgot {
|
||||
font-size: .9em;
|
||||
color: whitesmoke;
|
||||
color: #162938;
|
||||
font-weight: 500;
|
||||
margin: -15px 0 15px;
|
||||
display: flex;
|
||||
@ -217,7 +222,7 @@ header {
|
||||
}
|
||||
|
||||
.remember-forgot label input {
|
||||
accent-color: purple;
|
||||
accent-color: #162938;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
@ -244,7 +249,7 @@ header {
|
||||
|
||||
.login-register {
|
||||
font-size: .9em;
|
||||
color: #FBFCFC;
|
||||
color: #162938;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
margin: 25px 0 10px;
|
||||
@ -262,9 +267,11 @@ header {
|
||||
}
|
||||
|
||||
.presentation {
|
||||
text-align: center;
|
||||
margin-top: 80px;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 150px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.presentation h1 {
|
||||
@ -281,6 +288,56 @@ header {
|
||||
.presentation .slogan {
|
||||
font-size: 1.3em;
|
||||
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;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user