Initial commit
commit
2037b72c52
|
|
@ -0,0 +1,29 @@
|
|||
Software License Agreement (BSD License)
|
||||
========================================
|
||||
|
||||
Copyright 2013 Yahoo! Inc. All rights reserved.
|
||||
|
||||
Redistribution and use in source and binary forms, with or without
|
||||
modification, are permitted provided that the following conditions are met:
|
||||
|
||||
* Redistributions of source code must retain the above copyright
|
||||
notice, this list of conditions and the following disclaimer.
|
||||
|
||||
* Redistributions in binary form must reproduce the above copyright
|
||||
notice, this list of conditions and the following disclaimer in the
|
||||
documentation and/or other materials provided with the distribution.
|
||||
|
||||
* Neither the name of the Yahoo! Inc. nor the
|
||||
names of its contributors may be used to endorse or promote products
|
||||
derived from this software without specific prior written permission.
|
||||
|
||||
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
|
||||
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
|
||||
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
||||
DISCLAIMED. IN NO EVENT SHALL YAHOO! INC. BE LIABLE FOR ANY
|
||||
DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
|
||||
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
|
||||
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
|
||||
ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
||||
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
|
||||
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
Pure CSS Layout Examples
|
||||
========================
|
||||
|
||||
Layout examples using [Pure CSS][pure] compiled from the [pure-site][] project.
|
||||
|
||||
[pure]: http://purecss.io/
|
||||
[pure-site]: https://github.com/pure-css/pure-site
|
||||
|
||||
|
||||
License
|
||||
-------
|
||||
|
||||
This software is free to use under the zLib license.
|
||||
See the [zLib][] license for more information.
|
||||
|
||||
[zLib]: http://www.zlib.net/zlib_license.html
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,297 @@
|
|||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/*
|
||||
* -- BASE STYLES --
|
||||
* Most of these are inherited from Base, but I want to change a few.
|
||||
*/
|
||||
|
||||
body {
|
||||
line-height: 1.7em;
|
||||
color: #7f8c8d;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
label {
|
||||
color: #34495e;
|
||||
}
|
||||
|
||||
.pure-img-responsive {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
* -- LAYOUT STYLES --
|
||||
* These are some useful classes which I will need
|
||||
*/
|
||||
|
||||
.l-box {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.l-box-lrg {
|
||||
padding: 2em;
|
||||
border-bottom: 1px solid rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.is-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*
|
||||
* -- PURE FORM STYLES --
|
||||
* Style the form inputs and labels
|
||||
*/
|
||||
|
||||
.pure-form label {
|
||||
margin: 1em 0 0;
|
||||
font-weight: bold;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
.pure-form input[type] {
|
||||
border: 2px solid #ddd;
|
||||
box-shadow: none;
|
||||
font-size: 100%;
|
||||
width: 100%;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
/*
|
||||
* -- PURE BUTTON STYLES --
|
||||
* I want my pure-button elements to look a little different
|
||||
*/
|
||||
|
||||
.pure-button {
|
||||
background-color: #1f8dd6;
|
||||
color: white;
|
||||
padding: 0.5em 2em;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
a.pure-button-primary {
|
||||
background: white;
|
||||
color: #1f8dd6;
|
||||
border-radius: 5px;
|
||||
font-size: 120%;
|
||||
}
|
||||
|
||||
/*
|
||||
* -- MENU STYLES --
|
||||
* I want to customize how my .pure-menu looks at the top of the page
|
||||
*/
|
||||
|
||||
.home-menu {
|
||||
padding: 0.5em;
|
||||
text-align: center;
|
||||
box-shadow: 0 1px 1px rgba(0,0,0, 0.10);
|
||||
}
|
||||
|
||||
.home-menu {
|
||||
background: #2d3e50;
|
||||
}
|
||||
|
||||
.pure-menu.pure-menu-fixed {
|
||||
/* Fixed menus normally have a border at the bottom. */
|
||||
border-bottom: none;
|
||||
/* I need a higher z-index here because of the scroll-over effect. */
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.home-menu .pure-menu-heading {
|
||||
color: white;
|
||||
font-weight: 400;
|
||||
font-size: 120%;
|
||||
}
|
||||
|
||||
.home-menu .pure-menu-selected a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.home-menu a {
|
||||
color: #6FBEF3;
|
||||
}
|
||||
|
||||
.home-menu li a:hover,
|
||||
.home-menu li a:focus {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #AECFE5;
|
||||
}
|
||||
|
||||
/*
|
||||
* -- SPLASH STYLES --
|
||||
* This is the blue top section that appears on the page.
|
||||
*/
|
||||
|
||||
.splash-container {
|
||||
background: #1f8dd6;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
/* The following styles are required for the "scroll-over" effect */
|
||||
width: 100%;
|
||||
height: 88%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: fixed !important;
|
||||
}
|
||||
|
||||
.splash {
|
||||
/* absolute center .splash within .splash-container */
|
||||
width: 80%;
|
||||
height: 50%;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* This is the main heading that appears on the blue section */
|
||||
|
||||
.splash-head {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
border: 3px solid white;
|
||||
padding: 1em 1.6em;
|
||||
font-weight: 100;
|
||||
border-radius: 5px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
/* This is the subheading that appears on the blue section */
|
||||
|
||||
.splash-subhead {
|
||||
color: white;
|
||||
letter-spacing: 0.05em;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/*
|
||||
* -- CONTENT STYLES --
|
||||
* This represents the content area (everything below the blue section)
|
||||
*/
|
||||
|
||||
.content-wrapper {
|
||||
/* These styles are required for the "scroll-over" effect */
|
||||
position: absolute;
|
||||
top: 87%;
|
||||
width: 100%;
|
||||
min-height: 12%;
|
||||
z-index: 2;
|
||||
background: white;
|
||||
}
|
||||
|
||||
/* We want to give the content area some more padding */
|
||||
|
||||
.content {
|
||||
padding: 1em 1em 3em;
|
||||
}
|
||||
|
||||
/* This is the class used for the main content headers (<h2>) */
|
||||
|
||||
.content-head {
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
margin: 2em 0 1em;
|
||||
}
|
||||
|
||||
/* This is a modifier class used when the content-head is inside a ribbon */
|
||||
|
||||
.content-head-ribbon {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* This is the class used for the content sub-headers (<h3>) */
|
||||
|
||||
.content-subhead {
|
||||
color: #1f8dd6;
|
||||
}
|
||||
|
||||
.content-subhead i {
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
/* This is the class used for the dark-background areas. */
|
||||
|
||||
.ribbon {
|
||||
background: #2d3e50;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
/* This is the class used for the footer */
|
||||
|
||||
.footer {
|
||||
background: #111;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/*
|
||||
* -- TABLET (AND UP) MEDIA QUERIES --
|
||||
* On tablets and other medium-sized devices, we want to customize some
|
||||
* of the mobile styles.
|
||||
*/
|
||||
|
||||
/* We increase the body font size */
|
||||
|
||||
body {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* We can align the menu header to the left, but float the
|
||||
menu items to the right. */
|
||||
|
||||
.home-menu {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.home-menu ul {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* We increase the height of the splash-container */
|
||||
|
||||
/* .splash-container {
|
||||
height: 500px;
|
||||
}*/
|
||||
|
||||
/* We decrease the width of the .splash, since we have more width
|
||||
to work with */
|
||||
|
||||
.splash {
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.splash-head {
|
||||
font-size: 250%;
|
||||
}
|
||||
|
||||
/* We remove the border-separator assigned to .l-box-lrg */
|
||||
|
||||
.l-box-lrg {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* -- DESKTOP (AND UP) MEDIA QUERIES --
|
||||
* On desktops and other large devices, we want to over-ride some
|
||||
* of the mobile and tablet styles.
|
||||
*/
|
||||
|
|
@ -0,0 +1,286 @@
|
|||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/*
|
||||
* -- BASE STYLES --
|
||||
* Most of these are inherited from Base, but I want to change a few.
|
||||
*/
|
||||
body {
|
||||
line-height: 1.7em;
|
||||
color: #7f8c8d;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
label {
|
||||
color: #34495e;
|
||||
}
|
||||
|
||||
.pure-img-responsive {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
* -- LAYOUT STYLES --
|
||||
* These are some useful classes which I will need
|
||||
*/
|
||||
.l-box {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.l-box-lrg {
|
||||
padding: 2em;
|
||||
border-bottom: 1px solid rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.is-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* -- PURE FORM STYLES --
|
||||
* Style the form inputs and labels
|
||||
*/
|
||||
.pure-form label {
|
||||
margin: 1em 0 0;
|
||||
font-weight: bold;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
.pure-form input[type] {
|
||||
border: 2px solid #ddd;
|
||||
box-shadow: none;
|
||||
font-size: 100%;
|
||||
width: 100%;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
/*
|
||||
* -- PURE BUTTON STYLES --
|
||||
* I want my pure-button elements to look a little different
|
||||
*/
|
||||
.pure-button {
|
||||
background-color: #1f8dd6;
|
||||
color: white;
|
||||
padding: 0.5em 2em;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
a.pure-button-primary {
|
||||
background: white;
|
||||
color: #1f8dd6;
|
||||
border-radius: 5px;
|
||||
font-size: 120%;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* -- MENU STYLES --
|
||||
* I want to customize how my .pure-menu looks at the top of the page
|
||||
*/
|
||||
|
||||
.home-menu {
|
||||
padding: 0.5em;
|
||||
text-align: center;
|
||||
box-shadow: 0 1px 1px rgba(0,0,0, 0.10);
|
||||
}
|
||||
.home-menu {
|
||||
background: #2d3e50;
|
||||
}
|
||||
.pure-menu.pure-menu-fixed {
|
||||
/* Fixed menus normally have a border at the bottom. */
|
||||
border-bottom: none;
|
||||
/* I need a higher z-index here because of the scroll-over effect. */
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.home-menu .pure-menu-heading {
|
||||
color: white;
|
||||
font-weight: 400;
|
||||
font-size: 120%;
|
||||
}
|
||||
|
||||
.home-menu .pure-menu-selected a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.home-menu a {
|
||||
color: #6FBEF3;
|
||||
}
|
||||
.home-menu li a:hover,
|
||||
.home-menu li a:focus {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #AECFE5;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* -- SPLASH STYLES --
|
||||
* This is the blue top section that appears on the page.
|
||||
*/
|
||||
|
||||
.splash-container {
|
||||
background: #1c1c1c;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
/* The following styles are required for the "scroll-over" effect */
|
||||
width: 100%;
|
||||
height: 88%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: fixed !important;
|
||||
}
|
||||
|
||||
.splash {
|
||||
/* absolute center .splash within .splash-container */
|
||||
width: 80%;
|
||||
height: 50%;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
top: 100px; left: 0; bottom: 0; right: 0;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* This is the main heading that appears on the blue section */
|
||||
.splash-head {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
border: 3px solid white;
|
||||
padding: 1em 1.6em;
|
||||
font-weight: 100;
|
||||
border-radius: 5px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
/* This is the subheading that appears on the blue section */
|
||||
.splash-subhead {
|
||||
color: white;
|
||||
letter-spacing: 0.05em;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/*
|
||||
* -- CONTENT STYLES --
|
||||
* This represents the content area (everything below the blue section)
|
||||
*/
|
||||
.content-wrapper {
|
||||
/* These styles are required for the "scroll-over" effect */
|
||||
position: absolute;
|
||||
top: 87%;
|
||||
width: 100%;
|
||||
min-height: 12%;
|
||||
z-index: 2;
|
||||
background: white;
|
||||
|
||||
}
|
||||
|
||||
/* We want to give the content area some more padding */
|
||||
.content {
|
||||
padding: 1em 1em 3em;
|
||||
}
|
||||
|
||||
/* This is the class used for the main content headers (<h2>) */
|
||||
.content-head {
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
margin: 2em 0 1em;
|
||||
}
|
||||
|
||||
/* This is a modifier class used when the content-head is inside a ribbon */
|
||||
.content-head-ribbon {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* This is the class used for the content sub-headers (<h3>) */
|
||||
.content-subhead {
|
||||
color: #1f8dd6;
|
||||
}
|
||||
.content-subhead i {
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
/* This is the class used for the dark-background areas. */
|
||||
.ribbon {
|
||||
background: #2d3e50;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
/* This is the class used for the footer */
|
||||
.footer {
|
||||
background: #111;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/*
|
||||
* -- TABLET (AND UP) MEDIA QUERIES --
|
||||
* On tablets and other medium-sized devices, we want to customize some
|
||||
* of the mobile styles.
|
||||
*/
|
||||
@media (min-width: 48em) {
|
||||
|
||||
/* We increase the body font size */
|
||||
body {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* We can align the menu header to the left, but float the
|
||||
menu items to the right. */
|
||||
.home-menu {
|
||||
text-align: left;
|
||||
}
|
||||
.home-menu ul {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* We increase the height of the splash-container */
|
||||
/* .splash-container {
|
||||
height: 500px;
|
||||
}*/
|
||||
|
||||
/* We decrease the width of the .splash, since we have more width
|
||||
to work with */
|
||||
.splash {
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.splash-head {
|
||||
font-size: 250%;
|
||||
}
|
||||
|
||||
|
||||
/* We remove the border-separator assigned to .l-box-lrg */
|
||||
.l-box-lrg {
|
||||
border: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
* -- DESKTOP (AND UP) MEDIA QUERIES --
|
||||
* On desktops and other large devices, we want to over-ride some
|
||||
* of the mobile and tablet styles.
|
||||
*/
|
||||
@media (min-width: 78em) {
|
||||
/* We increase the header font size even more */
|
||||
.splash-head {
|
||||
font-size: 300%;
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
|
|
@ -0,0 +1,175 @@
|
|||
<!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>
|
||||
Loading…
Reference in New Issue