initial commit
This commit is contained in:
commit
0ab40ccc70
41
error_pages/error_404.html
Normal file
41
error_pages/error_404.html
Normal file
@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
|
||||
|
||||
<title>404 - Not found :(</title>
|
||||
|
||||
<!-- Google font -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:700,900" rel="stylesheet">
|
||||
|
||||
<!-- Custom stlylesheet -->
|
||||
<link type="text/css" rel="stylesheet" href="/error_pages/style.css" />
|
||||
|
||||
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
|
||||
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
|
||||
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="notfound">
|
||||
<div class="notfound">
|
||||
<div class="notfound-404">
|
||||
<h1>404</h1>
|
||||
<h2>Page not found</h2>
|
||||
</div>
|
||||
<a href="/">Homepage</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body><!-- This templates was made by Colorlib (https://colorlib.com) -->
|
||||
|
||||
</html>
|
||||
104
error_pages/style.css
Normal file
104
error_pages/style.css
Normal file
@ -0,0 +1,104 @@
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#notfound {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
background: #030005;
|
||||
}
|
||||
|
||||
#notfound .notfound {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.notfound {
|
||||
max-width: 767px;
|
||||
width: 100%;
|
||||
line-height: 1.4;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.notfound .notfound-404 {
|
||||
position: relative;
|
||||
height: 180px;
|
||||
margin-bottom: 20px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.notfound .notfound-404 h1 {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
-webkit-transform: translate(-50% , -50%);
|
||||
-ms-transform: translate(-50% , -50%);
|
||||
transform: translate(-50% , -50%);
|
||||
font-size: 224px;
|
||||
font-weight: 900;
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
margin-left: -12px;
|
||||
color: #030005;
|
||||
text-transform: uppercase;
|
||||
text-shadow: -1px -1px 0px #8400ff, 1px 1px 0px #ff005a;
|
||||
letter-spacing: -20px;
|
||||
}
|
||||
|
||||
|
||||
.notfound .notfound-404 h2 {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 110px;
|
||||
font-size: 42px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
text-shadow: 0px 2px 0px #8400ff;
|
||||
letter-spacing: 13px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.notfound a {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
display: inline-block;
|
||||
text-transform: uppercase;
|
||||
color: #ff005a;
|
||||
text-decoration: none;
|
||||
border: 2px solid;
|
||||
background: transparent;
|
||||
padding: 10px 40px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
-webkit-transition: 0.2s all;
|
||||
transition: 0.2s all;
|
||||
}
|
||||
|
||||
.notfound a:hover {
|
||||
color: #8400ff;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
.notfound .notfound-404 h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.notfound .notfound-404 h1 {
|
||||
font-size: 182px;
|
||||
}
|
||||
}
|
||||
161
home-style.css
Normal file
161
home-style.css
Normal file
@ -0,0 +1,161 @@
|
||||
@charset "utf-8";
|
||||
|
||||
html, body {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: black;
|
||||
-moz-user-select: none;
|
||||
-webkis-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-o-user-select: none;
|
||||
}
|
||||
|
||||
.main{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
background: linear-gradient(45deg, #067062, #063d70, #2d0670, #4e0670, #700667);
|
||||
background-size: 1000%, 100%;
|
||||
animation: gradient 7s linear infinite;
|
||||
animation-direction: alternate-reverse;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 90px;
|
||||
font-weight: 800;
|
||||
width: 100%;
|
||||
color: white;
|
||||
position: absolute;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.bottomnav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
margin-top: auto;
|
||||
padding-bottom: 20px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.bottomnav a {
|
||||
color: white;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
padding: 14px;
|
||||
font-size: 30px;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.bottomnav a.rainbow {
|
||||
background: linear-gradient(to right, #33ffc5 20%, #fc33ff, #ff3370, #ff3333, #3dff33, #33ffc5);
|
||||
background-size: 800px, 800px;
|
||||
color: aquamarine;
|
||||
background-clip: text;
|
||||
text-fill-color: transparent;
|
||||
animation: gradient 2s linear infinite;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
/* ANIMATED GRADIENT BACKGROUND */
|
||||
@keyframes gradient {
|
||||
0% {background-position: 0%}
|
||||
100% {background-position: 100%}
|
||||
}
|
||||
|
||||
/*MOBILE*/
|
||||
@media (min-width: 0px) and (max-width: 200px) {
|
||||
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
.bottomnav a {
|
||||
font-size: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 200px) and (max-width: 300px) {
|
||||
|
||||
h1 {
|
||||
font-size: 39px;
|
||||
}
|
||||
.bottomnav a {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 300px) and (max-width: 400px) {
|
||||
|
||||
h1 {
|
||||
font-size: 52px;
|
||||
}
|
||||
.bottomnav a {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 400px) and (max-width: 500px) {
|
||||
|
||||
h1 {
|
||||
font-size: 64px;
|
||||
}
|
||||
.bottomnav a {
|
||||
font-size: 27px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 500px) and (max-width: 800px) {
|
||||
|
||||
h1 {
|
||||
font-size: 76px;
|
||||
}
|
||||
.bottomnav a {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 800px) and (max-width: 1000px) {
|
||||
|
||||
h1 {
|
||||
font-size: 80px;
|
||||
}
|
||||
.bottomnav a {
|
||||
font-size: 29px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 4K+ MONITORS*/
|
||||
@media (min-width: 2100px) {
|
||||
|
||||
h1 {
|
||||
font-size: 180px;
|
||||
}
|
||||
.bottomnav a {
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'Oswald';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: url(https://fonts.gstatic.com/s/oswald/v24/TK3_WkUHHAIjg75cFRf3bXL8LICs169vsUZiZQ.woff2) format('woff2');
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
src: url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_c5H3gnD_g.woff2) format('woff2');
|
||||
}
|
||||
BIN
images/logos/brain-128.ico
Normal file
BIN
images/logos/brain-128.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
images/logos/brain-128.png
Normal file
BIN
images/logos/brain-128.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
BIN
images/logos/brain.jpg
Normal file
BIN
images/logos/brain.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
50
index.html
Normal file
50
index.html
Normal file
@ -0,0 +1,50 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=0">
|
||||
<meta name="description" content="Welcome to Lorenzo Dellacà's official website: software development, web design, music, photography.">
|
||||
<link href="home-style.css" rel="stylesheet" type="text/css">
|
||||
<link rel="shortcut icon" type="image/png" href="/images/logos/brain-128.png"/>
|
||||
<title>Mind Overflow :: Home</title>
|
||||
<script src="anime.min.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="main" id="vantajs">
|
||||
<h1>Lorenzo Dellacà</h1>
|
||||
|
||||
<div class="bottomnav">
|
||||
<a href="pages/about.html">About</a>
|
||||
<a class="rainbow" href="https://old.mind-overflow.net/career.html">Services</a>
|
||||
<a href="pages/contact.html">Contact</a>
|
||||
<a href="https://cloud.mind-overflow.net/">Cloud</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Vanta.JS Scripts to make the background cool, but disabled on mobile --->
|
||||
<script>
|
||||
if(window.screen.width > 800)
|
||||
{
|
||||
document.write('<script src="/scripts/three.r95.min.js"><\/script>' +
|
||||
'<script src="/scripts/vanta.net.min.js"><\/script>' +
|
||||
'<script>' +
|
||||
'VANTA.NET({'+
|
||||
'el: "#vantajs",'+
|
||||
'color: 0x3fd5ff,'+
|
||||
'backgroundColor: 0x190f2b,'+
|
||||
'mouseControls: true,'+
|
||||
'touchControls: true,'+
|
||||
'minHeight: 200.00,'+
|
||||
'minWidth: 200.00,'+
|
||||
'scale: 1.00,'+
|
||||
'scaleMobile: 1.00'+
|
||||
'})'+
|
||||
'<\/script>');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
42
pages/about.html
Normal file
42
pages/about.html
Normal file
@ -0,0 +1,42 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=0">
|
||||
<link href="style.css" rel="stylesheet" type="text/css">
|
||||
<link rel="shortcut icon" type="image/png" href="/images/logos/brain-128.png"/>
|
||||
<title>Mind Overflow :: About</title>
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.js"
|
||||
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="/scripts/arrow-fade.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<div class="topnav">
|
||||
<a href="/">Home</a>
|
||||
<a class="rainbow" href="https://old.mind-overflow.net/career.html">Services</a>
|
||||
<a href="/pages/contact.html">Contact</a>
|
||||
<a href="https://cloud.mind-overflow.net/">Cloud</a>
|
||||
</div>
|
||||
<h1>About</h1>
|
||||
<i class="arrow-down"></i>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<h2 style="font-style: italic;">A little biography</h2>
|
||||
<p>Hi. I'm Lorenzo and I'm an 18 years old high school student.</p>
|
||||
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas risus nibh, ornare eu eleifend et, facilisis eget odio. Suspendisse tellus leo, cursus vel mi ullamcorper, ultrices commodo nisl. Donec auctor sodales urna id vehicula. Nunc mattis dapibus tincidunt. Sed ac euismod ante. Nunc laoreet ante vitae dolor vulputate, quis volutpat ex posuere. Duis in porttitor odio. Sed id accumsan dolor. Donec eu dictum nibh.</p>
|
||||
|
||||
<p>Curabitur ac efficitur eros. Etiam elementum nibh hendrerit, commodo urna ut, convallis eros. Aenean ac feugiat elit. Quisque vestibulum ante in ipsum feugiat, in malesuada dolor mattis. Morbi id quam malesuada, molestie tortor quis, iaculis odio. Maecenas efficitur, elit et dictum volutpat, mauris dui dignissim ex, in laoreet tellus felis nec risus. Cras tincidunt consectetur magna ac tincidunt.</p>
|
||||
|
||||
<p>Curabitur sed tellus lobortis, euismod massa ac, dapibus velit. Nulla vestibulum ex lectus, eget rhoncus lectus sagittis eget. Nullam consectetur a nulla non auctor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus ac sollicitudin arcu, in condimentum mi. In tempus dolor et diam faucibus, eget sollicitudin leo facilisis. Praesent eu finibus odio. Ut quam neque, viverra at eros vel, pretium molestie ipsum. Proin facilisis purus purus, non mattis ante efficitur ac. Nulla porta, nulla non tristique blandit, libero ligula posuere lorem, eu vehicula leo mi sed lorem. Fusce at aliquam nunc.</p>
|
||||
|
||||
<p>Mauris dignissim velit in ipsum vestibulum laoreet. Nam vitae ornare magna. Etiam ultricies feugiat elementum. Sed aliquet dolor quis ullamcorper accumsan. Curabitur posuere diam eu orci tempor, non hendrerit sem convallis. In hac habitasse platea dictumst. Aenean orci odio, porta in dictum sit amet, rutrum non eros. Suspendisse ac volutpat nibh, eget ultrices odio. Curabitur ut faucibus libero. Mauris commodo quis nunc non laoreet. Suspendisse congue semper sapien, vel bibendum dolor.</p>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<h3>Copyright © 2020 ― Lorenzo Dellacà</h3>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
43
pages/contact.html
Normal file
43
pages/contact.html
Normal file
@ -0,0 +1,43 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=0">
|
||||
<link href="style.css" rel="stylesheet" type="text/css">
|
||||
<link rel="shortcut icon" type="image/png" href="/images/logos/brain-128.png"/>
|
||||
<title>Mind Overflow :: Contact</title>
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.js"
|
||||
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="/scripts/arrow-fade.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<div class="topnav">
|
||||
<a href="/">Home</a>
|
||||
<a href="/pages/about.html">About</a>
|
||||
<a class="rainbow" href="https://old.mind-overflow.net/career.html">Services</a>
|
||||
<a href="https://cloud.mind-overflow.net/">Cloud</a>
|
||||
</div>
|
||||
<h1>Contact</h1>
|
||||
<i class="arrow-down"></i>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<h2>Use any of the following links to get in touch with me!</h2>
|
||||
<ul>
|
||||
<li>Email: <a href="mailto:lore%6Ezo.dellaca@mind-ov%65rflow.net">lorenzo.dellaca@mind-overflow.net</a></li>
|
||||
<li>Instagram: <a href="https://instagram.com/mind.overflow" target="_blank">@mind.overflow</a></li>
|
||||
<li>YouTube: <a href="https://youtube.com/user/Qwertylollo" target="_blank">mind.overflow</a></li>
|
||||
<li>Twitter: <a href="https://twitter.com/mind0verflow" target="_blank">@mind0verflow</a></li>
|
||||
<li>SoundCloud: <a href="https://soundcloud.com/lol7344" target="_blank">lol7344</a></li>
|
||||
<li>GitHub: <a href="https://github.com/lol7344/" target="_blank">lol7344</a></li>
|
||||
<li>Reddit: <a href="https://reddit.com/user/mind_overflow" target="_blank">u/mind_overflow</a> or <a href="https://reddit.com/user/lol7344" target="_blank">u/lol7344</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<footer>
|
||||
<h3>Copyright © 2020 ― Lorenzo Dellacà</h3>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
321
pages/style.css
Normal file
321
pages/style.css
Normal file
@ -0,0 +1,321 @@
|
||||
/* CSS Document */
|
||||
|
||||
html, body {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 800;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: black;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.topnav {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-transform: uppercase;
|
||||
padding-top: 20px;
|
||||
-moz-user-select: none;
|
||||
-webkis-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-o-user-select: none;
|
||||
}
|
||||
|
||||
.topnav a {
|
||||
color: white;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
padding: 14px;
|
||||
font-size: 30px;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.topnav a.rainbow {
|
||||
background: linear-gradient(to right, #33ffc5 20%, #fc33ff, #ff3370, #ff3333, #3dff33, #33ffc5);
|
||||
background-size: 800px, 800px;
|
||||
color: aquamarine;
|
||||
background-clip: text;
|
||||
text-fill-color: transparent;
|
||||
animation: gradient 2s linear infinite;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 120px;
|
||||
margin: 0%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 10%;
|
||||
}
|
||||
|
||||
.arrow-down {
|
||||
border: solid white;
|
||||
opacity: 0.4;
|
||||
border-width: 0 2px 2px 0;
|
||||
display: inline-block;
|
||||
padding: 6px;
|
||||
margin-left: -6px;
|
||||
position: absolute;
|
||||
transform: rotate(45deg);
|
||||
animation: bounce 1.5s infinite;
|
||||
transition: 1s;
|
||||
}
|
||||
|
||||
/* ARROW BOUNCE */
|
||||
@keyframes bounce {
|
||||
0% { top: 94%; }
|
||||
50% { top: 92%; }
|
||||
100% { top: 94%; }
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0%;
|
||||
padding: 20px;
|
||||
padding-top: 38px;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0%;
|
||||
padding: 20px;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.top-bar, footer {
|
||||
background: linear-gradient(45deg, #067062, #063d70, #2d0670, #4e0670, #700667);
|
||||
background-size: 1000%, 100%;
|
||||
animation: gradient 7s linear infinite;
|
||||
animation-direction: alternate-reverse;
|
||||
color: white;
|
||||
|
||||
-moz-user-select: none;
|
||||
-webkis-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-o-user-select: none;
|
||||
}
|
||||
.top-bar {
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 200;
|
||||
background-color: #151515;
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
padding-left: 10%;
|
||||
padding-right: 10%;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.content a {
|
||||
text-decoration: none;
|
||||
color: paleturquoise;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0%;
|
||||
margin: 0%;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
|
||||
/* ANIMATED GRADIENT BACKGROUND */
|
||||
@keyframes gradient {
|
||||
0% {background-position: 0%}
|
||||
100% {background-position: 100%}
|
||||
}
|
||||
|
||||
/*MOBILE*/
|
||||
@media (min-width: 0px) and (max-width: 200px) {
|
||||
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 15px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
h3
|
||||
{
|
||||
font-size: 8px;
|
||||
}
|
||||
.content {
|
||||
font-size: 10px;
|
||||
}
|
||||
.topnav a {
|
||||
font-size: 8px;
|
||||
}
|
||||
li {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 200px) and (max-width: 300px) {
|
||||
|
||||
h1 {
|
||||
font-size: 39px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 18px;
|
||||
padding-top: 25px;
|
||||
}
|
||||
h3
|
||||
{
|
||||
font-size: 10px;
|
||||
}
|
||||
.content {
|
||||
font-size: 13px;
|
||||
}
|
||||
.topnav a {
|
||||
font-size: 11px;
|
||||
}
|
||||
li {
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 300px) and (max-width: 400px) {
|
||||
|
||||
h1 {
|
||||
font-size: 52px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 21px;
|
||||
padding-top: 28px;
|
||||
}
|
||||
h3
|
||||
{
|
||||
font-size: 13px;
|
||||
}
|
||||
.content {
|
||||
font-size: 16px;
|
||||
}
|
||||
.topnav a {
|
||||
font-size: 18px;
|
||||
}
|
||||
li {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 400px) and (max-width: 500px) {
|
||||
|
||||
h1 {
|
||||
font-size: 64px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 25px;
|
||||
padding-top: 31px;
|
||||
}
|
||||
h3
|
||||
{
|
||||
font-size: 15px;
|
||||
}
|
||||
.content {
|
||||
font-size: 18px;
|
||||
}
|
||||
.topnav a {
|
||||
font-size: 27px;
|
||||
}
|
||||
li {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 500px) and (max-width: 600px) {
|
||||
|
||||
h1 {
|
||||
font-size: 80px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
h3
|
||||
{
|
||||
font-size: 18px;
|
||||
}
|
||||
.content {
|
||||
font-size: 20px;
|
||||
}
|
||||
.topnav a {
|
||||
font-size: 29px;
|
||||
}
|
||||
li {
|
||||
padding: 13px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 600px) and (max-width: 800px) {
|
||||
|
||||
h1 {
|
||||
font-size: 95px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 35px;
|
||||
}
|
||||
h3
|
||||
{
|
||||
font-size: 20px;
|
||||
}
|
||||
.content {
|
||||
font-size: 23px;
|
||||
}
|
||||
.topnav a {
|
||||
font-size: 29px;
|
||||
}
|
||||
}
|
||||
/* 4K+ MONITORS*/
|
||||
@media (min-width: 2100px) {
|
||||
|
||||
h1 {
|
||||
font-size: 150px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 45px;
|
||||
padding: 40px;
|
||||
}
|
||||
.content {
|
||||
font-size: 25px;
|
||||
}
|
||||
li {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Oswald';
|
||||
font-style: normal;
|
||||
font-weight: 100;
|
||||
src: url(https://fonts.gstatic.com/s/oswald/v24/TK3_WkUHHAIjg75cFRf3bXL8LICs169vsUZiZQ.woff2) format('woff2');
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
src: url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_c5H3gnD_g.woff2) format('woff2');
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 200;
|
||||
src: url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_aZA3gnD_g.woff2) format('woff2');
|
||||
}
|
||||
10
scripts/arrow-fade.js
Normal file
10
scripts/arrow-fade.js
Normal file
@ -0,0 +1,10 @@
|
||||
// JavaScript Document
|
||||
$(document).ready(function(){
|
||||
$(window).scroll(function(){
|
||||
if($(this).scrollTop() > $(window).height()*0.3){
|
||||
$(".arrow-down").css({"opacity" : "0"})
|
||||
} else {
|
||||
$(".arrow-down").css({"opacity" : "0.4"})
|
||||
}
|
||||
})
|
||||
})
|
||||
211
scripts/click-gb.js
Normal file
211
scripts/click-gb.js
Normal file
@ -0,0 +1,211 @@
|
||||
var c = document.getElementById("c");
|
||||
var ctx = c.getContext("2d");
|
||||
var cH;
|
||||
var cW;
|
||||
var bgColor = "#FF6138";
|
||||
var animations = [];
|
||||
var circles = [];
|
||||
|
||||
var colorPicker = (function() {
|
||||
var colors = ["#FF6138", "#FFBE53", "#2980B9", "#282741"];
|
||||
var index = 0;
|
||||
function next() {
|
||||
index = index++ < colors.length - 1 ? index : 0;
|
||||
return colors[index];
|
||||
}
|
||||
function current() {
|
||||
return colors[index];
|
||||
}
|
||||
return {
|
||||
next: next,
|
||||
current: current
|
||||
};
|
||||
})();
|
||||
|
||||
function removeAnimation(animation) {
|
||||
var index = animations.indexOf(animation);
|
||||
if (index > -1) animations.splice(index, 1);
|
||||
}
|
||||
|
||||
function calcPageFillRadius(x, y) {
|
||||
var l = Math.max(x - 0, cW - x);
|
||||
var h = Math.max(y - 0, cH - y);
|
||||
return Math.sqrt(Math.pow(l, 2) + Math.pow(h, 2));
|
||||
}
|
||||
|
||||
function addClickListeners() {
|
||||
document.addEventListener("touchstart", handleEvent);
|
||||
document.addEventListener("mousedown", handleEvent);
|
||||
}
|
||||
|
||||
function handleEvent(e) {
|
||||
if (e.touches) {
|
||||
e.preventDefault();
|
||||
e = e.touches[0];
|
||||
}
|
||||
var currentColor = colorPicker.current();
|
||||
var nextColor = colorPicker.next();
|
||||
var targetR = calcPageFillRadius(e.pageX, e.pageY);
|
||||
var rippleSize = Math.min(200, cW * 0.4);
|
||||
var minCoverDuration = 750;
|
||||
|
||||
var pageFill = new Circle({
|
||||
x: e.pageX,
|
||||
y: e.pageY,
|
||||
r: 0,
|
||||
fill: nextColor
|
||||
});
|
||||
var fillAnimation = anime({
|
||||
targets: pageFill,
|
||||
r: targetR,
|
||||
duration: Math.max(targetR / 2, minCoverDuration),
|
||||
easing: "easeOutQuart",
|
||||
complete: function() {
|
||||
bgColor = pageFill.fill;
|
||||
removeAnimation(fillAnimation);
|
||||
}
|
||||
});
|
||||
|
||||
var ripple = new Circle({
|
||||
x: e.pageX,
|
||||
y: e.pageY,
|
||||
r: 0,
|
||||
fill: currentColor,
|
||||
stroke: {
|
||||
width: 3,
|
||||
color: currentColor
|
||||
},
|
||||
opacity: 1
|
||||
});
|
||||
var rippleAnimation = anime({
|
||||
targets: ripple,
|
||||
r: rippleSize,
|
||||
opacity: 0,
|
||||
easing: "easeOutExpo",
|
||||
duration: 900,
|
||||
complete: removeAnimation
|
||||
});
|
||||
|
||||
var particles = [];
|
||||
for (var i = 0; i < 32; i++) {
|
||||
var particle = new Circle({
|
||||
x: e.pageX,
|
||||
y: e.pageY,
|
||||
fill: currentColor,
|
||||
r: anime.random(24, 48)
|
||||
});
|
||||
particles.push(particle);
|
||||
}
|
||||
var particlesAnimation = anime({
|
||||
targets: particles,
|
||||
x: function(particle) {
|
||||
return particle.x + anime.random(rippleSize, -rippleSize);
|
||||
},
|
||||
y: function(particle) {
|
||||
return particle.y + anime.random(rippleSize * 1.15, -rippleSize * 1.15);
|
||||
},
|
||||
r: 0,
|
||||
easing: "easeOutExpo",
|
||||
duration: anime.random(1000, 1300),
|
||||
complete: removeAnimation
|
||||
});
|
||||
animations.push(fillAnimation, rippleAnimation, particlesAnimation);
|
||||
}
|
||||
|
||||
function extend(a, b) {
|
||||
for (var key in b) {
|
||||
if (b.hasOwnProperty(key)) {
|
||||
a[key] = b[key];
|
||||
}
|
||||
}
|
||||
return a;
|
||||
}
|
||||
|
||||
var Circle = function(opts) {
|
||||
extend(this, opts);
|
||||
};
|
||||
|
||||
Circle.prototype.draw = function() {
|
||||
ctx.globalAlpha = this.opacity || 1;
|
||||
ctx.beginPath();
|
||||
ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
|
||||
if (this.stroke) {
|
||||
ctx.strokeStyle = this.stroke.color;
|
||||
ctx.lineWidth = this.stroke.width;
|
||||
ctx.stroke();
|
||||
}
|
||||
if (this.fill) {
|
||||
ctx.fillStyle = this.fill;
|
||||
ctx.fill();
|
||||
}
|
||||
ctx.closePath();
|
||||
ctx.globalAlpha = 1;
|
||||
};
|
||||
|
||||
var animate = anime({
|
||||
duration: Infinity,
|
||||
update: function() {
|
||||
ctx.fillStyle = bgColor;
|
||||
ctx.fillRect(0, 0, cW, cH);
|
||||
animations.forEach(function(anim) {
|
||||
anim.animatables.forEach(function(animatable) {
|
||||
animatable.target.draw();
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
var resizeCanvas = function() {
|
||||
cW = window.innerWidth;
|
||||
cH = window.innerHeight;
|
||||
c.width = cW * devicePixelRatio;
|
||||
c.height = cH * devicePixelRatio;
|
||||
ctx.scale(devicePixelRatio, devicePixelRatio);
|
||||
};
|
||||
|
||||
(function init() {
|
||||
resizeCanvas();
|
||||
if (window.CP) {
|
||||
// CodePen's loop detection was causin' problems
|
||||
// and I have no idea why, so...
|
||||
window.CP.PenTimer.MAX_TIME_IN_LOOP_WO_EXIT = 6000;
|
||||
}
|
||||
window.addEventListener("resize", resizeCanvas);
|
||||
addClickListeners();
|
||||
if (!!window.location.pathname.match(/fullcpgrid/)) {
|
||||
startFauxClicking();
|
||||
}
|
||||
handleInactiveUser();
|
||||
})();
|
||||
|
||||
function handleInactiveUser() {
|
||||
var inactive = setTimeout(function() {
|
||||
fauxClick(cW / 2, cH / 2);
|
||||
}, 2000);
|
||||
|
||||
function clearInactiveTimeout() {
|
||||
clearTimeout(inactive);
|
||||
document.removeEventListener("mousedown", clearInactiveTimeout);
|
||||
document.removeEventListener("touchstart", clearInactiveTimeout);
|
||||
}
|
||||
|
||||
document.addEventListener("mousedown", clearInactiveTimeout);
|
||||
document.addEventListener("touchstart", clearInactiveTimeout);
|
||||
}
|
||||
|
||||
function startFauxClicking() {
|
||||
setTimeout(function() {
|
||||
fauxClick(
|
||||
anime.random(cW * 0.2, cW * 0.8),
|
||||
anime.random(cH * 0.2, cH * 0.8)
|
||||
);
|
||||
startFauxClicking();
|
||||
}, anime.random(200, 900));
|
||||
}
|
||||
|
||||
function fauxClick(x, y) {
|
||||
var fauxClick = new Event("mousedown");
|
||||
fauxClick.pageX = x;
|
||||
fauxClick.pageY = y;
|
||||
document.dispatchEvent(fauxClick);
|
||||
}
|
||||
949
scripts/three.r95.min.js
vendored
Normal file
949
scripts/three.r95.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
scripts/vanta.net.min.js
vendored
Normal file
1
scripts/vanta.net.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user