Skip to content

Instantly share code, notes, and snippets.

@calvinmorett

calvinmorett/gridpainter-setup.markdown

Created March 20, 2022 06:33
Show Gist options
  • Save calvinmorett/eaeed82ed8ef9047dbacd72852d2ef05 to your computer and use it in GitHub Desktop.
Save calvinmorett/eaeed82ed8ef9047dbacd72852d2ef05 to your computer and use it in GitHub Desktop.
Download ZIP
gridpainter -- setup
Raw
index.html
<html>
<body><a name="top"></a>
<nav id="nav-menu">
<div class="tabs grid-row">
<li data-tab="tab-1"><a href="#top">sq1</a></li>
<li data-tab="tab-2"><a href="#top">sq2</a></li>
<li data-tab="tab-3"><a href="#top">sq3</a></li>
<li data-tab="tab-4"><a href="#top">sq4</a></li>
</div>
<div class="tabs grid-row">
<li data-tab="tab-5"><a href="#top">sq5</a></li>
<li data-tab="tab-6"><a href="#top">sq6</a></li>
<li data-tab="tab-7"><a href="#top">sq7</a></li>
<li data-tab="tab-8"><a href="#top">sq8</a></li>
</div>
<div class="tabs grid-row">
<li data-tab="tab-9"><a href="#top">sq9</a></li>
<li data-tab="tab-10"><a href="#top">sq10</a></li>
<li data-tab="tab-11"><a href="#top">sq11</a></li>
<li data-tab="tab-12"><a href="#top">sq12</a></li>
</div>
<div class="tabs grid-row">
<li data-tab="tab-13"><a href="#top">sq13</a></li>
<li data-tab="tab-14"><a href="#top">sq14</a></li>
<li data-tab="tab-15"><a href="#top">sq15</a></li>
<li data-tab="tab-16"><a href="#top">sq16</a></li>
</div>
<div class="tabs helpsection">
<li data-tab="tab-0"><a href="#top">Help</a></li>
</div>
</nav>
<div id="container">
<div id="tab-0" class="tab-content content-0 "><p><span>Hi!</span> New to painting? Experienced? looking for more challenges or just want to improve?
<BR><BR>
Welcome to <span>Grid Painter!</span> The image on the right is a painting you can recreate!
<BR><BR>
Here's the steps you can take to create the painting on the right:
<ol>
<li> Set up your canvas, </li>
<li> Grab some paints, </li>
<li> Click around in the right image, </li>
<li> Start Painting</li>
<li> Work through a square at a time! </li>
<li> Finish YOUR masterpiece!</li>
</ol>
</p></div>
<div id="tab-1" class="tab-content content-1 current">
<div class="img-container">
<div class="img-cell img-cell-nav"></div>
<div class="img-cell img-cell-nav"></div>
<div class="img-cell img-cell-nav"></div>
<div class="img-cell img-cell-nav"></div>
<!-- should change with the page # -->
<div class="img-cell img-cell-image"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-2"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/right.png"></div>
<div class="img-cell img-cell-nav"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-5"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/bot.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-6"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/botright.png"></div>
</div>
</div>
<div id="tab-2" class="tab-content content-2">
<div class="img-container">
<div class="img-cell img-cell-nav"></div>
<div class="img-cell img-cell-nav"></div>
<div class="img-cell img-cell-nav"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-1"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/left.png"></a></div>
<!-- should change with the page # -->
<div class="img-cell img-cell-image"></div><!-- should change with the page # -->
<div class="img-cell img-cell-nav active" data-tab="tab-3"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/right.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-5"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/botleft.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-6"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/bot.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-7"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/botright.png"></div>
</div>
</div>
<div id="tab-3" class="tab-content content-3">
<div class="img-container">
<div class="img-cell img-cell-nav"></div>
<div class="img-cell img-cell-nav"></div>
<div class="img-cell img-cell-nav"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-2"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/left.png"></a></div>
<!-- should change with the page # -->
<div class="img-cell img-cell-image"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-4"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/right.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-6"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/botleft.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-7"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/bot.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-8"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/botright.png"></div>
</div>
</div>
<div id="tab-4" class="tab-content content-4">
<div class="img-container">
<div class="img-cell img-cell-nav"></div>
<div class="img-cell img-cell-nav"></div>
<div class="img-cell img-cell-nav"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-3"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/left.png"></a></div>
<!-- should change with the page # -->
<div class="img-cell img-cell-image"></div>
<div class="img-cell img-cell-nav"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-7"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/botleft.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-8"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/bot.png"></div>
<div class="img-cell img-cell-nav"></div>
</div>
</div>
<div id="tab-5" class="tab-content content-5">
<div class="img-container">
<div class="img-cell img-cell-nav"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-1"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/top.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-2"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/topright.png"></div>
<div class="img-cell img-cell-nav"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/left.png"></div>
<!-- should change with the page # -->
<div class="img-cell img-cell-image"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-6"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/right.png"></div>
<div class="img-cell img-cell-nav"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-9"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/bot.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-10"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/botright.png"></div>
</div>
</div>
<div id="tab-6" class="tab-content content-6">
<div class="img-container">
<div class="img-cell img-cell-nav active" data-tab="tab-1"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/topleft.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-2"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/top.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-3"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/topright.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-5"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/left.png"></div>
<!-- should change with the page # -->
<div class="img-cell img-cell-image"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-2"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/right.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-9"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/botleft.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-10"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/bot.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-11"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/botright.png"></div>
</div>
</div>
<div id="tab-7" class="tab-content content-7">
<div class="img-container">
<div class="img-cell img-cell-nav active" data-tab="tab-2"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/topleft.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-3"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/top.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-4"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/topright.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-6"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/left.png"></div>
<!-- should change with the page # -->
<div class="img-cell img-cell-image"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-8"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/right.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-10"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/botleft.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-11"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/bot.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-12"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/botright.png"></div>
</div>
</div>
<div id="tab-8" class="tab-content content-8">
<div class="img-container">
<div class="img-cell img-cell-nav active" data-tab="tab-3"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/topleft.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-4"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/top.png"></div>
<div class="img-cell img-cell-nav"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/topright.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-7"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/left.png"></div>
<!-- should change with the page # -->
<div class="img-cell img-cell-image active"></div>
<div class="img-cell img-cell-nav" data-tab="tab-2"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/right.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-11"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/botleft.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-12"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/bot.png"></div>
<div class="img-cell img-cell-nav"></div>
</div>
</div>
<div id="tab-9" class="tab-content content-9">
<div class="img-container">
<div class="img-cell img-cell-nav"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-5"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/top.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-6"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/topright.png"></div>
<div class="img-cell img-cell-nav"></div>
<!-- should change with the page # -->
<div class="img-cell img-cell-image active"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-10"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/right.png"></div>
<div class="img-cell img-cell-nav"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-13"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/bot.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-14"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/botright.png"></div>
</div>
</div>
<div id="tab-10" class="tab-content content-10">
<div class="img-container">
<div class="img-cell img-cell-nav active" data-tab="tab-5"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/topleft.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-6"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/top.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-7"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/topright.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-9"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/left.png"></div>
<!-- should change with the page # -->
<div class="img-cell img-cell-image active"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-11"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/right.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-13"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/botleft.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-14"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/bot.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-15"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/botright.png"></div>
</div>
</div>
<div id="tab-11" class="tab-content content-11">
<div class="img-container">
<div class="img-cell img-cell-nav active" data-tab="tab-6"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/topleft.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-7"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/top.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-8"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/topright.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-10"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/left.png"></div>
<!-- should change with the page # -->
<div class="img-cell img-cell-image active"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-12"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/right.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-14"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/botleft.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-15"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/bot.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-16"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/botright.png"></div>
</div>
</div>
<div id="tab-12" class="tab-content content-12">
<div class="img-container">
<div class="img-cell img-cell-nav active" data-tab="tab-7"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/topleft.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-8"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/top.png"></div>
<div class="img-cell img-cell-nav"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-2"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/left.png"></div>
<!-- should change with the page # -->
<div class="img-cell img-cell-image active"></div>
<div class="img-cell img-cell-nav"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-15"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/botleft.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-16"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/bot.png"></div>
<div class="img-cell img-cell-nav"></div>
</div>
</div>
<div id="tab-13" class="tab-content content-13">
<div class="img-container">
<div class="img-cell img-cell-nav"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-9"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/top.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-10"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/topright.png"></div>
<div class="img-cell img-cell-nav"></div>
<!-- should change with the page # -->
<div class="img-cell img-cell-image"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-2"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/right.png"></div>
<div class="img-cell img-cell-nav"></div>
<div class="img-cell img-cell-nav"></div>
<div class="img-cell img-cell-nav"></div>
</div>
</div>
<div id="tab-14" class="tab-content content-14">
<div class="img-container">
<div class="img-cell img-cell-nav active" data-tab="tab-9"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/topleft.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-10"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/top.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-11"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/topright.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-13"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/left.png"></div>
<!-- should change with the page # -->
<div class="img-cell img-cell-image"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-15"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/right.png"></div>
<div class="img-cell img-cell-nav"></div>
<div class="img-cell img-cell-nav"></div>
<div class="img-cell img-cell-nav"></div>
</div>
</div>
<div id="tab-15" class="tab-content content-15">
<div class="img-container">
<div class="img-cell img-cell-nav active" data-tab="tab-10"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/topleft.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-11"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/top.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-12"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/topright.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-14"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/left.png"></div>
<!-- should change with the page # -->
<div class="img-cell img-cell-image active"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-16"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/right.png"></div>
<div class="img-cell img-cell-nav"></div>
<div class="img-cell img-cell-nav"></div>
<div class="img-cell img-cell-nav"></div>
</div>
</div>
<div id="tab-16" class="tab-content content-16">
<div class="img-container">
<div class="img-cell img-cell-nav active" data-tab="tab-11"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/topleft.png"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-12"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/top.png"></div>
<div class="img-cell img-cell-nav"></div>
<div class="img-cell img-cell-nav active" data-tab="tab-15"><img src="https://raw.githubusercontent.com/calvinmorett/b16/main/left.png"></div>
<!-- should change with the page # -->
<div class="img-cell img-cell-image"></div>
<div class="img-cell img-cell-nav"></div>
<div class="img-cell img-cell-nav"></div>
<div class="img-cell img-cell-nav"></div>
<div class="img-cell img-cell-nav"></div>
</div>
</div>
<!--
<div class="sidebar-mid">
work left side images right side filter by //
<BR>
footer that follows the page
</div>
<div class="sidebar-bot">
---right sidebar start----
<BR>
navigation menu <BR>
branding logo only //
<BR>---right sidebar end----<BR>
</div>-->
</div>
</body>
</html>
<link href="https://fonts.googleapis.com/css?family=PT+Sans:700|Work+Sans:100,200,300" rel="stylesheet">
Raw
script.js
$(document).ready(function(){
$('.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
// $('.tabs li').attr('data-tab');
$('.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
})
$('.active').click(function(){
var active_id = $(this).attr('data-tab');
console.log(active_id);
$('.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+active_id).addClass('current');
$('.grid-row li[data-tab="'+active_id+'"]').addClass('current');
// $('#nav-menu .tabs li').each(function(){
// $("#"+active_id).addClass('current');
// console.log($(this).attr('datatype'));
})
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
Raw
style.scss
html,
body {
height: 100%;
overflow-x: hidden;
padding: 0;
margin: 0;
background: #51585c;
}
body {
margin: 0;
padding: 0;
color: #333;
font-size: 100%;
background: #000;
font-weight: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: "Work Sans", Helvetica, Arial, Sans-Serif, sans-serif;
}
#container {
height: auto;
width: calc(100vw - 12.5%);
margin: 0;
padding: 0;
font-size: 4vw;
}
html,
body,
.container {
height: 100vh;
}
#container p {
max-width: 90%;
}
#nav-menu li,
#nav-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#nav-menu {
z-index: 2;
font-family: "PT Sans", sans-serif;
width: 200px;
margin: 0;
top: 0;
right: 0;
position: fixed;
overflow: hidden;
// float: right;
height: 100%;
background: #111;
// min-width: 16%;
}
// #nav-menu a:link,
// #nav-menu a:visited {
// font-weight: bold;
// // vertical-align: middle;
// // min-height: 20px;
// // padding: 2em;
// // margin: 0 auto;
// display: inline-block;
// transition: color 0.25s ease;
// letter-spacing: 0.123rem;
// text-align: center;
// text-decoration: none;
// background: #000;
// color: #fff;
// text-transform: uppercase;
// font-size: 0.8em;
// // width: 25vw;
// text-align: left;
// // float: left;
// }
// #nav-menu a:hover,
// #nav-menu a:active {
// color: #000;
// background: #fff;
// }
.tab-content {
display: none;
padding: .25em 2em;
opacity: 0;
}
.tab-content.current {
display: inherit;
opacity: 1;
transition: opacity 0.5s ease;
}
.content-0,
.content-1,
.content-2,
.content-3,
.content-4,
.content-5,
.content-6,
.content-7,
.content-8,
.content-9,
.content-10,
.content-11,
.content-12,
.content-13,
.content-14,
.content-15,
.content-16 {
min-height: 100vh;
top: 0;
position: relative;
margin: 0;
margin-right: 0;
font-weight: 200;
background: #000;
color: #fff;
}
.content-0{padding:2em;}
span{ font-weight: 400;}
.grid-row {
display: grid;
grid-column-gap: 0;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr;
}
.grid-row li,
.grid-row li a {
list-style: none;
width: 50px;
height: 50px;
margin: 0;
padding: 0;
display: inline-block;
line-height: 50px;
text-align: center;
color: #fff;
opacity: 0.5;
color: transparent;
filter: grayscale(1);
}
.grid-row li.current,
.grid-row li.current a {
filter: grayscale(0);
position: relative;
box-shadow: inset 0 0 0 3px red;
opacity: 1;
color: transparent;
}
.grid-row li.current:before a {
filter: grayscale(1);
content: "";
opacity: 1;
box-shadow: inset 0 0 0 4px red;
position: absolute;
width: 50px;
top: 0;
left: 0;
height: 50px;
z-index: 1;
}
.content-1 .img-cell-image,
.grid-row:nth-of-type(1) li:nth-of-type(1) {
background: #000
url("https://raw.githubusercontent.com/calvinmorett/b16/main/first_grid/Untitled-3_01.gif")
no-repeat;
background-size: cover;
}
.content-2 .img-cell-image,
.grid-row:nth-of-type(1) li:nth-of-type(2) {
background: #000
url("https://raw.githubusercontent.com/calvinmorett/b16/main/first_grid/Untitled-3_02.gif")
no-repeat;
background-size: cover;
}
.content-3 .img-cell-image,
.grid-row:nth-of-type(1) li:nth-of-type(3) {
background: #000
url("https://raw.githubusercontent.com/calvinmorett/b16/main/first_grid/Untitled-3_03.gif")
no-repeat;
background-size: cover;
}
.content-4 .img-cell-image,
.grid-row:nth-of-type(1) li:nth-of-type(4) {
background: #000
url("https://raw.githubusercontent.com/calvinmorett/b16/main/first_grid/Untitled-3_04.gif")
no-repeat;
background-size: cover;
}
.content-5 .img-cell-image,
.grid-row:nth-of-type(2) li:nth-of-type(1) {
background: #000
url("https://raw.githubusercontent.com/calvinmorett/b16/main/first_grid/Untitled-3_05.gif")
no-repeat;
background-size: cover;
}
.content-6 .img-cell-image,
.grid-row:nth-of-type(2) li:nth-of-type(2) {
background: #000
url("https://raw.githubusercontent.com/calvinmorett/b16/main/first_grid/Untitled-3_06.gif")
no-repeat;
background-size: cover;
}
.content-7 .img-cell-image,
.grid-row:nth-of-type(2) li:nth-of-type(3) {
background: #000
url("https://raw.githubusercontent.com/calvinmorett/b16/main/first_grid/Untitled-3_07.gif")
no-repeat;
background-size: cover;
}
.content-8 .img-cell-image,
.grid-row:nth-of-type(2) li:nth-of-type(4) {
background: #000
url("https://raw.githubusercontent.com/calvinmorett/b16/main/first_grid/Untitled-3_08.gif")
no-repeat;
background-size: cover;
}
.content-9 .img-cell-image,
.grid-row:nth-of-type(3) li:nth-of-type(1) {
background: #000
url("https://raw.githubusercontent.com/calvinmorett/b16/main/first_grid/Untitled-3_09.gif")
no-repeat;
background-size: cover;
}
.content-10 .img-cell-image,
.grid-row:nth-of-type(3) li:nth-of-type(2) {
background: #000
url("https://raw.githubusercontent.com/calvinmorett/b16/main/first_grid/Untitled-3_10.gif")
no-repeat;
background-size: cover;
}
.content-11 .img-cell-image,
.grid-row:nth-of-type(3) li:nth-of-type(3) {
background: #000
url("https://raw.githubusercontent.com/calvinmorett/b16/main/first_grid/Untitled-3_11.gif")
no-repeat;
background-size: cover;
}
.content-12 .img-cell-image,
.grid-row:nth-of-type(3) li:nth-of-type(4) {
background: #000
url("https://raw.githubusercontent.com/calvinmorett/b16/main/first_grid/Untitled-3_12.gif")
no-repeat;
background-size: cover;
}
.content-13 .img-cell-image,
.grid-row:nth-of-type(4) li:nth-of-type(1) {
background: #000
url("https://raw.githubusercontent.com/calvinmorett/b16/main/first_grid/Untitled-3_13.gif")
no-repeat;
background-size: cover;
}
.content-14 .img-cell-image,
.grid-row:nth-of-type(4) li:nth-of-type(2) {
background: #000
url("https://raw.githubusercontent.com/calvinmorett/b16/main/first_grid/Untitled-3_14.gif")
no-repeat;
background-size: cover;
}
.content-15 .img-cell-image,
.grid-row:nth-of-type(4) li:nth-of-type(3) {
background: #000
url("https://raw.githubusercontent.com/calvinmorett/b16/main/first_grid/Untitled-3_15.gif")
no-repeat;
background-size: cover;
}
.content-16 .img-cell-image,
.grid-row:nth-of-type(4) li:nth-of-type(4) {
background: #000
url("https://raw.githubusercontent.com/calvinmorett/b16/main/first_grid/Untitled-3_16.gif")
no-repeat;
background-size: cover;
}
.helpsection{
text-align:center;
padding:10px;
font-size:16px;
}
.display{
min-height:calc(80vh);
background:#222;
color:#fff;
padding:.5em;
}
.img-container {
/* display: grid;
width: 50vw;
min-height: 50vh;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr); */
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 0.4fr 2.2fr 0.4fr;
grid-template-rows: 0.4fr 2.2fr 0.4fr;
gap: 0px 0px;
grid-template-areas:
". . ."
". . ."
". . .";
}
.img-cell {
box-sizing: border-box;
text-align:center;
}
.img-cell-image{
width: calc(70vh);
height: calc(70vh);
box-sizing: border-box;
margin: 0 auto;
}
.img-cell-nav{ opacity:0; filter:invert(1); z-index:-1000;}
.active,.img-cell-image{ opacity:1; z-index:1;}
.img-cell-nav{
position: relative;
top: 50%;
height: 100px;
margin-top: -50px;
cursor:pointer;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/grd/1.4.0/grd.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment