<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<header>
<svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 175 121">
<title>CAPspace</title>
<path id="logo__speechbubble" class="logo__speech-bubble" d="M34.66,99.09L12,121l2.86-23L1,97.27,0,8.1,175,0,162.5,106Z"/>
<path id="logo__cap" data-name="Shape" class="logo__text" d="M31.92,64.55c9.26-1.14,13.48-7,15.28-12.09l-8.74-2.92A9.1,9.1,0,0,1,30.87,56c-5.8.71-10.68-3.48-11.43-9.61s3-11.38,8.77-12.09a9.1,9.1,0,0,1,8.93,4.44l7.78-5c-3.06-4.65-8.49-9.18-17.75-8C16,27.12,8.25,36,9.67,47.59s11.09,18.33,22.25,17h0Zm46.29-6.37L88.64,56.9,70,21.12,57.92,22.6l-9.4,39.23L59,60.54l1.2-5.91,15.46-1.9ZM65,30.29l7.12,14.6L61.67,46.17ZM91.38,56.56l9.6-1.18L99.42,42.68l9-1.11c8.37-1,12.26-7.16,11.43-13.9s-6.11-11.92-14.48-10.89L86.77,19.05ZM110.12,28.8c0.31,2.53-1.39,4.39-4,4.71l-7.76,1-1-8.44,7.76-1a4.21,4.21,0,0,1,5,3.73h0Z"/>
<path id="logo__space" data-name="space" class="logo__text" d="M39.52,86.5C42,88.21,46,89,49.8,88.54c6.08-.75,9.25-4.18,8.75-8.23-0.69-5.64-6.13-5.87-9.79-6-2.28-.12-3.46-0.34-3.58-1.31s0.91-1.59,2.49-1.78a9.47,9.47,0,0,1,6.49,1.57l2-4.81A14.9,14.9,0,0,0,47,66.21c-5.86.72-8.65,4.37-8.19,8.12,0.67,5.42,5.83,5.55,9.49,5.72,2.23,0.08,3.72.3,3.86,1.41,0.11,0.93-.64,1.69-2.65,1.93a13.2,13.2,0,0,1-7.78-1.91Zm31,7.19-1.3-10.62a7.88,7.88,0,0,0,6.62,2.27c5.29-.65,8.78-5.1,7.89-12.33S78.4,62.36,73.11,63a7.91,7.91,0,0,0-5.88,3.76l-0.3-2.47-6.73.83L63.8,94.52Zm6.35-19.83c0.39,3.22-1.37,5.45-4,5.77a5.56,5.56,0,0,1-4.26-1.44l-0.8-6.48a5.4,5.4,0,0,1,3.78-2.43c2.62-.32,4.88,1.41,5.27,4.59h0ZM101,81.72l6.73-.83-1.63-13.31c-0.81-6.61-5.81-7.92-10.88-7.3a14.92,14.92,0,0,0-9.17,4.48l2.93,4a9.44,9.44,0,0,1,5.71-3c2.71-.33,4.44.71,4.66,2.56L99.73,71c-1.46-1.43-4.06-2-6.86-1.66-3.23.4-7.07,2.43-6.43,7.59,0.59,4.8,4.88,6.51,8.12,6.11a8.75,8.75,0,0,0,6.23-3.45Zm-0.67-5.46a4.7,4.7,0,0,1-3.57,2c-1.79.22-3.46-.38-3.67-2.05s1.27-2.66,3.06-2.88a4.82,4.82,0,0,1,3.94,1ZM110,69.8c0.82,6.7,6.31,10.58,12.91,9.77,4.55-.56,7.13-3,8.17-5L126.18,71a4.78,4.78,0,0,1-3.72,2.56,4.87,4.87,0,0,1-5.58-4.59,4.83,4.83,0,0,1,4.31-5.76,4.64,4.64,0,0,1,4.23,1.54l3.87-4.63c-1.5-1.74-4.59-3.42-9.14-2.86-6.6.81-11,5.91-10.17,12.56h0Zm21.86-2.68c0.85,6.92,6.4,10.57,12.91,9.77,3.23-.4,6.62-1.75,8.48-3.9l-3.36-3.88a8.38,8.38,0,0,1-4.94,2.44c-3.15.39-5.2-1.19-5.84-3.13l15-1.85-0.18-1.45c-0.89-7.23-6-11.29-12.25-10.53a11,11,0,0,0-9.86,12.53h0Zm10.51-7.28A4.1,4.1,0,0,1,147.15,63L138.45,64a4.21,4.21,0,0,1,3.88-4.19h0Z"/>
</svg>
</header>
<main>
<h2 class="reversed">Typography</h2>
<div class="container">
<p class="intro-para">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>Cras <a href="#">mattis</a> consectetur purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<h3>Heading 3 Curabitur blandit tempus porttitor.</h3>
<h4>Heading 4:</h4>
<ul>
<li>Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit.</li>
<li>Donec ullamcorper nulla non metus auctor fringilla.</li>
<li>Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit.</li>
</ul>
<h3>Heading 3 Curabitur blandit tempus porttitor.</h3>
<h4>Heading 4:</h4>
<ol>
<li>Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit.</li>
<li>Donec ullamcorper nulla non metus auctor fringilla.</li>
<li>Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit.</li>
</ol>
<dl>
<dt>Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit.</dt>
<dd>Donec ullamcorper nulla non metus auctor fringilla.</dd>
<dt>Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit.</dt>
<dd>Donec ullamcorper nulla non metus auctor fringilla.</dd>
</dl>
<h1>Heading 1 Curabitur blandit tempus porttitor.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<blockquote>'Cras mattis consectetur purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum. Maecenas.'</blockquote>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<h2>Heading 2 Curabitur blandit tempus porttitor.</h2>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<h3>Heading 3 Curabitur blandit tempus porttitor. Curabitur blandit tempus porttitor.</h3>
<p>Cras mattis consectetur purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<h4>Heading 4</h4>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
</div>
<h2>Forms</h2>
<fieldset>
<form>
<label for="text_field">Text Field:</label>
<input placeholder="Placeholder" type="text" id="text_field">
<label for="text_area">Text Area:</label>
<textarea id="text_area"></textarea>
<label for="select_element">Select Element:</label>
<select name="select_element">
<optgroup label="Option Group 1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</optgroup>
<optgroup label="Option Group 2">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</optgroup>
</select>
<label for="radio_buttons">Radio Buttons:</label>
<label><input type="radio" class="radio" name="radio_button" value="radio_1"> Radio 1</label>
<label><input type="radio" class="radio" name="radio_button" value="radio_2"> Radio 2</label>
<label><input type="radio" class="radio" name="radio_button" value="radio_3"> Radio 3</label>
<label for="checkboxes">Checkboxes:</label>
<label><input type="checkbox" class="checkbox" name="checkboxes" value="check_1"> Checkbox 1</label>
<label><input type="checkbox" class="checkbox" name="checkboxes" value="check_2"> Checkbox 2</label>
<label><input type="checkbox" class="checkbox" name="checkboxes" value="check_3"> Checkbox 3</label>
<label for="password">Password:</label>
<input type="password" class="password" name="password">
<label for="file">File Input:</label>
<input type="file" class="file" name="file">
<input class="btn btn--primary" type="submit" value="Submit">
</form>
</fieldset>
<h2>Tables</h2>
<div class="container">
<h3>A standard table looks like:</h3>
<table width="100%">
<tr>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</table>
</div>
<h2>Buttons</h2>
<div class="container">
<h3>Normal buttons:</h3>
<button class="btn btn--primary">Create your own</button>
<a class="btn btn--secondary" href="#">Create</a>
<br><br>
<h3>Small buttons:</h3>
<button class="btn btn--primary btn--small">Create your own</button>
<a class="btn btn--secondary btn--small" href="#">Create</a>
</div>
<h2>Cards</h2>
<h3 class="section-head">Idea card</h3>
<div class="card__block">
<article class="card card--idea">
<h3 class="card__title">Connecting with Canada</h3>
<p class="card__info"><small>created by <a href="#">Keith Harrison</a></small></p>
<p class="card__info">We are a small school in East Norwich, NY. We have 5th grade students who are in the middle of a unit on Canada… <a href="#">read more</a></p>
<div class="card__bottom">
<p class="card__interested"><span>8</span> People interested</p>
<a class="card__view btn btn--secondary btn--small" href="#">View</a>
</div>
</article>
<article class="card card--idea">
<h3 class="card__title">Connecting with Canada</h3>
<p class="card__info"><small>created by <a href="#">Keith Harrison</a></small></p>
<p class="card__info">We are a small school in East Norwich, NY. We have 5th grade students who are in the middle of a unit on Canada… <a href="#">read more</a></p>
<div class="card__bottom">
<p class="card__interested"><span>8</span> People interested</p>
<a class="card__view btn btn--secondary btn--small" href="#">View</a>
</div>
</article>
</div>
<h3 class="section-head">Event card</h3>
<div class="card__block">
<article class="card card--event">
<h3 class="card__title">Connecting with Canada</h3>
<p class="card__info"><small>created by <a href="#">Keith Harrison</a></small></p>
<p class="card__info">We are a small school in East Norwich, NY. We have 5th grade students who are in the middle of a unit on Canada… <a href="#">read more</a></p>
<div class="card__bottom">
<p class="card__interested"><span>8</span> People interested</p>
<a class="card__view btn btn--secondary btn--small" href="#">View</a>
</div>
</article>
<article class="card card--event">
<h3 class="card__title">Connecting with Canada</h3>
<p class="card__info"><small>created by <a href="#">Keith Harrison</a></small></p>
<p class="card__info">We are a small school in East Norwich, NY. We have 5th grade students who are in the middle of a unit on Canada… <a href="#">read more</a></p>
<div class="card__bottom">
<p class="card__interested"><span>8</span> People interested</p>
<a class="card__view btn btn--secondary btn--small" href="#">View</a>
</div>
</article>
</div>
</main>
/* === COLORS === */
/* === TYPOGRAPHY === */
/* === MEDIA QUERIES === */
/* === MIXINS === */
/* === TYPOGRAPHY === */
body {
font-family: "proxima-nova";
font-size: 16px;
line-height: 1.4;
color: #292929;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
line-height: 1.2;
margin: 0 0 0.7rem 0;
font-weight: 800;
}
h1 {
font-size: 2em;
}
@media (min-width: 720px) {
h1 {
font-size: 2.875em;
}
}
h2 {
font-size: 1.75em;
}
@media (min-width: 720px) {
h2 {
font-size: 2.25em;
}
}
h3 {
font-size: 1.35em;
}
@media (min-width: 720px) {
h3 {
font-size: 1.5em;
}
}
h4 {
font-size: 1em;
font-weight: 400;
}
@media (min-width: 720px) {
h4 {
font-size: 1.25em;
}
}
p {
font-size: 1em;
font-weight: 200;
margin: 0 0 1.4rem 0;
}
.intro-para {
font-size: 1.25em;
}
strong {
font-weight: 800;
}
em {
font-style: italic;
}
small {
font-size: 0.8em;
}
blockquote {
font-size: 1.5em;
line-height: 1.4;
margin: 0 0 1.4rem 0;
border-top: 1px dashed #4A90E2;
border-bottom: 1px dashed #4A90E2;
padding: 1.4rem;
}
ul, ol, dl {
padding: 0 0 0 18px;
margin: 0 0 1.4rem 0;
}
ul li, ol li, dl dd {
margin: 0 0 0.7rem 0;
}
ul li {
list-style-type: none;
position: relative;
}
ul li::before {
position: absolute;
top: -4px;
left: -15px;
content: "\2022 ";
font-size: 1.25em;
font-weight: 800;
color: #9AC96A;
}
dl dt {
font-weight: 800;
}
hr {
border: 0;
border-bottom: 1px dashed #bbbbbb;
}
/* === TABLES === */
table {
border-collapse: collapse;
margin: 0 0 1.4rem 0;
}
tr {
border-top: 1px solid #bbbbbb;
transition: ease 0.5s all;
}
tr:first-child {
border-top: 2px solid #4A90E2;
}
tr:hover {
background: #EAEAEA;
}
th, td {
padding: 0.7rem;
text-align: left;
}
/* === BUTTONS === */
.btn {
background: #404040;
-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
color: #FFFFFF;
font-weight: 800;
border: none;
padding: 1em 2em;
border-radius: 3em;
transition: ease 0.5s all;
}
.btn--primary {
background: #4A90E2;
}
.btn--primary:hover {
background: #3b73b5;
}
.btn--primary:active {
background: #6ea6e8;
}
.btn--secondary {
background: #9AC96A;
}
.btn--secondary:hover {
background: #7ba155;
}
.btn--secondary:active {
background: #aed488;
}
.btn--neutral {
background: #757575;
}
.btn--neutral:hover {
background: #2f2f2f;
}
.btn--neutral:active {
background: #4a4a4a;
}
.btn--small {
padding: 0.5em 1em;
}
/* === FORMS === */
label {
display: block;
font-weight: 200;
margin-bottom: 0.7rem;
}
input, select, textarea {
display: block;
}
input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]), textarea {
appearance: none;
background-color: #F5F5F5;
border: none;
box-sizing: border-box;
margin-bottom: 1.4rem;
padding: 0.7rem;
transition: all 0.5s ease;
width: 100%;
color: #404040;
}
input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="email"]:focus, input[type="month"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="week"]:focus, input:not([type]):focus, textarea:focus {
outline: none;
background-color: #EAEAEA;
}
input[type="color"]::placeholder, input[type="date"]::placeholder, input[type="datetime"]::placeholder, input[type="datetime-local"]::placeholder, input[type="email"]::placeholder, input[type="month"]::placeholder, input[type="number"]::placeholder, input[type="password"]::placeholder, input[type="search"]::placeholder, input[type="tel"]::placeholder, input[type="text"]::placeholder, input[type="time"]::placeholder, input[type="url"]::placeholder, input[type="week"]::placeholder, input:not([type])::placeholder, textarea::placeholder {
color: #404040;
}
textarea {
resize: vertical;
}
[type="checkbox"],
[type="radio"] {
display: inline;
margin-right: 0.35rem;
}
[type="file"] {
margin-bottom: 1.4rem;
width: 100%;
}
select {
margin-bottom: 1.4rem;
width: 100%;
}
a {
text-decoration: none;
font-weight: 800;
color: #4A90E2;
transition: ease 0.5s all;
}
a:hover {
color: #3b73b5;
}
a:focus {
color: #6ea6e8;
}
main {
max-width: 600px;
margin: 2em auto;
}
.container {
background: #FFFFFF;
border: none;
margin: 0 0 1.4rem 0;
padding: 1.4rem;
-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
}
.card__block {
margin: 0 -2%;
}
.card {
-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
max-width: 46%;
margin: 0 2% 4% 2%;
float: left;
transition: ease 0.5s all;
padding: 20px;
box-sizing: border-box;
}
.card--idea {
background-color: #4A90E2;
}
.card--event {
background-color: #9AC96A;
}
.card__title {
font-weight: 800;
margin: 0;
color: #FFFFFF;
}
.card__info {
color: #FFFFFF;
margin: 0 0 0.5em;
}
.card a {
color: #FFFFFF;
}
.card__bottom {
padding: 20px;
box-sizing: border-box;
background-color: #FFFFFF;
position: relative;
margin: 20px -20px -20px;
}
.card__bottom::after {
clear: both;
content: "";
display: table;
}
.card__bottom::before {
width: 0;
height: 0;
height: 0;
width: 0;
border-bottom: 10px solid #FFFFFF;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
position: absolute;
top: -10px;
bottom: 20px;
display: inline-block;
content: '';
}
body {
background: #F5F5F5;
}
fieldset {
background: #FFFFFF;
border: none;
margin: 0 0 1.4rem 0;
padding: 1.4rem;
-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
}
header {
background-color: #404040;
position: relative;
padding: 20px;
}
header:after {
content: "";
position: absolute;
left: 0;
bottom: -200%;
width: 100%;
height: 300%;
transform: skewY(-4deg);
z-index: -1;
background-color: #404040;
}
header:before {
display: block;
height: 0;
width: 0;
border-bottom: 125px solid transparent;
border-right: 125px solid #404040;
border-top: 125px solid transparent;
content: '';
position: absolute;
bottom: -220%;
right: 100px;
z-index: -1;
transform: skewY(20deg) rotate(-14deg);
}
#logo {
width: 250px;
margin: 0 auto;
display: block;
transition: ease 0.5s all;
}
.logo__speech-bubble {
fill: #4A90E2;
transition: ease 0.5s all;
}
.logo__speech-bubble:hover {
fill: #3b73b5;
}
.logo__text {
fill: white;
}
.reversed {
color: #FFFFFF;
}
