Foundation 6 example marku

Developer
John Stammerman
Size
5,625 Kb
Views
48,576
  1. Foundation 6 example marku Previews
  2. Foundation 6 example marku HTML Codes
  3. Foundation 6 example marku CSS Codes
  4. Foundation 6 example marku JS Codes

How do I make an foundation 6 example marku?

Based on http://codepen.io/hubpork/pen/qOGZQM by http://codepen.io/hubpork. Just wanted to play around with the latest Foundation markup structure.. What is a foundation 6 example marku? How do you make a foundation 6 example marku? This script and codes were developed by John Stammerman on 22 July 2022, Friday.

Foundation 6 example marku Previews
IQ Test

Foundation 6 example marku - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Foundation 6 example marku</title> <link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="off-canvas-wrapper"> <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper=""> <div class="off-canvas position-right" id="offCanvas" data-off-canvas="" data-position="right"> <button class="close-button" aria-label="Close menu" type="button" data-close=""><span aria-hidden="true">×</span></button> <ul class="mobile-ofc vertical menu"> <li><a href="http://foundation.zurb.com/learn/about.html">Learn</a> <ul class="submenu menu vertical"> <li><a href="http://foundation.zurb.com/learn/about.html">About Foundation</a></li> <li><a href="http://foundation.zurb.com/learn/tutorials.html">Tutorials</a></li> </ul> </li> <li><a href="develop/getting-started.html">Develop</a> <ul class="submenu menu vertical"> <li class="divider"></li> <li class="title">Develop</li> <li><a href="http://foundation.zurb.com/templates.html">HTML Templates</a></li> </ul> </li> <li><a href="http://foundation.zurb.com/support/support.html">Support</a> <ul class="submenu menu vertical"> <li><a href="http://foundation.zurb.com/support/support.html">Support Channels</a></li> <li><a href="http://foundation.zurb.com/support/premium-support.html">Premium Support</a></li> <li><a href="http://foundation.zurb.com/forum/sort/unanswered">Foundation Forum</a></li> <li><a href="http://foundation.zurb.com/support/faq.html">FAQs</a></li> </ul> </li> </ul> </div> <div class="off-canvas-content" data-off-canvas-content=""> <div class="top-bar my-top-bar"> <h1 class="float-left title">Foundation Site Template</h1> <button class="button float-right margin-0" type="button" data-toggle="offCanvas">Menu</button> </div> <div class="callout large primary"> <div class="row column text-center"> <h1>Whoa! This is cool.</h1> <h2 class="subheader">Foundation 6 styles &amp; such</h2> </div> </div> <div class="row medium-8 large-7 columns"> <div class="blog-post"> <h3>Awesome blog post title <small>3/6/2015</small></h3><img class="thumbnail" src="http://placehold.it/850x350"/> <p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus.</p> <div class="callout"> <ul class="menu simple"> <li><a href="#">Author: Mike Mikers</a></li> <li><a href="#">Comments: 3</a></li> </ul> </div> </div> </div> <div class="callout large"> <div class="row column text-center"> <h1>Changing the World Through Design</h1> <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris.</p><a class="button large" href="#">Learn More</a><a class="button large hollow" href="#">Learn Less</a> </div> </div> <div class="row"> <div class="medium-6 columns medium-push-6"><img class="thumbnail" src="http://placehold.it/750x350"/></div> <div class="medium-6 columns medium-pull-6"> <h2>Our Agency, our selves.</h2> <p>Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor.</p> </div> </div> <div class="row"> <div class="medium-4 columns"> <h3>Photoshop</h3> <p>Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna.</p> </div> <div class="medium-4 columns"> <h3>Javascript</h3> <p>Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna.</p> </div> <div class="medium-4 columns"> <h3>Marketing</h3> <p>Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna.</p> </div> </div> <hr/> <div class="row column"> <ul class="vertical medium-horizontal menu expanded text-center"> <li><a href="#"> <div class="stat">28</div><span>Websites</span></a></li> <li><a href="#"> <div class="stat">43</div><span>Apps</span></a></li> <li><a href="#"> <div class="stat">95</div><span>Ads</span></a></li> <li><a href="#"> <div class="stat">59</div><span>Cakes</span></a></li> <li><a href="#"> <div class="stat">18</div><span>Logos</span></a></li> </ul> </div> <hr/> <div class="row column"> <h3>Our Recent Work</h3> </div> <div class="row medium-up-3 large-up-4"> <div class="column"><img class="thumbnail" src="http://placehold.it/550x550"/></div> <div class="column"><img class="thumbnail" src="http://placehold.it/550x550"/></div> <div class="column"><img class="thumbnail" src="http://placehold.it/550x550"/></div> <div class="column"><img class="thumbnail" src="http://placehold.it/550x550"/></div> <div class="column"><img class="thumbnail" src="http://placehold.it/550x550"/></div> <div class="column"><img class="thumbnail" src="http://placehold.it/550x550"/></div> <div class="column"><img class="thumbnail" src="http://placehold.it/550x550"/></div> <div class="column"><img class="thumbnail" src="http://placehold.it/550x550"/></div> <div class="column"><img class="thumbnail" src="http://placehold.it/550x550"/></div> <div class="column"><img class="thumbnail" src="http://placehold.it/550x550"/></div> <div class="column"><img class="thumbnail" src="http://placehold.it/550x550"/></div> <div class="column"><img class="thumbnail" src="http://placehold.it/550x550"/></div> </div> <div class="row column"> <h3>Flex!</h3> </div> <div class="row"> <div class="small-4 columns">4 columns</div> <div class="columns">Whatever's left!</div> </div> <hr/> <div class="row column"> <ul class="menu"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> <li><a href="#">Four</a></li> </ul> </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.js'></script> <script src="js/index.js"></script>
</body>
</html>

Foundation 6 example marku - Script Codes CSS Codes

.off-canvas-content { padding-top: 57px;
}
.margin-0 { margin: 0;
}
.mobile-ofc { background: #121212; font-size: 0.8125rem; font-weight: bold;
}
.mobile-ofc .menu a { height: 45px; line-height: 45px; color: #e6e6e6; padding-top: 0; padding-bottom: 0;
}
.mobile-ofc .menu a:hover:not(.button), .mobile-ofc .menu a:focus { background: black;
}
.mobile-ofc .menu a.button { border-radius: 0; box-shadow: 0 0 0 transparent;
}
.mobile-ofc .title { color: #8a8a8a; padding: 10px; padding-left: 15px; font-size: 0.8em; background: #2c2c2c;
}
.off-canvas-wrapper { background: #2c2c2c;
}
.close-button { position: absolute; color: #8a8a8a; right: 1rem; top: 0.5rem; font-size: 2em; line-height: 1; cursor: pointer;
}
.my-top-bar { position: fixed; width: 100%; left: 0; top: 0; z-index: 2;
}
.my-top-bar .title { font-size: 1.5rem;
}

Foundation 6 example marku - Script Codes JS Codes

$(document).foundation();
Foundation 6 example marku - Script Codes
Foundation 6 example marku - Script Codes
Home Page Home
Developer John Stammerman
Username jstam
Uploaded July 22, 2022
Rating 3
Size 5,625 Kb
Views 48,576
Do you need developer help for Foundation 6 example marku?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

John Stammerman (jstam) Script Codes
Name
Checkbox select all example
CodePen Profile Customization
SVG gaussian blur filter on background image
LESS CSS multiple background gradient mixin
Burpee Equivalent Calculator
UI Pattern Library
Toying with Flexbox
A Pen by John Stammerman
Hard Work Progress Chart
Spelling words quizzer
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!