100% found this document useful (1 vote)

971 views

Template

The document contains code for an automatic slideshow that changes the displayed image every 4 seconds by cycling through elements with the class "mySlides". It defines a "carousel" function that loops through the slide images and sets their display to "none", except for the current slide indexed by the "myIndex" variable, which is displayed. The "myIndex" variable tracks the current slide and is incremented after each display.

Uploaded by

hysenn

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

100% found this document useful (1 vote)

971 views

Template

Uploaded by

hysenn

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

You are on page 1/ 356

<script>

// Automatic Slideshow - change image every 4 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"; 1)<!DOCTYPE html>

<html>

<title>W3.CSS Template</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://cdnjs.cloudflare.com/ajax/libs/font-

awesome/4.7.0/css/font-awesome.min.css">

<style>

body {font-family: "Lato", sans-serif}

.mySlides {display: none}

</style>

<body>

<li class="w3-hide-medium w3-hide-large w3-opennav w3-right">

<a class="w3-padding-large" href="javascript:void(0)" onclick="myFunction()"

title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>

</li>

<li><a href="#" class="w3-hover-none w3-hover-text-grey w3-padding-

large">HOME</a></li>

<li class="w3-hide-small"><a href="#band" class="w3-padding-

large">BAND</a></li>

<li class="w3-hide-small"><a href="#tour" class="w3-padding-

large">TOUR</a></li>

<li class="w3-hide-small"><a href="#contact" class="w3-padding-

large">CONTACT</a></li>

<li class="w3-hide-small w3-dropdown-hover">

<a href="javascript:void(0)" class="w3-hover-none w3-padding-large"

title="More">MORE <i class="fa fa-caret-down"></i></a>

<div class="w3-dropdown-content w3-white w3-card-4">

<a href="#">Merchandise</a>

<a href="#">Extras</a>

<a href="#">Media</a>

</div>

</li>

<li class="w3-hide-small w3-right"><a href="javascript:void(0)" class="w3-

padding-large w3-hover-red"><i class="fa fa-search"></i></a></li>

</ul>

</div>

<ul class="w3-navbar w3-left-align w3-black">

<li><a class="w3-padding-large" href="#band">BAND</a></li>

<li><a class="w3-padding-large" href="#tour">TOUR</a></li>

<li><a class="w3-padding-large" href="#contact">CONTACT</a></li>

<li><a class="w3-padding-large" href="#">MERCH</a></li>

</ul>

</div>

<div class="w3-content" style="max-width:2000px;margin-top:46px">

<div class="mySlides w3-display-container w3-center">

<img src="/w3images/la.jpg" style="width:100%">

<div class="w3-display-bottommiddle w3-container w3-text-white w3-padding-32

w3-hide-small">

<h3>Los Angeles</h3>

<p><b>We had the best time playing at Venice Beach!</b></p>

</div>

<div class="mySlides w3-display-container w3-center">

<img src="/w3images/ny.jpg" style="width:100%">

<div class="w3-display-bottommiddle w3-container w3-text-white w3-padding-32

w3-hide-small">

<h3>New York</h3>
<p><b>The atmosphere in New York is lorem ipsum.</b></p>

</div>

<div class="mySlides w3-display-container w3-center">

<img src="/w3images/chicago.jpg" style="width:100%">

<div class="w3-display-bottommiddle w3-container w3-text-white w3-padding-32

w3-hide-small">

<h3>Chicago</h3>

<p><b>Thank you, Chicago - A night we won't forget.</b></p>

</div>

<div class="w3-container w3-content w3-center w3-padding-64" style="max-

width:800px" id="band">

<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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.</p>

<div class="w3-row w3-padding-32">

<img src="/w3images/bandmember.jpg" class="w3-round w3-margin-bottom"

alt="Random Name" style="width:60%">

</div>

<img src="/w3images/bandmember.jpg" class="w3-round w3-margin-bottom"

alt="Random Name" style="width:60%">

</div>

<img src="/w3images/bandmember.jpg" class="w3-round" alt="Random

Name" style="width:60%">

</div>

<div class="w3-black" id="tour">

<div class="w3-container w3-content w3-padding-64" style="max-

width:800px">

<h2 class="w3-wide w3-center">TOUR DATES</h2>

<p class="w3-opacity w3-center"><i>Remember to book your tickets!

</i></p><br>

<ul class="w3-ul w3-border w3-white w3-text-grey">

<li class="w3-padding">September <span class="w3-tag w3-red w3-margin-

left">Sold out</span></li>
<li class="w3-padding">October <span class="w3-tag w3-red w3-margin-
left">Sold out</span></li>

<li class="w3-padding">November <span class="w3-badge w3-right w3-

margin-right">3</span></li>

</ul>

<div class="w3-row-padding w3-padding-32" style="margin:0 -16px">

<div class="w3-third w3-margin-bottom">

<img src="/w3images/newyork.jpg" alt="New York" style="width:100%"

class="w3-hover-opacity">

<div class="w3-container w3-white">

<p class="w3-opacity">Fri 27 Nov 2016</p>

<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>

<button class="w3-btn w3-margin-bottom"

onclick="document.getElementById('ticketModal').style.display='block'">Buy
Tickets</button>

</div>

<div class="w3-third w3-margin-bottom">

<img src="/w3images/paris.jpg" alt="Paris" style="width:100%" class="w3-

hover-opacity">

<div class="w3-container w3-white">

<p><b>Paris</b></p>

<p class="w3-opacity">Sat 28 Nov 2016</p>

<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>

<button class="w3-btn w3-margin-bottom"

onclick="document.getElementById('ticketModal').style.display='block'">Buy
Tickets</button>
</div>

</div>

<div class="w3-third w3-margin-bottom">

<img src="/w3images/sanfran.jpg" alt="San Francisco" style="width:100%"

class="w3-hover-opacity">

<div class="w3-container w3-white">

<p><b>San Francisco</b></p>

<p class="w3-opacity">Sun 29 Nov 2016</p>

<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>

<button class="w3-btn w3-margin-bottom"

onclick="document.getElementById('ticketModal').style.display='block'">Buy
Tickets</button>

</div>

<div id="ticketModal" class="w3-modal">

<div class="w3-modal-content w3-animate-top w3-card-8">

<header class="w3-container w3-teal w3-center w3-padding-32">

<span onclick="document.getElementById('ticketModal').style.display='none'"

class="w3-closebtn w3-padding-xlarge w3-xxlarge w3-display-

topright"></span>

<h2 class="w3-wide"><i class="fa fa-suitcase w3-margin-

right"></i>Tickets</h2>

</header>
<div class="w3-container">

<p><label><i class="fa fa-shopping-cart"></i> Tickets, $15 per

person</label></p>

<input class="w3-input w3-border" type="text" placeholder="How many?">

<p><label><i class="fa fa-user"></i> Send To</label></p>

<input class="w3-input w3-border" type="text" placeholder="Enter email">

<button class="w3-btn-block w3-teal w3-padding-12 w3-section w3-right">PAY

<button class="w3-btn w3-red w3-section"

onclick="document.getElementById('ticketModal').style.display='none'">Close <i
class="fa fa-remove"></i></button>

<p class="w3-right">Need <a href="#" class="w3-text-blue">help?</a></p>

</div>

<div class="w3-container w3-content w3-padding-64" style="max-width:800px"

id="contact">

<h2 class="w3-wide w3-center">CONTACT</h2>

<p class="w3-opacity w3-center"><i>Fan? Drop a note!</i></p>

<div class="w3-row w3-padding-32">

<div class="w3-col m6 w3-large w3-margin-bottom">

<i class="fa fa-map-marker" style="width:30px"></i> Chicago, US<br>

<i class="fa fa-phone" style="width:30px"></i> Phone: +00 151515<br>

<i class="fa fa-envelope" style="width:30px"> </i> Email:

[email protected]<br>

</div>

<div class="w3-col m6">

<div class="w3-row-padding" style="margin:0 -16px 8px -16px">

<input class="w3-input w3-border" type="text" placeholder="Name"

required name="Name">

</div>

<input class="w3-input w3-border" type="text" placeholder="Email"

required name="Email">

</div>

<input class="w3-input w3-border" type="text" placeholder="Message"

required name="Message">

<button class="w3-btn w3-section w3-right" type="submit">SEND</button>

</form>

</div>

</div>

<div id="googleMap" style="height:400px;filter:grayscale(90%);-webkit-

filter:grayscale(90%);"></div>

var myCenter = new google.maps.LatLng(41.878114, -87.629798);

function initialize() {

var mapProp = {

center: myCenter,

zoom: 12,

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 class="w3-container w3-padding-64 w3-center w3-opacity w3-light-grey

w3-xlarge">

<i class="fa fa-facebook-official w3-hover-text-indigo"></i>

<i class="fa fa-snapchat w3-hover-text-yellow"></i>

<i class="fa fa-pinterest-p w3-hover-text-red"></i>

<i class="fa fa-twitter w3-hover-text-light-blue"></i>

<i class="fa fa-linkedin w3-hover-text-indigo"></i>

<p class="w3-medium">Powered by <a

href="http://www.w3schools.com/w3css/default.asp"
target="_blank">w3.css</a></p>

</footer>

myIndex++;

if (myIndex > x.length) {myIndex = 1}

x[myIndex-1].style.display = "block";

setTimeout(carousel, 4000);

// 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", "");

}
// When the user clicks anywhere outside of the modal, close it

var modal = document.getElementById('ticketModal');

window.onclick = function(event) {

if (event.target == modal) {

modal.style.display = "none";

</script>

</body>

</html>

2) <!DOCTYPE html>

<html>

<title>W3.CSS Template</title>

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

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">

<link href="http://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"

type="text/css">

<style>

body {font-family: "Raleway", Arial, sans-serif}

.w3-row img {margin-bottom: -8px}

</style>

<body>

<div class="w3-content" style="max-width:1500px">

<header class="w3-container w3-xlarge w3-padding-24">

<a href="#" class="w3-left w3-btn w3-white">MY ART</a>

<a href="#about" class="w3-right w3-btn w3-white">About</a>

</header>

<img src="/w3images/streetart.jpg" style="width:100%">

<img src="/w3images/streetart2.jpg" style="width:100%">

<img src="/w3images/streetart5.jpg" style="width:100%">

</div>

<img src="/w3images/streetart3.jpg" style="width:100%">

<img src="/w3images/streetart4.jpg" style="width:100%">

</div>

</div>

<footer class="w3-light-grey w3-padding-64 w3-center" id="about">

<h2>About</h2>
<img src="/w3images/boy.jpg" class="w3-image w3-padding-32" width="300"
height="300">

<form style="margin:auto;width:60%" action="form.asp" target="_blank">

<p>Just me, myself and I, exploring the universe of unknownment. 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. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo
condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.
Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus
vitae, ultricies congue gravida diam non fringilla.</p>

<p class="w3-large w3-text-pink">Do not hesitate to contact me!</p>

<input class="w3-input w3-border" type="text" required name="Name">

</div>

<label><b>Email</b></label>

<input class="w3-input w3-border" type="text" required name="Email">

</div>

<label><b>Message</b></label>

<input class="w3-input w3-border" required name="Message">

</div>

<button type="submit" class="w3-btn w3-btn-block w3-padding-12 w3-dark-

grey">Send</button>

</form>

<br>

<p>Powered by <a href="http://www.w3schools.com/w3css/default.asp"

target="_blank" class="w3-hover-text-green">w3.css</a></p>

</footer>
</body>

</html>

3) <!DOCTYPE html>

<html>

<title>W3.CSS Template</title>

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

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">

<body>

<ul class="w3-navbar w3-white w3-wide w3-padding-8 w3-card-2">

<li>

<a href="#home" class="w3-margin-left"><b>BR</b> Architects</a>

</li>

<li class="w3-right w3-hide-small">

<a href="#projects" class="w3-left">Projects</a>

<a href="#about" class="w3-left">About</a>

<a href="#contact" class="w3-left w3-margin-right">Contact</a>

</li>

</ul>

</div>

<header class="w3-display-container w3-content w3-wide" style="max-

width:1500px;" id="home">

<img class="w3-image" src="/w3images/architect.jpg" alt="Architecture"

width="1500" height="800">

<div class="w3-display-middle w3-margin-top w3-center">

<h1 class="w3-xxlarge w3-text-white"><span class="w3-padding w3-black w3-

opacity-min"><b>BR</b></span> <span class="w3-hide-small w3-text-light-
grey">Architects</span></h1>

</div>

</header>

<div class="w3-content w3-padding" style="max-width:1564px">

<div class="w3-container w3-padding-32" id="projects">

<h3 class="w3-border-bottom w3-border-light-grey w3-padding-

12">Projects</h3>

</div>
<div class="w3-row-padding">

<div class="w3-col l3 m6 w3-margin-bottom">

<div class="w3-display-topleft w3-black w3-padding">Summer House</div>

<img src="/w3images/house5.jpg" alt="House" style="width:100%">

</div>

<div class="w3-col l3 m6 w3-margin-bottom">

<div class="w3-display-topleft w3-black w3-padding">Brick House</div>

<img src="/w3images/house2.jpg" alt="House" style="width:100%">

</div>

<div class="w3-col l3 m6 w3-margin-bottom">

<div class="w3-display-topleft w3-black w3-padding">Renovated</div>

<img src="/w3images/house3.jpg" alt="House" style="width:100%">

</div>

<div class="w3-col l3 m6 w3-margin-bottom">

<div class="w3-display-topleft w3-black w3-padding">Barn House</div>

<img src="/w3images/house4.jpg" alt="House" style="width:100%">

</div>

</div>
<div class="w3-row-padding">

<div class="w3-col l3 m6 w3-margin-bottom">

<div class="w3-display-topleft w3-black w3-padding">Summer House</div>

<img src="/w3images/house2.jpg" alt="House" style="width:99%">

</div>

<div class="w3-col l3 m6 w3-margin-bottom">

<div class="w3-display-topleft w3-black w3-padding">Brick House</div>

<img src="/w3images/house5.jpg" alt="House" style="width:99%">

</div>

<div class="w3-col l3 m6 w3-margin-bottom">

<div class="w3-display-topleft w3-black w3-padding">Renovated</div>

<img src="/w3images/house4.jpg" alt="House" style="width:99%">

</div>

<div class="w3-col l3 m6 w3-margin-bottom">

<div class="w3-display-topleft w3-black w3-padding">Barn House</div>

<img src="/w3images/house3.jpg" alt="House" style="width:99%">

</div>

</div>
</div>

<div class="w3-container w3-padding-32" id="about">

<h3 class="w3-border-bottom w3-border-light-grey w3-padding-12">About</h3>

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-row-padding w3-grayscale">

<div class="w3-col l3 m6 w3-margin-bottom">

<img src="/w3images/team2.jpg" alt="John" style="width:100%">

<p class="w3-opacity">CEO & Founder</p>

<p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales

pellentesque elementum.</p>

<p><button class="w3-btn-block">Contact</button></p>

</div>

<div class="w3-col l3 m6 w3-margin-bottom">

<img src="/w3images/team1.jpg" alt="Jane" style="width:100%">

<p class="w3-opacity">Architect</p>

<p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales

pellentesque elementum.</p>

<p><button class="w3-btn-block">Contact</button></p>

</div>

<div class="w3-col l3 m6 w3-margin-bottom">

<img src="/w3images/team3.jpg" alt="Mike" style="width:100%">

<p class="w3-opacity">Architect</p>

<p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales

pellentesque elementum.</p>

<p><button class="w3-btn-block">Contact</button></p>

</div>

<div class="w3-col l3 m6 w3-margin-bottom">

<img src="/w3images/team4.jpg" alt="Dan" style="width:100%">

<p class="w3-opacity">Architect</p>

<p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales

pellentesque elementum.</p>

<p><button class="w3-btn-block">Contact</button></p>

</div>

<div class="w3-container w3-padding-32" id="contact">

<h3 class="w3-border-bottom w3-border-light-grey w3-padding-

12">Contact</h3>
<p>Lets get in touch and talk about your and our next project.</p>

<form action="form.asp" target="_blank">

<input class="w3-input" type="text" placeholder="Name" required

name="Name">

<input class="w3-input w3-section" type="text" placeholder="Email" required

name="Email">

<input class="w3-input w3-section" type="text" placeholder="Subject" required

name="Subject">

<input class="w3-input w3-section" type="text" placeholder="Comment"

required name="Comment">

<button class="w3-btn w3-section" type="submit">

<i class="fa fa-paper-plane"></i> SEND MESSAGE

</button>

</form>

</div>

</div>

<div id="googleMap" class="w3-grayscale"

style="width:100%;height:450px;"></div>

<footer class="w3-center w3-black w3-padding-16">

<p>Powered by <a href="http://www.w3schools.com/w3css/default.asp"

title="W3.CSS" target="_blank" class="w3-hover-text-green">w3.css</a></p>

</footer>

var myCenter = new google.maps.LatLng(41.878114, -87.629798);

function initialize() {

var mapProp = {

center: myCenter,

zoom: 12,

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>

</body>

</html>

4) <!DOCTYPE html>

<html>

<title>W3.CSS Template</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 {font-family: "Raleway", sans-serif}

body, html {height: 100%}

.bgimg {

min-height: 100%;

background-position: center;

background-size: cover;

}
</style>

<body>

<div class="bgimg w3-display-container w3-animate-opacity w3-text-white">

<div class="w3-display-topleft w3-padding-large w3-xlarge">

Logo

</div>

<h1 class="w3-jumbo w3-animate-top">COMING SOON</h1>

<hr class="w3-border-grey" style="margin:auto;width:40%">

<p class="w3-large w3-center">35 days left</p>

</div>

<div class="w3-display-bottomleft w3-padding-large">

Powered by <a href="http://www.w3schools.com/w3css/default.asp"

target="_blank">w3.css</a>

</div>

</body>

</html>
5) <!DOCTYPE html>

<html>

<title>W3.CSS Template</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>

<!-- 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 class="w3-container w3-center w3-padding-32">

<p>Welcome to the blog of <span class="w3-tag">unknown</span></p>

</header>

<div class="w3-col l8 s12">

<div class="w3-card-4 w3-margin w3-white">

<img src="/w3images/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>

<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-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>

<hr>

<div class="w3-card-4 w3-margin w3-white">

<img src="/w3images/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>

tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies
congue gravida diam non fringilla.</p>

<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 class="w3-col l4">

<div class="w3-card-2 w3-margin w3-margin-top">

<img src="/w3images/avatar_g.jpg" style="width:100%">

<div class="w3-container w3-white">

<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>

<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">

<img src="/w3images/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>

<img src="/w3images/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>

<img src="/w3images/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="/w3images/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>

<div class="w3-card-2 w3-margin">

<div class="w3-container w3-padding">

</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>

</div><br>

</div>

<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>
6) <!DOCTYPE html>

<html>

<title>W3.CSS Template</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=Karma">

<style>

body,h1,h2,h3,h4,h5,h6 {font-family: "Karma", sans-serif}

.w3-sidenav a {padding:20px}

</style>

<body>

<nav class="w3-sidenav w3-card-2 w3-top w3-xlarge w3-animate-left"

style="display:none;z-index:2;width:40%;min-width:300px" id="mySidenav">

<a href="javascript:void(0)" onclick="w3_close()"

class="w3-closenav">Close Menu</a>

<a href="#food" onclick="w3_close()">Food</a>

<a href="#about" onclick="w3_close()">About</a>

</nav>

<div class="w3-white w3-xlarge w3-padding-xlarge" style="max-

width:1200px;margin:auto">

<div class="w3-opennav w3-left w3-hover-text-grey"

onclick="w3_open()"></div>

<div class="w3-center">My Food</div>

</div>

<div class="w3-main w3-content w3-padding" style="max-width:1200px;margin-

top:100px">

<div class="w3-row-padding w3-padding-16 w3-center" id="food">

<img src="/w3images/sandwich.jpg" alt="Sandwich" style="width:100%">

<h3>The Perfect Sandwich, A Real NYC Classic</h3>

<p>Just some random text, lorem ipsum text praesent tincidunt ipsum
lipsum.</p>

</div>

<img src="/w3images/steak.jpg" alt="Steak" style="width:100%">

<h3>Let Me Tell You About This Steak</h3>

<p>Once again, some random text to lorem lorem lorem lorem ipsum text
praesent tincidunt ipsum lipsum.</p>

</div>

<img src="/w3images/cherries.jpg" alt="Cherries" style="width:100%">

<h3>Cherries, interrupted</h3>

<p>Lorem ipsum text praesent tincidunt ipsum lipsum.</p>

</div>

<img src="/w3images/wine.jpg" alt="Pasta and Wine" style="width:100%">

<h3>Once Again, Robust Wine and Vegetable Pasta</h3>

<p>Lorem ipsum text praesent tincidunt ipsum lipsum.</p>

</div>

<div class="w3-row-padding w3-padding-16 w3-center">

<img src="/w3images/popsicle.jpg" alt="Popsicle" style="width:100%">

<h3>All I Need Is a Popsicle</h3>

<p>Lorem ipsum text praesent tincidunt ipsum lipsum.</p>

</div>

<img src="/w3images/salmon.jpg" alt="Salmon" style="width:100%">

<h3>Salmon For Your Skin</h3>

<p>Once again, some random text to lorem lorem lorem lorem ipsum text
praesent tincidunt ipsum lipsum.</p>

</div>

<img src="/w3images/sandwich.jpg" alt="Sandwich" style="width:100%">

<h3>The Perfect Sandwich, A Real Classic</h3>

<p>Just some random text, lorem ipsum text praesent tincidunt ipsum
lipsum.</p>

</div>

<img src="/w3images/croissant.jpg" alt="Croissant" style="width:100%">

<h3>Le French</h3>

<p>Lorem lorem lorem lorem ipsum text praesent tincidunt ipsum lipsum.</p>

</div>

<div class="w3-center w3-padding-32">

<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>
<hr id="about">

<div class="w3-container w3-padding-32 w3-center">

<h3>About Me, The Food Man</h3><br>

<img src="/w3images/chef.jpg" alt="Me" class="w3-image"

style="display:block;margin:auto" width="800" height="533">

<h4><b>I am Who I Am!</b></h4>

<h6><i>With Passion For Real, Good Food</i></h6>

<p>Just me, myself and I, exploring the universe of unknownment. 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. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo
condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.
Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus
vitae, ultricies congue gravida diam non fringilla.</p>

</div>

<hr>

<footer class="w3-row-padding w3-padding-32">

<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">

<img src="/w3images/workshop.jpg" class="w3-left w3-margin-right"

style="width:50px">

<span class="w3-large">Lorem</span><br>

<span>Sed mattis nunc</span>

</li>

<img src="/w3images/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 w3-serif">

<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">Dinner</span>

<span class="w3-tag w3-dark-grey w3-small w3-margin-

bottom">Salmon</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-
bottom">France</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-
bottom">Drinks</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">Flavors</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-
bottom">Cuisine</span>

<span class="w3-tag w3-dark-grey w3-small w3-margin-

bottom">Chicken</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-
bottom">Dressing</span> <span class="w3-tag w3-dark-grey w3-small w3-
margin-bottom">Fried</span>

<span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Fish</span>

</p>

</div>

</footer>

</div>

// Script to open and close sidenav

