Petits tests hihi

2024-01-10 13:41:03 +01:00
parent 49cb9d4c47
commit f7d3007b0a
5 changed files with 161 additions and 0 deletions
--- a/burger.png
+++ b/burger.png
--- a/java.js
+++ b/java.js
@@ -0,0 +1,9 @@
+const burger = document.querySelector('.burger');
+const nav = document.querySelector('.nav-links');
+
+burger.addEventListener('click', () => {
+  nav.classList.toggle('nav-active');
+
+
+  burger.classList.toggle('toggle');
+});
--- a/logo.jpg
+++ b/logo.jpg
--- a/page_acceuil.css
+++ b/page_acceuil.css
@@ -0,0 +1,105 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+  }
+  
+  header {
+    background-color: #333;
+    color: #fff;
+    padding: 10px 0;
+  }
+  
+  nav ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  
+  nav ul li {
+    display: inline;
+    margin-right: 20px;
+  }
+  
+  nav ul li a {
+    color: #fff;
+    text-decoration: none;
+  }
+  
+  main {
+    padding: 20px;
+  }
+  
+  .banner {
+    text-align: center;
+    background-image: url('lien_vers_image_banner.jpg');
+    background-size: cover;
+    color: #fff;
+    padding: 100px 0;
+  }
+  
+  .banner h1 {
+    font-size: 3em;
+  }
+  
+  .banner p {
+    font-size: 1.5em;
+  }
+  
+  .btn {
+    display: inline-block;
+    padding: 10px 20px;
+    background-color: #FF0000;
+    color: #fff;
+    text-decoration: none;
+    border-radius: 5px;
+    margin-top: 20px;
+  }
+  
+  .btn:hover {
+    background-color: #990000;
+  }
+  
+  footer {
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    padding: 10px 0;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+  }
+
+  .burger {
+    display: none;
+    cursor: pointer;
+  }
+  
+  .line1, .line2, .line3 {
+    width: 25px;
+    height: 3px;
+    background-color: #333;
+    margin: 5px;
+    transition: all 0.3s ease;
+  }
+  
+  @media screen and (max-width: 768px) {
+    .nav-links {
+      display: none;
+      width: 100%;
+      text-align: center;
+      position: absolute;
+      background-color: #f9f9f9;
+      top: 80px;
+      left: 0;
+    }
+  
+    .nav-links li {
+      display: block;
+      margin-top: 10px;
+    }
+  
+    .burger {
+      display: block;
+    }
+  }
--- a/page_acceuil.html
+++ b/page_acceuil.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Pegasus Services</title>
+  <link rel="stylesheet" href="page_acceuil.css">
+</head>
+<body>
+  <header>
+    <div class="logo">
+      <img src="logo1.jpg" alt="Pegasus Services Logo">
+    </div>
+    <nav class="nav">
+      <ul class="nav-links">
+        <li><a href="#">Accueil</a></li>
+        <li><a href="#">Services</a></li>
+        <li><a href="#">Véhicules</a></li>
+        <li><a href="#">Contact</a></li>
+      </ul>
+      <div class="burger">
+        <div class="line1"></div>
+        <div class="line2"></div>
+        <div class="line3"></div>
+      </div>
+    </nav>
+  </header>
+  <main>
+    <section class="banner">
+      <h1>Bienvenue chez Pegasus Services</h1>
+      <p>La référence pour tous vos besoins en véhicules spéciaux.</p>
+      <a href="#" class="btn">Découvrez nos services</a>
+    </section>
+    
+    <section class="services">
+      <h2>Nos Services</h2>
+      <p>Découvrez nos services pour des véhicules aériens, maritimes et terrestres.</p>
+      <!-- Insérer des informations sur les services proposés -->
+    </section>
+  </main>
+  
+  <footer>
+    <p>&copy; 2024 Pegasus Services - Tous droits réservés</p>
+  </footer>
+  <script src="java.js"></script>
+</body>
+</html>