Scribd
Upload
138 views6 pages

Webcode

The document is a template for a marketing website created with W3.CSS. It includes sections for navigation links at the top, a slideshow, what services are offered in a grid, pricing plans, an about section with team member profiles, and a contact form. Scripts are included to control the slideshow functionality.

Uploaded by

EMSAD ICT
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
138 views6 pages

Webcode

The document is a template for a marketing website created with W3.CSS. It includes sections for navigation links at the top, a slideshow, what services are offered in a grid, pricing plans, an about section with team member profiles, and a contact form. Scripts are included to control the slideshow functionality.

Uploaded by

EMSAD ICT
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 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="https://www.w3schools.com/w3css/4/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>

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


<div class="w3-top">
<div class="w3-row w3-large w3-light-grey">
<div class="w3-col s3">
<a href="#" class="w3-button w3-block">Home</a>
</div>
<div class="w3-col s3">
<a href="#plans" class="w3-button w3-block">Plans</a>
</div>
<div class="w3-col s3">
<a href="#about" class="w3-button w3-block">About</a>
</div>
<div class="w3-col s3">
<a href="#contact" class="w3-button w3-block">Contact</a>
</div>
</div>
</div>

<!-- Content -->


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

<!-- Slideshow -->


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

<!-- Slideshow next/previous buttons -->


<div class="w3-container w3-dark-grey w3-padding 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>

<!-- Grid -->


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


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


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


<h3>Promises</h3>
<p>Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque
elementum.</p>
</div>
</div>

<!-- Grid -->


<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-button 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-button 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-button w3-green w3-padding-large">Sign Up</button>
</li>
</ul>
</div>
</div>

<!-- Grid -->


<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-button w3-light-grey w3-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-button w3-light-grey w3-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-button w3-light-grey w3-block">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 class="w3-container" action="/action_page.php" target="_blank">


<div class="w3-section">
<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-section">
<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-section">
<label>Subject</label>
<input class="w3-input w3-border w3-hover-border-black" style="width:100%;"
name="Subject" required>
</div>
<div class="w3-section">
<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-button w3-block w3-black">Send</button>
</form>

</div>

<!-- Footer -->

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


<h4>Footer</h4>
<a href="#" class="w3-button 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-opacity"></i>
<i class="fa fa-instagram w3-hover-opacity"></i>
<i class="fa fa-snapchat w3-hover-opacity"></i>
<i class="fa fa-pinterest-p w3-hover-opacity"></i>
<i class="fa fa-twitter w3-hover-opacity"></i>
<i class="fa fa-linkedin w3-hover-opacity"></i>
</div>
<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>

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

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy