Flexbox Lebenslauf

Einfache anordnung von Containern fue ein Lebenslauf mit Flexbox erstellt

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>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!