Commit d5359212 authored by Rennarde1312's avatar Rennarde1312
Browse files

Redraw

parent a2bdb9d1
<!DOCTYPE html>
<html lang="fr">
<head>
<title>CV Lana Heyrendt</title>
<link rel="stylesheet" href="Style.css" />
</head>
<body>
<!-- Header avec ancres -->
<header>
<span class="Name">Lana Heyrendt</span>
<a href="" class="About">About me</a>
<a href="">Experience</a>
<a href="">Skills</a>
<a href="">Projects</a>
<a href="">Contact</a>
</header>
<div class="Header_Line"></div>
<!-- Titre, Images et Contact -->
<div class="Title">
<span class="">Dévelopeuse amatrice, pasionnée du libre</span>
<span class="Light"> Developpeuse en recherche d'experience
proffesionnelle avec une passion pour Linux et les logiciels libres.</span>
<img src="Composants/Capture_PP_CV.png" alt="Photo de profile">
<div class="Contact">
<div class="Phone">
<span>Phone </span>
<span class="Light">652-390-294</span>
</div>
<div class="Line"></div>
<div class="Email">
<span>Email</span>
<span class="Light">LanaHeyrendt@gmail.com</span>
</div>
</div>
</div>
<!-- Presentation -->
<div class="Presentation">
<span class="Bold">Bonjour, <span class="Accent">je suis Lana</span>
heureuse de vous rencontrer.</span>
<span class="Light">Les logiciels libres évoluent constaments, c'est leurs force,
et ils grandissent au délà de leurs créateur·ices et devienne la norme.
Les logiciels propriétaires diponible au près du grand publique on
très souvent mauvaise réputation a cause de leurs pratique commerciale
aggressive et de leurs non respect de la vie privée, ils tiennent
au modèle financier rentable mais au pris de la fidèlité.
Ce genre de monopole tombe facilement en face d'un alternative,
qui est pratiquement sur d'arriver peut import le temps nécéssaire.</span>
</div>
<!-- Expérience -->
<div class="Experience">
<h1 class="Bold ">EXPERIENCE</h1>
<div class="Line"></div>
<div class="Summary">
<span>2020-2021</span>
<span class="Dot"></span>
<span>Travail Indépendant</span>
</div>
<div class="Description">
<span>Assistante Technique</span>
<span class="Line"></span>
<span>Mise en place de plateforme de communication pendant la pandémie
avec des plateformes tel que Microsoft-Teams,
Element, Discord, Zoom, etc...
Formation des employées a l'utilisations des dites plateformes et
aux outils de télétravail
</span>
</div>
</div>
</body>
</html>
\ No newline at end of file
......@@ -20,20 +20,52 @@
<div class="Title">
<span class="Bold">Dévelopeuse amatrice, pasionnée du libre</span>
<span>Hello i'm a subtext, i try to be as long as the template and I'm currently not so here is a few extra lines to allow me to fill the gap</span>
<span> Developpeuse en recherche d'experience proffesionnelle avec une passion pour Linux et les logiciels libres.</span>
<img src="Composants/Capture_PP_CV.png" alt="Profile picture">
</div>
<!--Information EMAIL / Phone -->
<div class="ContactInfo">
<div class="Phone">
<span>Phone </span>
<span>652-390-294</span>
<span class="Ligth">652-390-294</span>
</div>
<div class="line"></div>
<div class="Email">
<span>Email</span>
<span>LanaHeyrendt@gmail.com</span>
<span class="Ligth">LanaHeyrendt@gmail.com</span>
</div>
</div>
<!-- -->
<div class="BackgroundPresentation">
<div class="Presentation">
<div class="Title">
<span>Hi, <span class="PurpleBold">I'm Lana.</span> Nice to meet you.</span>
</div>
<p>Les logiciels libres évoluent constaments, c'est leurs force, et ils grandissent au délà de leurs créateur·ices et devienne la norme.
Les logiciels propriétaires disponible au près du grand publique on mauvaise réputation a cause de leurs pratique commerciale aggressive et
de leurs non respect de la vie privée, ils tiennent au modèle financier rentable mais au pris de la fidèlité.
Ce genre de monopole tombe facilement en face d'un alternative, qui est pratiquement sur d'arriver peut import le temps nécéssaire.</p>
</div>
</div>
<div class="Experience">
<span class="Title">Experience</span>
<span class="line"></span>
<div class="Cursus">
<div class="Titre">
<span class="title">2020-Present</span>
<span class="dot"></span>
<span class="title">IUT de Nantes</span>
</div>
<div class="Info">
<span class="text">ÉTUDIANTE EN INFORMATIQUE (BUT1)</span>
<span class="line"></span>
<span class="text">Après l'échec du BUT, j'ai compris qu'une remise à zéro était nécéssaire. J'ai déménager à Nantes et je me suis inscrite à
l'IUT de Nantes pour continuer dans l'informatique. Les perspective d'alternance et d'entré en école d'ingénieur m'on attirer tout parculièrement</span>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
body {
/* Colors */
background-color: #FFFFFF;
--bw-100: #181743;
--bw-200: #3f474b;
--bw-300: #7f8a8f;
--bw-400: #bec7cc;
--bw-500: #dde6ea;
--bw-600: #f3f8fb;
--bw-700: #ffffff;
--burple-100: #2407D8;
--burple-200: #5034FF;
--blue1: #141C3A;
--blue2: #535E88;
--blue3: #DCDCDE;
--blue4: #F9FBFD;
--accent: #8428F8;
--line: #E5EBF2;
/* Fonts */
font-family: Roboto;
font-style: normal;
}
.Bold {
font-weight: 900;
font-size: 26px;
line-height: 30px;
color: var(--blue1);
}
.Light {
font-weight: 300;
font-size: 17px;
line-height: 30px;
color: var(--blue2);
}
.Line {
background-color: var(--line);
}
header{
display: flex;
flex-direction: row;
align-items: center;
margin: 2% 0% 2% 0%;
gap: 2%;
}
header .Name {
font-weight: 900;
font-size: 26px;
line-height: 30px;
margin: 0% 10% 0% 25%;
}
header a {
text-decoration: none;
color: var(--blue1);
}
header .About {
font-weight: 900;
font-size: 16px;
line-height: 30px;
color: var(--accent);
}
.Header_Line {
width: 100%;
height: 1px;
}
.Title {
display: flex;
flex-direction: column;
text-align: center;
margin-top: 10%;
/* Font Bold */
font-weight: 900;
font-size: 48px;
line-height: 56px;
color: var(--blue1);
}
.Title img {
width: 13%;
height: 22.7%;
margin: auto;
margin-top: 7%;
}
.Contact {
display: flex;
flex-direction: row;
justify-content: center;
font-weight: 300;
font-size: 20px;
line-height: 30px;
}
.Contact .Phone {
display: flex;
flex-direction: column;
text-align: right;
width: 25%;
}
.Contact .Email {
display: flex;
flex-direction: column;
text-align: left;
width: 25%;
}
.Contact .Line {
height: 27px;
width: 1px;
margin: 0.8% 1.5%;
}
.Presentation {
display: flex;
flex-direction: column;
text-align: center;
margin: 13% 34% 12% 34%;
background-color: var(--blue4);
}
.Presentation .Accent {
color: var(--accent);
}
.Experience {
display: flex;
flex-direction: column;
text-align: center;
}
.Experience .Line {
height: 1px;
margin: 2% 7% 6% 10%;
}
.Experience .Summary {
display: flex;
flex-direction: row;
justify-content: center;
gap: 4%;
}
.Dot {
display: block;
height: 9px;
width: 9px;
background-color: var(--accent);
border-radius: 50%;
}
.Experience .Description .Line {
}
\ No newline at end of file
......@@ -17,9 +17,23 @@ body {
--blue3: #DCDCDE;
--blue4: #F9FBFD;
--line: #E5EBF2;
background-color: #FFFFFF;
font-family: Roboto;
}
background-color: #FFFFFF;
.Bold {
font-style: normal;
font-weight: 900;
font-size: 26px;
line-height: 30px;
}
.Light {
font-style: normal;
font-weight: 300;
font-size: 17px;
line-height: 30px;
}
header {
......@@ -78,24 +92,85 @@ header .About {
.Title img {
width: 250px;
height: 250px;
margin-top: 7%;
margin-left: auto;
margin-right: auto;
}
.ContactInfo {
display: flex;
align-items: center;
justify-content: center;
margin: auto;
font-style: normal;
font-weight: 300;
font-size: 20px;
line-height: 30px;
}
.Title .Phone {
.ContactInfo .Phone {
display: flex;
flex-direction: column;
text-align: right;
width: 25%;
}
.ContactInfo .Email {
display: flex;
flex-direction: column;
width: 25%;
}
.Title .line {
.ContactInfo .line {
height: 27px;
width: 1px;
margin: auto;
}
\ No newline at end of file
margin: 0 1.5%;
}
.ContactInfo .Ligth {
font-weight: 300;
font-size: 17px;
line-height: 30px;
color: var(--blue2);
}
.BackgroundPresentation {
background-color: var(--blue4);
}
.Presentation {
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
margin: 14% 35% 0% 35%;
font-weight: 300;
font-size: 17px;
line-height: 30px;
color: var(--blue2);
}
.Presentation .Title {
font-style: normal;
font-weight: 900;
font-size: 26px;
line-height: 30px;
color: var(--blue1);
}
.Presentation .PurpleBold {
color: var(--accent);
}
.Experience {
display: flex;
flex-direction: column;
}
.Experience .line {
width: 80%;
background-color: var(--line);
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment