SethTrowbridge/devo-book
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

misc

Browse Source
This commit is contained in:
TreetopFlyer 2021-09-01 11:59:49 -04:00
parent d63f1f83d1
commit 3228c5e9c2
3 changed files with 149 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
icon-leaf.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M41.0717 8.95871L41.0717 22.6941L27.3363 22.6941L27.3363 8.95871L41.0717 8.95871ZM41.0717 8.95871L8.95871 41.0717M41.1181 22.8297L28.3357 35.6121L14.4183 35.6121V21.6947L27.2007 8.91228M20.907 15.206V29.1234L34.8244 29.1234" stroke="black" stroke-width="3"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 371 B

92
index.html
View File

@ -140,7 +140,7 @@ h2[data-spy='true'] > span:first-child::before, h2[data-spy='true'] > span:last-
display: block;
bottom: 0;
right: 0px;
width: 200px;
width: 100%;
z-index: 200;
height: 66px;
overflow: hidden;
@ -206,13 +206,15 @@ h2[data-spy='true'] > span:first-child::before, h2[data-spy='true'] > span:last-
{
position: absolute;
bottom: 0;
left:0%;
right:0%;
display: block;
width: 100%;
width: 50%;
max-width:200px;
height: 66px;
transition: left 0.4s 0.4s;
cursor:pointer;
}
nav .button::before, nav .button::after
nav .button.menu::before, nav .button.menu::after
{
display:block;
position:absolute;
@ -224,25 +226,49 @@ h2[data-spy='true'] > span:first-child::before, h2[data-spy='true'] > span:last-
text-align: right;
text-transform:uppercase;
font-weight:900;
transition:left 0.4s, top 0.4s;
transition:left 0.4s, top 0.4s, padding 0.4s;
}
nav .button::before
nav .button.menu::before
{
content:"Menu";
}
nav .button::after
nav .button.menu::after
{
content:"Close";
top:180%;
}
[nav-open] nav .button::before
nav .button.menu:hover::before, nav .button.menu:hover::after
{
padding-right:60px;
}
[nav-open] nav .button.menu::before
{
left:180%;
}
[nav-open] nav .button::after
[nav-open] nav .button.menu::after
{
top:28px;
}
nav .button.book
{
padding-left: 50px;
left: 0;
padding-top: 20px;
text-transform: uppercase;
font-weight: 900;
box-sizing: border-box;
}
nav .button.book svg
{
display:block;
width:50px;
height:100%;
position:absolute;
top:0;
left:0;
}
nav > ul
{
position: absolute;
@ -271,7 +297,6 @@ h2[data-spy='true'] > span:first-child::before, h2[data-spy='true'] > span:last-
.Dim
{
box-shadow: 0px 0px 10px rgb(0 0 0 / 20%);
z-index: 100;
position: fixed;
right: 0;
bottom: 0%;
@ -318,6 +343,7 @@ h2[data-spy='true'] > span:first-child::before, h2[data-spy='true'] > span:last-
justify-content:space-between;
margin:0 auto;
position:absolute;
transform-style: preserve-3d;
top:0;
left:0;
width:100%;
@ -676,6 +702,7 @@ Video.Init = function()
</head>
<body>
<nav>
<div class="Dim"></div>
<span class="detail edge"></span>
<span class="detail cap cap--top"></span>
<span class="detail cap cap--bottom"></span>
@ -687,10 +714,19 @@ Video.Init = function()
<li><a href="#specs">Specs</a></li>
<li><a href="#email">Sign-up</a></li>
</ul>
<span class="button"></span>
<span class="button menu"></span>
<span class="button book">
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M41.0717 8.95871L41.0717 22.6941L27.3363 22.6941L27.3363 8.95871L41.0717 8.95871ZM41.0717 8.95871L8.95871 41.0717M41.1181 22.8297L28.3357 35.6121L14.4183 35.6121V21.6947L27.2007 8.91228M20.907 15.206V29.1234L34.8244 29.1234" stroke="black" stroke-width="3"/>
</svg>
Buy Now
</span>
</nav>
<div class="Dim"></div>
<main>
<section id="intro">
<img src="https://via.placeholder.com/1024x512.png"/>
</section>
<section id="order">
<h2 data-spy="0.2|0.8"><span></span><span>Order</span><span></span></h2>
@ -767,6 +803,26 @@ Video.Init = function()
</section>
<section id="specs">
<h2 data-spy="0.2|0.8">Specs</h2>
<p>
Start with the gospel each and every day with this one-year devotional by renowned Bible teacher Alistair Begg.
</p>
<p>
Each daily devotion includes:
</p>
<ul>
<li>
<p>Reflections from renowned Bible teacher Alistair Begg</p>
</li>
<li>
<p>Prompts for real life application</p>
</li>
<li>
<p>Relevant Scripture passages</p>
</li>
<li>
<p>A yearly Bible reading plan</p>
</li>
</ul>
</section>
<section id="email">
<h2 data-spy="0.2|0.8">Sign Up</h2>
@ -786,7 +842,7 @@ $("nav .button")[0].addEventListener("click", function()
{
document.body.setAttribute("nav-open", true);
}
})
});
Spy.Init();
@ -827,17 +883,17 @@ document.querySelector("nav").addEventListener("click", function(inEvent)
let pages = $("[swing]");
let table = $(".Shot")[0];
let bookOpen = index =>
var pages = $("[swing]");
var table = $(".Shot")[0];
function bookOpen(index)
{
pages.forEach((p, i)=> p.setAttribute("swing", i>index ? "right" : "left") );
};
let bookClose = () =>
function bookClose()
{
pages.forEach(p=>p.setAttribute("swing", "closed"));
};
let bookPose = inPanel =>
function bookPose(inPanel)
{
table.setAttribute("show", inPanel);
bookClose();

101
pad.html
View File

@ -1,31 +1,72 @@
<style>
.pad
{
position:relative;
margin:50px;
border-top:5px solid blue;
}
.pad::before, .pad::after
{
content: " ";
display: block;
width: 20px;
height: 20px;
position: absolute;
top: -12px;
border: 5px solid #000;
box-sizing: border-box;
transform: rotate(45deg);
}
.pad::before
{
left: -18px;
}
.pad::after
{
right:-18px;
}
</style>
<div>
<div class="pad"></div>
</div>
.window
{
position:relative;
width:500px;
border:5px solid black;
padding:20px;
border-bottom: none;
box-sizing:border-box;
}
.bar
{
position:relative;
bottom:0;
left:0;
width:100%;
height:21px;
overflow:hidden;
}
.bar.inverted
{
transform: translateY(16px) scaleY(-1);
}
.bar span
{
display: block;
position: absolute;
bottom: 0;
left: 50%;
width: 20px;
height: 21px;
border: 5px solid #000;
transform: translate(-50%, 20px) rotate(45deg);
}
.bar::before, .bar::after
{
content:" ";
display: block;
position:absolute;
bottom:0;
width:100%;
border-top:5px solid black;
}
.bar::before
{
margin-left:11px;
left:50%;
}
.bar::after
{
margin-right:11px;
right:50%;
}
button
{
display:inline-block;
padding:20px 0px 20px 0px;
box-sizing: border-box;
width:33%;
}
</style>
<div class="window">
<div class="bar"><span></span></div>
<div class="bar inverted"><span></span></div>
<img style="display:block; width:100%; height:auto;" src="https://via.placeholder.com/1024x512.png"/>
<button>Front</button><button>Spine</button><button>Back</button>
<button>Intro</button><button>1 & 2</button><button>3 & 4</button>
<div class="bar"><span></span></div>
</div>