free source code for website
free source code for website
//html code for website
<html>
<nav class="nav">
<a href="#s1" class="active">Intro</a>
<a href="#s2">Compatibility</a>
<a href="#s3">Usage</a>
<a href="#s4">Credits</a>
</nav>
<article id="s1">
<h1>Smooth Anchor Scrolling</h1>
<p>This <b>Smooth Anchor Scrolling</b> pen was written to reduce the bloat of your project and provide a simple and easy solution for projects using Jquery to apply smooth link scrolling throughout your application or website.</p>
<p>Example link to <span class="nav"><a href="#s3">Usage</a></span></p>
</article>
<article id="s2">
<h2>Compatibility 👍</h2>
<p>Due to leveraging Jquery, this CodePen works well on all Browsers, both Desktop and Mobile also work perfectly.</p>
</article>
<article id="s3">
<h2>Usage</h2>
<p>Simply link to any <code>id</code> on your page from within your <code>.nav</code>.</p>
</article>
<article class="margin" id="s4">
<h2>Credits</h2>
<p>This script was written by myself and is intended for public use. please <b>do not</b> sell this script as an individual product. It may be included in your projects that are sold as an entire website or application.</p>
<p>If you like this pen, you can follow me on <a href="https://twitter.com/uixmat/" target="_blank">Twitter</a>.</p>
</article>
{ css code for website }
* { box-sizing: border-box;}
$primaryColor: deeppink;
$dkBg: #303947;
$itemBg: #6788a7;
$itemBgOdd: darken(#6788a7,15%);
html, body {
font-family: "Arial", sans-serif;
background: #fff;
padding: 80px 30px 30px;
color: #444;
height: 100%;
}
ol, ul {
margin: 0 0 50px 0;
}
h1 {
font-weight: bold;
color: black;
}
p {
line-height: 1.6em;
margin-bottom: 10px;
font-size: 18px;
padding: 0;
&:last-child {
margin-bottom: 40px;
}
}
code {
background: #f8f8f8;
color: #d64f9b;
border: 1px solid #eee;
padding: 2px;
border-radius: 3px;
}
a {
font-weight: bold;
color: $primaryColor;
text-decoration: none;
transition: all 200ms;
&:hover,
&:focus{
color: black;
}
}
article {
min-height: 50vh;
margin-bottom: 50px;
.margin {
margin-bottom: 100vh;
}
}
nav {
display: flex;
width: 100%;
top: 0;
left: 0;
background: $dkBg;
position: fixed;
padding: 30px;
a {
display: inline-flex;
padding: 20px 30px;
color: #fff;
text-decoration: none;
&:hover,
&:focus {
color: white;
}
&.active {
color: $primaryColor;
}
}
}
//Javascript code for website
//https://tech.thinkforu.org
function scrollNav() {
$('.nav a').click(function(){
$(".active").removeClass("active");
$(this).addClass("active");
$('html, body').stop().animate({
scrollTop: $($(this).attr('href')).offset().top - 160
}, 300);
return false;
});
}
scrollNav();
Comments
Post a Comment