initial commit
This commit is contained in:
commit
0ab40ccc70
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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');
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
|
|
@ -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>
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
@ -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');
|
||||
}
|
||||
|
|
@ -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"})
|
||||
}
|
||||
})
|
||||
})
|
||||
|
|
@ -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);
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Reference in New Issue