generated from Templates_CodeFirst/templateHtmlCss
parent
7f2ae8a512
commit
cd6f8eaf0a
@ -0,0 +1,77 @@
|
||||
<!doctype html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>À propos - Portfolio de Yahya MABROUK</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="navbar">
|
||||
<div class="nom">
|
||||
<h1>Yahya MABROUK</h1>
|
||||
<p>Étudiant en BUT1 Informatique</p>
|
||||
</div>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">Accueil</a></li>
|
||||
<li><a href="a-propos.html" class="active">À propos</a></li>
|
||||
<li><a href="competences.html">Compétences</a></li>
|
||||
<li><a href="realisations.html">Réalisations</a></li>
|
||||
<li><a href="interets.html">Centres d'intérêt</a></li>
|
||||
<li><a href="contact.html">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section id="a-propos" class="section">
|
||||
<h2 class="titre-section">À propos de moi</h2>
|
||||
|
||||
<div class="contenu-apropos">
|
||||
<div class="texte-apropos">
|
||||
<h3>Qui suis-je?</h3>
|
||||
<p>
|
||||
Bonjour, je m'appelle Yahya MABROUK, étudiant marocain
|
||||
en première année du BUT Informatique à l'IUT de
|
||||
Clermont Auvergne. Passionné par l'économie, domaine
|
||||
dans lequel j'ai obtenu mon baccalauréat en 2024, j'ai
|
||||
ensuite choisi de me réorienter vers l'informatique en
|
||||
France afin de suivre ma deuxième passion.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Grâce à ce changement, j'ai développé une grande
|
||||
capacité d'adaptation, en passant d'un domaine à un
|
||||
autre, dans un nouvel environnement, et en apprenant
|
||||
rapidement les technologies du secteur.
|
||||
</p>
|
||||
|
||||
<h3>Mon parcours académique</h3>
|
||||
<div class="parcours">
|
||||
<div class="etape">
|
||||
<h4>2024 - 2027</h4>
|
||||
<p>BUT Informatique - IUT Clermont Ferrand</p>
|
||||
</div>
|
||||
<div class="etape">
|
||||
<h4>2023 - 2024</h4>
|
||||
<p>Baccalauréat en sciences économiques</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="copyright">
|
||||
<p>© 2025 Yahya MABROUK. Tous droits réservés.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,91 @@
|
||||
<!doctype html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Compétences - Portfolio de Yahya MABROUK</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="navbar">
|
||||
<div class="nom">
|
||||
<h1>Yahya MABROUK</h1>
|
||||
<p>Étudiant en BUT1 Informatique</p>
|
||||
</div>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">Accueil</a></li>
|
||||
<li><a href="a-propos.html">À propos</a></li>
|
||||
<li><a href="competences.html" class="active">Compétences</a></li>
|
||||
<li><a href="realisations.html">Réalisations</a></li>
|
||||
<li><a href="interets.html">Centres d'intérêt</a></li>
|
||||
<li><a href="contact.html">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section id="competences" class="section">
|
||||
<h2 class="titre-section">Mes compétences</h2>
|
||||
|
||||
<div class="intro">
|
||||
<p>
|
||||
En tant qu'étudiant en informatique, j'ai développé diverses compétences
|
||||
techniques et personnelles qui me permettent d'aborder différents types de projets.
|
||||
Voici un aperçu de mes principales compétences.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="competences">
|
||||
<div class="categorie">
|
||||
<h4>Langages de programmation</h4>
|
||||
<ul>
|
||||
<li>HTML/CSS</li>
|
||||
<li>SQL</li>
|
||||
<li>C</li>
|
||||
<li>C++</li>
|
||||
<li>C#</li>
|
||||
<li>BASH</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="categorie">
|
||||
<h4>Outils & Technologies</h4>
|
||||
<ul>
|
||||
<li>Git/GitHub</li>
|
||||
<li>Canva</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="categorie">
|
||||
<h4>Compétences personnelles</h4>
|
||||
<ul>
|
||||
<li>Capacité d'adaptation</li>
|
||||
<li>Sens de l'organisation</li>
|
||||
<li>Force de proposition</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="categorie">
|
||||
<h4>Langues</h4>
|
||||
<ul>
|
||||
<li>Arabe</li>
|
||||
<li>Français</li>
|
||||
<li>Anglais</li>
|
||||
<li>Amazigh</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="copyright">
|
||||
<p>© 2025 Yahya MABROUK. Tous droits réservés.</p>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,88 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Contact - Portfolio de Yahya MABROUK</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="navbar">
|
||||
<div class="nom">
|
||||
<h1>Yahya MABROUK</h1>
|
||||
<p>Étudiant en BUT1 Informatique</p>
|
||||
</div>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">Accueil</a></li>
|
||||
<li><a href="a-propos.html">À propos</a></li>
|
||||
<li><a href="competences.html">Compétences</a></li>
|
||||
<li><a href="realisations.html">Réalisations</a></li>
|
||||
<li><a href="interets.html">Centres d'intérêt</a></li>
|
||||
<li><a href="contact.html" class="active">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="section" id="contact">
|
||||
<h2 class="titre-section">Contact</h2>
|
||||
<div class="contenu-contact">
|
||||
<div class="coordonnees">
|
||||
<h3>Mes coordonnées</h3>
|
||||
<p>N'hésitez pas à me contacter par l'un des moyens suivants ou en utilisant le formulaire ci-dessous.</p>
|
||||
|
||||
<div class="info-contact">
|
||||
<p><i class="fas fa-envelope"></i> <strong>Email :</strong> <a href="mailto:yahyamabrouk2006@gmail.com">yahyamabrouk2006@gmail.com</a></p>
|
||||
<p><i class="fas fa-phone"></i> <strong>Téléphone :</strong> 0699760396</p>
|
||||
<p><i class="fas fa-map-marker-alt"></i> <strong>Adresse :</strong> 35 rue roche genes Clermont-Ferrand, France</p>
|
||||
</div>
|
||||
|
||||
<div class="reseaux-sociaux">
|
||||
<h3>Réseaux sociaux</h3>
|
||||
<p>Retrouvez-moi également sur les plateformes suivantes :</p>
|
||||
<ul>
|
||||
<li><a href="https://www.linkedin.com/in/yahya-mabrouk"><i class="fab fa-linkedin"></i> LinkedIn</a></li>
|
||||
<li><a href="https://github.com/yahya-mabrouk1"><i class="fab fa-github"></i> GitHub</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="formulaire-contact">
|
||||
<h3>Envoyez-moi un message</h3>
|
||||
<form id="contact-form">
|
||||
<div class="form-group">
|
||||
<label for="nom">Nom complet</label>
|
||||
<input type="text" id="nom" name="nom" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email">Adresse email</label>
|
||||
<input type="email" id="email" name="email" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="message">Message</label>
|
||||
<textarea id="message" name="message" rows="5" required></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-submit">
|
||||
<button type="submit">Envoyer</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="copyright">
|
||||
<p>© 2025 Yahya MABROUK. Tous droits réservés.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,88 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Contact - Portfolio de Yahya MABROUK</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="navbar">
|
||||
<div class="nom">
|
||||
<h1>Yahya MABROUK</h1>
|
||||
<p>Développeur Web</p>
|
||||
</div>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">Accueil</a></li>
|
||||
<li><a href="a-propos.html">À propos</a></li>
|
||||
<li><a href="realisations.html">Réalisations</a></li>
|
||||
<li><a href="interets.html">Centres d'intérêt</a></li>
|
||||
<li><a href="contact.html" class="active">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="section" id="contact">
|
||||
<h2 class="titre-section">Contact</h2>
|
||||
<div class="contenu-contact">
|
||||
<div class="coordonnees">
|
||||
<h3>Mes coordonnées</h3>
|
||||
<p>N'hésitez pas à me contacter par l'un des moyens suivants ou en utilisant le formulaire ci-dessous.</p>
|
||||
|
||||
<div class="info-contact">
|
||||
<p><i class="fas fa-envelope"></i> <strong>Email :</strong> <a href="mailto:email@example.com">email@example.com</a></p>
|
||||
<p><i class="fas fa-phone"></i> <strong>Téléphone :</strong> +33 X XX XX XX XX</p>
|
||||
<p><i class="fas fa-map-marker-alt"></i> <strong>Adresse :</strong> Ville, Pays</p>
|
||||
</div>
|
||||
|
||||
<div class="reseaux-sociaux">
|
||||
<h3>Réseaux sociaux</h3>
|
||||
<p>Retrouvez-moi également sur les plateformes suivantes :</p>
|
||||
<ul>
|
||||
<li><a href="#"><i class="fab fa-linkedin"></i> LinkedIn</a></li>
|
||||
<li><a href="#"><i class="fab fa-github"></i> GitHub</a></li>
|
||||
<li><a href="#"><i class="fab fa-twitter"></i> Twitter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="formulaire-contact">
|
||||
<h3>Envoyez-moi un message</h3>
|
||||
<form id="contact-form">
|
||||
<div class="form-group">
|
||||
<label for="nom">Nom complet</label>
|
||||
<input type="text" id="nom" name="nom" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email">Adresse email</label>
|
||||
<input type="email" id="email" name="email" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="message">Message</label>
|
||||
<textarea id="message" name="message" rows="5" required></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-submit">
|
||||
<button type="submit">Envoyer</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="copyright">
|
||||
<p>© 2025 Yahya MABROUK. Tous droits réservés.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,65 @@
|
||||
<!doctype html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Centres d'intérêt - Portfolio de Yahya MABROUK</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="navbar">
|
||||
<div class="nom">
|
||||
<h1>Yahya MABROUK</h1>
|
||||
<p>Étudiant en BUT1 Informatique</p>
|
||||
</div>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">Accueil</a></li>
|
||||
<li><a href="a-propos.html">À propos</a></li>
|
||||
<li><a href="competences.html">Compétences</a></li>
|
||||
<li><a href="realisations.html">Réalisations</a></li>
|
||||
<li><a href="interets.html" class="active">Centres d'intérêt</a></li>
|
||||
<li><a href="contact.html">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section id="interets" class="section">
|
||||
<h2 class="titre-section">Centres d'intérêt</h2>
|
||||
|
||||
<div class="intro">
|
||||
<p>
|
||||
Même si l'informatique occupe une place importante dans ma
|
||||
vie, je m'épanouis également à travers diverses activités
|
||||
qui nourrissent ma créativité et mon bien-être.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="interets-container">
|
||||
<div class="interet">
|
||||
<h3><i class="fas fa-futbol"></i> Football</h3>
|
||||
</div>
|
||||
|
||||
<div class="interet">
|
||||
<h3><i class="fas fa-store"></i> Commerce</h3>
|
||||
</div>
|
||||
|
||||
<div class="interet">
|
||||
<h3><i class="fas fa-chart-line"></i> Économie</h3>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="copyright">
|
||||
<p>© 2025 Yahya MABROUK. Tous droits réservés.</p>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in new issue