change the visual design of the page, adding sections
This commit is contained in:
parent
d9408675cd
commit
56cb456d9d
2 changed files with 29 additions and 16 deletions
11
index.html
11
index.html
|
@ -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
|
||||||
|
|
28
style.css
28
style.css
|
@ -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%;
|
||||||
|
|
Loading…
Reference in a new issue