a up to top button

This commit is contained in:
lukas-heiligenbrunner 2020-03-18 16:02:43 +01:00
parent 8935ea95ba
commit 8a237c61dc
3 changed files with 194 additions and 152 deletions

View File

@ -38,3 +38,7 @@
.ratiobtn{ .ratiobtn{
display: none; display: none;
} }
#experiencecontentcontainer{
margin-top: 25px;
}

View File

@ -1,4 +1,4 @@
body, html { body, html, #maincontent {
height: 100%; height: 100%;
scroll-behavior: smooth; scroll-behavior: smooth;
/*font-family: Calibre, "San Francisco", "SF Pro Text", -apple-system, system-ui, BlinkMacSystemFont, Roboto, "Helvetica Neue", "Segoe UI", Arial, sans-serif;*/ /*font-family: Calibre, "San Francisco", "SF Pro Text", -apple-system, system-ui, BlinkMacSystemFont, Roboto, "Helvetica Neue", "Segoe UI", Arial, sans-serif;*/
@ -12,6 +12,29 @@ body, html {
min-height: 530px; min-height: 530px;
} }
#backtotopbutton{
position: fixed;
bottom: 0;
right: 0;
height: 88px;
width: 120px;
margin-bottom: 40px;
margin-right: 60px;
background-color: #311E25;
opacity: 0.5;
transition: opacity 500ms;
color: white;
border-radius: 13px;
text-align: center;
}
#backtotopbutton:hover{
opacity: 1;
transition: opacity 500ms;
}
/* nav item formattings */ /* nav item formattings */
.nav-item { .nav-item {
text-transform: uppercase; text-transform: uppercase;
@ -34,4 +57,8 @@ body, html {
.tile { .tile {
min-height: 300px; min-height: 300px;
} }
#backtotopbutton{
display: none; /* hide scroll to top button on mobile devices */
}
} }

View File

@ -23,8 +23,8 @@
</head> </head>
<!-- The scrollable area --> <!-- The scrollable area -->
<body data-spy="scroll" data-target=".navbar" data-offset="50"> <body data-spy="scroll" data-target=".navbar" data-offset="50">
<div id="maincontent">
<nav class="navbar navbar-expand-sm navbar-dark fixed-top"> <nav class="navbar navbar-expand-sm navbar-dark fixed-top">
<a class="navbar-brand" href="#">Lukas</a> <a class="navbar-brand" href="#">Lukas</a>
<!-- Toggler/collapsibe Button --> <!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
@ -51,11 +51,11 @@
</li> </li>
</ul> </ul>
</div> </div>
</nav> </nav>
<!-- Home Page--> <!-- Home Page-->
<div id="section1" class="tile"> <div id="section1" class="tile">
<div class="container"> <div class="container">
<div style="float: left;"> <div style="float: left;">
<div id="preTitle">Hey, my name is</div> <div id="preTitle">Hey, my name is</div>
@ -70,10 +70,10 @@
<img src="rsc/self3.png" height="100%" style="display: block;margin-left: auto; margin-right: auto"> <img src="rsc/self3.png" height="100%" style="display: block;margin-left: auto; margin-right: auto">
</div> </div>
</div> </div>
</div> </div>
<!-- About Page --> <!-- About Page -->
<div id="section2" class="bg-warning tile"> <div id="section2" class="bg-warning tile">
<div class="container"> <div class="container">
<div class="aboutcontainer"> <div class="aboutcontainer">
<h1>About me</h1> <h1>About me</h1>
@ -81,7 +81,8 @@
Hello! I'm Lukas, a software engineer based in Austria who enjoys building GUI-Software as well as Hello! I'm Lukas, a software engineer based in Austria who enjoys building GUI-Software as well as
things things
that live on the internet. that live on the internet.
I develop hardware near software exceptional websites and apps that provide intuitive and user friendly I develop hardware near software exceptional websites and apps that provide intuitive and user
friendly
interfaces with efficient and modern backends. interfaces with efficient and modern backends.
I'm currently a student of the HTL Steyr and I am in the final year now. I'm currently a student of the HTL Steyr and I am in the final year now.
<br><br> <br><br>
@ -102,10 +103,10 @@
<img src="rsc/self4.jpg" id="aboutPic"> <img src="rsc/self4.jpg" id="aboutPic">
</div> </div>
</div> </div>
</div> </div>
<!-- Experience Page --> <!-- Experience Page -->
<div id="section3" class="tile"> <div id="section3" class="tile">
<div class="container"> <div class="container">
<h1>Experience</h1> <h1>Experience</h1>
<div id="experiencecontentcontainer"> <div id="experiencecontentcontainer">
@ -135,7 +136,8 @@
07.2019 08.2019 07.2019 08.2019
</div> </div>
<p> <p>
Development of picture corrections for a surface inspection robot with the help of OpenCV.<br> Development of picture corrections for a surface inspection robot with the help of
OpenCV.<br>
außeruniversitäres Forschungsinstitut außeruniversitäres Forschungsinstitut
▪ Programmieren von Bildkorrekturen für ▪ Programmieren von Bildkorrekturen für
Oberflächeninspektionen mithilfe von OpenCV in C++ Oberflächeninspektionen mithilfe von OpenCV in C++
@ -175,10 +177,10 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- Projects Page --> <!-- Projects Page -->
<div id="section4" class="tile"> <div id="section4" class="tile">
<div class="container"> <div class="container">
<h1>Projects</h1> <h1>Projects</h1>
<p>Todo Projects Page! Todo Projects Page! Todo Projects Page! Todo Projects Page! Todo Projects Page! <p>Todo Projects Page! Todo Projects Page! Todo Projects Page! Todo Projects Page! Todo Projects Page!
@ -186,10 +188,10 @@
Todo Projects Page! Todo Projects Page! Todo Projects Page! Todo Projects Page! Todo Projects Page! Todo Todo Projects Page! Todo Projects Page! Todo Projects Page! Todo Projects Page! Todo Projects Page! Todo
Projects Page! </p> Projects Page! </p>
</div> </div>
</div> </div>
<!-- Contact Page --> <!-- Contact Page -->
<div id="section5" class="bg-danger tile"> <div id="section5" class="bg-danger tile">
<div class="container"> <div class="container">
<h1>Contact</h1> <h1>Contact</h1>
<h3>Stay in Contact!</h3> <h3>Stay in Contact!</h3>
@ -198,7 +200,16 @@
Todo Contacts page! Todo Contacts page! Todo Contacts page! Todo Contacts page! Todo Contacts page! Todo Contacts page! Todo Contacts page! Todo Contacts page! Todo Contacts page! Todo Contacts page!
Todo Contacts page! Todo Contacts page! Todo Contacts page! Todo Contacts page! </p> Todo Contacts page! Todo Contacts page! Todo Contacts page! Todo Contacts page! </p>
</div> </div>
</div>
</div> </div>
<a href="#section1">
<div id="backtotopbutton">
<div style="margin-top: 25%">
Back to Top!
</div>
</div>
</a>
</body> </body>
</html> </html>