KerelOlivier
3 years ago
4 changed files with 159 additions and 9 deletions
After Width: | Height: | Size: 108 KiB |
After Width: | Height: | Size: 59 KiB |
@ -1,9 +1,61 @@ |
|||||||
<!DOCTYPE> |
<!DOCTYPE html> |
||||||
<html> |
<html lang="en"> |
||||||
<head> |
<head> |
||||||
<title> Olivier Boeren: Portfolio </title> |
<meta charset="UTF-8"> |
||||||
</head> |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||||
<body> |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||||
<h1> Welcome to my portfolio </h1> |
<title>Document</title> |
||||||
</body> |
|
||||||
|
<link rel="stylesheet" href="styles.css"> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<nav> |
||||||
|
<ul> |
||||||
|
<li><a href="#about">ABOUT</a></li> |
||||||
|
<li><a href="#skills">SKILLS</a></li> |
||||||
|
<li><a href="#education">EDUCATION</a></li> |
||||||
|
<li><a href="#project">PROJECT</a></li> |
||||||
|
<li><a href="#contact">CONTACT</a></li> |
||||||
|
|
||||||
|
</ul> |
||||||
|
</nav> |
||||||
|
<section class="content"> |
||||||
|
<section class="headbox"> |
||||||
|
<section class="profile"> |
||||||
|
<img class="picture" src="./images/profile.jpg" alt="Profile picture"> |
||||||
|
<h2>Olivier Boeren</h2> |
||||||
|
<h3>Software developer</h3> |
||||||
|
</section> |
||||||
|
<a class="resume">Resume</a> |
||||||
|
</section> |
||||||
|
<section class="info"> |
||||||
|
<h1 id="about">ABOUT</h1> |
||||||
|
<p> |
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus dignissim rutrum. Suspendisse vel dapibus risus. Morbi vitae sodales nisi, vitae convallis dolor. In non vulputate magna. Praesent ultrices, tellus nec lacinia molestie, dui mi aliquet mi, imperdiet ultricies neque lacus blandit risus. Curabitur condimentum nisi sit amet dui auctor malesuada. Integer eleifend nisi mi, in tempus tortor fringilla ac. Donec ultrices lacus feugiat, feugiat tortor vitae, tincidunt risus. |
||||||
|
</p> |
||||||
|
<hr> |
||||||
|
<h1 id="skills">SKILLS</h1> |
||||||
|
<p> |
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus dignissim rutrum. Suspendisse vel dapibus risus. Morbi vitae sodales nisi, vitae convallis dolor. In non vulputate magna. Praesent ultrices, tellus nec lacinia molestie, dui mi aliquet mi, imperdiet ultricies neque lacus blandit risus. Curabitur condimentum nisi sit amet dui auctor malesuada. Integer eleifend nisi mi, in tempus tortor fringilla ac. Donec ultrices lacus feugiat, feugiat tortor vitae, tincidunt risus. |
||||||
|
</p> |
||||||
|
<hr> |
||||||
|
<h1 id="education">EDUCATION</h1> |
||||||
|
<p> |
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus dignissim rutrum. Suspendisse vel dapibus risus. Morbi vitae sodales nisi, vitae convallis dolor. In non vulputate magna. Praesent ultrices, tellus nec lacinia molestie, dui mi aliquet mi, imperdiet ultricies neque lacus blandit risus. Curabitur condimentum nisi sit amet dui auctor malesuada. Integer eleifend nisi mi, in tempus tortor fringilla ac. Donec ultrices lacus feugiat, feugiat tortor vitae, tincidunt risus. |
||||||
|
</p> |
||||||
|
<hr> |
||||||
|
<h1 id="projects">PROJECTS</h1> |
||||||
|
<p> |
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus dignissim rutrum. Suspendisse vel dapibus risus. Morbi vitae sodales nisi, vitae convallis dolor. In non vulputate magna. Praesent ultrices, tellus nec lacinia molestie, dui mi aliquet mi, imperdiet ultricies neque lacus blandit risus. Curabitur condimentum nisi sit amet dui auctor malesuada. Integer eleifend nisi mi, in tempus tortor fringilla ac. Donec ultrices lacus feugiat, feugiat tortor vitae, tincidunt risus. |
||||||
|
</p> |
||||||
|
<hr> |
||||||
|
<h1 id="contact">CONTACT</h1> |
||||||
|
<p> |
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus dignissim rutrum. Suspendisse vel dapibus risus. Morbi vitae sodales nisi, vitae convallis dolor. In non vulputate magna. Praesent ultrices, tellus nec lacinia molestie, dui mi aliquet mi, imperdiet ultricies neque lacus blandit risus. Curabitur condimentum nisi sit amet dui auctor malesuada. Integer eleifend nisi mi, in tempus tortor fringilla ac. Donec ultrices lacus feugiat, feugiat tortor vitae, tincidunt risus. |
||||||
|
</p> |
||||||
|
</section> |
||||||
|
</section> |
||||||
|
|
||||||
|
|
||||||
|
</body> |
||||||
</html> |
</html> |
@ -0,0 +1,97 @@ |
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap'); |
||||||
|
*{ |
||||||
|
font-family: 'Roboto', sans-serif; |
||||||
|
} |
||||||
|
body{ |
||||||
|
background-image: url("./images/bg.svg"); |
||||||
|
background-attachment: fixed; |
||||||
|
margin: 0; |
||||||
|
margin-top: 50px; |
||||||
|
} |
||||||
|
h1{ |
||||||
|
color:#212121; |
||||||
|
font-size: 2rem; |
||||||
|
margin-bottom: 10px; |
||||||
|
} |
||||||
|
p{ |
||||||
|
color:#424242; |
||||||
|
line-height: 28px; |
||||||
|
} |
||||||
|
|
||||||
|
nav{ |
||||||
|
margin: auto; |
||||||
|
padding-left: 330px; |
||||||
|
width: 950px; |
||||||
|
height: 50px; |
||||||
|
} |
||||||
|
nav ul{ |
||||||
|
list-style-type: none; |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
nav li{ |
||||||
|
display: inline; |
||||||
|
} |
||||||
|
nav a{ |
||||||
|
text-decoration: none; |
||||||
|
color: #424242; |
||||||
|
font-size: 20px; |
||||||
|
padding: 10px; |
||||||
|
display: inline-block; |
||||||
|
transition: 0.3s; |
||||||
|
} |
||||||
|
|
||||||
|
.content{ |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
gap: 30px; |
||||||
|
margin: auto; |
||||||
|
width: 1280px; |
||||||
|
} |
||||||
|
.profile{ |
||||||
|
width: 300px; |
||||||
|
height: 400px; |
||||||
|
background: #155d77; |
||||||
|
color:#f1f1f1; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.profile .picture{ |
||||||
|
width: 180px; |
||||||
|
height: 180px; |
||||||
|
background: #fff; |
||||||
|
border-radius: 50%; |
||||||
|
margin-top: 60px; |
||||||
|
margin-bottom: 30px; |
||||||
|
} |
||||||
|
.profile h2{ |
||||||
|
margin: 0; |
||||||
|
font-size: 32px; |
||||||
|
} |
||||||
|
.profile h3{ |
||||||
|
margin: 0; |
||||||
|
opacity: 60%; |
||||||
|
font-size: 18px; |
||||||
|
} |
||||||
|
.resume{ |
||||||
|
width: 100%; |
||||||
|
height: 70px; |
||||||
|
line-height: 70px; |
||||||
|
display: block; |
||||||
|
text-align: center; |
||||||
|
bottom: 0; |
||||||
|
background: #fff; |
||||||
|
color:#212121; |
||||||
|
font-size: 24px; |
||||||
|
font-weight: 500; |
||||||
|
} |
||||||
|
.resume:hover{ |
||||||
|
background-color: #efefef; |
||||||
|
} |
||||||
|
.info{ |
||||||
|
width: 850px; |
||||||
|
padding: 50px; |
||||||
|
min-height: calc(100vh - 200px); |
||||||
|
background: #f1f1f1; |
||||||
|
} |
Loading…
Reference in new issue