function w3_open() {

document.getElementById("mySidenav").style.display = "block";

function w3_close() {

document.getElementById("mySidenav").style.display = "none";

</script>

</body>
</html>

7) <!DOCTYPE html>

<html>

<title>W3.CSS Template</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=Oswald">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open Sans">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-

awesome/4.7.0/css/font-awesome.min.css">

<style>

h1,h2,h3,h4,h5,h6 {font-family: "Oswald"}

body {font-family: "Open Sans"}

</style>

<ul class="w3-navbar w3-black w3-hide-small">

<li><a href="#"><i class="fa fa-instagram"></i></a></li>

<li><a href="#"><i class="fa fa-snapchat"></i></a></li>

<li><a href="#"><i class="fa fa-flickr"></i></a></li>

<li><a href="#"><i class="fa fa-twitter"></i></a></li>

<li><a href="#"><i class="fa fa-linkedin"></i></a></li>

<li class="w3-right"><a href="#"><i class="fa fa-search"></i></a></li>

</ul>

<!-- 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:1600px">

<header class="w3-container w3-center w3-padding-48 w3-white">

<h1 class="w3-xxxlarge"><b>JANE BLOGLIFE</b></h1>

<h6>Welcome to the blog of <span class="w3-tag">Jane's world</span></h6>

</header>

<header class="w3-display-container w3-wide" id="home">

<img class="w3-image" src="/w3images/jane.jpg" alt="Fashion Blog"

width="1600" height="1060">

<div class="w3-display-left w3-padding-xlarge">

<h1 class="w3-text-white">Jane's</h1>
<h1 class="w3-jumbo w3-text-white w3-hide-small"><b>FASHION
BLOG</b></h1>

<h6><button class="w3-btn w3-white w3-padding-large w3-large w3-opacity

w3-hover-opacity-off"
onclick="document.getElementById('subscribe').style.display='block'">SUBSCRIBE
</button></h6>

</div>

</header>

<div class="w3-row w3-padding w3-border">

<div class="w3-col l8 s12">

<div class="w3-container w3-white w3-margin w3-padding-large">

<h3>TITLE HEADING</h3>

<h5>Title description, <span class="w3-opacity">May 2,

2016</span></h5>

</div>

<img src="/w3images/girl_hat.jpg" alt="Girl Hat" style="width:100%"

class="w3-padding-12">

<p><strong>More Hats!</strong> I am crazy about hats these days. Some

text about this blog entry. Fashion fashion and 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 sedtellus ut rutrum. Sed vitae justo
condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</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>

<p class="w3-left"><button class="w3-btn w3-white w3-border"

onclick="likeFunction(this)"><b><i class="fa fa-thumbs-up"></i>
Like</b></button></p>

<p class="w3-right"><button class="w3-btn"

onclick="myFunction('demo1')" id="myBtn"><b>Replies </b> <span class="w3-
tag w3-white">1</span></button></p>

<div class="w3-row w3-padding-bottom" id="demo1" style="display:none">

<hr>

<div class="w3-col l2 m3">

<img src="/w3images/avatar_smoke.jpg" style="width:90px;">

</div>

<div class="w3-col l10 m9">

<h4>George <span class="w3-opacity w3-medium">May 3, 2015, 6:32

PM</span></h4>

<p>Great blog post! Following</p>

</div>

<hr>

<div class="w3-container w3-white w3-margin w3-padding-large">

<h3>TITLE HEADING</h3>

<h5>Title description, <span class="w3-opacity">April 23,

2016</span></h5>

</div>

<img src="/w3images/man_hat.jpg" alt="Men in Hats" style="width:100%"

class="w3-padding-12">

<p><strong>Hats!</strong> The trend this summer is hats for men!</p>

<p>Some text about this blog entry. Fashion fashion and 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 sedtellus ut rutrum. Sed

vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non
fringilla.</p>

<p class="w3-left"><button class="w3-btn w3-white w3-border"

onclick="likeFunction(this)"><b><i class="fa fa-thumbs-up"></i>
Like</b></button></p>

<p class="w3-right"><button class="w3-btn"

onclick="myFunction('demo2')"><b>Replies </b> <span class="w3-tag w3-
white">2</span></button></p>

<div id="demo2" style="display:none">

<hr>

<div class="w3-col l2 m3">

<img src="/w3images/girl_train.jpg" style="width:90px;">

</div>

<div class="w3-col l10 m9">

<h4>Amber <span class="w3-opacity w3-medium">April 26, 2015,

10:52 PM</span></h4>

<p>Love your blog page! Simply the best! Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.</p><br>

</div>

<div class="w3-row w3-padding-bottom">

<div class="w3-col l2 m3">

<img src="/w3images/girl.jpg" style="width:90px;">

</div>

<div class="w3-col l10 m9">

<h4>Angie <span class="w3-opacity w3-medium">April 23, 2015, 9:12

PM</span></h4>

</div>

<div class="w3-container w3-white w3-margin w3-padding-large">

<h3>TITLE HEADING</h3>
<h5>Title description, <span class="w3-opacity">April 7,
2016</span></h5>

</div>

<img src="/w3images/runway.jpg" alt="Runway" style="width:100%"

class="w3-padding-12">

<p><strong>Dont miss!</strong> The runway in New York City this weekend

is gonna be legendary!</p>

mi non congue ullam corper. Praesent tincidunt sedtellus ut rutrum. Sed

vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non
fringilla.</p>

<p class="w3-left"><button class="w3-btn w3-white w3-border"

onclick="likeFunction(this)"><b><i class="fa fa-thumbs-up"></i>
Like</b></button></p>

<p class="w3-right"><button class="w3-btn"

onclick="myFunction('demo3')"><b>Replies </b> <span class="w3-tag w3-
white">3</span></button></p>

<div id="demo3" style="display:none">

<hr>

<div class="w3-row w3-margin-bottom">

<div class="w3-col l2 m3">

<img src="/w3images/girl_mountain.jpg" style="width:90px;">

</div>
<div class="w3-col l10 m9">

<h4>Jane <span class="w3-opacity w3-medium">April 10, 2015, 7:22

PM</span></h4>

<p>That was a great runway show! Thanks for everything.</p>

</div>

<div class="w3-row w3-margin-bottom">

<div class="w3-col l2 m3">

<img src="/w3images/boy.jpg" style="width:90px;">

</div>

<div class="w3-col l10 m9">

<h4>John <span class="w3-opacity w3-medium">April 8, 2015, 10:32

PM</span></h4>

<p>Keep up the GREAT work! I am cheering for you!! Lorem ipsum dolor
sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>

</div>

<div class="w3-row w3-padding-bottom">

<div class="w3-col l2 m3">

<img src="/w3images/girl_hood.jpg" style="width:90px;">

</div>

<div class="w3-col l10 m9">

<h4>Anja <span class="w3-opacity w3-medium">April 7, 2015, 9:12

PM</span></h4>

<p>Cant wait for the runway to start!</p>

</div>

</div>
</div>

</div>

</div>

<div class="w3-col l4">

<div class="w3-white w3-margin">

<img src="/w3images/avatar_girl2.jpg" alt="Jane" style="width:100%"

class="w3-grayscale">

<div class="w3-container w3-black">

<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>

<hr>

<div class="w3-white w3-margin">

<div class="w3-container w3-padding w3-black">

<h4>Popular Posts</h4>

</div>

<ul class="w3-ul w3-hoverable w3-white">

<img src="/w3images/avatar_smoke.jpg" alt="Image" class="w3-left w3-

margin-right" style="width:50px">

<span class="w3-large">Denim</span>

<br>

<span>Sed mattis nunc</span>

</li>

<img src="/w3images/bandmember.jpg" alt="Image" class="w3-left w3-

margin-right" style="width:50px">

<span class="w3-large">Sweaters</span>

<br>

<span>Praes tinci sed</span>

</li>

<img src="/w3images/workshop.jpg" alt="Image" class="w3-left w3-

margin-right" style="width:50px">

<span class="w3-large">Workshop</span>

<br>

<span>Ultricies congue</span>

</li>

<img src="/w3images/avatar_smoke.jpg" alt="Image" class="w3-left w3-

margin-right w3-sepia" style="width:50px">

<span class="w3-large">Trends</span>

<br>

<span>Lorem ipsum dipsum</span>

</li>
</ul>

</div>

<hr>

<div class="w3-white w3-margin">

<div class="w3-container w3-padding w3-black">

<h4>Advertise</h4>

</div>

<div class="w3-container w3-white">

<div class="w3-container w3-display-container w3-light-grey w3-section"

style="height:200px">

<span class="w3-display-middle">Your AD Here</span>

</div>

<hr>

<div class="w3-white w3-margin">

<div class="w3-container w3-padding w3-black">

</div>

<div class="w3-container w3-white">

<p>
<span class="w3-tag w3-black w3-margin-bottom">Fashion</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">Hats</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">Sweaters</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">Deals</span> <span class="w3-tag w3-light-grey w3-small w3-margin-
bottom">Accessories</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">Jeans</span> <span class="w3-tag w3-light-grey w3-small w3-margin-
bottom">Trends</span>

</p>

</div>

<hr>

<div class="w3-white w3-margin">

<div class="w3-container w3-padding w3-black">

<h4>Inspiration</h4>

</div>

<div class="w3-row-padding w3-white">

<div class="w3-col s6">

<p><img src="/w3images/jeans.jpg" alt="Jeans"

style="width:100%"></p>
<p><img src="/w3images/team1.jpg" alt="Jeans"
style="width:100%"></p>

</div>

<div class="w3-col s6">

<p><img src="/w3images/avatar_hat.jpg" alt="Men in Hats"

style="width:100%" class="w3-grayscale"></p>

<p><img src="/w3images/team4.jpg" alt="Jeans"

style="width:100%"></p>

</div>

<hr>

<div class="w3-white w3-margin">

<div class="w3-container w3-padding w3-black">

<h4>Follow Me</h4>

</div>

<div class="w3-container w3-xlarge w3-padding">

<i class="fa fa-facebook-official w3-hover-text-indigo"></i>

<i class="fa fa-instagram w3-hover-text-purple"></i>

<i class="fa fa-snapchat w3-hover-text-yellow"></i>

<i class="fa fa-pinterest-p w3-hover-text-red"></i>

<i class="fa fa-twitter w3-hover-text-light-blue"></i>

<i class="fa fa-linkedin w3-hover-text-indigo"></i>

</div>

<div class="w3-white w3-margin">

<div class="w3-container w3-padding w3-black">

<h4>Subscribe</h4>

</div>

<div class="w3-container w3-white">

<p>Enter your e-mail below and get notified on the latest blog posts.</p>

<p><input class="w3-input w3-border" type="text" placeholder="Enter e-

mail" style="width:100%"></p>

<p><button type="button" class="w3-btn-block w3-padding w3-red w3-

opacity w3-hover-opacity-off">Subscribe</button></p>

</div>

</div>

</div>

</div>

<div id="subscribe" class="w3-modal w3-animate-opacity">

<div class="w3-modal-content w3-padding-jumbo">

<h2 class="w3-wide">SUBSCRIBE</h2>

<p>Join my mailing list to receive updates on the latest blog posts and other
things.</p>

<p><input class="w3-input w3-border" type="text" placeholder="Enter e-

mail"></p>

<button type="button" class="w3-btn-block w3-padding-large w3-red w3-

margin-bottom"
onclick="document.getElementById('subscribe').style.display='none'">Subscribe</
button>

</div>

<footer class="w3-container w3-dark-grey w3-padding-32 w3-padding-xlarge">

<a href="#" class="w3-btn w3-padding-large w3-margin-bottom"><i class="fa fa-

arrow-up w3-margin-right"></i>To the top</a>

<p>Powered by <a href="http://www.w3schools.com/w3css/default.asp"

target="_blank">w3.css</a></p>

</footer>

// Toggle between hiding and showing blog replies/comments

document.getElementById("myBtn").click();

function myFunction(id) {

var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {

x.className += " w3-show";

} else {

x.className = x.className.replace(" w3-show", "");

function likeFunction(x) {

x.style.fontWeight = "bold";

x.innerHTML = " Liked";

</script>

</body>

</html>

8) <!DOCTYPE html>
<html>

<title>W3.CSS Template</title>

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

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">

<style>

body {font-family: "Times New Roman", Georgia, Serif;}

h1,h2,h3,h4,h5,h6 {

font-family: "Playfair Display";

letter-spacing: 5px;

</style>

<body>

<ul class="w3-navbar w3-white w3-wide w3-padding-8 w3-card-2">

<li>

<a href="#home" class="w3-margin-left">Gourmet au Catering</a>

</li>

<li class="w3-right w3-hide-small">

<a href="#about" class="w3-left">About</a>

<a href="#menu" class="w3-left">Menu</a>

<a href="#contact" class="w3-left w3-margin-right">Contact</a>

</li>
</ul>

</div>

<header class="w3-display-container w3-content w3-wide" style="max-

width:1600px;min-width:500px" id="home">

<img class="w3-image" src="/w3images/hamburger.jpg" alt="Hamburger

Catering" width="1600" height="800">

<div class="w3-display-bottomleft w3-padding-xlarge w3-opacity">

<h1 class="w3-xxlarge">Le Catering</h1>

</div>

</header>

<div class="w3-content" style="max-width:1100px">

<div class="w3-row w3-padding-64" id="about">

<div class="w3-col m6 w3-padding-large w3-hide-small">

<img src="/w3images/tablesetting2.jpg" class="w3-round w3-image w3-opacity-

min" alt="Table Setting" width="600" height="750">

</div>

<div class="w3-col m6 w3-padding-large">

<h1 class="w3-center">About Catering</h1><br>

<h5 class="w3-center">Tradition since 1889</h5>

<p class="w3-large">The Catering was founded in blabla by Mr. Smith in lorem

ipsum dolor sit amet, consectetur adipiscing elit 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 iruredolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur.We only use <span class="w3-tag w3-light-
grey">seasonal</span> ingredients.</p>

<p class="w3-large w3-text-grey w3-hide-medium">Excepteur sint occaecat

cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
consectetur adipiscing elit, sed do eiusmod temporincididunt 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>

<hr>

<div class="w3-row w3-padding-64" id="menu">

<div class="w3-col l6 w3-padding-large">

<h1 class="w3-center">Our Menu</h1><br>

<h4>Bread Basket</h4>

<p class="w3-text-grey">Assortment of fresh baked fruit breads and muffins

5.50</p><br>

<h4>Honey Almond Granola with Fruits</h4>

<p class="w3-text-grey">Natural cereal of honey toasted oats, raisins, almonds

and dates 7.00</p><br>

<h4>Belgian Waffle</h4>

<p class="w3-text-grey">Vanilla flavored batter with malted flour

7.50</p><br>
<h4>Scrambled eggs</h4>

<p class="w3-text-grey">Scrambled eggs, roasted red pepper and garlic, with

green onions 7.50</p><br>

<h4>Blueberry Pancakes</h4>

<p class="w3-text-grey">With syrup, butter and lots of berries 8.50</p>

</div>

<div class="w3-col l6 w3-padding-large">

<img src="/w3images/tablesetting.jpg" class="w3-round w3-image w3-opacity-

min" alt="Menu" width="500" height="750">

</div>

<hr>

<div class="w3-container w3-padding-64" id="contact">

<h1>Contact</h1><br>

<p>We offer full-service catering for any event, large or small. We understand
your needs and we will cater the food to satisfy the biggerst criteria of them all,
both look and taste. Do not hesitate to contact us.</p>

<p class="w3-text-blue-grey w3-large"><b>Catering Service, 42nd Living St,

43043 New York, NY</b></p>

<p>You can also contact us by phone 00553123-2323 or email

[email protected], or you can send us a message here:</p>

<form action="form.asp" target="_blank">

<p><input class="w3-input w3-padding-16" type="text" placeholder="Name"

required name="Name"></p>
<p><input class="w3-input w3-padding-16" type="number" placeholder="How
many people" required name="People"></p>

<p><input class="w3-input w3-padding-16" type="datetime-local"

placeholder="Date and time" required name="date" value="2017-11-
16T20:00"></p>

<p><input class="w3-input w3-padding-16" type="text"

placeholder="Message \ Special requirements" required name="Message"></p>

<p><button class="w3-btn w3-padding w3-section" type="submit">SEND

MESSAGE</button></p>

</form>

</div>

</div>

<footer class="w3-center w3-light-grey w3-padding-32">

<p>Powered by <a href="http://www.w3schools.com/w3css/default.asp"

title="W3.CSS" target="_blank" class="w3-hover-text-green">w3.css</a></p>

</footer>

</body>

</html>

9) <!DOCTYPE html>

<html>
<title>W3.CSS Template</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=Roboto'>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-

awesome/4.7.0/css/font-awesome.min.css">

<style>

html,body,h1,h2,h3,h4,h5,h6 {font-family: "Roboto", sans-serif}

</style>

<div class="w3-content w3-margin-top" style="max-width:1400px;">

<div class="w3-white w3-text-grey w3-card-4">

<img src="/w3images/avatar_hat.jpg" style="width:100%" alt="Avatar">

<div class="w3-display-bottomleft w3-container w3-text-black">

</div>
</div>

<p><i class="fa fa-briefcase fa-fw w3-margin-right w3-large w3-text-

teal"></i>Designer</p>

<p><i class="fa fa-home fa-fw w3-margin-right w3-large w3-text-

teal"></i>London, UK</p>

<p><i class="fa fa-envelope fa-fw w3-margin-right w3-large w3-text-

teal"></i>[email protected]</p>

<p><i class="fa fa-phone fa-fw w3-margin-right w3-large w3-text-

teal"></i>1224435534</p>

<hr>

<p class="w3-large"><b><i class="fa fa-asterisk fa-fw w3-margin-right w3-

text-teal"></i>Skills</b></p>

<p>Adobe Photoshop</p>

<div class="w3-progress-container w3-round-xlarge w3-small">

<div class="w3-progressbar w3-round-xlarge w3-teal" style="width:90%">

<div class="w3-center w3-text-white">90%</div>

</div>

<p>Photography</p>

<div class="w3-progress-container w3-round-xlarge w3-small">

<div class="w3-progressbar w3-round-xlarge w3-teal" style="width:80%">

<div class="w3-center w3-text-white">80%</div>

</div>

<p>Illustrator</p>

<div class="w3-progress-container w3-round-xlarge w3-small">

<div class="w3-center w3-text-white">75%</div>

</div>

<p>Media</p>

<div class="w3-progress-container w3-round-xlarge w3-small">

<div class="w3-progressbar w3-round-xlarge w3-teal" style="width:50%">

<div class="w3-center w3-text-white">50%</div>

</div>

<br>

<p class="w3-large w3-text-theme"><b><i class="fa fa-globe fa-fw w3-

margin-right w3-text-teal"></i>Languages</b></p>

<p>English</p>

<div class="w3-progress-container w3-round-xlarge">

<div class="w3-progressbar w3-round-xlarge w3-teal"

style="width:100%"></div>

</div>

<p>Spanish</p>

<div class="w3-progress-container w3-round-xlarge">

<div class="w3-progressbar w3-round-xlarge w3-teal"

style="width:55%"></div>

</div>

<p>German</p>

<div class="w3-progress-container w3-round-xlarge">

<div class="w3-progressbar w3-round-xlarge w3-teal"

style="width:25%"></div>
</div>

<br>

</div>

</div><br>

</div>

<div class="w3-container w3-card-2 w3-white w3-margin-bottom">

<h2 class="w3-text-grey w3-padding-16"><i class="fa fa-suitcase fa-fw w3-

margin-right w3-xxlarge w3-text-teal"></i>Work Experience</h2>

<h5 class="w3-opacity"><b>Front End Developer /

w3schools.com</b></h5>

<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-

right"></i>Jan 2015 - <span class="w3-tag w3-teal w3-
round">Current</span></h6>

<p>Lorem ipsum dolor sit amet. Praesentium magnam consectetur vel in

deserunt aspernatur est reprehenderit sunt hic. Nulla tempora soluta ea et odio,
unde doloremque repellendus iure, iste.</p>

<hr>

</div>

<h5 class="w3-opacity"><b>Web Developer / something.com</b></h5>

<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-

right"></i>Mar 2012 - Dec 2014</h6>
<p>Consectetur adipisicing elit. Praesentium magnam consectetur vel in
deserunt aspernatur est reprehenderit sunt hic. Nulla tempora soluta ea et odio,
unde doloremque repellendus iure, iste.</p>

<hr>

</div>

<h5 class="w3-opacity"><b>Graphic Designer /

designsomething.com</b></h5>

<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-

right"></i>Jun 2010 - Mar 2012</h6>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p><br>

</div>

<div class="w3-container w3-card-2 w3-white">

<h2 class="w3-text-grey w3-padding-16"><i class="fa fa-certificate fa-fw w3-

margin-right w3-xxlarge w3-text-teal"></i>Education</h2>

<h5 class="w3-opacity"><b>W3Schools.com</b></h5>

<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-

right"></i>Forever</h6>

<p>Web Development! All I need to know in one place</p>

<hr>

</div>

<h5 class="w3-opacity"><b>London Business School</b></h5>

<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-

right"></i>2013 - 2015</h6>

<p>Master Degree</p>
<hr>

</div>

<h5 class="w3-opacity"><b>School of Coding</b></h5>

<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-

right"></i>2010 - 2013</h6>

<p>Bachelor Degree</p><br>

</div>

</div>

</div>

</div>

<footer class="w3-container w3-teal w3-center w3-margin-top">

<p>Find me on social media.</p>

<i class="fa fa-facebook-official w3-hover-text-indigo w3-large"></i>

<i class="fa fa-instagram w3-hover-text-purple w3-large"></i>

<i class="fa fa-snapchat w3-hover-text-yellow w3-large"></i>

<i class="fa fa-pinterest-p w3-hover-text-red w3-large"></i>

<i class="fa fa-twitter w3-hover-text-light-blue w3-large"></i>

<i class="fa fa-linkedin w3-hover-text-indigo w3-large"></i>

<p>Powered by <a href="http://www.w3schools.com/w3css/default.asp"
target="_blank">w3.css</a></p>

</footer>

</body>

</html>
10) <!DOCTYPE html>

<html>

<title>W3.CSS Template</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{font-family: "Raleway", sans-serif}

body, html {height: 100%}

p {line-height: 2}

.bgimg, .bgimg2 {

min-height: 100%;

background-position: center;

background-size: cover;

.bgimg {background-image: url("/w3images/wedding_couple.jpg")}

.bgimg2 {background-image: url("/w3images/flowers.jpg")}

</style>

<body>

<header class="w3-display-container w3-wide bgimg w3-grayscale-min"

id="home">

<div class="w3-display-middle w3-text-white w3-center">

<h1 class="w3-jumbo">Jane & John</h1>

<h2>Are getting married</h2>

</div>

</header>

<div class="w3-bottom w3-hide-small">

<ul class="w3-navbar w3-white w3-center w3-padding-8 w3-opacity-min w3-

hover-opacity-off">

<li style="width:25%"><a href="#home" class="w3-margin-left w3-

round">Home</a></li>

<li style="width:25%"><a href="#us" class="w3-round">Jane & John</a></li>

<li style="width:25%"><a href="#wedding" class="w3-

round">Wedding</a></li>

<li style="width:25%"><a href="#rsvp" class="w3-margin-right w3-round w3-

hover-black">RSVP</a></li>

</ul>

</div>

<div class="w3-container w3-padding-64 w3-pale-red w3-grayscale-min" id="us">

<h1 class="w3-center w3-text-grey"><b>Jane & John</b></h1>

<img class="w3-round w3-grayscale-min" src="/w3images/wedding_couple2.jpg"

style="width:100%;margin:32px 0">

<p><i>You all know us. And we all know you. We are getting married 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.</i>

</p><br>

<p class="w3-center"><a href="#wedding" class="w3-btn w3-round w3-

padding-large w3-large">Wedding Details</a></p>

</div>

<div class="w3-display-container bgimg2">

<div class="w3-display-middle w3-text-white w3-center">

<h1 class="w3-jumbo">You Are Invited</h1><br>

<h2>Of course..</h2>

</div>

<div class="w3-container w3-padding-64 w3-pale-red w3-grayscale-min w3-center"

id="wedding">

<h1 class="w3-text-grey"><b>THE WEDDING</b></h1>

<img class="w3-round-large w3-grayscale-min"

src="/w3images/wedding_location.jpg" style="width:100%;margin:64px 0">

<p>Wedding Ceremony - 2:00pm</p>

<p>Reception & Dinner - 5:00pm</p>

</div>

<h2>Where</h2>

<p>Some place, an address</p>

<p>Some where, some address</p>

</div>

<div class="w3-container w3-padding-64 w3-pale-red w3-center w3-wide"

id="rsvp">

<h1>HOPE YOU CAN MAKE IT!</h1>

<p class="w3-large">Kindly Respond By January, 2017</p>

</p>

</div>

<div id="id01" class="w3-modal">

<div class="w3-container w3-white w3-center">

<h1 class="w3-wide">CAN YOU COME?</h1>

<p>We really hope you can make it.</p>

<form>

<input class="w3-input w3-border" type="text" placeholder="Name(s)"

name="name">

</form>

<p><i>Sincerely, John & Jane</i></p>

<button onclick="document.getElementById('id01').style.display='none'"
type="button" class="w3-btn-block w3-green">Going</button>

</div>

</div>

<footer class="w3-center w3-black w3-padding-16">

<p>Powered by <a href="http://www.w3schools.com/w3css/default.asp"
title="W3.CSS" target="_blank" class="w3-hover-text-green">w3.css</a></p>

</footer>

<div class="w3-hide-small" style="margin-bottom:32px"> </div>

</body>

</html>
12) <!DOCTYPE html>

<html>

<title>W3.CSS Template</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="https://cdnjs.cloudflare.com/ajax/libs/font-

awesome/4.7.0/css/font-awesome.min.css">

<style>

body,h1 {font-family: "Montserrat", sans-serif}

img {margin-bottom: -7px}

.w3-row-padding img {margin-bottom: 12px}

</style>

<body>

<nav class="w3-sidenav w3-black w3-animate-top w3-center w3-xxlarge"

style="display:none;padding-top:150px" id="mySidenav">

<a href="javascript:void(0)" onclick="w3_close()" class="w3-closenav w3-jumbo

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>

<div class="w3-content" style="max-width:1500px">

<header 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>

<h1><b>PHOTOLIO</b></h1>

<p><b>A template made by w3.css for photographers.</b></p>

<p class="w3-padding-16"><button class="w3-btn"

onclick="myFunction()">Toggle Grid Padding</button></p>

</header>

<div class="w3-row" id="myGrid" style="margin-bottom:128px">

<img src="/w3images/rocks.jpg" style="width:100%">

<img src="/w3images/sound.jpg" style="width:100%">

<img src="/w3images/woods.jpg" style="width:100%">

<img src="/w3images/rock.jpg" style="width:100%">

<img src="/w3images/nature.jpg" style="width:100%">

<img src="/w3images/mist.jpg" style="width:100%">

</div>

<img src="/w3images/coffee.jpg" style="width:100%">

<img src="/w3images/bridge.jpg" style="width:100%">

<img src="/w3images/notebook.jpg" style="width:100%">

<img src="/w3images/london.jpg" style="width:100%">

<img src="/w3images/rocks.jpg" style="width:100%">

<img src="/w3images/avatar_g.jpg" style="width:100%">

</div>

<img src="/w3images/mist.jpg" style="width:100%">

<img src="/w3images/workbench.jpg" style="width:100%">

<img src="/w3images/gondol.jpg" style="width:100%">

<img src="/w3images/skies.jpg" style="width:100%">

<img src="/w3images/lights.jpg" style="width:100%">

<img src="/w3images/workshop.jpg" style="width:100%">

</div>

</div>

<footer class="w3-container w3-padding-64 w3-light-grey w3-center w3-opacity

w3-xlarge" style="margin-top:128px">
<i class="fa fa-facebook-official w3-hover-text-indigo"></i>

<i class="fa fa-instagram w3-hover-text-purple"></i>

<i class="fa fa-snapchat w3-hover-text-yellow"></i>

<i class="fa fa-pinterest-p w3-hover-text-red"></i>

<i class="fa fa-twitter w3-hover-text-light-blue"></i>

<i class="fa fa-linkedin w3-hover-text-indigo"></i>

<p class="w3-medium">Powered by <a

href="http://www.w3schools.com/w3css/default.asp" target="_blank" class="w3-
hover-text-green">w3.css</a></p>

</footer>

// Toggle grid padding

function myFunction() {

var x = document.getElementById("myGrid");

if (x.className === "w3-row") {

x.className = "w3-row-padding";

} else {

x.className = x.className.replace("w3-row-padding", "w3-row");

// 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>

13) <!DOCTYPE html>

<html>

<title>W3.CSS Template</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://fonts.googleapis.com/css?family=Raleway">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-

awesome/4.7.0/css/font-awesome.min.css">

<style>

body,h1 {font-family: "Raleway", Arial, sans-serif}

h1 {letter-spacing: 6px}

.w3-row-padding img {margin-bottom: 12px}

</style>

<body>

<div class="w3-content" style="max-width:1500px">

<header class="w3-panel w3-padding-128 w3-center w3-opacity">

<h1 class="w3-xlarge">PHOTOGRAPHER</h1>

<div class="w3-btn-bar w3-border w3-show-inline-block">

<a href="#" class="w3-btn">Home</a>

<a href="#" class="w3-btn w3-light-grey">Portfolio</a>

<a href="#" class="w3-btn">Contact</a>

<a href="#" class="w3-btn w3-hide-small">Weddings</a>

</div>

</header>

<div class="w3-row-padding w3-grayscale" style="margin-bottom:128px">

<img src="/w3images/wedding.jpg" style="width:100%">

<img src="/w3images/rocks.jpg" style="width:100%">

<img src="/w3images/falls2.jpg" style="width:100%">

<img src="/w3images/paris.jpg" style="width:100%">

<img src="/w3images/nature.jpg" style="width:100%">

<img src="/w3images/mist.jpg" style="width:100%">

<img src="/w3images/paris.jpg" style="width:100%">

</div>

<img src="/w3images/underwater.jpg" style="width:100%">

<img src="/w3images/ocean.jpg" style="width:100%">

<img src="/w3images/wedding.jpg" style="width:100%">

<img src="/w3images/mountainskies.jpg" style="width:100%">

<img src="/w3images/rocks.jpg" style="width:100%">

<img src="/w3images/underwater.jpg" style="width:100%">

</div>
</div>

</div>

<footer class="w3-container w3-padding-64 w3-light-grey w3-center">

<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>

<p>Powered by <a href="http://www.w3schools.com/w3css/default.asp"

target="_blank" class="w3-hover-text-green">w3.css</a></p>

</footer>

</body>

</html>

15) <!DOCTYPE html>

<html>

<title>W3.CSS Template</title>
<meta charset="UTF-8">

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

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">

<body>

<header class="w3-display-container w3-content" style="max-width:1500px">

<img class="w3-image" src="/w3images/photographer.jpg" alt="Me"

width="1500" height="600">

<div class="w3-display-middle w3-padding-xlarge w3-border w3-wide w3-text-

light-grey w3-center">

<h1 class="w3-hide-medium w3-hide-small w3-xxxlarge">JANE DOE</h1>

<h5 class="w3-hide-large" style="white-space:nowrap">JANE DOE</h5>

<h3 class="w3-hide-medium w3-hide-small">PHOTOGRAPHER</h3>

</div>

<ul class="w3-navbar w3-light-grey w3-round w3-display-bottommiddle w3-hide-

small" style="bottom:-16px">

<li><a href="#portfolio">Portfolio</a></li>

<li><a href="#contact">Contact</a></li>

</ul>

</header>

<ul class="w3-navbar w3-light-grey w3-hide-large w3-hide-medium">

<li><a href="#portfolio">Portfolio</a></li>

<li><a href="#contact">Contact</a></li>

</ul>

<div class="w3-content w3-padding-xlarge w3-margin-top" id="portfolio">

<img src="/w3images/ocean.jpg" alt="Ocean" class="w3-image" width="1000"

height="500">

<img src="/w3images/ocean2.jpg" alt="Ocean II" class="w3-image w3-margin-

top" width="1000" height="500">

<img src="/w3images/falls2.jpg" alt="Falls" class="w3-image w3-margin-top"

width="1000" height="500">

<img src="/w3images/mountainskies.jpg" alt="Skies" class="w3-image w3-

margin-top" width="1000" height="500">

<img src="/w3images/mountains2.jpg" alt="Mountains" class="w3-image w3-

margin-top" width="1000" height="500">

<div class="w3-light-grey w3-padding-xlarge w3-padding-32 w3-margin-top"

id="contact">

<h3 class="w3-center">Contact</h3>

<hr>

<input class="w3-input w3-border" type="text" required name="Name">

</div>

<label>Email</label>

<input class="w3-input w3-border" type="text" required name="Email">

</div>

<label>Message</label>

<input class="w3-input w3-border" required name="Message">

</div>

<button type="submit" class="w3-btn w3-btn-block w3-padding-12 w3-dark-

grey">Send</button>

</form><br>

<p>Powered by <a href="http://www.w3schools.com/w3css/default.asp"

target="_blank" class="w3-hover-text-green">w3.css</a></p>

</div>

</div>

</body>

</html>

16) <!DOCTYPE html>

<html>

<title>W3.CSS Template</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="https://cdnjs.cloudflare.com/ajax/libs/font-

awesome/4.7.0/css/font-awesome.min.css">

<style>

body,h1,h2,h3,h4,h5,h6 {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">

<nav class="w3-sidenav w3-collapse w3-white w3-animate-left" style="z-

index:3;width:300px;" id="mySidenav"><br>

<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="/w3images/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="#portfolio" onclick="w3_close()" class="w3-padding w3-text-teal"><i
class="fa fa-th-large fa-fw w3-margin-right"></i>PORTFOLIO</a>

<a href="#about" onclick="w3_close()" class="w3-padding"><i class="fa fa-user

fa-fw w3-margin-right"></i>ABOUT</a>

<a href="#contact" onclick="w3_close()" class="w3-padding"><i class="fa fa-

envelope fa-fw w3-margin-right"></i>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-purple w3-show-inline-

block"><i class="fa fa-instagram"></i></a>

<a href="#" class="w3-hover-white w3-hover-text-yellow w3-show-inline-

block"><i class="fa fa-snapchat"></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-indigo w3-show-inline-

block"><i class="fa fa-linkedin"></i></a>

</div>

</nav>

<div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()"

style="cursor:pointer" title="close side menu" id="myOverlay"></div>

<div class="w3-main" style="margin-left:300px">

<header class="w3-container" id="portfolio">

<a href="#"><img src="/w3images/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 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>

<div class="w3-third w3-container w3-margin-bottom">

<img src="/w3images/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="/w3images/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 class="w3-third w3-container">

<img src="/w3images/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 class="w3-third w3-container w3-margin-bottom">

<img src="/w3images/p1.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 class="w3-third w3-container w3-margin-bottom">

<img src="/w3images/p2.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 class="w3-third w3-container">

<img src="/w3images/p3.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 class="w3-center w3-padding-32">

<li><a class="w3-black" href="#">1</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>

<div class="w3-row-padding w3-padding-16" id="about">

<div class="w3-col m6">

<img src="/w3images/avatar_g.jpg" alt="Me" style="width:100%">

</div>

<div class="w3-col m6">

<img src="/w3images/me2.jpg" alt="Me" style="width:100%">

</div>

<div class="w3-container w3-padding-large" style="margin-bottom:32px">

<h4><b>About Me</b></h4>

<hr>

<h4>Technical Skills</h4>

<p>Photography</p>

<div class="w3-progress-container w3-grey">

<div class="w3-progressbar w3-dark-grey" style="width:95%"></div>

</div>

<p>Web Design</p>

<div class="w3-progress-container w3-grey">

<div class="w3-progressbar w3-dark-grey" style="width:85%"></div>

</div>

<p>Photoshop</p>

<div class="w3-progress-container w3-grey">

<div class="w3-progressbar w3-dark-grey" style="width:80%"></div>

</div>

<p>

<button class="w3-btn w3-dark-grey w3-padding-large w3-margin-top w3-

margin-bottom">

<i class="fa fa-download w3-margin-right"></i>Download Resume

</button>

</p>

<hr>

<h4>How much I charge</h4>

<div class="w3-row-padding" style="margin:0 -16px">

<div class="w3-third w3-margin-bottom">

<ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-

off">
<li class="w3-black w3-xlarge w3-padding-32">Basic</li>

<li class="w3-padding-16">Web Design</li>

<li class="w3-padding-16">Photography</li>

<li class="w3-padding-16">1GB Storage</li>

<li class="w3-padding-16">Mail Support</li>

<span class="w3-opacity">per month</span>

</li>

<li class="w3-light-grey w3-padding-24">

<button class="w3-btn w3-teal w3-padding-large w3-hover-black">Sign

Up</button>

</li>

</ul>

</div>

<div class="w3-third w3-margin-bottom">

<ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-

off">

<li class="w3-teal w3-xlarge w3-padding-32">Pro</li>

<li class="w3-padding-16">Web Design</li>

<li class="w3-padding-16">Photography</li>

<li class="w3-padding-16">50GB Storage</li>

<li class="w3-padding-16">Endless Support</li>

<span class="w3-opacity">per month</span>

</li>

<li class="w3-light-grey w3-padding-24">

<button class="w3-btn w3-teal w3-padding-large w3-hover-black">Sign

Up</button>

</li>

</ul>

</div>

<ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-

off">

<li class="w3-black w3-xlarge w3-padding-32">Premium</li>

<li class="w3-padding-16">Web Design</li>

<li class="w3-padding-16">Photography</li>

<li class="w3-padding-16">Unlimited Storage</li>

<li class="w3-padding-16">Endless Support</li>

<span class="w3-opacity">per month</span>

</li>

<li class="w3-light-grey w3-padding-24">

<button class="w3-btn w3-teal w3-padding-large w3-hover-black">Sign

Up</button>

</li>

</ul>

</div>

</div>
</div>

<div class="w3-container w3-padding-large w3-grey">

<h4 id="contact"><b>Contact Me</b></h4>

<div class="w3-row-padding w3-center w3-padding-24" style="margin:0 -16px">

<div class="w3-third w3-dark-grey">

<p><i class="fa fa-envelope w3-xxlarge w3-text-light-grey"></i></p>

<p>[email protected]</p>

</div>

<div class="w3-third w3-teal">

<p><i class="fa fa-map-marker w3-xxlarge w3-text-light-grey"></i></p>

<p>Chicago, US</p>

</div>

<div class="w3-third w3-dark-grey">

<p><i class="fa fa-phone w3-xxlarge w3-text-light-grey"></i></p>

</div>

<form action="form.asp" target="_blank">

<input class="w3-input w3-border" type="text" name="Name" required>

</div>

<div class="w3-group">
<label>Email</label>

<input class="w3-input w3-border" type="text" name="Email" required>

</div>

<label>Message</label>

<input class="w3-input w3-border" type="text" name="Message" required>

</div>

<button type="submit" class="w3-btn w3-padding-large w3-margin-bottom"><i

class="fa fa-paper-plane w3-margin-right"></i>Send Message</button>

</form>

</div>

<footer class="w3-container w3-padding-32 w3-dark-grey">

<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>

<h3>BLOG POSTS</h3>

<ul class="w3-ul w3-hoverable">

<span class="w3-large">Lorem</span><br>

<span>Sed mattis nunc</span>

</li>

<img src="/w3images/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>

<h3>POPULAR TAGS</h3>

<p>

<span class="w3-tag w3-black w3-margin-bottom">Travel</span> <span

class="w3-tag w3-grey w3-small w3-margin-bottom">New York</span> <span
class="w3-tag w3-grey w3-small w3-margin-bottom">London</span>

<span class="w3-tag w3-grey w3-small w3-margin-bottom">IKEA</span>

<span class="w3-tag w3-grey w3-small w3-margin-bottom">NORWAY</span>
<span class="w3-tag w3-grey w3-small w3-margin-bottom">DIY</span>

<span class="w3-tag w3-grey w3-small w3-margin-bottom">Ideas</span>

<span class="w3-tag w3-grey w3-small w3-margin-bottom">Baby</span> <span
class="w3-tag w3-grey w3-small w3-margin-bottom">Family</span>

<span class="w3-tag w3-grey w3-small w3-margin-bottom">News</span>

<span class="w3-tag w3-grey w3-small w3-margin-bottom">Clothing</span>
<span class="w3-tag w3-grey w3-small w3-margin-bottom">Shopping</span>

<span class="w3-tag w3-grey w3-small w3-margin-bottom">Sports</span>

<span class="w3-tag w3-grey w3-small w3-margin-bottom">Games</span>
</p>

</div>

</footer>

<div class="w3-black w3-center w3-padding-24">Powered by <a

href="http://www.w3schools.com/w3css/default.asp" title="W3.CSS"
target="_blank" class="w3-hover-opacity">w3.css</a></div>

</div>

// 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>
17) <!DOCTYPE html>

<html>

<title>W3.CSS Template</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}

.w3-third img{margin-bottom: -6px; opacity: 0.8; cursor: pointer}

.w3-third img:hover{opacity: 1}

</style>

<body class="w3-light-grey w3-content" style="max-width:1600px">

<nav class="w3-sidenav w3-white w3-animate-left w3-center w3-text-grey w3-

collapse w3-top" style="z-index:3;width:300px;font-weight:bold"
id="mySidenav"><br>

<a href="javascript:void(0)" onclick="w3_close()" class="w3-padding w3-hide-

large">CLOSE</a>

<a href="#" onclick="w3_close()" class="w3-padding">PORTFOLIO</a>

<a href="#about" onclick="w3_close()" class="w3-padding">ABOUT ME</a>

<a href="#contact" onclick="w3_close()" class="w3-padding">CONTACT</a>

</nav>

<span class="w3-left w3-padding">SOME NAME</span>

<a href="javascript:void(0)" class="w3-right w3-btn w3-white"

onclick="w3_open()"></a>

</header>

<div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()"

style="cursor:pointer" title="close side menu" id="myOverlay"></div>

<div class="w3-main" style="margin-left:300px">

<div class="w3-hide-large" style="margin-top:83px"></div>

<img src="/w3images/natureboy.jpg" style="width:100%"

onclick="onClick(this)" alt="A boy surrounded by beautiful nature">

<img src="/w3images/girl_mountain.jpg" style="width:100%"

onclick="onClick(this)" alt="What a beautiful scenery this sunset">

<img src="/w3images/girl.jpg" style="width:100%" onclick="onClick(this)"

alt="The Beach. Me. Alone. Beautiful">

</div>

<img src="/w3images/man_bench.jpg" style="width:100%"

onclick="onClick(this)" alt="Waiting for the bus in the desert">

<img src="/w3images/natureboy.jpg" style="width:100%"

onclick="onClick(this)" alt="Nature again.. At its finest!">

</div>

<img src="/w3images/girl.jpg" style="width:100%" onclick="onClick(this)"

alt="Canoeing again">

<img src="/w3images/girl_train.jpg" style="width:100%" onclick="onClick(this)"

alt="A girl, and a train passing">

<img src="/w3images/closegirl.jpg" style="width:100%" onclick="onClick(this)"

alt="What a beautiful day!">

</div>

<div class="w3-center w3-padding-32">

<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>

<div id="modal01" class="w3-modal w3-black w3-padding-0"

onclick="this.style.display='none'">

