<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>nav test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script>
<style>
body{margin:0; padding:0; }
header{position: fixed; z-index: 1; height:25vh; width:100vw;background-color:; }
img.logo{width:10%; float: right; padding-right: 6%; padding-top: 4%; }
/*First Anfang*/
.first{width:100vw; height: 100vh; background-image:url(Images/Meer.jpg); background-size: 100vw 100vh; position: absolute; background-attachment:}
.eins{margin:0; color: #FFF; font-family: "ParalucentStencil"; font-weight: 600; font-size: 4vw; height:5vh; width:90vw; text-align: center;position: absolute; top:35vh; text-shadow: 1px 1px 2px black }
.zwei{margin:0; color: #FFF; font-family: "Mr Eaves Mod OT"; font-size: 12vw; height:20vh; position: absolute; top:40vh; width:90vw; text-align: center;
font-weight: 900; text-shadow: 1px 3px 4px black}
/*Dark Blue*/
.container{width:90vw; height:90vh; background-color: rgba(5,21,67,0.81); margin-left: 5vw; margin-top: 5vh; position: absolute; border-radius: 20px;
box-shadow: 1px 1px 8px rgba(5,21,67,0.81);}
@supports (mix-blend-mode: multiply) {
.container {background-color: rgba(5,21,67,0.81); mix-blend-mode: multiply; }}
/*First Ende*/
img.home{width:40%; color:#FFF}
.nav{width:10vw; position: fixed; z-index:1; right:0; bottom:7vh; }
a{text-decoration: none; color:inherit }
ul{margin:0; padding:0; position: relative; z-index: 1; }
li{padding:2px; background-color:#051543; margin:10px; list-style-type: none; text-align: right; font-family: "Mr Eaves Mod OT"; border-radius: 10px; padding-right: 8px; border: 0.5px white dashed; font-weight: bold }
.nav a li {color:}
.nav a li:hover{transition: all 0.2.5s ease-in; color:#FFF; visibility:visible}
@supports (mix-blend-mode: multiply) {
.nav {background-color: ; mix-blend-mode: multiply; }}
/*second Anfang*/
.second{width:100vw; height:100vh; position: absolute; margin-top:100vh; background-color:#DDDDDD}
img.about{position: absolute; width:40%; left:5vw; top:20vh; border-radius: 5px;box-shadow: 1px 1px 6px grey }
.text{font-family: "Cholla Unicase OT"; position: absolute; margin: 0; font-size: 1.3vw; width:10vw; left:46vw; top: 32vh}
h3{position: absolute; font-family: "ParalucentStencil"; font-size: 6vw; width:30vw; left:29vw; top:35vh;margin:0; color: #FFF;
text-align: center; font-weight: 400; text-shadow: 1px 2px 4px black}
@supports (mix-blend-mode: multiply) {
h3 {background-color: rgba(5,21,67,0.81) ; mix-blend-mode: multiply; }}
.profil{position: absolute; z-index: 1; font-family:'Mr Eaves Mod OT'; text-transform: ; width:30vw; font-size: 1.3vw; line-height: 18px;
text-align:left; letter-spacing: -0.5px; word-spacing: 3px; background-color:#DDDDDD; left:35vw; top:48vh; padding: 2vw; }
.more{position: absolute; border:solid 1px black; font-family: "ParalucentStencil"; left:50vw; bottom: 25vh; font-size: 2vw; width:15vw; text-align: center; background-color:transparent; color:black; padding: 2px}
.more:hover{background-color:rgba(5,21,67,0.81); color:#DDDDDD; box-shadow: 1px 1px 8px black; border:none }
.second2{width: 100vw; height:100vh; position: absolute; margin-top: 200vh;; background-color: red}
.third{width:100vw; height:100vh; position: absolute; margin-top:300vh; background-color:#376877}
.active{background-color:red}
</style>
</head>
<body>
<header>
<img src="Images/Logo blau.png" class="logo" alt="logo">
</header>
<!-- First Anfang -->
<section class="first" id="home">
<nav class="nav">
<ul>
<a href="#home" ><li class="active">HOME</li></a>
<a href="#about"><li>ABOUT</li></a>
<a href="#work"><li>WORK</li></a>
<a href="#contact"><li>CONTACT</li></a>
</ul>
</nav>
<script>
$(document).ready(function () {
$(document).on("scroll", onScroll);
//smoothscroll
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('nav li').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('nav a').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}</script>
<!-- Dark Blue Anfang -->
<div class="container">
<h1 class="eins">WEBDESIGN</h1>
<h2 class="zwei">MY PASSION</h2>
</div>
<!-- Dark Blue Ende -->
</section><!-- First Ende -->
<section class="second" id="about">
<img src="Images/about2.png" class="about" alt="sabrinacastano">
<p class="text">A LITTLE ABOUT ME</p>
<h3>WHO I AM</h3>
<div class="profil">
Young ambitious talent<br>
Creative thinker without borders<br>
Motivated to master big challenges<br>
Ready to grow every day<br>
<br>
Let's create amazing things
</div>
<a href="#about2"><div class="more">READ MORE</div></a>
</section>
<section class="second2" id="about2"></section>
<section class="third" id="work">hhfa</section>
</body>
</html>
