change the visual design of the page, adding sections

This commit is contained in:
Ellpeck 2018-07-25 15:01:58 +02:00
parent d9408675cd
commit 56cb456d9d
2 changed files with 29 additions and 16 deletions

View file

@ -14,10 +14,9 @@
<script src="scripts/main.js"></script>
</head>
<body data-spy="scroll" data-target="#navbar">
<a class="anchor" id="home"></a>
<a class="anchor home" id="home"></a>
<!-- Navbar -->
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark" id="navbar">
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light" id="navbar">
<!-- Navbar brand and logo -->
<a class="navbar-brand mb-0 h1" href="#home">
<img src="/res/logo.png" width="40" height="40" alt=""> Ellpeck.de
@ -59,8 +58,8 @@
</div>
<!-- Projects -->
<div class="list-display">
<a class="anchor" id="projects"></a>
<div class="list-display rounded">
<h2>Projects</h2>
<p>
Below is a list of all of the projects that I'm working on or that I've made in the past. Check them out if you want!
@ -70,8 +69,8 @@
</div>
<!-- Social -->
<div class="list-display">
<a class="anchor" id="social"></a>
<div class="list-display rounded">
<h2>Social</h2>
<p>
Below is a list of the social networks and websites that I regularly use. The closer to the front of the list they are, the more frequently I use them, generally.
@ -81,8 +80,8 @@
</div>
<!-- About -->
<div class="list-display">
<a class="anchor" id="about"></a>
<div class="list-display rounded">
<h2>About</h2>
<p>
Sometimes, some people ask me some questions about myself or my projects, so I decided to compile a list of some of the answers in a Q&A-like fashion so that I don't have to keep repeating them. If you're curious about me, this might be intersting to

View file

@ -1,16 +1,13 @@
body {
padding-top: 66px;
margin-top: 106px;
position: relative;
font-family: Roboto;
background-color: #404142;
}
.main {
margin-top: 20px;
padding-bottom: 200px;
}
.project {
margin-top: 50px;
margin-bottom: 40px;
}
.list-display {
@ -19,6 +16,19 @@ body {
margin-top: 40px;
margin-left: auto;
margin-right: auto;
padding-top: 50px;
padding-bottom: 50px;
padding-left: 60px;
padding-right: 60px;
background-color: white;
}
.project {
margin-top: 50px;
}
.jumbotron {
margin-bottom: 0;
}
.project-image {
@ -55,10 +65,14 @@ body {
a.anchor {
display: block;
position: relative;
top: -66px;
top: -46px;
visibility: hidden;
}
a.anchor.home {
top: -106px;
}
.footer {
bottom: 0;
width: 100%;