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> <script src="scripts/main.js"></script>
</head> </head>
<body data-spy="scroll" data-target="#navbar"> <body data-spy="scroll" data-target="#navbar">
<a class="anchor" id="home"></a> <a class="anchor home" id="home"></a>
<!-- Navbar --> <!-- 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 --> <!-- Navbar brand and logo -->
<a class="navbar-brand mb-0 h1" href="#home"> <a class="navbar-brand mb-0 h1" href="#home">
<img src="/res/logo.png" width="40" height="40" alt=""> Ellpeck.de <img src="/res/logo.png" width="40" height="40" alt=""> Ellpeck.de
@ -59,8 +58,8 @@
</div> </div>
<!-- Projects --> <!-- Projects -->
<div class="list-display"> <a class="anchor" id="projects"></a>
<a class="anchor" id="projects"></a> <div class="list-display rounded">
<h2>Projects</h2> <h2>Projects</h2>
<p> <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! 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> </div>
<!-- Social --> <!-- Social -->
<div class="list-display"> <a class="anchor" id="social"></a>
<a class="anchor" id="social"></a> <div class="list-display rounded">
<h2>Social</h2> <h2>Social</h2>
<p> <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. 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> </div>
<!-- About --> <!-- About -->
<div class="list-display"> <a class="anchor" id="about"></a>
<a class="anchor" id="about"></a> <div class="list-display rounded">
<h2>About</h2> <h2>About</h2>
<p> <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 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 { body {
padding-top: 66px; margin-top: 106px;
position: relative; position: relative;
font-family: Roboto; font-family: Roboto;
background-color: #404142;
} }
.main { .main {
margin-top: 20px; margin-top: 20px;
padding-bottom: 200px; margin-bottom: 40px;
}
.project {
margin-top: 50px;
} }
.list-display { .list-display {
@ -19,6 +16,19 @@ body {
margin-top: 40px; margin-top: 40px;
margin-left: auto; margin-left: auto;
margin-right: 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 { .project-image {
@ -55,10 +65,14 @@ body {
a.anchor { a.anchor {
display: block; display: block;
position: relative; position: relative;
top: -66px; top: -46px;
visibility: hidden; visibility: hidden;
} }
a.anchor.home {
top: -106px;
}
.footer { .footer {
bottom: 0; bottom: 0;
width: 100%; width: 100%;