Flexbox Lebenslauf
Einfache anordnung von Containern fue ein Lebenslauf mit Flexbox erstellt
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Lebenslauf</title>
<style>
* {
margin:0;
padding:0;
}
body{
display:flex;
flex-direction:column;
}
h1 {
font-size: 500%;
text-alig:center
}
h2{
margin:50px 0;
}
.flexbox-item {
border-bottom: 2px solid black;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: space-around;
justify-content: center;
align-items: center;
}
.line{
display: flex;
width: 100%;
flex-direction: row;
justify-content: space-evenly;
}
.left {
display: flex;
flex: 1;
margin: 0 20px;
justify-content: flex-end;
}
.right {
display:flex;
flex:1;
}
</style>
</head>
<body>
<h1>Lebenslauf</h1>
<div class="flexbox-item">
<h2 class="L">Persönliche Daten:</h2>
<div class="line"><div class="left">Vorname/Nachname</div><div class="right">basti</div></div>
<div class="line"><div class="left">Adresse</div><div class="right">bla</div></div>
<div class="line"><div class="left">Tel.</div><div class="right">0152/12345</div></div>
<div class="line"><div class="left">E-Mail</div><div class="right">1@gmx.de</div></div>
<div class="line"><div class="left">Staatsangehörigkeit</div><div class="right">Deutsch</div></div>
<div class="line"><div class="left">Geburtsdatum</div><div class="right">10.10.2022</div></div>
<div class="line"><div class="left">Geschlecht</div><div class="right">Mänlich</div></div>
</div>
<div class="flexbox-item ">
<h2 class="L">Schulische Laufbahn</h2>
<div class="line"><div class="left">Grundschule</div><div class="right">2009-2013</div></div>
<div class="line"><div class="left">Mittelschule</div><div class="right">2013-2019 Mittlere-Reife Abschluss</div></div>
<div class="line"><div class="left">FOS</div><div class="right">2019-2020</div></div>
<div class="line"><div class="left">Aktuell</div><div class="right">1</div></div>
</div>
<div class="flexbox-item">
<h2 class="L">Praktika</h2>
<div class="line"><div class="left">EDV-Service</div><div class="right">Vom 08.05.2017</div></div>
<div class="line"><div class="left">Datum</div><div class="right">Bis 12.05.2017</div></div>
<div class="line"><div class="left">Polizei</div><div class="right">Vom 20.02.2017</div></div>
<div class="line"><div class="left">Datum</div><div class="right">Bis 24.02.2017</div></div>
<div class="line"><div class="left">Liebherr</div><div class="right">Vom 23.10.2017</div></div>
<div class="line"><div class="left">Datum</div><div class="right">Bis 27.10.2017</div></div>
</div>
</body>
</html>