1. Header
Menubar
Coding Part :
<!doctype html>
<html class="no-js"
lang="en">
<head>
<meta
charset="utf-8" />
<title>Foundation |
Welcome</title>
<link
rel="stylesheet" href="css/foundation.css" />
<link
rel="stylesheet" href="css/style.css" />
<script
src="js/vendor/modernizr.js"></script>
</head>
<body>
<div class="row">
<div class="large-12">
<div class="large-12">
<!-- This is the logo -->
<div class="row">
<div
class="large-12">
<div
class="large-4 columns">
<img
src="img/logo.png">
</div> <!—Logo Div Close-->
<!-- This is the Menu Bar -->
<div class="large-8
columns">
<nav
class="top-bar" data-topbar role="navigation">
<section
class="top-bar-section">
<li><a
href="#">Home</a></li>
<li><a
href="#">About Us</a></li>
<li><a
href="#">Services</a></li>
<li><a
href="#">Contact us</a></li>
</section>
</nav>
</div> <!—Menu Bar Div Close-->
</div> <!—Class-12 Div Close-->
</div> <!— Row Div Close-->
</div>
</div>
2. Banner
Coding of Banner:-
<!-- This is the Banner-->
<div class="row">
<div
class="large-12 columns">
<img
src="img/banner.png">
</div>
</div>
3. Slider
Coding of the Slider:-
<!-- This is the Slider-->
<div class="row">
<div
class="large-12 columns">
<ul
class="example-orbit" data-orbit>
<li>
<img
src="img/fox.png" alt="slide 1" />
<div
class="orbit-caption">
Caption One.
</div>
</li>
<li
class="active">
<img src="img/fox.png"
alt="slide 2" />
<div
class="orbit-caption">
Caption Two.
</div>
</li>
<li>
<img
src="img/fox.png" alt="slide 3" />
<div
class="orbit-caption">
Caption Three.
</div>
</li>
</ul> <!—Unordered List Div Close-->
</div> <!—Large-12 Div Close-->
</div> <!—Row Div Close-->
4. Content Bar :-
Coding of the Content Bar:-
<!--This is the Content Bar -->
<div class="row">
<div
class="large-12 columns">
<div
class="large-4 columns">
<img
src="img/about.png">
<h4>About
Us</h4>
<p>
Lorem Ipsum is
simply dummy text of the printing and typesetting industry. Lorem Ipsum has
been the industry's standard dummy text ever since the 1500s
</p>
</div>
<div
class="large-4 columns">
<img
src="img/services.png">
<h4>Services</h4>
<p>
Lorem Ipsum is
simply dummy text of the printing and typesetting industry. Lorem Ipsum has
been the industry's standard dummy text ever since the 1500s
</p>
</div>
<div
class="large-4 columns">
<h4>Testimonial</h4>
<p>
Lorem Ipsum is
simply dummy text of the printing and typesetting industry. Lorem Ipsum has
been the industry's standard dummy text ever since the 1500s
Lorem Ipsum is
simply dummy text of the printing and typesetting industry. Lorem Ipsum has
been the industry's standard dummy text ever since the 1500s
Lorem Ipsum is
simply dummy text of the printing and typesetting industry. Lorem Ipsum has
been the industry's standard dummy text ever since the 1500s
</p>
</div>
No comments:
Post a Comment