Manual Slideshow
Uploaded by
Gonzalo AlvarengaManual Slideshow
Uploaded by
Gonzalo AlvarengaManual Slideshow
Displaying a manual slideshow with W3.CSS is very easy.
Just create many elements with the same class name:
Example
<img class="mySlides" src="img_fjords.jpg">
<img class="mySlides" src="img_lights.jpg">
<img class="mySlides" src="img_mountains.jpg">
<img class="mySlides" src="img_forest.jpg">
And two buttons to scroll the images:
Example
<a class="w3-btn-floating" onclick="plusDivs(-1)">❮</a>
<a class="w3-btn-floating" onclick="plusDivs(+1)">❯</a>
And add a JavaScript to select images:
Example
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length} ;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
Try It Yourself
JavaScript Explained
First, set the slideIndex to 1. (First picture)
Then call showDivs() to display the first image.
When the user clicks one of the buttons call plusDivs().
The plusDivs() function subtracts one or adds one to the slideIndex.
The showDiv() function hides (display="none") all elements with the
class name "mySlides", and displays (display="block") the element with
the given slideIndex.
If the slideIndex is higher than the number of elements (x.length), the
slideIndex is set to zero.
If the slideIndex is less than 1 it is set to number of elements (x.length).
To display an automatic slideshow is even simpler.
You only need a little different JavaScript:
Example
var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
Try It Yourself
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<h2 class="w3-center">Manual Slideshow</h2>
<div class="w3-content" style="max-width:800px;position:relative">
<img class="mySlides" src="img_fjords.jpg" style="width:100%">
<img class="mySlides" src="img_lights.jpg" style="width:100%">
<img class="mySlides" src="img_mountains.jpg" style="width:100%">
<img class="mySlides" src="img_forest.jpg" style="width:100%">
<a class="w3-btn-floating" style="position:absolute;top:45%;left:0"
onclick="plusDivs(-1)"></a>
<a class="w3-btn-floating" style="position:absolute;top:45%;right:0"
onclick="plusDivs(1)"></a>
</div>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<style>
.mySlides {display:none;}
</style>
<body>
<h2 class="w3-center">Automatic Slideshow</h2>
<div class="w3-content w3-section" style="max-width:500px">
<img class="mySlides" src="img_la.jpg" style="width:100%">
<img class="mySlides" src="img_ny.jpg" style="width:100%">
<img class="mySlides" src="img_chicago.jpg" style="width:100%">
</div>
<script>
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, 2000); // Change image every 2 seconds
}
</script>
</body>
</html>
HTML Slides
The slides do not have to be images.
They can be any HTML content:
Slide 3
Lorem ipsum
Example
<div class="mySlides">
<div class="w3-container w3-red">
<h1><b>Did You Know?</b></h1>
<h1><i>We plan to sell trips to the moon in the 2020s</i></h1>
</div>
Try It Yourself
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<style>
.mySlides {display:none;}
</style>
<body>
<h2 class="w3-center">HTML slides</h2>
<div class="w3-content" style="max-width:400px">
<div class="mySlides w3-container w3-red">
<h1><b>Did You Know?</b></h1>
<h1><i>We plan to sell trips to the moon in the 2020s</i></h1>
</div>
<img class="mySlides" src="img_monterosso.jpg" style="width:100%">
<div class="mySlides w3-container w3-xlarge w3-white w3-card-8">
<p><span class="w3-tag w3-yellow">New!</span>
<p>6 Crystal Glasses</p>
<p>Only $99 !!!</p>
</div>
<img class="mySlides" src="img_manarola.jpg" style="width:100%">
</div>
<script>
var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = "block";
setTimeout(carousel, 2000);
}
</script>
</body>
</html>
Slideshow Caption
Trolltunga, Norway
Add a caption text for each image slide with the w3-display-* classes
(topleft, topmiddle, topright, bottomleft, bottommiddle, bottomright or
middle):
Example
<div class="w3-display-container mySlides">
<img src="img_fjords.jpg" style="width:100%">
<div class="w3-display-bottomleft w3-container w3-padding-16 w3-
black">
Trolltunga, Norway
</div>
</div>
Try It Yourself
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Slideshow Caption</h2>
<p>Add a caption text for each image slide with the w3-display-* classes
(topleft, topmiddle, topright, bottomleft, bottommiddle, bottomright or
middle).</p>
</div>
<div class="w3-content" style="max-width:800px;position:relative">
<div class="w3-display-container mySlides">
<img src="img_fjords.jpg" style="width:100%">
<div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-
black">
Trolltunga, Norway
</div>
</div>
<div class="w3-display-container mySlides">
<img src="img_lights.jpg" style="width:100%">
<div class="w3-display-bottomright w3-large w3-container w3-padding-16
w3-black">
Northern Lights, Norway
</div>
</div>
<div class="w3-display-container mySlides">
<img src="img_mountains.jpg" style="width:100%">
<div class="w3-display-topleft w3-large w3-container w3-padding-16 w3-
black">
Beautiful Mountains
</div>
</div>
<div class="w3-display-container mySlides">
<img src="img_forest.jpg" style="width:100%">
<div class="w3-display-topright w3-large w3-container w3-padding-16 w3-
black">
The Rain Forest
</div>
</div>
<div class="w3-display-container mySlides">
<img src="img_mountains.jpg" style="width:100%">
<div class="w3-display-middle w3-large w3-container w3-padding-16 w3-
black">
Mountains!
</div>
</div>
<a class="w3-btn-floating w3-hover-dark-grey"
style="position:absolute;top:45%;left:0" onclick="plusDivs(-1)"></a>
<a class="w3-btn-floating w3-hover-dark-grey"
style="position:absolute;top:45%;right:0" onclick="plusDivs(1)"></a>
</div>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
</script>
</body>
</html>
Slideshow Indicators
An example of using buttons to indicate how many slides there are in the
slideshow, and which slide the user is currently viewing.
Prev Next
123
Example
<div class="w3-center">
<button class="w3-btn" onclick="plusDivs(-1)">❮
Prev</button>
<button class="w3-btn" onclick="plusDivs(1)">Next
❯</button>
<button class="w3-btn demo" onclick="currentDiv(1)">1</button>
<button class="w3-btn demo" onclick="currentDiv(2)">2</button>
<button class="w3-btn demo" onclick="currentDiv(3)">3</button>
</div>
Try It Yourself
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<style>
.mySlides {display:none}
</style>
<body>
<div class="w3-container">
<h2>Slideshow Indicators</h2>
<p>An example of using buttons to indicate how many slides there are in the slideshow,
and which slide the user is currently viewing.</p>
</div>
<div class="w3-content" style="max-width:800px">
<img class="mySlides" src="img_nature_wide.jpg" style="width:100%">
<img class="mySlides" src="img_fjords_wide.jpg" style="width:100%">
<img class="mySlides" src="img_mountains_wide.jpg" style="width:100%">
</div>
<div class="w3-center">
<div class="w3-section">
<button class="w3-btn" onclick="plusDivs(-1)"> Prev</button>
<button class="w3-btn" onclick="plusDivs(1)">Next </button>
</div>
<button class="w3-btn demo" onclick="currentDiv(1)">1</button>
<button class="w3-btn demo" onclick="currentDiv(2)">2</button>
<button class="w3-btn demo" onclick="currentDiv(3)">3</button>
</div>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-red", "");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " w3-red";
}
</script>
</body>
</html>
Another example:
Example
<div class="w3-content w3-display-container">
<img class="mySlides" src="img_nature.jpg">
<img class="mySlides" src="img_fjords.jpg">
<img class="mySlides" src="img_mountains.jpg">
<div class="w3-center w3-display-bottomleft" style="width:100%">
<div class="w3-left" onclick="plusDivs(-1)">❮</div>
<div class="w3-right" onclick="plusDivs(1)">❯</div>
<span class="w3-badge demo w3-
border" onclick="currentDiv(1)"></span>
<span class="w3-badge demo w3-
border" onclick="currentDiv(2)"></span>
<span class="w3-badge demo w3-
border" onclick="currentDiv(3)"></span>
</div>
</div>
Try It Yourself
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<style>
.mySlides {display:none}
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:13px;width:13px;padding:0}
</style>
<body>
<div class="w3-container">
<h2>Slideshow Indicators</h2>
<p>An example of using buttons to indicate how many slides there are in the
slideshow, and which slide the user is currently viewing.</p>
</div>
<div class="w3-content w3-display-container" style="max-width:800px">
<img class="mySlides" src="img_nature_wide.jpg" style="width:100%">
<img class="mySlides" src="img_fjords_wide.jpg" style="width:100%">
<img class="mySlides" src="img_mountains_wide.jpg" style="width:100%">
<div class="w3-center w3-section w3-large w3-text-white w3-display-
bottomleft" style="width:100%">
<div class="w3-left w3-padding-left w3-hover-text-khaki"
onclick="plusDivs(-1)">❮</div>
<div class="w3-right w3-padding-right w3-hover-text-khaki"
onclick="plusDivs(1)">❯</div>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white"
onclick="currentDiv(1)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white"
onclick="currentDiv(2)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white"
onclick="currentDiv(3)"></span>
</div>
</div>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-white", "");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " w3-white";
}
</script>
</body>
</html>
Images as Indicators
An example of using images as indicators:
Example
<div class="w3-content" style="max-width:1200px">
<img class="mySlides" src="img_nature_wide.jpg" style="width:100%"
>
<img class="mySlides" src="img_fjords_wide.jpg" style="width:100%"
>
<img class="mySlides" src="img_mountains_wide.jpg" style="width:10
0%">
<div class="w3-row-padding w3-section">
<div class="w3-col s4">
<img class="demo w3-border w3-hover-shadow"
src="img_nature_wide.jpg" onclick="currentDiv(1)">
</div>
<div class="w3-col s4">
<img class="demo w3-border w3-hover-shadow"
src="img_fjords_wide.jpg" onclick="currentDiv(2)">
</div>
<div class="w3-col s4">
<img class="demo w3-border w3-hover-shadow"
src="img_mountains_wide.jpg" onclick="currentDiv(3)">
</div>
</div>
</div>
Try It Yourself
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<style>
.mySlides {display:none}
</style>
<body>
<div class="w3-container">
<h2>Slideshow Indicators</h2>
<p>An example of using images to indicate how many slides there are in the
slideshow, and which image the user is currently viewing (red border).</p>
</div>
<div class="w3-content" style="max-width:1200px">
<img class="mySlides" src="img_nature_wide.jpg" style="width:100%">
<img class="mySlides" src="img_fjords_wide.jpg" style="width:100%">
<img class="mySlides" src="img_mountains_wide.jpg" style="width:100%">
<div class="w3-row-padding w3-section">
<div class="w3-col s4">
<img class="demo w3-border w3-hover-shadow"
src="img_nature_wide.jpg" style="width:100%" onclick="currentDiv(1)">
</div>
<div class="w3-col s4">
<img class="demo w3-border w3-hover-shadow" src="img_fjords_wide.jpg"
style="width:100%" onclick="currentDiv(2)">
</div>
<div class="w3-col s4">
<img class="demo w3-border w3-hover-shadow"
src="img_mountains_wide.jpg" style="width:100%" onclick="currentDiv(3)">
</div>
</div>
</div>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-border-red", "");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " w3-border-red";
}
</script>
</body>
</html>
Animated Slides
Slide or fade in an element from the top, bottom, left or right of the screen
with the w3-animate-* classes.
Example
<img class="mySlides w3-animate-top" src="img_01.jpg">
<img class="mySlides w3-animate-bottom" src="img_02.jpg">
<img class="mySlides w3-animate-top" src="img_03.jpg">
<img class="mySlides w3-animate-bottom" src="img_04.jpg">
Try It Yourself
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<style>
.mySlides {display:none;}
</style>
<body>
<div class="w3-container">
<h2>Animated Slides</h2>
<p>Slide or fade in an element from the top, bottom, left or right of the
screen with the w3-animate-* classes.</p>
</div>
<div class="w3-content w3-section" style="max-width:500px">
<img class="mySlides w3-animate-top" src="img_rr_01.jpg"
style="width:100%">
<img class="mySlides w3-animate-bottom" src="img_rr_02.jpg"
style="width:100%">
<img class="mySlides w3-animate-top" src="img_rr_03.jpg"
style="width:100%">
<img class="mySlides w3-animate-bottom" src="img_rr_04.jpg"
style="width:100%">
</div>
<script>
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, 2500);
}
</script>
</body>
</html>
Faded Animation
The w3-animate-fading class fades an element in and out (takes about
10 seconds).
Example
<img class="mySlides w3-animate-fading" src="img_01.jpg">
<img class="mySlides w3-animate-fading" src="img_02.jpg">
<img class="mySlides w3-animate-fading" src="img_03.jpg">
<img class="mySlides w3-animate-fading" src="img_04.jpg">
Try It Yourself
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-content w3-section" style="max-width:500px">
<p>The w3-animate-fading class animates an element in and out (takes about
10 seconds).</p>
<img class="mySlides w3-animate-fading" src="img_rr_01.jpg"
style="width:100%">
<img class="mySlides w3-animate-fading" src="img_rr_02.jpg"
style="width:100%">
<img class="mySlides w3-animate-fading" src="img_rr_03.jpg"
style="width:100%">
<img class="mySlides w3-animate-fading" src="img_rr_04.jpg"
style="width:100%">
</div>
<script>
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, 9000);
}
</script>
</body>
</html>
Templates
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-
black.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.6.3/css/font-awesome.min.css">
<body id="myPage">
<!-- Side Navigation on click -->
<nav class="w3-sidenav w3-white w3-card-2 w3-animate-left"
style="display:none;z-index:2" id="mySidenav">
<a href="javascript:void(0)" onclick="w3_close()" class="w3-closenav w3-
xxxlarge w3-text-teal">Close
<i class="fa fa-remove"></i>
</a>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
</nav>
<!-- Navbar -->
<div class="w3-top">
<ul class="w3-navbar w3-theme-d2 w3-left-align w3-large">
<li class="w3-hide-medium w3-hide-large w3-opennav w3-right">
<a class="w3-hover-white w3-large w3-theme-d2" href="javascript:void(0);"
onclick="openNav()"><i class="fa fa-bars"></i></a>
</li>
<li><a href="#" class="w3-teal"><i class="fa fa-home w3-margin-
right"></i>Logo</a></li>
<li class="w3-hide-small"><a href="#" class="w3-hover-white">Link
1</a></li>
<li class="w3-hide-small"><a href="#" class="w3-hover-white">Link
2</a></li>
<li class="w3-hide-small w3-dropdown-hover">
<a href="#" title="Notifications">Dropdown <i class="fa fa-caret-
down"></i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
</li>
<li class="w3-hide-small w3-right"><a href="#" class="w3-hover-teal"
title="Search"><i class="fa fa-search"></i></a></li>
</ul>
</div>
<!-- Navbar on small screens -->
<div id="navDemo" class="w3-hide w3-hide-large w3-hide-medium w3-top"
style="margin-top:43px;">
<ul class="w3-navbar w3-left-align w3-large w3-theme">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li class="w3-dropdown-hover">
<a href="#" title="Notifications">Dropdown <i class="fa fa-caret-
down"></i></a>
<div class="w3-dropdown-content w3-light-grey w3-card-4">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
</li>
</ul>
</div>
<div class="w3-display-container w3-animate-opacity">
<img class="testimg" src="img_sailboat.jpg" alt="boat"
style="width:100%;min-height:350px;max-height:600px;">
<div class="w3-container w3-display-bottomleft w3-margin-bottom">
<button onclick="document.getElementById('id01').style.display='block'"
class="w3-btn w3-xlarge w3-theme w3-hover-teal" title="Go To
W3.CSS">LEARN W3.CSS</button>
</div>
</div>
<!-- Modal -->
<div id="id01" class="w3-modal">
<div class="w3-modal-content w3-card-8 w3-animate-top">
<header class="w3-container w3-teal">
<span onclick="document.getElementById('id01').style.display='none'"
class="w3-closebtn"><i class="fa fa-remove"></i></span>
<h4>Oh snap! We just showed you a modal..</h4>
<h5>Because we can <i class="fa fa-smile-o"></i></h5>
</header>
<div class="w3-container">
<p>Cool huh? Ok, enough teasing around..</p>
<p>Go to our <a class="w3-btn" href="/w3css/default.asp">W3.CSS
Tutorial</a> to learn more!</p>
</div>
<footer class="w3-container w3-teal">
<p>Modal footer</p>
</footer>
</div>
</div>
<!-- Container -->
<div class="w3-container w3-padding-64 w3-center">
<h2>OUR TEAM</h2>
<p>Meet the team - our office rats:</p>
<div class="w3-row"><br>
<div class="w3-quarter">
<img src="img_avatar.jpg" alt="Boss" style="width:45%" class="w3-circle
w3-hover-opacity">
<h3>Johnny Walker</h3>
<p>Web Designer</p>
</div>
<div class="w3-quarter">
<img src="img_avatar.jpg" alt="Boss" style="width:45%" class="w3-circle
w3-hover-opacity">
<h3>Rebecca Flex</h3>
<p>Support</p>
</div>
<div class="w3-quarter">
<img src="img_avatar.jpg" alt="Boss" style="width:45%" class="w3-circle
w3-hover-opacity">
<h3>Jan Ringo</h3>
<p>Boss man</p>
</div>
<div class="w3-quarter">
<img src="img_avatar.jpg" alt="Boss" style="width:45%" class="w3-circle
w3-hover-opacity">
<h3>Kai Ringo</h3>
<p>Fixer</p>
</div>
</div>
</div>
<!-- Row -->
<div class="w3-row-padding w3-padding-64 w3-theme-l1">
<div class="w3-quarter">
<h2>Our Portfolio</h2>
<p>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.</p>
</div>
<div class="w3-quarter">
<div class="w3-card-2 w3-white">
<img src="img_fjords.jpg" alt="Vernazza" style="width:100%">
<div class="w3-container">
<h3>Customer 1</h3>
<h4>Trade</h4>
<p>Blablabla</p>
<p>Blablabla</p>
<p>Blablabla</p>
<p>Blablabla</p>
</div>
</div>
</div>
<div class="w3-quarter">
<div class="w3-card-2 w3-white">
<img src="img_lights.jpg" alt="Cinque Terre" style="width:100%">
<div class="w3-container">
<h3>Customer 2</h3>
<h4>Trade</h4>
<p>Blablabla</p>
<p>Blablabla</p>
<p>Blablabla</p>
<p>Blablabla</p>
</div>
</div>
</div>
<div class="w3-quarter">
<div class="w3-card-2 w3-white">
<img src="img_mountains.jpg" alt="Monterosso" style="width:100%">
<div class="w3-container">
<h3>Customer 3</h3>
<h4>Trade</h4>
<p>Blablabla</p>
<p>Blablabla</p>
<p>Blablabla</p>
<p>Blablabla</p>
</div>
</div>
</div>
</div>
<!-- Container -->
<div class="w3-container" style="position:relative">
<a onclick="w3_open()" class="w3-btn-floating-large w3-teal"
style="position:absolute;top:-28px;right:24px;z-index:0;">
<i class="fa fa-plus"></i></a>
</div>
<div class="w3-row-padding w3-center w3-padding-64">
<h2>PRICING</h2>
<p>Choose a pricing plan that fits your needs.</p><br>
<div class="w3-third w3-margin-bottom">
<ul class="w3-ul w3-border w3-hover-shadow">
<li class="w3-theme">
<p class="w3-xlarge">Basic</p>
</li>
<li class="w3-padding-16"><b>10GB</b> Storage</li>
<li class="w3-padding-16"><b>10</b> Emails</li>
<li class="w3-padding-16"><b>10</b> Domains</li>
<li class="w3-padding-16"><b>Endless</b> Support</li>
<li class="w3-padding-16">
<h2 class="w3-wide"><i class="fa fa-usd"></i> 10</h2>
<span class="w3-opacity">per month</span>
</li>
<li class="w3-theme-l5 w3-padding-24">
<button class="w3-btn w3-teal w3-padding-large"><i class="fa fa-
check"></i> Sign Up</button>
</li>
</ul>
</div>
<div class="w3-third w3-margin-bottom">
<ul class="w3-ul w3-border w3-hover-shadow">
<li class="w3-theme-l2">
<p class="w3-xlarge">Pro</p>
</li>
<li class="w3-padding-16"><b>25GB</b> Storage</li>
<li class="w3-padding-16"><b>25</b> Emails</li>
<li class="w3-padding-16"><b>25</b> Domains</li>
<li class="w3-padding-16"><b>Endless</b> Support</li>
<li class="w3-padding-16">
<h2 class="w3-wide"><i class="fa fa-usd"></i> 25</h2>
<span class="w3-opacity">per month</span>
</li>
<li class="w3-theme-l5 w3-padding-24">
<button class="w3-btn w3-teal w3-padding-large"><i class="fa fa-
check"></i> Sign Up</button>
</li>
</ul>
</div>
<div class="w3-third w3-margin-bottom">
<ul class="w3-ul w3-border w3-hover-shadow">
<li class="w3-theme">
<p class="w3-xlarge">Premium</p>
</li>
<li class="w3-padding-16"><b>50GB</b> Storage</li>
<li class="w3-padding-16"><b>50</b> Emails</li>
<li class="w3-padding-16"><b>50</b> Domains</li>
<li class="w3-padding-16"><b>Endless</b> Support</li>
<li class="w3-padding-16">
<h2 class="w3-wide"><i class="fa fa-usd"></i> 50</h2>
<span class="w3-opacity">per month</span>
</li>
<li class="w3-theme-l5 w3-padding-24">
<button class="w3-btn w3-teal w3-padding-large"><i class="fa fa-
check"></i> Sign Up</button>
</li>
</ul>
</div>
</div>
<!-- Container -->
<div class="w3-container w3-padding-64 w3-theme-l5">
<div class="w3-row">
<div class="w3-col m5">
<div class="w3-padding-16"><span class="w3-xlarge w3-border-teal w3-
bottombar">Contact Us</span></div>
<h3>Address</h3>
<p>Swing by for a cup of coffee, or whatever.</p>
<p><i class="fa fa-map-marker w3-text-teal w3-xlarge"></i> Chicago,
US</p>
<p><i class="fa fa-phone w3-text-teal w3-xlarge"></i> +00
1515151515</p>
<p><i class="fa fa-envelope-o w3-text-teal w3-
xlarge"></i> [email protected]</p>
</div>
<div class="w3-col m7">
<form class="w3-container w3-card-4 w3-padding-16 w3-white">
<div class="w3-group">
<label class="w3-label">Name</label>
<input class="w3-input" type="text">
</div>
<div class="w3-group">
<label class="w3-label">Email</label>
<input class="w3-input" type="text">
</div>
<div class="w3-group">
<label class="w3-label">Subject</label>
<input class="w3-input" type="text">
</div>
<input class="w3-check" type="checkbox" checked>
<label class="w3-validate">I Like it!</label>
<button type="button" class="w3-btn w3-right w3-
theme">Send</button>
</form>
</div>
</div>
</div>
<!-- Google Maps -->
<div id="googleMap" style="width:100%;height:420px;"></div>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(41.878114, -87.629798);
function initialize() {
var mapProp = {
center: myCenter,
zoom: 5,
scrollwheel: false,
draggable: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new
google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position: myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<!-- Footer -->
<footer class="w3-container w3-padding-32 w3-theme-d1 w3-center">
<h4>Follow Us</h4>
<a class="w3-btn-floating w3-teal" href="javascript:void(0)"
title="Facebook"><i class="fa fa-facebook"></i></a>
<a class="w3-btn-floating w3-teal" href="javascript:void(0)"
title="Twitter"><i class="fa fa-twitter"></i></a>
<a class="w3-btn-floating w3-teal" href="javascript:void(0)" title="Google
+"><i class="fa fa-google-plus"></i></a>
<a class="w3-btn-floating w3-teal w3-hide-small" href="javascript:void(0)"
title="Linkedin"><i class="fa fa-linkedin"></i></a>
<p>Powered by <a href="http://www.w3schools.com/w3css/default.asp"
target="_blank">w3.css</a></p>
<div style="position:relative;bottom:100px;z-index:1;" class="w3-tooltip w3-
right">
<span class="w3-text w3-padding w3-teal w3-hide-small">Go To
Top</span>
<a class="w3-btn w3-theme" href="#myPage"><span class="w3-xlarge">
<i class="fa fa-chevron-circle-up"></i></span></a>
</div>
</footer>
<!-- Script For Side Navigation -->
<script>
function w3_open() {
var x = document.getElementById("mySidenav");
x.style.width = "300px";
x.style.textAlign = "center";
x.style.fontSize = "40px";
x.style.paddingTop = "10%";
x.style.display = "block";
}
function w3_close() {
document.getElementById("mySidenav").style.display = "none";
}
// Used to toggle the menu on smaller screens when clicking on the menu
button
function openNav() {
var x = document.getElementById("navDemo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?
family=Raleway">
<style>
body,h1,h2,h3,h4,h5 {font-family: "Raleway", sans-serif}
</style>
<body class="w3-light-grey">
<!-- w3-content defines a container for fixed size centered content,
and is wrapped around the whole page content, except for the footer in this
example -->
<div class="w3-content" style="max-width:1400px">
<!-- Header -->
<div class="w3-container w3-center w3-padding-32">
<h1><b>MY BLOG</b></h1>
<p>Welcome to the blog of <span class="w3-tag">unknown</span></p>
</div>
<!-- About Card on medium screens -->
<div class="w3-hide-large w3-hide-small w3-margin-top w3-margin-bottom">
<div class="w3-container w3-white w3-padding-32">
<img src="img_avatar_g.jpg" alt="Me" style="width:150px" class="w3-left
w3-round-large w3-margin-right">
<span>Just me, myself and I, exploring the universe of uknownment. I have
a heart of love and an interest of lorem ipsum and mauris neque quam blog. I
want to share my world with you.</span>
</div>
</div>
<!-- About Card on small screens -->
<div class="w3-hide-large w3-hide-medium w3-margin-top w3-margin-
bottom">
<img src="img_avatar_g.jpg" style="width:100%" alt="Me">
<div class="w3-container w3-white">
<h4><b>My Name</b></h4>
<p>Just me, myself and I, exploring the universe of uknownment. I have a
heart of love and a interest of lorem ipsum and mauris neque quam blog. I
want to share my world with you.</p>
</div>
</div>
<!-- Grid -->
<div class="w3-row">
<!-- Blog entries -->
<div class="w3-col l8 s12">
<!-- Blog entry -->
<div class="w3-card-4 w3-margin w3-white">
<img src="img_woods.jpg" alt="Nature" style="width:100%">
<div class="w3-container w3-padding-8">
<h3><b>TITLE HEADING</b></h3>
<h5>Title description, <span class="w3-opacity">April 7,
2014</span></h5>
</div>
<div class="w3-container">
<p>Mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl.
Sed mattis nunc id lorem euismod placerat. Vivamus porttitor magna enim, ac
accumsan tortor cursus at. Phasellus sed ultricies mi non congue ullam corper.
Praesent tincidunt sed
tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies
congue gravida diam non fringilla.</p>
<div class="w3-row">
<div class="w3-col m8 s12">
<p><button class="w3-btn w3-padding-large w3-white w3-border w3-
hover-border-black"><b>READ MORE </b></button></p>
</div>
<div class="w3-col m4 w3-hide-small">
<p><span class="w3-padding-large w3-right"><b>Comments </b>
<span class="w3-tag">0</span></span></p>
</div>
</div>
</div>
</div>
<hr>
<!-- Blog entry -->
<div class="w3-card-4 w3-margin w3-white">
<img src="img_bridge.jpg" alt="Norway" style="width:100%">
<div class="w3-container w3-padding-8">
<h3><b>BLOG ENTRY</b></h3>
<h5>Title description, <span class="w3-opacity">April 2,
2014</span></h5>
</div>
<div class="w3-container">
<p>Mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl.
Sed mattis nunc id lorem euismod placerat. Vivamus porttitor magna enim, ac
accumsan tortor cursus at. Phasellus sed ultricies mi non congue ullam corper.
Praesent tincidunt sed
tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies
congue gravida diam non fringilla.</p>
<div class="w3-row">
<div class="w3-col m8 s12">
<p><button class="w3-btn w3-padding-large w3-white w3-border w3-
hover-border-black"><b>READ MORE </b></button></p>
</div>
<div class="w3-col m4 w3-hide-small">
<p><span class="w3-padding-large w3-right"><b>Comments </b>
<span class="w3-badge">2</span></span></p>
</div>
</div>
</div>
</div>
<!-- END BLOG ENTRIES -->
</div>
<!-- Introduction menu -->
<div class="w3-col l4 w3-hide-medium w3-hide-small">
<!-- About Card -->
<div class="w3-card-2 w3-margin w3-margin-top">
<img src="img_avatar_g.jpg" style="width:100%">
<div class="w3-container w3-white">
<h4><b>My Name</b></h4>
<p>Just me, myself and I, exploring the universe of uknownment. I have a
heart of love and a interest of lorem ipsum and mauris neque quam blog. I
want to share my world with you.</p>
</div>
</div><hr>
<!-- Posts -->
<div class="w3-card-2 w3-margin">
<div class="w3-container w3-padding">
<h4>Popular Posts</h4>
</div>
<ul class="w3-ul w3-hoverable w3-white">
<li class="w3-padding-16">
<img src="img_workshop.jpg" alt="Image" class="w3-left w3-margin-
right" style="width:50px">
<span class="w3-large">Lorem</span><br>
<span>Sed mattis nunc</span>
</li>
<li class="w3-padding-16">
<img src="img_gondol.jpg" alt="Image" class="w3-left w3-margin-right"
style="width:50px">
<span class="w3-large">Ipsum</span><br>
<span>Praes tinci sed</span>
</li>
<li class="w3-padding-16">
<img src="img_skies.jpg" alt="Image" class="w3-left w3-margin-right"
style="width:50px">
<span class="w3-large">Dorum</span><br>
<span>Ultricies congue</span>
</li>
<li class="w3-padding-16 w3-hide-medium w3-hide-small">
<img src="img_rock.jpg" alt="Image" class="w3-left w3-margin-right"
style="width:50px">
<span class="w3-large">Mingsum</span><br>
<span>Lorem ipsum dipsum</span>
</li>
</ul>
</div>
<hr>
<!-- Labels / tags -->
<div class="w3-card-2 w3-margin">
<div class="w3-container w3-padding">
<h4>Tags</h4>
</div>
<div class="w3-container w3-white">
<p><span class="w3-tag w3-black w3-margin-bottom">Travel</span>
<span class="w3-tag w3-light-grey w3-small w3-margin-bottom">New
York</span> <span class="w3-tag w3-light-grey w3-small w3-margin-
bottom">London</span>
<span class="w3-tag w3-light-grey w3-small w3-margin-
bottom">IKEA</span> <span class="w3-tag w3-light-grey w3-small w3-
margin-bottom">NORWAY</span> <span class="w3-tag w3-light-grey w3-
small w3-margin-bottom">DIY</span>
<span class="w3-tag w3-light-grey w3-small w3-margin-
bottom">Ideas</span> <span class="w3-tag w3-light-grey w3-small w3-
margin-bottom">Baby</span> <span class="w3-tag w3-light-grey w3-small
w3-margin-bottom">Family</span>
<span class="w3-tag w3-light-grey w3-small w3-margin-
bottom">News</span> <span class="w3-tag w3-light-grey w3-small w3-
margin-bottom">Clothing</span> <span class="w3-tag w3-light-grey w3-
small w3-margin-bottom">Shopping</span>
<span class="w3-tag w3-light-grey w3-small w3-margin-
bottom">Sports</span> <span class="w3-tag w3-light-grey w3-small w3-
margin-bottom">Games</span>
</p>
</div>
</div>
<!-- END Introduction Menu -->
</div>
<!-- END GRID -->
</div><br>
<!-- END w3-content -->
</div>
<!-- Footer -->
<footer class="w3-container w3-dark-grey w3-padding-32 w3-margin-top">
<button class="w3-btn w3-disabled w3-padding-large w3-margin-
bottom">Previous</button>
<button class="w3-btn w3-padding-large w3-margin-bottom">Next
</button>
<p>Powered by <a href="http://www.w3schools.com/w3css/default.asp"
target="_blank">w3.css</a></p>
</footer>
</body>
</html>
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?
family=Montserrat">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.6.3/css/font-awesome.min.css">
<style>
body,h1 {font-family: "Montserrat", sans-serif; font-weight: bold}
img {margin-bottom: -7px}
.w3-row-padding img {margin-bottom: 12px}
</style>
<body>
<!-- Sidenav -->
<nav class="w3-sidenav w3-black w3-card-2 w3-animate-top w3-center w3-
xxlarge" style="display:none;padding-top:220px" id="mySidenav">
<a href="javascript:void(0)" onclick="w3_close()" class="w3-closenav w3-
jumbo w3-right w3-display-topright" style="padding:6px 24px">
<i class="fa fa-remove"></i>
</a>
<a href="javascript:void(0)" class="w3-text-grey w3-hover-
black">About</a>
<a href="javascript:void(0)" class="w3-text-grey w3-hover-
black">Photos</a>
<a href="javascript:void(0)" class="w3-text-grey w3-hover-black">Shop</a>
<a href="javascript:void(0)" class="w3-text-grey w3-hover-
black">Contact</a>
</nav>
<!-- !PAGE CONTENT! -->
<div class="w3-content" style="max-width:1500px">
<div class="w3-container w3-padding-32 w3-center w3-opacity w3-margin-
bottom">
<span class="w3-opennav w3-xxlarge w3-right w3-margin-right"
onclick="w3_open()"><i class="fa fa-bars"></i></span>
<div class="w3-clear"></div>
<h1>PHOTOLIO</h1>
<p>A template made by w3.css for photographers.</p>
<p class="w3-padding-16"><button class="w3-btn"
onclick="myFunction()">Toggle Grid Padding</button></p>
</div>
<!-- Photo Grid -->
<div id="myGrid">
<div class="w3-third">
<img src="img_rocks.jpg" style="width:100%">
<img src="img_sound.jpg" style="width:100%">
<img src="img_woods.jpg" style="width:100%">
<img src="img_rock.jpg" style="width:100%">
<img src="img_nature.jpg" style="width:100%">
<img src="img_mist.jpg" style="width:100%">
</div>
<div class="w3-third">
<img src="img_coffee.jpg" style="width:100%">
<img src="img_bridge.jpg" style="width:100%">
<img src="img_notebook.jpg" style="width:100%">
<img src="img_london.jpg" style="width:100%">
<img src="img_rocks.jpg" style="width:100%">
<img src="img_avatar_g.jpg" style="width:100%">
</div>
<div class="w3-third">
<img src="img_mist.jpg" style="width:100%">
<img src="img_workbench.jpg" style="width:100%">
<img src="img_gondol.jpg" style="width:100%">
<img src="img_skies.jpg" style="width:100%">
<img src="img_lights.jpg" style="width:100%">
<img src="img_workshop.jpg" style="width:100%">
</div>
</div>
</div>
<!-- Clear floats -->
<div class="w3-clear"></div><br><br>
<!-- Footer -->
<footer class="w3-container w3-padding-64 w3-light-grey w3-center w3-
margin-top w3-opacity">
<div class="w3-xlarge w3-padding-32">
<a href="#" class="w3-hover-text-indigo"><i class="fa fa-facebook-
official"></i></a>
<a href="#" class="w3-hover-text-red"><i class="fa fa-pinterest-
p"></i></a>
<a href="#" class="w3-hover-text-light-blue"><i class="fa fa-
twitter"></i></a>
<a href="#" class="w3-hover-text-grey"><i class="fa fa-flickr"></i></a>
<a href="#" class="w3-hover-text-indigo"><i class="fa fa-
linkedin"></i></a>
</div>
<p style="font-weight:normal">Powered by <a
href="http://www.w3schools.com/w3css/default.asp"
target="_blank">w3.css</a></p>
</footer>
<script>
// Toggle grid padding
function myFunction() {
var x = document.getElementById("myGrid");
if (x.className.indexOf("w3-row-padding") == -1) {
x.className += " w3-row-padding";
} else {
x.className = x.className.replace(" w3-row-padding", "");
}
}
// Open and close sidenav
function w3_open() {
document.getElementById("mySidenav").style.width = "100%";
document.getElementById("mySidenav").style.display = "block";
}
function w3_close() {
document.getElementById("mySidenav").style.display = "none";
}
</script>
</body>
</html>
Start
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?
family=Montserrat">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.6.3/css/font-awesome.min.css">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif}
.w3-navbar,h1,button {font-family: "Montserrat", sans-serif}
.fa-anchor,.fa-coffee {font-size:200px}
</style>
<body>
<!-- Navbar -->
<ul class="w3-navbar w3-red w3-card-2 w3-top w3-left-align w3-large">
<li class="w3-hide-medium w3-hide-large w3-opennav w3-right">
<a class="w3-padding-large w3-hover-white w3-large w3-red"
href="javascript:void(0);" onclick="myFunction()" title="Toggle Navigation
Menu"><i class="fa fa-bars"></i></a>
</li>
<li><a href="#" class="w3-padding-large w3-white">Home</a></li>
<li class="w3-hide-small"><a href="#" class="w3-padding-large w3-hover-
white">Link 1</a></li>
<li class="w3-hide-small"><a href="#" class="w3-padding-large w3-hover-
white">Link 2</a></li>
<li class="w3-hide-small"><a href="#" class="w3-padding-large w3-hover-
white">Link 3</a></li>
<li class="w3-hide-small"><a href="#" class="w3-padding-large w3-hover-
white">Link 4</a></li>
</ul>
<!-- Navbar on small screens -->
<div id="navDemo" class="w3-hide w3-hide-large w3-hide-medium w3-top"
style="margin-top:51px">
<ul class="w3-navbar w3-left-align w3-large w3-black">
<li><a class="w3-padding-large" href="#">Link 1</a></li>
<li><a class="w3-padding-large" href="#">Link 2</a></li>
<li><a class="w3-padding-large" href="#">Link 3</a></li>
<li><a class="w3-padding-large" href="#">Link 4</a></li>
</ul>
</div>
<!-- Header -->
<div class="w3-container w3-red w3-center w3-padding-128">
<h1 class="w3-margin w3-jumbo">START PAGE</h1>
<p class="w3-xlarge">Template by w3.css</p>
<button class="w3-btn w3-padding-16 w3-large w3-margin-top">Get
Started</button>
</div>
<!-- First Grid -->
<div class="w3-row-padding w3-padding-64 w3-container">
<div class="w3-content">
<div class="w3-twothird">
<h1>Lorem Ipsum</h1>
<h5 class="w3-padding-32">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.</h5>
<p class="w3-text-grey">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. 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. Ut enim ad minim veniam, quis
nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="w3-third w3-center">
<i class="fa fa-anchor w3-padding-64 w3-text-red"></i>
</div>
</div>
</div>
<!-- Second Grid -->
<div class="w3-row-padding w3-light-grey w3-padding-64 w3-container">
<div class="w3-content">
<div class="w3-third w3-center">
<i class="fa fa-coffee w3-padding-64 w3-text-red w3-margin-right"></i>
</div>
<div class="w3-twothird">
<h1>Lorem Ipsum</h1>
<h5 class="w3-padding-32">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.</h5>
<p class="w3-text-grey">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. 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. Ut enim ad minim veniam, quis
nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<div class="w3-container w3-black w3-center w3-opacity w3-padding-64">
<h1 class="w3-margin w3-xlarge">Quote of the day: live life</h1>
</div>
<!-- Footer -->
<footer class="w3-container w3-padding-64 w3-center w3-opacity">
<div class="w3-xlarge w3-padding-32">
<a href="#" class="w3-hover-text-indigo"><i class="fa fa-facebook-
official"></i></a>
<a href="#" class="w3-hover-text-red"><i class="fa fa-pinterest-
p"></i></a>
<a href="#" class="w3-hover-text-light-blue"><i class="fa fa-
twitter"></i></a>
<a href="#" class="w3-hover-text-grey"><i class="fa fa-flickr"></i></a>
<a href="#" class="w3-hover-text-indigo"><i class="fa fa-
linkedin"></i></a>
</div>
<p>Powered by <a href="http://www.w3schools.com/w3css/default.asp"
target="_blank">w3.css</a></p>
</footer>
<script>
// Used to toggle the menu on small screens when clicking on the menu button
function myFunction() {
var x = document.getElementById("navDemo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?
family=Raleway">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.6.3/css/font-awesome.min.css">
<style>
html,body,h1,h2,h3,h4,h5 {font-family: "Raleway", sans-serif}
.w3-sidenav a,.w3-sidenav h4 {font-weight:bold}
</style>
<body class="w3-light-grey w3-content" style="max-width:1600px">
<!-- Sidenav/menu -->
<nav class="w3-sidenav w3-collapse w3-white w3-animate-left" style="z-
index:3;width:300px;" id="mySidenav"><br>
<div class="w3-container">
<a href="#" onclick="w3_close()" class="w3-hide-large w3-right w3-jumbo
w3-padding" title="close menu">
<i class="fa fa-remove"></i>
</a>
<img src="img_avatar_g2.jpg" style="width:45%;" class="w3-
round"><br><br>
<h4 class="w3-padding-0"><b>PORTFOLIO</b></h4>
<p class="w3-text-grey">Template by W3.CSS</p>
</div>
<a href="#" class="w3-padding w3-text-teal">HOME</a>
<a href="#" class="w3-padding">ABOUT</a>
<a href="#" class="w3-padding">PORTFOLIO</a>
<a href="#" class="w3-padding">SHOP</a>
<a href="#" class="w3-padding">CONTACT</a>
<div class="w3-section w3-padding-top w3-large">
<a href="#" class="w3-hover-white w3-hover-text-indigo w3-show-inline-
block"><i class="fa fa-facebook-official"></i></a>
<a href="#" class="w3-hover-white w3-hover-text-red w3-show-inline-
block"><i class="fa fa-pinterest-p"></i></a>
<a href="#" class="w3-hover-white w3-hover-text-light-blue w3-show-inline-
block"><i class="fa fa-twitter"></i></a>
<a href="#" class="w3-hover-white w3-hover-text-grey w3-show-inline-
block"><i class="fa fa-flickr"></i></a>
<a href="#" class="w3-hover-white w3-hover-text-indigo w3-show-inline-
block"><i class="fa fa-linkedin"></i></a>
</div>
</nav>
<!-- Overlay effect when opening sidenav on small screens -->
<div class="w3-overlay w3-hide-large w3-animate-opacity"
onclick="w3_close()" style="cursor:pointer" title="close side menu"
id="myOverlay"></div>
<!-- !PAGE CONTENT! -->
<div class="w3-main" style="margin-left:300px">
<!-- Header -->
<header class="w3-container">
<a href="#"><img src="img_avatar_g2.jpg" style="width:65px;"
class="w3-circle w3-right w3-margin w3-hide-large w3-hover-opacity"></a>
<span class="w3-opennav w3-hide-large w3-xxlarge w3-hover-text-grey"
onclick="w3_open()"><i class="fa fa-bars"></i></span>
<h1><b>My Portfolio</b></h1>
<div class="w3-section w3-bottombar w3-padding-16">
<span class="w3-margin-right">Filter:</span>
<button class="w3-btn">ALL</button>
<button class="w3-btn w3-white"><i class="fa fa-diamond w3-margin-
right"></i>Design</button>
<button class="w3-btn w3-white w3-hide-small"><i class="fa fa-photo w3-
margin-right"></i>Photos</button>
<button class="w3-btn w3-white w3-hide-small"><i class="fa fa-map-pin
w3-margin-right"></i>Art</button>
</div>
</header>
<!-- First Photo Grid-->
<div class="w3-row-padding">
<div class="w3-third w3-container w3-margin-bottom">
<img src="img_mountains.jpg" alt="Norway" style="width:100%"
class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>Lorem Ipsum</b></p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum,
porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom">
<img src="img_lights.jpg" alt="Norway" style="width:100%" class="w3-
hover-opacity">
<div class="w3-container w3-white">
<p><b>Lorem Ipsum</b></p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum,
porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</div>
</div>
<div class="w3-third w3-container">
<img src="img_nature.jpg" alt="Norway" style="width:100%" class="w3-
hover-opacity">
<div class="w3-container w3-white">
<p><b>Lorem Ipsum</b></p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum,
porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</div>
</div>
</div>
<!-- Second Photo Grid-->
<div class="w3-row-padding">
<div class="w3-third w3-container w3-margin-bottom">
<img src="img_fjords.jpg" alt="Norway" style="width:100%" class="w3-
hover-opacity">
<div class="w3-container w3-white">
<p><b>Lorem Ipsum</b></p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum,
porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom">
<img src="img_lights.jpg" alt="Norway" style="width:100%" class="w3-
hover-opacity">
<div class="w3-container w3-white">
<p><b>Lorem Ipsum</b></p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum,
porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</div>
</div>
<div class="w3-third w3-container">
<img src="img_mountains.jpg" alt="Norway" style="width:100%"
class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>Lorem Ipsum</b></p>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum,
porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</div>
</div>
</div>
<!-- Pagination -->
<div class="w3-center w3-padding-32">
<ul class="w3-pagination">
<li><a class="w3-black" href="#">1</a></li>
<li><a class="w3-hover-black" href="#">2</a></li>
<li><a class="w3-hover-black" href="#">3</a></li>
<li><a class="w3-hover-black" href="#">4</a></li>
<li><a class="w3-hover-black" href="#"></a></li>
</ul>
</div>
<!-- Footer -->
<footer class="w3-container w3-padding-32 w3-white">
<div class="w3-row-padding">
<div class="w3-third">
<h3>FOOTER</h3>
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum,
porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
<p>Powered by <a href="http://www.w3schools.com/w3css/default.asp"
target="_blank">w3.css</a></p>
</div>
<div class="w3-third">
<h3>BLOG POSTS</h3>
<ul class="w3-ul w3-hoverable">
<li class="w3-padding-16">
<img src="img_workshop.jpg" class="w3-left w3-margin-right"
style="width:50px">
<span class="w3-large">Lorem</span><br>
<span>Sed mattis nunc</span>
</li>
<li class="w3-padding-16">
<img src="img_gondol.jpg" class="w3-left w3-margin-right"
style="width:50px">
<span class="w3-large">Ipsum</span><br>
<span>Praes tinci sed</span>
</li>
</ul>
</div>
<div class="w3-third">
<h3>POPULAR TAGS</h3>
<p>
<span class="w3-tag w3-black w3-margin-bottom">Travel</span> <span
class="w3-tag w3-dark-grey w3-small w3-margin-bottom">New York</span>
<span class="w3-tag w3-dark-grey w3-small w3-margin-
bottom">London</span>
<span class="w3-tag w3-dark-grey w3-small w3-margin-
bottom">IKEA</span> <span class="w3-tag w3-dark-grey w3-small w3-
margin-bottom">NORWAY</span> <span class="w3-tag w3-dark-grey w3-
small w3-margin-bottom">DIY</span>
<span class="w3-tag w3-dark-grey w3-small w3-margin-
bottom">Ideas</span> <span class="w3-tag w3-dark-grey w3-small w3-
margin-bottom">Baby</span> <span class="w3-tag w3-dark-grey w3-small
w3-margin-bottom">Family</span>
<span class="w3-tag w3-dark-grey w3-small w3-margin-
bottom">News</span> <span class="w3-tag w3-dark-grey w3-small w3-
margin-bottom">Clothing</span> <span class="w3-tag w3-dark-grey w3-
small w3-margin-bottom">Shopping</span>
<span class="w3-tag w3-dark-grey w3-small w3-margin-
bottom">Sports</span> <span class="w3-tag w3-dark-grey w3-small w3-
margin-bottom">Games</span>
</p>
</div>
</div>
</footer>
<!-- End page content -->
</div>
<script>
// Script to open and close sidenav
function w3_open() {
document.getElementById("mySidenav").style.display = "block";
document.getElementById("myOverlay").style.display = "block";
}
function w3_close() {
document.getElementById("mySidenav").style.display = "none";
document.getElementById("myOverlay").style.display = "none";
}
</script>
</body>
</html>
Js data3
/* W3Data ver 1.1 by W3Schools.com */
var w3DataObject = {};
function w3DisplayData(id, data) {
var htmlObj, htmlTemplate, html, arr = [], a, l, rowClone, x, j, i,
ii, cc, repeat, repeatObj, repeatX = "";
htmlObj = document.getElementById(id);
htmlTemplate = w3InitTemplate(id, htmlObj);
html = htmlTemplate.cloneNode(true);
arr = w3GetElementsByAttribute(html, "w3-repeat");
l = arr.length;
for (j = (l-1); j >= 0; j -= 1) {
cc = arr[j].getAttribute("w3-repeat").split(" ");
if (cc.length == 1) {
repeat = cc[0];
} else {
repeatX = cc[0];
repeat = cc[2];
}
arr[j].removeAttribute("w3-repeat");
repeatObj = data[repeat];
if (repeatObj && typeof repeatObj == "object" && repeatObj.length
!= "undefined") {
i = 0;
for (x in repeatObj) {
i += 1;
rowClone = arr[j];
rowClone = w3NeedleInHaystack(rowClone, "element",
repeatX, repeatObj[x]);
a = rowClone.attributes;
for (ii = 0; ii < a.length; ii += 1) {
a[ii].value = w3NeedleInHaystack(a[ii], "attribute",
repeatX, repeatObj[x]).value;
}
(i === repeatObj.length) ?
arr[j].parentNode.replaceChild(rowClone, arr[j]) :
arr[j].parentNode.insertBefore(rowClone, arr[j]);
}
} else {
console.log("w3-repeat must be an array. " + repeat + " is
not an array.");
continue;
}
}
html = w3NeedleInHaystack(html, "element");
htmlObj.parentNode.replaceChild(html, htmlObj);
function w3InitTemplate(id, obj) {
var template;
template = obj.cloneNode(true);
if (w3DataObject.hasOwnProperty(id)) {return w3DataObject[id];}
w3DataObject[id] = template;
return template;
}
function w3GetElementsByAttribute(x, att) {
var arr = [], arrCount = -1, i, l, y =
x.getElementsByTagName("*"), z = att.toUpperCase();
l = y.length;
for (i = -1; i < l; i += 1) {
if (i == -1) {y[i] = x; }
if (y[i].getAttribute(z) !== null) {arrCount += 1;
arr[arrCount] = y[i];}
}
return arr;
}
function w3NeedleInHaystack(elmnt, typ, repeatX, x) {
var value, rowClone, pos1, haystack, pos2, needle = [],
needleToReplace, i, cc, r;
rowClone = elmnt.cloneNode(true);
pos1 = 0;
while (pos1 > -1) {
haystack = (typ == "attribute") ? rowClone.value :
rowClone.innerHTML;
pos1 = haystack.indexOf("{{", pos1);
if (pos1 === -1) {break; }
pos2 = haystack.indexOf("}}", pos1 + 1);
needleToReplace = haystack.substring(pos1 + 2, pos2);
needle = needleToReplace.split("||");
value = undefined;
for (i = 0; i < needle.length; i += 1) {
needle[i] = needle[i].replace(/^\s+|\s+$/gm,''); //trim
//value = ((x && x[needle[i]]) || (data &&
data[needle[i]]));
if (x) {value = x[needle[i]];}
if (value == undefined && data) {value =
data[needle[i]];}
if (value == undefined) {
cc = needle[i].split(".");
if (cc[0] == repeatX) {value = x[cc[1]]; }
}
if (value == undefined) {
if (needle[i] == repeatX) {value = x; }
}
if (value == undefined) {
if (needle[i].substr(0,1) == '"') {
value = needle[i].replace(/"/g, "");
} else if (needle[i].substr(0,1) == "'") {
value = needle[i].replace(/'/g, "");
}
}
if (value != undefined) {break;}
}
if (value != undefined) {
r = "{{" + needleToReplace + "}}";
if (typ == "attribute") {
rowClone.value = rowClone.value.replace(r, value);
} else {
w3ReplaceHTML(rowClone, r, value);
}
}
pos1 = pos1 + 1;
}
return rowClone;
}
function w3ReplaceHTML(a, r, result) {
var b, l, i, a, x, y, j, ll, nam;
if (a.hasAttributes()) {
b = a.attributes;
l = b.length;
for (i = 0; i < l; i += 1) {
if (b[i].value.indexOf(r) > -1) {b[i].value =
b[i].value.replace(r, result); }
}
}
x = a.getElementsByTagName("*");
l = x.length;
a.innerHTML = a.innerHTML.replace(r, result);
}
}
function w3IncludeHTML() {
var z, i, a, file, xhttp;
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
if (z[i].getAttribute("w3-include-html")) {
a = z[i].cloneNode(false);
file = z[i].getAttribute("w3-include-html");
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
a.removeAttribute("w3-include-html");
a.innerHTML = xhttp.responseText;
z[i].parentNode.replaceChild(a, z[i]);
w3IncludeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
return;
}
}
}
function w3Http(target, readyfunc, xml, method) {
var httpObj;
if (!method) {method = "GET"; }
if (window.XMLHttpRequest) {
httpObj = new XMLHttpRequest();
} else if (window.ActiveXObject) {
httpObj = new ActiveXObject("Microsoft.XMLHTTP");
}
if (httpObj) {
if (readyfunc) {httpObj.onreadystatechange = readyfunc; }
httpObj.open(method, target, true);
httpObj.send(xml);
}
}
Para hacer tablas
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<script src="http://www.w3schools.com/lib/w3data.js"></script>
<script>
var myObject = {"customers":[
{"CustomerName":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"},
{"CustomerName":"Ana Trujillo Emparedados y helados","City":"Mxico
D.F.","Country":"Mexico"},
{"CustomerName":"Antonio Moreno Taquera","City":"Mxico
D.F.","Country":"Mexico"},
{"CustomerName":"Around the Horn","City":"London","Country":"UK"},
{"CustomerName":"B's Beverages","City":"London","Country":"UK"},
{"CustomerName":"Berglunds snabbkp","City":"Lule","Country":"Sweden"},
{"CustomerName":"Blauer See
Delikatessen","City":"Mannheim","Country":"Germany"},
{"CustomerName":"Blondel pre et
fils","City":"Strasbourg","Country":"France"},
{"CustomerName":"Blido Comidas
preparadas","City":"Madrid","Country":"Spain"},
{"CustomerName":"Bon app'","City":"Marseille","Country":"France"},
{"CustomerName":"Bottom-Dollar
Marketse","City":"Tsawassen","Country":"Canada"},
{"CustomerName":"Cactus Comidas para llevar","City":"Buenos
Aires","Country":"Argentina"},
{"CustomerName":"Centro comercial Moctezuma","City":"Mxico
D.F.","Country":"Mexico"},
{"CustomerName":"Chop-suey
Chinese","City":"Bern","Country":"Switzerland"},
{"CustomerName":"Comrcio Mineiro","City":"So Paulo","Country":"Brazil"}
]};
</script>
<body>
<table id="id01" class="w3-table w3-bordered w3-striped">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr w3-repeat="customers">
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
<script>
w3DisplayData("id01", myObject);
</script>
</body>
</html>
You might also like
- 780 CMR Ninth Edition, Base Code Amendments - 0No ratings yet780 CMR Ninth Edition, Base Code Amendments - 0211 pages
- Galerie Image Comment Faire Sur WebdesignNo ratings yetGalerie Image Comment Faire Sur Webdesign5 pages
- Id Class Data-Bs-Ride Class Class SRC Class AltNo ratings yetId Class Data-Bs-Ride Class Class SRC Class Alt2 pages
- DBMS_mini_proj- Tourism Management SystemNo ratings yetDBMS_mini_proj- Tourism Management System14 pages
- Unit_6_Menu Navigation and web protectionNo ratings yetUnit_6_Menu Navigation and web protection57 pages
- Sedat Laçiner, Şenol Kantarcı-Art and Armenian Propaganda Ararat As A Case Study-ASAM Institute For Armenian Research (2002)No ratings yetSedat Laçiner, Şenol Kantarcı-Art and Armenian Propaganda Ararat As A Case Study-ASAM Institute For Armenian Research (2002)16 pages
- React Portfolio App Development: Increase your online presence and create your personal brandFrom EverandReact Portfolio App Development: Increase your online presence and create your personal brandNo ratings yet
- Masters Among Us: An Exploration of Supernal Encounters and Miraculous PhenomenaFrom EverandMasters Among Us: An Exploration of Supernal Encounters and Miraculous PhenomenaNo ratings yet
- Extended Mononobe-Okabe'' Method For Seismic Design of Retaining WallsNo ratings yetExtended Mononobe-Okabe'' Method For Seismic Design of Retaining Walls12 pages
- Engine Electrical System General Information SpecificationsNo ratings yetEngine Electrical System General Information Specifications55 pages
- Analysis of Common-Collector Colpitts Oscillator100% (5)Analysis of Common-Collector Colpitts Oscillator8 pages
- Chemical & Physical Equilibrium [2024-25]No ratings yetChemical & Physical Equilibrium [2024-25]10 pages
- Path Visualizer: Gaurav Rana 01 Abhishek Kumar Singh 17 Adarsh Singh 18 Mentor-Mrs. Huda KhanNo ratings yetPath Visualizer: Gaurav Rana 01 Abhishek Kumar Singh 17 Adarsh Singh 18 Mentor-Mrs. Huda Khan18 pages
- Outline Specifications For General ConstructionNo ratings yetOutline Specifications For General Construction50 pages
- 1.2.3-Sullair Cold Start Air Compressor Parts list-OKNo ratings yet1.2.3-Sullair Cold Start Air Compressor Parts list-OK68 pages
- 01 Stewart - Past and Current Construction Projects On Swan River Soft SoilsNo ratings yet01 Stewart - Past and Current Construction Projects On Swan River Soft Soils79 pages
- (FREE PDF Sample) Practice Makes Perfect: Italian Verb Tenses, Premium Third Edition Paola Nanni-Tate - Ebook PDF Ebooks100% (5)(FREE PDF Sample) Practice Makes Perfect: Italian Verb Tenses, Premium Third Edition Paola Nanni-Tate - Ebook PDF Ebooks51 pages
- 1993 - Ardhana Etal - Deep Marine Sand Ngrayong Tuban100% (1)1993 - Ardhana Etal - Deep Marine Sand Ngrayong Tuban59 pages
- International Journal of Current Advanced Research International Journal of Current Advanced ResearchNo ratings yetInternational Journal of Current Advanced Research International Journal of Current Advanced Research4 pages
- Valmet Dna Machine Monitoring For Paper and Board MachinesNo ratings yetValmet Dna Machine Monitoring For Paper and Board Machines4 pages
