Upload files to ''
This commit is contained in:
OZCAN Mikailcan
parent
c7db12afbd
commit
ebf4dea0e3
121
notrehistoire.css
Normal file
121
notrehistoire.css
Normal file
@ -0,0 +1,121 @@
|
||||
body{
|
||||
background-color:#F2F3F3;
|
||||
background: background-size: 100%;
|
||||
font-size: 16px;
|
||||
margin : 0 ;
|
||||
}
|
||||
@media (min-width: 800px) {
|
||||
body {/* styles pour les écrans de largeur supérieure à 800px */
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
body {/* styles pour les écrans de largeur inférieure à 600px */
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
na
|
||||
header{
|
||||
background-color: #F2F3F3;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.burger-menu-button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.burger-menu {
|
||||
display: none; /* cacher le menu burger par défaut */
|
||||
}
|
||||
|
||||
|
||||
.burger-menu-button:hover .burger-menu {
|
||||
display: block; /* Afficher le menu burger lorsque l'utilisateur clique sur le bouton */
|
||||
}
|
||||
|
||||
nav {
|
||||
background-color: #f00202; /* Couleur de fond du menu */
|
||||
display: flex; /* Afficher les éléments du menu côte à côte */
|
||||
justify-content: space-between; /* Aligner les éléments du menu sur les deux côtés de la nav */
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style: none; /* Enlever les puces des éléments de la liste */
|
||||
margin: 5px; /* Enlever les marges */
|
||||
padding: 5px; /* Enlever les espacements */
|
||||
display: flex; /* Afficher les éléments de la liste côte à côte */
|
||||
|
||||
}
|
||||
|
||||
nav li {
|
||||
margin: 10px 10px; /* Ajouter une marge à gauche et à droite de chaque élément */
|
||||
|
||||
}
|
||||
|
||||
nav a {
|
||||
color: #fefefe; /* Couleur de text pour les liens */
|
||||
text-decoration: none; /* Enlever la surbrillance des liens */
|
||||
padding: 25px 100px; /* Ajouter un espacement intérieur aux liens */
|
||||
transition: background-color 0.2s ease-in; /* Ajouter une transition pour la couleur de fond */
|
||||
}
|
||||
|
||||
nav a:hover { /* Appliquer les styles à utiliser lorsque l'utilisateur survole un lien */
|
||||
background-color: #a30303; /* Couleur de fond lorsque l'utilisateur survole un lien */
|
||||
}
|
||||
|
||||
.container {
|
||||
grid-template-columns: 50% 50%;
|
||||
width: 50%;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.style{
|
||||
font-size: 28px;
|
||||
font-family: Times New Roman ,serif;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.limited-text {
|
||||
width: 80%; /* définir la largeur de la zone */
|
||||
margin: 0 auto; /* centrer la zone horizontalement */
|
||||
border-right: 1px solid black; /* ajouter une bordure droite */
|
||||
border-left: 1px solid black; /* ajouter une bordure gauche */
|
||||
padding: 10px; /* ajouter un espace entre les bordures et le contenu */
|
||||
}
|
||||
p{
|
||||
font-size : 22px;}
|
||||
|
||||
footer {
|
||||
background-color: #333;
|
||||
color: #fefefe;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
}
|
||||
footer > * {
|
||||
margin: 0 10px; /* ajoute un espacement de 10px entre les éléments */
|
||||
}
|
||||
.circle {
|
||||
border-radius: 12%; /* met en forme le div en cercle */
|
||||
width: 50px; /* largeur du cercle */
|
||||
height: 50px; /* hauteur du cercle */
|
||||
overflow: hidden; /* masque tout débordement */
|
||||
text-align: center; /* centre l'image horizontalement */
|
||||
line-height: 75px; /* centre l'image verticalement */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.circle img {
|
||||
max-width: 100%;/* redimensionne l'image pour qu'elle s'adapte au conteneur */
|
||||
}
|
||||
a[href*="Mentions_légales"] {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
color: #fefefe;
|
||||
}
|
||||
|
||||
74
notrehistoire.html
Normal file
74
notrehistoire.html
Normal file
@ -0,0 +1,74 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title> Notre Histoire </title>
|
||||
<link rel="icon" type="image/png" href="logo-ozcom.png">
|
||||
<link rel="stylesheet" href="notrehistoire.css">
|
||||
<div class="burger-menu-container">
|
||||
<div class="burger-menu-button">
|
||||
<div class="burger-menu-icon"></div>
|
||||
</div>
|
||||
<div class="burger-menu">
|
||||
<nav>
|
||||
<ul>
|
||||
<li><link rel="icon" type="image/png" href="logo-ozcom.png"></li>
|
||||
<li><a href="pageweb.html">Accueil</a></li>
|
||||
<li><a href="Apropos">À propos</a></li>
|
||||
<li><a href="notrehistoire.html">Histoire</a></li>
|
||||
<li><a href="pagecontacte.html">Contact</a></li>
|
||||
<li><a href="pagefaq.html">FAQ</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#">Accueil</a></li>
|
||||
<li> <a href="#">À propos</a></li>
|
||||
<li><a href="#">Histoire</a></li>
|
||||
<li><a href="page contacte.html">Contact</a></li>
|
||||
<li><a href="pagefaq.html">FAQ</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="limited-text">
|
||||
<p class="style"> "Je les ai vus fonder et agrandir cette entreprise. Je ne peux qu'être fier d'eux." -Al </p>
|
||||
<p>L'entreprise Ozcom a été fondée en 2010 par un groupe d'amis passionnés de motocross.
|
||||
Ils ont commencé avec une petite flotte de motocross louée à des amis et à des connaissances, mais rapidement, ils ont vu un marché plus large pour leur service.
|
||||
Ils ont alors décidé de créer une entreprise officielle et ont commencé à louer des motocross à des clients professionnels et amateurs.</p><br>
|
||||
<p>Au début, les fondateurs d'Ozcom ont dû surmonter de nombreux défis pour lancer leur entreprise.
|
||||
Ils ont dû trouver des investisseurs pour financer l'achat de la première flotte de motocross et pour couvrir les coûts de démarrage.
|
||||
Ils ont également dû trouver des terrains adaptés pour louer leurs motos, en négociant des accords avec les propriétaires de terrains privés et en obtenant les permis nécessaires pour utiliser les terrains publics.</p><br>
|
||||
<p>Au fil des années, Ozcom a grandi et a élargi sa flotte de motocross, ajoutant des modèles haut de gamme et des accessoires pour satisfaire les besoins de leurs clients.
|
||||
Ils ont également commencé à organiser des excursions de motocross pour les clients, offrant des itinéraires de conduite sur des terrains difficiles et des terrains de compétition.
|
||||
Puis avec de plus en plus de clients, il a fallu embaucher du personnel expérimenté pour gérer les locations et les excursions.
|
||||
Ils ont également commencé à organiser des événements de motocross, tels que des compétitions et des démonstrations, pour attirer de nouveaux clients et pour renforcer la communauté de motocross de la région. </p><br>
|
||||
<p>En 2012, Ozcom a ouvert son premier magasin physique qui propose également des pièces de rechange et de l'équipement de motocross.
|
||||
C'est devenu un lieu de rencontre pour les passionnés de motocross et le personnel est très compétent pour répondre à toutes les questions; ainsi qu'un endroit ou échanger des conseils et participer à des événements organisés par Ozcom.</p><br>
|
||||
<p>Aujourd'hui, Ozcom est devenu l'un des principaux loueurs de motocross de la région, avec une grande clientèle régulière et une forte présence en ligne.
|
||||
L'entreprise continue de se développer en proposant des services supplémentaires tels que la formation et les stages pour les débutants et les professionnels,
|
||||
et tout en s'adaptant aux besoins de ses clients, offre un service de qualité et une expérience de conduite inoubliable.
|
||||
Grâce à son engagement en faveur de la qualité et de l'expérience client, Ozcom est devenu un leader national incontournable dans le domaine de la location de motocross.</p><br>
|
||||
</div>
|
||||
<footer>
|
||||
<div class="circle">
|
||||
<a href="https://www.tiktok.com/"><img src="tiktok-logo.png" alt="tiktok"></a>
|
||||
</div>
|
||||
<div class="circle">
|
||||
<a href="https://twitter.com/"><img src="twitter-logo.png" alt="Twitter"></a>
|
||||
</div>
|
||||
<div class="circle">
|
||||
<a href="https://www.instagram.com/"><img src="instagram-logo.png" alt="Instagram"></a>
|
||||
</div>
|
||||
<div class="circle">
|
||||
<a href="https://www.youtube.com/"><img src="youtube-logo.png" alt="YouTube"></a>
|
||||
</div>
|
||||
<a href="https://fr.wikipedia.org/wiki/Mentions_l%C3%A9gales"> Mentions légales</a>
|
||||
</footer>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
31
scriptmb.js
Normal file
31
scriptmb.js
Normal file
@ -0,0 +1,31 @@
|
||||
// Récupération des éléments HTML
|
||||
const burgerButton = document.querySelector('.burger-menu-button');
|
||||
const burgerMenu = document.querySelector('.burger-menu');
|
||||
|
||||
// Détection de la taille de l'écran
|
||||
function checkScreenSize() {
|
||||
if (window.innerWidth <= 768) {
|
||||
// Afficher le bouton du menu burger pour les écrans de petite taille
|
||||
burgerButton.style.display = 'block';
|
||||
} else {
|
||||
// Cacher le bouton du menu burger pour les écrans de grande taille
|
||||
burgerButton.style.display = 'none';
|
||||
// Cacher également le menu burger pour les écrans de grande taille
|
||||
burgerMenu.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// Ajout d'un écouteur d'événement "resize" pour détecter les changements de taille de l'écran
|
||||
window.addEventListener('resize', checkScreenSize);
|
||||
|
||||
// Ajout d'un écouteur d'événement "click" sur le bouton
|
||||
burgerButton.addEventListener('click', function() {
|
||||
// Inversion de la propriété "display" sur le menu burger
|
||||
if (burgerMenu.style.display === 'block') {
|
||||
burgerMenu.style.display = 'none';
|
||||
} else {
|
||||
burgerMenu.style.display = 'block';
|
||||
}
|
||||
});
|
||||
// Initialisation de la fonction pour détecter la taille de l'écran lors du chargement de la page
|
||||
checkScreenSize();
|
||||
136
stylespgct.css
Normal file
136
stylespgct.css
Normal file
@ -0,0 +1,136 @@
|
||||
@media (min-width: 800px) {
|
||||
body {/* styles pour les écrans de largeur supérieure à 800px */
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
body {/* styles pour les écrans de largeur inférieure à 600px */
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
na
|
||||
header{
|
||||
background-color: #F2F3F3;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.burger-menu-container {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.burger-menu-button {
|
||||
display: none; /* cacher le bouton par défaut */
|
||||
padding: 0.5em 1em;
|
||||
background: #333;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.burger-menu {
|
||||
display: none; /* cacher le menu burger par défaut */
|
||||
background: #fff;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.burger-menu-icon {
|
||||
width: 1.5em;
|
||||
height: 0.25em;
|
||||
background: #fff;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
/* Afficher le bouton et le menu burger pour les écrans de petite taille */
|
||||
@media (max-width: 768px) {
|
||||
.burger-menu-button {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
nav {
|
||||
background-color: #f00202; /* Couleur de fond du menu */
|
||||
display: flex; /* Afficher les éléments du menu côte à côte */
|
||||
justify-content: space-between; /* Aligner les éléments du menu sur les deux côtés de la nav */
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style: none; /* Enlever les puces des éléments de la liste */
|
||||
margin: 5px; /* Enlever les marges */
|
||||
padding: 5px; /* Enlever les espacements */
|
||||
display: flex; /* Afficher les éléments de la liste côte à côte */
|
||||
|
||||
}
|
||||
|
||||
nav li {
|
||||
margin: 10px 10px; /* Ajouter une marge à gauche et à droite de chaque élément */
|
||||
|
||||
}
|
||||
|
||||
nav a {
|
||||
color: #fefefe; /* Couleur de text pour les liens */
|
||||
text-decoration: none; /* Enlever la surbrillance des liens */
|
||||
padding: 25px 100px; /* Ajouter un espacement intérieur aux liens */
|
||||
transition: background-color 0.2s ease-in; /* Ajouter une transition pour la couleur de fond */
|
||||
}
|
||||
|
||||
nav a:hover { /* Appliquer les styles à utiliser lorsque l'utilisateur survole un lien */
|
||||
background-color: #a30303; /* Couleur de fond lorsque l'utilisateur survole un lien */
|
||||
}
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f2f2f2;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
form {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 0px 10px #999;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
input[type="text"], input[type="email"], textarea {
|
||||
padding: 10px;
|
||||
font-size: 16px;
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: none;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
background-color: #4CAF50;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
padding: 12px 20px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type="submit"]:hover {
|
||||
background-color: #3e8e41;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user