first
This commit is contained in:
커밋
f7a22abf66
|
|
@ -0,0 +1,90 @@
|
|||
body {
|
||||
background: url('/assets/img/noisy_background.svg');
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/************/
|
||||
/* The Grid */
|
||||
/************/
|
||||
.episode-list {
|
||||
max-width: 1000px;
|
||||
min-height: 100vh;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 100px 1fr 100px;
|
||||
grid-template-areas:
|
||||
"header header header"
|
||||
"main main main"
|
||||
"footer_l footer_c footer_r";
|
||||
grid-row-gap: 1em;
|
||||
}
|
||||
|
||||
header {
|
||||
grid-area: header;
|
||||
}
|
||||
|
||||
main {
|
||||
grid-area: main;
|
||||
}
|
||||
|
||||
footer #left {
|
||||
grid-area: footer_l;
|
||||
}
|
||||
|
||||
footer #center {
|
||||
grid-area: footer_c;
|
||||
}
|
||||
|
||||
footer #right {
|
||||
grid-area: footer_r;
|
||||
}
|
||||
|
||||
/**********/
|
||||
/* Header */
|
||||
/**********/
|
||||
header {
|
||||
background-color: white;
|
||||
|
||||
}
|
||||
|
||||
header h1 {
|
||||
color: red;
|
||||
}
|
||||
|
||||
header h2 {
|
||||
color: green;
|
||||
}
|
||||
|
||||
/********/
|
||||
/* Main */
|
||||
/********/
|
||||
main {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
/***********/
|
||||
/* Preview */
|
||||
/***********/
|
||||
article.preview {
|
||||
margin: 1em 1em 1em 1em;
|
||||
border: 1px solid green;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
article.preview h1 {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
article.preview p {
|
||||
color: yellow;
|
||||
}
|
||||
|
||||
/**********/
|
||||
/* Footer */
|
||||
/**********/
|
||||
footer {
|
||||
background-color: white;
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<svg width="1920" height="50" xmlns="http://www.w3.org/2000/svg">\
|
||||
<style type="text/css">
|
||||
<!-- #a { animation: x .5s ease alternate 14; } -->
|
||||
#line_a { animation: marquee 30s linear infinite; animation-delay: -5s }
|
||||
#line_b { animation: marquee 36s linear infinite; animation-delay: -3s }
|
||||
#line_c { animation: marquee 60s linear infinite reverse; animation-delay: -7s }
|
||||
#line_d { animation: marquee 51s linear infinite; animation-delay: -2s }
|
||||
#line_e { animation: marquee 42s linear infinite; animation-delay: -6s }
|
||||
|
||||
@keyframes x {
|
||||
from { fill: #000; }
|
||||
to { fill: #fff; }
|
||||
}
|
||||
|
||||
@keyframes marquee {
|
||||
0% { transform: translateX(-50px); opacity: 0; }
|
||||
20% { opacity: 1; }
|
||||
80% { opacity: 1; }
|
||||
100% { transform: translateX(1000px); opacity: 0; }
|
||||
}
|
||||
|
||||
</style>
|
||||
<!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
|
||||
<g>
|
||||
<rect width="100%" height="100%" fill="#eeeeee"/>
|
||||
<text text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="27" id="line_a" y="15" x="115.5" fill="#dcdcdc">Laram apsam dalar sat amat, cansatatar sadapscang alatr, sad daam nanamy aarmad tampar anvadant at labara at dalara magna alaqayam arat, sad daam valaptaa. At vara aas at accasam at jasta daa dalaras at aa rabam. Stat clata kasd gabargran, na saa takamata sanctas ast Laram apsam dalar sat amat. Laram apsam dalar sat amat, cansatatar sadapscang alatr, sad daam nanamy aarmad tampar anvadant at labara at dalara magna alaqayam arat, sad daam valaptaa. At vara aas at accasam at jasta daa dalaras at aa rabam. Stat clata kasd gabargran, na saa takamata sanctas ast Laram apsam dalar sat amat. Laram apsam dalar sat amat, cansatatar sadapscang alatr, sad daam nanamy aarmad tampar anvadant at labara at dalara magna alaqayam arat, sad daam valaptaa. At vara aas at accasam at jasta daa dalaras at aa rabam. Stat clata kasd gabargran, na saa takamata sanctas ast Laram apsam dalar sat amat.</text>
|
||||
<text text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="24" id="line_b" y="27" x="131.5" fill="#dcdcde">Lerem epsem deler set emet, censeteter sedepsceng eletr, sed deem nenemy eermed temper envedent et lebere et delere megne eleqeyem eret, sed deem veleptee. Et vere ees et eccesem et jeste dee deleres et ee rebem. Stet clete kesd gebergren, ne see tekemete senctes est Lerem epsem deler set emet. Lerem epsem deler set emet, censeteter sedepsceng eletr, sed deem nenemy eermed temper envedent et lebere et delere megne eleqeyem eret, sed deem veleptee. Et vere ees et eccesem et jeste dee deleres et ee rebem. Stet clete kesd gebergren, ne see tekemete senctes est Lerem epsem deler set emet. Lerem epsem deler set emet, censeteter sedepsceng eletr, sed deem nenemy eermed temper envedent et lebere et delere megne eleqeyem eret, sed deem veleptee. Et vere ees et eccesem et jeste dee deleres et ee rebem. Stet clete kesd gebergren, ne see tekemete senctes est Lerem epsem deler set emet.</text>
|
||||
<text text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="30" id="line_c" y="37" x="115.5" fill="#dcdedc">Lirim ipsim dilir sit imit, cinsititir sidipscing ilitr, sid diim ninimy iirmid timpir invidint it libiri it diliri migni iliqiyim irit, sid diim viliptii. It viri iis it iccisim it jisti dii diliris it ii ribim. Stit cliti kisd gibirgrin, ni sii tikimiti sinctis ist Lirim ipsim dilir sit imit. Lirim ipsim dilir sit imit, cinsititir sidipscing ilitr, sid diim ninimy iirmid timpir invidint it libiri it diliri migni iliqiyim irit, sid diim viliptii. It viri iis it iccisim it jisti dii diliris it ii ribim. Stit cliti kisd gibirgrin, ni sii tikimiti sinctis ist Lirim ipsim dilir sit imit. Lirim ipsim dilir sit imit, cinsititir sidipscing ilitr, sid diim ninimy iirmid timpir invidint it libiri it diliri migni iliqiyim irit, sid diim viliptii. It viri iis it iccisim it jisti dii diliris it ii ribim. Stit cliti kisd gibirgrin, ni sii tikimiti sinctis ist Lirim ipsim dilir sit imit.</text>
|
||||
<text text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="19" id="line_d" y="45" x="115.5" fill="#dedcdc">Lorom opsom dolor sot omot, consototor sodopscong olotr, sod doom nonomy oormod tompor onvodont ot loboro ot doloro mogno oloqoyom orot, sod doom voloptoo. Ot voro oos ot occosom ot josto doo doloros ot oo robom. Stot cloto kosd goborgron, no soo tokomoto sonctos ost Lorom opsom dolor sot omot. Lorom opsom dolor sot omot, consototor sodopscong olotr, sod doom nonomy oormod tompor onvodont ot loboro ot doloro mogno oloqoyom orot, sod doom voloptoo. Ot voro oos ot occosom ot josto doo doloros ot oo robom. Stot cloto kosd goborgron, no soo tokomoto sonctos ost Lorom opsom dolor sot omot. Lorom opsom dolor sot omot, consototor sodopscong olotr, sod doom nonomy oormod tompor onvodont ot loboro ot doloro mogno oloqoyom orot, sod doom voloptoo. Ot voro oos ot occosom ot josto doo doloros ot oo robom. Stot cloto kosd goborgron, no soo tokomoto sonctos ost Lorom opsom dolor sot omot.</text>
|
||||
<text text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="25" id="line_e" y="54" x="115.5" fill="#dcdcde">Lurum upsum dulur sut umut, cunsututur sudupscung ulutr, sud duum nunumy uurmud tumpur unvudunt ut luburu ut duluru mugnu uluquyum urut, sud duum vuluptuu. Ut vuru uus ut uccusum ut justu duu dulurus ut uu rubum. Stut clutu kusd guburgrun, nu suu tukumutu sunctus ust Lurum upsum dulur sut umut. Lurum upsum dulur sut umut, cunsututur sudupscung ulutr, sud duum nunumy uurmud tumpur unvudunt ut luburu ut duluru mugnu uluquyum urut, sud duum vuluptuu. Ut vuru uus ut uccusum ut justu duu dulurus ut uu rubum. Stut clutu kusd guburgrun, nu suu tukumutu sunctus ust Lurum upsum dulur sut umut. Lurum upsum dulur sut umut, cunsututur sudupscung ulutr, sud duum nunumy uurmud tumpur unvudunt ut luburu ut duluru mugnu uluquyum urut, sud duum vuluptuu. Ut vuru uus ut uccusum ut justu duu dulurus ut uu rubum. Stut clutu kusd guburgrun, nu suu tukumutu sunctus ust Lurum upsum dulur sut umut.</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | 크기: 6.0 KiB |
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,135 @@
|
|||
@font-face {
|
||||
font-family: "repulsor";
|
||||
src: url("/assets2/fonts/repulsore.ttf") format("truetype"); }
|
||||
@font-face {
|
||||
font-family: 'Muli';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local("Muli Regular"), local("Muli-Regular"), url(/assets2/fonts/Muli-Regular.ttf) format("truetype"); }
|
||||
html {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
font-family: Muli; }
|
||||
|
||||
body {
|
||||
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#004e66+0,145266+17,0e0e0e+100 */
|
||||
background: #004e66;
|
||||
/* Old browsers */
|
||||
background: -moz-radial-gradient(center, ellipse cover, #004e66 0%, #145266 17%, #0e0e0e 100%);
|
||||
/* FF3.6-15 */
|
||||
background: -webkit-radial-gradient(center, ellipse cover, #004e66 0%, #145266 17%, #0e0e0e 100%);
|
||||
/* Chrome10-25,Safari5.1-6 */
|
||||
background: radial-gradient(ellipse at center, #004e66 0%, #145266 17%, #0e0e0e 100%);
|
||||
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ }
|
||||
|
||||
header {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 800px;
|
||||
height: 100px; }
|
||||
header h1 {
|
||||
text-align: center;
|
||||
color: #fff7e5;
|
||||
font-family: repulsor;
|
||||
font-size: 42px;
|
||||
margin-bottom: 0; }
|
||||
header h2 {
|
||||
margin-top: 0;
|
||||
text-align: center;
|
||||
color: #ffb400;
|
||||
font-size: 30px; }
|
||||
|
||||
/** glitch **/
|
||||
header {
|
||||
/* Hover flash animation on last image */ }
|
||||
header .glitch {
|
||||
position: absolute;
|
||||
width: 800px;
|
||||
max-width: 400px;
|
||||
height: 100px;
|
||||
max-height: calc(400px * 1.25);
|
||||
overflow: hidden;
|
||||
margin: 0 auto; }
|
||||
header .glitch:hover {
|
||||
cursor: pointer; }
|
||||
header .glitch__img {
|
||||
position: absolute;
|
||||
top: calc(-1 * 5px);
|
||||
left: calc(-1 * 10px);
|
||||
width: calc(100% + 10px * 2);
|
||||
height: calc(100% + 5px * 2);
|
||||
background: url(../img/1.jpg) no-repeat 50% 0;
|
||||
background-color: transparent;
|
||||
background-size: cover;
|
||||
background-blend-mode: none; }
|
||||
header .glitch__img:nth-child(2) {
|
||||
background-color: transparent;
|
||||
background-blend-mode: none; }
|
||||
header .glitch__img:nth-child(3) {
|
||||
background-color: transparent;
|
||||
background-blend-mode: none; }
|
||||
header .glitch__img:nth-child(4) {
|
||||
background-color: transparent;
|
||||
background-blend-mode: none; }
|
||||
header .glitch__img:nth-child(5) {
|
||||
background-color: #af4949;
|
||||
background-blend-mode: overlay; }
|
||||
header .glitch__img:nth-child(n+2) {
|
||||
opacity: 0; }
|
||||
header .glitch:hover .glitch__img:nth-child(n+2) {
|
||||
opacity: 1; }
|
||||
header .glitch:hover .glitch__img:nth-child(2) {
|
||||
transform: translate3d(10px, 0, 0);
|
||||
animation: glitch-anim-1-horizontal 4s infinite linear alternate; }
|
||||
header .glitch:hover > .glitch__img:nth-child(3) {
|
||||
transform: translate3d(calc(-1 * 10px), 0, 0);
|
||||
animation: glitch-anim-2-horizontal 4s infinite linear alternate; }
|
||||
header .glitch:hover > .glitch__img:nth-child(4) {
|
||||
transform: translate3d(0, calc(-1 * 5px), 0) scale3d(-1, -1, 1);
|
||||
animation: glitch-anim-3-horizontal 4s infinite linear alternate; }
|
||||
header .glitch:hover > .glitch__img:nth-child(5) {
|
||||
animation: glitch-anim-flash 0.5s steps(1, end) infinite; }
|
||||
@keyframes glitch-anim-1-horizontal {
|
||||
0% {
|
||||
-webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
|
||||
clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%); }
|
||||
10% {
|
||||
-webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
|
||||
clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%); }
|
||||
20% {
|
||||
-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
|
||||
clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%); }
|
||||
30% {
|
||||
-webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
|
||||
clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%); }
|
||||
40% {
|
||||
-webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
|
||||
clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); }
|
||||
50% {
|
||||
-webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
|
||||
clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); }
|
||||
60% {
|
||||
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
|
||||
clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); }
|
||||
70% {
|
||||
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
|
||||
clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); }
|
||||
80% {
|
||||
-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
|
||||
clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); }
|
||||
90% {
|
||||
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
|
||||
clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); }
|
||||
100% {
|
||||
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
|
||||
clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); }
|
||||
@keyframes glitch-anim-flash {
|
||||
0% {
|
||||
opacity: 0.2;
|
||||
transform: translate3d(10px, 5px, 0); }
|
||||
33%, 100% {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 0, 0); } } }
|
||||
|
||||
/*# sourceMappingURL=main.css.map */
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"version": 3,
|
||||
"mappings": "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",
|
||||
"sources": ["main.scss"],
|
||||
"names": [],
|
||||
"file": "main.css"
|
||||
}
|
||||
|
|
@ -0,0 +1,211 @@
|
|||
// palette
|
||||
$white: #fff7e5;
|
||||
$yellow: #ffb400;
|
||||
$blue: #004e66;
|
||||
|
||||
@font-face {
|
||||
font-family: "repulsor";
|
||||
src: url("/assets2/fonts/repulsore.ttf") format("truetype");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Muli';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Muli Regular'), local('Muli-Regular'), url(/assets2/fonts/Muli-Regular.ttf) format('truetype');
|
||||
}
|
||||
|
||||
// mixins
|
||||
@mixin radial-background() {
|
||||
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#004e66+0,145266+17,0e0e0e+100 */
|
||||
background: $blue; /* Old browsers */
|
||||
background: -moz-radial-gradient(center, ellipse cover, $blue 0%, #145266 17%, #0e0e0e 100%); /* FF3.6-15 */
|
||||
background: -webkit-radial-gradient(center, ellipse cover, $blue 0%,#145266 17%,#0e0e0e 100%); /* Chrome10-25,Safari5.1-6 */
|
||||
background: radial-gradient(ellipse at center, $blue 0%, #145266 17%,#0e0e0e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||||
}
|
||||
|
||||
|
||||
html {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
height: 100%;
|
||||
font-family: Muli;
|
||||
}
|
||||
body {
|
||||
@include radial-background();
|
||||
}
|
||||
|
||||
|
||||
header {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 800px;
|
||||
height: 100px;
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: $white;
|
||||
font-family: repulsor;
|
||||
font-size: 42px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
|
||||
text-align: center;
|
||||
color: $yellow;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
/** glitch **/
|
||||
$glitch-width: 800px;
|
||||
$glitch-height: 100px;
|
||||
$gap-horizontal: 10px;
|
||||
$gap-vertical: 5px;
|
||||
$time-anim: 4s;
|
||||
$delay-anim: 2s;
|
||||
$blend-mode-1: none;
|
||||
$blend-mode-2: none;
|
||||
$blend-mode-3: none;
|
||||
$blend-mode-4: none;
|
||||
$blend-mode-5: overlay;
|
||||
$blend-color-1: transparent;
|
||||
$blend-color-2: transparent;
|
||||
$blend-color-3: transparent;
|
||||
$blend-color-4: transparent;
|
||||
$blend-color-5: #af4949;
|
||||
|
||||
header {
|
||||
.glitch {
|
||||
position: absolute;
|
||||
width: $glitch-width;
|
||||
max-width: 400px;
|
||||
height: $glitch-height;
|
||||
max-height: calc(400px * 1.25);
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.glitch:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.glitch__img {
|
||||
position: absolute;
|
||||
top: calc(-1 * #{$gap-vertical});
|
||||
left: calc(-1 * #{$gap-horizontal});
|
||||
width: calc(100% + #{$gap-horizontal} * 2);
|
||||
height: calc(100% + #{$gap-vertical} * 2);
|
||||
background: url(../img/1.jpg) no-repeat 50% 0;
|
||||
background-color: $blend-color-1;
|
||||
background-size: cover;
|
||||
background-blend-mode: $blend-mode-1;
|
||||
}
|
||||
|
||||
.glitch__img:nth-child(2) {
|
||||
background-color: $blend-color-2;
|
||||
background-blend-mode: $blend-mode-2;
|
||||
}
|
||||
|
||||
.glitch__img:nth-child(3) {
|
||||
background-color: $blend-color-3;
|
||||
background-blend-mode: $blend-mode-3;
|
||||
}
|
||||
|
||||
.glitch__img:nth-child(4) {
|
||||
background-color: $blend-color-4;
|
||||
background-blend-mode: $blend-mode-4;
|
||||
}
|
||||
|
||||
.glitch__img:nth-child(5) {
|
||||
background-color: $blend-color-5;
|
||||
background-blend-mode: $blend-mode-5;
|
||||
}
|
||||
|
||||
.glitch__img:nth-child(n+2) {
|
||||
opacity: 0;
|
||||
}
|
||||
.glitch:hover .glitch__img:nth-child(n+2) {
|
||||
opacity: 1;
|
||||
}
|
||||
.glitch:hover .glitch__img:nth-child(2) {
|
||||
transform: translate3d($gap-horizontal,0,0);
|
||||
animation: glitch-anim-1-horizontal $time-anim infinite linear alternate;
|
||||
}
|
||||
|
||||
.glitch:hover > .glitch__img:nth-child(3) {
|
||||
transform: translate3d(calc(-1 * #{$gap-horizontal}),0,0);
|
||||
animation: glitch-anim-2-horizontal $time-anim infinite linear alternate;
|
||||
}
|
||||
|
||||
.glitch:hover > .glitch__img:nth-child(4) {
|
||||
transform: translate3d(0, calc(-1 * #{$gap-vertical}), 0) scale3d(-1,-1,1);
|
||||
animation: glitch-anim-3-horizontal $time-anim infinite linear alternate;
|
||||
}
|
||||
|
||||
/* Hover flash animation on last image */
|
||||
.glitch:hover > .glitch__img:nth-child(5) {
|
||||
animation: glitch-anim-flash 0.5s steps(1,end) infinite;
|
||||
}
|
||||
|
||||
@keyframes glitch-anim-1-horizontal {
|
||||
0% {
|
||||
-webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
|
||||
clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
|
||||
}
|
||||
10% {
|
||||
-webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
|
||||
clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
|
||||
}
|
||||
20% {
|
||||
-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
|
||||
clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
|
||||
}
|
||||
30% {
|
||||
-webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
|
||||
clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
|
||||
}
|
||||
40% {
|
||||
-webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
|
||||
clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
|
||||
}
|
||||
50% {
|
||||
-webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
|
||||
clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
|
||||
}
|
||||
60% {
|
||||
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
|
||||
clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
|
||||
}
|
||||
70% {
|
||||
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
|
||||
clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
|
||||
}
|
||||
80% {
|
||||
-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
|
||||
clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
|
||||
}
|
||||
90% {
|
||||
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
|
||||
clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
|
||||
}
|
||||
100% {
|
||||
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
|
||||
clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
|
||||
}
|
||||
|
||||
@keyframes glitch-anim-flash {
|
||||
0% {
|
||||
opacity: 0.2;
|
||||
transform: translate3d($gap-horizontal, $gap-vertical, 0);
|
||||
}
|
||||
33%, 100% {
|
||||
opacity: 0;
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | 크기: 34 KiB |
|
|
@ -0,0 +1,47 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<comment version="3.0">
|
||||
<caption/>
|
||||
<note>Closeup electronic hardware .Resistor on the circuit board</note>
|
||||
<place/>
|
||||
<categories>
|
||||
<category value="background"/>
|
||||
<category value="board"/>
|
||||
<category value="circuit"/>
|
||||
<category value="closeup"/>
|
||||
<category value="color"/>
|
||||
<category value="component"/>
|
||||
<category value="current"/>
|
||||
<category value="detail"/>
|
||||
<category value="diagram"/>
|
||||
<category value="electric"/>
|
||||
<category value="electrical"/>
|
||||
<category value="electricity"/>
|
||||
<category value="electronic"/>
|
||||
<category value="engineering"/>
|
||||
<category value="equipment"/>
|
||||
<category value="flow"/>
|
||||
<category value="industry"/>
|
||||
<category value="internal"/>
|
||||
<category value="isolated"/>
|
||||
<category value="macro"/>
|
||||
<category value="mini"/>
|
||||
<category value="object"/>
|
||||
<category value="ohm"/>
|
||||
<category value="part"/>
|
||||
<category value="passive"/>
|
||||
<category value="piece"/>
|
||||
<category value="reduce"/>
|
||||
<category value="repair"/>
|
||||
<category value="resistance"/>
|
||||
<category value="resistor"/>
|
||||
<category value="retro"/>
|
||||
<category value="science"/>
|
||||
<category value="service"/>
|
||||
<category value="small"/>
|
||||
<category value="spare"/>
|
||||
<category value="technical"/>
|
||||
<category value="technology"/>
|
||||
<category value="vintage"/>
|
||||
<category value="voltage"/>
|
||||
</categories>
|
||||
</comment>
|
||||
Binary file not shown.
|
After Width: | Height: | 크기: 110 KiB |
|
|
@ -0,0 +1,50 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
body {
|
||||
background-color: #4e4851;
|
||||
}
|
||||
.header-container {
|
||||
min-width: 1300px;
|
||||
min-height: 866px;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.header-img {
|
||||
position: absolute;
|
||||
min-width: 1300px;
|
||||
min-height: 866px;
|
||||
background: url('./image.jpg') no-repeat;
|
||||
}
|
||||
.header-img:nth-child(2) {
|
||||
transform: translate3d(10px,0,0);
|
||||
animation: sideshift 1s infinite linear;
|
||||
background-blend-mode: screen;
|
||||
}
|
||||
@keyframes sideshift {
|
||||
0% { clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%); }
|
||||
5% { clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%); }
|
||||
10% { clip-path: polygon(0 8%, 100% 8%, 100% 10%, 0 10%); }
|
||||
30% { clip-path: polygon(0 30%, 100% 30%, 100% 30%, 0 30%); }
|
||||
35% { clip-path: polygon(0 35%, 100% 37%, 100% 35%, 0 37%); }
|
||||
40% { clip-path: polygon(0 50%, 100% 55%, 100% 50%, 0 55%); }
|
||||
|
||||
50% { clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); }
|
||||
100% { clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); }
|
||||
}
|
||||
.header-img:nth-child(3) {
|
||||
opacity: 1;
|
||||
transform: skew(10deg, 10deg);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header-container">
|
||||
<div class="header-img"></div>
|
||||
<div class="header-img"></div>
|
||||
<div class="header-img"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Scrolltest</title>
|
||||
<link rel="stylesheet" type="text/css" href="/assets/css/main.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="episode-list">
|
||||
<header>
|
||||
<h1>Noise2Signal</h1>
|
||||
<h2>Der Laberpodcast</h2>
|
||||
</header>
|
||||
<main>
|
||||
<article class="preview">
|
||||
<h1>E1: Nasenasenase<h1>
|
||||
<p>In dieser Folge fofo baba fo ba fofof ob babababb abaa aofo f ofof obaaba</p>
|
||||
</article>
|
||||
</main>
|
||||
<footer id="left">Unne Links</footer>
|
||||
<footer id="center">Unne Midde</footer>
|
||||
<footer id="right">Unne Rechts</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Index 2</title>
|
||||
<link rel="stylesheet" type="text/css" href="/assets2/css/main.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>NoiseToSignal</h1>
|
||||
<h2>Just the right ratio, ≥ 1</h2>
|
||||
<div class="glitch">
|
||||
<div class="glitch__img"></div>
|
||||
<div class="glitch__img"></div>
|
||||
<div class="glitch__img"></div>
|
||||
<div class="glitch__img"></div>
|
||||
<div class="glitch__img"></div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="episode-list">
|
||||
<main>
|
||||
<article class="preview">
|
||||
<h1>E3: Nasenasenase<h1>
|
||||
<p>In dieser Folge fofo baba fo ba fofof ob babababb abaa aofo f ofof obaaba</p>
|
||||
</article>
|
||||
<article class="preview">
|
||||
<h1>E2: Nasenasenase<h1>
|
||||
<p>In dieser Folge fofo baba fo ba fofof ob babababb abaa aofo f ofof obaaba</p>
|
||||
</article>
|
||||
<article class="preview">
|
||||
<h1>E1: Nasenasenase<h1>
|
||||
<p>In dieser Folge fofo baba fo ba fofof ob babababb abaa aofo f ofof obaaba</p>
|
||||
</article>
|
||||
</main>
|
||||
<footer id="left">Unne Links</footer>
|
||||
<footer id="center">Unne Midde</footer>
|
||||
<footer id="right">Unne Rechts</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
Laram apsam dalar sat amat, cansatatar sadapscang alatr, sad daam nanamy aarmad tampar anvadant at labara at dalara magna alaqayam arat, sad daam valaptaa. At vara aas at accasam at jasta daa dalaras at aa rabam. Stat clata kasd gabargran, na saa takamata sanctas ast Laram apsam dalar sat amat. Laram apsam dalar sat amat, cansatatar sadapscang alatr, sad daam nanamy aarmad tampar anvadant at labara at dalara magna alaqayam arat, sad daam valaptaa. At vara aas at accasam at jasta daa dalaras at aa rabam. Stat clata kasd gabargran, na saa takamata sanctas ast Laram apsam dalar sat amat. Laram apsam dalar sat amat, cansatatar sadapscang alatr, sad daam nanamy aarmad tampar anvadant at labara at dalara magna alaqayam arat, sad daam valaptaa. At vara aas at accasam at jasta daa dalaras at aa rabam. Stat clata kasd gabargran, na saa takamata sanctas ast Laram apsam dalar sat amat.
|
||||
|
|
@ -0,0 +1 @@
|
|||
Lerem epsem deler set emet, censeteter sedepsceng eletr, sed deem nenemy eermed temper envedent et lebere et delere megne eleqeyem eret, sed deem veleptee. Et vere ees et eccesem et jeste dee deleres et ee rebem. Stet clete kesd gebergren, ne see tekemete senctes est Lerem epsem deler set emet. Lerem epsem deler set emet, censeteter sedepsceng eletr, sed deem nenemy eermed temper envedent et lebere et delere megne eleqeyem eret, sed deem veleptee. Et vere ees et eccesem et jeste dee deleres et ee rebem. Stet clete kesd gebergren, ne see tekemete senctes est Lerem epsem deler set emet. Lerem epsem deler set emet, censeteter sedepsceng eletr, sed deem nenemy eermed temper envedent et lebere et delere megne eleqeyem eret, sed deem veleptee. Et vere ees et eccesem et jeste dee deleres et ee rebem. Stet clete kesd gebergren, ne see tekemete senctes est Lerem epsem deler set emet.
|
||||
|
|
@ -0,0 +1 @@
|
|||
Lirim ipsim dilir sit imit, cinsititir sidipscing ilitr, sid diim ninimy iirmid timpir invidint it libiri it diliri migni iliqiyim irit, sid diim viliptii. It viri iis it iccisim it jisti dii diliris it ii ribim. Stit cliti kisd gibirgrin, ni sii tikimiti sinctis ist Lirim ipsim dilir sit imit. Lirim ipsim dilir sit imit, cinsititir sidipscing ilitr, sid diim ninimy iirmid timpir invidint it libiri it diliri migni iliqiyim irit, sid diim viliptii. It viri iis it iccisim it jisti dii diliris it ii ribim. Stit cliti kisd gibirgrin, ni sii tikimiti sinctis ist Lirim ipsim dilir sit imit. Lirim ipsim dilir sit imit, cinsititir sidipscing ilitr, sid diim ninimy iirmid timpir invidint it libiri it diliri migni iliqiyim irit, sid diim viliptii. It viri iis it iccisim it jisti dii diliris it ii ribim. Stit cliti kisd gibirgrin, ni sii tikimiti sinctis ist Lirim ipsim dilir sit imit.
|
||||
|
|
@ -0,0 +1 @@
|
|||
Lorom opsom dolor sot omot, consototor sodopscong olotr, sod doom nonomy oormod tompor onvodont ot loboro ot doloro mogno oloqoyom orot, sod doom voloptoo. Ot voro oos ot occosom ot josto doo doloros ot oo robom. Stot cloto kosd goborgron, no soo tokomoto sonctos ost Lorom opsom dolor sot omot. Lorom opsom dolor sot omot, consototor sodopscong olotr, sod doom nonomy oormod tompor onvodont ot loboro ot doloro mogno oloqoyom orot, sod doom voloptoo. Ot voro oos ot occosom ot josto doo doloros ot oo robom. Stot cloto kosd goborgron, no soo tokomoto sonctos ost Lorom opsom dolor sot omot. Lorom opsom dolor sot omot, consototor sodopscong olotr, sod doom nonomy oormod tompor onvodont ot loboro ot doloro mogno oloqoyom orot, sod doom voloptoo. Ot voro oos ot occosom ot josto doo doloros ot oo robom. Stot cloto kosd goborgron, no soo tokomoto sonctos ost Lorom opsom dolor sot omot.
|
||||
|
|
@ -0,0 +1 @@
|
|||
Lurum upsum dulur sut umut, cunsututur sudupscung ulutr, sud duum nunumy uurmud tumpur unvudunt ut luburu ut duluru mugnu uluquyum urut, sud duum vuluptuu. Ut vuru uus ut uccusum ut justu duu dulurus ut uu rubum. Stut clutu kusd guburgrun, nu suu tukumutu sunctus ust Lurum upsum dulur sut umut. Lurum upsum dulur sut umut, cunsututur sudupscung ulutr, sud duum nunumy uurmud tumpur unvudunt ut luburu ut duluru mugnu uluquyum urut, sud duum vuluptuu. Ut vuru uus ut uccusum ut justu duu dulurus ut uu rubum. Stut clutu kusd guburgrun, nu suu tukumutu sunctus ust Lurum upsum dulur sut umut. Lurum upsum dulur sut umut, cunsututur sudupscung ulutr, sud duum nunumy uurmud tumpur unvudunt ut luburu ut duluru mugnu uluquyum urut, sud duum vuluptuu. Ut vuru uus ut uccusum ut justu duu dulurus ut uu rubum. Stut clutu kusd guburgrun, nu suu tukumutu sunctus ust Lurum upsum dulur sut umut.
|
||||
불러오는 중...
Reference in New Issue