Открыть меню навигации

Загрузить

Пользовательские настройки

Добро пожаловать в Scribd!

Пропустить карусель

Template

Загружено:

100% нашли этот документ полезным (1 голос)

789 просмотров356 страниц

te

Авторское право

© © All Rights Reserved

Доступные форматы

DOCX, PDF, TXT или читайте онлайн в Scribd

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Пожаловаться на этот документ

te

Авторское право:

© All Rights Reserved

Доступные форматы

Скачайте в формате DOCX, PDF, TXT или читайте онлайн в Scribd

Отметить как неприемлемый контент

100% нашли этот документ полезным (1 голос)

789 просмотров356 страниц

Template

Загружено:

te

Авторское право:

© All Rights Reserved

Доступные форматы

Скачайте в формате DOCX, PDF, TXT или читайте онлайн в Scribd

Отметить как неприемлемый контент

Перейти к странице

Вы находитесь на странице: 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 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=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>

<div class="w3-top">
<ul class="w3-navbar w3-black w3-card-2 w3-left-align">

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

<div id="navDemo" class="w3-hide w3-hide-large w3-hide-medium w3-top"
style="margin-top:46px">

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

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

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

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

<div class="w3-third">

<p>Name</p>

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

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

</div>

<div class="w3-third">

<p>Name</p>

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

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

</div>

<div class="w3-third">

<p>Name</p>

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

Name" style="width:60%">

</div>

</div>

</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><b>New York</b></p>

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

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

</div>

</div>

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

<i class="fa fa-check"></i></button>

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

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

mail@mail.com<br>

</div>

<div class="w3-col m6">

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

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

<div class="w3-half">

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

required name="Name">

</div>

<div class="w3-half">

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

required name="Email">

</div>

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

</div>

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

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

<script src="https://maps.googleapis.com/maps/api/js"></script>

<script>

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

