Website Plan

How TO - Top Navigation
❮ Previous Next ❯
Learn how to create a top navigation bar with CSS.
Top Navigation Bar

 Home
 News
 Contact
 About
Try it Yourself »
Create A Top Navigation Bar

Step 1) Add HTML:
Example
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
Step 2) Add CSS:
Example
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */

.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */

.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */

.topnav a.active {
background-color: #4CAF50;
color: white;
}
How TO - Full Page Tabs
❮ Previous Next ❯
Learn how to create full page tabs, that covers the entire browser window,
with CSS and JavaScript.
Full Page Tabs

Click on the links to display the "current" page:
HomeNewsContactAbout
Home
Home is where the heart is..
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
/* Set height of body and the document to 100% */
body, html {
height: 100%;
margin: 0;
font-family: Arial;
}
/* Style tab links */
.tablink {
color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 17px;
width: 25%;
.tablink:hover {
/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
color: white;
display: none;
padding: 100px 20px;
height: 100%;
#Home {background-color: red;}
#News {background-color: green;}
#Contact {background-color: blue;}

#About {background-color: orange;}
</style>
</head>
<body>
<button class="tablink" onclick="openPage('Home', this, 'red')">Home</button>
<button class="tablink" onclick="openPage('News', this, 'green')" id="defaultOpen">News</button>
<button class="tablink" onclick="openPage('Contact', this, 'blue')">Contact</button>
<button class="tablink" onclick="openPage('About', this, 'orange')">About</button>
<div id="Home" class="tabcontent">
<h3>Home</h3>
<p>Home is where the heart is..</p>
</div>
<div id="News" class="tabcontent">
<h3>News</h3>
<p>Some news this fine day!</p>
</div>
<div id="Contact" class="tabcontent">
<h3>Contact</h3>
<p>Get in touch, or swing by for a cup of coffee.</p>
</div>
<div id="About" class="tabcontent">
<h3>About</h3>
<p>Who we are and what we do.</p>
</div>
<script>
function openPage(pageName,elmnt,color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
document.getElementById(pageName).style.display = "block";
elmnt.style.backgroundColor = color;
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
.active, .dot:hover {
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img_nature_wide.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>

<img src="img_fjords_wide.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<img src="img_mountains_wide.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
</script>
</body>
</html>
WEBSITE 1
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<style>
*{
box-sizing: border-box;
}
/* Style the body */

body {
font-family: Arial;
margin: 0;
}
/* Header/logo Title */
.header {
padding: 80px;
text-align: center;
background: #1abc9c;
color: white;
}
/* Increase the font size of the heading */

.header h1 {
font-size: 40px;
}
/* Style the top navigation bar */

.navbar {
overflow: hidden;
}
/* Style the navigation bar links */

.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
/* Right-aligned link */
.navbar a.right {
float: right;
}
/* Change color on hover */

.navbar a:hover {
background-color: #ddd;
color: black;
}
/* Column container */
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
}
/* Create two unequal columns that sits next to each other */

/* Sidebar/left column */
.side {
-ms-flex: 30%; /* IE10 */
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}
/* Main column */
.main {
-ms-flex: 70%; /* IE10 */
flex: 70%;
background-color: white;
padding: 20px;
}
/* Fake image, just for this example */

.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
}
/* Responsive layout - when the screen is less than 700px wide, make
the two columns stack on top of each other instead of next to each
other */
@media (max-width: 700px) {
.row {
flex-direction: column;
}
}
/* Responsive layout - when the screen is less than 400px wide, make
the navigation links stack on top of each other instead of next to each
other */
.navbar a {
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<div class="header">
<h1>My Website</h1>
<p>A website created by me.</p>
</div>
<div class="navbar">
<a href="#">Link</a>
<a href="#" class="right">Link</a>
</div>
<div class="row">
<div class="side">
<h2>About Me</h2>
<h5>Photo of me:</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text about me in culpa qui officia deserunt mollit
anim..</p>
<h3>More Text</h3>
<p>Lorem ipsum dolor sit ame.</p>
<div class="fakeimg" style="height:60px;">Image</div><br>
<div class="fakeimg" style="height:60px;">Image</div><br>
</div>
<div class="main">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco.</p>
<br>
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 2, 2017</h5>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco.</p>
</div>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</body>
</html>
WEBSITE 2-BAND
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
scale=1">
<link rel="stylesheet" href="/w3css/3/w3.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.6.3/css/font-awesome.min.css">
<body>


<nav class="w3-bar w3-black">
<a href="#home" class="w3-button w3-bar-item">Home</a>
<a href="#band" class="w3-button w3-bar-item">Band</a>
<a href="#tour" class="w3-button w3-bar-item">Tour</a>
<a href="#contact" class="w3-button w3-bar-
item">Contact</a>
</nav>

<section>
<img class="mySlides" src="img_band_la.jpg"
style="width:100%">
<img class="mySlides" src="img_band_ny.jpg"
style="width:100%">
<img class="mySlides" src="img_band_chicago.jpg"
style="width:100%">
</section>


<section class="w3-container w3-center w3-content"
style="max-width:600px">
<h2 class="w3-wide">THE BAND</h2>
<p class="w3-opacity"><i>We love music</i></p>
<p class="w3-justify">We have created a fictional band
website. Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.</p>
</section>


<section class="w3-row-padding w3-center w3-light-grey">
<article class="w3-third">
<p>John</p>
<img src="img_bandmember.jpg" alt="Random Name"
style="width:100%">
<p>John is the smartest.</p>
</article>
<p>Paul</p>
style="width:100%">
<p>Paul is the prettiest.</p>
</article>
<p>Ringo</p>
style="width:100%">
<p>Ringo is the funniest.</p>
</article>
</section>


<footer class="w3-container w3-padding-64 w3-center w3-
black w3-xlarge">
<a href="#"><i class="fa fa-facebook-official"></i></a>
<a href="#"><i class="fa fa-pinterest-p"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-flickr"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
<p class="w3-medium">
Powered by <a
href="https://www.w3schools.com/w3css/default.asp"
target="_blank">w3.css</a>
</p>
</footer>
<script>
// Automatic Slideshow - change image every 3 seconds
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 3000);
}
</script>
</body>
</html>
Create A Slideshow Gallery
Step 1) Add HTML:
Example

<div class="container">


<div class="mySlides">
<img src="img_woods_wide.jpg"style="width:100%">
</div>
<img src="img_fjords_wide.jpg"style="width:100%">
</div>
<img src="img_mountains_wide.jpg"style="width:100%">
</div>
<img src="img_lights_wide.jpg"style="width:100%">
</div>
<img src="img_nature_wide.jpg"style="width:100%">
</div>
<img src="img_snow_wide.jpg"style="width:100%">
</div>


<a class="prev"onclick="plusSlides(-1)">❮</a>
<a class="next"onclick="plusSlides(1)">❯</a>


<div class="caption-container">
<p id="caption"></p>
</div>


<div class="row">
<div class="column">
<img class="demo
cursor"src="img_woods.jpg" style="width:100%"onclick="currentSlide(1)" alt="T
he Woods">
</div>
<img class="demo
cursor"src="img_fjords.jpg" style="width:100%"onclick="currentSlide(2)" alt="
Trolltunga, Norway">
</div>
<img class="demo
cursor"src="img_mountains.jpg" style="width:100%"onclick="currentSlide(3)" al
t="Mountains and fjords">
</div>
<img class="demo
cursor"src="img_lights.jpg" style="width:100%"onclick="currentSlide(4)" alt="
Northern Lights">
</div>
<img class="demo
cursor"src="img_nature.jpg" style="width:100%"onclick="currentSlide(5)" alt="
Nature and sunrise">
</div>
<img class="demo
cursor"src="img_snow.jpg" style="width:100%"onclick="currentSlide(6)" alt="Sn
owy Mountains">
</div>
</div>
</div>
Step 2) Add CSS:
Style the image gallery, next and previous buttons, the caption text and the
dots:
Example
* {
}
/* Position the image container (needed to position the left and right
arrows) */
.container {
position: relative;
}
/* Hide the images by default */

.mySlides {
display: none;
}
/* Add a pointer when hovering over the thumbnail images */

.cursor {
cursor: pointer;
}
/* Next & previous buttons */

.prev,
.next {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */

.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */

.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */

.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Container for image text */

.caption-container {
text-align: center;
padding: 2px 16px;
color: white;
}
.row:after {
content: "";
display: table;
clear: both;
}
/* Six columns side by side */

.column {
float: left;
width: 16.66%;
}
/* Add a transparency effect for thumnbail images */

.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
Step 3) Add JavaScript:
Example
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls

function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
PORTFOLIO
<!DOCTYPE html>
<html>
<head>
scale=1">
<style>
*{
}
body {
background-color: #f1f1f1;
padding: 20px;
font-family: Arial;
}
/* Center website */
.main {
max-width: 1000px;
margin: auto;
}
h1 {
font-size: 50px;
word-break: break-all;
}
.row {
margin: 8px -16px;
}
/* Add padding BETWEEN each column */

.row,
.row > .column {
padding: 8px;
}
/* Create four equal columns that floats next to each other */

.column {
float: left;
width: 25%;
}
/* Clear floats after rows */

.row:after {
content: "";
display: table;
clear: both;
}
/* Content */
.content {
background-color: white;
padding: 10px;
}
/* Responsive layout - makes a two column-layout instead of

four columns */
.column {
width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of

each other instead of next to each other */
.column {
width: 100%;
}
}
</style>
</head>
<body>


<div class="main">
<h1>MYLOGO.COM</h1>
<hr>
<h2>PORTFOLIO</h2>
<p>Resize the browser window to see the responsive
effect.</p>


