diff --git a/Apropos.css b/Apropos.css new file mode 100644 index 0000000..5f3919d --- /dev/null +++ b/Apropos.css @@ -0,0 +1,191 @@ +@media print { + /* styles pour l'impression */ + .burger-menu-container, nav , footer { + display: none; + } + .cv { + width: 100%; + font-size: 12pt; + } +} +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-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 */ +} +.style{ + font-style: italic; + font-size: 26px; + line-height: 25px; + padding-left: 30px; + border-left: 5px solid #ccc; + margin: 20px 0; + display: flex; + justify-content: center; +} + +.grid-container { + display: grid; + grid-template-columns: repeat(2, 1fr); +} + +.grid-item { + grid-column: span 1; +} + +img.grid-item { + width:95%; +} +h1{ margin: 20px 0; +display: flex; + justify-content: center; +} + +#topBtn { + display: none; /* masquer le bouton par défaut */ + position: fixed; /* positionner le bouton en haut à droite de la page */ + bottom: 10px; + right: 15px; + z-index: 99; /* placer le bouton au-dessus du contenu */ + font-size: 10px; + border: none; + outline: none; + background-color: #ff0000; /* couleur de fond */ + color: white; /* couleur du texte */ + cursor: pointer; + padding: 15px; + border-radius: 10px; /* arrondir les bords */ +} + +#topBtn:hover { + background-color: #555; /* changer la couleur de fond lorsque l'utilisateur passe la souris dessus */ +} + +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:link { + color: white; +} + +a:visited { + color: white; +} + +a:hover { + color: white; +} + +a:active { + color: white; +} + + + diff --git a/Apropos.html b/Apropos.html new file mode 100644 index 0000000..abaf125 --- /dev/null +++ b/Apropos.html @@ -0,0 +1,154 @@ + + + + + Page CV + + +
+
+
+
+
+ +
+
+ + +
+ +
+
+
Mikailcan OZCAN
+ + +

Compétences

+ +

Expérience professionnelle

+ +

Formation

+ +
+
+
Adam Combeau
+ +

Compétences

+ + +

Expérience professionnelle

+ +

Formation

+ +
+ + + + + + \ No newline at end of file diff --git a/Index.html b/Index.html new file mode 100644 index 0000000..cb46cb2 --- /dev/null +++ b/Index.html @@ -0,0 +1,91 @@ + + + + + Page d'acceuille Ozcom + + +
+
+
+
+
+ +
+
+ + + +
+ +
+
+

"Ils m'ont fait adorer leur passion..."

+

"Aujourd'hui, je suis à leur côté dans cette aventure palpitante." -Francis

+
+ image +

"Ils m'ont soutenu de tous leurs cœurs, ils ont toujours été derrière moi pour cette compétition dont j'ai toujours rêvé de gagner." -Amir le téméraire


+ "Après tant d'heures et d'assistance, je me dois de gagner cette compétition." -Matéo le joueur pro


+ "Toutes les personnes qui ont travaillé dur ne sont pas toujours récompensées, mais ce qui est sûr, c'est que tout ceux qui ont réussi ont travaillé dur." -Arnaud le Coach


+ "Je n'arrive pas à comprendre pourquoi ils mettent tant d'efforts dans tout ça, mais j'arrive à ressentir leur passion dans ce qu'ils font." -Alexeï au exo supplémentaire

+
+
+
+ +

Venez découvrir notre aventure palpitante qui ne peut que vous séduire... Bienvenue chez OZCOM

+

Bienvenue chez OZCOM

+

Laissez moi vous faire découvrir notre monde rempli de personnes passionnées par un sport aussi divertissant que compétitif.

+

vous etre curieux et vous voulez découvrire ce qu'est la motocrosse nous avons une seance de découverte offert

+

Nous avons plusieurs type d'abonnement pour votre choix a la hauteur de vos attentes et de vos envies

+

Pour les amateurs de compétition sachez que nous aussi nous en adorons ceci et que nous en organison souvent

+

pour ce avec un niveau avancer et qui veut venir nous montrer ces talents a ce sport sera toujours le bien venu

+
+ +
+

vous etes un expert en la matiere et vous n'avez plus le temp pour faire de la motocrosse? nous pouvons reprendre votre deux roues

+

vous cherchez un travaille dans certain domaines n'hesiter pas a postuler, nous avons surement des postes pour vous

+
+ + + + + + + \ No newline at end of file diff --git a/imgmotocrosse.jpg b/imgmotocrosse.jpg new file mode 100644 index 0000000..0daeba3 Binary files /dev/null and b/imgmotocrosse.jpg differ diff --git a/instagram-logo.png b/instagram-logo.png new file mode 100644 index 0000000..f56b64c Binary files /dev/null and b/instagram-logo.png differ