Skip to content

Instantly share code, notes, and snippets.

@codingwithsara

codingwithsara/index.html Secret

Created November 9, 2018 04:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save codingwithsara/3399553f841aa15e88358625a2b20202 to your computer and use it in GitHub Desktop.
Save codingwithsara/3399553f841aa15e88358625a2b20202 to your computer and use it in GitHub Desktop.
Download ZIP
How to Create a Simple Website with HTML, CSS, and jQuery ( TypeB: Fixed Header & Footer )
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The Simple Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header">
<ul id="menu">
<li class="site_name"><a href="index.html">SITE NAME</a></li>
<li class="link"><a href="#theme1">&raquo; Theme1</a></li>
<li class="link"><a href="#theme2">&raquo; Theme2</a></li>
<li class="link"><a href="#theme3">&raquo; Theme3</a></li>
<li class="link"><a href="#theme4">&raquo; Theme4</a></li>
</ul>
</div>
<div id="contents">
<h1 id="theme1">Theme1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis neque nec luctus maximus.
Donec eu eleifend libero, nec scelerisque metus. Morbi volutpat turpis pretium leo auctor luctus.
Cras suscipit lectus sit amet tellus vestibulum porta. Nullam hendrerit ante erat, eget pretium nunc
faucibus id. Integer ut urna tellus. In pharetra, lectus sed ornare facilisis, nisl ligula interdum massa,
at vehicula libero enim id libero. Sed ac fringilla purus. Aenean finibus est sit amet faucibus porta.
Integer interdum finibus tempor.</p>
<p>Phasellus nisi metus, bibendum a lorem quis, lobortis porttitor nisl. Vivamus quis mollis leo. Vestibulum
aliquam arcu augue, ut efficitur urna ornare tincidunt. Aenean quis purus feugiat, lobortis libero ut, consectetur
lacus. Praesent orci libero, tincidunt in magna condimentum, feugiat consequat ex. Nulla id erat vel dui lacinia
ullamcorper sed vel lectus. Nulla facilisi. Aliquam rhoncus sem at ligula tincidunt, eu bibendum purus tempus.
Nullam venenatis felis ante, at auctor purus aliquet sed. In egestas vulputate nulla, quis consequat dolor sagittis
nec. Etiam molestie nisi enim, id dignissim magna tristique ut.</p>
<p>Duis vel purus fermentum, ultricies ligula id, pellentesque ex. Nunc at purus odio. Integer posuere, purus dictum
varius finibus, tortor massa venenatis neque, sit amet laoreet diam tortor id ex. Nulla dictum sed arcu vel porttitor.
Sed sodales rutrum risus et consequat. Mauris libero leo, posuere nec condimentum a, pellentesque sit amet augue.
Morbi id velit varius, euismod turpis a, vestibulum leo.</p>
<h1 id="theme2">Theme2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis neque nec luctus maximus.
Donec eu eleifend libero, nec scelerisque metus. Morbi volutpat turpis pretium leo auctor luctus.
Cras suscipit lectus sit amet tellus vestibulum porta. Nullam hendrerit ante erat, eget pretium nunc
faucibus id. Integer ut urna tellus. In pharetra, lectus sed ornare facilisis, nisl ligula interdum massa,
at vehicula libero enim id libero. Sed ac fringilla purus. Aenean finibus est sit amet faucibus porta.
Integer interdum finibus tempor.</p>
<p>Phasellus nisi metus, bibendum a lorem quis, lobortis porttitor nisl. Vivamus quis mollis leo. Vestibulum
aliquam arcu augue, ut efficitur urna ornare tincidunt. Aenean quis purus feugiat, lobortis libero ut, consectetur
lacus. Praesent orci libero, tincidunt in magna condimentum, feugiat consequat ex. Nulla id erat vel dui lacinia
ullamcorper sed vel lectus. Nulla facilisi. Aliquam rhoncus sem at ligula tincidunt, eu bibendum purus tempus.
Nullam venenatis felis ante, at auctor purus aliquet sed. In egestas vulputate nulla, quis consequat dolor sagittis
nec. Etiam molestie nisi enim, id dignissim magna tristique ut.</p>
<p>Duis vel purus fermentum, ultricies ligula id, pellentesque ex. Nunc at purus odio. Integer posuere, purus dictum
varius finibus, tortor massa venenatis neque, sit amet laoreet diam tortor id ex. Nulla dictum sed arcu vel porttitor.
Sed sodales rutrum risus et consequat. Mauris libero leo, posuere nec condimentum a, pellentesque sit amet augue.
Morbi id velit varius, euismod turpis a, vestibulum leo.</p>
<h1 id="theme3">Theme3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis neque nec luctus maximus.
Donec eu eleifend libero, nec scelerisque metus. Morbi volutpat turpis pretium leo auctor luctus.
Cras suscipit lectus sit amet tellus vestibulum porta. Nullam hendrerit ante erat, eget pretium nunc
faucibus id. Integer ut urna tellus. In pharetra, lectus sed ornare facilisis, nisl ligula interdum massa,
at vehicula libero enim id libero. Sed ac fringilla purus. Aenean finibus est sit amet faucibus porta.
Integer interdum finibus tempor.</p>
<p>Phasellus nisi metus, bibendum a lorem quis, lobortis porttitor nisl. Vivamus quis mollis leo. Vestibulum
aliquam arcu augue, ut efficitur urna ornare tincidunt. Aenean quis purus feugiat, lobortis libero ut, consectetur
lacus. Praesent orci libero, tincidunt in magna condimentum, feugiat consequat ex. Nulla id erat vel dui lacinia
ullamcorper sed vel lectus. Nulla facilisi. Aliquam rhoncus sem at ligula tincidunt, eu bibendum purus tempus.
Nullam venenatis felis ante, at auctor purus aliquet sed. In egestas vulputate nulla, quis consequat dolor sagittis
nec. Etiam molestie nisi enim, id dignissim magna tristique ut.</p>
<p>Duis vel purus fermentum, ultricies ligula id, pellentesque ex. Nunc at purus odio. Integer posuere, purus dictum
varius finibus, tortor massa venenatis neque, sit amet laoreet diam tortor id ex. Nulla dictum sed arcu vel porttitor.
Sed sodales rutrum risus et consequat. Mauris libero leo, posuere nec condimentum a, pellentesque sit amet augue.
Morbi id velit varius, euismod turpis a, vestibulum leo.</p>
<h1 id="theme4">Theme4</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis neque nec luctus maximus.
Donec eu eleifend libero, nec scelerisque metus. Morbi volutpat turpis pretium leo auctor luctus.
Cras suscipit lectus sit amet tellus vestibulum porta. Nullam hendrerit ante erat, eget pretium nunc
faucibus id. Integer ut urna tellus. In pharetra, lectus sed ornare facilisis, nisl ligula interdum massa,
at vehicula libero enim id libero. Sed ac fringilla purus. Aenean finibus est sit amet faucibus porta.
Integer interdum finibus tempor.</p>
<p>Phasellus nisi metus, bibendum a lorem quis, lobortis porttitor nisl. Vivamus quis mollis leo. Vestibulum
aliquam arcu augue, ut efficitur urna ornare tincidunt. Aenean quis purus feugiat, lobortis libero ut, consectetur
lacus. Praesent orci libero, tincidunt in magna condimentum, feugiat consequat ex. Nulla id erat vel dui lacinia
ullamcorper sed vel lectus. Nulla facilisi. Aliquam rhoncus sem at ligula tincidunt, eu bibendum purus tempus.
Nullam venenatis felis ante, at auctor purus aliquet sed. In egestas vulputate nulla, quis consequat dolor sagittis
nec. Etiam molestie nisi enim, id dignissim magna tristique ut.</p>
<p>Duis vel purus fermentum, ultricies ligula id, pellentesque ex. Nunc at purus odio. Integer posuere, purus dictum
varius finibus, tortor massa venenatis neque, sit amet laoreet diam tortor id ex. Nulla dictum sed arcu vel porttitor.
Sed sodales rutrum risus et consequat. Mauris libero leo, posuere nec condimentum a, pellentesque sit amet augue.
Morbi id velit varius, euismod turpis a, vestibulum leo.</p>
</div>
<a href="#contents" class="top">&#9650; Top</a>
<div id="footer">
&copy; xxx All rights reserved.
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(function(){
// Click the link starting with #
$('a[href^="#"]').click(function(){
// Scroll speed (ms)
var speed = 500;
// Get href
var href = $(this).attr("href");
// Change backcolor
$(".link").css('background-color', 'navy');
if (href != "#contents") {
$(this).parent("li").css('background-color', 'lightseagreen');
}
// Set target
var target = $(href == "#" || href == "" ? "html" : href);
// Get the position of target
var position = target.offset().top;
// Start animation
$("body,html").animate({scrollTop:position}, speed, 'swing');
return false;
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment