// Index.html
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" type="text/css" href="style.css">
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div class="row border">
<div class="large-12">
<div class="row">
<div class="large-12 medium-12 small-12 columns ">
<div class="large-4 medium-4 small-12 scolumns">
<img src="img/logo.png">
</div><!-- Large-4 Div End-->
<div class="large-8 medium-8 small-12 columns">
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<a class="left-off-canvas-toggle" href="#" >Menu</a>
<!-- Off Canvas Menu -->
<aside class="left-off-canvas-menu">
<!-- whatever you want goes here -->
<ul>
<li><a href="#">Item 1</a></li>
...
</ul>
</aside>
<!-- main content goes here -->
<!-- close the off-canvas menu -->
<a class="exit-off-canvas"></a>
</div>
</div>
</div><!-- large-8 Class End-->
</div><!-- Large-12 Div End-->
</div><!-- Row Div End-->
<div class="row">
<div class="large-12 medium-12 column">
<img src="img/Untitled-1.png">
</div>
</div>
<div class="row">
<div class="large-12 medium-12 column">
<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>
</div>
</div>
<div class="row">
<div class="large-12 medium-12 small-12 columns">
<div class="about_us_padding">
<div class="large-4 medium-4 small-12 columns">
<img src="img/about-us.png">
<h3 class="font_walkway">About Us</h3>
<p>
The top bar is a pretty complex piece of magical UI goodness.
The top bar is a pretty complex piece of magical UI goodness.
</p>
</div>
<div class="large-4 medium-4 small-12 columns">
<img src="img/Services.png">
<h3>Services</h3>
<p>
The top bar is a pretty complex piece of magical UI goodness.
The top bar is a pretty complex piece of magical UI goodness.
</p>
</div>
<div class="large-4 medium-4 small-12 columns">
<h3>Testimonials</h3>
<p>
The top bar is a pretty complex piece of magical UI goodness. We rely on many presentational classes to define its look and feel, and there's a lot happening in the JS. The top bar is hoverable by default, but you can change it use click events instead by adding.The top bar is a pretty complex piece of magical UI goodness.
</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<div class="large-3 columns">
<a href="#" class="client"><img src="img/about-us.png"></a>
</div>
<div class="large-3 columns">
<a href="#" class="client"><img src="img/about-us.png"></a>
</div>
<div class="large-3 columns">
<a href="#" class="client"><img src="img/about-us.png"></a>
</div>
<div class="large-3 columns">
<a href="#" class="client"><img src="img/about-us.png"></a>
</div>
<div class="large-3 columns">
<a href="#" class="client"><img src="img/about-us.png"></a>
</div>
<div class="large-3 columns">
<a href="#" class="client"><img src="img/about-us.png"></a>
</div>
<div class="large-3 columns">
<a href="#" class="client"><img src="img/about-us.png"></a>
</div>
<div class="large-3 columns">
<a href="#" class="client"><img src="img/about-us.png"></a>
</div>
</div>
</div>
<div class="row">
<div class="large-12 medium-12 small-12 column">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1><a href="#">Copy Right@2014 By TechNaitra</a></h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="right">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</section>
</nav>
</div>
</div>
</div></div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
// Stle.css file
@charset "utf-8";
/* CSS Document */
.border{
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);}
.top-bar {
}
.about_us_padding{
margin:20px;
}
.font_walkway{
font-family:walkway;
}
.client {
margin:0 0px;
filter: grayscale(100%);
-webkit-filter: grayscale(100%); /* For Webkit browsers */
filter: gray; /* For IE 6 - 9 */
-webkit-transition: all .6s ease; /* Transition for Webkit browsers */
opacity:0.5;
max-height: 65px;
}
.client:hover {
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
filter: none;
opacity:1.0;
}
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" type="text/css" href="style.css">
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div class="row border">
<div class="large-12">
<div class="row">
<div class="large-12 medium-12 small-12 columns ">
<div class="large-4 medium-4 small-12 scolumns">
<img src="img/logo.png">
</div><!-- Large-4 Div End-->
<div class="large-8 medium-8 small-12 columns">
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<a class="left-off-canvas-toggle" href="#" >Menu</a>
<!-- Off Canvas Menu -->
<aside class="left-off-canvas-menu">
<!-- whatever you want goes here -->
<ul>
<li><a href="#">Item 1</a></li>
...
</ul>
</aside>
<!-- main content goes here -->
<!-- close the off-canvas menu -->
<a class="exit-off-canvas"></a>
</div>
</div>
</div><!-- large-8 Class End-->
</div><!-- Large-12 Div End-->
</div><!-- Row Div End-->
<div class="row">
<div class="large-12 medium-12 column">
<img src="img/Untitled-1.png">
</div>
</div>
<div class="row">
<div class="large-12 medium-12 column">
<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>
</div>
</div>
<div class="row">
<div class="large-12 medium-12 small-12 columns">
<div class="about_us_padding">
<div class="large-4 medium-4 small-12 columns">
<img src="img/about-us.png">
<h3 class="font_walkway">About Us</h3>
<p>
The top bar is a pretty complex piece of magical UI goodness.
The top bar is a pretty complex piece of magical UI goodness.
</p>
</div>
<div class="large-4 medium-4 small-12 columns">
<img src="img/Services.png">
<h3>Services</h3>
<p>
The top bar is a pretty complex piece of magical UI goodness.
The top bar is a pretty complex piece of magical UI goodness.
</p>
</div>
<div class="large-4 medium-4 small-12 columns">
<h3>Testimonials</h3>
<p>
The top bar is a pretty complex piece of magical UI goodness. We rely on many presentational classes to define its look and feel, and there's a lot happening in the JS. The top bar is hoverable by default, but you can change it use click events instead by adding.The top bar is a pretty complex piece of magical UI goodness.
</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<div class="large-3 columns">
<a href="#" class="client"><img src="img/about-us.png"></a>
</div>
<div class="large-3 columns">
<a href="#" class="client"><img src="img/about-us.png"></a>
</div>
<div class="large-3 columns">
<a href="#" class="client"><img src="img/about-us.png"></a>
</div>
<div class="large-3 columns">
<a href="#" class="client"><img src="img/about-us.png"></a>
</div>
<div class="large-3 columns">
<a href="#" class="client"><img src="img/about-us.png"></a>
</div>
<div class="large-3 columns">
<a href="#" class="client"><img src="img/about-us.png"></a>
</div>
<div class="large-3 columns">
<a href="#" class="client"><img src="img/about-us.png"></a>
</div>
<div class="large-3 columns">
<a href="#" class="client"><img src="img/about-us.png"></a>
</div>
</div>
</div>
<div class="row">
<div class="large-12 medium-12 small-12 column">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1><a href="#">Copy Right@2014 By TechNaitra</a></h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="right">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</section>
</nav>
</div>
</div>
</div></div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
// Stle.css file
@charset "utf-8";
/* CSS Document */
.border{
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);}
.top-bar {
}
.about_us_padding{
margin:20px;
}
.font_walkway{
font-family:walkway;
}
.client {
margin:0 0px;
filter: grayscale(100%);
-webkit-filter: grayscale(100%); /* For Webkit browsers */
filter: gray; /* For IE 6 - 9 */
-webkit-transition: all .6s ease; /* Transition for Webkit browsers */
opacity:0.5;
max-height: 65px;
}
.client:hover {
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
filter: none;
opacity:1.0;
}
