<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252"><title>W3.CSS Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="W3.CSS%20Template_files/w3.css">
<link rel="stylesheet" href="W3.CSS%20Template_files/css.css">
<link rel="stylesheet" href="W3.CSS%20Template_files/font-awesome.css">
<style>
html,body,h1,h2,h3,h4,h5 {font-family: "Lato", sans-serif}
.mySlides {display:none}
.w3-left, .w3-right, .w3-tag {cursor:pointer}
.w3-tag {height:15px;width:15px;padding:0;margin-top:6px}
</style>
</head><body>
<!-- Navbar -->
<ul class="w3-navbar w3-left-align w3-light-grey w3-center w3-top w3-large">
<li class="w3-left" style="width:25% !important"><a href="#">Home</a></li>
<li class="w3-left" style="width:25% !important"><a href="#plans">Plans</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="#contact">Contact</a></li>
</ul>
<!-- Content -->
<div class="w3-content w3-container" style="max-width:1100px;margin-top:80px;margin-bottom:80px">
<div class="w3-section">
<h1><b>MARKETING</b></h1>
<p>Template by w3.css</p>
</div>
<!-- Slideshow -->
<div style="display: none;" class="w3-display-container mySlides">
<img src="W3.CSS%20Template_files/img_coffee.jpg" style="width:100%">
<div class="w3-display-topleft w3-text-white w3-container w3-padding-32 w3-hide-small">
<span class="w3-white w3-padding-large w3-animate-bottom">Lorem ipsum</span>
</div>
</div>
<div style="display: none;" class="w3-display-container mySlides">
<img src="W3.CSS%20Template_files/img_workbench.jpg" style="width:100%">
<div class="w3-display-middle w3-text-white w3-container w3-padding-32 w3-hide-small">
<span class="w3-white w3-padding-large w3-animate-bottom">Lorem ipsum hipsum</span>
</div>
</div>
<div style="display: block;" class="w3-display-container mySlides">
<img src="W3.CSS%20Template_files/img_sound.jpg" style="width:100%">
<div class="w3-display-topright w3-text-white w3-container w3-padding-32 w3-hide-small">
<span class="w3-white w3-padding-large w3-animate-bottom">Lorem ipsum hipsum</span>
</div>
</div>
<!-- Slideshow next/previous buttons -->
<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 w3-white" onclick="currentDiv(3)"></span>
</div>
</div>
<!-- Grid -->
<div class="w3-row">
<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-padding-large">
<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-padding-large">
<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-padding-large">
<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-padding-large">
<h3>Promises</h3>
<p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.</p>
</div>
</div>
<!-- Grid -->
<div class="w3-row-padding" style="margin:0 -16px" 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>
<!-- Grid -->
<div class="w3-row-padding" style="margin:0 -16px" 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="W3.CSS%20Template_files/img_avatar1.png" alt="Norway" 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">Contact</button></p>
</div>
</div>
</div>
<div class="w3-third w3-margin-bottom">
<div class="w3-card-4">
<img src="W3.CSS%20Template_files/img_avatar3.png" alt="Norway" 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">Contact</button></p>
</div>
</div>
</div>
<div class="w3-third w3-margin-bottom">
<div class="w3-card-4">
<img src="W3.CSS%20Template_files/img_avatar6.png" alt="Norway" 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>
<p><button class="w3-btn">Contact</button></p>
</div>
</div>
</div>
</div>
<!-- Contact -->
<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>
<div class="w3-group">
<label>Name</label>
<input class="w3-input w3-border w3-hover-border-black" style="width:100%;" type="text">
</div>
<div class="w3-group">
<label>Email</label>
<input class="w3-input w3-border w3-hover-border-black" style="width:100%;" type="text">
</div>
<div class="w3-group">
<label>Subject</label>
<input class="w3-input w3-border w3-hover-border-black" style="width:100%;">
</div>
<button type="button" class="w3-btn w3-btn-block w3-padding-12">Send</button>
</form>
</div>
<!-- Footer -->
<footer class="w3-container w3-padding-32 w3-light-grey w3-center">
<h4>Footer</h4>
<p>Powered by <a href="http://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a></p>
</footer>
<script>
// Slideshow script
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("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>
در این آموزش فقط قصد ارائه ی یک مثال را داریم در آینده صفر تا صد طراحی یک تم از ایجاد آن در فتوشاپ تا ایجاد کد های Php تا نحوه تبدیل کد های Php به یه سایت با قابلیت مدیریت محتوا خواهیم پرداخت با ما همراه باشید.