Update scripts with latest changes by M.R.
This commit is contained in:
Michael Reber
parent
b6df61abd8
commit
b60f12974f
3
buttons/download-button-animation/README.md
Normal file
3
buttons/download-button-animation/README.md
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
# Download Button Animation
|
||||||
|
|
||||||
|
|
||||||
56
buttons/download-button-animation/index.html
Normal file
56
buttons/download-button-animation/index.html
Normal file
@ -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>
|
||||||
83
buttons/download-button-animation/script.js
Normal file
83
buttons/download-button-animation/script.js
Normal file
@ -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}" />`;
|
||||||
|
}
|
||||||
363
buttons/download-button-animation/style.css
Normal file
363
buttons/download-button-animation/style.css
Normal file
@ -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;
|
||||||
|
}
|
||||||
5
buttons/social-media-buttons/README.md
Normal file
5
buttons/social-media-buttons/README.md
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
# Social Media Buttons
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
33
buttons/social-media-buttons/index.html
Normal file
33
buttons/social-media-buttons/index.html
Normal file
@ -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>
|
||||||
68
buttons/social-media-buttons/style.css
Normal file
68
buttons/social-media-buttons/style.css
Normal file
@ -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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
4
clock-pure-css/README.md
Normal file
4
clock-pure-css/README.md
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
# Clock Pure CSS with current time
|
||||||
|
|
||||||
|
CSS only, clock
|
||||||
|
|
||||||
81
clock-pure-css/index.html
Normal file
81
clock-pure-css/index.html
Normal file
@ -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>
|
||||||
24
clock-pure-css/script.js
Normal file
24
clock-pure-css/script.js
Normal file
@ -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);
|
||||||
|
}
|
||||||
393
clock-pure-css/style.css
Normal file
393
clock-pure-css/style.css
Normal file
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
3
css-effects/frosted-glass/README.md
Normal file
3
css-effects/frosted-glass/README.md
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
# CSS - Frosted Glass
|
||||||
|
|
||||||
|
|
||||||
16
css-effects/frosted-glass/index.html
Normal file
16
css-effects/frosted-glass/index.html
Normal file
@ -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>
|
||||||
85
css-effects/frosted-glass/style.css
Normal file
85
css-effects/frosted-glass/style.css
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
3
css-effects/neon-glow-css/README.md
Normal file
3
css-effects/neon-glow-css/README.md
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
# Neon Glow CSS
|
||||||
|
|
||||||
|
Designed for use with Chrome. Hover them :)
|
||||||
41
css-effects/neon-glow-css/index.html
Normal file
41
css-effects/neon-glow-css/index.html
Normal file
@ -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>
|
||||||
211
css-effects/neon-glow-css/style.css
Normal file
211
css-effects/neon-glow-css/style.css
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
3
easy-dark-mode/README.md
Normal file
3
easy-dark-mode/README.md
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
# Easy Dark Mode
|
||||||
|
|
||||||
|
|
||||||
20
easy-dark-mode/index.html
Normal file
20
easy-dark-mode/index.html
Normal file
@ -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>
|
||||||
18
easy-dark-mode/script.js
Normal file
18
easy-dark-mode/script.js
Normal file
@ -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)
|
||||||
|
}
|
||||||
107
easy-dark-mode/style.css
Normal file
107
easy-dark-mode/style.css
Normal file
@ -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;
|
||||||
|
}
|
||||||
2
error-pages/README.md
Normal file
2
error-pages/README.md
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
# 404 - Error Page Collection
|
||||||
|
|
||||||
1
error-pages/glitched-out-404/README.md
Normal file
1
error-pages/glitched-out-404/README.md
Normal file
@ -0,0 +1 @@
|
|||||||
|
# 404 - Glitched out
|
||||||
49
error-pages/glitched-out-404/index.html
Normal file
49
error-pages/glitched-out-404/index.html
Normal file
@ -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>
|
||||||
218
error-pages/glitched-out-404/style.css
Normal file
218
error-pages/glitched-out-404/style.css
Normal file
File diff suppressed because one or more lines are too long
2
error-pages/page-offline-bot-503/README.md
Normal file
2
error-pages/page-offline-bot-503/README.md
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
# 503 - Page is Offline (Bot)
|
||||||
|
|
||||||
30
error-pages/page-offline-bot-503/index.html
Normal file
30
error-pages/page-offline-bot-503/index.html
Normal file
@ -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>
|
||||||
320
error-pages/page-offline-bot-503/style.css
Normal file
320
error-pages/page-offline-bot-503/style.css
Normal file
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
2
loading-icons/README.md
Normal file
2
loading-icons/README.md
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
# Loading Icons Collection
|
||||||
|
|
||||||
2
loading-icons/atom/README.md
Normal file
2
loading-icons/atom/README.md
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
# Atom Loading Icon
|
||||||
|
|
||||||
21
loading-icons/atom/index.html
Normal file
21
loading-icons/atom/index.html
Normal file
@ -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>
|
||||||
50
loading-icons/atom/style.css
Normal file
50
loading-icons/atom/style.css
Normal file
@ -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);
|
||||||
|
}
|
||||||
3
loading-icons/autonomous-arrows/README.md
Normal file
3
loading-icons/autonomous-arrows/README.md
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
# Autonomous Arrows Icon
|
||||||
|
|
||||||
|
|
||||||
80
loading-icons/autonomous-arrows/index.html
Normal file
80
loading-icons/autonomous-arrows/index.html
Normal file
@ -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>
|
||||||
76
loading-icons/autonomous-arrows/style.css
Normal file
76
loading-icons/autonomous-arrows/style.css
Normal file
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
36
template-basic-login-form/index.html
Normal file
36
template-basic-login-form/index.html
Normal file
@ -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>
|
||||||
178
template-basic-login-form/style.css
Normal file
178
template-basic-login-form/style.css
Normal file
@ -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;
|
||||||
|
}
|
||||||
5
template-blooger-page/README.md
Normal file
5
template-blooger-page/README.md
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
# Blogger Template
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
BIN
template-blooger-page/assets/Abract01.png
Normal file
BIN
template-blooger-page/assets/Abract01.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
template-blooger-page/assets/Background-image-2.png
Normal file
BIN
template-blooger-page/assets/Background-image-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 928 KiB |
BIN
template-blooger-page/assets/Background-image.png
Normal file
BIN
template-blooger-page/assets/Background-image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
BIN
template-blooger-page/assets/Blog-post/blog1.png
Normal file
BIN
template-blooger-page/assets/Blog-post/blog1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 525 KiB |
BIN
template-blooger-page/assets/Blog-post/blog2.png
Normal file
BIN
template-blooger-page/assets/Blog-post/blog2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 553 KiB |
BIN
template-blooger-page/assets/Blog-post/blog3.png
Normal file
BIN
template-blooger-page/assets/Blog-post/blog3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 481 KiB |
BIN
template-blooger-page/assets/Blog-post/blog4.png
Normal file
BIN
template-blooger-page/assets/Blog-post/blog4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 427 KiB |
BIN
template-blooger-page/assets/Blog-post/feature-img1.jpg
Normal file
BIN
template-blooger-page/assets/Blog-post/feature-img1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
BIN
template-blooger-page/assets/Blog-post/post-1.jpg
Normal file
BIN
template-blooger-page/assets/Blog-post/post-1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
BIN
template-blooger-page/assets/Blog-post/post-10.jpg
Normal file
BIN
template-blooger-page/assets/Blog-post/post-10.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
BIN
template-blooger-page/assets/Blog-post/post-2.jpg
Normal file
BIN
template-blooger-page/assets/Blog-post/post-2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
BIN
template-blooger-page/assets/Blog-post/post-3.jpg
Normal file
BIN
template-blooger-page/assets/Blog-post/post-3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
BIN
template-blooger-page/assets/Blog-post/post-4.png
Normal file
BIN
template-blooger-page/assets/Blog-post/post-4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 148 KiB |
BIN
template-blooger-page/assets/Blog-post/post-5.png
Normal file
BIN
template-blooger-page/assets/Blog-post/post-5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 203 KiB |
BIN
template-blooger-page/assets/Blog-post/post-6.png
Normal file
BIN
template-blooger-page/assets/Blog-post/post-6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 139 KiB |
BIN
template-blooger-page/assets/Blog-post/post-7.jpg
Normal file
BIN
template-blooger-page/assets/Blog-post/post-7.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
BIN
template-blooger-page/assets/Blog-post/post-8.jpg
Normal file
BIN
template-blooger-page/assets/Blog-post/post-8.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
template-blooger-page/assets/Blog-post/post-9.jpg
Normal file
BIN
template-blooger-page/assets/Blog-post/post-9.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
BIN
template-blooger-page/assets/instagram/thumb-card3.png
Normal file
BIN
template-blooger-page/assets/instagram/thumb-card3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 230 KiB |
BIN
template-blooger-page/assets/instagram/thumb-card4.png
Normal file
BIN
template-blooger-page/assets/instagram/thumb-card4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 188 KiB |
BIN
template-blooger-page/assets/instagram/thumb-card5.png
Normal file
BIN
template-blooger-page/assets/instagram/thumb-card5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 190 KiB |
BIN
template-blooger-page/assets/instagram/thumb-card6.png
Normal file
BIN
template-blooger-page/assets/instagram/thumb-card6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 290 KiB |
BIN
template-blooger-page/assets/instagram/thumb-card7.png
Normal file
BIN
template-blooger-page/assets/instagram/thumb-card7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 175 KiB |
BIN
template-blooger-page/assets/instagram/thumb-card8.png
Normal file
BIN
template-blooger-page/assets/instagram/thumb-card8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 190 KiB |
BIN
template-blooger-page/assets/popular-post/m-blog-1.jpg
Normal file
BIN
template-blooger-page/assets/popular-post/m-blog-1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
BIN
template-blooger-page/assets/popular-post/m-blog-2.jpg
Normal file
BIN
template-blooger-page/assets/popular-post/m-blog-2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 233 KiB |
BIN
template-blooger-page/assets/popular-post/m-blog-3.jpg
Normal file
BIN
template-blooger-page/assets/popular-post/m-blog-3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
BIN
template-blooger-page/assets/popular-post/m-blog-4.jpg
Normal file
BIN
template-blooger-page/assets/popular-post/m-blog-4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
BIN
template-blooger-page/assets/popular-post/m-blog-5.jpg
Normal file
BIN
template-blooger-page/assets/popular-post/m-blog-5.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 192 KiB |
4423
template-blooger-page/css/all.css
Normal file
4423
template-blooger-page/css/all.css
Normal file
File diff suppressed because it is too large
Load Diff
29
template-blooger-page/css/fonts.css
Normal file
29
template-blooger-page/css/fonts.css
Normal file
@ -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);
|
||||||
|
}
|
||||||
6
template-blooger-page/css/owl.carousel.min.css
vendored
Normal file
6
template-blooger-page/css/owl.carousel.min.css
vendored
Normal file
@ -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%}
|
||||||
6
template-blooger-page/css/owl.theme.default.min.css
vendored
Normal file
6
template-blooger-page/css/owl.theme.default.min.css
vendored
Normal file
@ -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}
|
||||||
328
template-blooger-page/css/style.css
Normal file
328
template-blooger-page/css/style.css
Normal file
@ -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
|
||||||
|
============================== */
|
||||||
BIN
template-blooger-page/fonts/Abel/Abel-Regular.ttf
Normal file
BIN
template-blooger-page/fonts/Abel/Abel-Regular.ttf
Normal file
Binary file not shown.
93
template-blooger-page/fonts/Abel/OFL.txt
Normal file
93
template-blooger-page/fonts/Abel/OFL.txt
Normal file
@ -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.
|
||||||
BIN
template-blooger-page/fonts/Anton/Anton-Regular.ttf
Normal file
BIN
template-blooger-page/fonts/Anton/Anton-Regular.ttf
Normal file
Binary file not shown.
93
template-blooger-page/fonts/Anton/OFL.txt
Normal file
93
template-blooger-page/fonts/Anton/OFL.txt
Normal file
@ -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.
|
||||||
BIN
template-blooger-page/fonts/Josefin_Sans/JosefinSans-Bold.ttf
Normal file
BIN
template-blooger-page/fonts/Josefin_Sans/JosefinSans-Bold.ttf
Normal file
Binary file not shown.
Binary file not shown.
BIN
template-blooger-page/fonts/Josefin_Sans/JosefinSans-Italic.ttf
Normal file
BIN
template-blooger-page/fonts/Josefin_Sans/JosefinSans-Italic.ttf
Normal file
Binary file not shown.
BIN
template-blooger-page/fonts/Josefin_Sans/JosefinSans-Light.ttf
Normal file
BIN
template-blooger-page/fonts/Josefin_Sans/JosefinSans-Light.ttf
Normal file
Binary file not shown.
Binary file not shown.
BIN
template-blooger-page/fonts/Josefin_Sans/JosefinSans-Regular.ttf
Normal file
BIN
template-blooger-page/fonts/Josefin_Sans/JosefinSans-Regular.ttf
Normal file
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
template-blooger-page/fonts/Josefin_Sans/JosefinSans-Thin.ttf
Normal file
BIN
template-blooger-page/fonts/Josefin_Sans/JosefinSans-Thin.ttf
Normal file
Binary file not shown.
Binary file not shown.
93
template-blooger-page/fonts/Josefin_Sans/OFL.txt
Normal file
93
template-blooger-page/fonts/Josefin_Sans/OFL.txt
Normal file
@ -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.
|
||||||
BIN
template-blooger-page/fonts/Lexend_Deca/LexendDeca-Regular.ttf
Normal file
BIN
template-blooger-page/fonts/Lexend_Deca/LexendDeca-Regular.ttf
Normal file
Binary file not shown.
93
template-blooger-page/fonts/Lexend_Deca/OFL.txt
Normal file
93
template-blooger-page/fonts/Lexend_Deca/OFL.txt
Normal file
@ -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.
|
||||||
BIN
template-blooger-page/fonts/Livvic/Livvic-Black.ttf
Normal file
BIN
template-blooger-page/fonts/Livvic/Livvic-Black.ttf
Normal file
Binary file not shown.
BIN
template-blooger-page/fonts/Livvic/Livvic-BlackItalic.ttf
Normal file
BIN
template-blooger-page/fonts/Livvic/Livvic-BlackItalic.ttf
Normal file
Binary file not shown.
BIN
template-blooger-page/fonts/Livvic/Livvic-Bold.ttf
Normal file
BIN
template-blooger-page/fonts/Livvic/Livvic-Bold.ttf
Normal file
Binary file not shown.
BIN
template-blooger-page/fonts/Livvic/Livvic-BoldItalic.ttf
Normal file
BIN
template-blooger-page/fonts/Livvic/Livvic-BoldItalic.ttf
Normal file
Binary file not shown.
BIN
template-blooger-page/fonts/Livvic/Livvic-ExtraLight.ttf
Normal file
BIN
template-blooger-page/fonts/Livvic/Livvic-ExtraLight.ttf
Normal file
Binary file not shown.
BIN
template-blooger-page/fonts/Livvic/Livvic-ExtraLightItalic.ttf
Normal file
BIN
template-blooger-page/fonts/Livvic/Livvic-ExtraLightItalic.ttf
Normal file
Binary file not shown.
BIN
template-blooger-page/fonts/Livvic/Livvic-Italic.ttf
Normal file
BIN
template-blooger-page/fonts/Livvic/Livvic-Italic.ttf
Normal file
Binary file not shown.
BIN
template-blooger-page/fonts/Livvic/Livvic-Light.ttf
Normal file
BIN
template-blooger-page/fonts/Livvic/Livvic-Light.ttf
Normal file
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
Block a user