KerelOlivier
/
portfolio
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

add: basic structure

master
KerelOlivier 3 years ago
parent
151daf46e2
commit
fc01e4dcf8
4 changed files with 159 additions and 9 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      images/bg.svg
  2. BIN
      images/profile.jpg
  3. 60
      index.html
  4. 97
      styles.css

1
images/bg.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 108 KiB

BIN
images/profile.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 59 KiB

60
index.html
Unescape View File

@ -1,9 +1,61 @@ @@ -1,9 +1,61 @@
<!DOCTYPE>
<html>
<!DOCTYPE html>
<html lang="en">
<head>
<title> Olivier Boeren: Portfolio </title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1> Welcome to my portfolio </h1>
<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>

97
styles.css
Unescape View File

@ -0,0 +1,97 @@ @@ -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;
}
Write Preview
Loading…
Cancel
Save