Compare commits
No commits in common. "updates" and "master" have entirely different histories.
@ -1,3 +0,0 @@
|
|||||||
<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>
|
|
||||||
|
Before Width: | Height: | Size: 371 B |
996
index.html
996
index.html
File diff suppressed because one or more lines are too long
202
pad.html
202
pad.html
@ -1,202 +0,0 @@
|
|||||||
<style>
|
|
||||||
|
|
||||||
.frame
|
|
||||||
{
|
|
||||||
position:relative;
|
|
||||||
width:500px;
|
|
||||||
padding:20px;
|
|
||||||
border-bottom: none;
|
|
||||||
box-sizing:border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.frame__image
|
|
||||||
{
|
|
||||||
position:relative;
|
|
||||||
z-index:20;
|
|
||||||
margin-bottom:19px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.frame__bar
|
|
||||||
{
|
|
||||||
position:relative;
|
|
||||||
bottom:0;
|
|
||||||
left:0;
|
|
||||||
width:100%;
|
|
||||||
height:44px;
|
|
||||||
overflow:hidden;
|
|
||||||
transform-origin: center 22.5px;
|
|
||||||
}
|
|
||||||
.frame__bar span
|
|
||||||
{
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
top: -10.5px;
|
|
||||||
left: 50%;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
border: 5px solid #000;
|
|
||||||
border-right-color: transparent;
|
|
||||||
border-bottom-color: transparent;
|
|
||||||
transform: translate(-50%, 20px) rotate(45deg);
|
|
||||||
transition: left 0.4s;
|
|
||||||
}
|
|
||||||
.frame__bar span::before, .frame__bar span::after
|
|
||||||
{
|
|
||||||
content: " ";
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
width: 1000px;
|
|
||||||
height:0px;
|
|
||||||
border-top: 5px solid black;
|
|
||||||
transform:rotate(-45deg);
|
|
||||||
}
|
|
||||||
.frame__bar span::before
|
|
||||||
{
|
|
||||||
bottom: -0.5px;
|
|
||||||
right: 20px;
|
|
||||||
transform-origin: right bottom;
|
|
||||||
}
|
|
||||||
.frame__bar span::after
|
|
||||||
{
|
|
||||||
top: -4px;
|
|
||||||
left: 17px;
|
|
||||||
transform-origin: left top;
|
|
||||||
}
|
|
||||||
.frame__bar--down
|
|
||||||
{
|
|
||||||
transform: scaleY(-1);
|
|
||||||
}
|
|
||||||
.frame__bar--up
|
|
||||||
{
|
|
||||||
transform: scaleY(1);
|
|
||||||
}
|
|
||||||
.frame__bar--1-3 span
|
|
||||||
{
|
|
||||||
left:16.6%;
|
|
||||||
}
|
|
||||||
.frame__bar--2-3 span
|
|
||||||
{
|
|
||||||
left:50%;
|
|
||||||
}
|
|
||||||
.frame__bar--3-3 span
|
|
||||||
{
|
|
||||||
left:83%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.frame__bracket
|
|
||||||
{
|
|
||||||
position:relative;
|
|
||||||
display:block;
|
|
||||||
width:100%;
|
|
||||||
height:0px;
|
|
||||||
top:-200px;
|
|
||||||
z-index:10;
|
|
||||||
border-top:5px solid black;
|
|
||||||
}
|
|
||||||
.frame__bracket::before, .frame__bracket::after
|
|
||||||
{
|
|
||||||
content:" ";
|
|
||||||
display:block;
|
|
||||||
width:20px;
|
|
||||||
height:171px;
|
|
||||||
position:absolute;
|
|
||||||
top:-5px;
|
|
||||||
border:5px solid black;
|
|
||||||
}
|
|
||||||
.frame__bracket::before
|
|
||||||
{
|
|
||||||
border-right-width: 0px;
|
|
||||||
left:-20px;
|
|
||||||
}
|
|
||||||
.frame__bracket::after
|
|
||||||
{
|
|
||||||
border-left-width: 0px;
|
|
||||||
right:-20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.frame__button
|
|
||||||
{
|
|
||||||
position:relative;
|
|
||||||
display:block;
|
|
||||||
float:left;
|
|
||||||
padding:5px 0px 5px 0px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
width:33.3%;
|
|
||||||
text-align:center;
|
|
||||||
cursor:pointer;
|
|
||||||
}
|
|
||||||
.frame__button:hover::before
|
|
||||||
{
|
|
||||||
content: " ";
|
|
||||||
display: block;
|
|
||||||
width: 7px;
|
|
||||||
height: 7px;
|
|
||||||
background: black;
|
|
||||||
position: absolute;
|
|
||||||
top: -12px;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-5px) rotate(45deg);
|
|
||||||
transition: top 0.4s, bottom 0.4s;
|
|
||||||
}
|
|
||||||
.frame__button--upper:hover::before
|
|
||||||
{
|
|
||||||
top:auto;
|
|
||||||
bottom:-9px;
|
|
||||||
}
|
|
||||||
.frame__button[data-frame-active='true']:hover::before
|
|
||||||
{
|
|
||||||
bottom:auto;
|
|
||||||
top: -30px;
|
|
||||||
}
|
|
||||||
.frame__button--upper[data-frame-active='true']:hover::before
|
|
||||||
{
|
|
||||||
bottom: -26px;
|
|
||||||
top:auto;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<div class="frame">
|
|
||||||
<div class="frame__image">
|
|
||||||
<img style="display:block; width:100%; height:auto;" src="https://via.placeholder.com/1024x512.png"/>
|
|
||||||
</div>
|
|
||||||
<div class="frame__button frame__button--upper">Cover</div><div class="frame__button frame__button--upper">Back </div><div class="frame__button frame__button--upper">Spine</div>
|
|
||||||
|
|
||||||
<div class="frame__bar"><span></span></div>
|
|
||||||
<div class="frame__bracket"></div>
|
|
||||||
|
|
||||||
<div class="frame__button">Intro</div><div class="frame__button">1 & 2</div><div class="frame__button">3 & 4</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
function frame__setup(inFrame)
|
|
||||||
{
|
|
||||||
var buttons = inFrame.querySelectorAll(".frame__button");
|
|
||||||
var bar = inFrame.querySelector(".frame__bar");
|
|
||||||
var active = false;
|
|
||||||
|
|
||||||
function activate(inButton)
|
|
||||||
{
|
|
||||||
var index = parseInt(inButton.getAttribute("data-frame-index"));
|
|
||||||
var classX = "frame__bar--" + ((index % 3)+1) + "-3";
|
|
||||||
var classY = index > 2 ? "frame__bar--down" : "frame__bar--up";
|
|
||||||
|
|
||||||
bar.setAttribute("class", "frame__bar " + classX + " " + classY);
|
|
||||||
|
|
||||||
if(active)
|
|
||||||
{
|
|
||||||
active.setAttribute("data-frame-active", "false");
|
|
||||||
}
|
|
||||||
active = inButton;
|
|
||||||
inButton.setAttribute("data-frame-active", "true");
|
|
||||||
}
|
|
||||||
for(var i=0; i<buttons.length; i++)
|
|
||||||
{
|
|
||||||
buttons[i].setAttribute("data-frame-index", i);
|
|
||||||
buttons[i].setAttribute("data-frame-active", "false");
|
|
||||||
buttons[i].addEventListener("click", function(){ activate(this); });
|
|
||||||
}
|
|
||||||
|
|
||||||
activate( buttons[0] );
|
|
||||||
}
|
|
||||||
|
|
||||||
frame__setup(document.querySelector(".frame"));
|
|
||||||
</script>
|
|
||||||
12
svg.html
12
svg.html
@ -1,12 +0,0 @@
|
|||||||
<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 100 100" style="width:100px; height:100%; background:yellow;">
|
|
||||||
<defs>
|
|
||||||
<symbol id="diamond">
|
|
||||||
<g transform="rotate(45 10 10)">
|
|
||||||
<rect width="20" height="20"></rect>
|
|
||||||
</g>
|
|
||||||
</symbol>
|
|
||||||
</defs>
|
|
||||||
<use href="#diamond" x="0" y="0" />
|
|
||||||
<use href="#diamond" x="0" y="100%" />
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
|
Before Width: | Height: | Size: 397 B |
Loading…
Reference in New Issue
Block a user