Scribd
Carica
417 visualizzazioni

CSS Temp1

Questo documento descrive il menu e le informazioni di contatto di un ristorante di pizza. Include sezioni sul menu, gli ingredienti e i prezzi di varie pizze e piatti, informazioni sulla cucina e gli orari di apertura del ristorante.

Caricato da

mimrantaj
Copyright
© © All Rights Reserved
Formati disponibili
Scarica in formato DOCX, PDF, TXT o leggi online su Scribd
417 visualizzazioni

CSS Temp1

Questo documento descrive il menu e le informazioni di contatto di un ristorante di pizza. Include sezioni sul menu, gli ingredienti e i prezzi di varie pizze e piatti, informazioni sulla cucina e gli orari di apertura del ristorante.

Caricato da

mimrantaj
Copyright
© © All Rights Reserved
Formati disponibili
Scarica in formato DOCX, PDF, TXT o leggi online su Scribd
Sei sulla pagina 1/ 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="https://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%;

Non-Business Use
}

</style>

<body>

<!-- Navbar (sit on top) -->

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

<div class="w3-bar w3-xlarge w3-black w3-opacity w3-hover-opacity-off" id="myNavbar">

<a href="#" class="w3-bar-item w3-button">HOME</a>

<a href="#menu" class="w3-bar-item w3-button">MENU</a>

<a href="#about" class="w3-bar-item w3-button">ABOUT</a>

<a href="#googleMap" class="w3-bar-item w3-button">CONTACT</a>

</div>

</div>

<!-- Header with image -->

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

<!-- Menu Container -->

<div class="w3-container w3-black w3-padding-64 w3-xxlarge" id="menu">

Non-Business Use
<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>

Non-Business Use
<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>

Non-Business Use
<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>

<!-- About Container -->

Non-Business Use
<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>

Non-Business Use
<!-- Contact (with google maps) -->

<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="/action_page.php" 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 -->

<footer class="w3-center w3-black w3-padding-48 w3-xxlarge">

<p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" title="W3.CSS"


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

</footer>

Non-Business Use
<!-- Add Google Maps -->

<script>

function myMap()

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

var mapOptions= {

center:myCenter,

zoom:12, scrollwheel: false, draggable: false,

mapTypeId:google.maps.MapTypeId.ROADMAP

};

var map=new google.maps.Map(document.getElementById("googleMap"),mapOptions);

var marker = new google.maps.Marker({

position: myCenter,

});

marker.setMap(map);

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

Non-Business Use
document.getElementById(menuName).style.display = "block";

evt.currentTarget.firstElementChild.className += " w3-red";

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

</script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-
916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>

<!--

To use this code on your website, get a free API key from Google.

Read more at: https://www.w3schools.com/graphics/google_maps_basic.asp

-->

</body>

</html>

<!DOCTYPE html>

<html>

Non-Business Use
<title>W3.CSS Template</title>

<meta charset="UTF-8">

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

<link rel="stylesheet" href="https://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-bar,h1,button {font-family: "Montserrat", sans-serif}

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

</style>

<body>

<!-- Navbar -->

<div class="w3-top">

<div class="w3-bar w3-red w3-card-2 w3-left-align w3-large">

<a class="w3-bar-item w3-button w3-hide-medium w3-hide-large w3-opennav w3-right 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>

<a href="#" class="w3-bar-item w3-button w3-padding-large w3-white">Home</a>

<a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Link


1</a>

<a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Link


2</a>

<a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Link


3</a>

<a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Link


4</a>

</div>

Non-Business Use
<!-- Navbar on small screens -->

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

<a href="#" class="w3-bar-item w3-button w3-padding-large">Link 1</a>

<a href="#" class="w3-bar-item w3-button w3-padding-large">Link 2</a>

<a href="#" class="w3-bar-item w3-button w3-padding-large">Link 3</a>

<a href="#" class="w3-bar-item w3-button w3-padding-large">Link 4</a>

</div>

</div>

<!-- Header -->

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

<!-- First Grid -->

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

<div class="w3-content">

<div class="w3-twothird">

<h1>Lorem Ipsum</h1>

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

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

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

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

</div>

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

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

</div>

</div>

</div>

<!-- Second Grid -->

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

<div class="w3-content">

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

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

</div>

<div class="w3-twothird">

<h1>Lorem Ipsum</h1>

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

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

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

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

Non-Business Use
</div>

</div>

</div>

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

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

</div>

<!-- Footer -->

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

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

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

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

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

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

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

</div>

<p>Powered by <a href="https://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", "");

Non-Business Use
}

</script>

</body>

</html>

<!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="/lib/w3.css">

<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-blue-grey.css">

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

Non-Business Use
<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">

<!-- Navbar -->

<div class="w3-top">

<div class="w3-bar w3-theme-d2 w3-left-align w3-large">

<a class="w3-bar-item w3-button w3-hide-medium w3-hide-large w3-opennav w3-right w3-padding-


large w3-hover-white w3-large w3-theme-d2" href="javascript:void(0);" onclick="openNav()"><i
class="fa fa-bars"></i></a>

<a href="#" class="w3-bar-item w3-button w3-padding-large w3-theme-d4"><i class="fa fa-home w3-


margin-right"></i>Logo</a>

<a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white"


title="News"><i class="fa fa-globe"></i></a>

<a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white"


title="Account Settings"><i class="fa fa-user"></i></a>

<a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white"


title="Messages"><i class="fa fa-envelope"></i></a>

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

<button class="w3-button w3-padding-large" title="Notifications"><i class="fa fa-bell"></i><span


class="w3-badge w3-right w3-small w3-green">3</span></button>

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

</div>

Non-Business Use
<a href="#" class="w3-bar-item w3-button w3-hide-small w3-right 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>

</div>

</div>

<!-- Navbar on small screens -->

<div id="navDemo" class="w3-bar-block w3-theme-d2 w3-hide w3-hide-large w3-hide-medium w3-


large">

<a href="#" class="w3-bar-item w3-button w3-padding-large">Link 1</a>

<a href="#" class="w3-bar-item w3-button w3-padding-large">Link 2</a>

<a href="#" class="w3-bar-item w3-button w3-padding-large">Link 3</a>

<a href="#" class="w3-bar-item w3-button w3-padding-large">My Profile</a>

</div>

<!-- Page Container -->

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

<!-- The Grid -->

<div class="w3-row">

<!-- Left Column -->

<div class="w3-col m3">

<!-- Profile -->

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

Non-Business Use
<p><i class="fa fa-birthday-cake fa-fw w3-margin-right w3-text-theme"></i> April 1, 1988</p>

</div>

</div>

<br>

<!-- Accordion -->

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

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

Non-Business Use
<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>

<!-- Interests -->

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

Non-Business Use
<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>

<!-- Alert Box -->

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

<!-- End Left Column -->

</div>

<!-- Middle Column -->

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

Non-Business Use
<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>

Non-Business Use
<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>

Non-Business Use
<!-- End Middle Column -->

</div>

<!-- Right Column -->

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

Non-Business Use
<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>

<!-- End Right Column -->

</div>

<!-- End Grid -->

</div>

<!-- End Page Container -->

</div>

<br>

<!-- Footer -->

<footer class="w3-container w3-theme-d3 w3-padding-16">

Non-Business Use
<h5>Footer</h5>

</footer>

<footer class="w3-container w3-theme-d5">

<p>Powered by <a href="https://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", "");

Non-Business Use
}

</script>

</body>

</html>

Non-Business Use

Potrebbero piacerti anche