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{
display: none;
}
#experiencecontentcontainer{
margin-top: 25px;
}

View File

@ -1,4 +1,4 @@
body, html {
body, html, #maincontent {
height: 100%;
scroll-behavior: smooth;
/*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;
}
#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 {
text-transform: uppercase;
@ -34,4 +57,8 @@ body, html {
.tile {
min-height: 300px;
}
#backtotopbutton{
display: none; /* hide scroll to top button on mobile devices */
}
}

View File

@ -23,7 +23,7 @@
</head>
<!-- The scrollable area -->
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<div id="maincontent">
<nav class="navbar navbar-expand-sm navbar-dark fixed-top">
<a class="navbar-brand" href="#">Lukas</a>
<!-- Toggler/collapsibe Button -->
@ -81,7 +81,8 @@
Hello! I'm Lukas, a software engineer based in Austria who enjoys building GUI-Software as well as
things
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.
I'm currently a student of the HTL Steyr and I am in the final year now.
<br><br>
@ -135,7 +136,8 @@
07.2019 08.2019
</div>
<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
▪ Programmieren von Bildkorrekturen für
Oberflächeninspektionen mithilfe von OpenCV in C++
@ -199,6 +201,15 @@
Todo Contacts page! Todo Contacts page! Todo Contacts page! Todo Contacts page! </p>
</div>
</div>
</div>
<a href="#section1">
<div id="backtotopbutton">
<div style="margin-top: 25%">
Back to Top!
</div>
</div>
</a>
</body>
</html>