176 lines
6.1 KiB
HTML
176 lines
6.1 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="A layout example that shows off a responsive product landing page.">
|
|
<title>Landing Page – Layout Examples – Pure</title>
|
|
|
|
<link rel="stylesheet" href="css/pure-min.css" integrity="sha384-" crossorigin="anonymous">
|
|
|
|
<!--[if lte IE 8]>
|
|
<link rel="stylesheet" href="css/grids-responsive-old-ie-min.css">
|
|
<![endif]-->
|
|
<!--[if gt IE 8]><!-->
|
|
<link rel="stylesheet" href="css/grids-responsive-min.css">
|
|
<!--<![endif]-->
|
|
|
|
<link rel="stylesheet" href="css/font-awesome.css">
|
|
|
|
<!--[if lte IE 8]>
|
|
<link rel="stylesheet" href="css/layouts/marketing-old-ie.css">
|
|
<![endif]-->
|
|
<!--[if gt IE 8]><!-->
|
|
<link rel="stylesheet" href="css/layouts/marketing.css">
|
|
<!--<![endif]-->
|
|
</head>
|
|
<body>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="header">
|
|
<div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed">
|
|
<a class="pure-menu-heading" href="">Your Site</a>
|
|
|
|
<ul class="pure-menu-list">
|
|
<li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">Home</a></li>
|
|
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Tour</a></li>
|
|
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Sign Up</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="splash-container">
|
|
<div class="splash">
|
|
<h1 class="splash-head">Big Bold Text</h1>
|
|
<p class="splash-subhead">
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
|
</p>
|
|
<p>
|
|
<a href="http://purecss.io" class="pure-button pure-button-primary">Get Started</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-wrapper">
|
|
<div class="content">
|
|
<h2 class="content-head is-center">Excepteur sint occaecat cupidatat.</h2>
|
|
|
|
<div class="pure-g">
|
|
<div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
|
|
|
|
<h3 class="content-subhead">
|
|
<i class="fa fa-rocket"></i>
|
|
Get Started Quickly
|
|
</h3>
|
|
<p>
|
|
Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.
|
|
</p>
|
|
</div>
|
|
<div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
|
|
<h3 class="content-subhead">
|
|
<i class="fa fa-mobile"></i>
|
|
Responsive Layouts
|
|
</h3>
|
|
<p>
|
|
Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.
|
|
</p>
|
|
</div>
|
|
<div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
|
|
<h3 class="content-subhead">
|
|
<i class="fa fa-th-large"></i>
|
|
Modular
|
|
</h3>
|
|
<p>
|
|
Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.
|
|
</p>
|
|
</div>
|
|
<div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
|
|
<h3 class="content-subhead">
|
|
<i class="fa fa-check-square-o"></i>
|
|
Plays Nice
|
|
</h3>
|
|
<p>
|
|
Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ribbon l-box-lrg pure-g">
|
|
<div class="l-box-lrg is-center pure-u-1 pure-u-md-1-2 pure-u-lg-2-5">
|
|
<img width="300" alt="File Icons" class="pure-img-responsive" src="img/common/file-icons.png">
|
|
</div>
|
|
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-3-5">
|
|
|
|
<h2 class="content-head content-head-ribbon">Laboris nisi ut aliquip.</h2>
|
|
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
consequat. Duis aute irure dolor.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<h2 class="content-head is-center">Dolore magna aliqua. Uis aute irure.</h2>
|
|
|
|
<div class="pure-g">
|
|
<div class="l-box-lrg pure-u-1 pure-u-md-2-5">
|
|
<form class="pure-form pure-form-stacked">
|
|
<fieldset>
|
|
|
|
<label for="name">Your Name</label>
|
|
<input id="name" type="text" placeholder="Your Name">
|
|
|
|
|
|
<label for="email">Your Email</label>
|
|
<input id="email" type="email" placeholder="Your Email">
|
|
|
|
<label for="password">Your Password</label>
|
|
<input id="password" type="password" placeholder="Your Password">
|
|
|
|
<button type="submit" class="pure-button">Sign Up</button>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="l-box-lrg pure-u-1 pure-u-md-3-5">
|
|
<h4>Contact Us</h4>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
consequat.
|
|
</p>
|
|
|
|
<h4>More Information</h4>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
|
tempor incididunt ut labore et dolore magna aliqua.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="footer l-box is-center">
|
|
View the source of this layout to learn more. Made with love by the YUI Team.
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|