Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
432 lines (356 sloc) 14.1 KB
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Renaissance</title>
<link rel="stylesheet" type="text/css" href="renaissance.css">
</head>
<body>
<nav class="navbar">
<a class="navbar__brand">
<h3>Renaissance</h3>
</a>
<div class="navbar__hamburger">
<span class="icon__hamburger"></span>
<span class="icon__closeIcon"></span>
</div>
<div class="navbar__menu">
<a href="#" class="navbar__menu__link">Link</a>
</div>
</nav>
<div class="container">
<h1>Heading h1</h1>
<h2>Heading h2</h2>
<h3>Heading h3</h3>
<h4>Heading h4</h4>
<p>Paragraph Text.</p>
<h3>Columns</h3>
<div class="row">
<div class="column--4">
<h1>1</h1>
</div>
<div class="column--4">
<h1>2</h1>
</div>
<div class="column--4">
<h1>3</h1>
</div>
<div class="column--4">
<h1>4</h1>
</div>
</div>
<h3>Buttons</h3>
<div class="row">
<button>+ Button</button>
</div>
<h3>Forms</h3>
<div class="row">
<div class="column--12">
<input type="text" />
</div>
<div class="column--12">
<textarea rows="4" cols="50"></textarea>
</div>
<div class="column--12">
<label>Email</label>
<input type="email" />
</div>
<div class="column--12">
<div class="checkbox">
<input type="checkbox" name="checkboxNameHere" id="cb1" />
<label for="cb1">Email</label>
</div>
<div class="checkbox">
<input type="checkbox" name="checkboxNameHere" id="cb2" />
<label for="cb2">Phone</label>
</div>
<div class="checkbox">
<input type="checkbox" name="checkboxNameHere" id="cb3" />
<label for="cb3">Mail</label>
</div>
</div>
<div class="column--12">
<div class="radio">
<input type="radio" id="radioChoice1"
name="radioButtonNameHere" value="email">
<label for="radioChoice1">Email</label>
</div>
<div class="radio">
<input type="radio" id="radioChoice2"
name="radioButtonNameHere" value="phone">
<label for="radioChoice2">Phone</label>
</div>
<div class="radio">
<input type="radio" id="radioChoice3"
name="radioButtonNameHere" value="mail">
<label for="radioChoice3">Mail</label>
</div>
</div>
<div class="column--12">
<input class="slider" type="range" value="250" min="0" max="500" step="50">
</div>
</div>
<h3>Notifications</h3>
<div class="notification--success">
<div class="notification__iconContainer">
<div class="icon">
<span class="icon__checkIcon"></span>
</div>
</div>
<div class="notification__body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, reprehenderit obcaecati itaque. Officiis libero provident perspiciatis eum fugiat laudantium sequi.</p>
</div>
</div>
<h3>Modal</h3>
<button id="#toggleModal" onClick="(function(){
var m = document.getElementsByClassName('modal');
m[0].className = 'modal--active'
console.log(m)
return false;
})();return false;">Toggle Modal</button>
<div class="modal">
<div class="modal__container">
<div class="modal__header">
<h3>Modal</h3>
</div>
<div class="modal__body">
<p>Lorem Ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="modal__footer">
<button onClick="(function(){
var m = document.getElementsByClassName('modal--active');
m[0].className = 'modal'
console.log(m)
return false;
})();return false;">Close</button>
</div>
</div>
</div>
<h3>Breadcrumb</h3>
<div class="breadcrumbs">
<div class="crumb">
<a href="#" >One</a><a href="#">Two</a><a href="#">Three</a><a href="#" class="active">Four</a>
</div>
</div>
<h3>Calendar</h3>
<table class="calendar">
<caption class="calendar__year">
<a href="#" class="calendar__year__prev">Previous</a>
<span class="calendar__year__title">April 2013</span>
<a href="#" class="calendar__year__next">Next</a>
</caption>
<thead class="calendar__header">
<tr>
<th class="calendar__header__day">Mo</th>
<th class="calendar__header__day">Tu</th>
<th class="calendar__header__day">We</th>
<th class="calendar__header__day">Th</th>
<th class="calendar__header__day">Fr</th>
<th class="calendar__header__day">Sa</th>
<th class="calendar__header__day">Su</th>
</tr>
</thead>
<tbody class="calendar__dates">
<tr>
<td><a href="#">1</a></td>
<td><a href="#">2</a></td>
<td><a href="#">3</a></td>
<td><a href="#">4</a></td>
<td><a href="#">5</a></td>
<td><a href="#">6</a></td>
<td><a href="#">7</a></td>
</tr>
<tr>
<td><a href="#">8</a></td>
<td><a href="#">9</a></td>
<td class="calendar__dates--today"><a href="#">10</a></td>
<td><a href="#">11</a></td>
<td><a href="#">12</a></td>
<td><a href="#">13</a></td>
<td><a href="#">14</a></td>
</tr>
<tr>
<td><a href="#">15</a></td>
<td><a href="#">16</a></td>
<td><a href="#">17</a></td>
<td><a href="#">18</a></td>
<td><a href="#">19</a></td>
<td><a href="#">20</a></td>
<td><a href="#">21</a></td>
</tr>
<tr>
<td><a href="#">22</a></td>
<td><a href="#">23</a></td>
<td><a href="#">24</a></td>
<td><a href="#">25</a></td>
<td><a href="#">26</a></td>
<td><a href="#">27</a></td>
<td><a href="#">28</a></td>
</tr>
<tr>
<td><a href="#">29</a></td>
<td><a href="#">30</a></td>
<td class="calendar__dates--off"><a href="#">1</a></td>
<td class="calendar__dates--off"><a href="#">2</a></td>
<td class="calendar__dates--off"><a href="#">3</a></td>
<td class="calendar__dates--off"><a href="#">4</a></td>
<td class="calendar__dates--off"><a href="#">5</a></td>
</tr>
</tbody>
</table>
<h3>Order Summary/Cart</h3>
<div class="cart">
<div class="cart__header">
<h4>My Cart</h4>
<button>Continue Shopping</button>
</div>
<div class="cart__body">
<ul class="cart__body__list">
<li class="cart__body__list__item">
<img src="https://picsum.photos/300" alt="" class="itemImg" />
<div class="cart__body__list__item__meta">
<p>#000</p>
<h4>Item Name 1</h4>
<div class="cart__body__list__item__meta__quanity">
<p class="cart__body__list__item__meta__quanity__value"><input type="text" value="3"/> x $5.00</p>
<p class="cart__body__list__item__meta__quanity__status"> In Stock</p>
</div>
</div>
<p class="cart__body__list__item__price">$15.00</p>
<div class="cart__body__list__item__close">
<div class="icon__closeIcon"></div>
</div>
</li>
<li class="cart__body__list__item">
<img src="https://picsum.photos/300" alt="" class="itemImg" />
<div class="cart__body__list__item__meta">
<p>#001</p>
<h4>Item Name 2</h4>
<div class="cart__body__list__item__meta__quanity">
<p class="cart__body__list__item__meta__quanity__value"><input type="text" value="10"/> x $1.00</p>
<p class="cart__body__list__item__meta__quanity__status"> In Stock</p>
</div>
</div>
<p class="cart__body__list__item__price">$10.00</p>
<div class="cart__body__list__item__close">
<div class="icon__closeIcon"></div>
</div>
</li>
</ul>
</div>
<div class="cart__footer">
<div class="cart__footer__promo">
<label for="promo">Have A Promo Code?</label>
<input type="text" name="promo" placholder="Enter Code" />
</div>
<ul class="cart__footer__prices">
<li class="cart__footer__prices__price"><span >Subtotal</span><span>$35.00</span></li>
<li class="cart__footer__prices__price"><span >Shipping</span><span>$5.00</span></li>
<li class="cart__footer__prices__price"><span >Tax</span><span>$4.00</span></li>
<li class="cart__footer__prices__price--final"><span >Total</span><span>$44.00</span></li>
<li class="cart__footer__prices__checkout"><a href="#">Checkout</a></li>
</ul>
</div>
</div>
<h3>Progress</h3>
<div class="row">
<div class="column--12">
<div class="progressBar">
<div class="progressBar__bar"></div>
</div>
</div>
</div>
<h3>Tabs</h3>
<div class="row">
<div class="tabs">
<ul class="tabs__nav">
<a href="#tab1" class="tabs__nav__navItem--active">Tab 1</a>
<a href="#tab2" class="tabs__nav__navItem">Tab 2</a>
<a href="#tab3" class="tabs__nav__navItem">Tab 3</a>
<a href="#tab4" class="tabs__nav__navItem">Tab 4</a>
<a href="#tab5" class="tabs__nav__navItem">Tab 5</a>
</ul>
<section class="tabs__body">
<div id="tab1">
<h2>Heading 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla deserunt consectetur ratione id tempore laborum laudantium facilis reprehenderit beatae dolores ipsum nesciunt alias iusto dicta eius itaque blanditiis modi velit.</p>
</div>
<div id="tab2">
<h2>Heading 2</h2>
<p>Adipisci autem obcaecati velit natus quos beatae explicabo at tempora minima voluptates deserunt eum consectetur reiciendis placeat dolorem repellat in nam asperiores impedit voluptas iure repellendus unde eveniet accusamus ex.</p>
</div>
<div id="tab3">
<h2>Heading 3</h2>
<p>Atque ratione soluta laboriosam illo inventore amet ipsum aliquam assumenda harum provident nam accusantium neque debitis obcaecati maxime officia saepe ad ducimus in quam libero vero quasi. Saepe sit nisi?</p>
</div>
<div id="tab4">
<h2>Heading 4</h2>
<p>Quidem perferendis id sapiente cumque ullam repellendus dolorum odit rerum quibusdam tempora voluptatibus ipsum. Maiores laborum velit aperiam dicta quisquam assumenda at esse exercitationem culpa sequi porro minus ipsa aut.</p>
</div>
<div id="tab5">
<h2>Heading 5</h2>
<p>Iste eligendi ratione libero impedit quos necessitatibus labore corporis deserunt quo porro hic eius delectus ea ad amet dolore officiis debitis! Libero officia magnam consequuntur dignissimos molestias quia modi repellat.</p>
</div>
</section>
</div>
</div>
<h3>Table</h3>
<div class="row">
<div class="column">
<div class="table table__header">
<table>
<thead>
<tr>
<th>Full Name</th>
<th>Email</th>
<th>Country</th>
<th>Activated</th>
<th>Phone Number</th>
</tr>
</thead>
</table>
</div>
<div class="table table__content">
<table>
<tbody>
<tr>
<td data-label="Full Name">John Doe</td>
<td data-label="Email">doe@john.com</td>
<td data-label="Country">CA</td>
<td data-label="Activated">True</td>
<td data-label="Phone Number">4161234567</td>
</tr>
<tr>
<td data-label="Full Name">John Doe</td>
<td data-label="Email">doe@john.com</td>
<td data-label="Country">CA</td>
<td data-label="Activated">True</td>
<td data-label="Phone Number">4161234567</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script>
(function() {
var nav = document.querySelector(".navbar__menu"),
navToggle = document.querySelector(".navbar__hamburger");
if (navToggle) {
navToggle.addEventListener("click",
function(e) {
if (nav.className == "navbar__menu") {
nav.className = "navbar__menu--active";
navToggle.className="navbar__hamburger--active"
} else {
nav.className = "navbar__menu";
navToggle.className="navbar__hamburger"
}
e.preventDefault();
}, false);
}
}());
</script>
</body>
</html>