Skip to content

Instantly share code, notes, and snippets.

@akhbar

akhbar/Site Mapper.markdown

Created November 2, 2015 07:31
Show Gist options
  • Save akhbar/f556bbcbec60f4eb0460 to your computer and use it in GitHub Desktop.
Save akhbar/f556bbcbec60f4eb0460 to your computer and use it in GitHub Desktop.
Download ZIP
Site Mapper
Raw
index.html
<section id="intro">
<div id="introText">
<h1>Site Mapper</h1>
</div>
</section>
<section id="preview">
<div id="about">A very simple website planning tool for small sites.</div>
<div id="show">Make a Map!</div>
</section>
<a href="http://en.wikipedia.org/wiki/Site_map" target="blank"><div id="learn">What's a Site Map?</div></a>
<section id="mainApp">
<nav contenteditable="true">Type here to add a title.</nav>
<section id="app">
<section id="page1">
<div id="column">
<div id="item1">
<div id="box" contenteditable="true" class="cli2">Home</div>
</div>
<div class="firstclick"><p>+</p></div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Type Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
</div>
</div>
<div id="next" class="n1">
<p>+</p>
</div>
<div id="column2">
<div id="item2">
<div id="box" contenteditable="true" class="cli2">Type Here!</div>
</div>
<div class="firstclick2"><p>+</p></div>
<div id="item" class="itemcol2">
<div id="box" contenteditable="true" class="c2i">Type Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
</div>
</div>
<div id="next" class="n2">
<p>+</p>
</div>
<div id="column3">
<div id="item3">
<div id="box" contenteditable="true" class="cli2">Here!</div>
</div>
<div class="firstclick3"><p>+</p></div>
<div id="item" class="itemcol3">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
</div>
</div>
<div id="next" class="n3">
<p>+</p>
</div>
<section id="page2">
<div id="column4">
<div id="item3">
<div id="box" contenteditable="true" class="cli2">Here!</div>
</div>
<div class="firstclick4"><p>+</p></div>
<div id="item" class="itemcol4">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
</div>
</div>
<div id="next" class="n4">
<p>+</p>
</div>
<div id="column5">
<div id="item3">
<div id="box" contenteditable="true" class="cli2">Here!</div>
</div>
<div class="firstclick5"><p>+</p></div>
<div id="item" class="itemcol5">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
</div>
</div>
<div id="next" class="n5">
<p>+</p>
</div>
<div id="column6">
<div id="item3">
<div id="box" contenteditable="true" class="cli2">Here!</div>
</div>
<div class="firstclick6"><p>+</p></div>
<div id="item" class="itemcol6">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
</div>
</div>
<div id="next" class="n6">
<p>+</p>
</div>
</section>
</section>
<section id="page1">
<div id="column7">
<div id="item3">
<div id="box" contenteditable="true" class="cli2">Here!</div>
</div>
<div class="firstclick7"><p>+</p></div>
<div id="item" class="itemcol7">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
</div>
</div>
<div id="next" class="n7">
<p>+</p>
</div>
<div id="column8">
<div id="item3">
<div id="box" contenteditable="true" class="cli2">Here!</div>
</div>
<div class="firstclick8"><p>+</p></div>
<div id="item" class="itemcol8">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
</div>
</div>
<div id="next" class="n8">
<p>+</p>
</div>
<div id="column9">
<div id="item3">
<div id="box" contenteditable="true" class="cli2">Here!</div>
</div>
<div class="firstclick9"><p>+</p></div>
<div id="item" class="itemcol9">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
</div>
</div>
<div id="next" class="n9">
<p>+</p>
</div>
<section id="page2">
<div id="column10">
<div id="item3">
<div id="box" contenteditable="true" class="cli2">Here!</div>
</div>
<div class="firstclick10"><p>+</p></div>
<div id="item" class="itemcol10">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
</div>
</div>
<div id="next" class="n10">
<p>+</p>
</div>
<div id="column11">
<div id="item3">
<div id="box" contenteditable="true" class="cli2">Here!</div>
</div>
<div class="firstclick11"><p>+</p></div>
<div id="item" class="itemcol11">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
</div>
</div>
<div id="next" class="n11">
<p>+</p>
</div>
<div id="column12">
<div id="item3">
<div id="box" contenteditable="true" class="cli2">Here!</div>
</div>
<div class="firstclick12"><p>+</p></div>
<div id="item" class="itemcol12">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
<div class="secondclick"><p>+</p></div>
</div>
<div id="item">
<div id="box" contenteditable="true" class="c2i">Here!</div>
</div>
</div>
<div id="next" class="n13">
<p>+</p>
</div>
</section>
</section>
</section>
</section>
<section id="print">
<h3>Print Sitemap / Print to PDF</h3>
<h4>This will only print your sitemap, not the whole website.</h4>
</section>
<section id="footer">
</section>
Raw
script.js
$(document).ready(function() {
$('#show').on('click', function(){
$('#preview').hide();
$('#learn').hide();
$('#mainApp').fadeIn();
$('#print').fadeIn();
});
$('h3').on('click', function(){
window.print();
return false;
});
$('.firstclick').on('click', function() {
$("#item").fadeToggle("fast");
});
$('.secondclick').on('click', function() {
$(this).parent().next('#item').fadeToggle("fast");
});
$('.firstclick2').on('click', function() {
$(".itemcol2").fadeToggle("fast");
});
$('.firstclick3').on('click', function() {
$(".itemcol3").fadeToggle("fast");
});
$('.firstclick4').on('click', function() {
$(".itemcol4").fadeToggle("fast");
});
$('.firstclick5').on('click', function() {
$(".itemcol5").fadeToggle("fast");
});
$('.firstclick6').on('click', function() {
$(".itemcol6").fadeToggle("fast");
});
$('.firstclick7').on('click', function() {
$(".itemcol7").fadeToggle("fast");
});
$('.firstclick8').on('click', function() {
$(".itemcol8").fadeToggle("fast");
});
$('.firstclick9').on('click', function() {
$(".itemcol9").fadeToggle("fast");
});
$('.firstclick10').on('click', function() {
$(".itemcol10").fadeToggle("fast");
});
$('.firstclick11').on('click', function() {
$(".itemcol11").fadeToggle("fast");
});
$('.firstclick12').on('click', function() {
$(".itemcol12").fadeToggle("fast");
});
$('.firstclick13').on('click', function() {
$(".itemcol13").fadeToggle("fast");
});
$('.firstclick14').on('click', function() {
$(".itemcol14").fadeToggle("fast");
});
$('#next').on('click', function() {
$('#column2').fadeToggle();
$('.n2').fadeToggle();
});
$('.n2').on('click', function() {
$('#column3').fadeToggle();
$('.n3').fadeToggle();
});
$('.n3').on('click', function() {
$('#column4').fadeToggle();
$('.n4').fadeToggle();
});
$('.n4').on('click', function() {
$('#column5').fadeToggle();
$('.n5').fadeToggle();
});
$('.n5').on('click', function() {
$('#column6').fadeToggle();
$('.n6').fadeToggle();
});
$('.n6').on('click', function() {
$('#column7').fadeToggle();
$('.n7').fadeToggle();
});
$('.n7').on('click', function() {
$('#column8').fadeToggle();
$('.n8').fadeToggle();
});
$('.n8').on('click', function() {
$('#column9').fadeToggle();
$('.n9').fadeToggle();
});
$('.n9').on('click', function() {
$('#column10').fadeToggle();
$('.n10').fadeToggle();
});
$('.n10').on('click', function() {
$('#column11').fadeToggle();
$('.n11').fadeToggle();
});
$('.n11').on('click', function() {
$('#column12').fadeToggle();
$('.n12').fadeToggle();
});
$('.n12').on('click', function() {
$('#column13').fadeToggle();
$('.n13').fadeToggle();
});
$('.n13').on('click', function() {
$('#column14').fadeToggle();
});
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
Site Mapper.markdown
Raw
style.css
body{background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/242749/tweed.png); font-family: 'Open Sans', sans-serif;, sans-serif;}
::selection {
background: black; color: white;
}
::-moz-selection {
background: black; color: white;
}
a{text-decoration:none;}
#intro{width: 100%; background-color: rgb(53, 127, 201); background-size: cover;}
#introText{text-align: center; width: 100%; background-color: rgba(53, 127, 201, 0.7);}
#intro h1{padding: 1em 0 .8em 0; font-size: 4em; color: white; font-weight: 300;}
#intro h2{padding: .2em 0 2em 0; color: white;}
#intro h3{padding: 1.5em 0 1.5em 0; text-align: center;}
#preview{background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/242749/previewh.jpg); background-size: cover; background-position: center; background-attachment: fixed; height: 400px;}
#show{cursor: pointer; width: 200px; text-align: center; padding: 1em 0 1em 0; border-radius: 20px; background-color: rgb(53, 127, 201); color: white; margin: 8.5em auto 0 auto;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
transition: all 0.4s linear;}
#show:hover{background-color: rgb(51, 94, 136); border-radius: 0;}
#about{background-color: rgb(51, 94, 136); text-align: center; color: white; padding: 1em 0 1em 0; box-shadow: 0 5px 7px rgba(0,0,0,.5);}
#learn{width: 100%; text-align: center; padding: 1em 0 1em 0; background-color: rgb(232, 232, 232); cursor: pointer; color: black;}
#mainApp{display: none; background-color: rgb(243, 242, 236); padding-bottom: 2em;}
nav{background-color: rgb(51, 94, 136); width: 100%; font-family: 'rokkitt', sans-serif; color: white; text-align: center; font-size: 1.7em; padding: .5em 0 .5em 0; box-shadow: 7px 7px 5px rgba(0, 0, 0, 0.2);}
#app{margin: 0 0 3em 0;}
#page1{display: inline-block; width: 90%; margin: 0 0 0 7%;}
.clearfix{clear: both;}
#column{width: 11%; display: block; float: left; margin: 3em 0 0 2%}
#column2{width: 11%; display: none; float: left; margin: 3em 0 0 2%;}
#column3{width: 11%; display: none; float: left; margin: 3em 0 0 2%;}
#column4{width: 11%; display: none; float: left; margin: 3em 0 0 2%;}
#column5{width: 11%; display: none; float: left; margin: 3em 0 0 2%;}
#column6{width: 11%; display: none; float: left; margin: 3em 0 0 2%;}
#column7{width: 11%; display: none; float: left; margin: 3em 0 0 2%;}
#column8{width: 11%; display: none; float: left; margin: 3em 0 0 2%;}
#column9{width: 11%; display: none; float: left; margin: 3em 0 0 2%;}
#column10{width: 11%; display: none; float: left; margin: 3em 0 0 2%;}
#column11{width: 11%; display: none; float: left; margin: 3em 0 0 2%;}
#column12{width: 11%; display: none; float: left; margin: 3em 0 0 2%;}
#column13{width: 11%; display: none; float: left; margin: 3em 0 0 2%;}
#column14{width: 11%; display: none; float: left; margin: 3em 0 0 2%;}
.cli2{background-color: rgb(53, 127, 201); color: white;}
.c2i{border: 4px solid rgb(124, 173, 222); font-size: .9em;}
.n2{display: none;}
.n3{display: none;}
.n4{display: none;}
.n5{display: none;}
.n6{display: none;}
.n7{display: none;}
.n8{display: none;}
.n9{display: none;}
.n10{display: none;}
.n11{display: none;}
.n12{display: none;}
.n13{display: none;}
#next{width: 20px; float: left; vertical-align: top; margin: 3.6em 0 0 1%;}
#box{width: 100%; min-height: 30px; text-align: center; font-size: 1em; padding: .9em 0 .3em 0; margin: .5em 0 .5em 0; border-radius: 5px;}
p{text-align: center; color: white; font-size: 1em; margin: .5em 0 .5em 0; background-color: rgb(198, 198, 198); width: 20px; margin: 0 auto 0 auto; border-radius: 50%; padding: .2em .2em .4em .2em;-webkit-transition: all 0.4s linear; cursor: pointer;
-moz-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
transition: all 0.4s linear;}
p:hover{background-color: rgb(125, 125, 125);}
#item{display: none;}
#print{background-color: rgb(232, 232, 232); width: 100%; display: none; cursor: pointer;}
#print h3{text-align: center; width: 210px; background-color: rgb(53, 127, 201); margin: 0 auto 0 auto; padding: .5em 0 .5em 0; color: white; font-size: .9em;}
#print h3:hover{background-color: rgb(51, 94, 136);}
#print h4{width: 100%; padding: .5em 0 .5em 0; text-align: center; background-color: rgb(214, 213, 213);}
#footer{width: 100%; padding: .5em 0 .5em 0; background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/242749/tweed.png);}
#footer h2{color: white; margin-left: 5%;}
@media only screen and (max-width: 1024px){
#column{width: 22%; display: block; float: left; margin: 3em 0 0 2%;}
#column2{width: 22%; display: none; float: left; margin: 3em 0 0 2%;}
#column3{width: 22%; display: none; float: left; margin: 3em 0 0 2%;}
#column4{width: 22%; display: none; float: left; margin: 3em 0 0 2%;}
#column5{width: 22%; display: none; float: left; margin: 3em 0 0 2%;}
#column6{width: 22%; display: none; float: left; margin: 3em 0 0 2%;}
#column7{width: 22%; display: none; float: left; margin: 3em 0 0 2%;}
#column8{width: 22%; display: none; float: left; margin: 3em 0 0 2%;}
#column9{width: 22%; display: none; float: left; margin: 3em 0 0 2%;}
#column10{width: 22%; display: none; float: left; margin: 3em 0 0 2%;}
#column11{width: 22%; display: none; float: left; margin: 3em 0 0 2%;}
#column12{width: 22%; display: none; float: left; margin: 3em 0 0 2%;}
#column13{width: 22%; display: none; float: left; margin: 3em 0 0 2%;}
#column14{width: 22%; display: none; float: left; margin: 3em 0 0 2%;}
#page1{margin: 0 0 0 3.6em;}
#page2{display: inline-block; width: 100%; margin: 0 0 0 0;}
}
@media only screen and (max-width: 480px){
#column{width: 82%; display: block; float: left; margin: 3em 0 0 2%;}
#column2{width: 82%; display: none; float: left; margin: 3em 0 0 2%;}
#column3{width: 82%; display: none; float: left; margin: 3em 0 0 2%;}
#column4{width: 82%; display: none; float: left; margin: 3em 0 0 2%;}
#column5{width: 82%; display: none; float: left; margin: 3em 0 0 2%;}
#column6{width: 82%; display: none; float: left; margin: 3em 0 0 2%;}
#column7{width: 82%; display: none; float: left; margin: 3em 0 0 2%;}
#column8{width: 82%; display: none; float: left; margin: 3em 0 0 2%;}
#column9{width: 82%; display: none; float: left; margin: 3em 0 0 2%;}
#column10{width: 82%; display: none; float: left; margin: 3em 0 0 2%;}
#column11{width: 82%; display: none; float: left; margin: 3em 0 0 2%;}
#column12{width: 82%; display: none; float: left; margin: 3em 0 0 2%;}
#column13{width: 82%; display: none; float: left; margin: 3em 0 0 2%;}
#column14{width: 82%; display: none; float: left; margin: 3em 0 0 2%;}
#page1{margin: 0 0 0 1em;}
}
@media print {
* { -webkit-print-color-adjust: exact; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; }
@page { margin: 0.5cm; }
body{background-image: none;}
#intro{display: none;}
#print{display: none; opacity: 0;}
#footer{display: none;}
p{display: none;}
#box{width: 95%; padding: .9em 2% .3em 2%; font-size: 10pt;}
/*.cli2{border: 4px solid black; font-weight: 400;}*/
/*.c2i{border: 1px solid black; font-weight: 300;}*/
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment