<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Empire Justice Center - Style Tile</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="header.css">
<link rel="stylesheet" href="typography.css">
<link rel="stylesheet" href="icons.css">
<link rel="stylesheet" href="color.css">
<link rel="stylesheet" href="detail.css">
</head>
<body>
<!-------------------------------
If you need a place to host images, use http://cubeupload.com/
It's really easy to upload images to and you can then use
the top link: "Direct Link" to link to your image here.
You don't even need to sign up for an account.
-------------------------------->
<!-------------------------------
If you want to edit the header, please use header.css
-------------------------------->
<header>
<a href="#" title="Whatev3r" class="wrapper">
Roshin Cherian - Whatev3r
</a><!-- END .wrapper -->
</header>
<div class="main">
<div class="wrapper">
<!-------------------------------
To edit the way the typography displays, edit typography.css
-------------------------------->
<div class="typography">
<h1>Hey There</h1>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non.</p>
<!-------------------------------
To edit the way the icons display, edit icons.css
-------------------------------->
<ul class="icons">
<li><img title="Search" src="http://i.cubeupload.com/QaHrZC.png" /></li>
<li><img title="Next" src="http://i.cubeupload.com/1J7meP.png" /></li>
<li><img title="Home" src="http://i.cubeupload.com/tOjPem.png" /></li>
</ul>
</div><!-- END .typography -->
<div class="swatches">
<div class="colors">
<ul>
<!-------------------------------
To add more colors:
1. add an <li> here with a class of the color's name
2. add colors and class to color.css
-------------------------------->
<li class="primary"> </li>
<li class="secondary"> </li>
<li class="neutral"> </li>
</ul>
</div><!-- END .colors -->
<!-------------------------------
To edit the details blocks, edit detail.css
-------------------------------->
<div class="details">
<ul>
<li class="a">
<img src="http://i.cubeupload.com/ScDS5Y.jpg" alt="Taking to someone" />
</li>
<li class="b">
<img src="http://i.cubeupload.com/sMLJ4r.jpg" alt="Getting Help" />
</li>
<li class="c">
<img src="http://i.cubeupload.com/uYmLYT.jpg" alt="Housing Counseling" />
</li>
</ul>
</div><!-- END .details -->
</div><!-- END .swatches -->
</div><!-- END .wrapper -->
</div><!-- END .main -->
<script src="script.js"></script>
</body>
</html>
// Code goes here
/* HEADER & LOGO */
header {
width: 100%;
text-align: center;
background-color: rgb(229, 109, 109);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
}
header a {
font-size: 2em;
color: #FFF;
font-weight: 700;
text-decoration: none;
}
header a: hover, a: active, a: visited {
color: #d3d3d3;
}
header .wrapper {
position: relative;
max-width: 35em;
padding: .4em 0;
}
header img {
display: block;
max-width: 154px;
margin: 0 auto;
}
.details .a,
.details .b,
.details .c {
text-align: center;
box-shadow: 0 0 10px rgba(0,0,0,0.8);
}
/* Image blocks*/
.details .a {
/* monitor icon */
margin-right: 1%;
background: #F5CB5C; }
.details .b {
/* juggler */
margin-left: 1%;
background: #92345A;}
.details .c {
/* happy devices */
width: 100%;
background: #CAE09A;
padding: 2em 0;
}
.details {
float: left;
}
.details ul {
margin: 0;
padding: 0;
}
.details li {
list-style-type: none;
float: left;
overflow: hidden;
margin: 0 0 2% 0;
position: relative;
}
.details li.a, .details li.b {
width: 49%;
height: 0;
padding-bottom: 50%;
}
.details li.a img,
.details li.b img {
margin-top: 10%;
}
.details li.a img,
.details li.b img,
.details li.c img {
max-width: 90%;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.details li.b img,
.details li.c img {
max-width: 90%;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
opacity:.95;
}
/* Typography */
h1 {
margin: 0 0 0.5em 0;
font-family: Arial, sans-serif;
font-size: 1.5em;
font-weight: 400;
line-height: 1;
color: black; }
/* PARAGRAPH */
p {
font-family: Helvetica, Arial, sans-serif;
font-size: 0.9em;
line-height: 1.6;
margin-bottom: 1em;
color:#44444;
opacity: .8;}
/* Colors */
.colors .primary {
background-color: #F5CB5C; }
.colors .secondary {
background-color: #92345A; }
.colors .neutral {
background-color: #CAE09A; }
/*
* HTML5 Boilerplate
*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*
* Detailed information about this CSS: h5bp.com/css
*
* ==|== normalize ==========================================================
*/
/* =============================================================================
HTML5 display definitions
========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
display: block; }
audio, canvas, video {
display: inline-block;
*display: inline;
*zoom: 1; }
audio:not([controls]) {
display: none; }
[hidden] {
display: none; }
/* =============================================================================
Base
========================================================================== */
/*
* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
* 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
*/
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; }
html, button, input, select, textarea {
font-family: sans-serif;
color: #222; }
body {
margin: 0;
font-size: 1em;
line-height: 1.4; }
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection declarations have to be separate
* Also: hot pink! (or customize the background color to match your design)
*/
/* =============================================================================
Links
========================================================================== */
a {
color: #00e; }
a:visited {
color: #551a8b; }
a:hover {
color: #d3d3d3; }
a:focus {
outline: thin dotted; }
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active {
outline: 0; }
/* =============================================================================
Typography
========================================================================== */
abbr[title] {
border-bottom: 1px dotted; }
b, strong {
font-weight: bold; }
blockquote {
margin: 1em 40px; }
dfn {
font-style: italic; }
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0; }
ins {
background: #ff9;
color: #000;
text-decoration: none; }
mark {
background: #ff0;
color: #000;
font-style: italic;
font-weight: bold; }
/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp {
font-family: monospace, serif;
_font-family: 'courier new', monospace;
font-size: 1em; }
/* Improve readability of pre-formatted text in all browsers */
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word; }
q {
quotes: none; }
q:before, q:after {
content: "";
content: none; }
small {
font-size: 85%; }
/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline; }
sup {
top: -0.5em; }
sub {
bottom: -0.25em; }
/* =============================================================================
Lists
========================================================================== */
ul, ol {
margin: 1em 0;
padding: 0 0 0 40px; }
dd {
margin: 0 0 0 40px; }
nav ul, nav ol {
list-style: none;
list-style-image: none;
margin: 0;
padding: 0; }
/* =============================================================================
Embedded content
========================================================================== */
/*
* 1. Improve image quality when scaled in IE7: h5bp.com/d
* 2. Remove the gap between images and borders on image containers: h5bp.com/i/440
*/
img {
border: 0;
-ms-interpolation-mode: bicubic;
vertical-align: middle; }
/*
* Correct overflow not hidden in IE9
*/
svg:not(:root) {
overflow: hidden; }
/* =============================================================================
Figures
========================================================================== */
figure {
margin: 0; }
/* =============================================================================
Forms
========================================================================== */
form {
margin: 0; }
fieldset {
border: 0;
margin: 0;
padding: 0; }
/* Indicate that 'label' will shift focus to the associated form element */
label {
cursor: pointer; }
/*
* 1. Correct color not inheriting in IE6/7/8/9
* 2. Correct alignment displayed oddly in IE6/7
*/
legend {
border: 0;
*margin-left: -7px;
padding: 0;
white-space: normal; }
/*
* 1. Correct font-size not inheriting in all browsers
* 2. Remove margins in FF3/4 S5 Chrome
* 3. Define consistent vertical alignment display in all browsers
*/
button, input, select, textarea {
font-size: 100%;
margin: 0;
vertical-align: baseline;
*vertical-align: middle; }
/*
* 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
*/
button, input {
line-height: normal; }
/*
* 1. Display hand cursor for clickable form elements
* 2. Allow styling of clickable form elements in iOS
* 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
*/
button, input[type="button"], input[type="reset"], input[type="submit"] {
cursor: pointer;
-webkit-appearance: button;
*overflow: visible; }
/*
* Re-set default cursor for disabled elements
*/
button[disabled], input[disabled] {
cursor: default; }
/*
* Consistent box sizing and appearance
*/
input[type="checkbox"], input[type="radio"] {
box-sizing: border-box;
padding: 0;
*width: 13px;
*height: 13px; }
input[type="search"] {
-webkit-appearance: textfield;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none; }
/*
* Remove inner padding and border in FF3/4: h5bp.com/l
*/
button::-moz-focus-inner, input::-moz-focus-inner {
border: 0;
padding: 0; }
/*
* 1. Remove default vertical scrollbar in IE6/7/8/9
* 2. Allow only vertical resizing
*/
textarea {
overflow: auto;
vertical-align: top;
resize: vertical; }
/* Colors for form validity */
input:invalid, textarea:invalid {
background-color: #f0dddd; }
/* =============================================================================
Tables
========================================================================== */
table {
border-collapse: collapse;
border-spacing: 0; }
td {
vertical-align: top; }
/* ==|== non-semantic helper classes ========================================
Please define your styles before this section.
========================================================================== */
/* For image replacement */
.ir {
display: block;
border: 0;
text-indent: -999em;
overflow: hidden;
background-color: transparent;
background-repeat: no-repeat;
text-align: left;
direction: ltr;
*line-height: 0; }
.ir br {
display: none; }
/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden {
display: none !important;
visibility: hidden; }
/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px; }
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto; }
/* Hide visually and from screenreaders, but maintain layout */
.invisible {
visibility: hidden; }
/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after {
content: "";
display: table; }
.clearfix:after {
clear: both; }
.clearfix {
*zoom: 1; }
/* ==|== print styles =======================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
@media print {
* {
background: transparent !important;
color: black !important;
box-shadow: none !important;
text-shadow: none !important;
filter: none !important;
-ms-filter: none !important; }
/* Black prints faster: h5bp.com/s */
a, a:visited {
text-decoration: underline; }
a[href]:after {
content: " (" attr(href) ")"; }
abbr[title]:after {
content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
content: ""; }
/* Don't show links for images, or javascript/internal links */
pre, blockquote {
border: 1px solid #999;
page-break-inside: avoid; }
thead {
display: table-header-group; }
/* h5bp.com/t */
tr, img {
page-break-inside: avoid; }
img {
max-width: 100% !important; }
@page {
margin: 0.5cm; }
p, h2, h3 {
orphans: 3;
widows: 3; }
h2, h3 {
page-break-after: avoid; } }
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
body {
font: 100%/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
background-image:url('http://i.cubeupload.com/uP5cjy.jpg');
background-repeat:repeat;}
.lt-ie9 body {
min-width: 960px; }
.wrapper {
display: block;
margin: 0 auto;
max-width: 100%; }
.lt-ie9 .wrapper {
width: 960px; }
/* NAV */
nav {
display: none; }
/* MAIN */
.main {
float: left;
width: 100%;
padding-bottom: 2em;
font-size: 1em; }
/* TYPOGRAPHY */
.typography {
float: left;
background-color: #34928E;
padding: 5% 5% 2%;
box-shadow: 0 0 10px rgba(0,0,0,0.8);
background-color: rgba(255,255,255,0.61);}
/* BUTTON */
button {
font-family: 'Yanone Kaffeesatz', sans-serif;
font-size: 1em;
font-weight: 700;
text-transform: uppercase;
width: 100%;
padding: 0.7em 1.4em;
background-color: #13a89e;
border: 0 solid black; }
button:hover, button:focus {
background-color: #18d6c9; }
/* SWATCHES */
.swatches {
float: left;
width: 100%;
padding: 5%;
margin: 0 auto; }
/* COLORS */
.colors {
float: left;
padding-bottom: 6%;
width: 100%; }
.colors ul {
padding: 0;
margin: 0; }
.colors li {
font: 0/0 a;
text-shadow: none;
color: transparent;
list-style-type: none;
float: left;
width: 32%;
padding-bottom: 18%;
margin: 0 2% 0 0;
background-color: #222; }
.colors li:last-child {
margin-right: 0; }
/* DETAILS */
.details {
float: left;
width: 100%; }
.details ul {
margin: 0;
padding: 0; }
.details li {
list-style-type: none;
float: left;
overflow: hidden;
margin: 0 0 2% 0;
position: relative; }
@media (min-width: 400px) {
.swatches {
padding: 2em; }
.details ul li.fixed.a {
background-size: auto; } }
@media (min-width: 700px) {
.main .wrapper {
position: relative;
margin-top: 1em; }
.typography {
position: absolute;
left: 2em;
top: 2em;
padding: 2em;
max-width: 20em; }
.swatches {
padding-left: 24em; } }
@media (min-width: 940px) {
.colors {
padding: 0 4% 0 2em;
width: 20%; }
.colors ul {
margin: 0; }
.colors ul li {
width: 100%;
padding-bottom: 100%;
margin-bottom: 12%; }
.details {
width: 80%; } }
/* @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) {
@import "2x";
} */
# Empire Justice Center - Style Tile
A beginning style tile template for the Empire Justice Center's Foreclosure app.
Fork this Plunk and make your changes to the correct files.
In order to use images, you'll need to link to them, I'd suggest using http://cubeupload.com/
Code is pulled from https://github.com/sparkbox/style-prototype
/* ICONS */
.icons {
padding: 0;
margin: 4% auto;
text-align: center;
float: left;
width: 100%;
}
.icons li {
display: inline-block;
list-style-type: none;
text-align: center;
width: 80px;
opacity: 0.5;
}
.icons li:hover {
opacity: 1;
}