<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class='grid'></div>
<div class='panel'>
<i class='fa fa-arrow-left close'></i>
<h1>HTML</h1>
<p class='markup'></p>
<h2>CSS</h2>
<p class='css'></p>
</div>
@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed:700");
@import url("https://fonts.googleapis.com/css?family=Source+Code+Pro");
* {
box-sizing: border-box;
}
.close {
position: absolute;
width: 100%;
border-bottom: 1px solid #f6f6f6;
padding: 17px;
left: 0;
top: 0;
transition: all 0.3s;
color: #54589c;
cursor: pointer;
}
.close:hover {
background: #f6f6f6;
}
body {
margin: 0;
overflow-x: hidden;
font-family: 'Roboto Condensed', sans-serif;
}
body.open .panel {
right: 0;
}
body.open .grid {
-webkit-transform: translateX(-450px);
transform: translateX(-450px);
opacity: 0.2;
pointer-events: none;
}
body span {
font-size: 10px;
opacity: 0.1;
position: absolute;
top: 20px;
left: 20px;
}
.grid_alt {
background: #2a3648;
}
.grid_alt span {
color: white;
}
.grid_alt .grid_item:hover {
background: #293340;
}
.grid_alt .menu_part {
background: white !important;
}
.panel {
overflow-y: scroll;
width: 450px;
border-left: 1px solid whitesmoke;
position: fixed;
padding: 100px 60px 60px 60px;
background: white;
right: -450px;
height: 100vh;
top: 0;
transition: all 0.3s;
}
.panel h1,
.panel h2 {
margin: 0;
font-size: 16px;
}
.panel h2 {
margin-top: 30px;
}
.panel p {
white-space: pre;
-moz-tab-size: 2;
-o-tab-size: 2;
tab-size: 2;
font-family: 'Source Code Pro', monospace;
font-size: 9px;
font-weight: 100;
line-height: 14px;
}
.grid,
.grid_alt {
transition: all 0.3s;
overflow: hidden;
width: 100vw;
margin: 0 auto;
padding: 100px;
}
.grid_item,
.grid_alt_item {
width: 8.3333vw;
height: 8.3333vw;
float: left;
position: relative;
transition: all 0.5s;
overflow: hidden;
}
@media only screen and (max-width: 1200px) {
.grid_item,
.grid_alt_item {
width: 20vw;
height: 20vw;
}
}
@media only screen and (max-width: 700px) {
.grid_item,
.grid_alt_item {
width: 25vw;
height: 25vw;
}
}
@media only screen and (max-width: 400px) {
.grid_item,
.grid_alt_item {
width: 50vw;
height: 50vw;
}
}
.grid_item:hover i,
.grid_alt_item:hover i {
bottom: 20px;
}
.grid_item i,
.grid_alt_item i {
opacity: 0.1;
position: absolute;
right: 20px;
bottom: -20px;
transition: all 0.3s;
cursor: pointer;
font-size: 12px;
}
.grid_item i:hover,
.grid_alt_item i:hover {
opacity: 1;
}
.grid_item:hover,
.grid_alt_item:hover {
background: #f7f7f7;
}
.grid_item:nth-of-type(1),
.grid_alt_item:nth-of-type(1) {
opacity: 0;
-webkit-animation: fadeIn 1s 0.0285714286s forwards;
animation: fadeIn 1s 0.0285714286s forwards;
}
.grid_item:nth-of-type(2),
.grid_alt_item:nth-of-type(2) {
opacity: 0;
-webkit-animation: fadeIn 1s 0.0571428571s forwards;
animation: fadeIn 1s 0.0571428571s forwards;
}
.grid_item:nth-of-type(3),
.grid_alt_item:nth-of-type(3) {
opacity: 0;
-webkit-animation: fadeIn 1s 0.0857142857s forwards;
animation: fadeIn 1s 0.0857142857s forwards;
}
.grid_item:nth-of-type(4),
.grid_alt_item:nth-of-type(4) {
opacity: 0;
-webkit-animation: fadeIn 1s 0.1142857143s forwards;
animation: fadeIn 1s 0.1142857143s forwards;
}
.grid_item:nth-of-type(5),
.grid_alt_item:nth-of-type(5) {
opacity: 0;
-webkit-animation: fadeIn 1s 0.1428571429s forwards;
animation: fadeIn 1s 0.1428571429s forwards;
}
.grid_item:nth-of-type(6),
.grid_alt_item:nth-of-type(6) {
opacity: 0;
-webkit-animation: fadeIn 1s 0.1714285714s forwards;
animation: fadeIn 1s 0.1714285714s forwards;
}
.grid_item:nth-of-type(7),
.grid_alt_item:nth-of-type(7) {
opacity: 0;
-webkit-animation: fadeIn 1s 0.2s forwards;
animation: fadeIn 1s 0.2s forwards;
}
.grid_item:nth-of-type(8),
.grid_alt_item:nth-of-type(8) {
opacity: 0;
-webkit-animation: fadeIn 1s 0.2285714286s forwards;
animation: fadeIn 1s 0.2285714286s forwards;
}
.grid_item:nth-of-type(9),
.grid_alt_item:nth-of-type(9) {
opacity: 0;
-webkit-animation: fadeIn 1s 0.2571428571s forwards;
animation: fadeIn 1s 0.2571428571s forwards;
}
.grid_item:nth-of-type(10),
.grid_alt_item:nth-of-type(10) {
opacity: 0;
-webkit-animation: fadeIn 1s 0.2857142857s forwards;
animation: fadeIn 1s 0.2857142857s forwards;
}
.grid_item:nth-of-type(11),
.grid_alt_item:nth-of-type(11) {
opacity: 0;
-webkit-animation: fadeIn 1s 0.3142857143s forwards;
animation: fadeIn 1s 0.3142857143s forwards;
}
.grid_item:nth-of-type(12),
.grid_alt_item:nth-of-type(12) {
opacity: 0;
-webkit-animation: fadeIn 1s 0.3428571429s forwards;
animation: fadeIn 1s 0.3428571429s forwards;
}
.grid_item:nth-of-type(13),
.grid_alt_item:nth-of-type(13) {
opacity: 0;
-webkit-animation: fadeIn 1s 0.3714285714s forwards;
animation: fadeIn 1s 0.3714285714s forwards;
}
.grid_item:nth-of-type(14),
.grid_alt_item:nth-of-type(14) {
opacity: 0;
-webkit-animation: fadeIn 1s 0.4s forwards;
animation: fadeIn 1s 0.4s forwards;
}
.grid_item:nth-of-type(15),
.grid_alt_item:nth-of-type(15) {
opacity: 0;
-webkit-animation: fadeIn 1s 0.4285714286s forwards;
animation: fadeIn 1s 0.4285714286s forwards;
}
.grid_item:nth-of-type(16),
.grid_alt_item:nth-of-type(16) {
opacity: 0;
-webkit-animation: fadeIn 1s 0.4571428571s forwards;
animation: fadeIn 1s 0.4571428571s forwards;
}
.grid_item:nth-of-type(17),
.grid_alt_item:nth-of-type(17) {
opacity: 0;
-webkit-animation: fadeIn 1s 0.4857142857s forwards;
animation: fadeIn 1s 0.4857142857s forwards;
}
.grid_item:nth-of-type(18),
.grid_alt_item:nth-of-type(18) {
opacity: 0;
-webkit-animation: fadeIn 1s 0.5142857143s forwards;
animation: fadeIn 1s 0.5142857143s forwards;
}
.grid_item:nth-of-type(19),
.grid_alt_item:nth-of-type(19) {
opacity: 0;
-webkit-animation: fadeIn 1s 0.5428571429s forwards;
animation: fadeIn 1s 0.5428571429s forwards;
}
.grid_item:nth-of-type(20),
.grid_alt_item:nth-of-type(20) {
opacity: 0;
-webkit-animation: fadeIn 1s 0.5714285714s forwards;
animation: fadeIn 1s 0.5714285714s forwards;
}
.grid_item:nth-of-type(21),
.grid_alt_item:nth-of-type(21) {
opacity: 0;
-webkit-animation: fadeIn 1s 0.6s forwards;
animation: fadeIn 1s 0.6s forwards;
}
.grid_item:nth-of-type(22),
.grid_alt_item:nth-of-type(22) {
opacity: 0;
-webkit-animation: fadeIn 1s 0.6285714286s forwards;
animation: fadeIn 1s 0.6285714286s forwards;
}
.grid_item:nth-of-type(23),
.grid_alt_item:nth-of-type(23) {
opacity: 0;
-webkit-animation: fadeIn 1s 0.6571428571s forwards;
animation: fadeIn 1s 0.6571428571s forwards;
}
.grid_item:nth-of-type(24),
.grid_alt_item:nth-of-type(24) {
opacity: 0;
-webkit-animation: fadeIn 1s 0.6857142857s forwards;
animation: fadeIn 1s 0.6857142857s forwards;
}
.grid_item:nth-of-type(25),
.grid_alt_item:nth-of-type(25) {
opacity: 0;
-webkit-animation: fadeIn 1s 0.7142857143s forwards;
animation: fadeIn 1s 0.7142857143s forwards;
}
.grid_item:nth-of-type(26),
.grid_alt_item:nth-of-type(26) {
opacity: 0;
-webkit-animation: fadeIn 1s 0.7428571429s forwards;
animation: fadeIn 1s 0.7428571429s forwards;
}
.grid_item:nth-of-type(27),
.grid_alt_item:nth-of-type(27) {
opacity: 0;
-webkit-animation: fadeIn 1s 0.7714285714s forwards;
animation: fadeIn 1s 0.7714285714s forwards;
}
.grid_item:nth-of-type(28),
.grid_alt_item:nth-of-type(28) {
opacity: 0;
-webkit-animation: fadeIn 1s 0.8s forwards;
animation: fadeIn 1s 0.8s forwards;
}
.grid_item:nth-of-type(29),
.grid_alt_item:nth-of-type(29) {
opacity: 0;
-webkit-animation: fadeIn 1s 0.8285714286s forwards;
animation: fadeIn 1s 0.8285714286s forwards;
}
.grid_item:nth-of-type(30),
.grid_alt_item:nth-of-type(30) {
opacity: 0;
-webkit-animation: fadeIn 1s 0.8571428571s forwards;
animation: fadeIn 1s 0.8571428571s forwards;
}
.grid_item:nth-of-type(31),
.grid_alt_item:nth-of-type(31) {
opacity: 0;
-webkit-animation: fadeIn 1s 0.8857142857s forwards;
animation: fadeIn 1s 0.8857142857s forwards;
}
.grid_item:nth-of-type(32),
.grid_alt_item:nth-of-type(32) {
opacity: 0;
-webkit-animation: fadeIn 1s 0.9142857143s forwards;
animation: fadeIn 1s 0.9142857143s forwards;
}
.grid_item:nth-of-type(33),
.grid_alt_item:nth-of-type(33) {
opacity: 0;
-webkit-animation: fadeIn 1s 0.9428571429s forwards;
animation: fadeIn 1s 0.9428571429s forwards;
}
.grid_item:nth-of-type(34),
.grid_alt_item:nth-of-type(34) {
opacity: 0;
-webkit-animation: fadeIn 1s 0.9714285714s forwards;
animation: fadeIn 1s 0.9714285714s forwards;
}
.grid_item:nth-of-type(35),
.grid_alt_item:nth-of-type(35) {
opacity: 0;
-webkit-animation: fadeIn 1s 1s forwards;
animation: fadeIn 1s 1s forwards;
}
.grid_item:nth-of-type(36),
.grid_alt_item:nth-of-type(36) {
opacity: 0;
-webkit-animation: fadeIn 1s 1.0285714286s forwards;
animation: fadeIn 1s 1.0285714286s forwards;
}
.grid_item:nth-of-type(37),
.grid_alt_item:nth-of-type(37) {
opacity: 0;
-webkit-animation: fadeIn 1s 1.0571428571s forwards;
animation: fadeIn 1s 1.0571428571s forwards;
}
.grid_item:nth-of-type(38),
.grid_alt_item:nth-of-type(38) {
opacity: 0;
-webkit-animation: fadeIn 1s 1.0857142857s forwards;
animation: fadeIn 1s 1.0857142857s forwards;
}
.grid_item:nth-of-type(39),
.grid_alt_item:nth-of-type(39) {
opacity: 0;
-webkit-animation: fadeIn 1s 1.1142857143s forwards;
animation: fadeIn 1s 1.1142857143s forwards;
}
.grid_item:nth-of-type(40),
.grid_alt_item:nth-of-type(40) {
opacity: 0;
-webkit-animation: fadeIn 1s 1.1428571429s forwards;
animation: fadeIn 1s 1.1428571429s forwards;
}
.grid_item:nth-of-type(41),
.grid_alt_item:nth-of-type(41) {
opacity: 0;
-webkit-animation: fadeIn 1s 1.1714285714s forwards;
animation: fadeIn 1s 1.1714285714s forwards;
}
.grid_item:nth-of-type(42),
.grid_alt_item:nth-of-type(42) {
opacity: 0;
-webkit-animation: fadeIn 1s 1.2s forwards;
animation: fadeIn 1s 1.2s forwards;
}
.grid_item:nth-of-type(43),
.grid_alt_item:nth-of-type(43) {
opacity: 0;
-webkit-animation: fadeIn 1s 1.2285714286s forwards;
animation: fadeIn 1s 1.2285714286s forwards;
}
.grid_item:nth-of-type(44),
.grid_alt_item:nth-of-type(44) {
opacity: 0;
-webkit-animation: fadeIn 1s 1.2571428571s forwards;
animation: fadeIn 1s 1.2571428571s forwards;
}
.grid_item:nth-of-type(45),
.grid_alt_item:nth-of-type(45) {
opacity: 0;
-webkit-animation: fadeIn 1s 1.2857142857s forwards;
animation: fadeIn 1s 1.2857142857s forwards;
}
.grid_item:nth-of-type(46),
.grid_alt_item:nth-of-type(46) {
opacity: 0;
-webkit-animation: fadeIn 1s 1.3142857143s forwards;
animation: fadeIn 1s 1.3142857143s forwards;
}
.grid_item:nth-of-type(47),
.grid_alt_item:nth-of-type(47) {
opacity: 0;
-webkit-animation: fadeIn 1s 1.3428571429s forwards;
animation: fadeIn 1s 1.3428571429s forwards;
}
.grid_item:nth-of-type(48),
.grid_alt_item:nth-of-type(48) {
opacity: 0;
-webkit-animation: fadeIn 1s 1.3714285714s forwards;
animation: fadeIn 1s 1.3714285714s forwards;
}
.grid_item:nth-of-type(49),
.grid_alt_item:nth-of-type(49) {
opacity: 0;
-webkit-animation: fadeIn 1s 1.4s forwards;
animation: fadeIn 1s 1.4s forwards;
}
.grid_item:nth-of-type(50),
.grid_alt_item:nth-of-type(50) {
opacity: 0;
-webkit-animation: fadeIn 1s 1.4285714286s forwards;
animation: fadeIn 1s 1.4285714286s forwards;
}
.grid_item:nth-of-type(51),
.grid_alt_item:nth-of-type(51) {
opacity: 0;
-webkit-animation: fadeIn 1s 1.4571428571s forwards;
animation: fadeIn 1s 1.4571428571s forwards;
}
.grid_item:nth-of-type(52),
.grid_alt_item:nth-of-type(52) {
opacity: 0;
-webkit-animation: fadeIn 1s 1.4857142857s forwards;
animation: fadeIn 1s 1.4857142857s forwards;
}
.grid_item:nth-of-type(53),
.grid_alt_item:nth-of-type(53) {
opacity: 0;
-webkit-animation: fadeIn 1s 1.5142857143s forwards;
animation: fadeIn 1s 1.5142857143s forwards;
}
.grid_item:nth-of-type(54),
.grid_alt_item:nth-of-type(54) {
opacity: 0;
-webkit-animation: fadeIn 1s 1.5428571429s forwards;
animation: fadeIn 1s 1.5428571429s forwards;
}
.grid_item:nth-of-type(55),
.grid_alt_item:nth-of-type(55) {
opacity: 0;
-webkit-animation: fadeIn 1s 1.5714285714s forwards;
animation: fadeIn 1s 1.5714285714s forwards;
}
.grid_item:nth-of-type(56),
.grid_alt_item:nth-of-type(56) {
opacity: 0;
-webkit-animation: fadeIn 1s 1.6s forwards;
animation: fadeIn 1s 1.6s forwards;
}
.grid_item:nth-of-type(57),
.grid_alt_item:nth-of-type(57) {
opacity: 0;
-webkit-animation: fadeIn 1s 1.6285714286s forwards;
animation: fadeIn 1s 1.6285714286s forwards;
}
.grid_item:nth-of-type(58),
.grid_alt_item:nth-of-type(58) {
opacity: 0;
-webkit-animation: fadeIn 1s 1.6571428571s forwards;
animation: fadeIn 1s 1.6571428571s forwards;
}
.grid_item:nth-of-type(59),
.grid_alt_item:nth-of-type(59) {
opacity: 0;
-webkit-animation: fadeIn 1s 1.6857142857s forwards;
animation: fadeIn 1s 1.6857142857s forwards;
}
.grid_item:nth-of-type(60),
.grid_alt_item:nth-of-type(60) {
opacity: 0;
-webkit-animation: fadeIn 1s 1.7142857143s forwards;
animation: fadeIn 1s 1.7142857143s forwards;
}
.grid_item:nth-of-type(61),
.grid_alt_item:nth-of-type(61) {
opacity: 0;
-webkit-animation: fadeIn 1s 1.7428571429s forwards;
animation: fadeIn 1s 1.7428571429s forwards;
}
.grid_item:nth-of-type(62),
.grid_alt_item:nth-of-type(62) {
opacity: 0;
-webkit-animation: fadeIn 1s 1.7714285714s forwards;
animation: fadeIn 1s 1.7714285714s forwards;
}
.grid_item:nth-of-type(63),
.grid_alt_item:nth-of-type(63) {
opacity: 0;
-webkit-animation: fadeIn 1s 1.8s forwards;
animation: fadeIn 1s 1.8s forwards;
}
.grid_item:nth-of-type(64),
.grid_alt_item:nth-of-type(64) {
opacity: 0;
-webkit-animation: fadeIn 1s 1.8285714286s forwards;
animation: fadeIn 1s 1.8285714286s forwards;
}
.grid_item:nth-of-type(65),
.grid_alt_item:nth-of-type(65) {
opacity: 0;
-webkit-animation: fadeIn 1s 1.8571428571s forwards;
animation: fadeIn 1s 1.8571428571s forwards;
}
.grid_item:nth-of-type(66),
.grid_alt_item:nth-of-type(66) {
opacity: 0;
-webkit-animation: fadeIn 1s 1.8857142857s forwards;
animation: fadeIn 1s 1.8857142857s forwards;
}
.grid_item:nth-of-type(67),
.grid_alt_item:nth-of-type(67) {
opacity: 0;
-webkit-animation: fadeIn 1s 1.9142857143s forwards;
animation: fadeIn 1s 1.9142857143s forwards;
}
.grid_item:nth-of-type(68),
.grid_alt_item:nth-of-type(68) {
opacity: 0;
-webkit-animation: fadeIn 1s 1.9428571429s forwards;
animation: fadeIn 1s 1.9428571429s forwards;
}
.grid_item:nth-of-type(69),
.grid_alt_item:nth-of-type(69) {
opacity: 0;
-webkit-animation: fadeIn 1s 1.9714285714s forwards;
animation: fadeIn 1s 1.9714285714s forwards;
}
.grid_item:nth-of-type(70),
.grid_alt_item:nth-of-type(70) {
opacity: 0;
-webkit-animation: fadeIn 1s 2s forwards;
animation: fadeIn 1s 2s forwards;
}
.grid_item:nth-of-type(71),
.grid_alt_item:nth-of-type(71) {
opacity: 0;
-webkit-animation: fadeIn 1s 2.0285714286s forwards;
animation: fadeIn 1s 2.0285714286s forwards;
}
.grid_item:nth-of-type(72),
.grid_alt_item:nth-of-type(72) {
opacity: 0;
-webkit-animation: fadeIn 1s 2.0571428571s forwards;
animation: fadeIn 1s 2.0571428571s forwards;
}
.grid_item:nth-of-type(73),
.grid_alt_item:nth-of-type(73) {
opacity: 0;
-webkit-animation: fadeIn 1s 2.0857142857s forwards;
animation: fadeIn 1s 2.0857142857s forwards;
}
.grid_item:nth-of-type(74),
.grid_alt_item:nth-of-type(74) {
opacity: 0;
-webkit-animation: fadeIn 1s 2.1142857143s forwards;
animation: fadeIn 1s 2.1142857143s forwards;
}
.grid_item:nth-of-type(75),
.grid_alt_item:nth-of-type(75) {
opacity: 0;
-webkit-animation: fadeIn 1s 2.1428571429s forwards;
animation: fadeIn 1s 2.1428571429s forwards;
}
.grid_item:nth-of-type(76),
.grid_alt_item:nth-of-type(76) {
opacity: 0;
-webkit-animation: fadeIn 1s 2.1714285714s forwards;
animation: fadeIn 1s 2.1714285714s forwards;
}
.grid_item:nth-of-type(77),
.grid_alt_item:nth-of-type(77) {
opacity: 0;
-webkit-animation: fadeIn 1s 2.2s forwards;
animation: fadeIn 1s 2.2s forwards;
}
.grid_item:nth-of-type(78),
.grid_alt_item:nth-of-type(78) {
opacity: 0;
-webkit-animation: fadeIn 1s 2.2285714286s forwards;
animation: fadeIn 1s 2.2285714286s forwards;
}
.grid_item:nth-of-type(79),
.grid_alt_item:nth-of-type(79) {
opacity: 0;
-webkit-animation: fadeIn 1s 2.2571428571s forwards;
animation: fadeIn 1s 2.2571428571s forwards;
}
.grid_item:nth-of-type(80),
.grid_alt_item:nth-of-type(80) {
opacity: 0;
-webkit-animation: fadeIn 1s 2.2857142857s forwards;
animation: fadeIn 1s 2.2857142857s forwards;
}
.grid_item:nth-of-type(81),
.grid_alt_item:nth-of-type(81) {
opacity: 0;
-webkit-animation: fadeIn 1s 2.3142857143s forwards;
animation: fadeIn 1s 2.3142857143s forwards;
}
.grid_item:nth-of-type(82),
.grid_alt_item:nth-of-type(82) {
opacity: 0;
-webkit-animation: fadeIn 1s 2.3428571429s forwards;
animation: fadeIn 1s 2.3428571429s forwards;
}
.grid_item:nth-of-type(83),
.grid_alt_item:nth-of-type(83) {
opacity: 0;
-webkit-animation: fadeIn 1s 2.3714285714s forwards;
animation: fadeIn 1s 2.3714285714s forwards;
}
.grid_item:nth-of-type(84),
.grid_alt_item:nth-of-type(84) {
opacity: 0;
-webkit-animation: fadeIn 1s 2.4s forwards;
animation: fadeIn 1s 2.4s forwards;
}
.grid_item:nth-of-type(85),
.grid_alt_item:nth-of-type(85) {
opacity: 0;
-webkit-animation: fadeIn 1s 2.4285714286s forwards;
animation: fadeIn 1s 2.4285714286s forwards;
}
.grid_item:nth-of-type(86),
.grid_alt_item:nth-of-type(86) {
opacity: 0;
-webkit-animation: fadeIn 1s 2.4571428571s forwards;
animation: fadeIn 1s 2.4571428571s forwards;
}
.grid_item:nth-of-type(87),
.grid_alt_item:nth-of-type(87) {
opacity: 0;
-webkit-animation: fadeIn 1s 2.4857142857s forwards;
animation: fadeIn 1s 2.4857142857s forwards;
}
.grid_item:nth-of-type(88),
.grid_alt_item:nth-of-type(88) {
opacity: 0;
-webkit-animation: fadeIn 1s 2.5142857143s forwards;
animation: fadeIn 1s 2.5142857143s forwards;
}
.grid_item:nth-of-type(89),
.grid_alt_item:nth-of-type(89) {
opacity: 0;
-webkit-animation: fadeIn 1s 2.5428571429s forwards;
animation: fadeIn 1s 2.5428571429s forwards;
}
.grid_item:nth-of-type(90),
.grid_alt_item:nth-of-type(90) {
opacity: 0;
-webkit-animation: fadeIn 1s 2.5714285714s forwards;
animation: fadeIn 1s 2.5714285714s forwards;
}
.grid_item:nth-of-type(91),
.grid_alt_item:nth-of-type(91) {
opacity: 0;
-webkit-animation: fadeIn 1s 2.6s forwards;
animation: fadeIn 1s 2.6s forwards;
}
.grid_item:nth-of-type(92),
.grid_alt_item:nth-of-type(92) {
opacity: 0;
-webkit-animation: fadeIn 1s 2.6285714286s forwards;
animation: fadeIn 1s 2.6285714286s forwards;
}
.grid_item:nth-of-type(93),
.grid_alt_item:nth-of-type(93) {
opacity: 0;
-webkit-animation: fadeIn 1s 2.6571428571s forwards;
animation: fadeIn 1s 2.6571428571s forwards;
}
.grid_item:nth-of-type(94),
.grid_alt_item:nth-of-type(94) {
opacity: 0;
-webkit-animation: fadeIn 1s 2.6857142857s forwards;
animation: fadeIn 1s 2.6857142857s forwards;
}
.grid_item:nth-of-type(95),
.grid_alt_item:nth-of-type(95) {
opacity: 0;
-webkit-animation: fadeIn 1s 2.7142857143s forwards;
animation: fadeIn 1s 2.7142857143s forwards;
}
.grid_item:nth-of-type(96),
.grid_alt_item:nth-of-type(96) {
opacity: 0;
-webkit-animation: fadeIn 1s 2.7428571429s forwards;
animation: fadeIn 1s 2.7428571429s forwards;
}
.grid_item:nth-of-type(97),
.grid_alt_item:nth-of-type(97) {
opacity: 0;
-webkit-animation: fadeIn 1s 2.7714285714s forwards;
animation: fadeIn 1s 2.7714285714s forwards;
}
.grid_item:nth-of-type(98),
.grid_alt_item:nth-of-type(98) {
opacity: 0;
-webkit-animation: fadeIn 1s 2.8s forwards;
animation: fadeIn 1s 2.8s forwards;
}
.grid_item:nth-of-type(99),
.grid_alt_item:nth-of-type(99) {
opacity: 0;
-webkit-animation: fadeIn 1s 2.8285714286s forwards;
animation: fadeIn 1s 2.8285714286s forwards;
}
.grid_item:nth-of-type(100),
.grid_alt_item:nth-of-type(100) {
opacity: 0;
-webkit-animation: fadeIn 1s 2.8571428571s forwards;
animation: fadeIn 1s 2.8571428571s forwards;
}
.grid_item__inner,
.grid_alt_item__inner {
position: absolute;
left: 0;
right: 0;
margin: auto;
top: 50%;
-webkit-transform: translatey(-50%);
transform: translatey(-50%);
text-align: center;
}
.grid_item__inner .menu:hover,
.grid_alt_item__inner .menu:hover {
opacity: 1 !important;
}
@-webkit-keyframes fadeIn {
to {
opacity: 1;
}
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
// output css
const burgers = 180;
var index = 0;
function randomBetween(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
class Hamburger {
constructor() {
this.count = randomBetween(2, 3); // How many lines does the icon have
this.height = randomBetween(2, 4);
this.width = randomBetween(18, 26);
this.originalWidth = this.width;
this.borderRadius = randomBetween(0, this.height - 1);
this.gap = randomBetween(1, 2);
this.border = randomBetween(1, 2);
this.opacity = randomBetween(100, 100) / 100;
this.transitionSpeed = randomBetween(10, 30) / 100 + 's';
this.rotation = randomBetween(0, 1) * 180;
this.menuRotation = randomBetween(0, 1) * 180;
this.scale = (randomBetween(0, 30) / 100) + 1;
this.left = (-randomBetween(0, 20) + randomBetween(0, 20));
this.easing = `cubic-bezier(${randomBetween(4, 8) / 10}, ${randomBetween(0, 1) / 10}, ${randomBetween(0, 4) / 10}, ${randomBetween(8, 20) / 10})`;
this.type = randomBetween(1, 4)
if(this.rotation > 179) {
this.transitionSpeed = randomBetween(30, 60) / 100 + 's';
}
if(this.count == 3 && this.type == 2) {
this.height += 2;
this.width = this.height;
this.borderRadius = this.height;
this.gap += 1;
}
let partStyles = `
width: ${this.width}px;
height: ${this.height}px;
position: absolute;
background: #313d44;
right: 0;
margin: auto;
left: 0;
border-radius: ${this.borderRadius}px;
transition: all ${this.transitionSpeed} ${this.easing};
`;
let checkedStyle = '';
let center = (((this.count * this.height) + ((this.count - 1) * this.gap)) / 2) - (this.height / 2);
if(this.count == 2) {
checkedStyle = `
input#menu-${index}:checked + label .menu {
transform:scale(${this.scale}) rotate(${this.menuRotation}deg);
}
input#menu-${index}:checked + label .menu .menu_part:nth-of-type(1) {
transform: rotate(${45 + this.rotation}deg);
top: calc(50% - (${this.height / 2}px))!important;
width: ${this.originalWidth}px !important;
}
input#menu-${index}:checked + label .menu .menu_part:nth-of-type(2) {
transform: rotate(${-45 - this.rotation}deg);
top: calc(50% - (${this.height / 2}px))!important;
width: ${this.originalWidth}px !important;
}
`
} else {
checkedStyle = `
input#menu-${index}:checked + label .menu {
transform:scale(${this.scale}) rotate(${this.menuRotation}deg);
}
input#menu-${index}:checked + label .menu .menu_part:nth-of-type(1) {
transform: rotate(45deg);
width: ${this.originalWidth}px !important;
top: calc(50% - (${this.height / 2}px))!important;
}
input#menu-${index}:checked + label .menu .menu_part:nth-of-type(2) {
left: ${this.left}px !important;
opacity: 0;
}
input#menu-${index}:checked + label .menu .menu_part:nth-of-type(3) {
transform: rotate(-45deg);
width: ${this.originalWidth}px!important;
top: calc(50% - (${this.height / 2}px))!important;
}
`
}
if(this.border == 1) {
checkedStyle += `input#menu-${index}:checked + label .menu {transform:scale(${this.scale}) rotate(${this.menuRotation}deg); border: 2px solid black;}`
}
var style = document.createElement('style');
style.type = 'text/css';
style.classList.add(`menu-${index}`);
style.appendChild(document.createTextNode(checkedStyle));
document.head.appendChild(style);
let partMarkup = '';
let partMarkupOutput = '';
var iteration = 0;
for(var i = 0; i < this.count; i++) {
if(this.type == 3) {
partMarkup += `<div class="menu_part" style="${partStyles}width: ${this.width - (6 * iteration)}px;
top: calc(50% - ((${((this.count * this.height) + ((this.count - 1) * this.gap)) / 2}px)) + ${(this.height * (i)) + this.gap * (i - 1) }px);
"></div>`;
} else {
partMarkup += `<div class="menu_part" style="${partStyles}width:${this.originalWidth};top: calc(50% - ((${((this.count * this.height) + ((this.count - 1) * this.gap)) / 2}px)) + ${(this.height * (i)) + this.gap * (i - 1) }px);"></div>`;
}
iteration++;
partMarkupOutput += `\t\t\t<div class="menu_part"></div>\n`;
}
this.generatedMarkup = `<input id="menu-${index}" type="checkbox" style="display: none"><label for="menu-${index}"><div class="menu" style="transition: all ${this.transitionSpeed};position: relative;width: ${this.originalWidth + 20}px;height: ${this.originalWidth + 20}px;border-radius: 100%;cursor: pointer;">${partMarkup}</div></label>`;
this.outputMarkup = `<input id="menu-${index}" type="checkbox">\n<label for="menu-${index}">\n\t<div class="menu">\n${partMarkupOutput}\t</div>\n</label>`
$('.grid').append(`<div class="grid_item"><span>.0${index + 1}</span><i class="fa fa-code" data-index="${index}"></i><div class="grid_item__inner" style="width:${this.originalWidth + 20}px; height: ${this.width + 20}px; ">${this.generatedMarkup}</div></div>`);
index++;
}
build() {
}
}
burgerArray = [];
for(var i = 0; i < burgers; i++) {
hamburger = new Hamburger();
burgerArray.push(hamburger);
}
$('.panel').click(function(){
//$('body').toggleClass('open');
})
$('.close').click(function(){
$('body').toggleClass('open');
})
$('.grid_item i').click(function() {
$('body').toggleClass('open');
$('.panel .markup').text(burgerArray[$(this).data('index')].outputMarkup);
var part = $(this).next().find('.menu').find('.menu_part:nth-of-type(1)');
var partStyles = part.attr('style').split(';');
var partStyleFinal = partStyles.join(';')
console.log(partStyles)
var partOne = $(this).next().find('.menu').find('.menu_part:nth-of-type(1)');
var test = partOne.attr('style').split(';')[10];
console.log(test)
var partOneStyles = `&:nth-of-type(1) {\n\t${partOne.attr('style').split(';')[10]};\n\twidth: ${partOne.css('width')}\n}\n\n`;
var partTwo = $(this).next().find('.menu').find('.menu_part:nth-of-type(2)');
var partTwoStyles = `&:nth-of-type(2) {\n\t${partTwo.attr('style').split(';')[10]};\n\twidth: ${partTwo.css('width')}\n}\n\n`;
if($(this).next().find('.menu').find('.menu_part').length != 2) {
var partThree = $(this).next().find('.menu').find('.menu_part:nth-of-type(3)');
var partThreeStyles = `&:nth-of-type(3) {\n\t${partThree.attr('style').split(';')[10]};\n\twidth: ${partThree.css('width')}\n}\n\n`;
} else {
var partThree = '';
var partThreeStyles = '';
}
var menu = $(this).next().find('.menu');
var menuStyles = menu.attr('style').split(';');
var menuFinal = `#menu-${$(this).data('index')} {\n\tdisplay: none;\n}\n\n.menu {
${menuStyles.join(';\n')}
\t&_part {
\t\t${partStyleFinal}
\t\t${partOneStyles}
\t\t${partTwoStyles}
\t\t${partThreeStyles}
}\n
}\n${$('style.menu-' + $(this).data('index'))[0].innerHTML}`
console.log($('style.menu-1')[0])
$('.panel .css').text(menuFinal);
})
function autoToggle() {
setInterval(function(){
$('input').click();
},1000)
}
//autoToggle();