<div class="row">
<div class="content">
<img src="/w3images/mountains.jpg" alt="Mountains"
style="width:100%">
<h3>My Work</h3>
<p>Lorem ipsum dolor sit amet, tempor prodesset eos no.
Temporibus necessitatibus sea ei, at tantas oporteat nam.
Lorem ipsum dolor sit amet, tempor prodesset eos no.</p>
</div>
</div>
<img src="/w3images/lights.jpg" alt="Lights"
style="width:100%">
<h3>My Work</h3>
</div>
</div>
<img src="/w3images/nature.jpg" alt="Nature"
style="width:100%">
<h3>My Work</h3>
</div>
</div>
<img src="/w3images/mountains.jpg" alt="Mountains"
style="width:100%">
<h3>My Work</h3>
</div>
</div>

</div>
<img src="/w3images/p3.jpg" alt="Bear" style="width:100%">
<h3>Some Other Work</h3>
</div>

</div>
</body>
</html>
Fullscreen Video Background
Learn how to create a full screen video background that covers the entire
browser window:
Try it Yourself »
How To Create a Fullscreen Video

Step 1) Add HTML:
Example

<video autoplay muted loop id="myVideo">
<source src="rain.mp4" type="video/mp4">
</video>


<h1>Heading</h1>
<p>Lorem ipsum...</p>

<button id="myBtn" onclick="myFunction()">Pause</button>
</div>
Step 2) Add CSS:
Example
/* Style the video: 100% width and height to cover the entire window
*/
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
/* Add some content at the bottom of the video/page */
.content {
position: fixed;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 20px;
}
/* Style the button used to pause/play the video */

#myBtn {
width: 200px;
font-size: 18px;
padding: 10px;
border: none;
background: #000;
color: #fff;
cursor: pointer;
}
#myBtn:hover {
background: #ddd;
color: black;
}
Step 3) Add JavaScript:
Optionally, you can add JavaScript to pause/play the video with a click of a
button:
Example
<script>
// Get the video
var video = document.getElementById("myVideo");
// Get the button

var btn = document.getElementById("myBtn");
// Pause and play the video, and change the button text
function myFunction() {
if (video.paused) {
video.play();
btn.innerHTML = "Pause";
} else {
video.pause();
btn.innerHTML = "Play";
}
}
</script>

Website Plan

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Website Plan

Uploaded by

Copyright:

Available Formats

How TO - Top Navigation

Learn how to create a top navigation bar with CSS.

Top Navigation Bar

Create A Top Navigation Bar

Step 2) Add CSS:

/* Style the links inside the navigation bar */

/* Change the color of links on hover */

/* Add a color to the active/current link */

Full Page Tabs

<meta name="viewport" content="width=device-width, initial-scale=1">

/* Set height of body and the document to 100% */

padding: 14px 16px;

padding: 100px 20px;

#Home {background-color: red;}

#News {background-color: green;}

#Contact {background-color: blue;}

<button class="tablink" onclick="openPage('Home', this, 'red')">Home</button>

<button class="tablink" onclick="openPage('News', this, 'green')" id="defaultOpen">News</button>

<button class="tablink" onclick="openPage('Contact', this, 'blue')">Contact</button>

<button class="tablink" onclick="openPage('About', this, 'orange')">About</button>

<div id="Home" class="tabcontent">

<p>Home is where the heart is..</p>

<div id="News" class="tabcontent">

<p>Some news this fine day!</p>

<div id="Contact" class="tabcontent">

<p>Get in touch, or swing by for a cup of coffee.</p>

<div id="About" class="tabcontent">

<p>Who we are and what we do.</p>

var i, tabcontent, tablinks;

for (i = 0; i < tabcontent.length; i++) {

for (i = 0; i < tablinks.length; i++) {

// Get the element with id="defaultOpen" and click on it

<meta name="viewport" content="width=device-width, initial-scale=1">

body {font-family: Verdana, sans-serif; margin:0}

.mySlides {display: none}

img {vertical-align: middle;}

/* Next & previous buttons */

border-radius: 0 3px 3px 0;

/* Position the "next button" to the right */

border-radius: 3px 0 0 3px;

/* On hover, add a black background color with a little bit see-through */

padding: 8px 12px;

/* Number text (1/3 etc) */

padding: 8px 12px;

transition: background-color 0.6s ease;

from {opacity: .4}

from {opacity: .4}

/* On smaller screens, decrease text size */

@media only screen and (max-width: 300px) {

.prev, .next,.text {font-size: 11px}

<div class="mySlides fade">

<div class="numbertext">1 / 3</div>

<img src="img_nature_wide.jpg" style="width:100%">

<div class="text">Caption Text</div>

<div class="mySlides fade">

<div class="numbertext">2 / 3</div>

<div class="text">Caption Two</div>

<div class="mySlides fade">

<div class="numbertext">3 / 3</div>

<img src="img_mountains_wide.jpg" style="width:100%">

<div class="text">Caption Three</div>

<a class="prev" onclick="plusSlides(-1)">&#10094;</a>

<a class="next" onclick="plusSlides(1)">&#10095;</a>

<a class="prev" onclick="plusSlides(-1)">❮</a>

<a class="next" onclick="plusSlides(1)">❯</a>