Update scripts with latest changes by M.R.
Michael Reber
4 years ago
parent
b6df61abd8
commit
b60f12974f
@ -0,0 +1,3 @@
|
||||
# Download Button Animation
|
||||
|
||||
|
||||
@ -0,0 +1,56 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Download Button Animation</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
|
||||
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap'><link rel="stylesheet" href="./style.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<a href="" class="button">
|
||||
<ul>
|
||||
<li>Download</li>
|
||||
<li>Downloading</li>
|
||||
<li>Open File</li>
|
||||
</ul>
|
||||
<div>
|
||||
<svg viewBox="0 0 24 24"></svg>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="" class="button dark-single">
|
||||
<div>
|
||||
<svg viewBox="0 0 24 24"></svg>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div></div>
|
||||
|
||||
<a href="" class="button white-single">
|
||||
<div>
|
||||
<svg viewBox="0 0 24 24"></svg>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="" class="button dark">
|
||||
<ul>
|
||||
<li>Download</li>
|
||||
<li>Downloading</li>
|
||||
<li>Open File</li>
|
||||
</ul>
|
||||
<div>
|
||||
<svg viewBox="0 0 24 24"></svg>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js'></script><script src="./script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,83 @@
|
||||
$('.button').each(function(e) {
|
||||
|
||||
let duration = 3000,
|
||||
btn = $(this),
|
||||
svg = btn.find('svg'),
|
||||
svgPath = new Proxy({
|
||||
y: null,
|
||||
smoothing: null
|
||||
}, {
|
||||
set(target, key, value) {
|
||||
target[key] = value;
|
||||
if(target.y !== null && target.smoothing !== null) {
|
||||
svg.html(getPath(target.y, target.smoothing, null))
|
||||
}
|
||||
return true;
|
||||
},
|
||||
get(target, key) {
|
||||
return target[key];
|
||||
}
|
||||
});
|
||||
|
||||
btn.css('--duration', duration);
|
||||
|
||||
svgPath.y = 20;
|
||||
svgPath.smoothing = 0;
|
||||
|
||||
btn.on('click', e => {
|
||||
|
||||
if(!btn.hasClass('loading')) {
|
||||
|
||||
btn.addClass('loading');
|
||||
|
||||
TweenMax.to(svgPath, duration * .065 / 1000, {
|
||||
smoothing: .3
|
||||
});
|
||||
|
||||
TweenMax.to(svgPath, duration * .265 / 1000, {
|
||||
y: 12,
|
||||
ease: Elastic.easeOut.config(1.12, .4)
|
||||
}).delay(duration * .065 / 1000);
|
||||
|
||||
setTimeout(() => {
|
||||
svg.html(getPath(0, 0, [
|
||||
[3, 14],
|
||||
[8, 19],
|
||||
[21, 6]
|
||||
]));
|
||||
}, (duration / 2));
|
||||
|
||||
}
|
||||
|
||||
return false;
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
function getPoint(point, i, a, smoothing) {
|
||||
let cp = (current, previous, next, reverse) => {
|
||||
let p = previous || current,
|
||||
n = next || current,
|
||||
o = {
|
||||
length: Math.sqrt(Math.pow(n[0] - p[0], 2) + Math.pow(n[1] - p[1], 2)),
|
||||
angle: Math.atan2(n[1] - p[1], n[0] - p[0])
|
||||
},
|
||||
angle = o.angle + (reverse ? Math.PI : 0),
|
||||
length = o.length * smoothing;
|
||||
return [current[0] + Math.cos(angle) * length, current[1] + Math.sin(angle) * length];
|
||||
},
|
||||
cps = cp(a[i - 1], a[i - 2], point, false),
|
||||
cpe = cp(point, a[i - 1], a[i + 1], true);
|
||||
return `C ${cps[0]},${cps[1]} ${cpe[0]},${cpe[1]} ${point[0]},${point[1]}`;
|
||||
}
|
||||
|
||||
function getPath(update, smoothing, pointsNew) {
|
||||
let points = pointsNew ? pointsNew : [
|
||||
[4, 12],
|
||||
[12, update],
|
||||
[20, 12]
|
||||
],
|
||||
d = points.reduce((acc, point, i, a) => i === 0 ? `M ${point[0]},${point[1]}` : `${acc} ${getPoint(point, i, a, smoothing)}`, '');
|
||||
return `<path d="${d}" />`;
|
||||
}
|
||||
@ -0,0 +1,363 @@
|
||||
.button.dark-single {
|
||||
--background: none;
|
||||
--rectangle: #242836;
|
||||
--success: #4BC793;
|
||||
}
|
||||
.button.white-single {
|
||||
--background: none;
|
||||
--rectangle: #F5F9FF;
|
||||
--arrow: #275efe;
|
||||
--success: #275efe;
|
||||
--shadow: rgba(10, 22, 50, .1);
|
||||
}
|
||||
.button.dark {
|
||||
--background: #242836;
|
||||
--rectangle: #1C212E;
|
||||
--arrow: #F5F9FF;
|
||||
--text: #F5F9FF;
|
||||
--success: #2F3545;
|
||||
}
|
||||
|
||||
.button {
|
||||
--background: #275efe;
|
||||
--rectangle: #184fee;
|
||||
--success: #4672f1;
|
||||
--text: #fff;
|
||||
--arrow: #fff;
|
||||
--checkmark: #fff;
|
||||
--shadow: rgba(10, 22, 50, .24);
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
-webkit-mask-image: -webkit-radial-gradient(white, black);
|
||||
background: var(--background);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px -1px var(--shadow);
|
||||
transition: box-shadow .2s ease, -webkit-transform .2s ease;
|
||||
transition: transform .2s ease, box-shadow .2s ease;
|
||||
transition: transform .2s ease, box-shadow .2s ease, -webkit-transform .2s ease;
|
||||
}
|
||||
.button:active {
|
||||
-webkit-transform: scale(0.95);
|
||||
transform: scale(0.95);
|
||||
box-shadow: 0 1px 4px -1px var(--shadow);
|
||||
}
|
||||
.button ul {
|
||||
margin: 0;
|
||||
padding: 16px 40px;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 28px;
|
||||
color: var(--text);
|
||||
}
|
||||
.button ul li:not(:first-child) {
|
||||
top: 16px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
}
|
||||
.button ul li:nth-child(2) {
|
||||
top: 76px;
|
||||
}
|
||||
.button ul li:nth-child(3) {
|
||||
top: 136px;
|
||||
}
|
||||
.button > div {
|
||||
position: relative;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: var(--rectangle);
|
||||
}
|
||||
.button > div:before, .button > div:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
.button > div:before {
|
||||
border-radius: 1px;
|
||||
width: 2px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
height: 17px;
|
||||
margin: -9px 0 0 -1px;
|
||||
background: var(--arrow);
|
||||
}
|
||||
.button > div:after {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
-webkit-transform-origin: 50% 0;
|
||||
transform-origin: 50% 0;
|
||||
border-radius: 0 0 80% 80%;
|
||||
background: var(--success);
|
||||
top: 0;
|
||||
left: 0;
|
||||
-webkit-transform: scaleY(0);
|
||||
transform: scaleY(0);
|
||||
}
|
||||
.button > div svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin: -9px 0 0 -10px;
|
||||
fill: none;
|
||||
z-index: 1;
|
||||
stroke-width: 2px;
|
||||
stroke: var(--arrow);
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
.button.loading ul {
|
||||
-webkit-animation: text calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
|
||||
animation: text calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
|
||||
}
|
||||
.button.loading > div:before {
|
||||
-webkit-animation: line calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
|
||||
animation: line calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
|
||||
}
|
||||
.button.loading > div:after {
|
||||
-webkit-animation: background calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
|
||||
animation: background calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
|
||||
}
|
||||
.button.loading > div svg {
|
||||
-webkit-animation: svg calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
|
||||
animation: svg calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
|
||||
}
|
||||
|
||||
@-webkit-keyframes text {
|
||||
10%,
|
||||
85% {
|
||||
-webkit-transform: translateY(-100%);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
95%,
|
||||
100% {
|
||||
-webkit-transform: translateY(-200%);
|
||||
transform: translateY(-200%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes text {
|
||||
10%,
|
||||
85% {
|
||||
-webkit-transform: translateY(-100%);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
95%,
|
||||
100% {
|
||||
-webkit-transform: translateY(-200%);
|
||||
transform: translateY(-200%);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes line {
|
||||
5%,
|
||||
10% {
|
||||
-webkit-transform: translateY(-30px);
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
40% {
|
||||
-webkit-transform: translateY(-20px);
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
65% {
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
75%,
|
||||
100% {
|
||||
-webkit-transform: translateY(30px);
|
||||
transform: translateY(30px);
|
||||
}
|
||||
}
|
||||
@keyframes line {
|
||||
5%,
|
||||
10% {
|
||||
-webkit-transform: translateY(-30px);
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
40% {
|
||||
-webkit-transform: translateY(-20px);
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
65% {
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
75%,
|
||||
100% {
|
||||
-webkit-transform: translateY(30px);
|
||||
transform: translateY(30px);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes svg {
|
||||
0%,
|
||||
20% {
|
||||
stroke-dasharray: 0;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
21%,
|
||||
89% {
|
||||
stroke-dasharray: 26px;
|
||||
stroke-dashoffset: 26px;
|
||||
stroke-width: 3px;
|
||||
margin: -10px 0 0 -10px;
|
||||
stroke: var(--checkmark);
|
||||
}
|
||||
100% {
|
||||
stroke-dasharray: 26px;
|
||||
stroke-dashoffset: 0;
|
||||
margin: -10px 0 0 -10px;
|
||||
stroke: var(--checkmark);
|
||||
}
|
||||
12% {
|
||||
opacity: 1;
|
||||
}
|
||||
20%,
|
||||
89% {
|
||||
opacity: 0;
|
||||
}
|
||||
90%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes svg {
|
||||
0%,
|
||||
20% {
|
||||
stroke-dasharray: 0;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
21%,
|
||||
89% {
|
||||
stroke-dasharray: 26px;
|
||||
stroke-dashoffset: 26px;
|
||||
stroke-width: 3px;
|
||||
margin: -10px 0 0 -10px;
|
||||
stroke: var(--checkmark);
|
||||
}
|
||||
100% {
|
||||
stroke-dasharray: 26px;
|
||||
stroke-dashoffset: 0;
|
||||
margin: -10px 0 0 -10px;
|
||||
stroke: var(--checkmark);
|
||||
}
|
||||
12% {
|
||||
opacity: 1;
|
||||
}
|
||||
20%,
|
||||
89% {
|
||||
opacity: 0;
|
||||
}
|
||||
90%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes background {
|
||||
10% {
|
||||
-webkit-transform: scaleY(0);
|
||||
transform: scaleY(0);
|
||||
}
|
||||
40% {
|
||||
-webkit-transform: scaleY(0.15);
|
||||
transform: scaleY(0.15);
|
||||
}
|
||||
65% {
|
||||
-webkit-transform: scaleY(0.5);
|
||||
transform: scaleY(0.5);
|
||||
border-radius: 0 0 50% 50%;
|
||||
}
|
||||
75% {
|
||||
border-radius: 0 0 50% 50%;
|
||||
}
|
||||
90%,
|
||||
100% {
|
||||
border-radius: 0;
|
||||
}
|
||||
75%,
|
||||
100% {
|
||||
-webkit-transform: scaleY(1);
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
@keyframes background {
|
||||
10% {
|
||||
-webkit-transform: scaleY(0);
|
||||
transform: scaleY(0);
|
||||
}
|
||||
40% {
|
||||
-webkit-transform: scaleY(0.15);
|
||||
transform: scaleY(0.15);
|
||||
}
|
||||
65% {
|
||||
-webkit-transform: scaleY(0.5);
|
||||
transform: scaleY(0.5);
|
||||
border-radius: 0 0 50% 50%;
|
||||
}
|
||||
75% {
|
||||
border-radius: 0 0 50% 50%;
|
||||
}
|
||||
90%,
|
||||
100% {
|
||||
border-radius: 0;
|
||||
}
|
||||
75%,
|
||||
100% {
|
||||
-webkit-transform: scaleY(1);
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
*:before, *:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
font-family: 'Roboto', Arial;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #E4ECFA;
|
||||
}
|
||||
body .container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
body .container > div {
|
||||
flex-basis: 100%;
|
||||
width: 0;
|
||||
}
|
||||
body .container .button {
|
||||
margin: 16px;
|
||||
}
|
||||
@media (max-width: 400px) {
|
||||
body .container .button {
|
||||
margin: 12px;
|
||||
}
|
||||
}
|
||||
body .dribbble {
|
||||
position: fixed;
|
||||
display: block;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
}
|
||||
body .dribbble img {
|
||||
display: block;
|
||||
height: 28px;
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
# Social Media Buttons
|
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<title>Social Media Buttons</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.4.1/css/all.css"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="middle">
|
||||
<a class="btn" href="#">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a class="btn" href="#">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a class="btn" href="#">
|
||||
<i class="fab fa-google"></i>
|
||||
</a>
|
||||
<a class="btn" href="#">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
<a class="btn" href="#">
|
||||
<i class="fab fa-youtube"></i>
|
||||
</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,68 @@
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.middle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
background: #f1f1f1;
|
||||
margin: 10px;
|
||||
border-radius: 30%;
|
||||
box-shadow: 0 5px 15px -5px #00000070;
|
||||
color: #3498db;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.btn i {
|
||||
line-height: 90px;
|
||||
font-size: 26px;
|
||||
transition: 0.2s linear;
|
||||
}
|
||||
|
||||
.btn:hover i {
|
||||
transform: scale(1.3);
|
||||
color: #f1f1f1;
|
||||
}
|
||||
|
||||
.btn::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 120%;
|
||||
height: 120%;
|
||||
background: #3498db;
|
||||
transform: rotate(45deg);
|
||||
left: -110%;
|
||||
top: 90%;
|
||||
}
|
||||
|
||||
.btn:hover::before {
|
||||
animation: aaa 0.7s 1;
|
||||
top: -10%;
|
||||
left: -10%;
|
||||
}
|
||||
|
||||
@keyframes aaa {
|
||||
0% {
|
||||
left: -110%;
|
||||
top: 90%;
|
||||
}
|
||||
50% {
|
||||
left: 10%;
|
||||
top: -30%;
|
||||
}
|
||||
100% {
|
||||
top: -10%;
|
||||
left: -10%;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,4 @@
|
||||
# Clock Pure CSS with current time
|
||||
|
||||
CSS only, clock
|
||||
|
||||
@ -0,0 +1,81 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Clock Pure CSS with current time</title>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="clock">
|
||||
<div class="clock__second"></div>
|
||||
<div class="clock__minute"></div>
|
||||
<div class="clock__hour"></div>
|
||||
<div class="clock__axis"></div>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
<section class="clock__indicator"></section>
|
||||
</div>
|
||||
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
|
||||
<script src="./script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,24 @@
|
||||
// Javascript is used to set the clock to your computer time.
|
||||
|
||||
var currentSec = getSecondsToday();
|
||||
|
||||
var seconds = (currentSec / 60) % 1;
|
||||
var minutes = (currentSec / 3600) % 1;
|
||||
var hours = (currentSec / 43200) % 1;
|
||||
|
||||
setTime(60 * seconds, "second");
|
||||
setTime(3600 * minutes, "minute");
|
||||
setTime(43200 * hours, "hour");
|
||||
|
||||
function setTime(left, hand) {
|
||||
$(".clock__" + hand).css("animation-delay", "" + left * -1 + "s");
|
||||
}
|
||||
|
||||
function getSecondsToday() {
|
||||
let now = new Date();
|
||||
|
||||
let today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
|
||||
|
||||
let diff = now - today;
|
||||
return Math.round(diff / 1000);
|
||||
}
|
||||
@ -0,0 +1,393 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #1b1e23;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: sans-serif;
|
||||
color: white;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #f4eed7;
|
||||
font-size: 0.8em;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.clock {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
border-radius: 100px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
.clock__second, .clock__minute, .clock__hour, .clock__indicator {
|
||||
position: absolute;
|
||||
left: calc(50% - 1px);
|
||||
width: 2px;
|
||||
background: #f4eed7;
|
||||
-webkit-transform-origin: bottom center;
|
||||
transform-origin: bottom center;
|
||||
z-index: 2;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.clock__second {
|
||||
height: 90px;
|
||||
margin-top: 10px;
|
||||
background: #4b9aaa;
|
||||
-webkit-animation: time 60s infinite steps(60);
|
||||
animation: time 60s infinite steps(60);
|
||||
z-index: 3;
|
||||
}
|
||||
.clock__minute {
|
||||
height: 80px;
|
||||
margin-top: 20px;
|
||||
opacity: 0.75;
|
||||
-webkit-animation: time 3600s linear infinite;
|
||||
animation: time 3600s linear infinite;
|
||||
}
|
||||
.clock__hour {
|
||||
height: 60px;
|
||||
margin-top: 40px;
|
||||
-webkit-animation: time 43200s linear infinite;
|
||||
animation: time 43200s linear infinite;
|
||||
}
|
||||
.clock__indicator {
|
||||
height: 98px;
|
||||
border-top: 2px solid #4b9aaa;
|
||||
background: none;
|
||||
}
|
||||
.clock__indicator:nth-of-type(5n) {
|
||||
opacity: 1;
|
||||
height: 93px;
|
||||
border-top: 7px solid #f4eed7;
|
||||
}
|
||||
.clock__axis {
|
||||
background: #4b9aaa;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 3px;
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
top: 97px;
|
||||
}
|
||||
|
||||
section:nth-of-type(1) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 1));
|
||||
transform: rotateZ(calc(6deg * 1));
|
||||
}
|
||||
|
||||
section:nth-of-type(2) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 2));
|
||||
transform: rotateZ(calc(6deg * 2));
|
||||
}
|
||||
|
||||
section:nth-of-type(3) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 3));
|
||||
transform: rotateZ(calc(6deg * 3));
|
||||
}
|
||||
|
||||
section:nth-of-type(4) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 4));
|
||||
transform: rotateZ(calc(6deg * 4));
|
||||
}
|
||||
|
||||
section:nth-of-type(5) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 5));
|
||||
transform: rotateZ(calc(6deg * 5));
|
||||
}
|
||||
|
||||
section:nth-of-type(6) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 6));
|
||||
transform: rotateZ(calc(6deg * 6));
|
||||
}
|
||||
|
||||
section:nth-of-type(7) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 7));
|
||||
transform: rotateZ(calc(6deg * 7));
|
||||
}
|
||||
|
||||
section:nth-of-type(8) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 8));
|
||||
transform: rotateZ(calc(6deg * 8));
|
||||
}
|
||||
|
||||
section:nth-of-type(9) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 9));
|
||||
transform: rotateZ(calc(6deg * 9));
|
||||
}
|
||||
|
||||
section:nth-of-type(10) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 10));
|
||||
transform: rotateZ(calc(6deg * 10));
|
||||
}
|
||||
|
||||
section:nth-of-type(11) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 11));
|
||||
transform: rotateZ(calc(6deg * 11));
|
||||
}
|
||||
|
||||
section:nth-of-type(12) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 12));
|
||||
transform: rotateZ(calc(6deg * 12));
|
||||
}
|
||||
|
||||
section:nth-of-type(13) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 13));
|
||||
transform: rotateZ(calc(6deg * 13));
|
||||
}
|
||||
|
||||
section:nth-of-type(14) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 14));
|
||||
transform: rotateZ(calc(6deg * 14));
|
||||
}
|
||||
|
||||
section:nth-of-type(15) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 15));
|
||||
transform: rotateZ(calc(6deg * 15));
|
||||
}
|
||||
|
||||
section:nth-of-type(16) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 16));
|
||||
transform: rotateZ(calc(6deg * 16));
|
||||
}
|
||||
|
||||
section:nth-of-type(17) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 17));
|
||||
transform: rotateZ(calc(6deg * 17));
|
||||
}
|
||||
|
||||
section:nth-of-type(18) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 18));
|
||||
transform: rotateZ(calc(6deg * 18));
|
||||
}
|
||||
|
||||
section:nth-of-type(19) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 19));
|
||||
transform: rotateZ(calc(6deg * 19));
|
||||
}
|
||||
|
||||
section:nth-of-type(20) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 20));
|
||||
transform: rotateZ(calc(6deg * 20));
|
||||
}
|
||||
|
||||
section:nth-of-type(21) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 21));
|
||||
transform: rotateZ(calc(6deg * 21));
|
||||
}
|
||||
|
||||
section:nth-of-type(22) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 22));
|
||||
transform: rotateZ(calc(6deg * 22));
|
||||
}
|
||||
|
||||
section:nth-of-type(23) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 23));
|
||||
transform: rotateZ(calc(6deg * 23));
|
||||
}
|
||||
|
||||
section:nth-of-type(24) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 24));
|
||||
transform: rotateZ(calc(6deg * 24));
|
||||
}
|
||||
|
||||
section:nth-of-type(25) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 25));
|
||||
transform: rotateZ(calc(6deg * 25));
|
||||
}
|
||||
|
||||
section:nth-of-type(26) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 26));
|
||||
transform: rotateZ(calc(6deg * 26));
|
||||
}
|
||||
|
||||
section:nth-of-type(27) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 27));
|
||||
transform: rotateZ(calc(6deg * 27));
|
||||
}
|
||||
|
||||
section:nth-of-type(28) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 28));
|
||||
transform: rotateZ(calc(6deg * 28));
|
||||
}
|
||||
|
||||
section:nth-of-type(29) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 29));
|
||||
transform: rotateZ(calc(6deg * 29));
|
||||
}
|
||||
|
||||
section:nth-of-type(30) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 30));
|
||||
transform: rotateZ(calc(6deg * 30));
|
||||
}
|
||||
|
||||
section:nth-of-type(31) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 31));
|
||||
transform: rotateZ(calc(6deg * 31));
|
||||
}
|
||||
|
||||
section:nth-of-type(32) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 32));
|
||||
transform: rotateZ(calc(6deg * 32));
|
||||
}
|
||||
|
||||
section:nth-of-type(33) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 33));
|
||||
transform: rotateZ(calc(6deg * 33));
|
||||
}
|
||||
|
||||
section:nth-of-type(34) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 34));
|
||||
transform: rotateZ(calc(6deg * 34));
|
||||
}
|
||||
|
||||
section:nth-of-type(35) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 35));
|
||||
transform: rotateZ(calc(6deg * 35));
|
||||
}
|
||||
|
||||
section:nth-of-type(36) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 36));
|
||||
transform: rotateZ(calc(6deg * 36));
|
||||
}
|
||||
|
||||
section:nth-of-type(37) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 37));
|
||||
transform: rotateZ(calc(6deg * 37));
|
||||
}
|
||||
|
||||
section:nth-of-type(38) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 38));
|
||||
transform: rotateZ(calc(6deg * 38));
|
||||
}
|
||||
|
||||
section:nth-of-type(39) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 39));
|
||||
transform: rotateZ(calc(6deg * 39));
|
||||
}
|
||||
|
||||
section:nth-of-type(40) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 40));
|
||||
transform: rotateZ(calc(6deg * 40));
|
||||
}
|
||||
|
||||
section:nth-of-type(41) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 41));
|
||||
transform: rotateZ(calc(6deg * 41));
|
||||
}
|
||||
|
||||
section:nth-of-type(42) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 42));
|
||||
transform: rotateZ(calc(6deg * 42));
|
||||
}
|
||||
|
||||
section:nth-of-type(43) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 43));
|
||||
transform: rotateZ(calc(6deg * 43));
|
||||
}
|
||||
|
||||
section:nth-of-type(44) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 44));
|
||||
transform: rotateZ(calc(6deg * 44));
|
||||
}
|
||||
|
||||
section:nth-of-type(45) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 45));
|
||||
transform: rotateZ(calc(6deg * 45));
|
||||
}
|
||||
|
||||
section:nth-of-type(46) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 46));
|
||||
transform: rotateZ(calc(6deg * 46));
|
||||
}
|
||||
|
||||
section:nth-of-type(47) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 47));
|
||||
transform: rotateZ(calc(6deg * 47));
|
||||
}
|
||||
|
||||
section:nth-of-type(48) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 48));
|
||||
transform: rotateZ(calc(6deg * 48));
|
||||
}
|
||||
|
||||
section:nth-of-type(49) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 49));
|
||||
transform: rotateZ(calc(6deg * 49));
|
||||
}
|
||||
|
||||
section:nth-of-type(50) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 50));
|
||||
transform: rotateZ(calc(6deg * 50));
|
||||
}
|
||||
|
||||
section:nth-of-type(51) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 51));
|
||||
transform: rotateZ(calc(6deg * 51));
|
||||
}
|
||||
|
||||
section:nth-of-type(52) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 52));
|
||||
transform: rotateZ(calc(6deg * 52));
|
||||
}
|
||||
|
||||
section:nth-of-type(53) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 53));
|
||||
transform: rotateZ(calc(6deg * 53));
|
||||
}
|
||||
|
||||
section:nth-of-type(54) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 54));
|
||||
transform: rotateZ(calc(6deg * 54));
|
||||
}
|
||||
|
||||
section:nth-of-type(55) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 55));
|
||||
transform: rotateZ(calc(6deg * 55));
|
||||
}
|
||||
|
||||
section:nth-of-type(56) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 56));
|
||||
transform: rotateZ(calc(6deg * 56));
|
||||
}
|
||||
|
||||
section:nth-of-type(57) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 57));
|
||||
transform: rotateZ(calc(6deg * 57));
|
||||
}
|
||||
|
||||
section:nth-of-type(58) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 58));
|
||||
transform: rotateZ(calc(6deg * 58));
|
||||
}
|
||||
|
||||
section:nth-of-type(59) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 59));
|
||||
transform: rotateZ(calc(6deg * 59));
|
||||
}
|
||||
|
||||
section:nth-of-type(60) {
|
||||
-webkit-transform: rotateZ(calc(6deg * 60));
|
||||
transform: rotateZ(calc(6deg * 60));
|
||||
}
|
||||
|
||||
@-webkit-keyframes time {
|
||||
to {
|
||||
-webkit-transform: rotateZ(360deg);
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes time {
|
||||
to {
|
||||
-webkit-transform: rotateZ(360deg);
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
# CSS - Frosted Glass
|
||||
|
||||
|
||||
@ -0,0 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS - Frosted Glass</title>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="drop-shadow">
|
||||
<div class="glass"></div>
|
||||
<span>GLASS</span>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,85 @@
|
||||
@import url("https://fonts.googleapis.com/css?family=Rajdhani:300&display=swap");
|
||||
body, html {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-image: url("https://www.romankoenigshofer.com/wp-content/uploads/2017/06/%C2%A9RomanKoenigshofer_Travel_Alberta_campaign_DSC01496.jpg");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
font-family: 'Rajdhani', sans-serif;
|
||||
}
|
||||
|
||||
*, *:before, *:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.glass {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-image: url("https://www.romankoenigshofer.com/wp-content/uploads/2017/06/%C2%A9RomanKoenigshofer_Travel_Alberta_campaign_DSC01496.jpg");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
-webkit-clip-path: inset(10em);
|
||||
clip-path: inset(10em);
|
||||
-webkit-filter: blur(20px);
|
||||
filter: blur(20px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.drop-shadow {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
-webkit-filter: drop-shadow(0px 20px 10px rgba(0, 0, 0, 0.3));
|
||||
filter: drop-shadow(0px 20px 10px rgba(0, 0, 0, 0.3));
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.drop-shadow:before {
|
||||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 10em;
|
||||
height: calc(100% - 20em);
|
||||
width: calc(100% - 20em);
|
||||
border-top: 2px solid rgba(225, 225, 225, 0.2);
|
||||
border-left: 1px solid rgba(225, 225, 225, 0.1);
|
||||
border-right: 1px solid rgba(225, 225, 225, 0.3);
|
||||
z-index: 2;
|
||||
}
|
||||
.drop-shadow > span {
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
color: white;
|
||||
font-size: 4em;
|
||||
letter-spacing: 0.75em;
|
||||
padding-left: 0.375em;
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.glass {
|
||||
-webkit-clip-path: inset(5em);
|
||||
clip-path: inset(5em);
|
||||
}
|
||||
|
||||
.drop-shadow:before {
|
||||
top: 5em;
|
||||
width: calc(100% - 10em);
|
||||
}
|
||||
.drop-shadow > span {
|
||||
font-size: 4em;
|
||||
}
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.drop-shadow > span {
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
# Neon Glow CSS
|
||||
|
||||
Designed for use with Chrome. Hover them :)
|
||||
@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Neon Glow</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Audiowide|Iceland|Monoton|Pacifico|Press+Start+2P|Vampiro+One' rel='stylesheet' type='text/css'><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!-- partial:index.partial.html -->
|
||||
<div id="container">
|
||||
|
||||
<p><a href="https://en.wikipedia.org/wiki/Red">
|
||||
RED
|
||||
</a></p>
|
||||
|
||||
<p><a href="https://en.wikipedia.org/wiki/Blue">
|
||||
BLUE
|
||||
</a></p>
|
||||
|
||||
<p><a href="https://en.wikipedia.org/wiki/Yellow">
|
||||
Yellow
|
||||
</a></p>
|
||||
|
||||
<p><a href="https://en.wikipedia.org/wiki/Green">
|
||||
GREEN
|
||||
</a></p>
|
||||
|
||||
<p><a href="https://en.wikipedia.org/wiki/Orange_(colour)">
|
||||
ORANGE
|
||||
</a></p>
|
||||
|
||||
<p><a href="https://en.wikipedia.org/wiki/Violet_(color)">
|
||||
VIOLET
|
||||
</a></p>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,211 @@
|
||||
body {
|
||||
background-color: #222222;
|
||||
background: repeating-linear-gradient(45deg, #2b2b2b 0%, #2b2b2b 10%, #222222 0%, #222222 50%) 0 / 15px 15px;
|
||||
}
|
||||
|
||||
#container {
|
||||
width: 500px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
/*Neon*/
|
||||
p {
|
||||
text-align: center;
|
||||
font-size: 7em;
|
||||
margin: 20px 0 20px 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
p:nth-child(1) a {
|
||||
color: #fff;
|
||||
font-family: Monoton;
|
||||
-webkit-animation: neon1 1.5s ease-in-out infinite alternate;
|
||||
animation: neon1 1.5s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
p:nth-child(1) a:hover {
|
||||
color: #FF1177;
|
||||
-webkit-animation: none;
|
||||
animation: none;
|
||||
}
|
||||
|
||||
p:nth-child(2) a {
|
||||
font-size: 1.5em;
|
||||
color: #228DFF;
|
||||
font-family: Iceland;
|
||||
}
|
||||
|
||||
p:nth-child(2) a:hover {
|
||||
-webkit-animation: neon2 1.5s ease-in-out infinite alternate;
|
||||
animation: neon2 1.5s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
p:nth-child(3) a {
|
||||
color: #FFDD1B;
|
||||
font-family: Pacifico;
|
||||
}
|
||||
|
||||
p:nth-child(3) a:hover {
|
||||
-webkit-animation: neon3 1.5s ease-in-out infinite alternate;
|
||||
animation: neon3 1.5s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
p:nth-child(4) a {
|
||||
color: #B6FF00;
|
||||
font-family: "Press Start 2P";
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
p:nth-child(4) a:hover {
|
||||
-webkit-animation: neon4 1.5s ease-in-out infinite alternate;
|
||||
animation: neon4 1.5s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
p:nth-child(5) a {
|
||||
color: #FF9900;
|
||||
font-family: Audiowide;
|
||||
}
|
||||
|
||||
p:nth-child(5) a:hover {
|
||||
-webkit-animation: neon5 1.5s ease-in-out infinite alternate;
|
||||
animation: neon5 1.5s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
p:nth-child(6) a {
|
||||
color: #BA01FF;
|
||||
font-family: Vampiro One;
|
||||
}
|
||||
|
||||
p:nth-child(6) a:hover {
|
||||
-webkit-animation: neon6 1.5s ease-in-out infinite alternate;
|
||||
animation: neon6 1.5s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
p a:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
/*glow for webkit*/
|
||||
|
||||
@-webkit-keyframes neon1 {
|
||||
from {
|
||||
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177;
|
||||
}
|
||||
to {
|
||||
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes neon2 {
|
||||
from {
|
||||
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
|
||||
}
|
||||
to {
|
||||
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes neon3 {
|
||||
from {
|
||||
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B;
|
||||
}
|
||||
to {
|
||||
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes neon4 {
|
||||
from {
|
||||
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #B6FF00, 0 0 70px #B6FF00, 0 0 80px #B6FF00, 0 0 100px #B6FF00, 0 0 150px #B6FF00;
|
||||
}
|
||||
to {
|
||||
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #B6FF00, 0 0 35px #B6FF00, 0 0 40px #B6FF00, 0 0 50px #B6FF00, 0 0 75px #B6FF00;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes neon5 {
|
||||
from {
|
||||
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF9900, 0 0 70px #FF9900, 0 0 80px #FF9900, 0 0 100px #FF9900, 0 0 150px #FF9900;
|
||||
}
|
||||
to {
|
||||
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF9900, 0 0 35px #FF9900, 0 0 40px #FF9900, 0 0 50px #FF9900, 0 0 75px #FF9900;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes neon6 {
|
||||
from {
|
||||
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
|
||||
}
|
||||
to {
|
||||
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de;
|
||||
}
|
||||
}
|
||||
/*glow for mozilla*/
|
||||
/*glow*/
|
||||
|
||||
@keyframes neon1 {
|
||||
from {
|
||||
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177;
|
||||
}
|
||||
to {
|
||||
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes neon2 {
|
||||
from {
|
||||
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #228DFF, 0 0 70px #228DFF, 0 0 80px #228DFF, 0 0 100px #228DFF, 0 0 150px #228DFF;
|
||||
}
|
||||
to {
|
||||
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 40px #228DFF, 0 0 50px #228DFF, 0 0 75px #228DFF;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes neon3 {
|
||||
from {
|
||||
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B;
|
||||
}
|
||||
to {
|
||||
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes neon4 {
|
||||
from {
|
||||
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #B6FF00, 0 0 70px #B6FF00, 0 0 80px #B6FF00, 0 0 100px #B6FF00, 0 0 150px #B6FF00;
|
||||
}
|
||||
to {
|
||||
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #B6FF00, 0 0 35px #B6FF00, 0 0 40px #B6FF00, 0 0 50px #B6FF00, 0 0 75px #B6FF00;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes neon5 {
|
||||
from {
|
||||
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF9900, 0 0 70px #FF9900, 0 0 80px #FF9900, 0 0 100px #FF9900, 0 0 150px #FF9900;
|
||||
}
|
||||
to {
|
||||
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF9900, 0 0 35px #FF9900, 0 0 40px #FF9900, 0 0 50px #FF9900, 0 0 75px #FF9900;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes neon6 {
|
||||
from {
|
||||
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
|
||||
}
|
||||
to {
|
||||
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de;
|
||||
}
|
||||
}
|
||||
/*REEEEEEEEEEESPONSIVE*/
|
||||
|
||||
@media (max-width: 650px) {
|
||||
#container {
|
||||
width: 100%;
|
||||
}
|
||||
p {
|
||||
font-size: 3.5em;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
# Easy Dark Mode
|
||||
|
||||
|
||||
@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Easy Dark Mode</title>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<h1>Light / Dark Mode</h1>
|
||||
|
||||
<input class="container_toggle" type="checkbox" id="switch" name="mode">
|
||||
<label for="switch">Toggle</label>
|
||||
</div>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,18 @@
|
||||
var checkbox = document.querySelector('input[name=mode]');
|
||||
|
||||
checkbox.addEventListener('change', function() {
|
||||
if(this.checked) {
|
||||
trans()
|
||||
document.documentElement.setAttribute('data-theme', 'dark')
|
||||
} else {
|
||||
trans()
|
||||
document.documentElement.setAttribute('data-theme', 'light')
|
||||
}
|
||||
})
|
||||
|
||||
let trans = () => {
|
||||
document.documentElement.classList.add('transition');
|
||||
window.setTimeout(() => {
|
||||
document.documentElement.classList.remove('transition');
|
||||
}, 1000)
|
||||
}
|
||||
@ -0,0 +1,107 @@
|
||||
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,900&display=swap");
|
||||
html {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: var(--lightBg);
|
||||
--lightBtn: #FE016C;
|
||||
--lightBg: #fff;
|
||||
--lightColor: #232323;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
background: var(--lightBg);
|
||||
--lightBtn: #FFBD07;
|
||||
--lightBg: #232323;
|
||||
--lightColor: #fff;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-weight: 300;
|
||||
color: var(--lightColor);
|
||||
}
|
||||
|
||||
input[type=checkbox] {
|
||||
height: 0;
|
||||
width: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
label {
|
||||
cursor: pointer;
|
||||
text-indent: -9999px;
|
||||
width: 55px;
|
||||
height: 30px;
|
||||
background: var(--lightBtn);
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
-webkit-border-radius: 100px;
|
||||
-moz-border-radius: 100px;
|
||||
border-radius: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
label:after {
|
||||
content: '';
|
||||
background: #fff;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
-webkit-border-radius: 50%;
|
||||
-moz-border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 4px;
|
||||
transition: cubic-bezier(0.68, -0.55, 0.27, 1.55) 320ms;
|
||||
}
|
||||
|
||||
input:checked + label {
|
||||
background: #FFBD07;
|
||||
}
|
||||
|
||||
input:checked + label:after {
|
||||
left: calc(100% - 5px);
|
||||
-webkit-transform: translateX(-100%);
|
||||
-moz-transform: translateX(-100%);
|
||||
-ms-transform: translateX(-100%);
|
||||
-o-transform: translateX(-100%);
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
html.transition,
|
||||
html.transition *,
|
||||
html.transition *:before,
|
||||
html.transition *:after {
|
||||
transition: cubic-bezier(0.68, -0.55, 0.27, 1.55) 420ms !important;
|
||||
transition-delay: 0 !important;
|
||||
}
|
||||
|
||||
/* ignore, but thank u */
|
||||
.thanku {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
background: var(--lightBg);
|
||||
border-top: 1px solid var(--lightBtn);
|
||||
}
|
||||
.thanku p {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.thanku p a {
|
||||
letter-spacing: 1px;
|
||||
font-size: 12px;
|
||||
color: var(--lightColor);
|
||||
text-align: center;
|
||||
font-family: 'Poppins';
|
||||
text-decoration: none;
|
||||
margin-left: 25px;
|
||||
margin-right: 25px;
|
||||
}
|
||||
@ -0,0 +1,2 @@
|
||||
# 404 - Error Page Collection
|
||||
|
||||
@ -0,0 +1 @@
|
||||
# 404 - Glitched out
|
||||
@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>404 - Glitched out</title>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="error">
|
||||
|
||||
<div class="wrap">
|
||||
<div class="404">
|
||||
<pre><code>
|
||||
<span class="green"><!</span><span>DOCTYPE html</span><span class="green">></span>
|
||||
<span class="orange"><html></span>
|
||||
<span class="orange"><style></span>
|
||||
* {
|
||||
<span class="green">everything</span>:<span class="blue">awesome</span>;
|
||||
}
|
||||
<span class="orange"></style></span>
|
||||
<span class="orange"><body></span>
|
||||
ERROR 404!
|
||||
FILE NOT FOUND!
|
||||
<span class="comment"><!--The file you are looking for,
|
||||
is not where you think it is.-->
|
||||
</span>
|
||||
<span class="orange"></span>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<br />
|
||||
<span class="info">
|
||||
<br />
|
||||
|
||||
<span class="orange"> </body></span>
|
||||
|
||||
<br/>
|
||||
<span class="orange"></html></span>
|
||||
</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</span>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,2 @@
|
||||
# 503 - Page is Offline (Bot)
|
||||
|
||||
@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>blg_bot_message:</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
|
||||
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Lato:300,700'><link rel="stylesheet" href="./style.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="eve">
|
||||
<div class="head">
|
||||
<div class="face"></div>
|
||||
<div class="eyemask"></div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="headshadow"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="shadow"></div>
|
||||
<div class="click">
|
||||
<h1>Error</h1>
|
||||
<p>This page is offline.</p>
|
||||
</div>
|
||||
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,320 @@
|
||||
body {
|
||||
background: #808080;
|
||||
font-family: Lato;
|
||||
}
|
||||
.click {
|
||||
position: absolute;
|
||||
width: 120px;
|
||||
left: 50%;
|
||||
top: 50px;
|
||||
color: #000;
|
||||
text-transform: uppercase;
|
||||
margin-left: -220px;
|
||||
line-height: 1.3em;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.click h1 {
|
||||
font-weight: 700;
|
||||
font-size: 3em;
|
||||
color: #fff;
|
||||
text-shadow: 1px 1px #333;
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
.eve {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
width: 70px;
|
||||
margin-left: -35px;
|
||||
cursor: default;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-animation-name: hover;
|
||||
-moz-animation-name: hover;
|
||||
animation-name: hover;
|
||||
-webkit-animation-duration: 1s;
|
||||
-moz-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
.eve .body,
|
||||
.eve .head {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
.eve .body {
|
||||
bottom: 0;
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
height: 105px;
|
||||
z-index: 1;
|
||||
-webkit-border-radius: 50% 50% 50% 50%/20% 20% 70% 70%;
|
||||
-moz-border-radius: 50% 50% 50% 50%/20% 20% 70% 70%;
|
||||
border-radius: 50% 50% 50% 50%/20% 20% 70% 70%;
|
||||
-webkit-box-shadow: inset -1px 0 1px 1px rgba(255,255,255,0.5), inset -3px -3px 15px 1px rgba(0,0,0,0.2);
|
||||
-moz-box-shadow: inset -1px 0 1px 1px rgba(255,255,255,0.5), inset -3px -3px 15px 1px rgba(0,0,0,0.2);
|
||||
box-shadow: inset -1px 0 1px 1px rgba(255,255,255,0.5), inset -3px -3px 15px 1px rgba(0,0,0,0.2);
|
||||
}
|
||||
.eve .body:before,
|
||||
.eve .body:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 63px;
|
||||
background-color: #fff;
|
||||
width: 18%;
|
||||
top: 15%;
|
||||
z-index: 9;
|
||||
}
|
||||
.eve .body:before {
|
||||
left: -8%;
|
||||
-webkit-border-radius: 100% 0 32% 69%/20% 20% 70% 70%;
|
||||
-moz-border-radius: 100% 0 32% 69%/20% 20% 70% 70%;
|
||||
border-radius: 100% 0 32% 69%/20% 20% 70% 70%;
|
||||
-webkit-transform: rotate(-4deg);
|
||||
-moz-transform: rotate(-4deg);
|
||||
transform: rotate(-4deg);
|
||||
-webkit-box-shadow: inset 3px 0 5px 1px rgba(0,0,0,0.2);
|
||||
-moz-box-shadow: inset 3px 0 5px 1px rgba(0,0,0,0.2);
|
||||
box-shadow: inset 3px 0 5px 1px rgba(0,0,0,0.2);
|
||||
}
|
||||
.eve .body:after {
|
||||
right: -8%;
|
||||
-webkit-border-radius: 32% 69% 100% 0/20% 20% 70% 70%;
|
||||
-moz-border-radius: 32% 69% 100% 0/20% 20% 70% 70%;
|
||||
border-radius: 32% 69% 100% 0/20% 20% 70% 70%;
|
||||
-webkit-transform: rotate(4deg);
|
||||
-moz-transform: rotate(4deg);
|
||||
transform: rotate(4deg);
|
||||
-webkit-box-shadow: inset -3px 0 5px 1px rgba(0,0,0,0.2);
|
||||
-moz-box-shadow: inset -3px 0 5px 1px rgba(0,0,0,0.2);
|
||||
box-shadow: inset -3px 0 5px 1px rgba(0,0,0,0.2);
|
||||
}
|
||||
.eve .body .headshadow {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 6%;
|
||||
height: 21px;
|
||||
left: 50%;
|
||||
margin-left: -50%;
|
||||
background-color: #fff;
|
||||
-moz-border-radius: 100%;
|
||||
-webkit-border-radius: 100%;
|
||||
border-radius: 100%;
|
||||
border-bottom: 1px solid #fff;
|
||||
-webkit-box-shadow: inset 0 0 1px 1px rgba(255,255,255,0.5), inset 0 5px 10px 3px #bbb, 0 1px 0px 1px rgba(255,255,255,0.7);
|
||||
-moz-box-shadow: inset 0 0 1px 1px rgba(255,255,255,0.5), inset 0 5px 10px 3px #bbb, 0 1px 0px 1px rgba(255,255,255,0.7);
|
||||
box-shadow: inset 0 0 1px 1px rgba(255,255,255,0.5), inset 0 5px 10px 3px #bbb, 0 1px 0px 1px rgba(255,255,255,0.7);
|
||||
}
|
||||
.eve .head {
|
||||
bottom: 88px;
|
||||
height: 49px;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
-webkit-border-radius: 50% 50% 50% 50%/70% 70% 25% 25%;
|
||||
-moz-border-radius: 50% 50% 50% 50%/70% 70% 25% 25%;
|
||||
border-radius: 50% 50% 50% 50%/70% 70% 25% 25%;
|
||||
-webkit-box-shadow: inset -1px 0 1px 1px rgba(255,255,255,0.5), inset -2px -3px 15px 1px rgba(0,0,0,0.2);
|
||||
-moz-box-shadow: inset -1px 0 1px 1px rgba(255,255,255,0.5), inset -2px -3px 15px 1px rgba(0,0,0,0.2);
|
||||
box-shadow: inset -1px 0 1px 1px rgba(255,255,255,0.5), inset -2px -3px 15px 1px rgba(0,0,0,0.2);
|
||||
}
|
||||
.eve .head .face {
|
||||
position: absolute;
|
||||
bottom: 16%;
|
||||
left: 50%;
|
||||
margin-left: -35%;
|
||||
width: 70%;
|
||||
height: 28px;
|
||||
background-color: #000;
|
||||
-webkit-border-radius: 50% 50% 50% 50%/70% 70% 40% 40%;
|
||||
-moz-border-radius: 50% 50% 50% 50%/70% 70% 40% 40%;
|
||||
border-radius: 50% 50% 50% 50%/70% 70% 40% 40%;
|
||||
}
|
||||
.eve .head .face:before,
|
||||
.eve .head .face:after {
|
||||
content: "";
|
||||
background-color: #137abd;
|
||||
-webkit-border-radius: 100%;
|
||||
-moz-border-radius: 100%;
|
||||
border-radius: 100%;
|
||||
width: 12.6px;
|
||||
height: 9.1px;
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
-webkit-background-image: repeating-linear-gradient(180deg, #137abd, #137abd 0%, #093b5a 2%);
|
||||
-moz-background-image: repeating-linear-gradient(180deg, #137abd, #137abd 0%, #093b5a 2%);
|
||||
background-image: repeating-linear-gradient(180deg, #137abd, #137abd 0%, #093b5a 2%);
|
||||
-webkit-box-shadow: 0 0 4px 1px #1b97e8;
|
||||
-moz-box-shadow: 0 0 4px 1px #1b97e8;
|
||||
box-shadow: 0 0 4px 1px #1b97e8;
|
||||
}
|
||||
.eve .head .face:before {
|
||||
left: 18%;
|
||||
}
|
||||
.eve .head .face:after {
|
||||
right: 18%;
|
||||
}
|
||||
.eve .head .eyemask {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
bottom: 16%;
|
||||
left: 50%;
|
||||
margin-left: -35%;
|
||||
width: 70%;
|
||||
height: 28px;
|
||||
}
|
||||
.eve .head .eyemask:before,
|
||||
.eve .head .eyemask:after {
|
||||
content: "";
|
||||
background-color: #000;
|
||||
-webkit-border-radius: 100%;
|
||||
-moz-border-radius: 100%;
|
||||
border-radius: 100%;
|
||||
width: 17.639999999999997px;
|
||||
height: 9.8px;
|
||||
position: absolute;
|
||||
top: 51%;
|
||||
}
|
||||
.eve .head .eyemask:before {
|
||||
left: 15%;
|
||||
}
|
||||
.eve .head .eyemask:after {
|
||||
right: 15%;
|
||||
}
|
||||
.eve:active .eyemask {
|
||||
opacity: 1;
|
||||
}
|
||||
.shadow {
|
||||
position: absolute;
|
||||
width: 70px;
|
||||
height: 20px;
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
left: 50%;
|
||||
margin-left: -35px;
|
||||
top: 210px;
|
||||
border-radius: 100%;
|
||||
-webkit-animation-name: shadow;
|
||||
-moz-animation-name: shadow;
|
||||
animation-name: shadow;
|
||||
-webkit-animation-duration: 1s;
|
||||
-moz-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
@-moz-keyframes hover {
|
||||
0% {
|
||||
top: 200px;
|
||||
}
|
||||
50% {
|
||||
top: 190px;
|
||||
}
|
||||
100% {
|
||||
top: 200px;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes hover {
|
||||
0% {
|
||||
top: 200px;
|
||||
}
|
||||
50% {
|
||||
top: 190px;
|
||||
}
|
||||
100% {
|
||||
top: 200px;
|
||||
}
|
||||
}
|
||||
@-o-keyframes hover {
|
||||
0% {
|
||||
top: 200px;
|
||||
}
|
||||
50% {
|
||||
top: 190px;
|
||||
}
|
||||
100% {
|
||||
top: 200px;
|
||||
}
|
||||
}
|
||||
@keyframes hover {
|
||||
0% {
|
||||
top: 200px;
|
||||
}
|
||||
50% {
|
||||
top: 190px;
|
||||
}
|
||||
100% {
|
||||
top: 200px;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes shadow {
|
||||
0% {
|
||||
-webkit-filter: blur(5px);
|
||||
-moz-filter: blur(5px);
|
||||
filter: blur(5px);
|
||||
}
|
||||
50% {
|
||||
-webkit-filter: blur(10px);
|
||||
-moz-filter: blur(10px);
|
||||
filter: blur(10px);
|
||||
}
|
||||
100% {
|
||||
-webkit-filter: blur(5px);
|
||||
-moz-filter: blur(5px);
|
||||
filter: blur(5px);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes shadow {
|
||||
0% {
|
||||
-webkit-filter: blur(5px);
|
||||
-moz-filter: blur(5px);
|
||||
filter: blur(5px);
|
||||
}
|
||||
50% {
|
||||
-webkit-filter: blur(10px);
|
||||
-moz-filter: blur(10px);
|
||||
filter: blur(10px);
|
||||
}
|
||||
100% {
|
||||
-webkit-filter: blur(5px);
|
||||
-moz-filter: blur(5px);
|
||||
filter: blur(5px);
|
||||
}
|
||||
}
|
||||
@-o-keyframes shadow {
|
||||
0% {
|
||||
-webkit-filter: blur(5px);
|
||||
-moz-filter: blur(5px);
|
||||
filter: blur(5px);
|
||||
}
|
||||
50% {
|
||||
-webkit-filter: blur(10px);
|
||||
-moz-filter: blur(10px);
|
||||
filter: blur(10px);
|
||||
}
|
||||
100% {
|
||||
-webkit-filter: blur(5px);
|
||||
-moz-filter: blur(5px);
|
||||
filter: blur(5px);
|
||||
}
|
||||
}
|
||||
@keyframes shadow {
|
||||
0% {
|
||||
-webkit-filter: blur(5px);
|
||||
-moz-filter: blur(5px);
|
||||
filter: blur(5px);
|
||||
}
|
||||
50% {
|
||||
-webkit-filter: blur(10px);
|
||||
-moz-filter: blur(10px);
|
||||
filter: blur(10px);
|
||||
}
|
||||
100% {
|
||||
-webkit-filter: blur(5px);
|
||||
-moz-filter: blur(5px);
|
||||
filter: blur(5px);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,2 @@
|
||||
# Loading Icons Collection
|
||||
|
||||
@ -0,0 +1,2 @@
|
||||
# Atom Loading Icon
|
||||
|
||||
@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Atom Loading Icon</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="loading">
|
||||
<div class="loading__ring">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><path d="M85.5,42c-0.2-0.8-0.5-1.7-0.8-2.5c-0.3-0.9-0.7-1.6-1-2.3c-0.3-0.7-0.6-1.3-1-1.9c0.3,0.5,0.5,1.1,0.8,1.7 c0.2,0.7,0.6,1.5,0.8,2.3s0.5,1.7,0.8,2.5c0.8,3.5,1.3,7.5,0.8,12c-0.4,4.3-1.8,9-4.2,13.4c-2.4,4.2-5.9,8.2-10.5,11.2 c-1.1,0.7-2.2,1.5-3.4,2c-0.5,0.2-1.2,0.6-1.8,0.8s-1.3,0.5-1.9,0.8c-2.6,1-5.3,1.7-8.1,1.8l-1.1,0.1L53.8,84c-0.7,0-1.4,0-2.1,0 c-1.4-0.1-2.9-0.1-4.2-0.5c-1.4-0.1-2.8-0.6-4.1-0.8c-1.4-0.5-2.7-0.9-3.9-1.5c-1.2-0.6-2.4-1.2-3.7-1.9c-0.6-0.3-1.2-0.7-1.7-1.1 l-0.8-0.6c-0.3-0.1-0.6-0.4-0.8-0.6l-0.8-0.6L31.3,76l-0.2-0.2L31,75.7l-0.1-0.1l0,0l-1.5-1.5c-1.2-1-1.9-2.1-2.7-3.1 c-0.4-0.4-0.7-1.1-1.1-1.7l-1.1-1.7c-0.3-0.6-0.6-1.2-0.9-1.8c-0.2-0.5-0.6-1.2-0.8-1.8c-0.4-1.2-1-2.4-1.2-3.7 c-0.2-0.6-0.4-1.2-0.5-1.9c-0.1-0.6-0.2-1.2-0.3-1.8c-0.3-1.2-0.3-2.4-0.4-3.7c-0.1-1.2,0-2.5,0.1-3.7c0.2-1.2,0.3-2.4,0.6-3.5 c0.1-0.6,0.3-1.1,0.4-1.7l0.1-0.8l0.3-0.8c1.5-4.3,3.8-8,6.5-11c0.8-0.8,1.4-1.5,2.1-2.1c0.9-0.9,1.4-1.3,2.2-1.8 c1.4-1.2,2.9-2,4.3-2.8c2.8-1.5,5.5-2.3,7.7-2.8s4-0.7,5.2-0.6c0.6-0.1,1.1,0,1.4,0s0.4,0,0.4,0h0.1c2.7,0.1,5-2.2,5-5 c0.1-2.7-2.2-5-5-5c-0.2,0-0.2,0-0.3,0c0,0-0.2,0.1-0.6,0.1c-0.4,0-1,0-1.8,0.1c-1.6,0.1-4,0.4-6.9,1.2c-2.9,0.8-6.4,2-9.9,4.1 c-1.8,1-3.6,2.3-5.4,3.8C26,21.4,25,22.2,24.4,23c-0.2,0.2-0.4,0.4-0.6,0.6c-0.2,0.2-0.5,0.4-0.6,0.7c-0.5,0.4-0.8,0.9-1.3,1.4 c-3.2,3.9-5.9,8.8-7.5,14.3l-0.3,1l-0.2,1.1c-0.1,0.7-0.3,1.4-0.4,2.1c-0.3,1.5-0.4,2.9-0.5,4.5c0,1.5-0.1,3,0.1,4.5 c0.2,1.5,0.2,3,0.6,4.6c0.1,0.7,0.3,1.5,0.4,2.3c0.2,0.8,0.5,1.5,0.7,2.3c0.4,1.6,1.1,3,1.7,4.4c0.3,0.7,0.7,1.4,1.1,2.1 c0.4,0.8,0.8,1.4,1.2,2.1c0.5,0.7,0.9,1.4,1.4,2s0.9,1.3,1.5,1.9c1.1,1.3,2.2,2.7,3.3,3.5l1.7,1.6c0,0,0.1,0.1,0.1,0.1c0,0,0,0,0,0 c0,0,0,0,0,0l0.1,0.1l0.1,0.1h0.2l0.5,0.4l1,0.7c0.4,0.2,0.6,0.5,1,0.7l1.1,0.6c0.8,0.4,1.4,0.9,2.1,1.2c1.4,0.7,2.9,1.5,4.4,2 c1.5,0.7,3.1,1,4.6,1.5c1.5,0.3,3.1,0.7,4.7,0.8c1.6,0.2,3.1,0.2,4.7,0.2c0.8,0,1.6-0.1,2.4-0.1l1.2-0.1l1.1-0.1 c3.1-0.4,6.1-1.3,8.9-2.4c0.8-0.3,1.4-0.6,2.1-0.9s1.3-0.7,2-1.1c1.3-0.7,2.6-1.7,3.7-2.5c0.5-0.4,1-0.9,1.6-1.3l0.8-0.6l0.2-0.2 c0,0,0.1-0.1,0.1-0.1c0.1-0.1,0,0,0,0v0.1l0.1-0.1l0.4-0.4c0.5-0.5,1-1,1.5-1.5c0.3-0.3,0.5-0.5,0.8-0.8l0.7-0.8 c0.9-1.1,1.8-2.2,2.5-3.3c0.4-0.6,0.7-1.1,1.1-1.7c0.3-0.7,0.6-1.2,0.9-1.8c2.4-4.9,3.5-9.8,3.7-14.4C87.3,49.7,86.6,45.5,85.5,42z"></path></svg>
|
||||
</div>
|
||||
<div class="loading__ring">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><path d="M85.5,42c-0.2-0.8-0.5-1.7-0.8-2.5c-0.3-0.9-0.7-1.6-1-2.3c-0.3-0.7-0.6-1.3-1-1.9c0.3,0.5,0.5,1.1,0.8,1.7 c0.2,0.7,0.6,1.5,0.8,2.3s0.5,1.7,0.8,2.5c0.8,3.5,1.3,7.5,0.8,12c-0.4,4.3-1.8,9-4.2,13.4c-2.4,4.2-5.9,8.2-10.5,11.2 c-1.1,0.7-2.2,1.5-3.4,2c-0.5,0.2-1.2,0.6-1.8,0.8s-1.3,0.5-1.9,0.8c-2.6,1-5.3,1.7-8.1,1.8l-1.1,0.1L53.8,84c-0.7,0-1.4,0-2.1,0 c-1.4-0.1-2.9-0.1-4.2-0.5c-1.4-0.1-2.8-0.6-4.1-0.8c-1.4-0.5-2.7-0.9-3.9-1.5c-1.2-0.6-2.4-1.2-3.7-1.9c-0.6-0.3-1.2-0.7-1.7-1.1 l-0.8-0.6c-0.3-0.1-0.6-0.4-0.8-0.6l-0.8-0.6L31.3,76l-0.2-0.2L31,75.7l-0.1-0.1l0,0l-1.5-1.5c-1.2-1-1.9-2.1-2.7-3.1 c-0.4-0.4-0.7-1.1-1.1-1.7l-1.1-1.7c-0.3-0.6-0.6-1.2-0.9-1.8c-0.2-0.5-0.6-1.2-0.8-1.8c-0.4-1.2-1-2.4-1.2-3.7 c-0.2-0.6-0.4-1.2-0.5-1.9c-0.1-0.6-0.2-1.2-0.3-1.8c-0.3-1.2-0.3-2.4-0.4-3.7c-0.1-1.2,0-2.5,0.1-3.7c0.2-1.2,0.3-2.4,0.6-3.5 c0.1-0.6,0.3-1.1,0.4-1.7l0.1-0.8l0.3-0.8c1.5-4.3,3.8-8,6.5-11c0.8-0.8,1.4-1.5,2.1-2.1c0.9-0.9,1.4-1.3,2.2-1.8 c1.4-1.2,2.9-2,4.3-2.8c2.8-1.5,5.5-2.3,7.7-2.8s4-0.7,5.2-0.6c0.6-0.1,1.1,0,1.4,0s0.4,0,0.4,0h0.1c2.7,0.1,5-2.2,5-5 c0.1-2.7-2.2-5-5-5c-0.2,0-0.2,0-0.3,0c0,0-0.2,0.1-0.6,0.1c-0.4,0-1,0-1.8,0.1c-1.6,0.1-4,0.4-6.9,1.2c-2.9,0.8-6.4,2-9.9,4.1 c-1.8,1-3.6,2.3-5.4,3.8C26,21.4,25,22.2,24.4,23c-0.2,0.2-0.4,0.4-0.6,0.6c-0.2,0.2-0.5,0.4-0.6,0.7c-0.5,0.4-0.8,0.9-1.3,1.4 c-3.2,3.9-5.9,8.8-7.5,14.3l-0.3,1l-0.2,1.1c-0.1,0.7-0.3,1.4-0.4,2.1c-0.3,1.5-0.4,2.9-0.5,4.5c0,1.5-0.1,3,0.1,4.5 c0.2,1.5,0.2,3,0.6,4.6c0.1,0.7,0.3,1.5,0.4,2.3c0.2,0.8,0.5,1.5,0.7,2.3c0.4,1.6,1.1,3,1.7,4.4c0.3,0.7,0.7,1.4,1.1,2.1 c0.4,0.8,0.8,1.4,1.2,2.1c0.5,0.7,0.9,1.4,1.4,2s0.9,1.3,1.5,1.9c1.1,1.3,2.2,2.7,3.3,3.5l1.7,1.6c0,0,0.1,0.1,0.1,0.1c0,0,0,0,0,0 c0,0,0,0,0,0l0.1,0.1l0.1,0.1h0.2l0.5,0.4l1,0.7c0.4,0.2,0.6,0.5,1,0.7l1.1,0.6c0.8,0.4,1.4,0.9,2.1,1.2c1.4,0.7,2.9,1.5,4.4,2 c1.5,0.7,3.1,1,4.6,1.5c1.5,0.3,3.1,0.7,4.7,0.8c1.6,0.2,3.1,0.2,4.7,0.2c0.8,0,1.6-0.1,2.4-0.1l1.2-0.1l1.1-0.1 c3.1-0.4,6.1-1.3,8.9-2.4c0.8-0.3,1.4-0.6,2.1-0.9s1.3-0.7,2-1.1c1.3-0.7,2.6-1.7,3.7-2.5c0.5-0.4,1-0.9,1.6-1.3l0.8-0.6l0.2-0.2 c0,0,0.1-0.1,0.1-0.1c0.1-0.1,0,0,0,0v0.1l0.1-0.1l0.4-0.4c0.5-0.5,1-1,1.5-1.5c0.3-0.3,0.5-0.5,0.8-0.8l0.7-0.8 c0.9-1.1,1.8-2.2,2.5-3.3c0.4-0.6,0.7-1.1,1.1-1.7c0.3-0.7,0.6-1.2,0.9-1.8c2.4-4.9,3.5-9.8,3.7-14.4C87.3,49.7,86.6,45.5,85.5,42z"></path></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,50 @@
|
||||
/* Demo */
|
||||
body {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(#ecf0f1, #fff);
|
||||
}
|
||||
|
||||
/* Animation */
|
||||
@-webkit-keyframes rotate {
|
||||
to {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes rotate {
|
||||
to {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
/* Variables */
|
||||
/* Loading Icon */
|
||||
.loading {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.loading__ring {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.loading__ring:first-child {
|
||||
-webkit-transform: skew(30deg, 20deg);
|
||||
transform: skew(30deg, 20deg);
|
||||
}
|
||||
.loading__ring:last-child {
|
||||
-webkit-transform: skew(-30deg, -20deg) scale(-1, 1);
|
||||
transform: skew(-30deg, -20deg) scale(-1, 1);
|
||||
}
|
||||
.loading__ring:last-child svg {
|
||||
-webkit-animation-delay: -0.5s;
|
||||
animation-delay: -0.5s;
|
||||
}
|
||||
.loading__ring svg {
|
||||
-webkit-animation: rotate 1s linear infinite;
|
||||
animation: rotate 1s linear infinite;
|
||||
fill: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
# Autonomous Arrows Icon
|
||||
|
||||
|
||||
@ -0,0 +1,80 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Autonomous Arrows</title>
|
||||
<link rel='stylesheet' href='https://pro.fontawesome.com/releases/v5.11.2/css/all.css'>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="circles">
|
||||
<div class="circle" style="--animation-delay:-1;">
|
||||
<div class="inner">
|
||||
<div class="dot fas fa-arrow-right"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="circle" style="--animation-delay:-2;">
|
||||
<div class="inner">
|
||||
<div class="dot fas fa-arrow-right"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="circle" style="--animation-delay:-3;">
|
||||
<div class="inner">
|
||||
<div class="dot fas fa-arrow-right"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="circle" style="--animation-delay:-4;">
|
||||
<div class="inner">
|
||||
<div class="dot fas fa-arrow-right"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="circle" style="--animation-delay:-5;">
|
||||
<div class="inner">
|
||||
<div class="dot fas fa-arrow-right"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="circle" style="--animation-delay:-6;">
|
||||
<div class="inner">
|
||||
<div class="dot fas fa-arrow-right"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="circle" style="--animation-delay:-7;">
|
||||
<div class="inner">
|
||||
<div class="dot fas fa-arrow-right"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="circle" style="--animation-delay:-8;">
|
||||
<div class="inner">
|
||||
<div class="dot fas fa-arrow-right"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="circle" style="--animation-delay:-9;">
|
||||
<div class="inner">
|
||||
<div class="dot fas fa-arrow-right"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="circle" style="--animation-delay:-10;">
|
||||
<div class="inner">
|
||||
<div class="dot fas fa-arrow-right"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="circle" style="--animation-delay:-11;">
|
||||
<div class="inner">
|
||||
<div class="dot fas fa-arrow-right"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="circle" style="--animation-delay:-12;">
|
||||
<div class="inner">
|
||||
<div class="dot fas fa-arrow-right"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="circle" style="--animation-delay:-13;">
|
||||
<div class="inner">
|
||||
<div class="dot fas fa-arrow-right"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,76 @@
|
||||
body {
|
||||
--time:12s;
|
||||
--count:13;
|
||||
--spokes:6;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
body .circles {
|
||||
-webkit-animation: rotate var(--time) linear infinite;
|
||||
animation: rotate var(--time) linear infinite;
|
||||
}
|
||||
body .circles, body .circles .circle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
body .circles .circle {
|
||||
width: 50vmin;
|
||||
height: 50vmin;
|
||||
border-radius: 50%;
|
||||
-webkit-animation: rotate var(--time) linear infinite;
|
||||
animation: rotate var(--time) linear infinite;
|
||||
-webkit-animation-delay: calc(var(--animation-delay, 0) * var(--time)/var(--count));
|
||||
animation-delay: calc(var(--animation-delay, 0) * var(--time)/var(--count));
|
||||
}
|
||||
body .circles .circle .inner {
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
left: 50%;
|
||||
width: 25vmin;
|
||||
height: 25vmin;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
animation: rotate calc(var(--time)/var(--spokes)) ease infinite reverse;
|
||||
-webkit-animation-delay: calc(var(--animation-delay, 0) * var(--time)/var(--count));
|
||||
animation-delay: calc(var(--animation-delay, 0) * var(--time)/var(--count));
|
||||
}
|
||||
body .circles .circle .inner .dot {
|
||||
position: absolute;
|
||||
bottom: 0%;
|
||||
left: 50%;
|
||||
-webkit-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
width: 5vmin;
|
||||
height: 5vmin;
|
||||
}
|
||||
body .circles .circle .inner .dot:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 8vmin;
|
||||
}
|
||||
@-webkit-keyframes rotate {
|
||||
0% {
|
||||
-webkit-transform: translate(-50%, -50%) rotate(0deg);
|
||||
transform: translate(-50%, -50%) rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translate(-50%, -50%) rotate(360deg);
|
||||
transform: translate(-50%, -50%) rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
-webkit-transform: translate(-50%, -50%) rotate(0deg);
|
||||
transform: translate(-50%, -50%) rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translate(-50%, -50%) rotate(360deg);
|
||||
transform: translate(-50%, -50%) rotate(360deg);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Basic Login Form</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
|
||||
<link rel='stylesheet' href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'>
|
||||
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Oxygen'><link rel="stylesheet" href="./style.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Oxygen:400,300,700" rel="stylesheet" type="text/css"/>
|
||||
<link href="https://code.ionicframework.com/ionicons/1.4.1/css/ionicons.min.css" rel="stylesheet" type="text/css"/>
|
||||
<div class="signin cf">
|
||||
<div class="avatar"></div>
|
||||
<form>
|
||||
<div class="inputrow">
|
||||
<input type="text" id="name" placeholder="Username"/>
|
||||
<label class="ion-person" for="name"></label>
|
||||
</div>
|
||||
<div class="inputrow">
|
||||
<input type="password" id="pass" placeholder="Password"/>
|
||||
<label class="ion-locked" for="pass"></label>
|
||||
</div>
|
||||
<input type="checkbox" name="remember" id="remember"/>
|
||||
<label class="radio" for="remember">Stay Logged In</label>
|
||||
<input type="submit" value="Login"/>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,178 @@
|
||||
html,
|
||||
body {
|
||||
min-height: 100%;
|
||||
font-family: Oxygen;
|
||||
font-weight: 300;
|
||||
font-size: 1em;
|
||||
color: #fff;
|
||||
}
|
||||
body {
|
||||
background: #2e3441;
|
||||
background-image: -webkit-radial-gradient(top, circle cover, #4e7a89, #2e3441 80%);
|
||||
background-image: -moz-radial-gradient(top, circle cover, #4e7a89, #2e3441 80%);
|
||||
background-image: -o-radial-gradient(top, circle cover, #4e7a89, #2e3441 80%);
|
||||
background-image: radial-gradient(top, circle cover, #4e7a89, #2e3441 80%);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
.signin {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 250px;
|
||||
margin: 20px auto;
|
||||
padding: 20px;
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
-webkit-box-shadow: inset 1px 1px 0 0 rgba(255,255,255,0.2), inset -1px -1px 0 0 rgba(0,0,0,0.2);
|
||||
-moz-box-shadow: inset 1px 1px 0 0 rgba(255,255,255,0.2), inset -1px -1px 0 0 rgba(0,0,0,0.2);
|
||||
box-shadow: inset 1px 1px 0 0 rgba(255,255,255,0.2), inset -1px -1px 0 0 rgba(0,0,0,0.2);
|
||||
}
|
||||
.signin .avatar {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 0 auto 35px auto;
|
||||
border: 5px solid #fff;
|
||||
-webkit-border-radius: 100%;
|
||||
-moz-border-radius: 100%;
|
||||
border-radius: 100%;
|
||||
-webkit-pointer-events: none;
|
||||
-moz-pointer-events: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
.signin .avatar:before {
|
||||
content: "\f272";
|
||||
text-align: center;
|
||||
font-family: Ionicons;
|
||||
display: block;
|
||||
height: 100%;
|
||||
line-height: 100px;
|
||||
font-size: 5em;
|
||||
}
|
||||
.signin .inputrow {
|
||||
position: relative;
|
||||
}
|
||||
.signin .inputrow label {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 10px;
|
||||
}
|
||||
.signin .inputrow label:before {
|
||||
color: #538a9a;
|
||||
opacity: 0.4;
|
||||
-webkit-transition: opacity 300ms 0 ease;
|
||||
-moz-transition: opacity 300ms 0 ease;
|
||||
transition: opacity 300ms 0 ease;
|
||||
}
|
||||
.signin input[type="text"],
|
||||
.signin input[type="password"] {
|
||||
padding: 10px 12px 10px 32px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid rgba(255,255,255,0.5);
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
font-size: 1em;
|
||||
font-weight: 300;
|
||||
outline: none;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
-webkit-transition: border-color 300ms 0 ease;
|
||||
-moz-transition: border-color 300ms 0 ease;
|
||||
transition: border-color 300ms 0 ease;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.signin input[type="text"]:focus + label:before,
|
||||
.signin input[type="password"]:focus + label:before {
|
||||
opacity: 1;
|
||||
}
|
||||
.signin input[type="submit"] {
|
||||
-webkit-appearance: none;
|
||||
height: 40px;
|
||||
padding: 10px 12px;
|
||||
margin-bottom: 10px;
|
||||
background-color: #538a9a;
|
||||
text-transform: uppercase;
|
||||
color: #fff;
|
||||
border: 0px;
|
||||
float: right;
|
||||
margin: 0;
|
||||
outline: none;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.signin input[type="submit"]:hover {
|
||||
background-color: #5e98a8;
|
||||
}
|
||||
.signin input[type="submit"]:active {
|
||||
background-color: #4a7b89;
|
||||
}
|
||||
input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
input[type="checkbox"] + label {
|
||||
position: relative;
|
||||
padding-left: 36px;
|
||||
font-size: 0.6em;
|
||||
font-weight: normal;
|
||||
line-height: 16px;
|
||||
opacity: 0.8;
|
||||
text-transform: uppercase;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
input[type="checkbox"] + label:before,
|
||||
input[type="checkbox"] + label:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
height: 16px;
|
||||
-webkit-border-radius: 30px;
|
||||
-moz-border-radius: 30px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
input[type="checkbox"] + label:before {
|
||||
left: 0;
|
||||
top: -2px;
|
||||
width: 30px;
|
||||
background: rgba(0,0,0,0.3);
|
||||
-webkit-box-shadow: inset 1px 1px 1px 1px rgba(0,0,0,0.3);
|
||||
-moz-box-shadow: inset 1px 1px 1px 1px rgba(0,0,0,0.3);
|
||||
box-shadow: inset 1px 1px 1px 1px rgba(0,0,0,0.3);
|
||||
}
|
||||
input[type="checkbox"] + label:after {
|
||||
opacity: 0.3;
|
||||
background: #fff;
|
||||
top: 0px;
|
||||
left: 2px;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
-webkit-transition: all 200ms 0 ease;
|
||||
-moz-transition: all 200ms 0 ease;
|
||||
transition: all 200ms 0 ease;
|
||||
}
|
||||
input[type="checkbox"]:checked + label {
|
||||
opacity: 1;
|
||||
}
|
||||
input[type="checkbox"]:checked + label:after {
|
||||
opacity: 1;
|
||||
left: 16px;
|
||||
}
|
||||
.cf:before,
|
||||
.cf:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
.cf:after {
|
||||
clear: both;
|
||||
}
|
||||
.cf {
|
||||
*zoom: 1;
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
# Blogger Template
|
||||
|
||||
|
||||
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 928 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 525 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 553 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 481 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 427 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 148 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 203 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 139 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 230 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 188 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 190 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 290 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 175 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 190 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 233 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 192 KiB |
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,29 @@
|
||||
/* font-family: Abel */
|
||||
@font-face{
|
||||
font-family: Abel;
|
||||
src: url(../fonts/Abel/Abel-Regular.ttf);
|
||||
}
|
||||
|
||||
/* font-family: Anton */
|
||||
@font-face{
|
||||
font-family: Anton;
|
||||
src: url(../fonts/Anton/Anton-Regular.ttf);
|
||||
}
|
||||
|
||||
/* font-family: Josefin */
|
||||
@font-face{
|
||||
font-family: Josefin;
|
||||
src: url(../fonts/Josefin_Sans/JosefinSans-Regular.ttf);
|
||||
}
|
||||
|
||||
/* font-family: Lexend */
|
||||
@font-face{
|
||||
font-family: Lexend;
|
||||
src: url(../fonts/Lexend_Deca/LexendDeca-Regular.ttf);
|
||||
}
|
||||
|
||||
/* font-family: Livvic */
|
||||
@font-face{
|
||||
font-family: Livvic;
|
||||
src: url(../fonts/Livvic/Livvic-Regular.ttf);
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
/**
|
||||
* Owl Carousel v2.3.4
|
||||
* Copyright 2013-2018 David Deutsch
|
||||
* Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
|
||||
*/
|
||||
.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}
|
||||
@ -0,0 +1,6 @@
|
||||
/**
|
||||
* Owl Carousel v2.3.4
|
||||
* Copyright 2013-2018 David Deutsch
|
||||
* Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
|
||||
*/
|
||||
.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:10px}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791}
|
||||
@ -0,0 +1,328 @@
|
||||
@import url('../css/fonts.css');
|
||||
|
||||
html, body{
|
||||
margin: 0%;
|
||||
box-sizing: border-box;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
:root{
|
||||
/* theme colors */
|
||||
--text-gray: #3f4954;
|
||||
--text-light: #686666da;
|
||||
--bg-color: #0f0f0f;
|
||||
--white: #ffffff;
|
||||
--midnight: #104f55;
|
||||
|
||||
/* gradient color */
|
||||
--sky: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
|
||||
|
||||
|
||||
/* theme font-family */
|
||||
--Abel: 'Abel', cursive;
|
||||
--Anton: 'Anton', cursive;
|
||||
--Josefin: 'Josefin', cursive;
|
||||
--Lexend: 'Lexend', cursive;
|
||||
--Livvic: 'Livvic', cursive;
|
||||
}
|
||||
|
||||
/* Global Classes
|
||||
============================== */
|
||||
|
||||
a{
|
||||
text-decoration: none;
|
||||
color: var(--text-gray);
|
||||
}
|
||||
|
||||
.flex-row{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
ul{
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
h1{
|
||||
font-family: var(--Lexend);
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
h2{
|
||||
font-family: var(--Lexend);
|
||||
}
|
||||
|
||||
h3{
|
||||
font-family: var(--Abel);
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
button.btn{
|
||||
border: none;
|
||||
border-radius: 2rem;
|
||||
padding: 1rem 3rem;
|
||||
font-size: 1rem;
|
||||
font-family: var(--Livvic);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
span{
|
||||
font-family: var(--Abel);
|
||||
}
|
||||
|
||||
.container{
|
||||
margin: 0 5vw;
|
||||
}
|
||||
|
||||
.text-gray{
|
||||
color: var(--text-gray);
|
||||
}
|
||||
|
||||
/* End Global Classes
|
||||
============================== */
|
||||
|
||||
/* Navbar
|
||||
============================== */
|
||||
|
||||
.navigation{
|
||||
background: #fff;
|
||||
padding: 0 2rem;
|
||||
height: 0rem;
|
||||
min-height: 10vh;
|
||||
overflow: hidden;
|
||||
transition: height 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.navigation .nav-menu{
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.navigation .toggle-collapse{
|
||||
position: absolute;
|
||||
top: 0%;
|
||||
width: 90%;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navigation .toggle-collapse .toggle-icons{
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 1.7rem 0;
|
||||
}
|
||||
|
||||
.navigation .toggle-collapse .toggle-icons i{
|
||||
font-size: 1.4rem;
|
||||
color: var(--text-gray);
|
||||
}
|
||||
|
||||
.collapse{
|
||||
height: 30rem;
|
||||
}
|
||||
|
||||
.navigation .nav-items{
|
||||
display: flex;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.navigation .nav-items .nav-link{
|
||||
padding: 1.6rem 1rem;
|
||||
font-size: 1.1rem;
|
||||
position: relative;
|
||||
font-family: var(--Abel);
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.navigation .nav-items .nav-link:hover{
|
||||
background-color: var(--midnight);
|
||||
}
|
||||
|
||||
.navigation .nav-items .nav-link:hover a{
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.navigation .nav-brand a{
|
||||
font-size: 1.6rem;
|
||||
padding: 1rem 0;
|
||||
display: block;
|
||||
font-family: var(--Lexend);
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.navigation .social{
|
||||
padding: 1.4rem 0;
|
||||
}
|
||||
|
||||
.navigation .social i{
|
||||
padding: 0.2rem;
|
||||
}
|
||||
|
||||
.navigation .social i:hover{
|
||||
color: #a1c4cf;
|
||||
}
|
||||
|
||||
/* End Navbar
|
||||
============================== */
|
||||
|
||||
/* Main Content
|
||||
============================== */
|
||||
|
||||
/* Site Title */
|
||||
main .site-title{
|
||||
background: url(../assets/Background-image.png);
|
||||
background-size: cover;
|
||||
height: 110vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
main .site-title .site-background{
|
||||
padding-top: 10rem;
|
||||
text-align: center;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
main .site-title h1,h3{
|
||||
margin: .3rem;
|
||||
}
|
||||
|
||||
main .site-title .btn{
|
||||
margin: 1.8rem;
|
||||
background: var(--sky);
|
||||
}
|
||||
|
||||
main .site-title .btn:hover{
|
||||
background: transparent;
|
||||
border: 1px solid var(--white);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
/* End Site Title */
|
||||
|
||||
/* Blog Carousel
|
||||
============================== */
|
||||
|
||||
main .blog{
|
||||
background: url(../assets/Abract01.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: right;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
background-size: 65%;
|
||||
}
|
||||
|
||||
main .blog .blog-post{
|
||||
padding-top: 6rem;
|
||||
}
|
||||
|
||||
main .blog-post .blog-content{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
width: 80%;
|
||||
margin: 3rem 2rem;
|
||||
box-shadow: 0 15px 20px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
main .blog-content .blog-title{
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
main .blog-content .btn-blog{
|
||||
padding: .7rem 2rem;
|
||||
background: var(--sky);
|
||||
margin: .5rem;
|
||||
}
|
||||
|
||||
main .blog-content span{
|
||||
display: block;
|
||||
}
|
||||
|
||||
section .container .owl-nav{
|
||||
position: absolute;
|
||||
top: 0%;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.owl-nav .owl-prev .owl-nav-prev,
|
||||
.owl-nav .owl-next .owl-nav-next{
|
||||
color: var(--text-gray);
|
||||
background: transparent;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.owl-theme .owl-nav [class*='owl-']:hover{
|
||||
background: transparent;
|
||||
color: var(--midnight);
|
||||
}
|
||||
|
||||
.owl-theme .owl-nav [class*='owl-']{
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* End Blog Carousel
|
||||
============================== */
|
||||
|
||||
/* Site Content
|
||||
=========================================== */
|
||||
|
||||
main .site-content{
|
||||
display: grid;
|
||||
grid-template-columns: 70% 30%;
|
||||
}
|
||||
|
||||
main .post-content{
|
||||
width: 100%;
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
|
||||
main .site-content .post-content > .post-image .post-title{
|
||||
padding: 1rem 2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
main .site-content .post-content > .post-image .post-info{
|
||||
background: var(--sky);
|
||||
padding: 1rem;
|
||||
position: absolute;
|
||||
bottom: 0%;
|
||||
left: 20vw;
|
||||
border-radius: 3rem;
|
||||
}
|
||||
|
||||
main .site-content .post-content > .post-image > div{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
main .site-content .post-content > .post-image .img{
|
||||
width: 100%;
|
||||
transition: all 1s ease;
|
||||
}
|
||||
|
||||
main .site-content .post-content > .post-image .img:hover{
|
||||
transform: scale(1.3);
|
||||
}
|
||||
|
||||
/* End Site Content
|
||||
=========================================== */
|
||||
|
||||
/* End Main Content
|
||||
============================== */
|
||||
|
||||
/* Viewport less then or equal to 750px
|
||||
============================== */
|
||||
|
||||
@media only screen and (max-width:750px){
|
||||
.navigation .nav-menu, .navigation .nav-items{
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.navigation .toggle-collapse{
|
||||
display: initial;
|
||||
}
|
||||
}
|
||||
|
||||
/* End Viewport less then or equal to 750px
|
||||
============================== */
|
||||
Binary file not shown.
@ -0,0 +1,93 @@
|
||||
Copyright (c) 2011, Matthew Desmond (http://www.madtype.com | mattdesmond@gmail.com),with Reserved Font Name Abel.
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
http://scripts.sil.org/OFL
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
Binary file not shown.
@ -0,0 +1,93 @@
|
||||
Copyright 2016 The Anton Project Authors
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
http://scripts.sil.org/OFL
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
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.
@ -0,0 +1,93 @@
|
||||
Copyright (c) 2010, Santiago Orozco (hi@typemade.mx)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
http://scripts.sil.org/OFL
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
Binary file not shown.
@ -0,0 +1,93 @@
|
||||
Copyright 2018 The Lexend Project Authors (https://github.com/thomasjockin/lexend), with Reserved Font Name “RevReading Lexend”.
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
http://scripts.sil.org/OFL
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
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.
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue