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

correct title animations

Browse Source
This commit is contained in:
TreetopFlyer 2021-08-10 10:38:48 -04:00
parent 5e8aae48fa
commit a1011b18f9
1 changed files with 47 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
index.html
View File

@ -29,42 +29,55 @@ section
padding:50px;
}
h2
{
display:flex;
align-items: center;
box-sizing:border-box;
width:500px;
margin:0 auto;
padding:5px 15px 5px 15px;
padding:5px 20px 5px 20px;
text-align:center;
text-transform:uppercase;
font-size:36px;
}
h2::before, h2::after
h2 > span
{
position: relative;
flex:1;
}
h2 > span:first-child::before, h2 > span:last-child::before
{
display: inline-block;
content: "⬦";
font-size: 61px;
line-height: 8px;
width: 0px;
line-height: 7px;
font-size: 60px;
text-indent:-37px;
display: block;
position: absolute;
top: -2px;
width: 0%;
height: 5px;
background: #000;
text-align: left;
text-indent: -37px;
vertical-align: middle;
margin-top: -10px;
transition: width 0.4s;
}
h2::before
h2 > span:first-child::before
{
transform: translateX(-10px)
text-align:left;
direction:ltr;
right: 0;
}
h2::after
h2 > span:last-child::before
{
transform: translateX(10px) rotate(180deg);
text-align:right;
direction:rtl;
left: 0;
}
h2[data-spy='true']::before, h2[data-spy='true']::after
h2[data-spy='true'] > span:first-child::before, h2[data-spy='true'] > span:last-child::before
{
width:100px;
width: 100%;
}
.CTA
{
position:relative;
@ -267,30 +280,12 @@ h2[data-spy='true']::before, h2[data-spy='true']::after
</head>
<body>
<style>
.Filler
{
display: flex;
width:50%;
}
.Filler::before, .Filler::after
{
content:" ";
display:block;
height:1em;
flex:1;
background:red;
}
</style>
<div class="Filler">
Random Content
</div>
<style>
nav
{
position: fixed;
display: flex;
flex-direction: column;
top:50px;
right: 0px;
width: 200px;
@ -300,32 +295,25 @@ nav
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
border-left:10px solid black;
}
nav ul
nav > *
{
flex: 1;
}
nav > ul
{
flex:0;
margin:0;
padding:0;
text-align:right;
}
nav::before, nav::after
nav > span
{
content:" ";
display:block;
width:50px;
height:50px;
background:black;
position:absolute;
left:0;
}
nav::before
{
top:-25px;
}
nav::after
{
bottom:-25px;
margin:20px;
background:red;
}
</style>
<nav>
<span></span>
<ul>
<li><a href="#top" >Top</a></li>
<li><a href="#order">Order</a></li>
@ -334,7 +322,9 @@ nav::after
<li><a href="#specs">Specs</a></li>
<li><a href="#email">Sign-up</a></li>
</ul>
<span></span>
</nav>
<main>
<section id="order">
<style>
@ -397,7 +387,7 @@ nav::after
</div>
<h2 data-spy="0.2|0.8">Order</h2>
<h2 data-spy="0.2|0.8"><span></span><span>Order</span><span></span></h2>
<h3>Truth For Life</h3>
<h4>365 Daily Devotionals</h4>
<h5>by Alistair Begg</h5>
@ -411,11 +401,11 @@ nav::after
<span>$10.00 (free shipping)</span>
</section>
<section id="video">
<h2 data-spy="0.2|0.8">Videos</h2>
<h2 data-spy="0.2|0.8"><span></span><span>Videos</span><span></span></h2>
</section>
<section id="about">
<h2 data-spy="0.2|0.8">About</h2>
<h2 data-spy="0.2|0.8"><span></span><span>About</span><span></span></h2>
<p>
Duis augue neque, dignissim at diam ac, mattis cursus justo. Morbi blandit in ligula eu scelerisque.
Maecenas hendrerit eu nunc non molestie. Vivamus augue enim, egestas a magna vitae, consequat facilisis urna.
@ -441,6 +431,7 @@ nav::after
<section id="email">
<h2 data-spy="0.2|0.8">Sign Up</h2>
</section>
</main>
<script>
Spy.Init();
function JobDuration(inDuration, inHandler, inDone)