misc
This commit is contained in:
parent
d63f1f83d1
commit
3228c5e9c2
3
icon-leaf.svg
Normal file
3
icon-leaf.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 371 B |
92
index.html
92
index.html
@ -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();
|
||||
|
||||
91
pad.html
91
pad.html
@ -1,31 +1,72 @@
|
||||
<style>
|
||||
.pad
|
||||
{
|
||||
.window
|
||||
{
|
||||
position:relative;
|
||||
margin:50px;
|
||||
border-top:5px solid blue;
|
||||
}
|
||||
.pad::before, .pad::after
|
||||
{
|
||||
content: " ";
|
||||
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;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
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;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.pad::before
|
||||
{
|
||||
left: -18px;
|
||||
}
|
||||
.pad::after
|
||||
{
|
||||
right:-18px;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<div class="pad"></div>
|
||||
</div>
|
||||
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>
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user