magical-css
Version:
A simple, unique, and responsive CSS framework, made with SASS.
313 lines (306 loc) • 12.3 kB
HTML
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/magical-css">
<link rel="stylesheet" href="../../../dist/magic.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><link rel="icon" href="//palkerecsenyi.github.io/magic/documentation/media/icon.png" type="image/x-icon" />
<script defer src="https://use.fontawesome.com/releases/v5.0.3/js/all.js"></script>
<link rel="stylesheet" href="../../prism.css">
<meta charset="UTF-8">
<title>Magic - Documentation</title>
<script>
function openNav(){
document.getElementById("nav-mobile").style.width = "100%";
}
function closeNav(){
document.getElementById("nav-mobile").style.width = "0";
}
</script>
<script src="../../navbar.js"></script>
</head>
<body>
<div id="nav-mobile" class="blue animate">
<a href="javascript:void(0)" class="close" onClick="closeNav()">×</a>
<a href="https://palkerecsenyi.github.io/magic/">Home</a>
<a href="https://palkerecsenyi.github.io/magic/start">Get Started</a>
<a href="https://palkerecsenyi.github.io/magic/documentation">Documentation</a>
<a href="https://github.com/palkerecsenyi/magic">Github</a>
</div>
<nav class="green">
<ul class="nav-left">
<li><a href="/magic" class="nav-brand-text">Magic.CSS</a></li>
<li class="nav-mobile-open" onClick="openNav()"><i class="fas fa-bars"></i></li>
</ul>
<ul class="nav-right">
<li class="nav-item"><a href="https://palkerecsenyi.github.io/magic/">Home</a></li>
<li class="nav-item"><a href="https://palkerecsenyi.github.io/magic/start">Get Started</a></li>
<li class="nav-item"><a href="https://palkerecsenyi.github.io/magic/documentation">Documentation</a></li>
<li class="nav-item"><a href="https://github.com/palkerecsenyi/magic">Github</a></li>
</ul>
</nav>
<div class="hero green-lighten">
<div class="hero-content">
<h1 class="title">John's Apple Pies</h1>
<p class="caption">Fresh apple pies from a farm, sold by a man called John.</p>
<button class="btn btn-green">Order now.</button>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">
<div class="box box-fluid floater">
<h2 class="box-title">Genuine</h2>
<p>None of our apple pies are fake. They are all genuine, and not plastic (unlike our carrot pies).</p>
</div>
</div>
<div class="col">
<div class="box box-fluid floater">
<h2 class="box-title">Watery</h2>
<p>All of our apple pies contain about 60% water. Water is good for you. Our apple pies, therefore, are good for you.</p>
</div>
</div>
<div class="col">
<div class="box box-fluid floater">
<img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/4/4b/Apple_pie.jpg" alt="Apple pie">
</div>
</div>
</div>
</div>
<div class="hero yellow-lighten">
<div class="hero-content">
<h1 class="title" style="color:black;">You know you want one.</h1>
<p class="caption" style="color:black;">Buy an apple pie before it's too late.</p>
</div>
</div>
<div class="container">
<h1 class="header" align="center">Our latest offers</h1>
<hr class="separator">
<div class="row">
<div class="col">
<div class="project green">
<div class="body">
<h1 class="title">Yellow pie</h1>
<p class="description">A fresh pie made of rotten yellow apples. Mmm, tasty!</p>
</div>
<div class="footer">
<p class="footer-text">In stock</p>
</div>
</div>
</div>
<div class="col">
<div class="project yellow">
<div class="body">
<h1 class="title">Green pie</h1>
<p class="description">A fresh pie made of rotten green apples. Mmm, tasty!</p>
</div>
<div class="footer">
<p class="footer-text">Out of stock</p>
</div>
</div>
</div>
<div class="col">
<div class="project green">
<div class="body">
<h1 class="title">Yellow pie</h1>
<p class="description">A fresh pie made of rotten yellow apples. Mmm, tasty!</p>
</div>
<div class="footer">
<p class="footer-text">In stock</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="project yellow">
<div class="body">
<h1 class="title">Green pie</h1>
<p class="description">A fresh pie made of rotten green apples. Mmm, tasty!</p>
</div>
<div class="footer">
<p class="footer-text">Out of stock</p>
</div>
</div>
</div>
<div class="col">
<div class="project green">
<div class="body">
<h1 class="title">Yellow pie</h1>
<p class="description">A fresh pie made of rotten yellow apples. Mmm, tasty!</p>
</div>
<div class="footer">
<p class="footer-text">In stock</p>
</div>
</div>
</div>
<div class="col">
<div class="project yellow">
<div class="body">
<h1 class="title">Green pie</h1>
<p class="description">A fresh pie made of rotten green apples. Mmm, tasty!</p>
</div>
<div class="footer">
<p class="footer-text">Out of stock</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="project green">
<div class="body">
<h1 class="title">Yellow pie</h1>
<p class="description">A fresh pie made of rotten yellow apples. Mmm, tasty!</p>
</div>
<div class="footer">
<p class="footer-text">In stock</p>
</div>
</div>
</div>
<div class="col">
<div class="project yellow">
<div class="body">
<h1 class="title">Green pie</h1>
<p class="description">A fresh pie made of rotten green apples. Mmm, tasty!</p>
</div>
<div class="footer">
<p class="footer-text">Out of stock</p>
</div>
</div>
</div>
<div class="col">
<div class="project green">
<div class="body">
<h1 class="title">Yellow pie</h1>
<p class="description">A fresh pie made of rotten yellow apples. Mmm, tasty!</p>
</div>
<div class="footer">
<p class="footer-text">In stock</p>
</div>
</div>
</div>
</div>
<hr class="separator">
<h2 class="sub-header" align="center"><span class="badge yellow">Genuine</span> Testimonials</h2>
<div class="comments">
<div class="new">
<textarea placeholder="New testimonial..."></textarea>
<button class="btn btn-yellow">Submit</button>
</div>
<div class="comment">
<div class="body">
<p class="text">Lovely pies! Very tasty!</p>
</div>
<div class="footer">
<p class="footer-text">John Smith | 5 stars</p>
</div>
</div>
<div class="comment">
<div class="body">
<p class="text">I found a slug. It was moving. Very tasty slug!</p>
</div>
<div class="footer">
<p class="footer-text">Jane Doe | 4 stars</p>
</div>
</div>
</div>
<div class="table-responsive">
<table class="table table-zebra top bottom">
<thead>
<tr>
<th scope="col">Colour</th>
<th scope="col">Price</th>
<th scope="col">Tastiness</th>
</tr>
</thead>
<tbody>
<tr>
<td>Yellow</td>
<td>£42-ish</td>
<td>Not that tasty.</td>
</tr>
<tr>
<td>Green</td>
<td>Too much</td>
<td>It's OK.</td>
</tr>
<tr>
<td>Blue</td>
<td>Doesn't exist</td>
<td>As I said, doesn't exist.</td>
</tr>
</tbody>
</table>
</div>
<div class="box center">
<h2 class="box-title" align="center">Order</h2>
<form>
<div class="row">
<div class="col">
<input type="text" class="input-green" placeholder="Full name...">
</div>
<div class="col">
<input type="email" class="input-green" placeholder="Email...">
</div>
<div class="col">
<input type="text" class="input-green" placeholder="Phone number...">
</div>
</div>
<select style="display:block;" class="center">
<option>Yellow pie</option>
<option>Green pie</option>
</select>
<label class="center" style="display:block;">Quantity</label>
<div class="radio-group center" style="display:block;">
<input type="radio" id="r1" class="green" name="q">
<label for="r1">30</label>
<input type="radio" id="r2" class="green" name="q">
<label for="r2">50</label>
<input type="radio" id="r3" class="green" name="q">
<label for="r3">70</label>
</div>
<button type="submit" class="btn-grad btn-grad-green btn-fluid">Submit</button>
<div class="error yellow-lighten top">
I agree to the <a class="link lined" href="#!" onclick="$('#modal').addClass('active')">terms and conditions.</a>
</div>
<div class="modal" id="modal">
<div class="modal-adv">
<div class="modal-adv-title">
<h1 class="modal-adv-title-text">Terms and Conditions</h1>
<button class="modal-adv-title-close" onclick="$('#modal').removeClass('active');return false;">×</button>
</div>
<div class="modal-adv-body">
<h3>Section 1.1</h3>
<p>I agree not to eat the apple pies that I am sent.</p>
<h3>Section 1.2</h3>
<p>I agree not to order yellow pies.</p>
<h3>Section 1.4</h3>
<p>I agree not to eat the slugs.</p>
</div>
</div>
</div>
</form>
</div>
</div>
<footer class="green">
<div class="body">
<div class="content">
<h1>Magic.css</h1>
<p>Neat and unique CSS framework for dynamic websites</p>
</div>
<div class="links">
<ul>
<li class="header">Pages</li>
<li><a href="/magic">Home</a></li>
<li><a href="start">Start</a></li>
<li><a href="https://github.com/palkerecsenyi/magic/">Github</a></li>
</ul>
</div>
</div>
<div class="bottom">
<p>© Magic 2018. <strong>Content shown on this page is entirely <em>fictional</em>.</strong> <span class="right-float"><a onClick="$('html, body').animate({ scrollTop: 0 }, 'slow');return false;" href="#" class="link"><i class="fas fa-arrow-up"></i> Back to Top</a></span></p>
</div>
</footer>
</body>
</html>