function initialize() {

var mapProp = {

center: myCenter,

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

<div class="w3-row">

<div class="w3-half">

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

<div class="w3-half">

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

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

</div>

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

<div class="w3-group">

<label><b>Name</b></label>

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

</div>

<div class="w3-group">

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

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

</div>

<div class="w3-group">

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

<div class="w3-top">

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

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

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

</div>

</div>

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

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

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

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

</div>

</div>

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

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

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

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

</div>

</div>

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

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

<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>
<div class="w3-row-padding">

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

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

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

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

</div>

</div>

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

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

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

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

</div>

</div>

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

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

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

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

</div>

</div>

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

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

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

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

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

<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">Contact</button></p>

</div>

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

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

<h3>Jane Doe</h3>

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

<h3>Mike Ross</h3>

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

<h3>Dan Star</h3>

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

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

<script src="https://maps.googleapis.com/maps/api/js"></script>

<script>

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

function initialize() {

var mapProp = {

center: myCenter,

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

<style>

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

body, html {height: 100%}

.bgimg {

background-image: url('/w3images/forestbridge.jpg');

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>

<div class="w3-display-middle">

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

</div>

</body>

</html>
5) <!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">

<style>

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

</style>

<body class="w3-light-grey">

<!-- w3-content defines a container for fixed size centered content,

and is wrapped around the whole page content, except for the footer in this
example -->

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

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

<h1><b>MY BLOG</b></h1>

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

</header>

<div class="w3-row">

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

<div class="w3-container">

<p>Mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl. Sed
mattis nunc id lorem euismod placerat. Vivamus porttitor magna enim, ac
accumsan tortor cursus at. Phasellus sed ultricies mi non congue ullam corper.
Praesent tincidunt sed

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

<div class="w3-row">

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

<p><button class="w3-btn w3-padding-large w3-white w3-border w3-hover-

border-black"><b>READ MORE </b></button></p>
</div>

<div class="w3-col m4 w3-hide-small">

<p><span class="w3-padding-large w3-right"><b>Comments </b> <span

class="w3-tag">0</span></span></p>

</div>

</div>

</div>

</div>

<hr>

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

<div class="w3-container">

<p>Mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl. Sed
mattis nunc id lorem euismod placerat. Vivamus porttitor magna enim, ac
accumsan tortor cursus at. Phasellus sed ultricies mi non congue ullam corper.
Praesent tincidunt sed

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

<div class="w3-row">

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

<p><button class="w3-btn w3-padding-large w3-white w3-border w3-hover-

border-black"><b>READ MORE </b></button></p>
</div>

<div class="w3-col m4 w3-hide-small">

<p><span class="w3-padding-large w3-right"><b>Comments </b> <span

class="w3-badge">2</span></span></p>

</div>

</div>

</div>

</div>

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

<h4><b>My Name</b></h4>

<p>Just me, myself and I, exploring the universe of uknownment. I have a heart
of love and a interest of lorem ipsum and mauris neque quam blog. I want to share
my world with you.</p>

</div>

</div><hr>

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

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

<h4>Popular Posts</h4>

</div>

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

<li class="w3-padding-16">

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

<li class="w3-padding-16">

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

<li class="w3-padding-16">

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

<h4>Tags</h4>

</div>

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

<p><span class="w3-tag w3-black w3-margin-bottom">Travel</span> <span

class="w3-tag w3-light-grey w3-small w3-margin-bottom">New York</span> <span
class="w3-tag w3-light-grey w3-small w3-margin-bottom">London</span>

<span class="w3-tag w3-light-grey w3-small w3-margin-bottom">IKEA</span>

<span class="w3-tag w3-light-grey w3-small w3-margin-bottom">NORWAY</span>
<span class="w3-tag w3-light-grey w3-small w3-margin-bottom">DIY</span>

<span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Ideas</span>

<span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Baby</span>
<span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Family</span>

<span class="w3-tag w3-light-grey w3-small w3-margin-bottom">News</span>

<span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Clothing</span>
<span class="w3-tag w3-light-grey w3-small w3-margin-
bottom">Shopping</span>

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

bottom">Sports</span> <span class="w3-tag w3-light-grey w3-small w3-margin-
bottom">Games</span>

</p>

</div>

</div>

</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 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=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-top">

<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-right">Mail</div>

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

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

<div class="w3-quarter">

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

<div class="w3-quarter">

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

<div class="w3-quarter">

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

<h3>Cherries, interrupted</h3>

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

<p>What else?</p>

</div>

<div class="w3-quarter">

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

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

<div class="w3-quarter">

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

<div class="w3-quarter">

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

<div class="w3-quarter">

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

<div class="w3-quarter">

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

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

<ul class="w3-pagination">

<li><a class="w3-black" href="#">1</a></li>

<li><a class="w3-hover-black" href="#">2</a></li>

<li><a class="w3-hover-black" href="#">3</a></li>

<li><a class="w3-hover-black" href="#">4</a></li>

<li><a class="w3-hover-black" href="#"></a></li>

</ul>

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

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

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

</div>

<hr>

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

<div class="w3-third">

<h3>FOOTER</h3>

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

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

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

</div>
<div class="w3-third">

<h3>BLOG POSTS</h3>

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

<li class="w3-padding-16">

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

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

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

</p>

</div>

</footer>

</div>

<script>

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

<body class="w3-light-grey">

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

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

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

<div class="w3-center">

<h3>TITLE HEADING</h3>

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

2016</span></h5>

</div>

<div class="w3-justify">

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

<p class="w3-clear"></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>

</div>

</div>

</div>

<hr>

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

<div class="w3-center">

<h3>TITLE HEADING</h3>

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

2016</span></h5>

</div>

<div class="w3-justify">

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

<p class="w3-clear"></p>

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

<div class="w3-row">

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

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

<p>Love hats!!</p>

</div>

</div>

</div>

</div>

</div>

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

<div class="w3-center">

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

</div>

<div class="w3-justify">

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

<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('demo3')"><b>Replies </b> <span class="w3-tag w3-
white">3</span></button></p>

<p class="w3-clear"></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>

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

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

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

<h4>My Name</h4>

<p>Just me, myself and I, exploring the universe of uknownment. I have a

heart of love and a interest of lorem ipsum and mauris neque quam blog. I want to
share my world with you.</p>

</div>

</div>

<hr>

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

<li class="w3-padding-16">

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

<li class="w3-padding-16">

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

<li class="w3-padding-16">

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

<li class="w3-padding-16">

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

</div>

</div>

<hr>

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

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

<h4>Tags</h4>

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

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

</div>

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

<hr>

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

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

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

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

<i onclick="document.getElementById('subscribe').style.display='none'"
class="fa fa-remove w3-xlarge w3-closebtn w3-hover-text-grey w3-margin"></i>

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

</div>

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

<script>

// 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 charset="UTF-8">

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

<div class="w3-top">

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

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

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

catering@catering.com, 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 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=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>

<body class="w3-light-grey">

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

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

<div class="w3-third">

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

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

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

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

<h2>Jane Doe</h2>

</div>
</div>

<div class="w3-container">

<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>ex@mail.com</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>

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

</div>

<p>Illustrator</p>

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

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

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

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

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

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

<div class="w3-container">

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

<div class="w3-container">

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

<div class="w3-container">

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

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

<div class="w3-container">

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

<div class="w3-container">

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

<div class="w3-container">

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

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

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

<h2><b>17.07.2017</b></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">

<div class="w3-content">

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

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

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

id="wedding">

<div class="w3-content">

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

<div class="w3-row">

<div class="w3-half">
<h2>When</h2>

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

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

</div>

<div class="w3-half">

<h2>Where</h2>

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

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

</div>

</div>

</div>

</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 class="w3-xlarge">

<button onclick="document.getElementById('id01').style.display='block'"
class="w3-btn w3-round w3-red w3-opacity w3-hover-opacity-off"
style="padding:8px 60px">RSVP</button>

</p>

</div>

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

<div class="w3-modal-content w3-card-8 w3-animate-zoom w3-padding-jumbo"
style="max-width:600px">

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

<span onclick="document.getElementById('id01').style.display='none'"
class="w3-closebtn w3-hover-text-grey w3-margin">x</span>

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

<div class="w3-row">

<div class="w3-half">

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

</div>

<div class="w3-half">

<button onclick="document.getElementById('id01').style.display='none'"
type="button" class="w3-btn-block w3-red">Can't come</button>

</div>

</div>

</div>

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

<div class="w3-clear"></div>

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

<div class="w3-third">

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

<div class="w3-third">

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

<div class="w3-third">

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

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

<script>

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

<h1>John Doe</h1>

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

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

</div>

</header>

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

<div class="w3-half">

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

<div class="w3-half">

<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="#">Home</a></li>

<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="#">Home</a></li>

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

<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.</p>
<form action="form.asp" target="_blank">

<div class="w3-group">

<label>Name</label>

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

</div>

<div class="w3-group">

<label>Email</label>

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

</div>

<div class="w3-group">

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

<div class="w3-container">

<a href="#" onclick="w3_close()" class="w3-hide-large w3-right w3-jumbo w3-

padding" title="close menu">

<i class="fa fa-remove"></i>

</a>

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

<button class="w3-btn w3-white"><i class="fa fa-diamond w3-margin-

right"></i>Design</button>

<button class="w3-btn w3-white w3-hide-small"><i class="fa fa-photo w3-

margin-right"></i>Photos</button>

<button class="w3-btn w3-white w3-hide-small"><i class="fa fa-map-pin w3-

margin-right"></i>Art</button>

</div>

</header>

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

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

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

</div>

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

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

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

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

</div>

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

<ul class="w3-pagination">

<li><a class="w3-black" href="#">1</a></li>

<li><a class="w3-hover-black" href="#">2</a></li>

<li><a class="w3-hover-black" href="#">3</a></li>

<li><a class="w3-hover-black" href="#">4</a></li>

<li><a class="w3-hover-black" href="#"></a></li>

</ul>

</div>

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

<div class="w3-container w3-padding-large" style="margin-bottom:32px">

<h4><b>About Me</b></h4>

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

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

<li class="w3-padding-16">

<h2>$ 10</h2>

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

<li class="w3-padding-16">

<h2>$ 25</h2>

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

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

<li class="w3-padding-16">

<h2>$ 25</h2>

<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@email.com</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>

<p>512312311</p>

</div>

</div>

<hr class="w3-opacity">

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

<div class="w3-group">

<label>Name</label>

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

<div class="w3-group">

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

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

<div class="w3-third">

<h3>FOOTER</h3>

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

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

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

</div>

<div class="w3-third">

<h3>BLOG POSTS</h3>

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

<li class="w3-padding-16">
<img src="/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">

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

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

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

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

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

<h3 class="w3-padding-64"><b>SOME<br>NAME</b></h3>

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

<header class="w3-container w3-top w3-hide-large 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-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>

<div class="w3-row">

<div class="w3-third">

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

<div class="w3-third">
<img src="/w3images/boy.jpg" style="width:100%" onclick="onClick(this)"
alt="Quiet day at the beach. Cold, but beautiful">

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

<div class="w3-third">

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

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

<ul class="w3-pagination">

<li><a class="w3-black" href="#">1</a></li>

<li><a class="w3-hover-black" href="#">2</a></li>

<li><a class="w3-hover-black" href="#">3</a></li>

<li><a class="w3-hover-black" href="#">4</a></li>

<li><a class="w3-hover-black" href="#"></a></li>

</ul>

</div>

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

<p id="caption"></p>

</div>

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

<h4>My Name</h4>

<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: example@example.com</p>

<p>tel: 5353 35531</p>

<hr class="w3-opacity">

<h4 class="w3-padding-16">Technical Skills</h4>

<p class="w3-wide">Photography</p>

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

<div class="w3-progressbar" style="width:95%"></div>

</div>

<p class="w3-wide">Web Design</p>

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

<div class="w3-progressbar" style="width:85%"></div>

</div>

<p class="w3-wide">Photoshop</p>

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

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

<hr class="w3-opacity">

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

<li class="w3-padding-16">

<h2>$ 10</h2>

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

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

<li class="w3-padding-16">

<h2>$ 25</h2>

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

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

<div class="w3-group">

<label>Name</label>

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

<div class="w3-group">

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

</div>

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

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

<div class="w3-third">

<h3>INFO</h3>

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

<ul class="w3-ul">

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

<div class="w3-third">

<h3>POPULAR TAGS</h3>

<p>

<span class="w3-tag w3-black w3-margin-bottom">Travel</span> <span

class="w3-tag w3-dark-grey w3-small w3-margin-bottom">New York</span> <span
class="w3-tag w3-dark-grey w3-small w3-margin-bottom">London</span>

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

bottom">IKEA</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-
bottom">NORWAY</span> <span class="w3-tag w3-dark-grey w3-small w3-
margin-bottom">DIY</span>

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

bottom">Ideas</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-
bottom">Baby</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-
bottom">Family</span>

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

bottom">News</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-
bottom">Clothing</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-
bottom">Shopping</span>

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

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

</p>

</div>

</div>
</footer>

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

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

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

<body class="w3-light-grey">

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

<div class="w3-quarter">

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

<div class="w3-quarter">

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

<div class="w3-quarter">

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

</div>

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

<ul class="w3-pagination">

<li><a class="w3-black" href="#">1</a></li>

<li><a class="w3-hover-black" href="#">2</a></li>

<li><a class="w3-hover-black" href="#">3</a></li>

<li><a class="w3-hover-black" href="#">4</a></li>

<li><a class="w3-hover-black" href="#"></a></li>

</ul>

</div>

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

<p id="caption"></p>

</div>

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

<h4>My Name</h4>

<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: example@example.com</p>

<p>tel: 5353 35531</p>

<hr class="w3-opacity">

<h4 class="w3-padding-16">Technical Skills</h4>

<p class="w3-wide">Photography</p>

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

<div class="w3-progressbar" style="width:95%"></div>

</div>

<p class="w3-wide">Web Design</p>

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

<div class="w3-progressbar" style="width:85%"></div>

</div>

<p class="w3-wide">Photoshop</p>

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

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

<hr class="w3-opacity">

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

<li class="w3-padding-16">

<h2>$ 10</h2>

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

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

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

<li class="w3-padding-16">

<h2>$ 25</h2>

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

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

<div class="w3-group">

<label>Name</label>

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

<div class="w3-group">

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

</div>

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

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

<div class="w3-third">

<h3>INFO</h3>

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

<ul class="w3-ul">

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

<div class="w3-third">

<h3>POPULAR TAGS</h3>

<p>

<span class="w3-tag w3-black w3-margin-bottom">Travel</span> <span

class="w3-tag w3-dark-grey w3-small w3-margin-bottom">New York</span> <span
class="w3-tag w3-dark-grey w3-small w3-margin-bottom">London</span>

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

bottom">IKEA</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-
bottom">NORWAY</span> <span class="w3-tag w3-dark-grey w3-small w3-
margin-bottom">DIY</span>
<span class="w3-tag w3-dark-grey w3-small w3-margin-
bottom">Ideas</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-
bottom">Baby</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-
bottom">Family</span>

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

bottom">News</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-
bottom">Clothing</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-
bottom">Shopping</span>

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

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

</p>

</div>

</div>

</footer>

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

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

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

<body class="w3-black">

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

<p>HOME</p>

</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-progress-container">

<div class="w3-progressbar" style="width:95%"></div>

</div>

<p class="w3-wide">Web Design</p>

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

<div class="w3-progressbar" style="width:85%"></div>

</div>

<p class="w3-wide">Photoshop</p>

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

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

<span class="w3-xlarge">11+</span><br>

Partners

</div>
<div class="w3-quarter w3-section">

<span class="w3-xlarge">55+</span><br>

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

<span class="w3-xlarge">150+</span><br>

Meetings

</div>

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

<li class="w3-padding-16">

<h2>$ 10</h2>

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

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

<li class="w3-padding-16">

<h2>$ 25</h2>

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

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

<div class="w3-half">

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

<div class="w3-half">

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

<div class="w3-section">

<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: mail@mail.com</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-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>

</body>

</html>

20) <!DOCTYPE html>

<html>

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

background-image: url('/w3images/profile_girl.jpg');

min-height: 100%;

</style>

<body>

<nav class="w3-sidenav w3-hide-medium w3-hide-small" style="width:40%">

<div class="bgimg"></div>

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

<hr class="w3-opacity">

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

<div class="w3-half">

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

<div class="w3-half">

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

<div class="w3-progressbar" style="width:95%">

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

</div>

</div>

<p class="w3-wide">Web Design</p>

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

<div class="w3-progressbar" style="width:85%">

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

</div>

</div>

<p class="w3-wide">Photoshop</p>

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

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

<span class="w3-xlarge">14+</span><br>

Partners

</div>

<div class="w3-quarter w3-section">

<span class="w3-xlarge">55+</span><br>

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

<span class="w3-xlarge">150+</span><br>

Meetings

</div>

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

<li class="w3-padding-16">

<h2>$ 10</h2>

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

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

<li class="w3-padding-16">

<h2>$ 25</h2>

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

<hr class="w3-opacity">

<div class="w3-section">

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

mail@mail.com</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="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="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>

<script src="https://maps.googleapis.com/maps/api/js"></script>

<script>

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

function initialize() {

var mapProp = {

center: myCenter,

zoom: 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 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=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 {

background-image: url('/w3images/parallax1.jpg');

min-height: 100%;

/* Second image (Portfolio) */

.bgimg-2 {

background-image: url("/w3images/parallax2.jpg");

min-height: 400px;

/* Third image (Contact) */

.bgimg-3 {

background-image: url("/w3images/parallax3.jpg");

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>

<div class="w3-top">

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

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

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

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

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

<div class="w3-progressbar" style="width:85%"></div>

</div>

<p class="w3-wide"><i class="fa fa-photo"></i>Photoshop</p>

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

<div class="w3-progressbar" style="width:75%"></div>

</div>

</div>

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

<div class="w3-quarter w3-section">

<span class="w3-xlarge">14+</span><br>

Partners

</div>

<div class="w3-quarter w3-section">

<span class="w3-xlarge">55+</span><br>

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

<span class="w3-xlarge">150+</span><br>

Meetings

</div>

</div>

<div class="bgimg-2 w3-display-container w3-opacity-min">

<div class="w3-display-middle">

<span class="w3-xxlarge w3-text-light-grey w3-wide">PORTFOLIO</span>

</div>

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

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

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

</div>

<div class="bgimg-3 w3-display-container w3-opacity-min">

<div class="w3-display-middle">

<span class="w3-xxlarge w3-text-light-grey w3-wide">CONTACT</span>

</div>

</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: mail@mail.com<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">

<div class="w3-half">

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

required name="Name">

</div>

<div class="w3-half">

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

required name="Email">

</div>

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

</div>

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

<script src="https://maps.googleapis.com/maps/api/js"></script>

<script>

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

function initialize() {

var mapProp = {

center: myCenter,

zoom: 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 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=Roboto">

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

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

<h3 class="w3-wide"><b>LOGO</b></h3>

</div>

<div class="w3-padding-64 w3-large w3-text-grey" style="font-weight:bold">

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

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

<div class="w3-accordion">

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

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

<p class="w3-right">

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

<div class="w3-container">

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

<p>Ripped Skinny Jeans<br><b>$24.99</b></p>

</div>

<div class="w3-container">

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

<p>Mega Ripped Jeans<br><b>$19.99</b></p>

</div>

</div>

<div class="w3-col l3 s6">

<div class="w3-container">

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

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

<div class="w3-container">

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

<p>Washed Skinny Jeans<br><b>$20.50</b></p>

</div>

</div>

<div class="w3-col l3 s6">

<div class="w3-container">

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

<p>Washed Skinny Jeans<br><b>$20.50</b></p>

</div>

<div class="w3-container">

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

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

</div>

<p>Vintage Skinny Jeans<br><b class="w3-text-red">$14.99</b></p>

</div>

</div>

<div class="w3-col l3 s6">

<div class="w3-container">

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

<p>Vintage Skinny Jeans<br><b>$14.99</b></p>

</div>

<div class="w3-container">

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

<p>Ripped Skinny Jeans<br><b>$24.99</b></p>

</div>

</div>

</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-row-padding">

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

<p><a href="#">Help</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> ex@mail.com</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>

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

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

<i onclick="document.getElementById('newsletter').style.display='none'"
class="fa fa-remove w3-closebtn w3-xlarge w3-hover-text-grey w3-margin"></i>

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

</div>

</div>

<script>

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

<div class="w3-container">

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

<header class="w3-container w3-top w3-hide-large w3-red w3-xlarge w3-padding">

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

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

<div class="w3-half">

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

<div class="w3-half">

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

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

<p id="caption"></p>

</div>

</div>

<div class="w3-container" id="services" style="margin-top:75px">

<h1 class="w3-xxxlarge w3-text-red"><b>Services.</b></h1>

<hr style="width:50px;border:5px solid red" class="w3-round">

<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

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

<div class="w3-light-grey">

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

<div class="w3-container">

<h3>John Doe</h3>

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

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

pellentesque elementum.</p>

</div>

</div>

</div>

<div class="w3-col m4 w3-margin-bottom">

<div class="w3-light-grey">

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

<div class="w3-container">

<h3>Jane Doe</h3>

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

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

pellentesque elementum.</p>

</div>

</div>

</div>

<div class="w3-col m4 w3-margin-bottom">

<div class="w3-light-grey">

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

<div class="w3-container">

<h3>Mike Ross</h3>

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

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

pellentesque elementum.</p>

</div>

</div>

</div>

</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-row-padding">

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

<li class="w3-padding-16">

<h2>$ 199</h2>

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

<div class="w3-half">

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

<li class="w3-padding-16">

<h2>$ 249</h2>

<span class="w3-opacity">per room</span>

</li>

<li class="w3-light-grey w3-padding-24">

<button class="w3-btn w3-red w3-padding-large w3-hover-black">Sign
Up</button>

</li>

</ul>

</div>

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

<div class="w3-group">

<label>Name</label>

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

<div class="w3-group">

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

// 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 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=Inconsolata">

<style>

body, html {

height: 100%;

font-family: "Inconsolata", sans-serif;

.bgimg {

background-position: center;

background-size: cover;

background-image: url("/w3images/coffeehouse.jpg");

min-height: 75%;

}
.menu {

display: none;

</style>

<body>

<div class="w3-top">

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

</div>

</div>

<header class="bgimg w3-display-container w3-grayscale-min" id="home">

<div class="w3-display-bottomleft w3-center w3-padding-xlarge w3-hide-small">

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

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

<h5>Iced tea</h5>

<p class="w3-text-grey">Hot tea, except not hot 3.00</p><br>

<h5>Soda</h5>

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

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

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

<script src="https://maps.googleapis.com/maps/api/js"></script>

<script>

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

background-image: url("/w3images/pizza.jpg");

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="#">HOME</a></li>

<li><a href="#menu">MENU</a></li>

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

<div class="w3-content">

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

<div class="w3-container w3-padding-64 w3-red w3-grayscale w3-xlarge"

id="about">

<div class="w3-content">

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

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

</div>

</div>

<div id="googleMap" class="w3-grayscale-max"
style="width:100%;height:400px;"></div>

<div class="w3-container w3-padding-64 w3-blue-grey w3-grayscale-min w3-

xlarge">

<div class="w3-content">

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

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

<script src="https://maps.googleapis.com/maps/api/js"></script>

<script>

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

<style>

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

body, html {height: 100%}

.bgimg {

background-image: url('/w3images/onepage_restaurant.jpg');

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

<p>logo</p>

</div>

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

<p><button onclick="document.getElementById('menu').style.display='block'"
class="w3-btn w3-hover-light-grey">menu</button></p>

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

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

<div class="w3-modal-content w3-animate-zoom">

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

<span onclick="document.getElementById('menu').style.display='none'"
class="w3-closebtn w3-xxlarge w3-hover-text-grey">x</span>

<h1>Starters</h1>

</div>

<div class="w3-container">

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

<div class="w3-container">

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

<div class="w3-container">

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

</div>

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

<div class="w3-modal-content w3-animate-zoom">

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

<span onclick="document.getElementById('contact').style.display='none'"
class="w3-closebtn w3-xxlarge w3-hover-text-grey">x</span>

<h1>Contact</h1>

</div>

<div class="w3-container">

<p>Reserve 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-light-grey w3-padding" type="submit">SEND

MESSAGE</button></p>

</form>

</div>

</div>

</div>

</body>

</html>

26) <!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=Lato">

<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: "Lato", sans-serif}

.w3-navbar,h1,button {font-family: "Montserrat", sans-serif}

.fa-anchor,.fa-coffee {font-size:200px}

</style>

<body>

<div class="w3-top">

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

<div id="navDemo" class="w3-hide w3-hide-large w3-hide-medium">

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

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

<div class="w3-content">

<div class="w3-twothird">

<h1>Lorem Ipsum</h1>

<h5 class="w3-padding-32">Lorem ipsum dolor sit amet, consectetur

adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.</h5>
<p class="w3-text-grey">Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Excepteur sint

occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco

laboris nisi ut aliquip ex ea commodo consequat.</p>

</div>

<div class="w3-third w3-center">

<i class="fa fa-anchor w3-padding-64 w3-text-red"></i>

</div>

</div>

</div>

<div class="w3-row-padding w3-light-grey w3-padding-64 w3-container">

<div class="w3-content">

<div class="w3-third w3-center">

<i class="fa fa-coffee w3-padding-64 w3-text-red w3-margin-right"></i>

</div>

<div class="w3-twothird">

<h1>Lorem Ipsum</h1>

<h5 class="w3-padding-32">Lorem ipsum dolor sit amet, consectetur

adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.</h5>
<p class="w3-text-grey">Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Excepteur sint

occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco

laboris nisi ut aliquip ex ea commodo consequat.</p>

</div>

</div>

</div>

<div class="w3-container w3-black w3-center w3-opacity w3-padding-64">

<h1 class="w3-margin w3-xlarge">Quote of the day: live life</h1>

</div>

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

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

<a href="#" class="w3-hover-text-indigo"><i class="fa fa-facebook-

official"></i></a>

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

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

<a href="#" class="w3-hover-text-grey"><i class="fa fa-flickr"></i></a>

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

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

</footer>

<script>

// Used to toggle the menu on small screens when clicking on the menu button

function myFunction() {

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

if (x.className.indexOf("w3-show") == -1) {

x.className += " w3-show";

} else {

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

</script>

</body>

</html>

28) <!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", sans-serif}

body, html {

height: 100%;

line-height: 1.8;

/* Full height image header */

.bgimg-1 {

background-position: center;

background-size: cover;

background-image: url("/w3images/mac.jpg");

min-height: 100%;

.w3-navbar li a {

padding: 16px;

float: left;

</style>

<body>

<div class="w3-top">

<ul class="w3-navbar w3-white w3-card-2" id="myNavbar">

<li>

<a href="#home" class="w3-wide">LOGO</a>

</li>

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

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

<div class="w3-row-padding w3-center" style="margin-top:64px">

<div class="w3-quarter">

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

<div class="w3-quarter">

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

<div class="w3-quarter">

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

<div class="w3-quarter">

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

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

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

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

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

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

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

<div class="w3-container">

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

</div>

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

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

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

<div class="w3-container">

<h3>Anja Doe</h3>

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

</div>

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

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

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

<div class="w3-container">

<h3>Mike Ross</h3>

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

</div>

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

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

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

<div class="w3-container">

<h3>Dan Star</h3>

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

</div>

</div>

</div>

<div class="w3-container w3-row w3-center w3-dark-grey w3-padding-64">

<div class="w3-quarter">

<span class="w3-xxlarge">14+</span>

<br>Partners
</div>

<div class="w3-quarter">

<span class="w3-xxlarge">55+</span>

<br>Projects Done

</div>

<div class="w3-quarter">

<span class="w3-xxlarge">89+</span>

<br>Happy Clients

</div>

<div class="w3-quarter">

<span class="w3-xxlarge">150+</span>

<br>Meetings

</div>

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

<img src="/w3images/tech_phone.jpg" style="width:100%"
onclick="onClick(this)" class="w3-hover-opacity" alt="A phone">

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

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

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

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

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

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

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

<li class="w3-padding-16">

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

<div class="w3-third">

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

<li class="w3-padding-16">

<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-black w3-padding-large">Sign Up</button>

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

<li class="w3-padding-16">

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

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

<div class="w3-half">

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

mail@mail.com</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 class="w3-half">

<div id="googleMap" class="w3-greyscale-max"
style="width:100%;height:510px;"></div>

</div>

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

<script src="https://maps.googleapis.com/maps/api/js"></script>

<script>

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

function initialize() {

var mapProp = {

center: myCenter,

zoom: 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 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=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>

<hr class="w3-opacity">

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

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

<hr class="w3-opacity">

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

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

<div class="w3-black w3-opacity w3-hover-opacity-off w3-padding-large w3-
round-large">

<h1 class="w3-xlarge">Smart Design</h1>

<hr class="w3-opacity">

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

</div>

</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-row-padding">

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

</div>

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

</div>

<div class="w3-padding-64 w3-light-grey">

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

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

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

<p>Fast</p>

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

<div class="w3-row" style="margin-top:64px">

<div class="w3-col s3">

<i class="fa fa-user w3-text-sand w3-jumbo"></i>

<p>Safe</p>

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

<p>HD</p>

</div>

</div>

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

<li class="w3-padding-16">

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

<li class="w3-padding-16">

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

<div class="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 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>

<script>

// 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 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=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-top">

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

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

bottom:80px">

<div class="w3-panel">

<h1><b>MARKETING</b></h1>

<p>Template by w3.css</p>

</div>

<div class="w3-container">

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

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

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

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

<div class="w3-display-topright w3-container w3-padding-32">

<span class="w3-white w3-padding-large w3-animate-bottom">Blorum

pipsum</span>

</div>

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

<div class="w3-center">

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

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

<div class="w3-row-padding" id="plans">

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

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

<li class="w3-padding-16">

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

<li class="w3-padding-16">

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

<li class="w3-padding-16">

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

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

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

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

<div class="w3-container">

<h3>Jane 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">Contact</button></p>

</div>

</div>

</div>

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

<div class="w3-card-4">
<img src="/w3images/team2.jpg" alt="Mike" style="width:100%">

<div class="w3-container">

<h3>Mike Ross</h3>

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

</div>

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

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

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

<div class="w3-container">

<h3>John Doe</h3>

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

</div>

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

<div class="w3-group">

<label>Name</label>

<input class="w3-input w3-border w3-hover-border-black" style="width:100%;"

type="text" name="Name" required>

</div>

<div class="w3-group">

<label>Email</label>

<input class="w3-input w3-border w3-hover-border-black" style="width:100%;"

type="text" name="Email" required>

</div>

<div class="w3-group">

<label>Subject</label>

<input class="w3-input w3-border w3-hover-border-black" style="width:100%;"

name="Subject" required>

</div>

<div class="w3-group">

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

<script>

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

<body id="myPage">

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

<div class="w3-top">

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

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

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

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

</div>

</li>

<li class="w3-hide-small w3-right"><a href="#" class="w3-hover-teal"

title="Search"><i class="fa fa-search"></i></a></li>

</ul>

<div id="navDemo" class="w3-hide w3-hide-large w3-hide-medium">

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

<li><a href="#team">Team</a></li>

<li><a href="#work">Work</a></li>

<li><a href="#pricing">Price</a></li>

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

<li><a href="#">Search</a></li>

<li class="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-light-grey w3-card-4">

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

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

<a href="#">Link</a>
</div>

</li>

</ul>

</div>

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

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

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

<header class="w3-container w3-teal">

<span onclick="document.getElementById('id01').style.display='none'"
class="w3-closebtn"><i class="fa fa-remove"></i></span>

<h4>Oh snap! We just showed you a modal..</h4>

<h5>Because we can <i class="fa fa-smile-o"></i></h5>

</header>

<div class="w3-container">

<p>Cool huh? Ok, enough teasing around..</p>

<p>Go to our <a class="w3-btn" href="/w3css/default.asp">W3.CSS
Tutorial</a> to learn more!</p>

</div>

<footer class="w3-container w3-teal">

<p>Modal footer</p>

</footer>

</div>

</div>

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

<h2>OUR TEAM</h2>

<p>Meet the team - our office rats:</p>

<div class="w3-row"><br>

<div class="w3-quarter">

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

<div class="w3-quarter">

<img src="/w3images/avatar.jpg" alt="Boss" style="width:45%" class="w3-circle

w3-hover-opacity">

<h3>Rebecca Flex</h3>
<p>Support</p>

</div>

<div class="w3-quarter">

<img src="/w3images/avatar.jpg" alt="Boss" style="width:45%" class="w3-circle

w3-hover-opacity">

<h3>Jan Ringo</h3>

<p>Boss man</p>

</div>

<div class="w3-quarter">

<img src="/w3images/avatar.jpg" alt="Boss" style="width:45%" class="w3-circle

w3-hover-opacity">

<h3>Kai Ringo</h3>

<p>Fixer</p>

</div>

</div>

</div>

<div class="w3-row-padding w3-padding-64 w3-theme-l1" id="work">

<div class="w3-quarter">

<h2>Our Work</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</p>

</div>

<div class="w3-quarter">

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

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

<div class="w3-container">

<h3>Customer 1</h3>

<h4>Trade</h4>

<p>Blablabla</p>

<p>Blablabla</p>

<p>Blablabla</p>

<p>Blablabla</p>

</div>

</div>

</div>

<div class="w3-quarter">

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

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

<div class="w3-container">

<h3>Customer 2</h3>

<h4>Trade</h4>

<p>Blablabla</p>

<p>Blablabla</p>
<p>Blablabla</p>

<p>Blablabla</p>

</div>

</div>

</div>

<div class="w3-quarter">

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

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

<div class="w3-container">

<h3>Customer 3</h3>

<h4>Trade</h4>

<p>Blablabla</p>

<p>Blablabla</p>

<p>Blablabla</p>

<p>Blablabla</p>

</div>

</div>

</div>

</div>

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

<li class="w3-theme">

<p class="w3-xlarge">Basic</p>

</li>

<li class="w3-padding-16"><b>10GB</b> Storage</li>

<li class="w3-padding-16"><b>10</b> Emails</li>

<li class="w3-padding-16"><b>10</b> Domains</li>

<li class="w3-padding-16"><b>Endless</b> Support</li>

<li class="w3-padding-16">

<h2 class="w3-wide"><i class="fa fa-usd"></i> 10</h2>

<span class="w3-opacity">per month</span>

</li>

<li class="w3-theme-l5 w3-padding-24">

<button class="w3-btn w3-teal w3-padding-large"><i class="fa fa-

check"></i> Sign Up</button>

</li>

</ul>

</div>

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

<ul class="w3-ul w3-border w3-hover-shadow">

<li class="w3-theme-l2">

<p class="w3-xlarge">Pro</p>

</li>

<li class="w3-padding-16"><b>25GB</b> Storage</li>

<li class="w3-padding-16"><b>25</b> Emails</li>

<li class="w3-padding-16"><b>25</b> Domains</li>

<li class="w3-padding-16"><b>Endless</b> Support</li>

<li class="w3-padding-16">

<h2 class="w3-wide"><i class="fa fa-usd"></i> 25</h2>

<span class="w3-opacity">per month</span>

</li>

<li class="w3-theme-l5 w3-padding-24">

<button class="w3-btn w3-teal w3-padding-large"><i class="fa fa-

check"></i> Sign Up</button>

</li>

</ul>

</div>

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

<ul class="w3-ul w3-border w3-hover-shadow">

<li class="w3-theme">

<p class="w3-xlarge">Premium</p>

</li>

<li class="w3-padding-16"><b>50GB</b> Storage</li>

<li class="w3-padding-16"><b>50</b> Emails</li>

<li class="w3-padding-16"><b>50</b> Domains</li>

<li class="w3-padding-16"><b>Endless</b> Support</li>

<li class="w3-padding-16">

<h2 class="w3-wide"><i class="fa fa-usd"></i> 50</h2>

<span class="w3-opacity">per month</span>

</li>

<li class="w3-theme-l5 w3-padding-24">

<button class="w3-btn w3-teal w3-padding-large"><i class="fa fa-

check"></i> Sign Up</button>

</li>

</ul>

</div>

</div>

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

<div class="w3-row">

<div class="w3-col m5">

<div class="w3-padding-16"><span class="w3-xlarge w3-border-teal w3-

bottombar">Contact Us</span></div>

<h3>Address</h3>

<p>Swing by for a cup of coffee, or whatever.</p>

<p><i class="fa fa-map-marker w3-text-teal w3-xlarge"></i> Chicago,

US</p>

<p><i class="fa fa-phone w3-text-teal w3-xlarge"></i> +00 1515151515</p>

<p><i class="fa fa-envelope-o w3-text-teal w3-

xlarge"></i> test@test.com</p>

</div>

<div class="w3-col m7">

<form class="w3-container w3-card-4 w3-padding-16 w3-white"
action="form.asp" target="_blank">

<div class="w3-group">

<label class="w3-label">Name</label>

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

</div>

<div class="w3-group">

<label class="w3-label">Email</label>

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

</div>

<div class="w3-group">

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

</div>

<div id="googleMap" style="width:100%;height:420px;"></div>

<script src="https://maps.googleapis.com/maps/api/js"></script>

<script>

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

function initialize() {

var mapProp = {

center: myCenter,

zoom: 5,

scrollwheel: false,

draggable: false,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

var map = new

google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker = new google.maps.Marker({

position: myCenter,

});

marker.setMap(map);

google.maps.event.addDomListener(window, 'load', initialize);

</script>

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

<script>

function w3_open() {

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

x.style.width = "300px";

x.style.textAlign = "center";

x.style.fontSize = "40px";

x.style.paddingTop = "10%";
x.style.display = "block";

function w3_close() {

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

// Used to toggle the menu on smaller screens when clicking on the menu button

function openNav() {

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

if (x.className.indexOf("w3-show") == -1) {

x.className += " w3-show";

} else {

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

</script>

</body>

</html>

32) <!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="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>

<div class="w3-top">

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

<h4><b>Menu</b></h4>

<a href="#" class="w3-hover-black">Link</a>

<a href="#" class="w3-hover-black">Link</a>

<a href="#" class="w3-hover-black">Link</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-row w3-padding-64">

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

<div class="w3-row">

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

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

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

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

<ul class="w3-pagination">

<li><a class="w3-black" href="#">1</a></li>

<li><a class="w3-hover-black" href="#">2</a></li>

<li><a class="w3-hover-black" href="#">3</a></li>

<li><a class="w3-hover-black w3-hide-small" href="#">4</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>

<footer id="myFooter">

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

<script>

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

<body class="w3-theme-l5">

<div class="w3-top">

<ul class="w3-navbar w3-theme-d2 w3-left-align w3-large">

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

<a class="w3-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-row">

<div class="w3-col m3">

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

<div class="w3-container">

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

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

<p>Some text..</p>

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

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

<br>

<div class="w3-half">

<img src="/w3images/lights.jpg" style="width:100%" class="w3-margin-

bottom">

</div>

<div class="w3-half">

<img src="/w3images/nature.jpg" style="width:100%" class="w3-margin-

bottom">

</div>

<div class="w3-half">

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

margin-bottom">

</div>

<div class="w3-half">

<img src="/w3images/forest.jpg" style="width:100%" class="w3-margin-

bottom">

</div>

<div class="w3-half">
<img src="/w3images/nature.jpg" style="width:100%" class="w3-margin-
bottom">

</div>

<div class="w3-half">

<img src="/w3images/fjords.jpg" style="width:100%" class="w3-margin-

bottom">

</div>

</div>

</div>

</div>

</div>

<br>

<div class="w3-card-2 w3-round w3-white w3-hide-small">

<div class="w3-container">

<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-l4">Art</span>

<span class="w3-tag w3-small w3-theme-l5">Photos</span>

</p>

</div>

</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><strong>Hey!</strong></p>

<p>People are looking at your profile. Find out who.</p>

</div>

</div>

<div class="w3-col m7">

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

<div class="w3-col m12">

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

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

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

</div>

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

<h4>John Doe</h4><br>

<hr class="w3-clear">

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

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

<div class="w3-half">

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

Lights" class="w3-margin-bottom">

</div>

<div class="w3-half">

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

<h4>Jane Doe</h4><br>

<hr class="w3-clear">

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

<hr class="w3-clear">

<p>Have you seen this?</p>

<img src="/w3images/nature.jpg" style="width:100%" class="w3-margin-
bottom">

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

<div class="w3-container">

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

</div>

<br>

<div class="w3-card-2 w3-round w3-white w3-center">

<div class="w3-container">

<p>Friend Request</p>

<img src="/w3images/avatar6.png" alt="Avatar" style="width:50%"><br>

<span>Jane Doe</span>

<div class="w3-row w3-opacity">

<div class="w3-half">

<button class="w3-btn w3-green w3-btn-block w3-section"

title="Accept"><i class="fa fa-check"></i></button>

</div>

<div class="w3-half">

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

title="Decline"><i class="fa fa-remove"></i></button>

</div>

</div>

</div>

</div>

<br>

<div class="w3-card-2 w3-round w3-white w3-padding-16 w3-center">

<p>ADS</p>

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

<script>

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

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

</style>

<body class="w3-light-grey">

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

<span class="w3-right">Logo</span>

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

</div>

<hr>

<div class="w3-container">

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

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

<div class="w3-left"><i class="fa fa-comment w3-xxxlarge"></i></div>

<div class="w3-right">

<h3>52</h3>

</div>

<div class="w3-clear"></div>

<h4>Messages</h4>

</div>

</div>

<div class="w3-quarter">

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

<div class="w3-left"><i class="fa fa-eye w3-xxxlarge"></i></div>

<div class="w3-right">
<h3>99</h3>

</div>

<div class="w3-clear"></div>

<h4>Views</h4>

</div>

</div>

<div class="w3-quarter">

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

<div class="w3-left"><i class="fa fa-share-alt w3-xxxlarge"></i></div>

<div class="w3-right">

<h3>23</h3>

</div>

<div class="w3-clear"></div>

<h4>Shares</h4>

</div>

</div>

<div class="w3-quarter">

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

<h3>50</h3>

</div>

<div class="w3-clear"></div>

<h4>Users</h4>

</div>

</div>
</div>

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

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

<div class="w3-third">

<h5>Regions</h5>

<img src="/w3images/region.jpg" style="width:100%" alt="Google Regional

Map">

</div>

<div class="w3-twothird">

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

<td><i>10 mins</i></td>

</tr>

<tr>

<td><i class="fa fa-bell w3-red w3-padding-tiny"></i></td>

<td>Database error.</td>

<td><i>15 mins</i></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>

<td><i>17 mins</i></td>
</tr>

<tr>

<td><i class="fa fa-comment w3-red w3-padding-tiny"></i></td>

<td>New comments.</td>

<td><i>25 mins</i></td>

</tr>

<tr>

<td><i class="fa fa-bookmark w3-light-blue w3-padding-tiny"></i></td>

<td>Check transactions.</td>

<td><i>28 mins</i></td>

</tr>

<tr>

<td><i class="fa fa-laptop w3-red w3-padding-tiny"></i></td>

<td>CPU overload.</td>

<td><i>35 mins</i></td>

</tr>

<tr>

<td><i class="fa fa-share-alt w3-green w3-padding-tiny"></i></td>

<td>New shares.</td>

<td><i>39 mins</i></td>

</tr>

</table>

</div>

</div>

</div>

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

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

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

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

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

<td>65%</td>

</tr>

<tr>

<td>UK</td>

<td>15.7%</td>

</tr>

<tr>

<td>Russia</td>

<td>5.6%</td>

</tr>

<tr>

<td>Spain</td>

<td>2.1%</td>

</tr>

<tr>

<td>India</td>

<td>1.9%</td>

</tr>

<tr>

<td>France</td>

<td>1.5%</td>

</tr>
</table><br>

<button class="w3-btn">More Countries <i class="fa fa-arrow-

right"></i></button>

</div>

<hr>

<div class="w3-container">

<h5>Recent Users</h5>

<ul class="w3-ul w3-card-4 w3-white">

<li class="w3-padding-16">

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

<span class="w3-xlarge">Mike</span><br>

</li>

<li class="w3-padding-16">

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

<span class="w3-xlarge">Jill</span><br>

</li>

<li class="w3-padding-16">

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

<span class="w3-xlarge">Jane</span><br>

</li>
</ul>

</div>

<hr>

<div class="w3-container">

<h5>Recent Comments</h5>

<div class="w3-row">

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

<div class="w3-row">

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

</div>

</div>

<br>

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

<div class="w3-row">

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

<h5 class="w3-bottombar w3-border-green">Demographic</h5>

<p>Language</p>

<p>Country</p>

<p>City</p>

</div>

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

<h5 class="w3-bottombar w3-border-red">System</h5>

<p>Browser</p>

<p>OS</p>

<p>More</p>

</div>

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

<h5 class="w3-bottombar w3-border-orange">Target</h5>

<p>Users</p>

<p>Active</p>

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

<script>

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

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

<h3>from $99</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>

<div class="w3-container" id="apartment">

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

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

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

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

</div>

<div class="w3-container">

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

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

</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>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>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: mail@mail.com<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">

<i onclick="document.getElementById('subscribe').style.display='none'"
class="fa fa-remove w3-closebtn w3-xlarge w3-hover-text-grey w3-margin"></i>

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

</div>

<script>

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

</style>

<body class="w3-light-grey">

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

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

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

<div class="w3-half">

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

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

<div class="w3-half">

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

</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-row-padding">

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

<label><i class="fa fa-child"></i> Kids</label>

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

<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>15m<sup>2</sup></p>

<p class="w3-large"><i class="fa fa-bath"></i> <i class="fa fa-phone"></i>

<i class="fa fa-wifi"></i></p>

<button class="w3-btn-block w3-margin-bottom">Choose Room</button>

</div>

</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>25m<sup>2</sup></p>

<p class="w3-large"><i class="fa fa-bath"></i> <i class="fa fa-phone"></i>

<i class="fa fa-wifi"></i> <i class="fa fa-tv"></i></p>

<button class="w3-btn-block w3-margin-bottom">Choose Room</button>

</div>

</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>King-size bed</p>

<p>40m<sup>2</sup></p>

<p class="w3-large"><i class="fa fa-bath"></i> <i class="fa fa-phone"></i>

<i class="fa fa-wifi"></i> <i class="fa fa-tv"></i> <i class="fa fa-glass"></i> <i
class="fa fa-cutlery"></i></p>

<button class="w3-btn-block w3-margin-bottom">Choose Room</button>

</div>

</div>

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

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

mail@mail.com</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>

<div class="w3-container">

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

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

<img src="/w3images/cinqueterre.jpg" alt="Cinque Terre"

style="width:100%">

<span class="w3-display-bottomleft w3-padding">Cinque Terre</span>

</div>

</div>

<div class="w3-half">

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

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

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

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

<span class="w3-display-bottomleft w3-padding">New York</span>

</div>

</div>

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

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

<img src="/w3images/sanfran.jpg" alt="San Francisco"

style="width:100%">

<span class="w3-display-bottomleft w3-padding">San Francisco</span>

</div>

</div>

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

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

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

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

<span class="w3-display-bottomleft w3-padding">Pisa</span>

</div>

</div>

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

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

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

<span class="w3-display-bottomleft w3-padding">Paris</span>

</div>

</div>

</div>

</div>

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

<label>E-mail</label>

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

mail@mail.com<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">

<h5>Find Us On</h5>

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

<script src="https://maps.googleapis.com/maps/api/js"></script>

<script>

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

function initialize() {

var mapProp = {

center: myCenter,

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

<body class="w3-light-grey">

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

<div class="w3-half">

<label>From</label>

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

from">

</div>

<div class="w3-half">

<label>To</label>

<input class="w3-input w3-border" type="text" placeholder="Arriving at">

</div>

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

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

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

<img src="/w3images/cinqueterre.jpg" alt="Cinque Terre"

style="width:100%">

<span class="w3-display-bottomleft w3-padding">Cinque Terre</span>

</div>

</div>

<div class="w3-half">

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

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

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

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

<span class="w3-display-bottomleft w3-padding">New York</span>

</div>

</div>

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

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

<img src="/w3images/sanfran.jpg" alt="San Francisco"

style="width:100%">

<span class="w3-display-bottomleft w3-padding">San Francisco</span>

</div>

</div>

</div>

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

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

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

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

<span class="w3-display-bottomleft w3-padding">Pisa</span>

</div>

</div>

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

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

<span class="w3-display-bottomleft w3-padding">Paris</span>

</div>

</div>

</div>

</div>

</div>

<div class="w3-container">

<h3>Explore Nature</h3>

<p>Travel with us and see nature at its finest.</p>

</div>

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

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

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

</div>

<div class="w3-container">

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

<label>E-mail</label>

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

<div class="w3-container">

<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: mail@mail.com<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">

<h5>Find Us On</h5>

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

<script>

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

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

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

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

<div class="w3-topbar w3-border-amber w3-padding-top">

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

<h2>Super Offers</h2>

<p>Up to 50% offers. Always 25% student offers.</p>

</div>

</div>

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

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

</div>

</div>

</body>
</html>

38) <!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://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-row">

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

<div class="w3-container w3-section w3-text-grey">

<h4>MOST RECENT WORK:</h4>

</div>

<div class="w3-row">

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

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

mail@mail.com</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">

<h2>Like Us</h2>

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

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

<div class="w3-half w3-black w3-container w3-center" style="height:700px">

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

<h1>My Logo</h1>

</div>

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

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

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

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

</div>

</div>

</div>

</div>

<div class="w3-row">

<div class="w3-half w3-light-grey w3-center" style="min-height:800px"

id="work">

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

<h2>My Work</h2>

<p>Some of my latest projects.</p>

</div>

<div class="w3-row">

<div class="w3-half">

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

</div>

<div class="w3-half">

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

</div>

</div>

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

<div class="w3-half">
<img src="/w3images/workbench.jpg" style="width:100%">

</div>

<div class="w3-half">

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

</div>

</div>

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

<div class="w3-half">

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

</div>

<div class="w3-half">

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

<table class="w3-table">

<tr>

<th>Year</th>

<th>Title</th>
<th>Where</th>

</tr>

<tr class="w3-white">

<td>2012-2016</td>

<td>The rest is history..</td>

<td>Lorem ipsum</td>

</tr>

<tr>

<td>2009-2012</td>

<td>Started my own company</td>

<td>My Garage</td>

</tr>

<tr class="w3-white">

<td>2008-2009</td>

<td>Started working for Lorem</td>

<td>London, UK</td>

</tr>

<tr>

<td>2005-2008</td>

<td>Degree in Bachelor of Design</td>

<td>Harvard, USA</td>

</tr>

<tr class="w3-white">

<td>2002-2005</td>

<td>Degree in Bachelor of Business</td>

<td>RMIT University, Melbourne, Australia</td>

</tr>

<tr class="w3-hide-medium">

<td>2002-2005</td>

<td>Degree in Bachelor of Business</td>

<td>RMIT University, Melbourne, Australia</td>

</tr>

</table>

</div>

</div>

</div>

</div>

<div class="w3-row" id="contact">

<div class="w3-half w3-dark-grey w3-container w3-center" style="height:700px">

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

<h1>Swing By</h1>

</div>

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

<p>..for a cup of coffee, or whatever.</p>

<p>Chicago, US</p>

<p>+00 1515151515</p>

<p>test@test.com</p>

</div>

</div>

<div class="w3-half w3-teal w3-container" style="height:700px">

<div class="w3-padding-64 w3-padding-xxlarge">

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

<div class="w3-group">

<label>Name</label>

<input class="w3-input" style="width:100%;" type="text" required

name="Name">

</div>

<div class="w3-group">

<label>Email</label>

<input class="w3-input" style="width:100%;" type="text" required

name="Email">

</div>

<div class="w3-group">

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

</div>

</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 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 href='https://fonts.googleapis.com/css?family=RobotoDraft' rel='stylesheet'
type='text/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>

<div class="w3-accordion">

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

<div class="w3-container">

<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();">

<div class="w3-container">

<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();">

<div class="w3-container">

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

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

<span onclick="document.getElementById('id01').style.display='none'"
class="w3-right w3-xxlarge w3-closebtn"><i class="fa fa-remove"></i></span>

<h2>Send Mail</h2>

</div>

<div class="w3-panel">

<label>To</label>

<input class="w3-input w3-border w3-hover-shadow w3-margin-bottom"

type="text">

<label>From</label>

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

<div class="w3-section">

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

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

<p>That's it!</p>

</div>

</div>

<script>

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>

<script>

var openTab = document.getElementById("firstTab");

openTab.click();

</script>

</body>

</html>

41) <!DOCTYPE html>

<html>

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

<div class="w3-center">

<h4>BEAUTIFUL RESPONSIVE WEB SITES</h4>

<h1 class="w3-xxxlarge w3-animate-bottom">BUILT WITH W3.CSS</h1>

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

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

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

<span onclick="document.getElementById('id01').style.display='none'"
class="w3-closebtn"></span>

<h4>Oh snap! We just showed you a modal..</h4>

<h5>Because we can <i class="fa fa-smile-o"></i></h5>

</header>

<div class="w3-padding">

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

<div class="w3-row-padding w3-center w3-margin-top">

<div class="w3-third">

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

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

<div class="w3-third">

<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>
<div class="w3-container">

<hr>

<div class="w3-center">

<h2>Color Classes</h2>

</div>

<div class="w3-row">

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

<div class="w3-center">

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

<h5>w3-half</h5>

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

<h5>w3-half</h5>

</div>

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

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

</div>

<div class="w3-center">

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

<span onclick="this.parentElement.style.display='none'" class="w3-closebtn"><i
class="fa fa-remove"></i></span>

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

<div class="w3-center">

<h2>Color Themes</h2>

<p>The color themes have been designed to work harmoniously with each
other.</p>

</div>

</div>

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

<div class="w3-card white">

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

<h3>Theme Indigo</h3>

</div>

<div class="w3-container">

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

<div class="w3-container">

<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>
<div class="w3-container w3-center">

<hr>

<h3>Paper-like Cards with Shadows</h3>

</div>

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

<div class="w3-third">

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

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

<div class="w3-container">

<p>w3-card-2</p>

</div>

</div>

</div>

<div class="w3-third">

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

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

<div class="w3-container">

<p>w3-card-4</p>

</div>

</div>

</div>
<div class="w3-third">

<div class="w3-card-8">

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

<div class="w3-container">

<p>w3-card-8</p>

</div>

</div>

</div>

</div>

<div class="w3-container">

<hr>

<div class="w3-center">

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

<tr class="w3-theme">

<th>First Name</th>

<th>Last Name</th>

<th>Points</th>

</tr>

</thead>

<tbody>
<tr>

<td>Jill</td>

<td>Smith</td>

<td>50</td>

</tr>

<tr class="w3-white">

<td>Eve</td>

<td>Jackson</td>

<td>94</td>

</tr>

<tr>

<td>Adam</td>

<td>Johnson</td>

<td>67</td>

</tr>

</tbody>

</table>

</div>

<hr>

<h2 class="w3-center">Forms and Lists</h2>

</div>

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

<div class="w3-half">
<form class="w3-container w3-card-4">

<div class="w3-group">

<input class="w3-input" type="text" required>

<label class="w3-label w3-validate">Name</label>

</div>

<div class="w3-group">

<input class="w3-input" type="text" required>

<label class="w3-label w3-validate">Email</label>

</div>

<div class="w3-group">

<input class="w3-input" type="text" required>

<label class="w3-label">Subject</label>

</div>

<div class="w3-row">

<div class="w3-half">

<input id="milk" class="w3-check" type="checkbox" checked="checked">

<label class="w3-validate">Milk</label>

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

<br><br>
</div>

<div class="w3-half">

<input id="male" class="w3-radio" type="radio" name="gender" value="male"

checked>

<label class="w3-validate">Male</label>

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

</div>

</form>

</div>

<div class="w3-half">

<div class="w3-card-4 w3-container">

<h2>Lists</h2>

<ul class="w3-ul w3-margin-bottom">

<li>Jill</li>

<li>Eve</li>

<li>Adam</li>

</ul>
<br>

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

<li class="w3-theme">Jill</li>

<li>Eve</li>

<li>Adam</li>

<li>Steve</li>

</ul>

<br>

</div>

</div>

</div>

<hr>

<h2 class="w3-center">Progress Bars</h2>

<div class="w3-container">

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

<div class="w3-container">

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

<div class="w3-container">

<div class="w3-accordion">

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

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

</div>

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

<div class="w3-container">

<p>Accordion with Images:</p>

<img src="/w3images/fjords.jpg" style="width:30%;" class="w3-animate-

zoom">

<p>Trolltunga, Norway</p>

</div>

</div>

</div>

</div>

<hr>

<h2 class="w3-center">Tabs</h2>

<div class="w3-container">

<div class="w3-border">

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

</div>

</div>

<hr>

<h2 class="w3-center">Buttons</h2>

<div class="w3-center">

<br>
<a class="w3-btn">Button</a>

<a class="w3-btn w3-theme">Button</a>

<a class="w3-btn w3-disabled">Button</a>

<br><br>

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

<br><br>

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

<div class="w3-center">

<div class="w3-dropdown-hover">

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

</div>

</div>
<hr>

<div class="w3-center">

<h2>Pagination</h2>

<ul class="w3-pagination w3-padding-32">

<li><a href="javascript:void(0)"></a></li>

<li><a class="w3-theme" href="javascript:void(0)">1</a></li>

<li><a href="javascript:void(0)">2</a></li>

<li><a href="javascript:void(0)">3</a></li>

<li><a href="javascript:void(0)">4</a></li>

<li><a href="javascript:void(0)">5</a></li>

<li><a href="javascript:void(0)"></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>

<script>

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

Вам также может понравиться

Calculation Report
Документ157 страниц
Calculation Report
isaacjoe77
100% (3)
Mba633 Road To Hell Case Analysis
Документ3 страницы
Mba633 Road To Hell Case Analysis
Aditi Varshney
Оценок пока нет
Lesson Exemplar Math 7
Документ6 страниц
Lesson Exemplar Math 7
Pablo Jimenea
100% (2)
Webcode
Документ6 страниц
Webcode
EMSAD ICT
Оценок пока нет
Exeample
Документ5 страниц
Exeample
Pseudo Fiinta
Оценок пока нет
Programming
Документ4 страницы
Programming
Angel Anojan
Оценок пока нет
Mupukuta Index
Документ7 страниц
Mupukuta Index
daniel
Оценок пока нет
Website Making
Документ14 страниц
Website Making
ROHIT KHANDELWAL
Оценок пока нет
Sodapdf
Документ3 страницы
Sodapdf
Nick Tiger
Оценок пока нет
Free W3 Blog Template
Документ4 страницы
Free W3 Blog Template
Maseko Charuzu
Оценок пока нет
Footer
Документ5 страниц
Footer
vanrich
Оценок пока нет
New Text Document
Документ2 страницы
New Text Document
ewryrtw
Оценок пока нет
Tuto Bootstrap
Документ15 страниц
Tuto Bootstrap
crunch
Оценок пока нет
livestockAPPENDIX
Документ6 страниц
livestockAPPENDIX
caesar
Оценок пока нет
Link Link Link Body Meta: Rel Href Rel Href Rel Href Class Name Content
Документ3 страницы
Link Link Link Body Meta: Rel Href Rel Href Rel Href Class Name Content
Sammy Mwambezi
Оценок пока нет
Pertemuan10 - G.231.21.0172 - Rifai Ananda Haryanto
Документ7 страниц
Pertemuan10 - G.231.21.0172 - Rifai Ananda Haryanto
anda
Оценок пока нет
Asptilsand Darshan
Документ47 страниц
Asptilsand Darshan
Maju King
Оценок пока нет
I Want You To Know
Документ8 страниц
I Want You To Know
C - k
Оценок пока нет
Manual Slideshow
Документ66 страниц
Manual Slideshow
Gonzalo Alvarenga
Оценок пока нет
Errores de Spring
Документ15 страниц
Errores de Spring
Jhocel Duvan Suescun Torres
Оценок пока нет
GFGDV
Документ7 страниц
GFGDV
Mei Rosa
Оценок пока нет
Index Bootstrap - HTML
Документ6 страниц
Index Bootstrap - HTML
Anastasia
Оценок пока нет
Script Chekout Top
Документ24 страницы
Script Chekout Top
Johnsimples
Оценок пока нет
Materi Workshop Laravel Stmik Widuri by WCC (Front End)
Документ19 страниц
Materi Workshop Laravel Stmik Widuri by WCC (Front End)
A.Busyra Fuadi
Оценок пока нет
Struktur Postingan
Документ8 страниц
Struktur Postingan
Rohman Syah
Оценок пока нет
Admin Dashboard
Документ6 страниц
Admin Dashboard
C - k
Оценок пока нет
End of Topbar
Документ6 страниц
End of Topbar
jung dila
Оценок пока нет
BT Css
Документ28 страниц
BT Css
Karry Phạm
Оценок пока нет
Lab No 3
Документ7 страниц
Lab No 3
baap player
Оценок пока нет
A
Документ24 страницы
A
Salina Ranabhat
Оценок пока нет
Home Page Code PDF
Документ4 страницы
Home Page Code PDF
Burhan Ahmed
Оценок пока нет
HFGFSG
Документ14 страниц
HFGFSG
Juan Roger HC
Оценок пока нет
Telkomsel Omg SSL Sgdo-9
Документ11 страниц
Telkomsel Omg SSL Sgdo-9
Jeng Roy
Оценок пока нет
Practical 10 Ps
Документ5 страниц
Practical 10 Ps
AYUSHI KOLHE
Оценок пока нет
Telkomsel Omg sg10 Unlock
Документ11 страниц
Telkomsel Omg sg10 Unlock
Jeng Roy
Оценок пока нет
Lab 7
Документ15 страниц
Lab 7
ukbalaji_it
Оценок пока нет
Bootstrapcodeacademy
Документ166 страниц
Bootstrapcodeacademy
abu hamid
Оценок пока нет
Universidad Cristiana de Honduras (Ucrish)
Документ6 страниц
Universidad Cristiana de Honduras (Ucrish)
Fanny Santos Cruz
Оценок пока нет
Index
Документ14 страниц
Index
asamiya300601
Оценок пока нет
Codigovideo (1 y 2)
Документ10 страниц
Codigovideo (1 y 2)
JOHNNY PABLO Velasquez
Оценок пока нет
Web Paper
Документ22 страницы
Web Paper
Roohan Adeel
Оценок пока нет
01 135211 053 10550787033 07042023 072308pm
Документ93 страницы
01 135211 053 10550787033 07042023 072308pm
Islamic Duniya
Оценок пока нет
Historychurchma04bridgoog Djvu
Документ250 страниц
Historychurchma04bridgoog Djvu
ja_mufc_scribd
Оценок пока нет
Log
Документ18 страниц
Log
Abdul Tchakala
Оценок пока нет
JavaScript JQuery
Документ9 страниц
JavaScript JQuery
almira sabita
Оценок пока нет
Scrip Web Sederhana
Документ9 страниц
Scrip Web Sederhana
Rejianto Benu
Оценок пока нет
Download
Документ4 страницы
Download
disomkura6
Оценок пока нет
2010979he Lonjvu
Документ415 страниц
2010979he Lonjvu
docwavy9481
Оценок пока нет
Tugas 4 - Kelompok 3 - CSS
Документ8 страниц
Tugas 4 - Kelompok 3 - CSS
almira sabita
Оценок пока нет
Task Management Basic App Only Frontend
Документ9 страниц
Task Management Basic App Only Frontend
sathwick
Оценок пока нет
KS1600 Roge Debraeterjvu
Документ16 страниц
KS1600 Roge Debraeterjvu
docwavy9481
Оценок пока нет
Telkomsel Omg SSL
Документ11 страниц
Telkomsel Omg SSL
Jeng Roy
Оценок пока нет
B1A022024 - Pentana Seniwati
Документ10 страниц
B1A022024 - Pentana Seniwati
elisamv1007
Оценок пока нет
Gomobilguun
Документ3 страницы
Gomobilguun
bilguun sainbold
Оценок пока нет
Feminine Essensie Defentie
Документ3 страницы
Feminine Essensie Defentie
altermiss23
Оценок пока нет
E-1334 - 602B Producto Final
Документ23 страницы
E-1334 - 602B Producto Final
Maria Aguilar
Оценок пока нет
Transistor Manual
Документ120 страниц
Transistor Manual
gustavoeddino
Оценок пока нет
193jvu
Документ414 страниц
193jvu
docwavy9481
Оценок пока нет
Pdfdde
Документ4 страницы
Pdfdde
Nikki Kleve
Оценок пока нет
PFP Cooode
Документ5 страниц
PFP Cooode
Katie is juanpito
Оценок пока нет
Pengurusan Segak
Документ2 страницы
Pengurusan Segak
Bang Izat
Оценок пока нет
Poetryvolumes00assogoog Djvu
Документ750 страниц
Poetryvolumes00assogoog Djvu
natrubuclathrmacom
Оценок пока нет
Masters Among Us: An Exploration of Supernal Encounters and Miraculous Phenomena
От Everand
Masters Among Us: An Exploration of Supernal Encounters and Miraculous Phenomena
Thomas Curley
Оценок пока нет
Noth Pictures
Документ17 страниц
Noth Pictures
Jana Assa
Оценок пока нет
Research Project Presentation of Jobairul Karim Arman
Документ17 страниц
Research Project Presentation of Jobairul Karim Arman
Jobairul Karim Arman
Оценок пока нет
Code of Federal Regulations
Документ14 страниц
Code of Federal Regulations
diwolfie
Оценок пока нет
Hexoloy SP Sic Tds
Документ4 страницы
Hexoloy SP Sic Tds
Anonymous r3MoX2ZMT
Оценок пока нет
Plastic Hinge Length and Depth For Piles in Marine Oil Terminals Including Nonlinear Soil Properties
Документ10 страниц
Plastic Hinge Length and Depth For Piles in Marine Oil Terminals Including Nonlinear Soil Properties
Gopu R
Оценок пока нет
Solar-range-brochure-all-in-one-Gen 2
Документ8 страниц
Solar-range-brochure-all-in-one-Gen 2
sibasish patel
Оценок пока нет
WT Capability Statement PE 2020
Документ1 страница
WT Capability Statement PE 2020
Muhannad Sulieman
Оценок пока нет
Typical Cable Laying Details For Direct Buried, Low Tension Cables
Документ9 страниц
Typical Cable Laying Details For Direct Buried, Low Tension Cables
lata
Оценок пока нет
I.A.-1 Question Bank EM-3 (Answers)
Документ11 страниц
I.A.-1 Question Bank EM-3 (Answers)
Umm
Оценок пока нет
Sounds
Документ61 страница
Sounds
Jemabel Rosario
Оценок пока нет
Updated Worksheet
Документ5 страниц
Updated Worksheet
John Ramer Lazarte Inocencio
Оценок пока нет
Philips HD 9 User Manual
Документ3 страницы
Philips HD 9 User Manual
Ndangoh Derek
Оценок пока нет
CE-23113-SP-902-R01-00 Asset Specification
Документ14 страниц
CE-23113-SP-902-R01-00 Asset Specification
Светлана Файбер
Оценок пока нет
Aristotle Metaphysics Lambda Accessed 201111 Classicalk Library
Документ19 страниц
Aristotle Metaphysics Lambda Accessed 201111 Classicalk Library
gijsbo2000
Оценок пока нет
Ateneo de Naga University: Professional Training For Teacher 4.0
Документ10 страниц
Ateneo de Naga University: Professional Training For Teacher 4.0
Rosemarie Briones
Оценок пока нет
Corrosion Protection PT Tosanda Dwi Sapurwa
Документ18 страниц
Corrosion Protection PT Tosanda Dwi Sapurwa
Yoga Firmansyah
Оценок пока нет
Matsusada DC-DC Converters
Документ4 страницы
Matsusada DC-DC Converters
AP Singh
Оценок пока нет
Aicte Internship Approval Pending 1
Документ7 страниц
Aicte Internship Approval Pending 1
Anisha Kumari
Оценок пока нет
Perilaku Prososial Sebagai Prediktor Status Teman Sebaya Pada Remaja
Документ9 страниц
Perilaku Prososial Sebagai Prediktor Status Teman Sebaya Pada Remaja
Memet Go
Оценок пока нет
Capacity Analysis of Kashmir Highway Islamabad
Документ71 страница
Capacity Analysis of Kashmir Highway Islamabad
m saadullah khan
Оценок пока нет
Summative Test in Foundation of Social Studies
Документ2 страницы
Summative Test in Foundation of Social Studies
Jane Fajel
Оценок пока нет
Learning Plans in The Context of The 21 ST Century
Документ29 страниц
Learning Plans in The Context of The 21 ST Century
Haidee F. Patalinghug
Оценок пока нет
Stress: Problem Set
Документ2 страницы
Stress: Problem Set
Danielle Florida
Оценок пока нет
With You: Full-Line Catalog
Документ68 страниц
With You: Full-Line Catalog
COMI
Оценок пока нет
GE Uno Downlight Backlit BL
Документ2 страницы
GE Uno Downlight Backlit BL
Chen Kengloon
Оценок пока нет
A First Etymological Dictionary of Basqu
Документ29 страниц
A First Etymological Dictionary of Basqu
Daily Mail
Оценок пока нет
Emcee Script For Recognition Day
Документ3 страницы
Emcee Script For Recognition Day
Romeo Jr. Laguardia
Оценок пока нет