Ajout du CV (HTML/CSS)
This commit is contained in:
Safouane Bazzi
112
index.html
Normal file
112
index.html
Normal file
@@ -0,0 +1,112 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>CV - Safouane Bazzi</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="CV.CSS">
|
||||||
|
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||||
|
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="bg-light d-flex justify-content-center py-5">
|
||||||
|
|
||||||
|
<div class="cv-container shadow-lg rounded overflow-hidden d-flex">
|
||||||
|
|
||||||
|
<div class="col-left text-white p-4 d-flex flex-column justify-content-between">
|
||||||
|
|
||||||
|
<div class="text-center mb-4">
|
||||||
|
<h1 class="h3 mb-0 text-uppercase">BAZZI Safouane</h1>
|
||||||
|
<p class="fst-italic">À la recherche d’un stage</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-4">
|
||||||
|
<h2 class="h5 text-uppercase section-title">Contact</h2>
|
||||||
|
<hr class="border-light">
|
||||||
|
<p><strong>Téléphone :</strong><br>07 60 78 58 48</p>
|
||||||
|
<p><strong>Email :</strong><br>safouanebazzi@gmail.com</p>
|
||||||
|
<p><strong>Adresse :</strong><br>10 Boulevard Pablo Picasso<br>94000 Créteil</p>
|
||||||
|
<p><strong>Permis :</strong><br>Permis B</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-4">
|
||||||
|
<h2 class="h5 text-uppercase section-title">Compétences</h2>
|
||||||
|
<hr class="border-light">
|
||||||
|
<ul class="list-unstyled">
|
||||||
|
<li>Réseaux : TCP/IP, HTTP, DNS</li>
|
||||||
|
<li>Programmation : C, Python, SQL, HTML/CSS</li>
|
||||||
|
<li>Virtualisation : VMware, VirtualBox</li>
|
||||||
|
<li>Bureautique : Word, Excel, PowerPoint</li>
|
||||||
|
<li>Travail en équipe</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-4">
|
||||||
|
<h2 class="h5 text-uppercase section-title">Langues</h2>
|
||||||
|
<hr class="border-light">
|
||||||
|
<ul class="list-unstyled">
|
||||||
|
<li>Français : Courant</li>
|
||||||
|
<li>Anglais : Intermédiaire</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h2 class="h5 text-uppercase section-title">Centres d’intérêt</h2>
|
||||||
|
<hr class="border-light">
|
||||||
|
<ul class="list-unstyled">
|
||||||
|
<li>Musculation et football</li>
|
||||||
|
<li>Voyage</li>
|
||||||
|
<li>Informatique</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-right p-5 flex-grow-1 bg-white">
|
||||||
|
|
||||||
|
<section class="mb-4">
|
||||||
|
<h2 class="h4 text-uppercase text-main border-bottom pb-2">Profil</h2>
|
||||||
|
<p>Je suis étudiant en première année de BTS CIEL (Cybersécurité, Informatique et réseaux, Électronique)
|
||||||
|
au lycée Lasalle Saint-Denis. Je recherche un stage technique de 6 semaines, du 19 mai au 27 juin 2025,
|
||||||
|
pour développer mes compétences en administration et gestion des réseaux.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="mb-4">
|
||||||
|
<h2 class="h4 text-uppercase text-main border-bottom pb-2">Expériences</h2>
|
||||||
|
<div class="mb-3">
|
||||||
|
<h3 class="h6 fw-bold">Employé polyvalent - KFC Casablanca</h3>
|
||||||
|
<p class="text-muted fst-italic">Juil. 2023 - Août 2023</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="h6 fw-bold">Préparateur de commandes - JUMIA Casablanca</h3>
|
||||||
|
<p class="text-muted fst-italic">Juil. 2024 - Août 2024</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="mb-4">
|
||||||
|
<h2 class="h4 text-uppercase text-main border-bottom pb-2">Formation</h2>
|
||||||
|
<div class="mb-3">
|
||||||
|
<h3 class="h6 fw-bold">BTS CIEL (Cybersécurité, Informatique et Réseaux, Électronique)</h3>
|
||||||
|
<p class="text-muted fst-italic">Sept. 2024 - Juil. 2026</p>
|
||||||
|
<p>Groupe scolaire La Salle Saint-Denis</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="h6 fw-bold">Baccalauréat Scientifique - Mention Bien</h3>
|
||||||
|
<p class="text-muted fst-italic">Juil. 2024</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="mb-4">
|
||||||
|
<h2 class="h4 text-uppercase text-main border-bottom pb-2">Engagement</h2>
|
||||||
|
<p>Participation à une collecte de fonds pour les victimes du séisme d'Al Haouz en septembre 2023, renforçant mes compétences en organisation et en communication.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
61
style.css
Normal file
61
style.css
Normal file
@@ -0,0 +1,61 @@
|
|||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--main-color: #1f3c88;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cv-container {
|
||||||
|
max-width: 1000px;
|
||||||
|
min-height: 800px;
|
||||||
|
display: flex;
|
||||||
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-left {
|
||||||
|
width: 35%;
|
||||||
|
background-color: var(--main-color);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-right {
|
||||||
|
width: 65%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-main {
|
||||||
|
color: var(--main-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 20px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 18px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul li {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user