<span class="w3-closebtn w3-text-white w3-opacity w3-hover-opacity-off w3-

xxlarge w3-container w3-display-topright"></span>

<div class="w3-modal-content w3-animate-zoom w3-center w3-transparent w3-

padding-64">

<img id="img01" class="w3-image">

</div>

<div class="w3-container w3-dark-grey w3-center w3-text-light-grey w3-padding-

32" id="about">

<h4><b>About Me</b></h4>

<img src="/w3images/avatar_hat.jpg" alt="Me" class="w3-image w3-padding-

32" width="600" height="650">

<div class="w3-content w3-justify" style="max-width:600px">

<p>Some text about me. I love taking photos of PEOPLE. I am lorem ipsum
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. Ut enim ad minim veniam, quis

nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>

<p>mail: [email protected]</p>

<p>tel: 5353 35531</p>

<h4 class="w3-padding-16">Technical Skills</h4>

<p class="w3-wide">Photography</p>

<div class="w3-progressbar" style="width:95%"></div>

</div>

<p class="w3-wide">Web Design</p>

<div class="w3-progressbar" style="width:85%"></div>

</div>

<p class="w3-wide">Photoshop</p>

<div class="w3-progressbar" style="width:80%"></div>

</div>

<p><button class="w3-btn w3-light-grey w3-padding-large w3-margin-top w3-

margin-bottom w3-hover-black">Download Resume</button></p>

<h4 class="w3-padding-16">How much I charge</h4>

<div class="w3-row-padding" style="margin:0 -16px">

<div class="w3-half w3-margin-bottom">

<ul class="w3-ul w3-white w3-center w3-opacity w3-hover-opacity-off">

<li class="w3-black w3-xlarge w3-padding-32">Basic</li>

<li class="w3-padding-16">Web Design</li>

<li class="w3-padding-16">Photography</li>

<li class="w3-padding-16">5GB Storage</li>

<li class="w3-padding-16">Mail Support</li>

<span class="w3-opacity">per month</span>

</li>

<li class="w3-light-grey w3-padding-24">

<button class="w3-btn w3-white w3-padding-large w3-hover-black">Sign

Up</button>

</li>

</ul>

</div>

<ul class="w3-ul w3-white w3-center w3-opacity w3-hover-opacity-off">

<li class="w3-black w3-xlarge w3-padding-32">Pro</li>

<li class="w3-padding-16">Web Design</li>

<li class="w3-padding-16">Photography</li>

<li class="w3-padding-16">50GB Storage</li>

<li class="w3-padding-16">Endless Support</li>

<span class="w3-opacity">per month</span>

</li>

<li class="w3-light-grey w3-padding-24">

</li>

</ul>

</div>

<div class="w3-container w3-light-grey w3-padding-32 w3-padding-large"

id="contact">

<div class="w3-content" style="max-width:600px">

<h4 class="w3-center"><b>Contact Me</b></h4>

<p>Do you want me to photograph you? Fill out the form and fill me in with the
details :) I love meeting new people!</p>

<form action="form.asp" target="_blank">

<input class="w3-input w3-border" type="text" name="Name" required>

</div>

<label>Email</label>

<input class="w3-input w3-border" type="text" name="Email" required>

</div>

<label>Message</label>
<input class="w3-input w3-border" type="text" name="Message" required>

</div>

<button type="submit" class="w3-btn-block w3-padding-large w3-black w3-

margin-bottom">Send Message</button>

</form>

</div>

<footer class="w3-container w3-padding-32 w3-grey">

<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum,

porta lectus vitae, ultricies congue gravida diam non fringilla.</p>

</div>

<h3>BLOG POSTS</h3>

<li class="w3-padding-16 w3-hover-black">

<img src="/w3images/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 w3-hover-black">

<span class="w3-large">Ipsum</span><br>

<span>Praes tinci sed</span>

</li>

</ul>

</div>

<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>

<div class="w3-black w3-center w3-padding-24">Powered by <a

href="http://www.w3schools.com/w3css/default.asp" title="W3.CSS"
target="_blank" class="w3-hover-opacity">w3.css</a></div>

</div>

// 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";

// Modal Image Gallery

function onClick(element) {

document.getElementById("img01").src = element.src;

document.getElementById("modal01").style.display = "block";

var captionText = document.getElementById("caption");

captionText.innerHTML = element.alt;

}
</script>

</body>

</html>

18) <!DOCTYPE html>

<html>

<title>W3.CSS Template</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}

.w3-quarter img{margin-bottom: -6px; cursor: pointer}

.w3-quarter img:hover{opacity: 0.6; transition: 0.3s}

</style>

<nav class="w3-sidenav w3-black w3-animate-right w3-center w3-top w3-text-light-

grey w3-large" style="z-index:3;width:250px;font-weight:bold;display:none;right:0;"
id="mySidenav">

<a href="javascript:void()" onclick="w3_close()" class="w3-padding-

32">CLOSE</a>

<a href="#" onclick="w3_close()" class="w3-padding-16">PORTFOLIO</a>

<a href="#about" onclick="w3_close()" class="w3-padding-16">ABOUT ME</a>

<a href="#contact" onclick="w3_close()" class="w3-padding-16">CONTACT</a>

</nav>

<header class="w3-container w3-top w3-white w3-xlarge w3-padding-16">

<span class="w3-left w3-padding">SOME NAME</span>

<a href="javascript:void(0)" class="w3-right w3-btn w3-white"

onclick="w3_open()"></a>

</header>

<div class="w3-overlay w3-animate-opacity" onclick="w3_close()"

style="cursor:pointer" title="close side menu" id="myOverlay"></div>

<div class="w3-main w3-content" style="max-width:1600px;margin-top:83px">

<div class="w3-row w3-grayscale-min">

<img src="/w3images/girl.jpg" style="width:100%" onclick="onClick(this)"

alt="Canoeing again">

<img src="/w3images/boy.jpg" style="width:100%" onclick="onClick(this)"

alt="Quiet day at the beach. Cold, but beautiful">

<img src="/w3images/girl.jpg" style="width:100%" onclick="onClick(this)"

alt="The Beach. Me. Alone. Beautiful">

</div>
<div class="w3-quarter">

<img src="/w3images/girl_train.jpg" style="width:100%" onclick="onClick(this)"

alt="A girl, and a train passing">

<img src="/w3images/man_bench.jpg" style="width:100%"

onclick="onClick(this)" alt="Waiting for the bus in the desert">

<img src="/w3images/natureboy.jpg" style="width:100%"

onclick="onClick(this)" alt="Nature again.. At its finest!">

</div>

<img src="/w3images/man_bench.jpg" style="width:100%"

onclick="onClick(this)" alt="Waiting for the bus in the desert">

<img src="/w3images/girl_mountain.jpg" style="width:100%"

onclick="onClick(this)" alt="What a beautiful scenery this sunset">

<img src="/w3images/closegirl.jpg" style="width:100%" onclick="onClick(this)"

alt="The Beach. Me. Alone. Beautiful">

</div>

<img src="/w3images/natureboy.jpg" style="width:100%"

onclick="onClick(this)" alt="A boy surrounded by beautiful nature">

<img src="/w3images/girl_train.jpg" style="width:100%" onclick="onClick(this)"

alt="A girl, and a train passing">

<img src="/w3images/boy.jpg" style="width:100%" onclick="onClick(this)"

alt="Quiet day at the beach. Cold, but beautiful">

</div>

<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>

<div id="modal01" class="w3-modal w3-black w3-padding-0"

onclick="this.style.display='none'">

<span class="w3-closebtn w3-text-white w3-opacity w3-hover-opacity-off w3-

xxlarge w3-container w3-display-topright"></span>

<div class="w3-modal-content w3-animate-zoom w3-center w3-transparent w3-

padding-64">

<img id="img01" class="w3-image">

</div>

<div class="w3-container w3-dark-grey w3-center w3-text-light-grey w3-padding-

32" id="about">

<h4><b>About Me</b></h4>

<img src="/w3images/avatar_hat.jpg" alt="Me" class="w3-image w3-padding-

32" width="600" height="650">
<div class="w3-content w3-justify" style="max-width:600px">

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. Ut enim ad minim veniam, quis

nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

</p>

<p>mail: [email protected]</p>

<p>tel: 5353 35531</p>

<h4 class="w3-padding-16">Technical Skills</h4>

<p class="w3-wide">Photography</p>

<div class="w3-progressbar" style="width:95%"></div>

</div>

<p class="w3-wide">Web Design</p>

<div class="w3-progressbar" style="width:85%"></div>

</div>

<p class="w3-wide">Photoshop</p>

<div class="w3-progressbar" style="width:80%"></div>

</div>

<p><button class="w3-btn w3-light-grey w3-padding-large w3-margin-top w3-

margin-bottom w3-hover-black">Download Resume</button></p>

<h4 class="w3-padding-16">How much I charge</h4>

<div class="w3-row-padding" style="margin:0 -16px">

<div class="w3-half w3-margin-bottom">

<ul class="w3-ul w3-white w3-center">

<li class="w3-black w3-xlarge w3-padding-32">Basic</li>

<li class="w3-padding-16">Web Design</li>

<li class="w3-padding-16">Photography</li>

<li class="w3-padding-16">5GB Storage</li>

<li class="w3-padding-16">Mail Support</li>

<span class="w3-opacity">per month</span>

</li>

<li class="w3-light-grey w3-padding-24">

<button class="w3-btn w3-white w3-padding-large w3-hover-black">Sign

Up</button>

</li>

</ul>

</div>

<ul class="w3-ul w3-white w3-center">

<li class="w3-padding-16">Web Design</li>

<li class="w3-padding-16">Photography</li>

<li class="w3-padding-16">50GB Storage</li>

<li class="w3-padding-16">Endless Support</li>

<span class="w3-opacity">per month</span>

</li>

<li class="w3-light-grey w3-padding-24">

<button class="w3-btn w3-white w3-padding-large w3-hover-black">Sign

Up</button>

</li>

</ul>

</div>

<div class="w3-container w3-light-grey w3-padding-32 w3-padding-large"

id="contact">

<div class="w3-content" style="max-width:600px">

<h4 class="w3-center"><b>Contact Me</b></h4>

<p>Do you want me to photograph you? Fill out the form and fill me in with the
details :) I love meeting new people!</p>

<form action="form.asp" target="_blank">

<input class="w3-input w3-border" type="text" name="Name" required>

</div>

<label>Email</label>

<input class="w3-input w3-border" type="text" name="Email" required>

</div>

<label>Message</label>

<input class="w3-input w3-border" type="text" name="Message" required>

</div>

<button type="submit" class="w3-btn-block w3-padding-large w3-black w3-

margin-bottom">Send Message</button>

</form>

</div>

<footer class="w3-container w3-padding-32 w3-grey">

<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum,

porta lectus vitae, ultricies congue gravida diam non fringilla.</p>

</div>
<div class="w3-third">

<h3>BLOG POSTS</h3>

<li class="w3-padding-16 w3-hover-black">

<img src="/w3images/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 w3-hover-black">

<img src="/w3images/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>

<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>

</footer>

<div class="w3-black w3-center w3-padding-24">Powered by <a

href="http://www.w3schools.com/w3css/default.asp" title="W3.CSS"
target="_blank" class="w3-hover-opacity">w3.css</a></div>

</div>

// 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";

// Modal Image Gallery

function onClick(element) {

document.getElementById("img01").src = element.src;

document.getElementById("modal01").style.display = "block";

var captionText = document.getElementById("caption");

captionText.innerHTML = element.alt;

</script>

</body>

</html>
19) <!DOCTYPE html>

<html>

<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="https://cdnjs.cloudflare.com/ajax/libs/font-

awesome/4.7.0/css/font-awesome.min.css">

<style>

body, h1,h2,h3,h4,h5,h6 {font-family: "Montserrat", sans-serif}

.w3-row-padding img {margin-bottom: 12px}

/* Set the width of the sidenav to 120px */

