Add js animation
This commit is contained in:
parent
a27a032351
commit
59c43cb228
89
website/assets/css/extneral.css
Normal file
89
website/assets/css/extneral.css
Normal file
|
@ -0,0 +1,89 @@
|
||||||
|
|
||||||
|
/* source-sans-3-300 - latin */
|
||||||
|
/* source-sans-3-300 - latin */
|
||||||
|
@font-face {
|
||||||
|
font-display: swap;
|
||||||
|
/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||||
|
font-family: 'Source Sans Pro';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 300;
|
||||||
|
src: url('../fonts/source-sans-3-v15-latin-300.woff2') format('woff2');
|
||||||
|
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* source-sans-3-300italic - latin */
|
||||||
|
@font-face {
|
||||||
|
font-display: swap;
|
||||||
|
/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||||
|
font-family: 'Source Sans Pro';
|
||||||
|
font-style: italic;
|
||||||
|
font-weight: 300;
|
||||||
|
src: url('../fonts/source-sans-3-v15-latin-300italic.woff2') format('woff2');
|
||||||
|
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* source-sans-3-regular - latin */
|
||||||
|
@font-face {
|
||||||
|
font-display: swap;
|
||||||
|
/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||||
|
font-family: 'Source Sans Pro';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
src: url('../fonts/source-sans-3-v15-latin-regular.woff2') format('woff2');
|
||||||
|
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* source-sans-3-italic - latin */
|
||||||
|
@font-face {
|
||||||
|
font-display: swap;
|
||||||
|
/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||||
|
font-family: 'Source Sans Pro';
|
||||||
|
font-style: italic;
|
||||||
|
font-weight: 400;
|
||||||
|
src: url('../fonts/source-sans-3-v15-latin-italic.woff2') format('woff2');
|
||||||
|
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* source-sans-3-600 - latin */
|
||||||
|
@font-face {
|
||||||
|
font-display: swap;
|
||||||
|
/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||||
|
font-family: 'Source Sans Pro';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
src: url('../fonts/source-sans-3-v15-latin-600.woff2') format('woff2');
|
||||||
|
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* source-sans-3-600italic - latin */
|
||||||
|
@font-face {
|
||||||
|
font-display: swap;
|
||||||
|
/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||||
|
font-family: 'Source Sans Pro';
|
||||||
|
font-style: italic;
|
||||||
|
font-weight: 600;
|
||||||
|
src: url('../fonts/source-sans-3-v15-latin-600italic.woff2') format('woff2');
|
||||||
|
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* source-sans-3-700 - latin */
|
||||||
|
@font-face {
|
||||||
|
font-display: swap;
|
||||||
|
/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||||
|
font-family: 'Source Sans Pro';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
src: url('../fonts/source-sans-3-v15-latin-700.woff2') format('woff2');
|
||||||
|
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* source-sans-3-700italic - latin */
|
||||||
|
@font-face {
|
||||||
|
font-display: swap;
|
||||||
|
/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
||||||
|
font-family: 'Source Sans Pro';
|
||||||
|
font-style: italic;
|
||||||
|
font-weight: 700;
|
||||||
|
src: url('../fonts/source-sans-3-v15-latin-700italic.woff2') format('woff2');
|
||||||
|
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
||||||
|
}
|
|
@ -1,114 +1,31 @@
|
||||||
|
@import url(extneral.css);
|
||||||
|
@import url(matrix.css);
|
||||||
|
|
||||||
/* source-sans-3-300 - latin */
|
|
||||||
/* source-sans-3-300 - latin */
|
span[data-value="Darknet"] {
|
||||||
@font-face {
|
color: #0f0;
|
||||||
font-display: swap;
|
|
||||||
/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
||||||
font-family: 'Source Sans Pro';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 300;
|
|
||||||
src: url('../fonts/source-sans-3-v15-latin-300.woff2') format('woff2');
|
|
||||||
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* source-sans-3-300italic - latin */
|
|
||||||
@font-face {
|
|
||||||
font-display: swap;
|
|
||||||
/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
||||||
font-family: 'Source Sans Pro';
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: 300;
|
|
||||||
src: url('../fonts/source-sans-3-v15-latin-300italic.woff2') format('woff2');
|
|
||||||
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* source-sans-3-regular - latin */
|
|
||||||
@font-face {
|
|
||||||
font-display: swap;
|
|
||||||
/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
||||||
font-family: 'Source Sans Pro';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
src: url('../fonts/source-sans-3-v15-latin-regular.woff2') format('woff2');
|
|
||||||
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* source-sans-3-italic - latin */
|
|
||||||
@font-face {
|
|
||||||
font-display: swap;
|
|
||||||
/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
||||||
font-family: 'Source Sans Pro';
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: 400;
|
|
||||||
src: url('../fonts/source-sans-3-v15-latin-italic.woff2') format('woff2');
|
|
||||||
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* source-sans-3-600 - latin */
|
|
||||||
@font-face {
|
|
||||||
font-display: swap;
|
|
||||||
/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
||||||
font-family: 'Source Sans Pro';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 600;
|
|
||||||
src: url('../fonts/source-sans-3-v15-latin-600.woff2') format('woff2');
|
|
||||||
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* source-sans-3-600italic - latin */
|
|
||||||
@font-face {
|
|
||||||
font-display: swap;
|
|
||||||
/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
||||||
font-family: 'Source Sans Pro';
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: 600;
|
|
||||||
src: url('../fonts/source-sans-3-v15-latin-600italic.woff2') format('woff2');
|
|
||||||
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* source-sans-3-700 - latin */
|
|
||||||
@font-face {
|
|
||||||
font-display: swap;
|
|
||||||
/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
||||||
font-family: 'Source Sans Pro';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 700;
|
|
||||||
src: url('../fonts/source-sans-3-v15-latin-700.woff2') format('woff2');
|
|
||||||
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* source-sans-3-700italic - latin */
|
|
||||||
@font-face {
|
|
||||||
font-display: swap;
|
|
||||||
/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
||||||
font-family: 'Source Sans Pro';
|
|
||||||
font-style: italic;
|
|
||||||
font-weight: 700;
|
|
||||||
src: url('../fonts/source-sans-3-v15-latin-700italic.woff2') format('woff2');
|
|
||||||
/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.top-header {
|
.top-header {
|
||||||
background-color: #2C2C2C;
|
background-color: #2C2C2C;
|
||||||
padding: 20px 0;
|
padding: 20px 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-nav-links a {
|
.header-nav-links a {
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
margin: 0 15px;
|
margin: 0 15px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-nav-links a:hover {
|
.header-nav-links a:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@ -3177,10 +3094,12 @@ input[type="button"].small,
|
||||||
#main footer.major {
|
#main footer.major {
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
#clan-logo {
|
#clan-logo {
|
||||||
width: 14em;
|
width: 14em;
|
||||||
height: 14em;
|
height: 14em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Wide */
|
/* Wide */
|
||||||
|
|
||||||
@media screen and (max-width: 1680px) {
|
@media screen and (max-width: 1680px) {
|
||||||
|
|
|
@ -1,6 +1,38 @@
|
||||||
/*
|
|
||||||
Directive by HTML5 UP
|
|
||||||
html5up.net | @ajlkn
|
|
||||||
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
|
const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
|
||||||
|
|
||||||
|
let interval = null;
|
||||||
|
|
||||||
|
function hacker_effect(target) {
|
||||||
|
let iteration = 0;
|
||||||
|
clearInterval(interval);
|
||||||
|
|
||||||
|
interval = setInterval(() => {
|
||||||
|
target.innerText = target.innerText
|
||||||
|
.split("")
|
||||||
|
.map((letter, index) => {
|
||||||
|
if (index < iteration) {
|
||||||
|
return target.dataset.value[index];
|
||||||
|
}
|
||||||
|
|
||||||
|
return letters[Math.floor(Math.random() * 26)]
|
||||||
|
})
|
||||||
|
.join("");
|
||||||
|
|
||||||
|
if (iteration >= target.dataset.value.length) {
|
||||||
|
clearInterval(interval);
|
||||||
|
}
|
||||||
|
|
||||||
|
iteration += 1 / 3;
|
||||||
|
}, 30);
|
||||||
|
}
|
||||||
|
|
||||||
|
document.querySelector("span").onmouseover = event => hacker_effect(event.target);
|
||||||
|
window.onload = function () {
|
||||||
|
var delay = 250;
|
||||||
|
setTimeout(function () {
|
||||||
|
let target = document.querySelector("span");
|
||||||
|
hacker_effect(target);
|
||||||
|
}, delay);
|
||||||
|
};
|
|
@ -31,9 +31,7 @@
|
||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
<div id="header">
|
<div id="header">
|
||||||
<img src="static/logo/clan-white.png" alt="Clan White" id="clan-logo">
|
<img src="static/logo/clan-white.png" alt="Clan White" id="clan-logo">
|
||||||
<h1>Build your own Darknet</h2>
|
<h1>Build your own <span data-value="Darknet">TDERKAN</span></h1>
|
||||||
|
|
||||||
<br />
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Main -->
|
<!-- Main -->
|
||||||
|
|
Loading…
Reference in New Issue
Block a user