Delete 100_projects/93-stranger-things-cards directory
This commit is contained in:
Sam
GitHub
parent
e4eb4818d8
commit
d4dac0bcb4
Binary file not shown.
|
Before Width: | Height: | Size: 189 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 152 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 114 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 134 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 121 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.7 KiB |
@ -1,75 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>document</title>
|
||||
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css'>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="options">
|
||||
<div class="option active" style="--optionBackground:url(images/bg-vecna.png);">
|
||||
<div class="shadow"></div>
|
||||
<div class="label">
|
||||
<div class="icon">
|
||||
<img src="images/vecna.png" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="main">Vecna</div>
|
||||
<div class="sub">It's time.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option" style="--optionBackground:url(images/bg-eleven.png);">
|
||||
<div class="shadow"></div>
|
||||
<div class="label">
|
||||
<div class="icon">
|
||||
<img src="images/eleven.png" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="main">Eleven</div>
|
||||
<div class="sub">My hero is my father.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option" style="--optionBackground:url(images/bg-hopper.png);">
|
||||
<div class="shadow"></div>
|
||||
<div class="label">
|
||||
<div class="icon">
|
||||
<img src="images/hopper.png" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="main">Hopper</div>
|
||||
<div class="sub">Mornings are for coffee and contemplation</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option" style="--optionBackground:url(images/bg-eddie.png);">
|
||||
<div class="shadow"></div>
|
||||
<div class="label">
|
||||
<div class="icon">
|
||||
<img src="images/eddie.png" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="main">Eddie</div>
|
||||
<div class="sub">Welcome to Hellfire.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option" style="--optionBackground:url(images/bg-dustin.png);">
|
||||
<div class="shadow"></div>
|
||||
<div class="label">
|
||||
<div class="icon">
|
||||
<img src="images/dustin.png" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="main">Dustin</div>
|
||||
<div class="sub">Sea Sea BOOM!</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,4 +0,0 @@
|
||||
$(".option").click(function () {
|
||||
$(".option").removeClass("active");
|
||||
$(this).addClass("active");
|
||||
});
|
||||
@ -1,186 +0,0 @@
|
||||
*{
|
||||
margin:0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
font-family: "Roboto", sans-serif;
|
||||
transition: 0.25s;
|
||||
background: #212123;
|
||||
color: white;
|
||||
}
|
||||
body .options {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
overflow: hidden;
|
||||
min-width: 600px;
|
||||
max-width: 900px;
|
||||
width: calc(100% - 100px);
|
||||
height: 400px;
|
||||
}
|
||||
/* @media screen and (max-width: 776px) {
|
||||
body .options {
|
||||
width: 50px;
|
||||
}
|
||||
body .options .option:nth-child(5) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 638px) {
|
||||
body .options {
|
||||
min-width: 440px;
|
||||
}
|
||||
body .options .option:nth-child(4) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 558px) {
|
||||
body .options {
|
||||
min-width: 360px;
|
||||
}
|
||||
body .options .option:nth-child(3) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 478px) {
|
||||
body .options {
|
||||
min-width: 280px;
|
||||
}
|
||||
body .options .option:nth-child(2) {
|
||||
display: none;
|
||||
}
|
||||
} */
|
||||
body .options .option {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-width: 60px;
|
||||
margin: 10px;
|
||||
background: var(--optionBackground, var(--defaultBackground, #e6e9ed));
|
||||
background-size: auto 120%;
|
||||
background-position: center;
|
||||
cursor: pointer;
|
||||
transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
|
||||
}
|
||||
body .options .option:nth-child(1) {
|
||||
--defaultBackground: #ed5565;
|
||||
}
|
||||
body .options .option:nth-child(2) {
|
||||
--defaultBackground: #fc6e51;
|
||||
}
|
||||
body .options .option:nth-child(3) {
|
||||
--defaultBackground: #ffce54;
|
||||
}
|
||||
body .options .option:nth-child(4) {
|
||||
--defaultBackground: #2ecc71;
|
||||
}
|
||||
body .options .option:nth-child(5) {
|
||||
--defaultBackground: #5d9cec;
|
||||
}
|
||||
body .options .option:nth-child(6) {
|
||||
--defaultBackground: #ac92ec;
|
||||
}
|
||||
body .options .option.active {
|
||||
flex-grow: 10000;
|
||||
transform: scale(1);
|
||||
max-width: 600px;
|
||||
margin: 0px;
|
||||
border-radius: 40px;
|
||||
background-size: auto 100%;
|
||||
}
|
||||
body .options .option.active .shadow {
|
||||
box-shadow: inset 0 -120px 120px -120px black,
|
||||
inset 0 -120px 120px -100px black;
|
||||
}
|
||||
body .options .option.active .label {
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
body .options .option.active .label .info > div {
|
||||
left: 0px;
|
||||
opacity: 1;
|
||||
}
|
||||
body .options .option:not(.active) {
|
||||
flex-grow: 1;
|
||||
border-radius: 30px;
|
||||
}
|
||||
body .options .option:not(.active) .shadow {
|
||||
bottom: -40px;
|
||||
box-shadow: inset 0 -120px 0px -120px black, inset 0 -120px 0px -100px black;
|
||||
}
|
||||
body .options .option:not(.active) .label {
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
body .options .option:not(.active) .label .info > div {
|
||||
left: 20px;
|
||||
opacity: 0;
|
||||
}
|
||||
body .options .option .shadow {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
height: 120px;
|
||||
transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
|
||||
}
|
||||
body .options .option .label {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
height: 40px;
|
||||
transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
|
||||
}
|
||||
body .options .option .label .icon {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-width: 40px;
|
||||
max-width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 100%;
|
||||
background-color: white;
|
||||
color: var(--defaultBackground);
|
||||
}
|
||||
body .options .option .label .icon img {
|
||||
min-width: 20px;
|
||||
max-width: 20px;
|
||||
}
|
||||
body .options .option .label .icon {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-width: 40px;
|
||||
max-width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 100%;
|
||||
background-color: #212123;
|
||||
color: var(--defaultBackground);
|
||||
}
|
||||
body .options .option .label .info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-left: 10px;
|
||||
color: white;
|
||||
white-space: pre;
|
||||
}
|
||||
body .options .option .label .info > div {
|
||||
position: relative;
|
||||
transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95), opacity 0.5s ease-out;
|
||||
}
|
||||
body .options .option .label .info .main {
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
body .options .option .label .info .sub {
|
||||
transition-delay: 0.1s;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user