Файл: CLOUDME-HTML/typography.html
Строк: 520
<?php
<!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>Typography - CloudMe - Responsive Web Hosting HTML Template</title>
<link rel="shortcut icon" href="images/icons/favicon.png" />
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/animate.min.css" />
<link rel="stylesheet" href="css/morphext.css" />
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/owl.theme.css">
<link rel="stylesheet" href="css/owl.transitions.css">
<link rel="stylesheet" href="css/slicknav.css">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- HEADER -->
<header class="alt-1">
<div class="top">
<div class="row">
<div class="small-12 large-3 medium-3 columns">
<div class="logo">
<a href="index.html" title=""><img src="images/logo.png" alt="" title=""/></a>
</div>
</div>
<div class="small-12 large-9 medium-9 columns">
<!-- NAVIGATION MENU AREA -->
<nav class="desktop-menu">
<ul class="sf-menu" id="navigation">
<li><a href="index.html">HOME</a>
<ul>
<li><a href="index-video.html">HOME VIDEO HEADER</a></li>
<li><a href="index-slider.html">HOME SLIDER</a></li>
</ul>
</li>
<li><a href="#">HOSTING</a>
<ul>
<li><a href="shared.html">SHARED HOSTING</a></li>
<li><a href="vps.html">CLOUD VPS</a></li>
<li><a href="servers.html">DEDICATED SERVERS</a></li>
</ul>
</li>
<li><a href="domains.html">DOMAINS</a></li>
<li class="current-menu-item"><a href="#">PAGES</a>
<ul>
<li><a href="order-slider.html">ORDER SLIDER</a></li>
<li><a href="about-us.html">ABOUT US</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="datacenter.html">DATACENTERS</a></li>
<li><a href="support.html">SUPPORT</a></li>
<li><a href="login.html">LOGIN</a></li>
<li><a href="testimonials.html">TESTIMONIALS</a></li>
<li><a href="typography.html">TYPOGRAPHY</a></li>
<li><a href="index-sticky-top.html">STICKY HEADER</a></li>
</ul>
</li>
<li><a href="#">BLOG</a>
<ul>
<li><a href="blog.html">CATEGORY</a></li>
<li><a href="blog-single.html">SINGLE POST</a></li>
</ul>
</li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</nav>
<!-- END OF NAVIGATION MENU AREA -->
</div>
</div>
</div>
<!-- MESSAGES ABOVE HEADER IMAGE -->
<div class="message">
<div class="row">
<div class="small-12 columns">
<div class="message-intro">
<span class="message-line"></span>
<p>Typography</p>
<span class="message-line"></span>
</div>
<h1>KITCHEN SINK OF TEMPLATE FEATURES</h1>
</div>
</div>
</div>
<!-- END OF MESSAGES ABOVE HEADER IMAGE -->
</header>
<!-- END OF HEADER -->
<!-- FEATURES -->
<div class="typography-subheader">
<div class="row">
<div class="small-12 columns">
<hr>
<h4 id="alert-boxes">Alert Boxes</h4>
<div class="callout" data-closable>
This is alert
<button class="close-button" aria-label="Dismiss alert" type="button" data-close>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="callout secondary" data-closable>
This is alert
<button class="close-button" aria-label="Dismiss alert" type="button" data-close>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="callout primary" data-closable>
This is alert
<button class="close-button" aria-label="Dismiss alert" type="button" data-close>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="callout success" data-closable>
This is alert
<button class="close-button" aria-label="Dismiss alert" type="button" data-close>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="callout warning" data-closable>
This is alert
<button class="close-button" aria-label="Dismiss alert" type="button" data-close>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="callout alert" data-closable>
This is alert
<button class="close-button" aria-label="Dismiss alert" type="button" data-close>
<span aria-hidden="true">×</span>
</button>
</div>
<hr>
<h4 id="block-grid">Block Grid</h4>
<ul class="small-block-grid-2 large-block-grid-4">
<li><img class="th" src="images/test-img.jpg" alt=""></li>
<li><img class="th" src="images/test-img.jpg" alt=""></li>
<li><img class="th" src="images/test-img.jpg" alt=""></li>
<li><img class="th" src="images/test-img.jpg" alt=""></li>
</ul>
<hr>
<h4 id="breadcrumbs">Breadcrumbs</h4>
<nav aria-label="You are here:" role="navigation">
<ul class="breadcrumbs">
<li><a href="#">Home</a></li>
<li><a href="#">Features</a></li>
<li class="disabled">Gene Splicing</li>
<li>
<span class="show-for-sr">Current: </span> Cloning
</li>
</ul>
</nav>
<hr>
<h4 id="buttons">Buttons</h4>
<div class="row">
<div class="small-6 large-6 columns">
<!-- Anchors (links) -->
<a href="about.html" class="button">Learn More</a>
<a href="#features" class="button">View All Features</a>
<!-- Buttons (actions) -->
<button type="button" class="success button">Save</button>
<button type="button" class="alert button">Delete</button>
<a class="secondary button" href="#">Secondary Color</a>
<a class="success button" href="#">Success Color</a>
<a class="alert button" href="#">Alert Color</a>
<a class="warning button" href="#">Warning Color</a>
<a class="disabled button" href="#">Disabled Button</a>
<button class="hollow button" href="#">Primary Color</button>
<button class="secondary hollow button" href="#">Secondary Color</button>
<button class="success hollow button" href="#">Success Color</button>
<button class="alert hollow button" href="#">Alert Color</button>
<button class="warning hollow button" href="#">Warning Color</button>
</div>
<div class="small-6 large-6 columns">
<a class="tiny button" href="#">So Tiny</a>
<a class="small button" href="#">So Small</a>
<a class="button" href="#">So Basic</a>
<a class="large button" href="#">So Large</a>
<a class="expanded button" href="#">Such Expand</a>
<a class="small expanded button" href="#">Wow, Small Expand</a>
</div>
</div>
<hr>
<h4 id="button-groups">Button Groups</h4>
<div class="button-group">
<a class="button">One</a>
<a class="button">Two</a>
<a class="button">Three</a>
</div>
<div class="small button-group">
<a class="button">Small</a>
<a class="button">Button</a>
<a class="button">Group</a>
</div>
<div class="button-group">
<a class="secondary button">View</a>
<a class="success button">Edit</a>
<a class="warning button">Share</a>
<a class="alert button">Delete</a>
</div>
<div class="secondary button-group">
<a class="button">Harder</a>
<a class="button">Better</a>
<a class="button">Faster</a>
<a class="button">Stronger</a>
</div>
<div class="expanded button-group">
<a class="button">Expanded</a>
<a class="button">Button</a>
<a class="button">Group</a>
</div>
<hr>
<h4 id="flex-video">Flex Video</h4>
<div class="flex-video">
<iframe width="420" height="315" src="https://www.youtube.com/embed/V9gkYw35Vws" frameborder="0" allowfullscreen></iframe>
</div>
<div class="flex-video widescreen">
<iframe width="420" height="315" src="https://www.youtube.com/embed/aiBt44rrslw" frameborder="0" allowfullscreen></iframe>
</div>
<div class="flex-video widescreen vimeo">
<iframe src="http://player.vimeo.com/video/60122989" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
<hr>
<h4 id="tooltips">Tooltips</h4>
<p>
The <span data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover='false' tabindex=1 title="Fancy word for a beetle.">scarabaeus</span> hung quite clear of any branches, and, if allowed to fall, would have fallen at our feet. Legrand immediately took the scythe, and cleared with it a circular space, three or four yards in diameter, just beneath the insect, and, having accomplished this, ordered Jupiter to let go the string and come down from the tree.
</p>
<hr>
<h4 id="accordion">Accordion</h4>
<ul class="accordion" data-accordion role="tablist">
<li class="accordion-item is-active">
<!-- The tab title needs role="tab", an href, a unique ID, and aria-controls. -->
<a href="#panel1d" role="tab" class="accordion-title" id="panel1d-heading" aria-controls="panel1d">Accordion 1</a>
<!-- The content pane needs an ID that matches the above href, role="tabpanel", data-tab-content, and aria-labelledby. -->
<div id="panel1d" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel1d-heading">
Panel 1. Lorem ipsum dolor
</div>
</li>
<li class="accordion-item">
<!-- The tab title needs role="tab", an href, a unique ID, and aria-controls. -->
<a href="#panel1d" role="tab" class="accordion-title" id="panel1d-heading" aria-controls="panel1d">Accordion 1</a>
<!-- The content pane needs an ID that matches the above href, role="tabpanel", data-tab-content, and aria-labelledby. -->
<div id="panel1d" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel1d-heading">
Panel 2. Lorem ipsum dolor
</div>
</li>
<li class="accordion-item">
<!-- The tab title needs role="tab", an href, a unique ID, and aria-controls. -->
<a href="#panel1d" role="tab" class="accordion-title" id="panel1d-heading" aria-controls="panel1d">Accordion 1</a>
<!-- The content pane needs an ID that matches the above href, role="tabpanel", data-tab-content, and aria-labelledby. -->
<div id="panel1d" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel1d-heading">
Panel 3. Lorem ipsum dolor
</div>
</li>
</ul>
<hr>
<h4 id="badges">Badges</h4>
<span class="secondary badge">2</span>
<span class="success badge">3</span>
<span class="alert badge">A</span>
<span class="warning badge">B</span>
<hr>
<h4 id="labels">Labels</h4>
<span class="secondary label">Secondary Label</span>
<span class="success label">Success Label</span>
<span class="alert label">Alert Label</span>
<span class="warning label">Warning Label</span>
<hr>
<h4 id="pagination">Pagination</h4>
<ul class="pagination" role="navigation" aria-label="Pagination">
<li class="disabled">Previous <span class="show-for-sr">page</span></li>
<li class="current"><span class="show-for-sr">You're on page</span> 1</li>
<li><a href="#" aria-label="Page 2">2</a></li>
<li><a href="#" aria-label="Page 3">3</a></li>
<li><a href="#" aria-label="Page 4">4</a></li>
<li class="ellipsis" aria-hidden="true"></li>
<li><a href="#" aria-label="Page 12">12</a></li>
<li><a href="#" aria-label="Page 13">13</a></li>
<li><a href="#" aria-label="Next page">Next <span class="show-for-sr">page</span></a></li>
</ul>
<hr>
<h4 id="progress-bars">Progress Bars</h4>
<div class="progress" role="progressbar" tabindex="0" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<div class="progress-meter"></div>
</div>
<div class="progress" role="progressbar" tabindex="0" aria-valuenow="50" aria-valuemin="0" aria-valuetext="50 percent" aria-valuemax="100">
<div class="progress-meter" style="width: 50%"></div>
</div>
<div class="success progress" role="progressbar" tabindex="0" aria-valuenow="25" aria-valuemin="0" aria-valuetext="25 percent" aria-valuemax="100">
<div class="progress-meter" style="width: 25%"></div>
</div>
<div class="warning progress">
<div class="progress-meter" style="width: 50%"></div>
</div>
<div class="alert progress">
<div class="progress-meter" style="width: 75%"></div>
</div>
<div class="progress" role="progressbar" tabindex="0" aria-valuenow="20" aria-valuemin="0" aria-valuetext="25 percent" aria-valuemax="100">
<span class="progress-meter" style="width: 25%">
<p class="progress-meter-text">25%</p>
</span>
</div>
<hr/>
<h4 id="modals">Modals</h4>
<p><a data-open="exampleModal1">Click me for a modal</a></p>
<div class="reveal" id="exampleModal1" data-reveal>
<h1>Awesome. I Have It.</h1>
<p class="lead">Your couch. It is mine.</p>
<p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
<button class="close-button" data-close aria-label="Close reveal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<p><a data-toggle="exampleModal12">Video modal</a></p>
<div class="reveal" id="exampleModal12" data-reveal data-reset-on-close="true">
<h2 id="videoModalTitle">This modal has video</h2>
<div class="flex-video widescreen vimeo">
<iframe width="1280" height="720" src="https://www.youtube-nocookie.com/embed/wnXCopXXblE?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<button class="close-button" data-close aria-label="Close reveal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
</div>
<!-- END OF FEATURES -->
<!-- FOOTER -->
<footer>
<div class="row">
<div class="small-12 columns">
<div class="contacts">
<div class="row">
<div class="small-12 large-3 medium-3 columns">
<i class="fa fa-map-marker"></i>
PORTLAND, OR, USA
</div>
<div class="small-12 large-3 medium-3 columns">
<i class="fa fa-mobile"></i>
+1 299-670-9615
</div>
<div class="small-12 large-3 medium-3 columns">
<a href=""><i class="fa fa-comments"></i></a>
LIVE CHAT
</div>
<div class="small-12 large-3 medium-3 columns">
<a href=""><i class="fa fa-envelope-o"></i></a>
E-MAIL US
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<div class="footerlinks">
<div class="small-12 large-3 medium-3 columns border-right">
<h2>Hosting Services</h2>
<ul>
<li><a href="shared.html">Shared Hosting</a></li>
<li><a href="vps.html">Managed VPS</a></li>
<li><a href="servers.html">Dedicated Services</a></li>
<li><a href="">Become a Reseller</a></li>
<li><a href="">Special Offers</a></li>
</ul>
</div>
<div class="small-12 large-3 medium-3 columns border-right">
<h2>Company</h2>
<ul>
<li><a href="">About us</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Terms of Service</a></li>
<li><a href="">Acceptable Use Policy</a></li>
<li><a href="">Affiliates</a></li>
</ul>
</div>
<div class="small-12 large-3 medium-3 columns border-right">
<h2>Add-on Services</h2>
<ul>
<li><a href="">SSL Certificates</a></li>
<li><a href="">Dedicated IPs</a></li>
<li><a href="">Control Panel Licenses</a></li>
<li><a href="">WHMCS License</a></li>
<li><a href="">Migrations / Transfers</a></li>
</ul>
</div>
<div class="small-12 large-3 medium-3 columns">
<h2>CloudMe Newsletter</h2>
<p>Sign up for special offers:</p>
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="//audemedia.us7.list-manage.com/subscribe/post?u=b5638e105dac814ad84960d90&id=9345afa0aa" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_b5638e105dac814ad84960d90_9345afa0aa" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</form>
</div>
</div>
<!--End mc_embed_signup-->
</div>
</div>
</div>
<!--SOCIAL LINKS -->
<div class="social">
<div class="row">
<div class="small-12 columns">
<ul class="small-block-grid-1 large-block-grid-5 medium-block-grid-5">
<li class="facebook"><a href="">FACEBOOK</a></li>
<li class="twitter"><a href="">TWITTER</a></li>
<li class="googleplus"><a href="">GOOGLE+</a></li>
<li class="linkedin"><a href="">LINKEDIN</a></li>
<li class="pinterest"><a href="">PINTEREST</a></li>
</ul>
</div>
</div>
</div>
<!-- END OF SOCIAL LINKS -->
<p class="copyright">© Copyright CloudMe, all rights reserved. </p>
</footer>
<!-- END OF FOOTER -->
<a href="#top" id="back-to-top"><i class="fa fa-angle-up"></i></a>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.min.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/vendor/hoverIntent.js"></script>
<script src="js/vendor/superfish.min.js"></script>
<script src="js/vendor/morphext.min.js"></script>
<script src="js/vendor/wow.min.js"></script>
<script src="js/vendor/jquery.slicknav.min.js"></script>
<script src="js/vendor/waypoints.min.js"></script>
<script src="js/vendor/jquery.animateNumber.min.js"></script>
<script src="js/vendor/owl.carousel.min.js"></script>
<script src="js/vendor/retina.min.js"></script>
<script src="js/custom.js"></script>
</body>
</html>
?>