diff --git a/CV_Lenny.html b/CV_Lenny.html new file mode 100644 index 0000000..0758454 --- /dev/null +++ b/CV_Lenny.html @@ -0,0 +1,106 @@ + + + + + + CV - FOULOU Lenny + + + + + +
+

FOULOU Lenny

+

Formation

+

+33 7 69 20 13 37

+

lenny.foulou@etu.u-pec.fr

+

27 rue des Chanois, 77000 Livry sur Seine

+ +
+ +
+

Formation

+
+

2023 - 2024 : Première année de BUT Informatique

+

IUT de Fontainebleau

+
+
+

2023 : Baccalauréat Général (mention assez bien)

+

Spécialité: + - Mathématiques + - Physique-Chimie + - Sciences de la vie et de la Terre +

+

Lycée Simone Signoret, 77000 Vaux-le-Pénil

+
+
+ +
+

Loisirs

+
+

Basket : Pratique du Basket depuis 2019 club de Vaux-le-Pénil et compétition

+

Football : Pratique du football en club de 2012 à 2013, toujours passionné par ce sport

+
+
+ +
+

Langues

+

- Français (langue maternelle)

+

- Anglais (niveau intermédiaire)

+

- Espagnol (niveau intermédiaire)

+
+ +
+

Compétences Informatiques

+
+

C89 : Bonne maîtrise (réalisation du jeu Snake)

+