.w3-sidenav {width: 120px;background: #222;}

/* Add a left margin to the "page content" that matches the width of the sidenav
(120px) */

#main {margin-left: 120px}

/* Remove margins from "page content" on small screens */

@media only screen and (max-width: 600px) {#main {margin-left: 0}}

</style>

<nav class="w3-sidenav w3-center w3-small w3-hide-small">

<img src="/w3images/avatar_smoke.jpg" style="width:100%">

<a class="w3-padding-large w3-black" href="#">

<i class="fa fa-home w3-xxlarge"></i>

</a>

<a class="w3-padding-large w3-hover-black" href="#about">

<i class="fa fa-user w3-xxlarge"></i>

<p>ABOUT</p>

</a>

<a class="w3-padding-large w3-hover-black" href="#photos">

<i class="fa fa-eye w3-xxlarge"></i>

<p>PHOTOS</p>

</a>

<a class="w3-padding-large w3-hover-black" href="#contact">

<i class="fa fa-envelope w3-xxlarge"></i>

<p>CONTACT</p>

</a>

</nav>

<div class="w3-top w3-hide-large w3-hide-medium" id="myNavbar">

<ul class="w3-navbar w3-black w3-opacity w3-hover-opacity-off w3-center w3-

small">
<li class="w3-left" style="width:25% !important"><a href="#">HOME</a></li>

<li class="w3-left" style="width:25% !important"><a

href="#about">ABOUT</a></li>

<li class="w3-left" style="width:25% !important"><a

href="#photos">PHOTOS</a></li>

<li class="w3-left" style="width:25% !important"><a

href="#contact">CONTACT</a></li>

</ul>

</div>

<div class="w3-padding-large" id="main">

<header class="w3-container w3-padding-32 w3-center w3-black" id="home">

<h1 class="w3-jumbo"><span class="w3-hide-small">I'm</span> John

Doe.</h1>

<p>Photographer and Web Designer.</p>

<img src="/w3images/man_smoke.jpg" alt="boy" class="w3-image"

width="992" height="1108">

</header>

<div class="w3-content w3-justify w3-text-grey w3-padding-64" id="about">

<h2 class="w3-text-light-grey">My Name</h2>

<hr style="width:200px" class="w3-opacity">

<p>Some text about me. Some text about me. I am lorem ipsum 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.

</p>

<h3 class="w3-padding-16 w3-text-light-grey">My Skills</h3>

<p class="w3-wide">Photography</p>

<div class="w3-progressbar" style="width:95%"></div>

</div>

<p class="w3-wide">Web Design</p>

<div class="w3-progressbar" style="width:85%"></div>

</div>

<p class="w3-wide">Photoshop</p>

<div class="w3-progressbar" style="width:80%"></div>

</div><br>

<div class="w3-row w3-center w3-padding-16 w3-section w3-light-grey">

<div class="w3-quarter w3-section">

Partners

</div>
<div class="w3-quarter w3-section">

Projects Done

</div>

<div class="w3-quarter w3-section">

Happy Clients

</div>

<div class="w3-quarter w3-section">

Meetings

</div>

<button class="w3-btn w3-light-grey w3-padding-large w3-section w3-hover-

grey">

<i class="fa fa-download"></i> Download Resume

</button>

<h3 class="w3-padding-16 w3-text-light-grey">My Price</h3>

<div class="w3-row-padding" style="margin:0 -16px">

<div class="w3-half w3-margin-bottom">

<ul class="w3-ul w3-white w3-center w3-opacity w3-hover-opacity-off">

<li class="w3-dark-grey w3-xlarge w3-padding-32">Basic</li>

<li class="w3-padding-16">Web Design</li>

<li class="w3-padding-16">Photography</li>
<li class="w3-padding-16">5GB Storage</li>

<li class="w3-padding-16">Mail Support</li>

<span class="w3-opacity">per month</span>

</li>

<li class="w3-light-grey w3-padding-24">

<button class="w3-btn w3-white w3-padding-large w3-hover-black">Sign

Up</button>

</li>

</ul>

</div>

<ul class="w3-ul w3-white w3-center w3-opacity w3-hover-opacity-off">

<li class="w3-dark-grey w3-xlarge w3-padding-32">Pro</li>

<li class="w3-padding-16">Web Design</li>

<li class="w3-padding-16">Photography</li>

<li class="w3-padding-16">50GB Storage</li>

<li class="w3-padding-16">Endless Support</li>

<span class="w3-opacity">per month</span>

</li>

<li class="w3-light-grey w3-padding-24">

<button class="w3-btn w3-white w3-padding-large w3-hover-black">Sign

Up</button>
</li>

</ul>

</div>

</div>

<h3 class="w3-padding-24 w3-text-light-grey">My Reputation</h3>

<img src="/w3images/bandmember.jpg" alt="Avatar" class="w3-left w3-circle

w3-margin-right" style="width:80px">

<p><span class="w3-large w3-margin-right">Chris Fox.</span> CEO at Mighty

Schools.</p>

<p>Jane Doe saved us from a web disaster.</p><br>

<img src="/w3images/avatar_g2.jpg" alt="Avatar" class="w3-left w3-circle w3-

margin-right" style="width:80px">

<p><span class="w3-large w3-margin-right">Rebecca Flex.</span> CEO at

Company.</p>

<p>No one is better than Jane Doe.</p>

</div>

<div class="w3-padding-64 w3-content" id="photos">

<h2 class="w3-text-light-grey">My Photos</h2>

<hr style="width:200px" class="w3-opacity">

<img src="/w3images/wedding.jpg" style="width:100%">

<img src="/w3images/rocks.jpg" style="width:100%">

<img src="/w3images/sailboat.jpg" style="width:100%">

</div>

<img src="/w3images/underwater.jpg" style="width:100%">

<img src="/w3images/chef.jpg" style="width:100%">

<img src="/w3images/wedding.jpg" style="width:100%">

<img src="/w3images/p6.jpg" style="width:100%">

</div>

</div>

</div>

<div class="w3-padding-64 w3-content w3-text-grey" id="contact">

<h2 class="w3-text-light-grey">Contact Me</h2>

<hr style="width:200px" class="w3-opacity">

<p><i class="fa fa-map-marker fa-fw w3-text-white w3-xxlarge w3-margin-

right"></i> Chicago, US</p>
<p><i class="fa fa-phone fa-fw w3-text-white w3-xxlarge w3-margin-
right"></i> Phone: +00 151515</p>

<p><i class="fa fa-envelope fa-fw w3-text-white w3-xxlarge w3-margin-right">

</i> Email: [email protected]</p>

</div><br>

<p>Lets get in touch. Send me a message:</p>

<form action="form.asp" target="_blank">

<p><input class="w3-input w3-padding-16" type="text" placeholder="Name"

required name="Name"></p>

<p><input class="w3-input w3-padding-16" type="text" placeholder="Email"

required name="Email"></p>

<p><input class="w3-input w3-padding-16" type="text" placeholder="Subject"

required name="Subject"></p>

<p><input class="w3-input w3-padding-16" type="text"

placeholder="Message" required name="Message"></p>

<p>

<button class="w3-btn w3-light-grey w3-padding-large" type="submit">

<i class="fa fa-paper-plane"></i> SEND MESSAGE

</button>

</p>

</form>

</div>

<footer class="w3-content w3-padding-64 w3-text-grey w3-xlarge">

<i class="fa fa-facebook-official w3-hover-text-indigo"></i>

<i class="fa fa-instagram w3-hover-text-purple"></i>

<i class="fa fa-pinterest-p w3-hover-text-red"></i>

<i class="fa fa-twitter w3-hover-text-light-blue"></i>

<i class="fa fa-linkedin w3-hover-text-indigo"></i>

<p class="w3-medium">Powered by <a

href="http://www.w3schools.com/w3css/default.asp" target="_blank" class="w3-
hover-text-green">w3.css</a></p>

</footer>

</div>

</body>

</html>

20) <!DOCTYPE html>

<html>

<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="https://cdnjs.cloudflare.com/ajax/libs/font-

awesome/4.7.0/css/font-awesome.min.css">

<style>

body, h1,h2,h3,h4,h5,h6 {font-family: "Montserrat", sans-serif}

.w3-row-padding img {margin-bottom: 12px}

.bgimg {

background-position: center;

background-repeat: no-repeat;

background-size: cover;

min-height: 100%;

</style>

<body>

<nav class="w3-sidenav w3-hide-medium w3-hide-small" style="width:40%">

</nav>

<nav class="w3-sidenav w3-black w3-animate-right w3-center w3-xxlarge"

style="display:none;padding-top:150px;right:0;z-index:2" id="mySidenav">

<a href="javascript:void(0)" onclick="closeNav()" class="w3-closenav w3-xxxlarge

w3-display-topright" style="padding:0 12px;">

<i class="fa fa-remove"></i>

</a>

<a href="#" class="w3-text-grey w3-hover-black"

onclick="closeNav()">Home</a>

<a href="#portfolio" class="w3-text-grey w3-hover-black"

onclick="closeNav()">Portfolio</a>
<a href="#about" class="w3-text-grey w3-hover-black"
onclick="closeNav()">About</a>

<a href="#contact" class="w3-text-grey w3-hover-black"

onclick="closeNav()">Contact</a>

</nav>

<div class="w3-main w3-padding-large" style="margin-left:40%">

<span class="w3-opennav w3-top w3-padding-top w3-xxlarge w3-margin-right w3-

text-grey w3-hover-text-black" style="width:auto;right:0;" onclick="openNav()"><i
class="fa fa-bars"></i></span>

<header class="w3-container w3-padding-128 w3-center" id="home">

<h1 class="w3-jumbo"><b>Jane Doe</b></h1>

<p>Photographer and Web Designer.</p>

<img src="/w3images/profile_girl.jpg" class="w3-image w3-hide-large w3-hide-

small w3-round" style="display:block;width:60%;margin:auto;">

<img src="/w3images/profile_girl.jpg" class="w3-image w3-hide-large w3-hide-

medium w3-round" width="1000" height="1333">

<button class="w3-btn w3-light-grey w3-padding-large w3-margin-top">

<i class="fa fa-download"></i> Download Resume

</button>

</header>

<div class="w3-padding-32 w3-content" id="portfolio">

<h2 class="w3-text-grey">My Portfolio</h2>

<div class="w3-row-padding" style="margin:0 -16px">

<img src="/w3images/wedding.jpg" style="width:100%">

<img src="/w3images/rocks.jpg" style="width:100%">

<img src="/w3images/sailboat.jpg" style="width:100%">

</div>

<img src="/w3images/underwater.jpg" style="width:100%">

<img src="/w3images/chef.jpg" style="width:100%">

<img src="/w3images/wedding.jpg" style="width:100%">

<img src="/w3images/p6.jpg" style="width:100%">

</div>

</div>

</div>

<div class="w3-content w3-justify w3-text-grey w3-padding-32" id="about">

<h2>About</h2>

<hr class="w3-opacity">
<p>Some text about me. Some text about me. I am lorem ipsum 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. Ut

enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat.

</p>

<h3 class="w3-padding-16">My Skills</h3>

<p class="w3-wide">Photography</p>

<div class="w3-progressbar" style="width:95%">

<div class="w3-center w3-text-white">95%</div>

</div>

<p class="w3-wide">Web Design</p>

<div class="w3-progressbar" style="width:85%">

<div class="w3-center w3-text-white">85%</div>

</div>

<p class="w3-wide">Photoshop</p>

<div class="w3-progressbar" style="width:80%">

<div class="w3-center w3-text-white">80%</div>

</div>
</div><br>

<div class="w3-row w3-center w3-dark-grey w3-padding-16 w3-section">

<div class="w3-quarter w3-section">

Partners

</div>

<div class="w3-quarter w3-section">

Projects Done

</div>

<div class="w3-quarter w3-section">

Happy Clients

</div>

<div class="w3-quarter w3-section">

Meetings

</div>

<button class="w3-btn w3-light-grey w3-padding-large w3-section">

<i class="fa fa-download"></i> Download Resume

</button>

<h3 class="w3-padding-24">My Reputation</h3>

<img src="/w3images/avatar_smoke.jpg" alt="Avatar" class="w3-left w3-circle

w3-margin-right" style="width:80px">

<p><span class="w3-large w3-text-black w3-margin-right">Chandler

Bing.</span> Web Designer.</p>

<p>Jane Doe is just awesome. I am so happy to have met her!</p><br>

<img src="/w3images/bandmember.jpg" alt="Avatar" class="w3-left w3-circle

w3-margin-right" style="width:80px">

<p><span class="w3-large w3-text-black w3-margin-right">Chris Fox.</span>

CEO at Mighty Schools.</p>

<p>Jane Doe saved us from a web disaster.</p><br>

<img src="/w3images/avatar_g2.jpg" alt="Avatar" class="w3-left w3-circle w3-

margin-right" style="width:80px">

<p><span class="w3-large w3-text-black w3-margin-right">Rebecca

Flex.</span> CEO at Company.</p>

<p>No one is better than Jane Doe.</p><br>

<h3 class="w3-padding-16">My Price</h3>

<div class="w3-row-padding" style="margin:0 -16px">

<div class="w3-half w3-margin-bottom">

<ul class="w3-ul w3-center w3-card-2 w3-hover-shadow">

<li class="w3-dark-grey w3-xlarge w3-padding-32">Basic</li>

<li class="w3-padding-16">Web Design</li>

<li class="w3-padding-16">Photography</li>

<li class="w3-padding-16">5GB Storage</li>

<li class="w3-padding-16">Mail Support</li>

<span class="w3-opacity">per month</span>

</li>

<li class="w3-light-grey w3-padding-24">

<button class="w3-btn w3-white w3-padding-large w3-hover-black">Sign

Up</button>

</li>

</ul>

</div>

<ul class="w3-ul w3-center w3-card-2 w3-hover-shadow">

<li class="w3-black w3-xlarge w3-padding-32">Pro</li>

<li class="w3-padding-16">Web Design</li>

<li class="w3-padding-16">Photography</li>

<li class="w3-padding-16">50GB Storage</li>

<li class="w3-padding-16">Endless Support</li>

<span class="w3-opacity">per month</span>

</li>

<li class="w3-light-grey w3-padding-24">

<button class="w3-btn w3-white w3-padding-large w3-hover-black">Sign

Up</button>

</li>

</ul>
</div>

</div>

</div>

<div class="w3-padding-32 w3-content w3-text-grey" id="contact" style="margin-

bottom:64px">

<h2>Contact Me</h2>

<p><i class="fa fa-map-marker fa-fw w3-xxlarge w3-margin-right"></i>

Chicago, US</p>

<p><i class="fa fa-phone fa-fw w3-xxlarge w3-margin-right"></i> Phone: +00

151515</p>

<p><i class="fa fa-envelope fa-fw w3-xxlarge w3-margin-right"> </i> Email:

[email protected]</p>

</div>

<div id="googleMap" class="w3-greyscale-max"

style="width:100%;height:300px;margin:36px 0;"></div>

<p>Lets get in touch. Send me a message:</p>

<form action="form.asp" target="_blank">

<p><input class="w3-input w3-padding-16 w3-border" type="text"

placeholder="Email" required name="Email"></p>

<p><input class="w3-input w3-padding-16 w3-border" type="text"

placeholder="Subject" required name="Subject"></p>

<p><input class="w3-input w3-padding-16 w3-border" type="text"

placeholder="Message" required name="Message"></p>

<p>

<button class="w3-btn w3-light-grey w3-padding-large" type="submit">

<i class="fa fa-paper-plane"></i> SEND MESSAGE

</button>

</p>

</form>

</div>

<footer class="w3-container w3-padding-64 w3-light-grey w3-center w3-opacity

w3-xlarge" style="margin:-24px">

<i class="fa fa-facebook-official w3-hover-text-indigo"></i>

<i class="fa fa-instagram w3-hover-text-purple"></i>

<i class="fa fa-snapchat w3-hover-text-yellow"></i>

<i class="fa fa-pinterest-p w3-hover-text-red"></i>

<i class="fa fa-twitter w3-hover-text-light-blue"></i>

<i class="fa fa-linkedin w3-hover-text-indigo"></i>

<p class="w3-medium">Powered by <a

href="http://www.w3schools.com/w3css/default.asp" target="_blank" class="w3-
hover-text-green">w3.css</a></p>

</footer>

</div>

var myCenter = new google.maps.LatLng(41.878114, -87.629798);

function initialize() {

var mapProp = {

center: myCenter,

zoom: 12,

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);

// Open and close sidenav

function openNav() {

document.getElementById("mySidenav").style.width = "60%";

document.getElementById("mySidenav").style.display = "block";

function closeNav() {

document.getElementById("mySidenav").style.display = "none";

</script>

</body>

</html>
21) <!DOCTYPE html>

<html>

<title>W3.CSS Template</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://cdnjs.cloudflare.com/ajax/libs/font-

awesome/4.7.0/css/font-awesome.min.css">

<style>

body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;}

body, html {

height: 100%;

color: #777;

line-height: 1.8;

/* Create a Parallax Effect */

.bgimg-1, .bgimg-2, .bgimg-3 {

background-attachment: fixed;

background-position: center;

background-repeat: no-repeat;

background-size: cover;
}

/* First image (Logo. Full height) */

.bgimg-1 {

min-height: 100%;

/* Second image (Portfolio) */

.bgimg-2 {

min-height: 400px;

/* Third image (Contact) */

.bgimg-3 {

min-height: 400px;

.w3-wide {letter-spacing: 10px;}

.w3-hover-opacity {cursor: pointer;}

/* Turn off parallax scrolling for tablets and phones */

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

.bgimg-1, .bgimg-2, .bgimg-3 {

background-attachment: scroll;

</style>

<body>

<ul class="w3-navbar" id="myNavbar">

<li class="w3-hide-medium w3-hide-large w3-opennav w3-right">

<a class="w3-hover-black" href="javascript:void(0);" onclick="toggleFunction()"

title="Toggle Navigation Menu">

<i class="fa fa-bars"></i>

</a>

</li>

<li class="w3-left-align"><a href="#home">HOME</a></li>

<li class="w3-hide-small"><a href="#about"><i class="fa fa-user"></i>

ABOUT</a></li>

<li class="w3-hide-small"><a href="#portfolio"><i class="fa fa-th"></i>

PORTFOLIO</a></li>

<li class="w3-hide-small"><a href="#contact"><i class="fa fa-envelope"></i>

CONTACT</a></li>

<li class="w3-hide-small w3-right">

<a href="#" class="w3-hover-red">

<i class="fa fa-search"></i>

</a>

</li>

</ul>

<div id="navDemo" class="w3-hide w3-hide-large w3-hide-medium">

<ul class="w3-navbar w3-left-align w3-white">

<li><a href="#about" onclick="toggleFunction()">ABOUT</a></li>

<li><a href="#portfolio" onclick="toggleFunction()">PORTFOLIO</a></li>

<li><a href="#contact" onclick="toggleFunction()">CONTACT</a></li>

<li><a href="#">SEARCH</a></li>

</ul>

</div>

<div class="bgimg-1 w3-display-container w3-opacity-min" id="home">

<div class="w3-display-middle" style="white-space:nowrap;">

<span class="w3-center w3-padding-xlarge w3-black w3-xlarge w3-wide w3-

animate-opacity">MY <span class="w3-hide-small">WEBSITE</span>
LOGO</span>

</div>

<div class="w3-content w3-container w3-padding-64" id="about">

<h3 class="w3-center">ABOUT ME</h3>

<p class="w3-center"><em>I love photography</em></p>

<p>We have created a fictional "personal" website/blog, and our fictional

character is a hobby photographer. 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. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>

<div class="w3-col m6 w3-center w3-padding-large">

<p><b><i class="fa fa-user w3-margin-right"></i>My Name</b></p><br>

<img src="/w3images/avatar_hat.jpg" class="w3-round w3-image w3-opacity

w3-hover-opacity-off" alt="Photo of Me" width="500" height="333">

</div>

<div class="w3-col m6 w3-hide-small w3-padding-large">

<p>Welcome to my website. I am lorem ipsum 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. Ut enim ad minim veniam, quis

nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

</div>

</div>
<p class="w3-large w3-center w3-padding-16">Im really good at:</p>

<p class="w3-wide"><i class="fa fa-camera"></i>Photography</p>

<div class="w3-progressbar" style="width:90%"></div>

</div>

<p class="w3-wide"><i class="fa fa-laptop"></i>Web Design</p>

<div class="w3-progressbar" style="width:85%"></div>

</div>

<p class="w3-wide"><i class="fa fa-photo"></i>Photoshop</p>

<div class="w3-progressbar" style="width:75%"></div>

</div>

<div class="w3-row w3-center w3-dark-grey w3-padding-16">

<div class="w3-quarter w3-section">

Partners

</div>

<div class="w3-quarter w3-section">

Projects Done

</div>

<div class="w3-quarter w3-section">

<span class="w3-xlarge">89+</span><br>
Happy Clients

</div>

<div class="w3-quarter w3-section">

Meetings

</div>

<div class="bgimg-2 w3-display-container w3-opacity-min">

<span class="w3-xxlarge w3-text-light-grey w3-wide">PORTFOLIO</span>

</div>

<div class="w3-content w3-container w3-padding-64" id="portfolio">

<h3 class="w3-center">MY WORK</h3>

<p class="w3-center"><em>Here are some of my latest lorem work ipsum

tipsum.<br> Click on the images to make them bigger</em></p><br>

<div class="w3-row-padding w3-center">

<div class="w3-col m3">

<img src="/w3images/p1.jpg" style="width:100%" onclick="onClick(this)"

class="w3-hover-opacity" alt="The mist over the mountains">
</div>

<div class="w3-col m3">

<img src="/w3images/p2.jpg" style="width:100%" onclick="onClick(this)"

class="w3-hover-opacity" alt="Coffee beans">

</div>

<div class="w3-col m3">

<img src="/w3images/p3.jpg" style="width:100%" onclick="onClick(this)"

class="w3-hover-opacity" alt="Bear closeup">

</div>

<div class="w3-col m3">

<img src="/w3images/p4.jpg" style="width:100%" onclick="onClick(this)"

class="w3-hover-opacity" alt="Quiet ocean">

</div>

<div class="w3-row-padding w3-center w3-section">

<div class="w3-col m3">

<img src="/w3images/p5.jpg" style="width:100%" onclick="onClick(this)"

class="w3-hover-opacity" alt="The mist">

</div>

<div class="w3-col m3">

<img src="/w3images/p6.jpg" style="width:100%" onclick="onClick(this)"

class="w3-hover-opacity" alt="My beloved typewriter">

</div>
<div class="w3-col m3">

<img src="/w3images/p7.jpg" style="width:100%" onclick="onClick(this)"

class="w3-hover-opacity" alt="Empty ghost train">

</div>

<div class="w3-col m3">

<img src="/w3images/p8.jpg" style="width:100%" onclick="onClick(this)"

class="w3-hover-opacity" alt="Sailing">

</div>

<button class="w3-btn w3-light-grey w3-padding-xlarge" style="margin-

top:64px">LOAD MORE</button>

</div>

<div id="modal01" class="w3-modal w3-black"

onclick="this.style.display='none'">

<span class="w3-closebtn w3-text-white w3-opacity w3-hover-opacity-off w3-

xxlarge w3-container w3-display-topright" title="Close Modal Image"><i class="fa
fa-remove"></i></span>

<div class="w3-modal-content w3-animate-zoom w3-center w3-transparent w3-

padding-64">

<img id="img01" class="w3-image">

<p id="caption" class="w3-opacity w3-large"></p>

</div>

<span class="w3-xxlarge w3-text-light-grey w3-wide">CONTACT</span>

</div>

<div class="w3-content w3-container w3-padding-64" id="contact">

<h3 class="w3-center">WHERE I WORK</h3>

<p class="w3-center"><em>I'd love your feedback!</em></p>

<div class="w3-row w3-padding-32 w3-section">

<div class="w3-col m4 w3-container">

<div id="googleMap" class="w3-round-large w3-greyscale"

style="width:100%;height:400px;"></div>

</div>

<div class="w3-col m8 w3-container w3-section">

<div class="w3-large w3-margin-bottom">

<i class="fa fa-map-marker fa-fw w3-hover-text-black w3-xlarge w3-margin-

right"></i> Chicago, US<br>

<i class="fa fa-phone fa-fw w3-hover-text-black w3-xlarge w3-margin-

right"></i> Phone: +00 151515<br>

<i class="fa fa-envelope fa-fw w3-hover-text-black w3-xlarge w3-margin-

right"></i> Email: [email protected]<br>

</div>

<p>Swing by for a cup of <i class="fa fa-coffee"></i>, or leave me a

note:</p>
<form action="form.asp" target="_blank">

<div class="w3-row-padding" style="margin:0 -16px 8px -16px">

<input class="w3-input w3-border" type="text" placeholder="Name"

required name="Name">

</div>

<input class="w3-input w3-border" type="text" placeholder="Email"

required name="Email">

</div>

<input class="w3-input w3-border" type="text" placeholder="Message"

required name="Message">

<button class="w3-btn w3-black w3-right w3-padding w3-section"

type="submit">

<i class="fa fa-paper-plane"></i> SEND MESSAGE

</button>

</form>

</div>

<footer class="w3-center w3-black w3-padding-64 w3-opacity w3-hover-opacity-

off">

<a href="#home" class="w3-btn w3-padding w3-light-grey w3-hover-grey"><i

class="fa fa-arrow-up w3-margin-right"></i>To the top</a>

<div class="w3-xlarge w3-section">

<i class="fa fa-facebook-official w3-hover-text-indigo"></i>

<i class="fa fa-snapchat w3-hover-text-yellow"></i>

<i class="fa fa-pinterest-p w3-hover-text-red"></i>

<i class="fa fa-twitter w3-hover-text-light-blue"></i>

<i class="fa fa-linkedin w3-hover-text-indigo"></i>

</div>

<p>Powered by <a href="http://www.w3schools.com/w3css/default.asp"

title="W3.CSS" target="_blank" class="w3-hover-text-green">w3.css</a></p>

</footer>

var myCenter = new google.maps.LatLng(41.878114, -87.629798);

function initialize() {

var mapProp = {

center: myCenter,

zoom: 12,

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);

// Modal Image Gallery

function onClick(element) {

document.getElementById("img01").src = element.src;

document.getElementById("modal01").style.display = "block";

var captionText = document.getElementById("caption");

captionText.innerHTML = element.alt;

// Change style of navbar on scroll

window.onscroll = function() {myFunction()};

function myFunction() {

var navbar = document.getElementById("myNavbar");

if (document.body.scrollTop > 100 || document.documentElement.scrollTop >

100) {

navbar.className = "w3-navbar" + " w3-card-2" + " w3-animate-top" + " w3-

white";

} else {
navbar.className = navbar.className.replace(" w3-card-2 w3-animate-top
w3-white", "");

// Used to toggle the menu on small screens when clicking on the menu button

function toggleFunction() {

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>

21) <!DOCTYPE html>

<html>

<title>W3.CSS Template</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=Roboto">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">

<style>

.w3-sidenav a {font-family: "Roboto", sans-serif}

body,h1,h2,h3,h4,h5,h6,.w3-wide {font-family: "Montserrat", sans-serif;}

</style>

<body class="w3-content" style="max-width:1200px">

<nav class="w3-sidenav w3-white w3-collapse w3-top" style="z-

index:3;width:250px" id="mySidenav">

<div class="w3-container w3-padding-16">

<i onclick="w3_close()" class="fa fa-remove w3-hide-large w3-closebtn w3-

hover-text-red"></i>

</div>

<div class="w3-padding-64 w3-large w3-text-grey" style="font-weight:bold">

<a href="#">Shirts</a>

<a href="#">Dresses</a>

<a onclick="myAccFunc()" href="javascript:void(0)" class="w3-text-black"

id="myBtn">

Jeans <i class="fa fa-caret-down"></i>

</a>

<div id="demoAcc" class="w3-accordion-content w3-padding-large w3-

medium">

<a href="#" class="w3-light-grey"><i class="fa fa-caret-right w3-margin-

right"></i>Skinny</a>

<a href="#">Relaxed</a>
<a href="#">Bootcut</a>

<a href="#">Straight</a>

</div>

<a href="#">Jackets</a>

<a href="#">Gymwear</a>

<a href="#">Blazers</a>

<a href="#">Shoes</a>

</div>

<a href="#footer" class="w3-padding">Contact</a>

<a href="javascript:void(0)" class="w3-padding"

onclick="document.getElementById('newsletter').style.display='block'">Newsletter
</a>

<a href="#footer" class="w3-padding">Subscribe</a>

</nav>

<header class="w3-container w3-top w3-hide-large w3-black w3-xlarge w3-

padding-24">

<span class="w3-left w3-wide">LOGO</span>

<a href="javascript:void(0)" class="w3-right w3-opennav"

onclick="w3_open()"><i class="fa fa-bars"></i></a>

</header>

<div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer"

title="close side menu" id="myOverlay"></div>

<div class="w3-main" style="margin-left:250px">

<div class="w3-hide-large" style="margin-top:83px"></div>

<header class="w3-container w3-xlarge">

<p class="w3-left">Jeans</p>

<i class="fa fa-shopping-cart w3-margin-right"></i>

<i class="fa fa-search"></i>

</p>

</header>

<div class="w3-display-container w3-container">

<img src="/w3images/jeans.jpg" alt="Jeans" style="width:100%">

<div class="w3-display-topleft w3-padding-xxlarge w3-text-white">

<h1 class="w3-jumbo w3-hide-small">New arrivals</h1>

<h1 class="w3-hide-large w3-hide-medium">New arrivals</h1>

<h1 class="w3-hide-small">COLLECTION 2016</h1>

<p><a href="#jeans" class="w3-btn w3-padding-large w3-large">SHOP

NOW</a></p>

</div>

</div>
<div class="w3-container w3-text-grey" id="jeans">

<p>8 items</p>

</div>

<div class="w3-row w3-grayscale">

<div class="w3-col l3 s6">

<img src="/w3images/jeans1.jpg" style="width:100%">

<p>Ripped Skinny Jeans<br><b>$24.99</b></p>

</div>

<img src="/w3images/jeans2.jpg" style="width:100%">

<p>Mega Ripped Jeans<br><b>$19.99</b></p>

</div>

<div class="w3-col l3 s6">

<img src="/w3images/jeans2.jpg" style="width:100%">

<span class="w3-tag w3-display-topleft">New</span>

<div class="w3-display-middle w3-display-hover">

<button class="w3-btn">Buy now <i class="fa fa-shopping-

cart"></i></button>

</div>

</div>
<p>Mega Ripped Jeans<br><b>$19.99</b></p>

</div>

<img src="/w3images/jeans3.jpg" style="width:100%">

<p>Washed Skinny Jeans<br><b>$20.50</b></p>

</div>

<div class="w3-col l3 s6">

<img src="/w3images/jeans3.jpg" style="width:100%">

<p>Washed Skinny Jeans<br><b>$20.50</b></p>

</div>

<img src="/w3images/jeans4.jpg" style="width:100%">

<span class="w3-tag w3-display-topleft">Sale</span>

<div class="w3-display-middle w3-display-hover">

<button class="w3-btn">Buy now <i class="fa fa-shopping-

cart"></i></button>

</div>

<p>Vintage Skinny Jeans<br><b class="w3-text-red">$14.99</b></p>

</div>

<div class="w3-col l3 s6">

<img src="/w3images/jeans4.jpg" style="width:100%">

<p>Vintage Skinny Jeans<br><b>$14.99</b></p>

</div>

<img src="/w3images/jeans1.jpg" style="width:100%">

<p>Ripped Skinny Jeans<br><b>$24.99</b></p>

</div>

<div class="w3-container w3-black w3-padding-32">

<h1>Subscribe</h1>

<p>To get special offers and VIP treatment:</p>

<p><input class="w3-input w3-border" type="text" placeholder="Enter e-mail"

style="width:100%"></p>

<button type="button" class="w3-btn w3-padding w3-red w3-margin-

bottom">Subscribe</button>

</div>

<footer class="w3-padding-64 w3-light-grey w3-small w3-center" id="footer">

<div class="w3-col s4">

<h4>Contact</h4>

<p>Questions? Go ahead.</p>
<form action="form.asp" target="_blank">

<p><input class="w3-input w3-border" type="text" placeholder="Name"

name="Name" required></p>

<p><input class="w3-input w3-border" type="text" placeholder="Email"

name="Email" required></p>

<p><input class="w3-input w3-border" type="text" placeholder="Subject"

name="Subject" required></p>

<p><input class="w3-input w3-border" type="text" placeholder="Message"

name="Message" required></p>

<button type="submit" class="w3-btn-block w3-padding w3-

black">Send</button>

</form>

</div>

<div class="w3-col s4">

<h4>About</h4>

<p><a href="#">About us</a></p>

<p><a href="#">We're hiring</a></p>

<p><a href="#">Support</a></p>

<p><a href="#">Find store</a></p>

<p><a href="#">Shipment</a></p>

<p><a href="#">Payment</a></p>

<p><a href="#">Gift card</a></p>

<p><a href="#">Return</a></p>

</div>

<div class="w3-col s4 w3-justify">

<h4>Store</h4>

<p><i class="fa fa-fw fa-map-marker"></i> Company Name</p>

<p><i class="fa fa-fw fa-phone"></i> 0044123123</p>

<p><i class="fa fa-fw fa-envelope"></i> [email protected]</p>

<h4>We accept</h4>

<p><i class="fa fa-fw fa-cc-amex"></i> Amex</p>

<p><i class="fa fa-fw fa-credit-card"></i> Credit Card</p>

<br>

<i class="fa fa-facebook-official w3-xlarge w3-hover-text-indigo"></i>

<i class="fa fa-instagram w3-xlarge w3-hover-text-purple"></i>

<i class="fa fa-twitter w3-xlarge w3-hover-text-light-blue"></i>

<i class="fa fa-pinterest w3-xlarge w3-hover-text-red"></i>

<i class="fa fa-flickr w3-xlarge w3-hover-text-blue"></i>

</div>

</footer>

<div class="w3-black w3-center w3-padding-24">Powered by <a

href="http://www.w3schools.com/w3css/default.asp" title="W3.CSS"
target="_blank" class="w3-hover-opacity">w3.css</a></div>

</div>

<div id="newsletter" class="w3-modal">

<div class="w3-modal-content w3-animate-zoom w3-padding-jumbo">

<h2 class="w3-wide">NEWSLETTER</h2>

<p>Join our mailing list to receive updates on new arrivals and special
offers.</p>

<p><input class="w3-input w3-border" type="text" placeholder="Enter e-

mail"></p>

<button type="button" class="w3-btn w3-padding-large w3-red w3-margin-

bottom"
onclick="document.getElementById('newsletter').style.display='none'">Subscribe<
/button>

</div>

// Accordion

function myAccFunc() {

var x = document.getElementById("demoAcc");

if (x.className.indexOf("w3-show") == -1) {

x.className += " w3-show";

} else {

x.className = x.className.replace(" w3-show", "");

// Click on the "Jeans" link on page load to open the accordion for demo purposes

document.getElementById("myBtn").click();
// 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>

22) <!DOCTYPE html>

<html>

<title>W3.CSS Template</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=Poppins">

<style>

body,h1,h2,h3,h4,h5 {font-family: "Poppins", sans-serif}

body {font-size:16px;}

.w3-half img{margin-bottom:-6px;margin-top:16px;opacity:0.8;cursor:pointer}

.w3-half img:hover{opacity:1}

</style>

<body>

<nav class="w3-sidenav w3-red w3-collapse w3-top w3-large w3-padding" style="z-

index:3;width:300px;font-weight:bold" id="mySidenav"><br>

<a href="javascript:void(0)" onclick="w3_close()" class="w3-padding-xlarge w3-

hide-large w3-display-topleft w3-hover-white" style="width:100%;font-
size:22px">Close Menu</a>

<h3 class="w3-padding-64"><b>Company<br>Name</b></h3>

</div>

<a href="#" onclick="w3_close()" class="w3-padding w3-hover-

white">Home</a>

<a href="#showcase" onclick="w3_close()" class="w3-padding w3-hover-

white">Showcase</a>

<a href="#services" onclick="w3_close()" class="w3-padding w3-hover-

white">Services</a>

<a href="#designers" onclick="w3_close()" class="w3-padding w3-hover-

white">Designers</a>

<a href="#packages" onclick="w3_close()" class="w3-padding w3-hover-

white">Packages</a>

<a href="#contact" onclick="w3_close()" class="w3-padding w3-hover-

white">Contact</a>

</nav>

<a href="javascript:void(0)" class="w3-btn w3-red w3-border w3-border-white w3-

margin-right" onclick="w3_open()"></a>

<span>Company Name</span>

</header>

<div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer"

title="close side menu" id="myOverlay"></div>

<div class="w3-main" style="margin-left:340px;margin-right:40px">

<div class="w3-container" style="margin-top:80px" id="showcase">

<h1 class="w3-jumbo"><b>Interior Design</b></h1>

<h1 class="w3-xxxlarge w3-text-red"><b>Showcase.</b></h1>

<hr style="width:50px;border:5px solid red" class="w3-round">

</div>

<img src="/w3images/kitchenconcrete.jpg" style="width:100%"

onclick="onClick(this)" alt="Concrete meets bricks">

<img src="/w3images/livingroom.jpg" style="width:100%"

onclick="onClick(this)" alt="Light, white and tight scandinavian design">
<img src="/w3images/diningroom.jpg" style="width:100%"
onclick="onClick(this)" alt="White walls with designer chairs">

</div>

<img src="/w3images/atrium.jpg" style="width:100%" onclick="onClick(this)"

alt="Windows for the atrium">

<img src="/w3images/bedroom.jpg" style="width:100%" onclick="onClick(this)"

alt="Bedroom and office in one space">

<img src="/w3images/livingroom2.jpg" style="width:100%"

onclick="onClick(this)" alt="Scandinavian design">

</div>

<div id="modal01" class="w3-modal w3-black w3-padding-0"

onclick="this.style.display='none'">

<span class="w3-closebtn w3-text-white w3-opacity w3-hover-opacity-off w3-

xxlarge w3-container w3-display-topright"></span>

<div class="w3-modal-content w3-animate-zoom w3-center w3-transparent w3-

padding-64">

<img id="img01" class="w3-image">

</div>

<div class="w3-container" id="services" style="margin-top:75px">

<h1 class="w3-xxxlarge w3-text-red"><b>Services.</b></h1>

<p>We are a interior design service that focus on what's best for your home and
what's best for you!</p>

<p>Some text about our services - what we do and what we offer. We are lorem
ipsum 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. Ut enim ad minim veniam, quis

nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

</p>

</div>

<div class="w3-container" id="designers" style="margin-top:75px">

<h1 class="w3-xxxlarge w3-text-red"><b>Designers.</b></h1>

<hr style="width:50px;border:5px solid red" class="w3-round">

<p>The best team in the world.</p>

<p>We are lorem ipsum 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

incididunt ut labore et quis nostrud exercitation ullamco laboris nisi ut aliquip ex

ea commodo consequat.

</p>

<p><b>Our designers are thoughtfully chosen</b>:</p>

</div>

<div class="w3-row-padding w3-grayscale">

<div class="w3-col m4 w3-margin-bottom">

<img src="/w3images/team2.jpg" alt="John" style="width:100%">

<p class="w3-opacity">CEO & Founder</p>

<p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales

pellentesque elementum.</p>

</div>

<div class="w3-col m4 w3-margin-bottom">

<img src="/w3images/team1.jpg" alt="Jane" style="width:100%">

<p class="w3-opacity">Designer</p>

<p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales

pellentesque elementum.</p>

</div>

<div class="w3-col m4 w3-margin-bottom">

<img src="/w3images/team3.jpg" alt="Mike" style="width:100%">

<p class="w3-opacity">Architect</p>

<p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales

pellentesque elementum.</p>

</div>

<div class="w3-container" id="packages" style="margin-top:75px">

<h1 class="w3-xxxlarge w3-text-red"><b>Packages.</b></h1>

<hr style="width:50px;border:5px solid red" class="w3-round">

<p>Some text our prices. Lorem ipsum 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</p>

</div>

<div class="w3-half w3-margin-bottom">

<ul class="w3-ul w3-light-grey w3-center">

<li class="w3-dark-grey w3-xlarge w3-padding-32">Basic</li>

<li class="w3-padding-16">Floorplanning</li>

<li class="w3-padding-16">10 hours support</li>

<li class="w3-padding-16">Photography</li>

<li class="w3-padding-16">20% furniture discount</li>

<li class="w3-padding-16">Good deals</li>

<span class="w3-opacity">per room</span>

</li>

<li class="w3-light-grey w3-padding-24">

<button class="w3-btn w3-white w3-padding-large w3-hover-black">Sign

Up</button>

</li>

</ul>

</div>

<ul class="w3-ul w3-light-grey w3-center">

<li class="w3-red w3-xlarge w3-padding-32">Pro</li>

<li class="w3-padding-16">Floorplanning</li>

<li class="w3-padding-16">50 hours support</li>

<li class="w3-padding-16">Photography</li>

<li class="w3-padding-16">50% furniture discount</li>

<li class="w3-padding-16">GREAT deals</li>

<span class="w3-opacity">per room</span>

</li>

<li class="w3-light-grey w3-padding-24">

</li>

</ul>

</div>

<div class="w3-container" id="contact" style="margin-top:75px">

<h1 class="w3-xxxlarge w3-text-red"><b>Contact.</b></h1>

<hr style="width:50px;border:5px solid red" class="w3-round">

<p>Do you want us to style your home? Fill out the form and fill me in with the
details :) We love meeting new people!</p>

<form action="form.asp" target="_blank">

<input class="w3-input w3-border" type="text" name="Name" required>

</div>

<label>Email</label>

<input class="w3-input w3-border" type="text" name="Email" required>

</div>

<label>Message</label>

<input class="w3-input w3-border" type="text" name="Message" required>

</div>
<button type="submit" class="w3-btn-block w3-padding-large w3-red w3-
margin-bottom">Send Message</button>

</form>

</div>

</div>

<div class="w3-light-grey w3-container w3-padding-32" style="margin-

top:75px;padding-right:58px"><p class="w3-right">Powered by <a
href="http://www.w3schools.com/w3css/default.asp" title="W3.CSS"
target="_blank" class="w3-hover-opacity">w3.css</a></p></div>

// 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";

// Modal Image Gallery

function onClick(element) {
document.getElementById("img01").src = element.src;

document.getElementById("modal01").style.display = "block";

var captionText = document.getElementById("caption");

captionText.innerHTML = element.alt;

</script>

</body>

</html>

23) <!DOCTYPE html>

<html>

<title>W3.CSS Template</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=Inconsolata">

<style>

body, html {

height: 100%;

font-family: "Inconsolata", sans-serif;

.bgimg {

background-position: center;

background-size: cover;

min-height: 75%;

}
.menu {

display: none;

</style>

<body>

<div class="w3-row w3-padding w3-black">

<div class="w3-col s3">

<a href="#" class="w3-btn-block w3-hover-white">HOME</a>

</div>

<div class="w3-col s3">

<a href="#about" class="w3-btn-block w3-hover-white">ABOUT</a>

</div>

<div class="w3-col s3">

<a href="#menu" class="w3-btn-block w3-hover-white">MENU</a>

</div>

<div class="w3-col s3">

<a href="#where" class="w3-btn-block w3-hover-white">WHERE</a>

</div>

<header class="bgimg w3-display-container w3-grayscale-min" id="home">

<span class="w3-tag">Open from 6am to 5pm</span>

</div>

<div class="w3-display-middle w3-center">

<span class="w3-text-white" style="font-size:90px">the<br>Cafe</span>

</div>

<div class="w3-display-bottomright w3-center w3-padding-xlarge">

<span class="w3-text-white">15 Adr street, 5015</span>

</div>

</header>

<div class="w3-sand w3-grayscale w3-large">

<div class="w3-container" id="about">

<div class="w3-content" style="max-width:700px">

<h5 class="w3-center w3-padding-48"><span class="w3-tag w3-wide w3-

padding-left w3-padding-right">ABOUT THE CAFE</span></h5>

<p>The Cafe was founded in blabla by Mr. Smith in 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.</p>

<p>In addition to our full espresso and brew bar menu, we serve fresh made-to-
order breakfast and lunch sandwiches, as well as a selection of sides and salads and
other good stuff.</p>

<div class="w3-panel w3-leftbar w3-light-grey">

<p><i>"Use products from nature for what it's worth - but never too early, nor
too late." Fresh is the new sweet.</i></p>
<p>Chef, Coffeeist and Owner: Liam Brown</p>

</div>

<img src="/w3images/coffeeshop.jpg" style="width:100%;max-width:1000px"

class="w3-margin-top">

<p><strong>Opening hours:</strong> everyday from 6am to 5pm.</p>

<p><strong>Address:</strong> 15 Adr street, 5015, NY</p>

</div>

<div class="w3-container" id="menu">

<div class="w3-content" style="max-width:700px">

<h5 class="w3-center w3-padding-48"><span class="w3-tag w3-wide w3-

padding-left w3-padding-right">THE MENU</span></h5>

<div class="w3-row w3-center w3-card-2 w3-padding">

<a href="javascript:void(0)" onclick="openMenu(event, 'Eat');" id="myLink">

<div class="w3-col s6 tablink">Eat</div>

</a>

<a href="javascript:void(0)" onclick="openMenu(event, 'Drinks');">

<div class="w3-col s6 tablink">Drink</div>

</a>

</div>

<div id="Eat" class="w3-container menu w3-padding-48 w3-card-2">

<h5>Bread Basket</h5>
<p class="w3-text-grey">Assortment of fresh baked fruit breads and muffins
5.50</p><br>

<h5>Honey Almond Granola with Fruits</h5>

<p class="w3-text-grey">Natural cereal of honey toasted oats, raisins, almonds

and dates 7.00</p><br>

<h5>Belgian Waffle</h5>

<p class="w3-text-grey">Vanilla flavored batter with malted flour

7.50</p><br>

<h5>Scrambled eggs</h5>

<p class="w3-text-grey">Scrambled eggs, roasted red pepper and garlic, with

green onions 7.50</p><br>

<h5>Blueberry Pancakes</h5>

<p class="w3-text-grey">With syrup, butter and lots of berries 8.50</p>

</div>

<div id="Drinks" class="w3-container menu w3-padding-48 w3-card-2">

<h5>Coffee</h5>

<p class="w3-text-grey">Regular coffee 2.50</p><br>

<h5>Chocolato</h5>

<p class="w3-text-grey">Chocolate espresso with milk 4.50</p><br>

<h5>Corretto</h5>

<p class="w3-text-grey">Whiskey and coffee 5.00</p><br>

<p class="w3-text-grey">Hot tea, except not hot 3.00</p><br>

<p class="w3-text-grey">Coke, Sprite, Fanta, etc. 2.50</p>

</div>

<img src="/w3images/coffeehouse2.jpg" style="width:100%;max-

width:1000px;margin-top:32px;">

</div>

<div class="w3-container" id="where" style="padding-bottom:32px;">

<div class="w3-content" style="max-width:700px">

<h5 class="w3-center w3-padding-48"><span class="w3-tag w3-wide w3-

padding-left w3-padding-right">WHERE TO FIND US</span></h5>

<p>Find us at some address at some place.</p>

<div id="googleMap" class="w3-sepia"

style="width:100%;height:400px;"></div>

<p><span class="w3-tag">FYI!</span> We offer full-service catering for any

event, large or small. We understand your needs and we will cater the food to
satisfy the biggerst criteria of them all, both look and taste.</p>

<p><strong>Reserve</strong> a table, ask for today's special or just send us a

message:</p>

<form action="form.asp" target="_blank">

<p><input class="w3-input w3-padding-16 w3-border" type="text"

placeholder="Name" required name="Name"></p>
<p><input class="w3-input w3-padding-16 w3-border" type="number"
placeholder="How many people" required name="People"></p>

<p><input class="w3-input w3-padding-16 w3-border" type="datetime-local"

placeholder="Date and time" required name="date" value="2017-11-
16T20:00"></p>

<p><input class="w3-input w3-padding-16 w3-border" type="text"

placeholder="Message \ Special requirements" required name="Message"></p>

<p><button class="w3-btn w3-padding" type="submit">SEND

MESSAGE</button></p>

</form>

</div>

</div>

<footer class="w3-center w3-light-grey w3-padding-48 w3-large">

<p>Powered by <a href="http://www.w3schools.com/w3css/default.asp"

title="W3.CSS" target="_blank" class="w3-hover-text-green">w3.css</a></p>

</footer>

// Google Map Location

var myCenter = new google.maps.LatLng(41.878114, -87.629798);

function initialize() {

var mapProp = {

center: myCenter,

zoom: 12,

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);

// Tabbed Menu

function openMenu(evt, menuName) {

var i, x, tablinks;

x = document.getElementsByClassName("menu");

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

x[i].style.display = "none";
}

tablinks = document.getElementsByClassName("tablink");

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

tablinks[i].className = tablinks[i].className.replace(" w3-dark-grey", "");

document.getElementById(menuName).style.display = "block";

evt.currentTarget.firstElementChild.className += " w3-dark-grey";

document.getElementById("myLink").click();

</script>

</body>

</html>

24) <!DOCTYPE html>

<html>

<title>W3.CSS Template</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=Amatic+SC">

<style>

body, html {height: 100%}

body,h1,h2,h3,h4,h5,h6 {font-family: "Amatic SC", sans-serif}

.menu {display: none}

.bgimg {
background-repeat: no-repeat;

background-size: cover;

min-height: 90%;

</style>

<body>

<div class="w3-top w3-hide-small">

<ul class="w3-navbar w3-xlarge w3-black w3-opacity w3-hover-opacity-off"

id="myNavbar">

<li><a href="#about">ABOUT</a></li>

<li><a href="#googleMap">CONTACT</a></li>

</ul>

</div>

<header class="bgimg w3-display-container w3-grayscale-min" id="home">

<div class="w3-display-bottomleft w3-padding">

<span class="w3-tag w3-xlarge">Open from 10am to 12pm</span>

</div>

<div class="w3-display-middle w3-center">

<span class="w3-text-white w3-hide-small" style="font-

size:100px">thin<br>CRUST PIZZA</span>
<span class="w3-text-white w3-hide-large w3-hide-medium" style="font-
size:60px"><b>thin<br>CRUST PIZZA</b></span>

<p><a href="#menu" class="w3-btn w3-xxlarge w3-padding">Let me see the

menu</a></p>

</div>

</header>

<div class="w3-container w3-black w3-padding-64 w3-xxlarge" id="menu">

<h1 class="w3-center w3-jumbo" style="margin-bottom:64px">THE MENU</h1>

<div class="w3-row w3-center w3-border w3-border-dark-grey">

<a href="javascript:void(0)" onclick="openMenu(event, 'Pizza');" id="myLink">

<div class="w3-col s4 tablink w3-padding-large w3-hover-red">Pizza</div>

</a>

<a href="javascript:void(0)" onclick="openMenu(event, 'Pasta');">

<div class="w3-col s4 tablink w3-padding-large w3-hover-red">Salads</div>

</a>

<a href="javascript:void(0)" onclick="openMenu(event, 'Starter');">

<div class="w3-col s4 tablink w3-padding-large w3-hover-red">Starter</div>

</a>

</div>

<div id="Pizza" class="w3-container menu w3-padding-32 w3-white">

<h1><b>Margherita</b> <span class="w3-right w3-tag w3-dark-grey w3-

round">$12.50</span></h1>
<p class="w3-text-grey">Fresh tomatoes, fresh mozzarella, fresh basil</p>

<hr>

<h1><b>Formaggio</b> <span class="w3-right w3-tag w3-dark-grey w3-

round">$15.50</span></h1>

<p class="w3-text-grey">Four cheeses (mozzarella, parmesan, pecorino,

jarlsberg)</p>

<hr>

<h1><b>Chicken</b> <span class="w3-right w3-tag w3-dark-grey w3-

round">$17.00</span></h1>

<p class="w3-text-grey">Fresh tomatoes, mozzarella, chicken, onions</p>

<hr>

<h1><b>Pineapple'o'clock</b> <span class="w3-right w3-tag w3-dark-grey

w3-round">$16.50</span></h1>

<p class="w3-text-grey">Fresh tomatoes, mozzarella, fresh pineapple, bacon,

fresh basil</p>

<hr>

<h1><b>Meat Town</b> <span class="w3-tag w3-red w3-round">Hot!

</span><span class="w3-right w3-tag w3-dark-grey w3-
round">$20.00</span></h1>

<p class="w3-text-grey">Fresh tomatoes, mozzarella, hot pepporoni, hot

sausage, beef, chicken</p>

<hr>

<h1><b>Parma</b> <span class="w3-tag w3-grey w3-

round">New</span><span class="w3-right w3-tag w3-dark-grey w3-
round">$21.50</span></h1>
<p class="w3-text-grey">Fresh tomatoes, mozzarella, parma, bacon, fresh
arugula</p>

</div>

<div id="Pasta" class="w3-container menu w3-padding-32 w3-white">

<h1><b>Lasagna</b> <span class="w3-tag w3-grey w3-

round">Popular</span> <span class="w3-right w3-tag w3-dark-grey w3-
round">$13.50</span></h1>

<p class="w3-text-grey">Special sauce, mozzarella, parmesan, ground

beef</p>

<hr>

<h1><b>Ravioli</b> <span class="w3-right w3-tag w3-dark-grey w3-

round">$14.50</span></h1>

<p class="w3-text-grey">Ravioli filled with cheese</p>

<hr>

<h1><b>Spaghetti Classica</b> <span class="w3-right w3-tag w3-dark-grey

w3-round">$11.00</span></h1>

<p class="w3-text-grey">Fresh tomatoes, onions, ground beef</p>

<hr>

<h1><b>Seafood pasta</b> <span class="w3-right w3-tag w3-dark-grey w3-

round">$25.50</span></h1>

<p class="w3-text-grey">Salmon, shrimp, lobster, garlic</p>

</div>

<div id="Starter" class="w3-container menu w3-padding-32 w3-white">

<h1><b>Today's Soup</b> <span class="w3-tag w3-grey w3-
round">Seasonal</span><span class="w3-right w3-tag w3-dark-grey w3-
round">$5.50</span></h1>

<p class="w3-text-grey">Ask the waiter</p>

<hr>

<h1><b>Bruschetta</b> <span class="w3-right w3-tag w3-dark-grey w3-

round">$8.50</span></h1>

<p class="w3-text-grey">Bread with pesto, tomatoes, onion, garlic</p>

<hr>

<h1><b>Garlic bread</b> <span class="w3-right w3-tag w3-dark-grey w3-

round">$9.50</span></h1>

<p class="w3-text-grey">Grilled ciabatta, garlic butter, onions</p>

<hr>

<h1><b>Tomozzarella</b> <span class="w3-right w3-tag w3-dark-grey w3-

round">$10.50</span></h1>

<p class="w3-text-grey">Tomatoes and mozzarella</p>

</div><br>

</div>

<div class="w3-container w3-padding-64 w3-red w3-grayscale w3-xlarge"

id="about">

<h1 class="w3-center w3-jumbo" style="margin-bottom:64px">About</h1>

<p>The Pizza Restaurant was founded in blabla by Mr. Italiano in 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.</p>

<p><strong>The Chef?</strong> Mr. Italiano himself<img

src="/w3images/chef.jpg" style="width:150px" class="w3-circle w3-right"
alt="Chef"></p>

<p>We are proud of our interiors.</p>

<img src="/w3images/onepage_restaurant.jpg" style="width:100%" class="w3-

margin-top w3-margin-bottom" alt="Restaurant">

<h1><b>Opening Hours</b></h1>

<div class="w3-col s6">

<p>Mon & Tue CLOSED</p>

<p>Wednesday 10.00 - 24.00</p>

<p>Thursday 10:00 - 24:00</p>

</div>

<div class="w3-col s6">

<p>Friday 10:00 - 12:00</p>

<p>Saturday 10:00 - 23:00</p>

<p>Sunday Closed</p>

</div>

<div class="w3-container w3-padding-64 w3-blue-grey w3-grayscale-min w3-

xlarge">

<h1 class="w3-center w3-jumbo" style="margin-bottom:64px">Contact</h1>

<p>Find us at some address at some place or call us at 05050515-122330</p>

<p><span class="w3-tag">FYI!</span> We offer full-service catering for any

event, large or small. We understand your needs and we will cater the food to
satisfy the biggerst criteria of them all, both look and taste.</p>

<p class="w3-xxlarge"><strong>Reserve</strong> a table, ask for today's

special or just send us a message:</p>

<form action="form.asp" target="_blank">

<p><input class="w3-input w3-padding-16 w3-border" type="text"

placeholder="Name" required name="Name"></p>

<p><input class="w3-input w3-padding-16 w3-border" type="number"

placeholder="How many people" required name="People"></p>

<p><input class="w3-input w3-padding-16 w3-border" type="datetime-local"

placeholder="Date and time" required name="date" value="2017-11-
16T20:00"></p>

<p><input class="w3-input w3-padding-16 w3-border" type="text"

placeholder="Message \ Special requirements" required name="Message"></p>

<p><button class="w3-btn-block w3-padding" type="submit">SEND

MESSAGE</button></p>

</form>

</div>

<footer class="w3-center w3-black w3-padding-48 w3-xxlarge">

<p>Powered by <a href="http://www.w3schools.com/w3css/default.asp"
title="W3.CSS" target="_blank" class="w3-hover-text-green">w3.css</a></p>

</footer>

// Google Map Location

var myCenter = new google.maps.LatLng(41.878114, -87.629798);

function initialize() {

var mapProp = {

center: myCenter,

zoom: 12,

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);

// Tabbed Menu

function openMenu(evt, menuName) {

var i, x, tablinks;

x = document.getElementsByClassName("menu");

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

x[i].style.display = "none";

tablinks = document.getElementsByClassName("tablink");

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

tablinks[i].className = tablinks[i].className.replace(" w3-red", "");

document.getElementById(menuName).style.display = "block";

evt.currentTarget.firstElementChild.className += " w3-red";

document.getElementById("myLink").click();

</script>

</body>

</html>

25) <!DOCTYPE html>

<html>

<title>W3.CSS Template</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,h5 {font-family: "Raleway", sans-serif}

body, html {height: 100%}

.bgimg {

min-height: 100%;

background-position: center;

background-size: cover;

</style>

<body>

<div class="bgimg w3-display-container w3-text-white">

<div class="w3-display-middle w3-jumbo w3-padding-jumbo">

</div>

<div class="w3-display-topleft w3-padding-jumbo w3-xlarge">

<p><button onclick="document.getElementById('contact').style.display='block'"
class="w3-btn w3-hover-light-grey">contact</button></p>
</div>

<div class="w3-display-bottomleft w3-padding-jumbo">

<p class="w3-xlarge">monday - friday 10-23 | saturday 14-02</p>

<p class="w3-large">42 village St, New York</p>

<p>powered by <a href="http://www.w3schools.com/w3css/default.asp"

target="_blank">w3.css</a></p>

</div>

<div id="menu" class="w3-modal">

<div class="w3-modal-content w3-animate-zoom">

<div class="w3-container w3-black">

<h1>Starters</h1>

</div>

<h5>Tomato Soup <b>$2.50</b></h5>

<h5>Chicken Salad <b>$3.50</b></h5>

<h5>Bread and Butter <b>$1.00</b></h5>

</div>

<div class="w3-container w3-black">

<h1>Main Courses</h1>

</div>

<h5>Grilled Fish and Potatoes <b>$8.50</b></h5>

<h5>Italian Pizza <b>$5.50</b></h5>

<h5>Veggie Pasta <b>$4.00</b></h5>

<h5>Chicken and Potatoes <b>$6.50</b></h5>

<h5>Deluxe Burger <b>$5.00</b></h5>

</div>

<div class="w3-container w3-black">

<h1>Desserts</h1>

</div>

<h5>Fruit Salad <b>$2.50</b></h5>

<h5>Ice cream <b>$2.00</b></h5>

<h5>Chocolate Cake <b>$4.00</b></h5>

<h5>Cheese <b>$5.50</b></h5>

</div>

<div id="contact" class="w3-modal">

<div class="w3-modal-content w3-animate-zoom">

<div class="w3-container w3-black">

<h1>Contact</h1>

</div>

<p>Reserve a table, ask for today's special or just send us a message:</p>

<p><input class="w3-input w3-padding-16 w3-border" type="text"

placeholder="Name" required name="Name"></p>

<p><input class="w3-input w3-padding-16 w3-border" type="number"

placeholder="How many people" required name="People"></p>

<p><input class="w3-input w3-padding-16 w3-border" type="datetime-local"

placeholder="Date and time" required name="date" value="2017-11-
16T20:00"></p>

<p><input class="w3-input w3-padding-16 w3-border" type="text"

placeholder="Message \ Special requirements" required name="Message"></p>

<p><button class="w3-btn w3-light-grey w3-padding" type="submit">SEND

MESSAGE</button></p>

</form>

</div>

</body>

</html>

26) <!DOCTYPE html>

<html>

<title>W3.CSS Template</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">

<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>

<ul class="w3-navbar w3-red w3-card-2 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>

<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 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>

</header>

<div class="w3-row-padding w3-padding-64 w3-container">

<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 class="w3-row-padding w3-light-grey w3-padding-64 w3-container">

<div class="w3-third w3-center">

<i class="fa fa-coffee w3-padding-64 w3-text-red w3-margin-right"></i>

</div>

<h1>Lorem Ipsum</h1>

<h5 class="w3-padding-32">Lorem ipsum dolor sit amet, consectetur

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-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 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>

// 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>

28) <!DOCTYPE html>

<html>

<title>W3.CSS Template</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="https://cdnjs.cloudflare.com/ajax/libs/font-

awesome/4.7.0/css/font-awesome.min.css">

body, html {

height: 100%;

line-height: 1.8;

/* Full height image header */

.bgimg-1 {

background-position: center;

background-size: cover;

min-height: 100%;

.w3-navbar li a {

padding: 16px;

float: left;

</style>

<body>

<ul class="w3-navbar w3-white w3-card-2" id="myNavbar">

<li>

<a href="#home" class="w3-wide">LOGO</a>

</li>

<a href="#about">ABOUT</a>

<a href="#team"><i class="fa fa-user"></i> TEAM</a>

<a href="#work"><i class="fa fa-th"></i> WORK</a>

<a href="#pricing"><i class="fa fa-usd"></i> PRICING</a>

<a href="#contact"><i class="fa fa-envelope"></i> CONTACT</a>

</li>

<li>

<a href="javascript:void(0)" class="w3-right w3-hide-large w3-hide-medium"

onclick="w3_open()">

<i class="fa fa-bars w3-padding-right w3-padding-left"></i>

</a>

</li>

</ul>

</div>

<nav class="w3-sidenav w3-black w3-card-2 w3-animate-left w3-hide-medium w3-

hide-large" style="display:none" id="mySidenav">

<a href="javascript:void(0)" onclick="w3_close()" class="w3-large w3-padding-

16">Close </a>

<a href="#about" onclick="w3_close()">ABOUT</a>

<a href="#team" onclick="w3_close()">TEAM</a>

<a href="#work" onclick="w3_close()">WORK</a>

<a href="#pricing" onclick="w3_close()">PRICING</a>

<a href="#contact" onclick="w3_close()">CONTACT</a>

</nav>

<header class="bgimg-1 w3-display-container w3-grayscale-min" id="home">

<div class="w3-display-left w3-padding-xxlarge w3-text-white">

<span class="w3-jumbo w3-hide-small">Start something that

matters</span><br>

<span class="w3-xxlarge w3-hide-large w3-hide-medium">Start something that

matters</span><br>

<span class="w3-large">Stop wasting valuable time with projects that just isn't
you.</span>

<p><a href="#about" class="w3-btn w3-white w3-padding-large w3-large w3-

margin-top w3-opacity w3-hover-opacity-off">Learn more and start today</a></p>

</div>

<div class="w3-display-bottomleft w3-padding-xxlarge w3-text-grey w3-large">

<a href="#" class="w3-hover-text-white"><i class="fa fa-facebook-

official"></i></a>

<a href="#" class="w3-hover-text-white"><i class="fa fa-flickr"></i></a>

<a href="#" class="w3-hover-text-white"><i class="fa fa-instagram"></i></a>

<a href="#" class="w3-hover-text-white"><i class="fa fa-twitter"></i></a>

<a href="#" class="w3-hover-text-white"><i class="fa fa-linkedin"></i></a>

</div>

</header>

<div class="w3-container w3-padding-128" id="about">

<h3 class="w3-center">ABOUT THE COMPANY</h3>

<p class="w3-center w3-large">Key features of our company</p>

<i class="fa fa-desktop w3-margin-bottom w3-jumbo w3-center"></i>

<p class="w3-large">Responsive</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore.</p>

</div>

<i class="fa fa-heart w3-margin-bottom w3-jumbo"></i>

<p class="w3-large">Passion</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore.</p>

</div>

<i class="fa fa-diamond w3-margin-bottom w3-jumbo"></i>

<p class="w3-large">Design</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore.</p>

</div>

<i class="fa fa-cog w3-margin-bottom w3-jumbo"></i>

<p class="w3-large">Support</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore.</p>

</div>

</div>

<div class="w3-container w3-light-grey w3-padding-64">

<div class="w3-col m6">

<h3>We know design.</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do

eiusmod<br>tempor incididunt ut labore et dolore.</p>

<p><a href="#work" class="w3-btn"><i class="fa fa-th"></i> View Our

Works</a></p>

</div>

<div class="w3-col m6">

<img class="w3-image w3-round-large" src="/w3images/phone_buildings.jpg"

alt="Buildings" width="700" height="394">

</div>

<div class="w3-container w3-padding-128" id="team">

<h3 class="w3-center">THE TEAM</h3>

<p class="w3-center w3-large">The ones who runs this company</p>

<div class="w3-row-padding w3-grayscale" style="margin-top:64px">

<div class="w3-col l3 m6 w3-margin-bottom">

<img src="/w3images/team2.jpg" alt="John" style="width:100%">

<h3>John Doe</h3>
<p class="w3-opacity">CEO & Founder</p>

<p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales

pellentesque elementum.</p>

<p><button class="w3-btn-block"><i class="fa fa-envelope"></i>

Contact</button></p>

</div>

<div class="w3-col l3 m6 w3-margin-bottom">

<img src="/w3images/team1.jpg" alt="Jane" style="width:100%">

<p class="w3-opacity">Art Director</p>

<p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales

pellentesque elementum.</p>

<p><button class="w3-btn-block"><i class="fa fa-envelope"></i>

Contact</button></p>

</div>

<div class="w3-col l3 m6 w3-margin-bottom">

<img src="/w3images/team3.jpg" alt="Mike" style="width:100%">

<p class="w3-opacity">Web Designer</p>

<p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales
pellentesque elementum.</p>

<p><button class="w3-btn-block"><i class="fa fa-envelope"></i>

Contact</button></p>

</div>

<div class="w3-col l3 m6 w3-margin-bottom">

<img src="/w3images/team4.jpg" alt="Dan" style="width:100%">

<p class="w3-opacity">Designer</p>

<p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales

pellentesque elementum.</p>

<p><button class="w3-btn-block"><i class="fa fa-envelope"></i>

Contact</button></p>

</div>

<div class="w3-container w3-row w3-center w3-dark-grey w3-padding-64">

<br>Partners
</div>

<br>Projects Done

</div>

<br>Happy Clients

</div>

<br>Meetings

</div>

<div class="w3-container w3-padding-128" id="work">

<h3 class="w3-center">OUR WORK</h3>

<p class="w3-center w3-large">What we've done for people</p>

<div class="w3-row-padding" style="margin-top:64px">

<div class="w3-col l3 m6">

<img src="/w3images/tech_mic.jpg" style="width:100%" onclick="onClick(this)"

class="w3-hover-opacity" alt="A microphone">

</div>

<div class="w3-col l3 m6">

</div>

<div class="w3-col l3 m6">

<img src="/w3images/tech_drone.jpg" style="width:100%"

onclick="onClick(this)" class="w3-hover-opacity" alt="A drone">

</div>

<div class="w3-col l3 m6">

<img src="/w3images/tech_sound.jpg" style="width:100%"

onclick="onClick(this)" class="w3-hover-opacity" alt="Soundbox">

</div>

<div class="w3-row-padding w3-section">

<div class="w3-col l3 m6">

<img src="/w3images/tech_tablet.jpg" style="width:100%"

onclick="onClick(this)" class="w3-hover-opacity" alt="A tablet">

</div>

<div class="w3-col l3 m6">

<img src="/w3images/tech_camera.jpg" style="width:100%"

onclick="onClick(this)" class="w3-hover-opacity" alt="A camera">

</div>

<div class="w3-col l3 m6">

<img src="/w3images/tech_typewriter.jpg" style="width:100%"

onclick="onClick(this)" class="w3-hover-opacity" alt="A typewriter">

</div>

<div class="w3-col l3 m6">

<img src="/w3images/tech_tableturner.jpg" style="width:100%"

onclick="onClick(this)" class="w3-hover-opacity" alt="A tableturner">
</div>

</div>

<div id="modal01" class="w3-modal w3-black"

onclick="this.style.display='none'">

<span class="w3-closebtn w3-text-white w3-opacity w3-hover-opacity-off w3-

xxlarge w3-container w3-display-topright" title="Close Modal Image"></span>

<div class="w3-modal-content w3-animate-zoom w3-center w3-transparent w3-

padding-64">

<img id="img01" class="w3-image">

<p id="caption" class="w3-opacity w3-large"></p>

</div>

<div class="w3-container w3-light-grey w3-padding-64">

<div class="w3-col m6">

<h3>Our Skills.</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do

eiusmod<br>

tempor incididunt ut labore et dolore.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do

eiusmod<br>

tempor incididunt ut labore et dolore.</p>

</div>
<div class="w3-col m6">

<p class="w3-wide"><i class="fa fa-camera w3-margin-

right"></i>Photography</p>

<div class="w3-progress-container w3-grey">

<div class="w3-progressbar w3-dark-grey" style="width:90%"></div>

</div>

<p class="w3-wide"><i class="fa fa-desktop w3-margin-right"></i>Web

Design</p>

<div class="w3-progress-container w3-grey">

<div class="w3-progressbar w3-dark-grey" style="width:85%"></div>

</div>

<p class="w3-wide"><i class="fa fa-photo w3-margin-

right"></i>Photoshop</p>

<div class="w3-progress-container w3-grey">

<div class="w3-progressbar w3-dark-grey" style="width:75%"></div>

</div>

<div class="w3-container w3-padding-128 w3-center w3-dark-grey" id="pricing">

<h3>PRICING</h3>

<p class="w3-large">Choose a pricing plan that fits your needs.</p>

<div class="w3-row-padding" style="margin-top:64px">

<div class="w3-third w3-section">

<ul class="w3-ul w3-white w3-hover-shadow">

<li class="w3-black w3-xlarge w3-padding-32">Basic</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>

<h2 class="w3-wide">$ 10</h2>

<span class="w3-opacity">per month</span>

</li>

<li class="w3-light-grey w3-padding-24">

<button class="w3-btn w3-black w3-padding-large">Sign Up</button>

</li>

</ul>

</div>

<ul class="w3-ul w3-white w3-hover-shadow">

<li class="w3-red w3-xlarge w3-padding-48">Pro</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>

<h2 class="w3-wide">$ 25</h2>

<span class="w3-opacity">per month</span>

</li>

<li class="w3-light-grey w3-padding-24">

</li>

</ul>

</div>

<div class="w3-third w3-section">

<ul class="w3-ul w3-white w3-hover-shadow">

<li class="w3-black w3-xlarge w3-padding-32">Premium</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>

<h2 class="w3-wide">$ 50</h2>

<span class="w3-opacity">per month</span>

</li>

<li class="w3-light-grey w3-padding-24">

<button class="w3-btn w3-black w3-padding-large">Sign Up</button>

</li>

</ul>

</div>

<div class="w3-container w3-padding-128 w3-light-grey" id="contact">

<h3 class="w3-center">CONTACT</h3>
<p class="w3-center w3-large">Lets get in touch. Send us a message:</p>

<div class="w3-row-padding" style="margin-top:64px">

<p><i class="fa fa-map-marker fa-fw w3-xxlarge w3-margin-right"></i>

Chicago, US</p>

<p><i class="fa fa-phone fa-fw w3-xxlarge w3-margin-right"></i> Phone: +00

151515</p>

<p><i class="fa fa-envelope fa-fw w3-xxlarge w3-margin-right"> </i> Email:

[email protected]</p>

<br>

<form action="form.asp" target="_blank">

<p><input class="w3-input w3-border" type="text" placeholder="Name"

required name="Name"></p>

<p><input class="w3-input w3-border" type="text" placeholder="Email"

required name="Email"></p>

<p><input class="w3-input w3-border" type="text" placeholder="Subject"

required name="Subject"></p>

<p><input class="w3-input w3-border" type="text" placeholder="Message"

required name="Message"></p>

<p>

<button class="w3-btn w3-padding" type="submit">

<i class="fa fa-paper-plane"></i> SEND MESSAGE

</button>

</p>

</form>

</div>

</div>

<footer class="w3-center w3-black w3-padding-64">

<a href="#home" class="w3-btn w3-padding w3-light-grey w3-hover-grey"><i

class="fa fa-arrow-up w3-margin-right"></i>To the top</a>

<div class="w3-xlarge w3-section">

<i class="fa fa-facebook-official w3-hover-text-indigo"></i>

<i class="fa fa-flickr w3-hover-text-red"></i>

<i class="fa fa-instagram w3-hover-text-purple"></i>

<i class="fa fa-twitter w3-hover-text-light-blue"></i>

<i class="fa fa-linkedin w3-hover-text-indigo"></i>

</div>

<p>Powered by <a href="http://www.w3schools.com/w3css/default.asp"

title="W3.CSS" target="_blank" class="w3-hover-text-green">w3.css</a></p>

</footer>

var myCenter = new google.maps.LatLng(41.878114, -87.629798);

function initialize() {

var mapProp = {

center: myCenter,

zoom: 12,

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);

// Modal Image Gallery

function onClick(element) {

document.getElementById("img01").src = element.src;

document.getElementById("modal01").style.display = "block";

var captionText = document.getElementById("caption");

captionText.innerHTML = element.alt;

// Toggle between showing and hiding the sidenav when clicking the menu icon

var mySidenav = document.getElementById("mySidenav");

function w3_open() {

if (mySidenav.style.display === 'block') {

mySidenav.style.display = 'none';

} else {

mySidenav.style.display = 'block';

// Close the sidenav with the close button

function w3_close() {

mySidenav.style.display = "none";

</script>

</body>

</html>

29) <!DOCTYPE html>

<html>

<title>W3.CSS Template</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=Poppins">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-

awesome/4.7.0/css/font-awesome.min.css">

<style>

body,h1,h2,h3,h4,h5 {font-family: "Poppins", sans-serif}

body {font-size: 16px;}

img {margin-bottom: -8px;}

.mySlides {display: none;}

</style>

<body class="w3-content w3-black" style="max-width:1500px;">

<header class="w3-display-container w3-center">

<button class="w3-btn-block w3-green w3-hide-large w3-hide-medium"

onclick="document.getElementById('download').style.display='block'">Download
<i class="fa fa-android"></i> <i class="fa fa-apple"></i> <i class="fa fa-
windows"></i></button>

<div class="mySlides w3-animate-opacity">

<img class="w3-image" src="/w3images/app.jpg" alt="Image 1" style="min-

width:500px" width="1500" height="1000">

<div class="w3-display-left w3-padding w3-hide-small" style="width:35%">

<div class="w3-black w3-opacity w3-hover-opacity-off w3-padding-large w3-

round-large">

<h1 class="w3-xlarge">Take photos with our app</h1>

<p>Super simple installment: free of charge</p>

<p><button class="w3-btn-block w3-green w3-round"

onclick="document.getElementById('download').style.display='block'">Download
<i class="fa fa-android"></i> <i class="fa fa-apple"></i> <i class="fa fa-
windows"></i></button></p>

</div>

<div class="mySlides w3-animate-opacity">

<img class="w3-image" src="/w3images/app2.jpg" alt="Image 2" style="min-

width:500px" width="1500" height="1000">

<div class="w3-display-left w3-padding w3-hide-small" style="width:35%">

<div class="w3-black w3-opacity w3-hover-opacity-off w3-padding-large w3-

round-large">

<h1 class="w3-xlarge w3-text-red"><b>CLICK!</b> Fast and Easy</h1>

<p>Choose from thousands of features</p>

<p><button class="w3-btn-block w3-red w3-round"

onclick="document.getElementById('download').style.display='block'">Download
<i class="fa fa-android"></i> <i class="fa fa-apple"></i> <i class="fa fa-
windows"></i></button></p>

</div>

<div class="mySlides w3-animate-opacity">

<img class="w3-image" src="/w3images/app4.jpg" alt="Image 3" style="min-

width:500px" width="1500" height="1000">

<div class="w3-display-left w3-padding w3-hide-small" style="width:35%">

<h1 class="w3-xlarge">Smart Design</h1>

<p>Customize photos as you go</p>

<p><button class="w3-btn-block w3-indigo w3-round"

onclick="document.getElementById('download').style.display='block'">Download
<i class="fa fa-android"></i> <i class="fa fa-apple"></i> <i class="fa fa-
windows"></i></button></p>

</div>

<a class="w3-btn w3-black w3-padding w3-display-right w3-margin-right w3-round

w3-hide-small w3-hover-light-grey" onclick="plusDivs(1)">Take Tour <i class="fa fa-
angle-right"></i></a>

<a class="w3-btn-block w3-black w3-padding w3-hide-large w3-hide-medium"

onclick="plusDivs(1)">Take Tour <i class="fa fa-angle-right"></i></a>

</header>

<div class="w3-padding-64 w3-white">

<div class="w3-col l8 m6">

<h1 class="w3-jumbo"><b>The App</b></h1>

<h1 class="w3-xxxlarge w3-text-green"><b>Why buy it?</b></h1>

<p><span class="w3-xlarge">Take photos like a pro.</span> You should buy

this app because lorem ipsum 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.</p>
<button class="w3-btn w3-light-grey w3-padding-large w3-section w3-hide-
small" onclick="document.getElementById('download').style.display='block'">

<i class="fa fa-download"></i> Download Application

</button>

<p>Available for <i class="fa fa-android w3-xlarge w3-text-green"></i> <i

class="fa fa-apple w3-xlarge"></i> <i class="fa fa-windows w3-xlarge w3-text-
blue"></i></p>

</div>

<div class="w3-col l4 m6">

<img src="/w3images/img_app.jpg" class="w3-image w3-right w3-hide-small"

width="335" height="471">

<div class="w3-center w3-hide-large w3-hide-medium">

<button class="w3-btn-block w3-light-grey w3-padding-large"

onclick="document.getElementById('download').style.display='block'">

<i class="fa fa-download"></i> Download Application

</button>

<img src="/w3images/img_app.jpg" class="w3-image w3-margin-top"

width="335" height="471">

</div>

<div id="download" class="w3-modal w3-animate-opacity">

<div class="w3-modal-content w3-padding-jumbo">

<div class="w3-container w3-white">

<i onclick="document.getElementById('download').style.display='none'"
class="fa fa-remove w3-xlarge w3-closebtn w3-hover-text-grey w3-margin"></i>
<h2 class="w3-wide">DOWNLOAD</h2>

<p>Download the app in AppStore, Google Play or Microsoft Store.</p>

<i class="fa fa-android w3-large"></i> <i class="fa fa-apple w3-large"></i> <i

class="fa fa-windows w3-large"></i>

<p><input class="w3-input w3-border" type="text" placeholder="Enter e-

mail"></p>

<button type="button" class="w3-btn-block w3-padding-large w3-red w3-

margin-bottom"
onclick="document.getElementById('download').style.display='none'">Fake
Download</button>

</div>

<div class="w3-padding-64 w3-light-grey">

<div class="w3-col l4 m6">

<img class="w3-image w3-round-large w3-hide-small w3-grayscale"

src="/w3images/app5.jpg" alt="App" width="335" height="471">

</div>

<div class="w3-col l8 m6">

<h1 class="w3-jumbo"><b>Clarity</b></h1>

<h1 class="w3-xxxlarge w3-text-red"><b>Pixels, who?</b></h1>

<p><span class="w3-xlarge">A revolution in resolution.</span> Sharp and

clear photos with the world's best photo engine, 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.</p>
</div>

</div>

<div class="w3-container w3-padding-64 w3-dark-grey w3-center">

<h1 class="w3-jumbo"><b>Features</b></h1>

<p>This app is just so lorem ipsum.</p>

<div class="w3-row" style="margin-top:64px">

<div class="w3-col s3">

<i class="fa fa-bolt w3-text-orange w3-jumbo"></i>

</div>

<div class="w3-col s3">

<i class="fa fa-heart w3-text-red w3-jumbo"></i>

<p>Loved</p>

</div>

<div class="w3-col s3">

<i class="fa fa-camera w3-text-yellow w3-jumbo"></i>

<p>Clarity</p>

</div>

<div class="w3-col s3">

<i class="fa fa-battery-full w3-text-green w3-jumbo"></i>

<p>Power</p>

</div>
</div>

<div class="w3-row" style="margin-top:64px">

<div class="w3-col s3">

<i class="fa fa-diamond w3-text-white w3-jumbo"></i>

<p>Sharp</p>

</div>

<div class="w3-col s3">

<i class="fa fa-cloud w3-text-blue w3-jumbo"></i>

<p>Cloud</p>

</div>

<div class="w3-col s3">

<i class="fa fa-globe w3-text-amber w3-jumbo"></i>

<p>Global</p>

</div>

<div class="w3-col s3">

<i class="fa fa-hdd-o w3-text-cyan w3-jumbo"></i>

<p>Storage</p>

</div>

<div class="w3-row" style="margin-top:64px">

<div class="w3-col s3">

<i class="fa fa-user w3-text-sand w3-jumbo"></i>

</div>
<div class="w3-col s3">

<i class="fa fa-shield w3-text-orange w3-jumbo"></i>

<p>Stabile</p>

</div>

<div class="w3-col s3">

<i class="fa fa-wifi w3-text-grey w3-jumbo"></i>

<p>Connected</p>

</div>

<div class="w3-col s3">

<i class="fa fa-image w3-text-pink w3-jumbo"></i>

</div>

<div class="w3-padding-64 w3-center w3-white">

<h1 class="w3-jumbo"><b>Pricing</b></h1>

<p class="w3-large">Choose a pricing plan that fits your needs.</p>

<div class="w3-row-padding" style="margin-top:64px">

<div class="w3-half w3-section">

<ul class="w3-ul w3-card-2 w3-hover-shadow">

<li class="w3-dark-grey w3-xlarge w3-padding-32">Basic</li>

<li class="w3-padding-16"><b>250</b> Photos</li>

<li class="w3-padding-16"><b>10</b> Features</li>

<li class="w3-padding-16"><b>No</b> Ads</li>

<li class="w3-padding-16"><b>Office hours</b> Support</li>

<h2 class="w3-opacity">$ 25</h2>

</li>

<li class="w3-light-grey w3-padding-24">

<button class="w3-btn w3-black w3-padding-large"

onclick="document.getElementById('download').style.display='block'"><i class="fa
fa-download"></i> Download</button>

</li>

</ul>

</div>

<div class="w3-half w3-section">

<ul class="w3-ul w3-card-2 w3-hover-shadow">

<li class="w3-red w3-xlarge w3-padding-32">Premium</li>

<li class="w3-padding-16"><b>1000</b> Photos</li>

<li class="w3-padding-16"><b>50</b> Features</li>

<li class="w3-padding-16"><b>No</b> Ads</li>

<li class="w3-padding-16"><b>Endless</b> Support</li>

<h2 class="w3-opacity">$ 99</h2>

</li>

<li class="w3-light-grey w3-padding-24">

<button class="w3-btn w3-black w3-padding-large"

onclick="document.getElementById('download').style.display='block'"> <i
class="fa fa-download"></i> Download</button>

</li>

</ul>

</div>
</div>

<br>

</div>

<footer class="w3-container w3-padding-32 w3-light-grey w3-center w3-xlarge">

<i class="fa fa-facebook-official w3-hover-text-indigo"></i>

<i class="fa fa-instagram w3-hover-text-purple"></i>

<i class="fa fa-snapchat w3-hover-text-yellow"></i>

<i class="fa fa-pinterest-p w3-hover-text-red"></i>

<i class="fa fa-twitter w3-hover-text-light-blue"></i>

<i class="fa fa-linkedin w3-hover-text-indigo"></i>

</div>

<p class="w3-medium">Powered by <a

href="http://www.w3schools.com/w3css/default.asp" target="_blank" class="w3-
hover-text-green">w3.css</a></p>

</footer>

// Slideshow

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>

30) <!DOCTYPE html>

<html>

<title>W3.CSS Template</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://cdnjs.cloudflare.com/ajax/libs/font-

awesome/4.7.0/css/font-awesome.min.css">
<style>

html,body,h1,h2,h3,h4 {font-family:"Lato", sans-serif}

.mySlides {display:none}

.w3-tag, .fa {cursor:pointer}

.w3-tag {height:15px;width:15px;padding:0;margin-top:6px}

</style>

<body>

<div class="w3-row w3-large">

<div class="w3-col s3">

<a href="#" class="w3-btn-block w3-light-grey">Home</a>

</div>

<div class="w3-col s3">

<a href="#plans" class="w3-btn-block w3-light-grey">Plans</a>

</div>

<div class="w3-col s3">

<a href="#about" class="w3-btn-block w3-light-grey">About</a>

</div>

<div class="w3-col s3">

<a href="#contact" class="w3-btn-block w3-light-grey">Contact</a>

</div>

</div>

<div class="w3-content" style="max-width:1100px;margin-top:80px;margin-

bottom:80px">

<h1><b>MARKETING</b></h1>

<p>Template by w3.css</p>

</div>

<div class="w3-display-container mySlides">

<img src="/w3images/coffee.jpg" style="width:100%">

<div class="w3-display-topleft w3-container w3-padding-32">

<span class="w3-white w3-padding-large w3-animate-bottom">Lorem

ipsum</span>

</div>

<div class="w3-display-container mySlides">

<img src="/w3images/workbench.jpg" style="width:100%">

<div class="w3-display-middle w3-container w3-padding-32">

<span class="w3-white w3-padding-large w3-animate-bottom">Klorim

tipsum</span>

</div>

<div class="w3-display-container mySlides">

<img src="/w3images/sound.jpg" style="width:100%">

<span class="w3-white w3-padding-large w3-animate-bottom">Blorum

pipsum</span>

</div>

<div class="w3-container w3-dark-grey w3-padding-8 w3-xlarge">

<div class="w3-left" onclick="plusDivs(-1)"><i class="fa fa-arrow-circle-left w3-

hover-text-teal"></i></div>

<div class="w3-right" onclick="plusDivs(1)"><i class="fa fa-arrow-circle-right

w3-hover-text-teal"></i></div>

<span class="w3-tag demodots w3-border w3-transparent w3-hover-white"

onclick="currentDiv(1)"></span>

<span class="w3-tag demodots w3-border w3-transparent w3-hover-white"

onclick="currentDiv(2)"></span>

<span class="w3-tag demodots w3-border w3-transparent w3-hover-white"

onclick="currentDiv(3)"></span>

</div>

<div class="w3-row w3-container">

<div class="w3-center w3-padding-64">

<span class="w3-xlarge w3-bottombar w3-border-dark-grey w3-padding-

16">What We Offer</span>
</div>

<div class="w3-col l3 m6 w3-light-grey w3-container w3-padding-12">

<h3>Design</h3>

<p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales

pellentesque elementum.</p>

</div>

<div class="w3-col l3 m6 w3-grey w3-container w3-padding-12">

<h3>Branding</h3>

<p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales

pellentesque elementum.</p>

</div>

<div class="w3-col l3 m6 w3-dark-grey w3-container w3-padding-12">

<h3>Consultation</h3>

<p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales

pellentesque elementum.</p>

</div>

<div class="w3-col l3 m6 w3-black w3-container w3-padding-12">

<h3>Promises</h3>

<p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales

pellentesque elementum.</p>

</div>

<div class="w3-row-padding" id="plans">

<h3>Pricing Plans</h3>

<p>Choose a pricing plan that fits your needs.</p>

</div>

<div class="w3-third w3-margin-bottom">

<ul class="w3-ul w3-border w3-center w3-hover-shadow">

<li class="w3-black w3-xlarge w3-padding-32">Basic</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>

<h2 class="w3-wide">$ 10</h2>

<span class="w3-opacity">per month</span>

</li>

<li class="w3-light-grey w3-padding-24">

<button class="w3-btn w3-green w3-padding-large">Sign Up</button>

</li>

</ul>

</div>

<div class="w3-third w3-margin-bottom">

<ul class="w3-ul w3-border w3-center w3-hover-shadow">

<li class="w3-dark-grey w3-xlarge w3-padding-32">Pro</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>

<h2 class="w3-wide">$ 25</h2>

<span class="w3-opacity">per month</span>

</li>

<li class="w3-light-grey w3-padding-24">

<button class="w3-btn w3-green w3-padding-large">Sign Up</button>

</li>

</ul>

</div>

<div class="w3-third w3-margin-bottom">

<ul class="w3-ul w3-border w3-center w3-hover-shadow">

<li class="w3-black w3-xlarge w3-padding-32">Premium</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>

<h2 class="w3-wide">$ 50</h2>

<span class="w3-opacity">per month</span>

</li>

<li class="w3-light-grey w3-padding-24">

<button class="w3-btn w3-green w3-padding-large">Sign Up</button>

</li>

</ul>

</div>

<div class="w3-row-padding" id="about">

<div class="w3-center w3-padding-64">

<span class="w3-xlarge w3-bottombar w3-border-dark-grey w3-padding-

16">Who We Are</span>

</div>

<div class="w3-third w3-margin-bottom">

<img src="/w3images/team1.jpg" alt="John" style="width:100%">

<p class="w3-opacity">CEO & Founder</p>

<p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales

pellentesque elementum.</p>

<p><button class="w3-btn-block">Contact</button></p>

</div>

<div class="w3-third w3-margin-bottom">

<p class="w3-opacity">Art Director</p>

<p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales

pellentesque elementum.</p>

<p><button class="w3-btn-block">Contact</button></p>

</div>

<div class="w3-third w3-margin-bottom">

<img src="/w3images/team3.jpg" alt="Jane" style="width:100%">

<p class="w3-opacity">Designer</p>

<p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales

pellentesque elementum.</p>

<p><button class="w3-btn-block">Contact</button></p>

</div>

<div class="w3-center w3-padding-64" id="contact">

<span class="w3-xlarge w3-bottombar w3-border-dark-grey w3-padding-
16">Contact Us</span>

</div>

<form class="w3-container" action="form.asp" target="_blank">

<input class="w3-input w3-border w3-hover-border-black" style="width:100%;"

type="text" name="Name" required>

</div>

<label>Email</label>

<input class="w3-input w3-border w3-hover-border-black" style="width:100%;"

type="text" name="Email" required>

</div>

<label>Subject</label>

<input class="w3-input w3-border w3-hover-border-black" style="width:100%;"

name="Subject" required>

</div>

<label>Message</label>

<input class="w3-input w3-border w3-hover-border-black" style="width:100%;"

name="Message" required>

</div>

<button type="submit" class="w3-btn w3-btn-block w3-padding-

12">Send</button>

</form>
</div>

<footer class="w3-container w3-padding-32 w3-light-grey w3-center">

<h4>Footer</h4>

<a href="#" class="w3-btn w3-padding w3-black w3-margin"><i class="fa fa-

arrow-up w3-margin-right"></i>To the top</a>

<div class="w3-xlarge w3-section">

<i class="fa fa-facebook-official w3-hover-text-indigo"></i>

<i class="fa fa-instagram w3-hover-text-purple"></i>

<i class="fa fa-snapchat w3-hover-text-yellow"></i>

<i class="fa fa-pinterest-p w3-hover-text-red"></i>

<i class="fa fa-twitter w3-hover-text-light-blue"></i>

<i class="fa fa-linkedin w3-hover-text-indigo"></i>

</div>

<p>Powered by <a href="http://www.w3schools.com/w3css/default.asp"

title="W3.CSS" target="_blank" class="w3-hover-text-green">w3.css</a></p>

</footer>

// Slideshow

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("demodots");

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>
31) <!DOCTYPE html>

<html>

<title>W3.CSS Template</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="https://cdnjs.cloudflare.com/ajax/libs/font-

awesome/4.7.0/css/font-awesome.min.css">

<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>

<ul class="w3-navbar w3-theme-d2 w3-left-align">

<li class="w3-hide-medium w3-hide-large w3-opennav w3-right">

<a class="w3-hover-white 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="#team" class="w3-hover-

white">Team</a></li>

<li class="w3-hide-small"><a href="#work" class="w3-hover-

white">Work</a></li>

<li class="w3-hide-small"><a href="#pricing" class="w3-hover-

white">Price</a></li>

<li class="w3-hide-small"><a href="#contact" class="w3-hover-

white">Contact</a></li>

<li class="w3-hide-small w3-dropdown-hover">

<a href="javascript:void(0);" title="Notifications">Dropdown <i class="fa fa-
caret-down"></i></a>

<div class="w3-dropdown-content w3-white w3-card-4">

</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 id="navDemo" class="w3-hide w3-hide-large w3-hide-medium">

<ul class="w3-navbar w3-left-align w3-theme">

<li><a href="#pricing">Price</a></li>

<li><a href="#contact">Contact</a></li>

<li><a href="#">Search</a></li>

<a href="javascript:void(0);" title="Notifications">Dropdown <i class="fa fa-

caret-down"></i></a>

<div class="w3-dropdown-content w3-light-grey w3-card-4">

</li>

</ul>

</div>

<div class="w3-display-container w3-animate-opacity">

<img src="/w3images/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 id="id01" class="w3-modal">

<div class="w3-modal-content w3-card-8 w3-animate-top">

<header class="w3-container w3-teal">

<h4>Oh snap! We just showed you a modal..</h4>

<h5>Because we can <i class="fa fa-smile-o"></i></h5>

</header>

<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 class="w3-container w3-padding-64 w3-center" id="team">

<p>Meet the team - our office rats:</p>

<img src="/w3images/avatar.jpg" alt="Boss" style="width:45%" class="w3-circle

w3-hover-opacity">

<h3>Johnny Walker</h3>

<p>Web Designer</p>

</div>

<img src="/w3images/avatar.jpg" alt="Boss" style="width:45%" class="w3-circle

w3-hover-opacity">

<h3>Rebecca Flex</h3>
<p>Support</p>

</div>

<img src="/w3images/avatar.jpg" alt="Boss" style="width:45%" class="w3-circle

w3-hover-opacity">

<h3>Jan Ringo</h3>

</div>

<img src="/w3images/avatar.jpg" alt="Boss" style="width:45%" class="w3-circle

w3-hover-opacity">

<h3>Kai Ringo</h3>

<p>Fixer</p>

</div>

<div class="w3-row-padding w3-padding-64 w3-theme-l1" id="work">

<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-card-2 w3-white">

<img src="/w3images/fjords.jpg" alt="Vernazza" style="width:100%">

<h3>Customer 1</h3>

<h4>Trade</h4>

<p>Blablabla</p>

</div>

<div class="w3-card-2 w3-white">

<img src="/w3images/lights.jpg" alt="Cinque Terre" style="width:100%">

<h3>Customer 2</h3>

<h4>Trade</h4>

<p>Blablabla</p>

<p>Blablabla</p>
<p>Blablabla</p>

<p>Blablabla</p>

</div>

<div class="w3-card-2 w3-white">

<img src="/w3images/mountains.jpg" alt="Monterosso" style="width:100%">

<h3>Customer 3</h3>

<h4>Trade</h4>

<p>Blablabla</p>

</div>

<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" id="pricing">

<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">

<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>

<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">

</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>

<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">

<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>

<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 class="w3-container w3-padding-64 w3-theme-l5" id="contact">

<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">

<input class="w3-input" type="text" name="Name" required>

</div>

<label class="w3-label">Email</label>

<input class="w3-input" type="text" name="Email" required>

</div>

<label class="w3-label">Message</label>

<input class="w3-input" type="text" name="Message" required>

</div>

<input class="w3-check" type="checkbox" checked name="Like">

<label class="w3-validate">I Like it!</label>

<button type="submit" class="w3-btn w3-right w3-theme">Send</button>

</form>

</div>

<div id="googleMap" style="width:100%;height:420px;"></div>

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 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" href="javascript:void(0)" title="Google +"><i

class="fa fa-instagram"></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>

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>

32) <!DOCTYPE html>

<html>

<title>W3.CSS Template</title>

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

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-black.css">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-

awesome/4.7.0/css/font-awesome.min.css">

<style>

html,body,h1,h2,h3,h4,h5,h6 {font-family: "Roboto", sans-serif}

.w3-sidenav a,.w3-sidenav h4 {padding: 12px;}

.w3-navbar li a {

padding-top: 12px;

padding-bottom: 12px;

</style>

<body>

<ul class="w3-navbar w3-theme w3-top w3-left-align w3-large">

<li class="w3-opennav w3-right w3-hide-large">

<a class="w3-hover-white w3-large w3-theme-l1" href="javascript:void(0)"

onclick="w3_open()"><i class="fa fa-bars"></i></a>

</li>

<li><a href="#" class="w3-theme-l1">Logo</a></li>

<li class="w3-hide-small"><a href="#" class="w3-hover-

white">About</a></li>

<li class="w3-hide-small"><a href="#" class="w3-hover-

white">Values</a></li>

<li class="w3-hide-small"><a href="#" class="w3-hover-white">News</a></li>

<li class="w3-hide-small"><a href="#" class="w3-hover-
white">Contact</a></li>

<li class="w3-hide-medium w3-hide-small"><a href="#" class="w3-hover-

white">Clients</a></li>

<li class="w3-hide-medium w3-hide-small"><a href="#" class="w3-hover-

white">Partners</a></li>

</ul>

</div>

<nav class="w3-sidenav w3-collapse w3-theme-l5 w3-animate-left" style="z-

index:3;width:250px;margin-top:51px;" id="mySidenav">

<a href="javascript:void(0)" onclick="w3_close()" class="w3-right w3-xlarge w3-

padding-large w3-hover-black w3-hide-large" title="close menu">

<i class="fa fa-remove"></i>

</a>

<a href="#" class="w3-hover-black">Link</a>

</nav>

<div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer"

title="close side menu" id="myOverlay"></div>

<div class="w3-main" style="margin-left:250px">

<div class="w3-twothird w3-container">

<h1 class="w3-text-teal">Heading</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.
Lorem ipsum

dolor sit amet, consectetur adipisicing 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-container">

<p class="w3-border w3-padding-large w3-padding-32 w3-center">AD</p>

<p class="w3-border w3-padding-large w3-padding-64 w3-center">AD</p>

</div>

<div class="w3-twothird w3-container">

<h1 class="w3-text-teal">Heading</h1>

</div>

<div class="w3-third w3-container">

<p class="w3-border w3-padding-large w3-padding-64 w3-center">AD</p>

</div>

<div class="w3-row w3-padding-64">

<div class="w3-twothird w3-container">

<h1 class="w3-text-teal">Heading</h1>

</div>

<div class="w3-third w3-container">

<p class="w3-border w3-padding-large w3-padding-32 w3-center">AD</p>

<p class="w3-border w3-padding-large w3-padding-64 w3-center">AD</p>

</div>

<div class="w3-center w3-padding-64">

<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 w3-hide-small" href="#">5</a></li>

<li><a class="w3-hover-black" href="#"></a></li>

</ul>

</div>

<div class="w3-container w3-theme-l2 w3-padding-32">

<h4>Footer</h4>

</div>

<div class="w3-container w3-theme-l1">

<p>Powered by <a href="http://www.w3schools.com/w3css/default.asp"

target="_blank">w3.css</a></p>

</div>

</footer>

</div>

// Get the Sidenav

var mySidenav = document.getElementById("mySidenav");

// Get the DIV with overlay effect

var overlayBg = document.getElementById("myOverlay");

// Toggle between showing and hiding the sidenav, and add overlay effect

function w3_open() {

if (mySidenav.style.display === 'block') {

mySidenav.style.display = 'none';

overlayBg.style.display = "none";

} else {

mySidenav.style.display = 'block';

overlayBg.style.display = "block";

// Close the sidenav with the close button

function w3_close() {

mySidenav.style.display = "none";

overlayBg.style.display = "none";

</script>

</body>

</html>

33) <!DOCTYPE html>

<html>

<title>W3.CSS Template</title>

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

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-blue-

grey.css">

<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans'>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-

awesome/4.7.0/css/font-awesome.min.css">

<style>

html,body,h1,h2,h3,h4,h5 {font-family: "Open Sans", sans-serif}

</style>

<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-padding-large 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-padding-large w3-theme-d4"><i class="fa fa-home

w3-margin-right"></i>Logo</a></li>

<li class="w3-hide-small"><a href="#" class="w3-padding-large w3-hover-white"

title="News"><i class="fa fa-globe"></i></a></li>

<li class="w3-hide-small"><a href="#" class="w3-padding-large w3-hover-white"

title="Account Settings"><i class="fa fa-user"></i></a></li>

<li class="w3-hide-small"><a href="#" class="w3-padding-large w3-hover-white"

title="Messages"><i class="fa fa-envelope"></i></a></li>

<li class="w3-hide-small w3-dropdown-hover">

<a href="#" class="w3-padding-large w3-hover-white" title="Notifications"><i

class="fa fa-bell"></i><span class="w3-badge w3-right w3-small w3-
green">3</span></a>
<div class="w3-dropdown-content w3-white w3-card-4">

<a href="#">One new friend request</a>

<a href="#">John Doe posted on your wall</a>

<a href="#">Jane likes your post</a>

</div>

</li>

<li class="w3-hide-small w3-right"><a href="#" class="w3-padding-large w3-

hover-white" title="My Account"><img src="/w3images/avatar2.png" class="w3-
circle" style="height:25px;width:25px" alt="Avatar"></a></li>

</ul>

</div>

<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-theme">

<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="#">My Profile</a></li>

</ul>

</div>

<div class="w3-container w3-content" style="max-width:1400px;margin-

top:80px">

<div class="w3-col m3">

<div class="w3-card-2 w3-round w3-white">

<h4 class="w3-center">My Profile</h4>

<p class="w3-center"><img src="/w3images/avatar3.png" class="w3-circle"

style="height:106px;width:106px" alt="Avatar"></p>

<hr>

<p><i class="fa fa-pencil fa-fw w3-margin-right w3-text-theme"></i>

Designer, UI</p>

<p><i class="fa fa-home fa-fw w3-margin-right w3-text-theme"></i>

London, UK</p>

<p><i class="fa fa-birthday-cake fa-fw w3-margin-right w3-text-theme"></i>

April 1, 1988</p>

</div>

<br>

<div class="w3-card-2 w3-round">

<div class="w3-accordion w3-white">

<button onclick="myFunction('Demo1')" class="w3-btn-block w3-theme-l1

w3-left-align"><i class="fa fa-circle-o-notch fa-fw w3-margin-right"></i> My
Groups</button>

<div id="Demo1" class="w3-accordion-content w3-container">

</div>
<button onclick="myFunction('Demo2')" class="w3-btn-block w3-theme-l1
w3-left-align"><i class="fa fa-calendar-check-o fa-fw w3-margin-right"></i> My
Events</button>

<div id="Demo2" class="w3-accordion-content w3-container">

<p>Some other text..</p>

</div>

<button onclick="myFunction('Demo3')" class="w3-btn-block w3-theme-l1

w3-left-align"><i class="fa fa-users fa-fw w3-margin-right"></i> My
Photos</button>

<div id="Demo3" class="w3-accordion-content w3-container">

<br>

<img src="/w3images/lights.jpg" style="width:100%" class="w3-margin-

bottom">

</div>

<img src="/w3images/nature.jpg" style="width:100%" class="w3-margin-

bottom">

</div>

<img src="/w3images/mountains.jpg" style="width:100%" class="w3-

margin-bottom">

</div>

<img src="/w3images/forest.jpg" style="width:100%" class="w3-margin-

bottom">

</div>

</div>

<img src="/w3images/fjords.jpg" style="width:100%" class="w3-margin-

bottom">

</div>

<br>

<div class="w3-card-2 w3-round w3-white w3-hide-small">

<p>Interests</p>

<p>

<span class="w3-tag w3-small w3-theme-d5">News</span>

<span class="w3-tag w3-small w3-theme-d4">W3Schools</span>

<span class="w3-tag w3-small w3-theme-d3">Labels</span>

<span class="w3-tag w3-small w3-theme-d2">Games</span>

<span class="w3-tag w3-small w3-theme-d1">Friends</span>

<span class="w3-tag w3-small w3-theme">Games</span>

<span class="w3-tag w3-small w3-theme-l1">Friends</span>

<span class="w3-tag w3-small w3-theme-l2">Food</span>

<span class="w3-tag w3-small w3-theme-l3">Design</span>

<span class="w3-tag w3-small w3-theme-l5">Photos</span>

</p>

</div>

<br>

<div class="w3-container w3-round w3-theme-l4 w3-border w3-theme-border

w3-margin-bottom w3-hide-small">

<span onclick="this.parentElement.style.display='none'" class="w3-hover-

text-grey w3-closebtn">

<i class="fa fa-remove"></i>

</span>

<p>People are looking at your profile. Find out who.</p>

</div>

</div>

<div class="w3-col m7">

<div class="w3-col m12">

<div class="w3-card-2 w3-round w3-white">

<h6 class="w3-opacity">Social Media template by w3.css</h6>

<p contenteditable="true" class="w3-border w3-padding">Status: Feeling

Blue</p>

<button type="button" class="w3-btn w3-theme"><i class="fa fa-

pencil"></i> Post</button>

</div>

<div class="w3-container w3-card-2 w3-white w3-round w3-margin"><br>

<img src="/w3images/avatar2.png" alt="Avatar" class="w3-left w3-circle w3-

margin-right" style="width:60px">

<span class="w3-right w3-opacity">1 min</span>

<div class="w3-row-padding" style="margin:0 -16px">

<img src="/w3images/lights.jpg" style="width:100%" alt="Northern

Lights" class="w3-margin-bottom">

</div>

<img src="/w3images/nature.jpg" style="width:100%" alt="Nature"

class="w3-margin-bottom">

</div>
</div>

<button type="button" class="w3-btn w3-theme-d1 w3-margin-bottom"><i

class="fa fa-thumbs-up"></i> Like</button>

<button type="button" class="w3-btn w3-theme-d2 w3-margin-bottom"><i

class="fa fa-comment"></i> Comment</button>

</div>

<div class="w3-container w3-card-2 w3-white w3-round w3-margin"><br>

<img src="/w3images/avatar5.png" alt="Avatar" class="w3-left w3-circle w3-

margin-right" style="width:60px">

<span class="w3-right w3-opacity">16 min</span>

<button type="button" class="w3-btn w3-theme-d1 w3-margin-bottom"><i

class="fa fa-thumbs-up"></i> Like</button>

<button type="button" class="w3-btn w3-theme-d2 w3-margin-bottom"><i

class="fa fa-comment"></i> Comment</button>

</div>

<div class="w3-container w3-card-2 w3-white w3-round w3-margin"><br>

<img src="/w3images/avatar6.png" alt="Avatar" class="w3-left w3-circle w3-

margin-right" style="width:60px">

<span class="w3-right w3-opacity">32 min</span>

<h4>Angie Jane</h4><br>

<p>Have you seen this?</p>

<button type="button" class="w3-btn w3-theme-d1 w3-margin-bottom"><i

class="fa fa-thumbs-up"></i> Like</button>

<button type="button" class="w3-btn w3-theme-d2 w3-margin-bottom"><i

class="fa fa-comment"></i> Comment</button>

</div>

</div>

<div class="w3-col m2">

<div class="w3-card-2 w3-round w3-white w3-center">

<p>Upcoming Events:</p>

<img src="/w3images/forest.jpg" alt="Forest" style="width:100%;">

<p><strong>Holiday</strong></p>

<p>Friday 15:00</p>

<p><button class="w3-btn w3-btn-block w3-theme-l4">Info</button></p>

</div>

<br>

<div class="w3-card-2 w3-round w3-white w3-center">

<p>Friend Request</p>

<img src="/w3images/avatar6.png" alt="Avatar" style="width:50%"><br>

<div class="w3-row w3-opacity">

<button class="w3-btn w3-green w3-btn-block w3-section"

title="Accept"><i class="fa fa-check"></i></button>

</div>

<button class="w3-btn w3-red w3-btn-block w3-section"

title="Decline"><i class="fa fa-remove"></i></button>

</div>

<br>

<div class="w3-card-2 w3-round w3-white w3-padding-16 w3-center">

</div>

<br>

<div class="w3-card-2 w3-round w3-white w3-padding-32 w3-center">

<p><i class="fa fa-bug w3-xxlarge"></i></p>

</div>

</div>

</div>

</div>

<br>

<footer class="w3-container w3-theme-d3 w3-padding-16">

<h5>Footer</h5>

</footer>

<footer class="w3-container w3-theme-d5">

<p>Powered by <a href="http://www.w3schools.com/w3css/default.asp"

target="_blank">w3.css</a></p>

</footer>

// Accordion

function myFunction(id) {

var x = document.getElementById(id);

if (x.className.indexOf("w3-show") == -1) {

x.className += " w3-show";

x.previousElementSibling.className += " w3-theme-d1";

} else {

x.className = x.className.replace("w3-show", "");

x.previousElementSibling.className =

x.previousElementSibling.className.replace(" w3-theme-d1", "");

// 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>

33) <!DOCTYPE html>

<html>

<title>W3.CSS Template</title>

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

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-

awesome/4.7.0/css/font-awesome.min.css">

<style>

html,body,h1,h2,h3,h4,h5 {font-family: "Raleway", sans-serif}

</style>

<div class="w3-container w3-top w3-black w3-large w3-padding" style="z-

index:4">

<button class="w3-btn w3-hide-large w3-padding-0 w3-hover-text-grey"

onclick="w3_open();"><i class="fa fa-bars"></i> Menu</button>

</div>

<nav class="w3-sidenav w3-collapse w3-white w3-animate-left" style="z-

index:3;width:300px;" id="mySidenav"><br>

<div class="w3-container w3-row">

<div class="w3-col s4">

<img src="/w3images/avatar2.png" class="w3-circle w3-margin-right"

style="width:46px">

</div>

<div class="w3-col s8">

<span>Welcome, <strong>Mike</strong></span><br>

<a href="#" class="w3-hover-none w3-hover-text-red w3-show-inline-block"><i

class="fa fa-envelope"></i></a>
<a href="#" class="w3-hover-none w3-hover-text-green w3-show-inline-
block"><i class="fa fa-user"></i></a>

<a href="#" class="w3-hover-none w3-hover-text-blue w3-show-inline-

block"><i class="fa fa-cog"></i></a>

</div>

<hr>

<h5>Dashboard</h5>

</div>

<a href="#" class="w3-padding-16 w3-hide-large w3-dark-grey w3-hover-black"

onclick="w3_close()" title="close menu"><i class="fa fa-remove fa-fw"></i> Close
Menu</a>

<a href="#" class="w3-padding w3-blue"><i class="fa fa-users fa-fw"></i>

Overview</a>

<a href="#" class="w3-padding"><i class="fa fa-eye fa-fw"></i> Views</a>

<a href="#" class="w3-padding"><i class="fa fa-users fa-fw"></i> Traffic</a>

<a href="#" class="w3-padding"><i class="fa fa-bullseye fa-fw"></i> Geo</a>

<a href="#" class="w3-padding"><i class="fa fa-diamond fa-fw"></i>

Orders</a>

<a href="#" class="w3-padding"><i class="fa fa-bell fa-fw"></i> News</a>

<a href="#" class="w3-padding"><i class="fa fa-bank fa-fw"></i> General</a>

<a href="#" class="w3-padding"><i class="fa fa-history fa-fw"></i>

History</a>

<a href="#" class="w3-padding"><i class="fa fa-cog fa-fw"></i>

Settings</a><br><br>

</nav>

<div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()"

style="cursor:pointer" title="close side menu" id="myOverlay"></div>

<div class="w3-main" style="margin-left:300px;margin-top:43px;">

<header class="w3-container" style="padding-top:22px">

<h5><b><i class="fa fa-dashboard"></i> My Dashboard</b></h5>

</header>

<div class="w3-row-padding w3-margin-bottom">

<div class="w3-container w3-red w3-padding-16">

<div class="w3-left"><i class="fa fa-comment w3-xxxlarge"></i></div>

</div>

<h4>Messages</h4>

</div>

<div class="w3-container w3-blue w3-padding-16">

<div class="w3-left"><i class="fa fa-eye w3-xxxlarge"></i></div>

</div>

<h4>Views</h4>

</div>

<div class="w3-container w3-teal w3-padding-16">

<div class="w3-left"><i class="fa fa-share-alt w3-xxxlarge"></i></div>

</div>

<h4>Shares</h4>

</div>

<div class="w3-container w3-orange w3-text-white w3-padding-16">

<div class="w3-left"><i class="fa fa-users w3-xxxlarge"></i></div>

</div>

<h4>Users</h4>

</div>

</div>
</div>

<div class="w3-container w3-section">

<div class="w3-row-padding" style="margin:0 -16px">

<h5>Regions</h5>

<img src="/w3images/region.jpg" style="width:100%" alt="Google Regional

Map">

</div>

<h5>Feeds</h5>

<table class="w3-table w3-striped w3-white">

<tr>

<td><i class="fa fa-user w3-blue w3-padding-tiny"></i></td>

<td>New record, over 90 views.</td>

</tr>

<tr>

<td><i class="fa fa-bell w3-red w3-padding-tiny"></i></td>

<td>Database error.</td>

</tr>

<tr>

<td><i class="fa fa-users w3-orange w3-text-white w3-padding-

tiny"></i></td>

<td>New record, over 40 users.</td>

<tr>

<td><i class="fa fa-comment w3-red w3-padding-tiny"></i></td>

<td>New comments.</td>

</tr>

<tr>

<td><i class="fa fa-bookmark w3-light-blue w3-padding-tiny"></i></td>

<td>Check transactions.</td>

</tr>

<tr>

<td><i class="fa fa-laptop w3-red w3-padding-tiny"></i></td>

<td>CPU overload.</td>

</tr>

<tr>

<td><i class="fa fa-share-alt w3-green w3-padding-tiny"></i></td>

<td>New shares.</td>

</tr>

</table>

</div>

<h5>General Stats</h5>

<p>New Visitors</p>

<div class="w3-progress-container w3-grey">

<div id="myBar" class="w3-progressbar w3-green" style="width:25%">

<div class="w3-center w3-text-white">+25%</div>

</div>

<p>New Users</p>

<div class="w3-progress-container w3-grey">

<div id="myBar" class="w3-progressbar w3-orange" style="width:50%">

<div class="w3-center w3-text-white">50%</div>

</div>

<p>Bounce Rate</p>

<div class="w3-progress-container w3-grey">

<div id="myBar" class="w3-progressbar w3-red" style="width:75%">

<div class="w3-center w3-text-white">75%</div>

</div>

<hr>

<div class="w3-container">
<h5>Countries</h5>

<table class="w3-table w3-striped w3-bordered w3-border w3-hoverable w3-

white">

<tr>

<td>United States</td>

</tr>

<tr>

</tr>

<tr>

<td>Russia</td>

</tr>

<tr>

<td>Spain</td>

</tr>

<tr>

<td>India</td>

</tr>

<tr>

<td>France</td>

</tr>
</table><br>

<button class="w3-btn">More Countries <i class="fa fa-arrow-

right"></i></button>

</div>

<hr>

<h5>Recent Users</h5>

<ul class="w3-ul w3-card-4 w3-white">

<span onclick="this.parentElement.style.display='none'" class="w3-closebtn

w3-padding w3-margin-right w3-medium">x</span>

<img src="/w3images/avatar2.png" class="w3-left w3-circle w3-margin-right"

style="width:35px">

</li>

<span onclick="this.parentElement.style.display='none'" class="w3-closebtn

w3-padding w3-margin-right w3-medium">x</span>

<img src="/w3images/avatar5.png" class="w3-left w3-circle w3-margin-right"

style="width:35px">

</li>

<span onclick="this.parentElement.style.display='none'" class="w3-closebtn

w3-padding w3-margin-right w3-medium">x</span>

<img src="/w3images/avatar6.png" class="w3-left w3-circle w3-margin-right"

style="width:35px">

</li>
</ul>

</div>

<hr>

<h5>Recent Comments</h5>

<div class="w3-col m2 text-center">

<img class="w3-circle" src="/w3images/avatar3.png"

style="width:96px;height:96px">

</div>

<div class="w3-col m10 w3-container">

<h4>John <span class="w3-opacity w3-medium">Sep 29, 2014, 9:12

PM</span></h4>

<p>Keep up the GREAT work! I am cheering for you!! Lorem ipsum dolor sit
amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.</p><br>

</div>

<div class="w3-col m2 text-center">

<img class="w3-circle" src="/w3images/avatar1.png"

style="width:96px;height:96px">

</div>

<div class="w3-col m10 w3-container">

<h4>Bo <span class="w3-opacity w3-medium">Sep 28, 2014, 10:15

PM</span></h4>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.</p><br>

</div>

<br>

<div class="w3-container w3-dark-grey w3-padding-32">

<div class="w3-container w3-third">

<h5 class="w3-bottombar w3-border-green">Demographic</h5>

<p>Language</p>

<p>Country</p>

</div>

<div class="w3-container w3-third">

<h5 class="w3-bottombar w3-border-red">System</h5>

<p>Browser</p>

</div>

<div class="w3-container w3-third">

<h5 class="w3-bottombar w3-border-orange">Target</h5>

<p>Users</p>

<p>Active</p>

<p>Interests</p>

</div>
</div>

</div>

<footer class="w3-container w3-padding-16 w3-light-grey">

<h4>FOOTER</h4>

<p>Powered by <a href="http://www.w3schools.com/w3css/default.asp"

target="_blank">w3.css</a></p>

</footer>

</div>

// Get the Sidenav

var mySidenav = document.getElementById("mySidenav");

// Get the DIV with overlay effect

var overlayBg = document.getElementById("myOverlay");

// Toggle between showing and hiding the sidenav, and add overlay effect

function w3_open() {

if (mySidenav.style.display === 'block') {

mySidenav.style.display = 'none';

overlayBg.style.display = "none";

} else {

mySidenav.style.display = 'block';
overlayBg.style.display = "block";

// Close the sidenav with the close button

function w3_close() {

mySidenav.style.display = "none";

overlayBg.style.display = "none";

</script>

</body>

</html>

34) <!DOCTYPE html>

<html>

<title>W3.CSS Template</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="https://cdnjs.cloudflare.com/ajax/libs/font-

awesome/4.7.0/css/font-awesome.min.css">

<style>

body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", Arial, Helvetica, sans-serif}

.mySlides {display:none}

</style>
<body class="w3-content w3-border-left w3-border-right">

<nav class="w3-sidenav w3-light-grey w3-collapse w3-top" style="z-

index:3;width:260px" id="mySidenav">

<div class="w3-container w3-padding-8">

<i onclick="w3_close()" class="fa fa-remove w3-hide-large w3-closebtn w3-

hover-text-red"></i>

<h3>Rental</h3>

<h6>per night</h6>

<hr>

<form action="form.asp" target="_blank">

<p><label><i class="fa fa-calendar-check-o"></i> Check In</label></p>

<input class="w3-input w3-border" type="text" placeholder="DD MM YYYY"

name="CheckIn" required>

<p><label><i class="fa fa-calendar-o"></i> Check Out</label></p>

<input class="w3-input w3-border" type="text" placeholder="DD MM YYYY"

name="CheckOut" required>

<p><label><i class="fa fa-male"></i> Adults</label></p>

<input class="w3-input w3-border" type="number" value="1" name="Adults"

min="1" max="6">

<p><label><i class="fa fa-child"></i> Kids</label></p>

<input class="w3-input w3-border" type="number" value="0" name="Kids"

min="0" max="6">

<p><button class="w3-btn-block w3-green w3-padding w3-left-align"

type="submit"><i class="fa fa-search w3-margin-right"></i> Search
availability</button></p>

</form>
</div>

<a href="#apartment" class="w3-padding-16"><i class="fa fa-building"></i>

Apartment</a>

<a href="javascript:void(0)" class="w3-padding"

onclick="document.getElementById('subscribe').style.display='block'"><i class="fa
fa-rss"></i> Subscribe</a>

<a href="#contact" class="w3-padding-16"><i class="fa fa-envelope"></i>

Contact</a>

</nav>

<header class="w3-container w3-top w3-hide-large w3-black w3-xlarge w3-

padding-16">

<span class="w3-left">Rental</span>

<a href="javascript:void(0)" class="w3-right w3-opennav"

onclick="w3_open()"><i class="fa fa-bars"></i></a>

</header>

<div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer"

title="close side menu" id="myOverlay"></div>

<div class="w3-main w3-white" style="margin-left:260px">

<div class="w3-hide-large" style="margin-top:80px"></div>

<h2 class="w3-text-green">The Apartment</h2>

<div class="w3-display-container mySlides">

<img src="/w3images/livingroom.jpg" style="width:100%;margin-bottom:-6px">

<div class="w3-display-bottomleft w3-container w3-black">

<p>Living Room</p>

</div>

<div class="w3-display-container mySlides">

<img src="/w3images/diningroom.jpg" style="width:100%;margin-bottom:-6px">

<div class="w3-display-bottomleft w3-container w3-black">

<p>Dining Room</p>

</div>

<div class="w3-display-container mySlides">

<img src="/w3images/bedroom.jpg" style="width:100%;margin-bottom:-6px">

<div class="w3-display-bottomleft w3-container w3-black">

<p>Bedroom</p>

</div>

<div class="w3-display-container mySlides">

<img src="/w3images/livingroom2.jpg" style="width:100%;margin-bottom:-

6px">

<div class="w3-display-bottomleft w3-container w3-black">

<p>Living Room II</p>

</div>

</div>
</div>

<div class="w3-row-padding w3-section">

<div class="w3-col s3">

<img class="demo w3-opacity w3-hover-opacity-off"

src="/w3images/livingroom.jpg" style="width:100%;cursor:pointer"
onclick="currentDiv(1)" title="Living room">

</div>

<div class="w3-col s3">

<img class="demo w3-opacity w3-hover-opacity-off"

src="/w3images/diningroom.jpg" style="width:100%;cursor:pointer"
onclick="currentDiv(2)" title="Dining room">

</div>

<div class="w3-col s3">

<img class="demo w3-opacity w3-hover-opacity-off"

src="/w3images/bedroom.jpg" style="width:100%;cursor:pointer"
onclick="currentDiv(3)" title="Bedroom">

</div>

<div class="w3-col s3">

<img class="demo w3-opacity w3-hover-opacity-off"

src="/w3images/livingroom2.jpg" style="width:100%;cursor:pointer"
onclick="currentDiv(4)" title="Second Living Room">

</div>

<h4><strong>The space</strong></h4>

<div class="w3-row w3-large">

<div class="w3-col s6">

<p><i class="fa fa-fw fa-male"></i> Max people: 4</p>

<p><i class="fa fa-fw fa-bath"></i> Bathrooms: 2</p>

<p><i class="fa fa-fw fa-bed"></i> Bedrooms: 1</p>

</div>

<div class="w3-col s6">

<p><i class="fa fa-fw fa-clock-o"></i> Check In: After 3PM</p>

<p><i class="fa fa-fw fa-clock-o"></i> Check Out: 12PM</p>

</div>

<hr>

<h4><strong>Amenities</strong></h4>

<div class="w3-row w3-large">

<div class="w3-col s6">

<p><i class="fa fa-fw fa-shower"></i> Shower</p>

<p><i class="fa fa-fw fa-wifi"></i> WiFi</p>

<p><i class="fa fa-fw fa-tv"></i> TV</p>

</div>

<div class="w3-col s6">

<p><i class="fa fa-fw fa-cutlery"></i> Kitchen</p>

<p><i class="fa fa-fw fa-thermometer"></i> Heating</p>

<p><i class="fa fa-fw fa-wheelchair"></i> Accessible</p>

</div>

<hr>

<h4><strong>Extra Info</strong></h4>
<p>Our apartment is really clean and we like to keep it that way. Enjoy the 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.</p>

<p>We accept: <i class="fa fa-credit-card w3-large"></i> <i class="fa fa-cc-

mastercard w3-large"></i> <i class="fa fa-cc-amex w3-large"></i> <i class="fa
fa-cc-cc-visa w3-large"></i><i class="fa fa-cc-paypal w3-large"></i></p>

<hr>

<h4><strong>Rules</strong></h4>

<p>Subscribe to receive updates on available dates and special offers.</p>

<p><button class="w3-btn w3-green w3-padding w3-third"

onclick="document.getElementById('subscribe').style.display='block'">Subscribe</
button></p>

</div>

<hr>

<div class="w3-container" id="contact">

<h2>Contact</h2>

<i class="fa fa-map-marker" style="width:30px"></i> Chicago, US<br>

<i class="fa fa-phone" style="width:30px"></i> Phone: +00 151515<br>

<i class="fa fa-envelope" style="width:30px"> </i> Email: [email protected]<br>

<p>Questions? Go ahead, ask them:</p>

<form action="form.asp" target="_blank">

<p><input class="w3-input w3-border" type="text" placeholder="Name"

required name="Name"></p>
<p><input class="w3-input w3-border" type="text" placeholder="Email"
required name="Email"></p>

<p><input class="w3-input w3-border" type="text" placeholder="Message"

required name="Message"></p>

<button type="submit" class="w3-btn w3-padding w3-green w3-third">Send a

Message</button>

</form>

</div>

<footer class="w3-container w3-padding-16" style="margin-top:32px">Powered

by <a href="http://www.w3schools.com/w3css/default.asp" title="W3.CSS"
target="_blank" class="w3-hover-text-green">w3.css</a></footer>

</div>

<div id="subscribe" class="w3-modal">

<div class="w3-modal-content w3-animate-zoom w3-padding-large">

<div class="w3-container w3-white w3-center">

<h2 class="w3-wide">SUBSCRIBE</h2>

<p>Join our mailing list to receive updates on available dates and special
offers.</p>

<p><input class="w3-input w3-border" type="text" placeholder="Enter e-

mail"></p>

<button type="button" class="w3-btn w3-padding-large w3-green w3-margin-

bottom"
onclick="document.getElementById('subscribe').style.display='none'">Subscribe</
button>
</div>

</div>

// Script to open and close sidenav when on tablets and phones

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";

// Slideshow Apartment Images

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-opacity-off", "");

x[slideIndex-1].style.display = "block";

dots[slideIndex-1].className += " w3-opacity-off";

</script>

</body>

</html>

35) <!DOCTYPE html>

<html>

<title>W3.CSS Template</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://cdnjs.cloudflare.com/ajax/libs/font-

awesome/4.7.0/css/font-awesome.min.css">

<style>

body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", Arial, Helvetica, sans-serif}

</style>

<ul class="w3-navbar w3-white w3-large">

<li><a href="#" class="w3-red"><i class="fa fa-bed w3-margin-

right"></i>Logo</a></li>

<li><a href="#rooms">Rooms</a></li>

<li><a href="#about">About</a></li>

<li><a href="#contact">Contact</a></li>

<li class="w3-right w3-light-grey"><a href="#contact">Book Now</a></li>

</ul>

<header class="w3-display-container w3-content" style="max-width:1500px;">

<img class="w3-image" src="/w3images/hotel.jpg" alt="The Hotel" style="min-

width:1000px" width="1500" height="800">

<div class="w3-display-left w3-padding w3-col l6 m8">

<div class="w3-container w3-red">

<h2><i class="fa fa-bed w3-margin-right"></i>Hotel Name</h2>

</div>

<div class="w3-container w3-white w3-padding-16">

<div class="w3-row-padding" style="margin:0 -16px;">

<div class="w3-half w3-margin-bottom">

<label><i class="fa fa-calendar-o"></i> Check In</label>

<input class="w3-input w3-border" type="text" placeholder="DD MM YYYY"

name="CheckIn" required>

</div>

<label><i class="fa fa-calendar-o"></i> Check Out</label>

<input class="w3-input w3-border" type="text" placeholder="DD MM YYYY"

name="CheckOut" required>

</div>

<div class="w3-row-padding" style="margin:8px -16px;">

<div class="w3-half w3-margin-bottom">

<label><i class="fa fa-male"></i> Adults</label>

<input class="w3-input w3-border" type="number" value="1"

name="Adults" min="1" max="6">

</div>

<label><i class="fa fa-child"></i> Kids</label>

<input class="w3-input w3-border" type="number" value="0" name="Kids"

min="0" max="6">

</div>

<button class="w3-btn w3-dark-grey" type="submit"><i class="fa fa-search

w3-margin-right"></i> Search availability</button>

</form>
</div>

</div>

</header>

<div class="w3-content" style="max-width:1532px;">

<div class="w3-container w3-margin-top" id="rooms">

<h3>Rooms</h3>

<p>Make yourself at home is our slogan. We offer the best beds in the industry.
Sleep well and rest well.</p>

</div>

<div class="w3-col m3">

<label><i class="fa fa-calendar-o"></i> Check In</label>

<input class="w3-input w3-border" type="text" placeholder="DD MM YYYY">

</div>

<div class="w3-col m3">

<label><i class="fa fa-calendar-o"></i> Check Out</label>

<input class="w3-input w3-border" type="text" placeholder="DD MM YYYY">

</div>

<div class="w3-col m2">

<label><i class="fa fa-male"></i> Adults</label>

<input class="w3-input w3-border" type="number" placeholder="1">

</div>

<div class="w3-col m2">

<input class="w3-input w3-border" type="number" placeholder="0">

</div>

<div class="w3-col m2">

<label><i class="fa fa-search"></i> Search</label>

<button class="w3-btn-block w3-padding-8">Search</button>

</div>

<div class="w3-row-padding w3-padding-16">

<div class="w3-third w3-margin-bottom">

<img src="/w3images/room_single.jpg" alt="Norway" style="width:100%">

<div class="w3-container w3-white">

<h3>Single Room</h3>

<h6 class="w3-opacity">From $99</h6>

<p>Single bed</p>

<p class="w3-large"><i class="fa fa-bath"></i> <i class="fa fa-phone"></i>

<button class="w3-btn-block w3-margin-bottom">Choose Room</button>

</div>

<div class="w3-third w3-margin-bottom">

<img src="/w3images/room_double.jpg" alt="Norway" style="width:100%">

<div class="w3-container w3-white">

<h3>Double Room</h3>

<h6 class="w3-opacity">From $149</h6>

<p>Queen-size bed</p>

<p class="w3-large"><i class="fa fa-bath"></i> <i class="fa fa-phone"></i>

<button class="w3-btn-block w3-margin-bottom">Choose Room</button>

</div>

<div class="w3-third w3-margin-bottom">

<img src="/w3images/room_deluxe.jpg" alt="Norway" style="width:100%">

<div class="w3-container w3-white">

<h3>Deluxe Room</h3>

<h6 class="w3-opacity">From $199</h6>

<p class="w3-large"><i class="fa fa-bath"></i> <i class="fa fa-phone"></i>

<button class="w3-btn-block w3-margin-bottom">Choose Room</button>

</div>

<div class="w3-row-padding" id="about">

<div class="w3-col l4 m7">

<h3>About</h3>

<h6>Our hotel is one of a kind. It is truely amazing. 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. Ut enim ad minim veniam.</h6>

<p>We accept: <i class="fa fa-credit-card w3-large"></i> <i class="fa fa-cc-

mastercard w3-large"></i> <i class="fa fa-cc-amex w3-large"></i> <i class="fa
fa-cc-cc-visa w3-large"></i><i class="fa fa-cc-paypal w3-large"></i></p>

</div>

<div class="w3-col l8 m5">

<div id="googleMap" style="width:100%;height:400px;" class="w3-

grayscale"></div>

</div>

<div class="w3-row w3-large w3-center" style="margin:32px 0">

<div class="w3-third"><i class="fa fa-map-marker w3-text-red"></i> 423 Some

adr, Chicago, US</div>

<div class="w3-third"><i class="fa fa-phone w3-text-red"></i> Phone: +00

151515</div>

<div class="w3-third"><i class="fa fa-envelope w3-text-red"></i> Email:

[email protected]</div>

</div>

<div class="w3-panel w3-red w3-leftbar w3-padding-32">

<h6><i class="fa fa-info w3-deep-orange w3-padding w3-margin-right"></i> On

demand, we can offer playstation, babycall, children care, dog equipment,
etc.</h6>

</div>

<h3>Our Hotels</h3>
<h6>You can find our hotels anywhere in the world:</h6>

</div>

<div class="w3-row-padding w3-padding-16 w3-text-white w3-large">

<div class="w3-half w3-margin-bottom">

<img src="/w3images/cinqueterre.jpg" alt="Cinque Terre"

style="width:100%">

<span class="w3-display-bottomleft w3-padding">Cinque Terre</span>

</div>

<div class="w3-row-padding" style="margin:0 -16px">

<div class="w3-half w3-margin-bottom">

<img src="/w3images/newyork2.jpg" alt="New York" style="width:100%">

<span class="w3-display-bottomleft w3-padding">New York</span>

</div>

<div class="w3-half w3-margin-bottom">

<img src="/w3images/sanfran.jpg" alt="San Francisco"

style="width:100%">

<span class="w3-display-bottomleft w3-padding">San Francisco</span>

</div>

</div>
<div class="w3-row-padding" style="margin:0 -16px">

<div class="w3-half w3-margin-bottom">

<img src="/w3images/pisa.jpg" alt="Pisa" style="width:100%">

<span class="w3-display-bottomleft w3-padding">Pisa</span>

</div>

<div class="w3-half w3-margin-bottom">

<img src="/w3images/paris.jpg" alt="Paris" style="width:100%">

<span class="w3-display-bottomleft w3-padding">Paris</span>

</div>

<div class="w3-container w3-padding-32 w3-black w3-opacity w3-card-2 w3-

hover-opacity-off" style="margin:32px 0;">

<h2>Get the best offers first!</h2>

<p>Join our newsletter.</p>

<input class="w3-input w3-border" type="text" placeholder="Your Email

address">

<button type="button" class="w3-btn w3-red w3-margin-

top">Subscribe</button>

</div>
<div class="w3-container" id="contact">

<h2>Contact</h2>

<p>If you have any questions, do not hesitate to ask them.</p>

<i class="fa fa-map-marker w3-text-red" style="width:30px"></i> Chicago,

US<br>

<i class="fa fa-phone w3-text-red" style="width:30px"></i> Phone: +00

151515<br>

<i class="fa fa-envelope w3-text-red" style="width:30px"> </i> Email:

[email protected]<br>

<form action="form.asp" target="_blank">

<p><input class="w3-input w3-padding-16 w3-border" type="text"

placeholder="Name" required name="Name"></p>

<p><input class="w3-input w3-padding-16 w3-border" type="text"

placeholder="Email" required name="Email"></p>

<p><input class="w3-input w3-padding-16 w3-border" type="text"

placeholder="Message" required name="Message"></p>

<p><button class="w3-btn w3-padding-large" type="submit">SEND

MESSAGE</button></p>

</form>

</div>

</div>

<footer class="w3-padding-32 w3-black w3-center w3-margin-top">

<div class="w3-xlarge w3-padding-16">

<i class="fa fa-instagram w3-hover-text-purple"></i>

<i class="fa fa-snapchat w3-hover-text-yellow"></i>

<i class="fa fa-pinterest-p w3-hover-text-red"></i>

<i class="fa fa-twitter w3-hover-text-light-blue"></i>

<i class="fa fa-linkedin w3-hover-text-indigo"></i>

</div>

<p>Powered by <a href="http://www.w3schools.com/w3css/default.asp"

target="_blank" class="w3-hover-text-green">w3.css</a></p>

</footer>

var myCenter = new google.maps.LatLng(41.878114, -87.629798);

function initialize() {

var mapProp = {

center: myCenter,

zoom: 12,

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>

</body>

</html>

36) <!DOCTYPE html>

<html>

<title>W3.CSS Template</title>
<meta charset="UTF-8">

<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="https://cdnjs.cloudflare.com/ajax/libs/font-

awesome/4.7.0/css/font-awesome.min.css">

<style>

body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", Arial, Helvetica, sans-serif}

.myLink {display: none}

</style>

<ul class="w3-navbar w3-white w3-border-bottom w3-xlarge">

<li><a href="#" class="w3-text-red w3-hover-red"><b><i class="fa fa-map-

marker w3-margin-right"></i>Logo</b></a></li>

<li class="w3-right"><a href="#" class="w3-hover-red w3-text-grey"><i

class="fa fa-search"></i></a></li>

</ul>

<header class="w3-display-container w3-content w3-hide-small" style="max-

width:1500px">

<img class="w3-image" src="/w3images/london2.jpg" alt="London" width="1500"

height="700">

<div class="w3-display-middle" style="width:65%">

<ul class="w3-navbar w3-black">

<li><a href="javascript:void(0)" class="tablink" onclick="openLink(event,

'Flight');"><i class="fa fa-plane w3-margin-right"></i>Flight</a></li>
<li><a href="javascript:void(0)" class="tablink" onclick="openLink(event,
'Hotel');"><i class="fa fa-bed w3-margin-right"></i>Hotel</a></li>

<li><a href="javascript:void(0)" class="tablink" onclick="openLink(event,

'Car');"><i class="fa fa-car w3-margin-right"></i>Rental</a></li>

</ul>

<div id="Flight" class="w3-container w3-white w3-padding-16 myLink">

<h3>Travel the world with us</h3>

<div class="w3-row-padding" style="margin:0 -16px;">

<input class="w3-input w3-border" type="text" placeholder="Departing

from">

</div>

<input class="w3-input w3-border" type="text" placeholder="Arriving at">

</div>

<p><button class="w3-btn w3-dark-grey">Search and find

dates</button></p>

</div>

<div id="Hotel" class="w3-container w3-white w3-padding-16 myLink">

<h3>Find the best hotels</h3>

<p>Book a hotel with us and get the best fares and promotions.</p>

<p>We know hotels - we know comfort.</p>

<p><button class="w3-btn w3-dark-grey">Search Hotels</button></p>

</div>

<div id="Car" class="w3-container w3-white w3-padding-16 myLink">

<h3>Best car rental in the world!</h3>

<p><span class="w3-tag w3-deep-orange">DISCOUNT!</span> Special offer if

you book today: 25% off anywhere in the world with CarServiceRentalRUs</p>

<input class="w3-input w3-border" type="text" placeholder="Pick-up point">

<p><button class="w3-btn w3-dark-grey">Search Availability</button></p>

</div>

</header>

<div class="w3-content" style="max-width:1100px;">

<div class="w3-container w3-margin-top">

<h3>Good Offers Right Now</h3>

<h6>Up to <strong>50%</strong> discount.</h6>

</div>

<div class="w3-row-padding w3-text-white w3-large">

<div class="w3-half w3-margin-bottom">

<img src="/w3images/cinqueterre.jpg" alt="Cinque Terre"

style="width:100%">

<span class="w3-display-bottomleft w3-padding">Cinque Terre</span>

</div>

<div class="w3-row-padding" style="margin:0 -16px">

<div class="w3-half w3-margin-bottom">

<img src="/w3images/newyork2.jpg" alt="New York" style="width:100%">

<span class="w3-display-bottomleft w3-padding">New York</span>

</div>

<div class="w3-half w3-margin-bottom">

<img src="/w3images/sanfran.jpg" alt="San Francisco"

style="width:100%">

<span class="w3-display-bottomleft w3-padding">San Francisco</span>

</div>

<div class="w3-row-padding" style="margin:0 -16px">

<div class="w3-half w3-margin-bottom">

<img src="/w3images/pisa.jpg" alt="Pisa" style="width:100%">

<span class="w3-display-bottomleft w3-padding">Pisa</span>

</div>

<div class="w3-half w3-margin-bottom">

<span class="w3-display-bottomleft w3-padding">Paris</span>

</div>

<h3>Explore Nature</h3>

<p>Travel with us and see nature at its finest.</p>

</div>

<div class="w3-half w3-margin-bottom">

<img src="/w3images/ocean2.jpg" alt="Norway" style="width:100%">

<div class="w3-container w3-white">

<h3>West Coast, Norway</h3>

<p class="w3-opacity">Roundtrip from $79</p>

<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>

<button class="w3-btn w3-margin-bottom">Buy Tickets</button>

</div>

<div class="w3-half w3-margin-bottom">

<img src="/w3images/mountains2.jpg" alt="Austria" style="width:100%">

<div class="w3-container w3-white">

<h3>Mountains, Austria</h3>

<p class="w3-opacity">One-way from $39</p>

<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>

<button class="w3-btn w3-margin-bottom">Buy Tickets</button>

</div>

<div class="w3-panel w3-padding-16 w3-black w3-opacity w3-card-2 w3-hover-

opacity-off">

<h2>Get the best offers first!</h2>

<p>Join our newsletter.</p>

<input class="w3-input w3-border" type="text" placeholder="Your Email

address">

<button type="button" class="w3-btn w3-red w3-margin-

top">Subscribe</button>

</div>

<h2>Contact</h2>

<p>Let us book your next trip!</p>

<i class="fa fa-map-marker" style="width:30px"></i> Chicago, US<br>

<i class="fa fa-phone" style="width:30px"></i> Phone: +00 151515<br>

<i class="fa fa-envelope" style="width:30px"> </i> Email: [email protected]<br>

<form action="form.asp" target="_blank">

<p><input class="w3-input w3-padding-16 w3-border" type="text"

placeholder="Name" required name="Name"></p>

<p><input class="w3-input w3-padding-16 w3-border" type="text"

placeholder="Email" required name="Email"></p>

<p><input class="w3-input w3-padding-16 w3-border" type="text"

placeholder="Message" required name="Message"></p>

<p><button class="w3-btn w3-padding-large" type="submit">SEND

MESSAGE</button></p>

</form>

</div>

</div>

<footer class="w3-container w3-center w3-opacity w3-margin-bottom">

<div class="w3-xlarge w3-padding-16">

<i class="fa fa-facebook-official w3-hover-text-indigo"></i>

<i class="fa fa-instagram w3-hover-text-purple"></i>

<i class="fa fa-snapchat w3-hover-text-yellow"></i>

<i class="fa fa-pinterest-p w3-hover-text-red"></i>

<i class="fa fa-twitter w3-hover-text-light-blue"></i>

<i class="fa fa-linkedin w3-hover-text-indigo"></i>

</div>
<p>Powered by <a href="http://www.w3schools.com/w3css/default.asp"
target="_blank" class="w3-hover-text-green">w3.css</a></p>

</footer>

// Tabs

function openLink(evt, linkName) {

var i, x, tablinks;

x = document.getElementsByClassName("myLink");

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

x[i].style.display = "none";

tablinks = document.getElementsByClassName("tablink");

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

tablinks[i].className = tablinks[i].className.replace(" w3-red", "");

document.getElementById(linkName).style.display = "block";

evt.currentTarget.className += " w3-red";

// Click on the first tablink on load

document.getElementsByClassName("tablink")[0].click();

</script>

</body>

</html>

37) <!DOCTYPE html>

<html>

<title>W3.CSS Template</title>

<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-display-container" style="margin-bottom:50px">

<img src="/w3images/beach3.jpg" style="width:100%">

<div class="w3-display-bottomleft w3-container w3-amber w3-hover-orange w3-

hide-small"

style="bottom:10%;opacity:0.7;width:70%">

<h2><b>4 Good Reasons<br>For travelling with us</b></h2>

</div>

<div class="w3-row w3-container" style="margin:50px 0">

<div class="w3-half w3-container">

<div class="w3-topbar w3-border-amber w3-padding-top">

<img src="/w3images/cellphone.jpg" style="width:100%">

<h2>Smart Vacation</h2>

<p>Full vacation control from your cell phone.</p>

</div>

<div class="w3-half w3-container">

<div class="w3-topbar w3-border-amber w3-padding-top">

<h2>Super Offers</h2>

<p>Up to 50% offers. Always 25% student offers.</p>

</div>

<div class="w3-row w3-container" style="margin:50px 0">

<div class="w3-half w3-container">

<div class="w3-topbar w3-border-orange w3-padding-top">

<img src="/w3images/truck.jpg" style="width:100%">

<h2>Car Rental Included</h2>

<p>Wherever you travel our car rental is included.</p>

</div>

<div class="w3-half w3-container">

<div class="w3-topbar w3-border-orange w3-padding-top">

<img src="/w3images/nowornever.jpg" style="width:100%">

<h2>Realize Your Dreams</h2>

<p>Don't wait until it is to late.</p>

</div>

</body>
</html>

38) <!DOCTYPE html>

<html>

<title>W3.CSS Template</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://cdnjs.cloudflare.com/ajax/libs/font-

awesome/4.7.0/css/font-awesome.min.css">

<body class="w3-content" style="max-width:1200px">

<div class="w3-container w3-section">

<i class="w3-xlarge fa fa-bars"></i>

</div>

<div class="w3-half w3-container">

<h1 class="w3-xxlarge w3-text-light-grey">Hello</h1>

<h1 class="w3-xxlarge w3-text-grey">We are</h1>

<h1 class="w3-jumbo">InShock</h1>

</div>

<div class="w3-half w3-container w3-xlarge w3-text-grey">

<p class="">We build design teams

- we break things down and build it better

- we deliver the best of solutions</p>

<p>InShock means powerfull simplicity</p>

</div>

<div class="w3-container w3-section w3-text-grey">

<h4>MOST RECENT WORK:</h4>

</div>

<div class="w3-half w3-container">

<img src="/w3images/house1.jpg" style="width:100%">

</div>

<div class="w3-half w3-container">

<img src="/w3images/house_arch.jpg" style="width:100%">

<p class="w3-xlarge w3-text-grey">

Demos, Logos, Reports, Names, Events, Media, Wordpress, Google, Books,

Optimisations</p>

</div>

<div class="w3-row w3-section">

<div class="w3-third w3-container w3-black w3-large" style="height:250px">

<h2>Contact Info</h2>

<p><i class="fa fa-map-marker" style="width:30px"></i> Chicago, US</p>

<p><i class="fa fa-phone" style="width:30px"></i> Phone: +00 151515</p>

<p><i class="fa fa-envelope" style="width:30px"> </i> Email:

[email protected]</p>
</div>

<div class="w3-third w3-center w3-large w3-dark-grey w3-text-white"

style="height:250px">

<h2>Contact Us</h2>

<p>If you have an idea.</p>

<p>What are you waiting for?</p>

</div>

<div class="w3-third w3-center w3-large w3-grey w3-text-white"

style="height:250px">

<i class="w3-xlarge fa fa-facebook-official"></i><br>

<i class="w3-xlarge fa fa-pinterest-p"></i><br>

<i class="w3-xlarge fa fa-twitter"></i><br>

<i class="w3-xlarge fa fa-flickr"></i><br>

<i class="w3-xlarge fa fa-linkedin"></i>

</div>

<div class="w3-container w3-text-grey">

<p>Powered by <a href="http://www.w3schools.com/w3css/default.asp"

target="_blank">w3.css</a></p>

</div>

</body>

</html>

39) <!DOCTYPE html>

<html>

<title>W3.CSS Template</title>
<meta charset="UTF-8">

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

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">

<body class="w3-content" style="max-width:1300px">

<div class="w3-half w3-black w3-container w3-center" style="height:700px">

</div>

<a href="#" class="w3-btn w3-btn-block w3-hover-blue-grey w3-padding-

16">Home</a>

<a href="#work" class="w3-btn w3-btn-block w3-hover-teal w3-padding-

16">My Work</a>

<a href="#work" class="w3-btn w3-btn-block w3-hover-dark-grey w3-padding-

16">Resume</a>

<a href="#contact" class="w3-btn w3-btn-block w3-hover-brown w3-padding-

16">Contact</a>

</div>

<div class="w3-half w3-blue-grey w3-container" style="height:700px">

<div class="w3-padding-64 w3-center">

<h1>About Me</h1>

<img src="/w3images/avatar3.png" class="w3-margin w3-circle" alt="Person"

style="width:50%">

<div class="w3-left-align w3-padding-xxlarge">

<p>Lorem ipusm sed vitae justo condimentum, porta lectus vitae, ultricies
congue gravida diam non fringilla.</p>

</div>

<div class="w3-half w3-light-grey w3-center" style="min-height:800px"

id="work">

<p>Some of my latest projects.</p>

</div>

<img src="/w3images/coffee.jpg" style="width:100%">

</div>

<img src="/w3images/workbench.jpg" style="width:100%">

</div>

<div class="w3-row w3-hide-small">

</div>

<img src="/w3images/coffee.jpg" style="width:100%">

</div>

<div class="w3-row w3-hide-small">

<img src="/w3images/sound.jpg" style="width:100%">

</div>

<img src="/w3images/workbench.jpg" style="width:100%">

</div>

</div><br>

<p>Just call me awesome.</p>

</div>

<div class="w3-half w3-indigo w3-container" style="min-height:800px">

<div class="w3-padding-64 w3-center">

<h2>Resume</h2>

<p>A draft from my CV</p>

<div class="w3-container w3-responsive">

<tr>

<th>Title</th>
<th>Where</th>

</tr>

<td>The rest is history..</td>

<td>Lorem ipsum</td>

</tr>

<tr>

<td>Started my own company</td>

<td>My Garage</td>

</tr>

<td>Started working for Lorem</td>

<td>London, UK</td>

</tr>

<tr>

<td>Degree in Bachelor of Design</td>

<td>Harvard, USA</td>

</tr>

<td>Degree in Bachelor of Business</td>

<td>RMIT University, Melbourne, Australia</td>

</tr>

<td>Degree in Bachelor of Business</td>

<td>RMIT University, Melbourne, Australia</td>

</tr>

</table>

</div>

<div class="w3-row" id="contact">

<div class="w3-half w3-dark-grey w3-container w3-center" style="height:700px">

<h1>Swing By</h1>

</div>

<p>..for a cup of coffee, or whatever.</p>

<p>Chicago, US</p>

<p>[email protected]</p>

</div>

<div class="w3-half w3-teal w3-container" style="height:700px">

<h1>Contact</h1>

<p class="w3-opacity">GET IN TOUCH</p>

<form class="w3-container w3-card-2 w3-padding-32 w3-white"

action="form.asp" target="_blank">

<input class="w3-input" style="width:100%;" type="text" required

name="Name">

</div>

<label>Email</label>

<input class="w3-input" style="width:100%;" type="text" required

name="Email">

</div>

<label>Message</label>

<input class="w3-input" style="width:100%;" type="text" required

name="Message">

</div>

<button type="submit" class="w3-btn w3-padding w3-right">Send</button>

</form>

</div>

<footer class="w3-container w3-black w3-padding-16">

<p>Powered by <a href="http://www.w3schools.com/w3css/default.asp"
target="_blank">w3.css</a></p>

</footer>

</body>

</html>

40) <!DOCTYPE html>

<html>

<title>W3.CSS Template</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://cdnjs.cloudflare.com/ajax/libs/font-

awesome/4.7.0/css/font-awesome.min.css"><style>

html,body,h1,h2,h3,h4,h5 {font-family: "RobotoDraft", "Roboto", sans-serif;}

.w3-sidenav a {padding:16px;}

</style>

<body>

<nav class="w3-sidenav w3-collapse w3-white w3-animate-left w3-card-2" style="z-

index:3;width:320px;" id="mySidenav">

<a href="javascript:void(0)" class="w3-border-bottom w3-large"><img

src="http://www.w3schools.com/images/w3schools.png" style="width:60%;"></a>

<a href="javascript:void(0)" onclick="w3_close()" title="Close Sidemenu"

class="w3-hide-large w3-closenav w3-large">Close <i class="fa fa-

remove"></i></a>

<a href="javascript:void(0)" class="w3-dark-grey w3-btn w3-hover-black w3-left-

align" onclick="document.getElementById('id01').style.display='block'">New
Message <i class="w3-padding-left fa fa-pencil"></i></a>

<a id="myBtn" onclick="myFunc('Demo1')" href="javascript:void(0)"><i

class="fa fa-inbox w3-padding-right"></i>Inbox (3)<i class="w3-padding-left fa fa-
caret-down"></i></a>

<div id="Demo1" class="w3-accordion-content w3-animate-left">

<a href="javascript:void(0)" class="w3-border-bottom test w3-hover-light-grey"

onclick="openMail('Borge');w3_close();" id="firstTab">

<img class="w3-round w3-margin-right" src="/w3images/avatar3.png"

style="width:15%;"><span class="w3-opacity w3-large">Borge Refsnes</span>

<h6>Subject: Remember Me</h6>

<p>Hello, i just wanted to let you know that i'll be home at...</p>

</div>

</a>

<a href="javascript:void(0)" class="w3-border-bottom test w3-hover-light-grey"

onclick="openMail('Jane');w3_close();">

<img class="w3-round w3-margin-right" src="/w3images/avatar5.png"

style="width:15%;"><span class="w3-opacity w3-large">Jane Doe</span>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

</div>

</a>

<a href="javascript:void(0)" class="w3-border-bottom test w3-hover-light-grey"

onclick="openMail('John');w3_close();">

<img class="w3-round w3-margin-right" src="/w3images/avatar2.png"

style="width:15%;"><span class="w3-opacity w3-large">John Doe</span>

<p>Welcome!</p>

</div>

</a>

</div>

<a href="javascript:void(0)"><i class="fa fa-paper-plane w3-padding-

right"></i>Sent</a>

<a href="javascript:void(0)"><i class="fa fa-hourglass-end w3-padding-

right"></i>Drafts</a>

<a href="javascript:void(0)"><i class="fa fa-trash w3-padding-

right"></i>Trash</a>

</nav>

<div id="id01" class="w3-modal" style="z-index:4">

<div class="w3-modal-content w3-animate-zoom">

<div class="w3-container w3-padding w3-red">

</div>

<input class="w3-input w3-border w3-hover-shadow w3-margin-bottom"

type="text">

<input class="w3-input w3-border w3-hover-shadow w3-margin-bottom"

type="text">

<label>Subject</label>

<input class="w3-input w3-border w3-hover-shadow w3-margin-bottom"

type="text">

<input class="w3-input w3-border w3-hover-shadow w3-margin-bottom"

style="height:150px" placeholder="What's on your mind?">

<a class="w3-btn w3-red"

onclick="document.getElementById('id01').style.display='none'">Cancel <i
class="fa fa-remove"></i></a>

<a class="w3-btn w3-right w3-light-grey"

onclick="document.getElementById('id01').style.display='none'">Send <i
class="fa fa-paper-plane"></i></a>

</div>

</div>
</div>

<div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()"

style="cursor:pointer" title="Close Sidemenu" id="myOverlay"></div>

<div class="w3-main" style="margin-left:320px;">

<i class="fa fa-bars w3-opennav w3-hide-large w3-xlarge w3-margin-left w3-

margin-top" onclick="w3_open()"></i>

<a href="javascript:void(0)" class="w3-hide-large w3-red w3-btn w3-right w3-

margin-top w3-margin-right"
onclick="document.getElementById('id01').style.display='block'"><i class="fa fa-
pencil"></i></a>

<div id="Borge" class="w3-container person">

<br>

<img class="w3-round w3-animate-top" src="/w3images/avatar3.png"

style="width:20%;">

<h5 class="w3-opacity">Subject: Remember Me</h5>

<h4><i class="fa fa-clock-o"></i> From Borge Refsnes, Sep 27, 2015.</h4>

<a class="w3-btn w3-light-grey">Reply<i class="w3-padding-left fa fa-mail-

reply"></i></a> <a class="w3-btn w3-light-grey">Forward<i class="w3-padding-
left fa fa-arrow-right"></i></a>

<hr>

<p>Hello, i just wanted to let you know that i'll be home at 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>

<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.
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>

<p>Best Regards, <br>Borge Refsnes</p>

</div>

<div id="Jane" class="w3-container person">

<br>

<img class="w3-round w3-animate-top" src="/w3images/avatar5.png"

style="width:20%;">

<h5 class="w3-opacity">Subject: None</h5>

<h4><i class="fa fa-clock-o"></i> From Jane Doe, Sep 25, 2015.</h4>

<a class="w3-btn w3-light-grey">Reply<i class="w3-padding-left fa fa-mail-

reply"></i></a> <a class="w3-btn w3-light-grey">Forward<i class="w3-padding-
left fa fa-arrow-right"></i></a>

<hr>

<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.
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>

<p>Forever yours,<br>Jane</p>

</div>

<div id="John" class="w3-container person">

<br>

<img class="w3-round w3-animate-top" src="/w3images/avatar2.png"

style="width:20%;">

<h5 class="w3-opacity">Subject: None</h5>

<h4><i class="fa fa-clock-o"></i> From John Doe, Sep 23, 2015.</h4>

<a class="w3-btn w3-light-grey">Reply<i class="w3-padding-left fa fa-mail-

reply"></i></a> <a class="w3-btn w3-light-grey">Forward<i class="w3-padding-
left fa fa-arrow-right"></i></a>

<hr>

<p>Welcome.</p>

</div>

var openInbox = document.getElementById("myBtn");

openInbox.click();

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";

}
function myFunc(id) {

var x = document.getElementById(id);

if (x.className.indexOf("w3-show") == -1) {

x.className += " w3-show";

x.previousElementSibling.className += " w3-red";

} else {

x.className = x.className.replace(" w3-show", "");

x.previousElementSibling.className =

x.previousElementSibling.className.replace(" w3-red", "");

openMail("Borge")

function openMail(personName) {

var i;

var x = document.getElementsByClassName("person");

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

x[i].style.display = "none";

x = document.getElementsByClassName("test");

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

x[i].className = x[i].className.replace(" w3-light-grey", "");

document.getElementById(personName).style.display = "block";

event.currentTarget.className += " w3-light-grey";

}

</script>

var openTab = document.getElementById("firstTab");

openTab.click();

</script>

</body>

</html>

41) <!DOCTYPE html>

<html>

<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="https://cdnjs.cloudflare.com/ajax/libs/font-

awesome/4.3.0/css/font-awesome.min.css">

<body>

<nav class="w3-sidenav w3-white w3-card-2 w3-animate-left" style="display:none"

id="mySidenav">

<h1 class="w3-xxxlarge w3-text-teal">Side Navigation</h1>

<a href="javascript:void(0)" onclick="w3_close()" class="w3-closenav w3-
xxxlarge w3-text-theme">Close <i class="fa fa-remove"></i></a>

<a href="javascript:void(0)">Link 1</a>

<a href="javascript:void(0)">Link 2</a>

<a href="javascript:void(0)">Link 3</a>

<a href="javascript:void(0)">Link 4</a>

<a href="javascript:void(0)">Link 5</a>

</nav>

<header class="w3-container w3-theme w3-padding" id="myHeader">

<i onclick="w3_open()" class="fa fa-bars w3-xlarge w3-opennav"></i>

<h4>BEAUTIFUL RESPONSIVE WEB SITES</h4>

<h1 class="w3-xxxlarge w3-animate-bottom">BUILT WITH W3.CSS</h1>

<button class="w3-btn w3-xlarge w3-dark-grey w3-hover-light-grey"

onclick="document.getElementById('id01').style.display='block'" style="font-
weight:900;">LEARN W3.CSS</button>

</div>

</header>

<div id="id01" class="w3-modal">

<div class="w3-modal-content w3-card-8 w3-animate-top">

<header class="w3-container w3-theme-l1">

<h4>Oh snap! We just showed you a modal..</h4>

<h5>Because we can <i class="fa fa-smile-o"></i></h5>

</header>

<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-theme-l1">

<p>Modal footer</p>

</footer>

</div>

<div class="w3-row-padding w3-center w3-margin-top">

<div class="w3-card-2 w3-padding-top" style="min-height:460px">

<h4>Responsive</h4><br>

<i class="fa fa-desktop w3-margin-bottom w3-text-theme" style="font-

size:120px"></i>

<p>Built-in responsiveness</p>

<p>Mobile first fluid grid</p>

<p>Fits any screen sizes</p>

<p>PC Tablet and Mobile</p>

</div>
</div>

<div class="w3-card-2 w3-padding-top" style="min-height:460px">

<h4>Standard CSS</h4><br>

<i class="fa fa-css3 w3-margin-bottom w3-text-theme" style="font-

size:120px"></i>

<p>Standard CSS only</p>

<p>Easy to learn</p>

<p>No need for jQuery</p>

<p>No JavaScript library</p>

</div>

<div class="w3-card-2 w3-padding-top" style="min-height:460px">

<h4>Design</h4><br>

<i class="fa fa-diamond w3-margin-bottom w3-text-theme" style="font-

size:120px"></i>

<p>Paper like design</p>

<p>Bold colors and shadows</p>

<p>Equal across platforms</p>

<p>Equal across devices</p>

</div>

</div>
<div class="w3-container">

<hr>

<h2>Color Classes</h2>

</div>

<div class="w3-col w3-container m2 w3-red"><p>Red</p></div>

<div class="w3-col w3-container m2 w3-blue"><p>Blue</p></div>

<div class="w3-col w3-container m2 w3-blue-grey"><p>Blue Grey</p></div>

<div class="w3-col w3-container m2 w3-teal"><p>Teal</p></div>

<div class="w3-col w3-container m2 w3-yellow"><p>Yellow</p></div>

<div class="w3-col w3-container m2 w3-orange"><p>Orange</p></div>

</div>

<hr>

<h2>Built-In Responsiveness</h2>

<p class="w3-large">Resize the page to see the effect!</p>

</div>

<br>

<div class="w3-row w3-border">

<div class="w3-half w3-container w3-blue w3-border">

<p>The w3-half class uses half (50%) of the screen window.</p>

<p>On small screens (max 600 pixels) it automatically resizes to full screen
width.</p>

</div>

<div class="w3-half w3-container">

</div>

<br>

<div class="w3-row w3-border">

<div class="w3-third w3-container w3-green">

<h5>w3-third</h5>

<p>The w3-third class uses one third (33.33%) of the screen widow.</p>

<p>On small screens (max 600 pixels) it automatically resizes to full screen
width.</p>

</div>

<div class="w3-third w3-container">

<h5>w3-third</h5>

</div>

<div class="w3-third w3-container">

<h5>w3-third</h5>

</div>

<br>

<div class="w3-row w3-border">

<div class="w3-quarter w3-container w3-red">

<h5>w3-quarter</h5>

<p>The w3-quarter class uses one quarter (25%) of the screen window.</p>

<p>On small screens (max 600 pixels) it automatically resizes to full screen
width.</p>

</div>

<div class="w3-quarter w3-container">

<h5>w3-quarter</h5>

</div>

<div class="w3-quarter w3-container">

<h5>w3-quarter</h5>

</div>

<div class="w3-quarter w3-container">

<h5>w3-quarter</h5>

</div>

<h2>Containers</h2>

<p>Use containers to create headers, sections and footers.</p>

</div>

<header class="w3-container w3-blue-grey">

<h2>Header</h2>

</header>

<div class="w3-padding w3-white">

<h2>London</h2>

<p>London is the capital city of England. It is the most populous city in the United
Kingdom,

with a metropolitan area of over 13 million inhabitants.</p>

<p>Standing on the River Thames, London has been a major settlement for two
millennia,

its history going back to its founding by the Romans, who named it
Londinium.</p>

<p>By the way, you can add a close icon to all containers if you want the ability to
hide them. Look to your right!</p>

</div>

<footer class="w3-container w3-blue-grey">

<h5>Footer</h5>

<p class="w3-opacity">Footer information goes here</p>

</footer>

<hr>

<h2>Color Themes</h2>

<p>The color themes have been designed to work harmoniously with each
other.</p>

</div>

<div class="w3-card white">

<div class="w3-container w3-indigo">

<h3>Theme Indigo</h3>

</div>

<h3 class="w3-text-indigo">Movies 2014</h3>

</div>

<ul class="w3-ul w3-border-top">

<li>

<h3>Frozen</h3>

<p>The response to the animations was ridiculous</p>

</li>

<li>

<h3>The Fault in Our Stars</h3>

<p>Touching, gripping and genuinely well made</p>

</li>

<li>

<h3>The Avengers</h3>

<p>A huge success for Marvel and Disney</p>

</li>

</ul>

<div class="w3-container w3-indigo w3-large"><span class="w3-

right">Next</span></div>

</div>

</div>
<div class="w3-half">

<div class="w3-card white">

<div class="w3-container w3-theme">

<h3>Theme</h3>

</div>

<h3 class="w3-text-theme">Movies 2014</h3>

</div>

<ul class="w3-ul w3-border-top">

<li>

<h3>Frozen</h3>

<p>The response to the animations was ridiculous</p>

</li>

<li>

<h3>The Fault in Our Stars</h3>

<p>Touching, gripping and genuinely well made</p>

</li>

<li>

<h3>The Avengers</h3>

<p>A huge success for Marvel and Disney</p>

</li>

</ul>

<div class="w3-container w3-theme w3-large"><span class="w3-

right">Next</span></div>

</div>

</div>
<div class="w3-container w3-center">

<hr>

<h3>Paper-like Cards with Shadows</h3>

</div>

<img src="/w3images/car.jpg" alt="Car" style="width:100%">

</div>

<img src="/w3images/car.jpg" alt="Car" style="width:100%">

</div>

</div>
<div class="w3-third">

<img src="/w3images/car.jpg" alt="Car" style="width:100%">

</div>

<hr>

<h2>Tables</h2>

<p w3-class="w3-large">Don't worry. W3.CSS takes care of your tables.</p>

</div>

<div class="w3-responsive w3-card-4">

<table class="w3-table w3-striped w3-bordered">

<thead>

<th>First Name</th>

<th>Points</th>

</tr>

</thead>

<td>Smith</td>

</tr>

<td>Jackson</td>

</tr>

<tr>

<td>Johnson</td>

</tr>

</tbody>

</table>

</div>

<hr>

<h2 class="w3-center">Forms and Lists</h2>

</div>

<input class="w3-input" type="text" required>

<label class="w3-label w3-validate">Name</label>

</div>

<input class="w3-input" type="text" required>

<label class="w3-label w3-validate">Email</label>

</div>

<input class="w3-input" type="text" required>

<label class="w3-label">Subject</label>

</div>

<input id="milk" class="w3-check" type="checkbox" checked="checked">

<br>

<input id="sugar" class="w3-check" type="checkbox">

<label class="w3-validate">Sugar</label>

<br>

<input id="lemon" class="w3-check" type="checkbox" disabled>

<label class="w3-validate">Lemon (Disabled)</label>

<input id="male" class="w3-radio" type="radio" name="gender" value="male"

checked>

<br>

<input id="female" class="w3-radio" type="radio" name="gender"

value="female">

<label class="w3-validate">Female</label>

<br>

<input id="unknown" class="w3-radio" type="radio" name="gender" value=""

disabled>

<label class="w3-validate"> Don't know (Disabled)</label>

</div>

</form>

</div>

<div class="w3-card-4 w3-container">

<h2>Lists</h2>

<ul class="w3-ul w3-margin-bottom">

</ul>
<br>

<ul class="w3-ul w3-border w3-hoverable">

<li>Steve</li>

</ul>

<br>

</div>

<hr>

<h2 class="w3-center">Progress Bars</h2>

<p>The <strong><a href="w3css_progressbar.asp">w3-

progressbar</a></strong>

class creates progress bars:</p>

<div class="w3-progress-container" style="height:30px;">

<div id="myBar" class="w3-progressbar w3-theme" style="width:1%"></div>

</div><br>

<p class="w3-right" id="demoprgr">1%</p>

<button class="w3-btn w3-theme" onclick="move()">Click Me</button>

</div>

<hr>
<h2 class="w3-center">Slideshows</h2>

<div class="w3-content" style="max-width:800px;position:relative">

<img class="mySlides w3-animate-opacity" src="/w3images/fjords.jpg"

style="width:100%">

<img class="mySlides w3-animate-opacity" src="/w3images/lights.jpg"

style="width:100%">

<img class="mySlides w3-animate-opacity" src="/w3images/mountains.jpg"

style="width:100%">

<img class="mySlides w3-animate-opacity" src="/w3images/forest.jpg"

style="width:100%">

<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>

<hr>

<h2 class="w3-center">Navigation</h2>

<ul class="w3-navbar w3-theme">

<li><a class="w3-dark-grey w3-padding-16"

href="javascript:void(0)">Home</a></li>

<li><a class="w3-padding-16" href="javascript:void(0)">Link 1</a></li>

<li><a class="w3-padding-16" href="javascript:void(0)">Link 2</a></li>

<li class="w3-dropdown-hover">
<a class="w3-padding-16" href="javascript:void(0)">Dropdown <i class="fa fa-
caret-down"></i></a>

<div class="w3-dropdown-content w3-card-4">

<a class="w3-padding-16" href="javascript:void(0)">Link 1</a>

<a class="w3-padding-16" href="javascript:void(0)">Link 2</a>

<a class="w3-padding-16" href="javascript:void(0)">Link 3</a>

</div>

</li>

<li class="w3-right"><a class="w3-padding-16" href="javascript:void(0)"><i

class="fa fa-search"></i></a></li>

</ul>

<hr>

<h2 class="w3-center">Accordions</h2>

<button onclick="myAccFunc('Demo1')" class="w3-padding-16 w3-hover-dark-

grey w3-btn-block w3-left-align">Open Section 1</button>

<div id="Demo1" class="w3-accordion-content">

</div>

<button onclick="myAccFunc('Demo2')" class="w3-padding-16 w3-hover-dark-

grey w3-btn-block w3-left-align">Open Section 2</button>

<div id="Demo2" class="w3-accordion-content">

<a class="w3-text-black w3-padding-16" href="javascript:void(0)">Link 1</a>

<a class="w3-text-black w3-padding-16" href="javascript:void(0)">Link 3</a>

</div>

<button onclick="myAccFunc('Demo3')" class="w3-padding-16 w3-hover-dark-

grey w3-btn-block w3-left-align">Open Section 3</button>

<div id="Demo3" class="w3-accordion-content w3-border">

<p>Accordion with Images:</p>

<img src="/w3images/fjords.jpg" style="width:30%;" class="w3-animate-

zoom">

<p>Trolltunga, Norway</p>

</div>

<hr>

<ul class="w3-navbar w3-light-grey">

<li><a class="w3-btn testbtn" onclick="openCity(event,

'London')">London</a></li>

<li><a class="w3-btn testbtn" onclick="openCity(event, 'Paris')">Paris</a></li>

<li><a class="w3-btn testbtn" onclick="openCity(event,

'Tokyo')">Tokyo</a></li>

</ul>
<div id="London" class="w3-container city w3-animate-opacity">

<h2>London</h2>

<p>London is the capital city of England.</p>

<p>It is the most populous city in the United Kingdom, with a metropolitan area of
over 13 million inhabitants.</p>

</div>

<div id="Paris" class="w3-container city w3-animate-opacity">

<h2>Paris</h2>

<p>Paris is the capital of France.</p>

<p>The Paris area is one of the largest population centers in Europe, with more
than 12 million inhabitants.</p>

</div>

<div id="Tokyo" class="w3-container city w3-animate-opacity">

<h2>Tokyo</h2>

<p>Tokyo is the capital of Japan.</p>

<p>It is the center of the Greater Tokyo Area, and the most populous metropolitan
area in the world.</p>

</div>

<hr>

<h2 class="w3-center">Buttons</h2>

<br>
<a class="w3-btn">Button</a>

<a class="w3-btn w3-theme">Button</a>

<a class="w3-btn w3-disabled">Button</a>

<a class="w3-btn-floating w3-teal"><i class="fa fa-plus"></i></a>

<a class="w3-btn-floating w3-theme"><i class="fa fa-plus"></i></a>

<a class="w3-btn-floating w3-disabled"><i class="fa fa-plus"></i></a>

<a class="w3-btn-floating-large w3-teal"><i class="fa fa-plus"></i></a>

<a class="w3-btn-floating-large w3-theme"><i class="fa fa-plus"></i></a>

<a class="w3-btn-floating-large w3-disabled"><i class="fa fa-plus"></i></a>

</div>

<br>

<button class="w3-btn w3-theme w3-large">Dropdown <i class="fa fa-caret-

down"></i></button>

<div class="w3-dropdown-content w3-light-grey w3-grey w3-left-align">

<a href="javascript:void(0)">Link 1</a>

<a href="javascript:void(0)">Link 2</a>

<a href="javascript:void(0)">Link 3</a>

</div>

</div>
<hr>

<h2>Pagination</h2>

<ul class="w3-pagination w3-padding-32">

<li><a class="w3-theme" href="javascript:void(0)">1</a></li>

</ul>

</div>

<br>

<footer class="w3-container w3-theme-dark w3-padding-16">

<h3>Footer</h3>

<p>Powered by <a href="http://www.w3schools.com/w3css/default.asp"

target="_blank">w3.css</a></p>

<div style="position:relative;bottom:55px;" class="w3-tooltip w3-right">

<span class="w3-text w3-theme-light w3-padding">Go To Top</span>

<a class="w3-text-white" href="#myHeader"><span class="w3-xlarge">

<i class="fa fa-chevron-circle-up"></i></span></a>

</div>

<p>Remember to check out our <a href="w3css_references.asp" class="w3-btn

w3-theme-light" target="_blank">W3.CSS Reference</a></p>
</footer>

// Side navigation

function w3_open() {

var x = document.getElementById("mySidenav");

x.style.width = "100%";

x.style.textAlign = "center";

x.style.fontSize = "50px";

x.style.paddingTop = "10%";

x.style.display = "block";

function w3_close() {

document.getElementById("mySidenav").style.display = "none";

// Tabs

function openCity(evt, cityName) {

var i;

var x = document.getElementsByClassName("city");

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

x[i].style.display = "none";

var activebtn = document.getElementsByClassName("testbtn");

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

activebtn[i].className = activebtn[i].className.replace(" w3-dark-grey", "");

document.getElementById(cityName).style.display = "block";

evt.currentTarget.className += " w3-dark-grey";

var mybtn = document.getElementsByClassName("testbtn")[0];

mybtn.click();

// Accordions

function myAccFunc(id) {

var x = document.getElementById(id);

if (x.className.indexOf("w3-show") == -1) {

x.className += " w3-show";

x.previousElementSibling.className += " w3-dark-grey";

} else {

x.className = x.className.replace(" w3-show", "");

x.previousElementSibling.className =

x.previousElementSibling.className.replace(" w3-dark-grey", "");

// Slideshows

var slideIndex = 1;

function plusDivs(n) {
slideIndex = slideIndex + n;

showDivs(slideIndex);

function showDivs(n) {

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";

showDivs(1);

// Progress Bars

function move() {

var elem = document.getElementById("myBar");

var width = 1;

var id = setInterval(frame, 10);

function frame() {

if (width == 100) {

clearInterval(id);

} else {

width++;
elem.style.width = width + '%';

document.getElementById("demoprgr").innerHTML = width * 1 + '%';

</script>

</body>

</html>

The Problem and Review of Related Literature
100% (3)
The Problem and Review of Related Literature
51 pages
Website Making
No ratings yet
Website Making
14 pages
Masters Among Us: An Exploration of Supernal Encounters and Miraculous Phenomena
From Everand
Masters Among Us: An Exploration of Supernal Encounters and Miraculous Phenomena
Thomas Curley
No ratings yet
Chubby Girls Don't Cheer
From Everand
Chubby Girls Don't Cheer
Kelly Clinger
No ratings yet
Burps From My Butt
From Everand
Burps From My Butt
Marilyn Bricklin Lebovitz
No ratings yet
HTML _PROJECT_X
No ratings yet
HTML _PROJECT_X
5 pages
Stranger on the Plane
From Everand
Stranger on the Plane
Janet Garber
No ratings yet
Silver Linings in Dark Clouds
From Everand
Silver Linings in Dark Clouds
Silverline Dennis Dic-Fiberesima
No ratings yet
Jakey's Fork
From Everand
Jakey's Fork
Richard Little
No ratings yet
Space Princess
From Everand
Space Princess
Meghan Rice
No ratings yet
Evolution of Computer (Band)
No ratings yet
Evolution of Computer (Band)
2 pages
Movie Ticket Booking Website Report
No ratings yet
Movie Ticket Booking Website Report
31 pages
Words Matter
From Everand
Words Matter
Robert Byrum
No ratings yet
Staubs and Ditchwater: A Friendly and Useful Introduction to Hillfolks' Hoodoo
From Everand
Staubs and Ditchwater: A Friendly and Useful Introduction to Hillfolks' Hoodoo
H. Byron Ballard
3/5 (5)
Future-Proofing Manufacturing & the Supply Chain Post COVID-19
From Everand
Future-Proofing Manufacturing & the Supply Chain Post COVID-19
Lisa Anderson
No ratings yet
Moons Rising
From Everand
Moons Rising
Blythe Ayne
No ratings yet
Heavy Weather
From Everand
Heavy Weather
Ness Lobo
No ratings yet
Little Boy Stories From Tiger Scrub
From Everand
Little Boy Stories From Tiger Scrub
Stephen Guest
No ratings yet
In Between Worlds: A collection of poems
From Everand
In Between Worlds: A collection of poems
Carla M Peters
No ratings yet
The Urban Commons Cookbook: Strategies and Insights for Creating and Maintaining Urban Commons
From Everand
The Urban Commons Cookbook: Strategies and Insights for Creating and Maintaining Urban Commons
Mary Dellenbaugh-Losse
No ratings yet
Son of the sixth
From Everand
Son of the sixth
Richard John Ellicott
No ratings yet
Wrestleville: The Pro Wrestling Vault - Volume 2
From Everand
Wrestleville: The Pro Wrestling Vault - Volume 2
Vinny Berry
No ratings yet
Poetic Insights
From Everand
Poetic Insights
Laura Buck
No ratings yet
Poets
From Everand
Poets
Jose Trejo Maya
No ratings yet
ABC Dogs - Learn the Alphabet with Dogs!
From Everand
ABC Dogs - Learn the Alphabet with Dogs!
P.G. Hibbert
No ratings yet
Lone Wolf
From Everand
Lone Wolf
Robin Mason
No ratings yet
Work
No ratings yet
Work
10 pages
Tuto Bootstrap
No ratings yet
Tuto Bootstrap
15 pages
Unicorns Are Real!: Kindergarten Level Reading Book
From Everand
Unicorns Are Real!: Kindergarten Level Reading Book
Tiffany Haag
No ratings yet
Sudoku A Game of Mathematicians 320 Puzzles Medium Difficulty
From Everand
Sudoku A Game of Mathematicians 320 Puzzles Medium Difficulty
Kelly Johnson
No ratings yet
Poems For The Weeping Kind
From Everand
Poems For The Weeping Kind
Althea Davis
No ratings yet
Oklahoma Night Before Christmas
From Everand
Oklahoma Night Before Christmas
Carolyn Macy
No ratings yet
Manual Slideshow
No ratings yet
Manual Slideshow
66 pages
Spirituality and Sexuality Within Marriage: A Bond Designed and Created by God!
From Everand
Spirituality and Sexuality Within Marriage: A Bond Designed and Created by God!
Linda M. Horne
No ratings yet
The Hero Inside: What We Can Learn From Heroes
From Everand
The Hero Inside: What We Can Learn From Heroes
Nicolai Schümann
No ratings yet
Life on the Ranch: Volume II: A Race against Time
From Everand
Life on the Ranch: Volume II: A Race against Time
Mary Ann Sadler
No ratings yet
On the Wallaby Track: Essential Australian Words and Phrases
From Everand
On the Wallaby Track: Essential Australian Words and Phrases
Laine Cunningham
No ratings yet
Chasing Normal: My Peer Group Design for Living with Bipolar
From Everand
Chasing Normal: My Peer Group Design for Living with Bipolar
Michael J. Hoffman
No ratings yet
To Live Again
From Everand
To Live Again
Jeffrey W. Massey
No ratings yet
Apotheosis
From Everand
Apotheosis
Nicholas Crivac
No ratings yet
The Write Direction: The Ultimate Guide to Writing your Memoir
From Everand
The Write Direction: The Ultimate Guide to Writing your Memoir
Rodney Walker
No ratings yet
A Teacher's Guide to Celebrating Positive Racial Identity
From Everand
A Teacher's Guide to Celebrating Positive Racial Identity
Bianca Sapara-Grant
No ratings yet
Survival From The Start: The Misadventures of Mekkâr
From Everand
Survival From The Start: The Misadventures of Mekkâr
Saavo
No ratings yet
Trumpas the Eccentric Elephant: An Election Story
From Everand
Trumpas the Eccentric Elephant: An Election Story
Michael D. Trout
No ratings yet
beyond pretty
From Everand
beyond pretty
B.C. Hatch
No ratings yet
A Children's Fantasy: A Book of Poetry
From Everand
A Children's Fantasy: A Book of Poetry
Dana M Friend
No ratings yet
Laughter Is My Superpower: Laughter Is My Superpower
From Everand
Laughter Is My Superpower: Laughter Is My Superpower
Latricia Scriven
No ratings yet
Day 3 Note
No ratings yet
Day 3 Note
14 pages
What Unemployed?
From Everand
What Unemployed?
Diana Leff
No ratings yet
MIKE REILLY Finding My Voice: Tales From IRONMAN, the World's Greatest Endurance Event
From Everand
MIKE REILLY Finding My Voice: Tales From IRONMAN, the World's Greatest Endurance Event
MIKE REILLY
No ratings yet
Spirits n' Chai
From Everand
Spirits n' Chai
D. Allyson Howlett
No ratings yet
Three Gold Coins or Too Young to Die This Rich!: Book 1 of the Mel Dread Series
From Everand
Three Gold Coins or Too Young to Die This Rich!: Book 1 of the Mel Dread Series
John Kaufman
No ratings yet
You Are What You Digest
From Everand
You Are What You Digest
Christine Tara Peterson
No ratings yet
Camisetas
No ratings yet
Camisetas
2 pages
You and Me Dancing to Gershwin
From Everand
You and Me Dancing to Gershwin
Christine Miles
No ratings yet
STORIES FOR WOMEN: PORTRAITS OF HOPE
From Everand
STORIES FOR WOMEN: PORTRAITS OF HOPE
DESIRE MINISTRIES PURE
1/5 (1)
Healthy Thinking: The Way to Healthier Thinking in the Demands on Modern Man
From Everand
Healthy Thinking: The Way to Healthier Thinking in the Demands on Modern Man
Rudolf Steiner
No ratings yet
this is our adventureholic html cod
No ratings yet
this is our adventureholic html cod
7 pages
MODERN WEB DA 15 AUG
No ratings yet
MODERN WEB DA 15 AUG
23 pages
Ridwan
No ratings yet
Ridwan
2 pages
Things - Random
From Everand
Things - Random
kamal m Elkhalil
No ratings yet
Chapter 7-8 - Drilling Bits Cost
No ratings yet
Chapter 7-8 - Drilling Bits Cost
75 pages
Class Guide FOD Class
No ratings yet
Class Guide FOD Class
3 pages
Simotics Ile7 Motors Brochure
No ratings yet
Simotics Ile7 Motors Brochure
8 pages
PDF Pelvic pain management 1st Edition Valovska download
100% (1)
PDF Pelvic pain management 1st Edition Valovska download
55 pages
Boq Est
No ratings yet
Boq Est
4 pages
Organic Fertilizers
No ratings yet
Organic Fertilizers
7 pages
@AutocadPlant3D PT21758 3D Model
No ratings yet
@AutocadPlant3D PT21758 3D Model
24 pages
Flow-Based Anomaly Detection - How and Why It Works Rev1 5
No ratings yet
Flow-Based Anomaly Detection - How and Why It Works Rev1 5
24 pages
Scoring Rubric: Reaction Paper: Perfect Score Is 48+2 50 Student - Beginner (3pt) Developing (6 PTS) Satisfactory (9 PTS) Exemplary (12pts)
No ratings yet
Scoring Rubric: Reaction Paper: Perfect Score Is 48+2 50 Student - Beginner (3pt) Developing (6 PTS) Satisfactory (9 PTS) Exemplary (12pts)
3 pages
Narayan Nagbali Puja in Trimbakeshwar
No ratings yet
Narayan Nagbali Puja in Trimbakeshwar
9 pages
Model Question Paper HDT BP603T
No ratings yet
Model Question Paper HDT BP603T
3 pages
Davao Integrated Port and Stevedoring Services Corporation v. Olvida
No ratings yet
Davao Integrated Port and Stevedoring Services Corporation v. Olvida
4 pages
Ace-Exam-24
No ratings yet
Ace-Exam-24
110 pages
PREPARE 2 Grammar Plus Unit 19 PDF
No ratings yet
PREPARE 2 Grammar Plus Unit 19 PDF
2 pages
Lea Dedame Resume
No ratings yet
Lea Dedame Resume
1 page
Kaspersky NEXT EDR Foundations Tender Requirements 0724 En
No ratings yet
Kaspersky NEXT EDR Foundations Tender Requirements 0724 En
26 pages
Cambridge International AS & A Level: Art & Design 9479/02
No ratings yet
Cambridge International AS & A Level: Art & Design 9479/02
4 pages
Aliens Armageddon Arcade Manual
No ratings yet
Aliens Armageddon Arcade Manual
59 pages
Design of Dairy Processing Plant Stirred Yogurt With The Productivity of 50 000 Tonsyears
No ratings yet
Design of Dairy Processing Plant Stirred Yogurt With The Productivity of 50 000 Tonsyears
54 pages
Fair Phone Presentation
No ratings yet
Fair Phone Presentation
2 pages
Safety Differently Human Factors for a New Era Second Edition Sidney Dekker download
100% (1)
Safety Differently Human Factors for a New Era Second Edition Sidney Dekker download
23 pages
Httpsmymodules - Dtls.unisa - Ac.zapluginfile - Php17819102mod foldercontent0INS3705202024 TL 101 3 B.pdfforcedownload 1
No ratings yet
Httpsmymodules - Dtls.unisa - Ac.zapluginfile - Php17819102mod foldercontent0INS3705202024 TL 101 3 B.pdfforcedownload 1
24 pages
Alma and How She Got Her Name Teachers' Guide
No ratings yet
Alma and How She Got Her Name Teachers' Guide
3 pages
HoABL dealer data
No ratings yet
HoABL dealer data
4 pages
School of Distance Education: Andhra University
No ratings yet
School of Distance Education: Andhra University
2 pages
L 03 Application For Free Patent Agricultural
100% (1)
L 03 Application For Free Patent Agricultural
5 pages
Low Cost Gps Tracker: Application
No ratings yet
Low Cost Gps Tracker: Application
4 pages
Expansion of Osmani International Airport, Sylhet (1St Phase) Rate Analysis
No ratings yet
Expansion of Osmani International Airport, Sylhet (1St Phase) Rate Analysis
8 pages
CLass 09 Qanoon e Shahadat (Law of Evidence)
100% (2)
CLass 09 Qanoon e Shahadat (Law of Evidence)
22 pages