285 lines
7.1 KiB
HTML
285 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<style>
|
||
body {
|
||
background: rgb(46,49,64);
|
||
background: -moz-radial-gradient(circle, rgba(46,49,64,1) 0%, rgba(22,22,22,1) 80%);
|
||
background: -webkit-radial-gradient(circle, rgba(46,49,64,1) 0%, rgba(22,22,22,1) 80%);
|
||
background: radial-gradient(circle, rgba(46,49,64,1) 0%, rgba(22,22,22,1) 80%);
|
||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2e3140",endColorstr="#161616",GradientType=1);
|
||
}
|
||
</style>
|
||
|
||
<head>
|
||
|
||
<!-- Page Information
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||
<meta charset="utf-8">
|
||
<title>Yann Mölle</title>
|
||
<meta name="description" content="Find us online!">
|
||
<meta name="author" content="Yann Mölle"">
|
||
|
||
<!-- Mobile Specific Metas
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
||
<!-- CSS
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||
<link rel="stylesheet" href="css/line.css">
|
||
<link rel="stylesheet" href="css/normalize.css">
|
||
<!-- Themes:
|
||
Auto: css/skeleton-auto.css
|
||
Light: css/skeleton-light.css
|
||
Dark: css/skeleton-dark.css
|
||
-->
|
||
<link rel="stylesheet" href="css/skeleton-auto.css">
|
||
|
||
<!-- Brand Styles -->
|
||
<link rel="stylesheet" href="css/brands.css">
|
||
<!-- Custom -->
|
||
<link rel="stylesheet" href="custom.css">
|
||
<!-- Favicon
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||
<link rel="icon" type="image/png" href="images/IMG_4145.png">
|
||
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<!-- Primary Page Layout
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="column" style="margin-top: 10%">
|
||
|
||
|
||
<!-- Your Image Here -->
|
||
<div>
|
||
<img src="images/IMG_4145.png" class="avatar shake" srcset="images/IMG_4145.png 2x" alt="Avatar Logo">
|
||
</div>
|
||
|
||
<!-- Title -->
|
||
<h1 style="color:white;">Career</h1>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<style>
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
background-color: #474e5d;
|
||
font-family: Helvetica, sans-serif;
|
||
}
|
||
|
||
/* The actual timeline (the vertical ruler) */
|
||
.timeline {
|
||
position: relative;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* The actual timeline (the vertical ruler) */
|
||
.timeline::after {
|
||
content: '';
|
||
position: absolute;
|
||
width: 6px;
|
||
background-color: white;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 50%;
|
||
margin-left: -3px;
|
||
}
|
||
|
||
/* Container around content */
|
||
.container {
|
||
padding: 10px 40px;
|
||
position: relative;
|
||
background-color: inherit;
|
||
width: 50%;
|
||
}
|
||
|
||
/* The circles on the timeline */
|
||
.container::after {
|
||
content: '';
|
||
position: absolute;
|
||
width: 25px;
|
||
height: 25px;
|
||
right: -17px;
|
||
background-color: white;
|
||
border: 4px solid #FF9F55;
|
||
top: 15px;
|
||
border-radius: 50%;
|
||
z-index: 1;
|
||
}
|
||
|
||
/* Place the container to the left */
|
||
.left {
|
||
left: 0;
|
||
}
|
||
|
||
/* Place the container to the right */
|
||
.right {
|
||
left: 50%;
|
||
}
|
||
|
||
/* Add arrows to the left container (pointing right) */
|
||
.left::before {
|
||
content: " ";
|
||
height: 0;
|
||
position: absolute;
|
||
top: 22px;
|
||
width: 0;
|
||
z-index: 1;
|
||
right: 30px;
|
||
border: medium solid white;
|
||
border-width: 10px 0 10px 10px;
|
||
border-color: transparent transparent transparent white;
|
||
}
|
||
|
||
/* Add arrows to the right container (pointing left) */
|
||
.right::before {
|
||
content: " ";
|
||
height: 0;
|
||
position: absolute;
|
||
top: 22px;
|
||
width: 0;
|
||
z-index: 1;
|
||
left: 30px;
|
||
border: medium solid white;
|
||
border-width: 10px 10px 10px 0;
|
||
border-color: transparent white transparent transparent;
|
||
}
|
||
|
||
/* Fix the circle for containers on the right side */
|
||
.right::after {
|
||
left: -16px;
|
||
}
|
||
|
||
/* The actual content */
|
||
.content {
|
||
padding: 20px 30px;
|
||
background-color: white;
|
||
position: relative;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
/* Media queries - Responsive timeline on screens less than 600px wide */
|
||
@media screen and (max-width: 600px) {
|
||
/* Place the timelime to the left */
|
||
.timeline::after {
|
||
left: 31px;
|
||
}
|
||
|
||
/* Full-width containers */
|
||
.container {
|
||
width: 100%;
|
||
padding-left: 70px;
|
||
padding-right: 25px;
|
||
}
|
||
|
||
/* Make sure that all arrows are pointing leftwards */
|
||
.container::before {
|
||
left: 60px;
|
||
border: medium solid white;
|
||
border-width: 10px 10px 10px 0;
|
||
border-color: transparent white transparent transparent;
|
||
}
|
||
|
||
/* Make sure all circles are at the same spot */
|
||
.left::after, .right::after {
|
||
left: 15px;
|
||
}
|
||
|
||
/* Make all right containers behave like the left ones */
|
||
.right {
|
||
left: 0%;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="timeline">
|
||
<div class="container left">
|
||
<div class="content">
|
||
<h2>2017</h2>
|
||
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
|
||
</div>
|
||
</div>
|
||
<div class="container right">
|
||
<div class="content">
|
||
<h2>2016</h2>
|
||
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
|
||
</div>
|
||
</div>
|
||
<div class="container left">
|
||
<div class="content">
|
||
<h2>2015</h2>
|
||
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
|
||
</div>
|
||
</div>
|
||
<div class="container right">
|
||
<div class="content">
|
||
<h2>2012</h2>
|
||
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
|
||
</div>
|
||
</div>
|
||
<div class="container left">
|
||
<div class="content">
|
||
<h2>2011</h2>
|
||
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
|
||
</div>
|
||
</div>
|
||
<div class="container right">
|
||
<div class="content">
|
||
<h2>2007</h2>
|
||
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<br>
|
||
|
||
<br><br>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
<!-- End Document
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||
</body>
|
||
|
||
</html>
|