Programmation Web HTML 5/CSS : Notions (création d'un site de location)

+

Base de données Oracle SQL : Bonne maîtrise

+

UML: Bonne maîtrise

+

Administration et réseaux Bash : Bonne maîtrise (installation d'un poste de travail)

+
+
+ +
+

Expérience Professionnelle

+
+

Été 2023 : Manutentionnaire à la poste, à Orly et préparateur de commande en interim.

+

2022 : Arbitre de basketball à Vaux le Pénil, avoir des responsabilités et prendre des décisions rapidement

+

2020 : Stage d'observation à la crèche de l'hôpital, première impression du monde professionnel

+
+
+ + + + + \ No newline at end of file diff --git a/Pegasus-Logo.webp b/Pegasus-Logo.webp new file mode 100644 index 0000000..5c07def Binary files /dev/null and b/Pegasus-Logo.webp differ diff --git a/black.jpg b/black.jpg new file mode 100644 index 0000000..36a4b58 Binary files /dev/null and b/black.jpg differ diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..8124fa8 --- /dev/null +++ b/contact.html @@ -0,0 +1,145 @@ + + + + + + + + + Pegasus + + + + + + + +
+
+ +
+ Menu Burger +
+ + + +
+ Acceuil + Réservation + Nos équipements + Contact + FAQ +
+
+ +
+
+

Nous Contacter

+

Si vous avez des questions, des commentaires ou si vous avez simplement besoin de plus d'informations, n'hésitez pas à nous contacter. Nous sommes là pour vous aider!

+
+
+
+
+ +
+

L'équipe Pegasus

+

Permettez-nous de vous présenter les personnes derrière Pegasus, notre équipe passionnée qui travaille pour rendre vos aventures exceptionnelles :

+
+ + +
+ Créateur 1 +
+

Lenny FOULOU

+

PDG et Chef de projet de Pegasus

+

6 mois d'expérience professionnelle

+ Voir le CV + +
+
+ +
+ Créateur 2 +
+

Nom du Créateur 2

+

Description du Créateur 2...

+ Voir le CV + +
+
+
+ Créateur 3 +
+

Nom du Créateur 3

+

Description du Créateur 3...

+ Voir le CV + +
+
+ +
+
+
+

Qui sommes-nous ?

+

Bienvenue chez Pegasus, votre destination privilégiée pour une expérience de loisirs exceptionnelle ! Fondée en 2024 par Lenny FOULOU, Khalid CHENOUNA et Yanis RECHACHI, notre entreprise est dédiée à la location d'équipements de loisirs pour répondre à toutes vos envies d'évasion. + + Chez Pegasus, nous croyons en l'importance de créer des moments mémorables et de découvrir de nouvelles perspectives. Notre vaste sélection d'équipements de qualité vous offre la liberté de vivre pleinement chaque aventure, que ce soit en plein air, à la plage, ou lors d'événements spéciaux. + + Explorez notre catalogue varié comprenant des kayaks, des vélos tout-terrain, des tentes spacieuses, des barbecues portables, des équipements de camping dernier cri et bien plus encore. Nous sommes fiers de vous proposer des équipements constamment mis à jour, alliant innovation et praticité pour une expérience de location exceptionnelle. + + Chez Pegasus, votre satisfaction est notre priorité absolue. Notre équipe dévouée est là pour vous conseiller dans le choix des équipements adaptés à vos besoins et pour vous garantir un service personnalisé. Nous nous engageons à vous fournir des équipements en parfait état, entretenus avec soin, pour que vos moments de loisirs soient synonymes de plaisir et de tranquillité. + + Découvrez les tarifs compétitifs de Pegasus, conçus pour s'adapter à tous les budgets, et profitez de nos options de location flexibles. Pegasus, c'est bien plus qu'une entreprise de location : c'est votre partenaire pour des expériences uniques et des souvenirs mémorables. + + Laissez-vous emporter par l'esprit Pegasus et préparez-vous à vivre des aventures extraordinaires. Nous sommes impatients de vous accompagner dans chaque escapade, à la découverte de nouveaux horizons et de moments exceptionnels.

+ +
+ + + + + + diff --git a/entreprise.png b/entreprise.png new file mode 100644 index 0000000..e33102f Binary files /dev/null and b/entreprise.png differ diff --git a/equipement.html b/equipement.html new file mode 100644 index 0000000..e69de29 diff --git a/facebook.png b/facebook.png new file mode 100644 index 0000000..b107b2c Binary files /dev/null and b/facebook.png differ diff --git a/faq.html b/faq.html new file mode 100644 index 0000000..4103531 --- /dev/null +++ b/faq.html @@ -0,0 +1,123 @@ + + + + + + + + + Pegasus + + + + + + + +
+
+ +
+ Menu Burger +
+ + + +
+ Acceuil + Réservation + Nos équipements + Contact + FAQ +
+
+
+
+

Foire Aux Questions

+ +
+

Q1 : Quels types d'équipements de loisirs proposez-vous à la location?

+

Réponse : Nous proposons une large gamme d'équipements de loisirs, notamment des vélos électriques, des kayaks, des tentes de camping, des planches de surf, des motos-neiges, des montgolfières, et bien plus encore.

+
+ +
+

Q2 : Comment puis-je réserver un équipement pour mes activités de loisirs? +

+

Réponse : La réservation est simple ! Vous pouvez le faire en ligne sur notre site Web convivial ou en nous appelant directement. Choisissez votre équipement, indiquez la date et la durée de location, et c'est tout !

+
+
+

Q3 : Quelles sont les options de livraison disponibles pour l'équipement loué? +

+

Réponse : Nous offrons des options de livraison pratiques à votre domicile, sur votre lieu de vacances, ou même sur le site de votre aventure. Des frais de livraison peuvent s'appliquer en fonction de la distance.

+
+
+

Q4 : Y a-t-il des conditions d'âge ou de qualification pour la location de certains équipements? +

+

Réponse : Oui, certaines activités peuvent avoir des exigences d'âge ou de compétence. Cependant, la plupart de nos équipements sont adaptés à tous les niveaux, et nos équipes sont là pour vous fournir les informations nécessaires.

+
+
+

Q5 : Comment fonctionne le processus de retour de l'équipement?

+

Réponse : Le retour de l'équipement est tout aussi simple que la réservation. Il vous suffit de ramener l'équipement à notre point de location désigné à la fin de la période de location convenue.

+
+
+

Q6 : Proposez-vous des assurances pour les équipements loués?

+

Réponse : Oui, nous proposons des options d'assurance pour la plupart de nos équipements. Cela vous offre une tranquillité d'esprit supplémentaire en cas d'éventuels dommages ou pertes pendant la période de location.

+
+
+

Q7 : Puis-je modifier ma réservation une fois qu'elle est confirmée?

+

Réponse : Oui, vous pouvez modifier votre réservation sous réserve de disponibilité. Nous vous recommandons de nous contacter dès que possible pour apporter des changements.

+
+
+

Q8 : Quels sont vos tarifs de location?

+

Réponse : Nos tarifs de location varient en fonction de l'équipement choisi, de la durée de la location et des options supplémentaires. Consultez notre site Web ou contactez-nous directement pour obtenir des informations détaillées sur les tarifs.

+
+ +
+
+ + + + + \ No newline at end of file diff --git a/index.html b/index.html index e0f4e3c..3b01a16 100644 --- a/index.html +++ b/index.html @@ -3,85 +3,48 @@ + + + Pegasus - - - + + +
- + +
+ Menu Burger +
-
-
- - - -
-

Connexion

-
-
- - - -
-
- - - -
-
- - Mot de passe oublié ? -
- - -
+ - -
-

S'inscrire

-
-
- - - - - -
-
- - - -
-
- - - -
-
- -
- - -
+ +
+ Acceuil + Réservation + Nos équipements + Contact + FAQ
-
+ +
+ Votre Logo +

Bienvenue chez Pegasus

Explorez vos vacances avec Pegasus, votre partenaire idéal pour la location d'équipement de loisir. @@ -98,34 +61,37 @@

Vivez l'aventure, louez avec Pegasus!

-

Nos Photos

+

Nos meilleures offres

Montgolfière
-

Commentaire 1

-

Ceci est le commentaire pour la photo de la montgolfière.

+

Ciel

+

Envolez-vous vers l'extraordinaire avec notre montgolfière de rêve ! Profitez d'une vue panoramique à couper le souffle, glissant doucement dans le ciel. Laissez-vous emporter par la magie des hauteurs et créez des souvenirs uniques en volant au gré des vents. Offrez-vous une aventure céleste inoubliable avec notre montgolfière !

Jet Ski
-

Commentaire 2

-

Ceci est le commentaire pour la photo du jet ski.

+

Mer

+

Découvrez l'ultime sensation de liberté aquatique avec notre jet-ski ! Puissant, agile et conçu pour l'aventure, il offre des moments inoubliables sur l'eau. Embarquez dès maintenant pour des escapades palpitantes et des souvenirs pleins de vitesse et de plaisir. Le jet-ski, c'est la promesse d'une expérience aquatique exceptionnelle ! +

Motoneige
-

Commentaire 3

-

Ceci est le commentaire pour la photo de la motoneige.

+

Neige

+

+ Vibrez au rythme de l'hiver avec notre moto-neige ultime ! Conçue pour la puissance et l'adrénaline, elle vous propulse à travers les paysages enneigés comme jamais. Explorez des terrains gelés avec confiance et ressentez l'excitation glacée de la vitesse. Préparez-vous à une aventure hivernale mémorable et domptez les étendues enneigées avec notre moto-neige haute performance !

Buggy
-

Commentaire 4

-

Ceci est le commentaire pour la photo du buggy.

+

Désert

+

+ Plongez au cœur du désert avec notre buggy d'exception ! Conçu pour la puissance et l'aventure, il vous propulse à travers les dunes comme jamais auparavant. Explorez les paysages arides en toute confiance, ressentant l'excitation palpitante de la vitesse. Préparez-vous à une aventure désertique inoubliable et maîtrisez les étendues de sable avec notre buggy tout-terrain haute performance

@@ -133,5 +99,43 @@ - +
+
+
+

Mentions légales

+

Mentions légales

+
+
+

Contactez-nous

+

Email: contact@pegasus.com

+

Téléphone: +123 456 789

+
+ + +
+

Liens rapides

+ +
+
+
+

© 2024 Pegasus. Tous droits réservés.

+

Créez par Lenny FOULOU, Khalid CHENOUNA et Yanis RECHACHI

+
+
+ + + + + \ No newline at end of file diff --git a/instagram.png b/instagram.png new file mode 100644 index 0000000..e4b1af1 Binary files /dev/null and b/instagram.png differ diff --git a/lenny.jpg b/lenny.jpg new file mode 100644 index 0000000..77d9368 Binary files /dev/null and b/lenny.jpg differ diff --git a/lenny1.jpg b/lenny1.jpg new file mode 100644 index 0000000..37d125e Binary files /dev/null and b/lenny1.jpg differ diff --git a/logo.jpg b/logo.jpg index 95114b9..8b56e44 100644 Binary files a/logo.jpg and b/logo.jpg differ diff --git a/logo1.png b/logo1.png new file mode 100644 index 0000000..a21d51c Binary files /dev/null and b/logo1.png differ diff --git a/logo2.png b/logo2.png new file mode 100644 index 0000000..d9eb58c Binary files /dev/null and b/logo2.png differ diff --git a/menu.png b/menu.png new file mode 100644 index 0000000..569ab2e Binary files /dev/null and b/menu.png differ diff --git a/nul.jpg b/nul.jpg new file mode 100644 index 0000000..ec7d93c Binary files /dev/null and b/nul.jpg differ diff --git a/pegasus.zip b/pegasus.zip new file mode 100644 index 0000000..96d0b0f Binary files /dev/null and b/pegasus.zip differ diff --git a/perso.png b/perso.png new file mode 100644 index 0000000..14e6919 Binary files /dev/null and b/perso.png differ diff --git a/réservation.html b/réservation.html new file mode 100644 index 0000000..bea1c84 --- /dev/null +++ b/réservation.html @@ -0,0 +1,113 @@ + + + + + + Réservation - Pegasus + + + + +
+
+ + + +
+
+
+

Réservez votre véhicule

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+
+
+
+
+
+

À propos de nous

+

Explorez vos vacances avec Pegasus, votre partenaire idéal pour la location d'équipement de loisir.

+
+
+

Contactez-nous

+

Email: contact@pegasus.com

+

Téléphone: +123 456 789

+ +
+
+

Liens rapides

+ +
+
+
+

© 2024 Pegasus. Tous droits réservés.

+

Créez par Lenny FOULOU, Khalid CHENOUNA et Yanis RECHACHI

+ +
+
+ + + + + diff --git a/script.js b/script.js index 6a91a8e..ea9d1e8 100644 --- a/script.js +++ b/script.js @@ -1,37 +1,41 @@ -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'); - } - - function closeLoginForm(event) { - event.preventDefault(); - event.stopPropagation(); - wrapper.classList.remove('active-popup'); - } - function hideLoginForm() { - 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'); - }); - closeLoginForm(); - - btnPopup.addEventListener('click', openLoginForm); - iconClose.addEventListener('click', closeLoginForm); -}); - + + var mybutton = document.getElementById("backToTopBtn"); + + // Afficher le bouton lorsqu'on descend en dessous de 20 pixels depuis le haut de la page + window.onscroll = function () { + scrollFunction(); + }; + + function scrollFunction() { + if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { + mybutton.style.display = "block"; + } else { + mybutton.style.display = "none"; + } + } + + + mybutton.onclick = function () { + document.body.scrollTop = 0; + document.documentElement.scrollTop = 0; + }; + + function printCV(cvUrl) { + var printWindow = window.open(cvUrl, '_blank'); + + printWindow.onload = function () { + printWindow.print(); + printWindow.onafterprint = function () { + printWindow.close(); + }; + }; + } + + document.addEventListener('DOMContentLoaded', function () { + const menuToggle = document.querySelector('.menu-toggle'); + const mobileMenu = document.querySelector('.mobile-menu'); + + menuToggle.addEventListener('click', function () { + mobileMenu.style.display = mobileMenu.style.display === 'none' ? 'flex' : 'none'; + }); + }); diff --git a/style.css b/style.css index 79255b8..d490dca 100644 --- a/style.css +++ b/style.css @@ -3,11 +3,10 @@ padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; - -} - -body { - + + } + + body { justify-content: center; align-items: center; min-height: 100vh; @@ -15,37 +14,42 @@ body { background-size: cover; background-position: center; margin: 0; -} - - -header { + } + header { + + margin-top: -15px; + height: 100px; position: fixed; background: #162938; top: 0; - left: 0; + left: -40; width: 100%; - padding: 20px 100px; + padding: 10px 5px; display: flex; justify-content: space-between; align-items: center; z-index: 99; -} - -.logo { + } + .logo { + font-size: 2em; color: #fff; user-select: none; -} + margin-right: auto; + margin-left: 20px; + } -.navigation a { + .navigation a { + position: relative; font-size: 1.1em; color: #fff; text-decoration: none; font-weight: 500; - margin-left: 40px; -} -.navigation a::after { + margin-left: 30px; + margin-right: 50px; + } + .navigation a::after { content: ''; position: absolute; left: 0; @@ -57,303 +61,70 @@ header { transform-origin: right; transform: scaleX(0); transition: transform .5s; - -} -.navigation a:hover::after { + } + + .navigation a:hover::after { transform-origin: left; transform: scaleX(1); - -} - -.navigation .btnLogin-popup { - width: 130px; - height: 50px; - background: transparent; - border: 2px solid #fff; - outline: none; - border-radius: 6px; - cursor: pointer; - font-size: 1.1em; - color: #fff; - font-weight: 500; - margin-left: 40px; - transition: .5s; -} - -.navigation .btnLogin-popup:hover { - background: #fff; - color: #162938; - -} - -.wrapper { - position: fixed; - width: 100%; - max-width: 400px; - height: 440px; - background: transparent; - border: 2px solid rgba(255, 255, 255, .5); - border-radius: 20px; - backdrop-filter: blur(20px); - box-shadow: 0 0 30px rgba(0, 0, 0, .5); - display: flex; - justify-content: center; - align-items: center; - overflow: hidden; - transform: scale(0); - transition: transform .5s ease, height .2s ease; - top: 50; - left: 50%; - transform: translateX(-50%); -} - -@media only screen and (max-width: 768px) { - .wrapper { - max-width: none; } - - header { - padding: 20px 20px; - } - .navigation { - flex-direction: column; - align-items: flex-start; - position: absolute; - top: 80px; - left: 0; - background: #162938; - width: 100%; - display: none; - } - .navigation.active { - display: flex; - } - .navigation a { - margin: 10px 0; - font-size: 1.2em; - } -} - - - -.wrapper.active-popup { - transform: scale(1); - -} - -.wrapper.active { - height: 520px; - -} - -.wrapper .form-box { - width: 100%; - padding: 40px; -} - -.wrapper .form-box.login { - transition: transform .18s ease; - transform: translateX(0); -} - -.wrapper.active .form-box.login { - transition: none; - transform: translateX(-400px); -} - -.wrapper .form-box.register { - position: absolute; - transition: none; - transform: translateX(400px); -} - -.wrapper.active .form-box.register { - transition: transform .18s ease; - transform: translateX(0); -} - -.wrapper .icon-close { - position: absolute; - top: 0; - right: 0; - width: 45px; - height: 45px; - background: #162938; - font-size: 2em; - color: #fff; - display: flex; - justify-content: center; - align-items: center; - border-bottom-left-radius: 20px; - cursor: pointer; - z-index: 1; - -} - -.form-box h2 { - font-size: 2em; - color: #162938; - text-align: center; -} - -.input-box { - position: relative; - width: 100%; - height: 50px; - border-bottom: 2px solid #162938; - margin: 30px 0; -} - -.input-box label { - position: absolute; - top: 50%; - left: 5px; - transform: translateY(-50%); - font-size: 1em; - color: #162938; - font-weight: 500; - pointer-events: none; - transition: .5s; -} - -.input-box input:focus~label, -.input-box input:valid~label { - top: -5px; -} - - -.input-box input { - width: 100%; - height: 100%; - background: transparent; - border: none; - outline: none; - font-size: 1em; - color:#162938; - font-weight: 600; - padding: 0 35px 0 5px; - -} - -.input-box .icon { - position: absolute; - right: 8px; - font-size: 1.2em; - line-height: 57px; -} - -.remember-forgot { - font-size: .9em; - color: #162938; - font-weight: 500; - margin: -15px 0 15px; - display: flex; - justify-content: space-between; - -} - -.remember-forgot label input { - accent-color: #162938; - margin-right: 3px; -} - -.remember-forgot a { - color: #162938; - text-decoration: none; -} - -.remember-forgot a:hover { - text-decoration:underline -} - -.btn { - width: 100%; - height: 45px; - background: #162938; - border: none; - outline: none; - border-radius: 6px; - cursor: pointer; - font-size: 1em; - color: #fff; -} - -.login-register { - font-size: .9em; - color: #162938; - text-align: center; - font-weight: 500; - margin: 25px 0 10px; -} - -.login-register p a { - color: #162938; - text-decoration: none; - font-weight: 600; -} - -.login-register p a:hover { - text-decoration: underline; - -} - - -.presentation { + + .presentation { + display: flex; flex-direction: column; align-items: center; margin-top: 150px; color: black; -} - -.presentation h1 { + } + .presentation h1 { + font-size: 100px; margin-bottom: 20px; text-align: center; -} - -.presentation p { + } + .presentation p { + font-size: 1.1em; margin-bottom: 15px; -} - -.presentation .slogan { + } + .presentation .slogan { + font-size: 1.3em; font-weight: bold; - color: #08121a; -} - -.gallery { + color: #08121a; + } + .gallery { + text-align: center; margin-top: 50px; -} - -.photo-grid { + } + .photo-grid { + display: flex; flex-wrap: wrap; justify-content: space-around; -} - -.row { + } + .row { + display: flex; flex-wrap: wrap; gap: 20px; -} - -.photo { + } + .photo { + position: relative; - width: calc(50% - 10px); /* Adjust the width as needed */ + width: calc(50% - 10px); margin-bottom: 20px; -} - -.photo img { + } + .photo img { + width: 100%; height: auto; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -} - -.comment { + } + .comment { + position: absolute; bottom: 0; left: 0; @@ -363,21 +134,262 @@ header { border-radius: 0 0 10px 10px; box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); text-align: left; -} - -.comment h3 { + } + .comment h3 { + margin-bottom: 5px; color: #162938; font-size: 1.2em; -} - -.comment p { + } + .comment p { + margin: 0; -} - - -.header-placeholder { - height: 80px; + } + .header-placeholder { + + height: 80px; width: 100%; - display: block; -} \ No newline at end of file + display: block; + } + + footer { + background: #162938; + color: #fff; + padding: 30px 0; + text-align: center; + } + + .footer-content { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + } + + .footer-section { + flex: 1; + margin: 0 15px; + } + + .footer-section h2 { + color: #fff; + } + + .footer-section p { + margin-top: 15px; + color: #ddd; + } + + .links ul { + list-style: none; + padding: 0; + } + + .links li { + margin-top: 10px; + } + + .footer-bottom { + padding-top: 15px; + border-top: 1px solid #fff; + } + + .footer-bottom p { + margin: 0; + font-size: 14px; + } + + .faq-container { + max-width: 800px; + margin: 0 auto; + padding: 20px; + } + + .faq-section { + text-align: left; + } + + .faq-item { + margin-bottom: 20px; + } + + .faq-item h3 { + font-size: 1.2em; + color: #162938; + } + + .faq-item p { + font-size: 1em; + color: #555; + } + + .reservation { + background-color: #fff; + padding: 50px 20px; + } + + .reservation-container { + max-width: 800px; + margin: 0 auto; + } + + h1 { + text-align: center; + color: #162938; + } + + form { + display: flex; + flex-direction: column; + } + + .form-group { + margin-bottom: 20px; + } + + label { + font-weight: bold; + margin-bottom: 5px; + color: #162938; + } + + select, input, textarea { + width: 100%; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + } + + button { + background-color: #162938; + color: #fff; + border: none; + padding: 10px 20px; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; + } + + button:hover { + background-color: #08121a; + } + + .about-us-container { + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + margin: 50px; + } + + .creator-profile { + width: 100%; + margin-bottom: 20px; + display: flex; + } + + .creator-profile img { + width: 150px; + height: auto; + border-radius: 50%; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + } + + .profile-description { + flex: 1; + padding: 0 20px; + } + + .creator-profile h3, + .creator-profile p { + margin-bottom: 10px; + } + + .section-title { + text-align: center; + color: #162938; + } + + .section-description { + text-align: center; + margin-top: 20px; + } + .cv-button { + display: inline-block; + padding: 8px 16px; + background-color: #162938; + color: #fff; + text-decoration: none; + border-radius: 4px; + transition: background-color 0.3s; + } + + .cv-button:hover { + background-color: #162938; + } + + #backToTopBtn { + display: none; + position: fixed; + bottom: 20px; + right: 20px; + background-color: #162938; + color: #fff; + border: none; + border-radius: 5px; + padding: 10px; + cursor: pointer; + font-size: 16px; + } + + #backToTopBtn:hover { + background-color: #08121a; + } + + @keyframes fadeIn { + from { + opacity: 0.4; + } + to { + opacity: 1; + } + } + + + + .menu-toggle { + display: none; + cursor: pointer; + position: fixed; + top: 20px; + right: 20px; + } + + .menu-toggle img { + width: 30px; + } + + .mobile-menu { + display: none; + position: absolute; + top: 60px; + right: 0; + left: 0; + background-color: #333; + } + + .mobile-menu a { + padding: 15px; + text-align: center; + color: #fff; + text-decoration: none; + } + + @media screen and (max-width: 600px) { + .navigation { + display: none; + } + + .menu-toggle { + display: block; + } + } + diff --git a/twitter.png b/twitter.png new file mode 100644 index 0000000..432a3aa Binary files /dev/null and b/twitter.png differ diff --git a/white.jpg b/white.jpg new file mode 100644 index 0000000..0af5e3d Binary files /dev/null and b/white.jpg differ