Guusvanmeerveld
/
First-Website
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Big changes to the homepage

Browse Source
add-license-1
Guuq 5 years ago
parent 7b9fb321d1
commit c9f921518d
28 changed files with 325 additions and 167 deletions
Show Stats Download Patch File Download Diff File

52
405.html
Unescape View File

@ -0,0 +1,52 @@
<!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">
<link rel="stylesheet" href="/resources/css/404.css">
<link rel="stylesheet" href="/resources/css/cssall.css">
<script src="https://kit.fontawesome.com/340f4d917c.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="/resources/css/navbar.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<title>Error</title>
</head>
<body>
<style>
* {
font-family: 'Open Sans';
}
div {
background-color: #33353d;
height: 100%;
padding: 10%;
position: absolute;
top: 0;
width: 100%;
}
p {
margin-top: 1rem!important;
cursor: pointer;
font-size: 15px;
}
h1 {
margin: 0;
text-align: center;
}
</style>
<div>
<h1 style="font-size: 10rem;" align="center">405s.</h1><br>
<h1>That's an error.</h1>
<p onclick="window.history.back();" align="center">Click here to go back</p>
</div>
<script src="/resources/js/navbar.json.js"></script>
<script src="/resources/js/insertNavbar.js"></script>
<script src="/resources/javall.js" charset="utf-8"></script>
</body>
</html>

2
contact/index.html
Unescape View File

@ -18,7 +18,7 @@
<div class="main"> <div class="main">
<h1>Need more info?</h1> <h1>Need more info?</h1>
<div class="form"> <div class="form">
<form action="/thank-you" method="post"> <form action="/contact/thank-you/" method="get">
<h3>Name and last name<span>*</span></h3> <h3>Name and last name<span>*</span></h3>
<input type="text" class="dataInput input" required name="name" autofocus spellcheck="false"> <input type="text" class="dataInput input" required name="name" autofocus spellcheck="false">
<h3>E-mail<span>*</span></h3> <h3>E-mail<span>*</span></h3>

41
contact/thank-you/index.html
Unescape View File

@ -0,0 +1,41 @@
<!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>Thank you</title>
<link rel="stylesheet" href="/resources/css/cssall.css">
<link rel="stylesheet" href="/resources/css/navbar.css">
<script src="https://kit.fontawesome.com/340f4d917c.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
.mainContent {
background-color: #33353d;
height: 100%;
padding-top: 15rem;
position: absolute;
top: 0;
width: 100%;
}
h1, p {
width: 80%;
text-align: center;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="mainContent">
<h1 style="font-size: 5rem;">Thanks for submitting your message</h1><br>
<p onclick="window.open('/', '_self')" style="cursor:pointer;">Click here to go home</p>
</div>
<script src="/resources/js/navbar.json.js"></script>
<script src="/resources/js/insertNavbar.js"></script>
<script src="/resources/js/javall.js"></script>
</body>
</html>

140
css.css
Unescape View File

@ -1,85 +1,90 @@
/* Main CSS */ /* Main CSS */
svg {
position: relative;
z-index: -1;
padding-top: 49px;
fill: #454752;
stroke-width: 1;
stroke: #454752;
height: 100vh;
}
.mainContent { .mainContent {
overflow: visible; padding-top: 10rem;
float: left; width: 100%;
padding: 6rem 0 0 2rem;
display: inline-block;
width: 50%;
height: 100vh; height: 100vh;
} }
.mainContent::-webkit-scrollbar {
display: none;
}
/* Splash */
.logo {
width: 8rem;
height: 8rem;
margin-right: 2rem;
}
.name { .name {
margin: 0 auto;
width: 80%;
font-size: 4rem; font-size: 4rem;
white-space: nowrap; white-space: nowrap;
text-align: center;
height: 5rem;
}
.quickButtons {
margin: 0 auto;
width: 50%;
display: flex;
justify-content: center;
} }
.keepclicking { .goButton {
background-color: #3b3c45; background-color: #33353d;
width: 40rem;
height: 12rem;
transition: background-color .4s;
border: 0; border: 0;
margin-top: 8rem;
border-radius: .3rem;
color: white; color: white;
padding: 1rem; border-bottom: #26282f 5px solid;
border-radius: .5rem; padding: 2rem;
margin-top: 3rem; font-size: 2rem;
} }
.keepclicking:hover { .goButton:active {
background-color: #33343b; border: 0;
border-top: #26282f 5px solid;
}
.slideUp {
position: absolute;
padding: .7rem;
width: 4rem;
height: 4rem;
border-radius: 50%;
border: 2px solid white;
text-align: center;
left: calc(50% - 2rem);
top: 90vh;
} }
.keepclicking:focus { .slideUp:hover {
outline: 0; color: white!important;
} }
.playground { /* .name:hover + #rocket {
border-right: white 4px solid; animation-name: launchRocket;
width: 20rem; animation-duration: 2.5s;
display: inline-block; animation-timing-function: ease-in-out;
} }
.code { @keyframes launchRocket {
vertical-align: top; from {top: 100vh}
margin-left: 3.7rem; to {top: -20vh}
margin-top: 10px;
} }
.minify { #rocket {
border-left: white 4px solid; position: absolute;
width: 15rem; top: 100vh;
margin-left: 3rem; z-index: -1;
display: inline-block; left: calc(50% - 7rem);
} width: 12rem;
.cut { height: 14rem;
vertical-align: top; } */
margin-top: 10px; .aboutPages {
height: 30vh;
float: left;
background-color: #33353d;
width: 100%;
box-shadow: 0 -1px 15px 5px hsla(0, 0%, 0%, 0.8);
} }
/* Clock */ .infoBlockPages {
#timeBox { width: 50%;
margin-left: 1rem; border-right: #454752 5px solid;
padding: 1rem; display: flex;
font-family: 'Open Sans', sans-serif; align-items: center;
height: 100%;
float: left;
} }
.time { .infoHeadPages {
display: inline-block; margin-left: 1rem;
font-size: 7rem; padding-right: 1rem;
margin: 0; border-right: 5px solid white;
} }
#date { .infoTextPages {
font-size: 2rem; margin-left: 2rem;
margin: 0;
} }
/* About */ /* About */
.about { .about {
@ -89,13 +94,14 @@ svg {
align-items: center; align-items: center;
width: 100%; width: 100%;
float: left; float: left;
height: 35vh; height: 30vh;
background-color: #33353d; background-color: #454752;
} }
.head { .infoBlockMe {
padding: 1rem; padding: 1rem;
text-align: center; text-align: center;
display: inline-block; display: inline-block;
height: 10rem;
width: 25rem; width: 25rem;
border-right: 4px solid white; border-right: 4px solid white;
} }

2
feedback/index.html
Unescape View File

@ -76,7 +76,7 @@
</ul> </ul>
</div> </div>
<p id="copyright">&#169; 2019 Guus van Meerveld</p> <p class="copyright">&#169; 2019 Guus van Meerveld</p>
</footer> </footer>

1
feedback/js.js
Unescape View File

@ -1 +0,0 @@
sdfsfsdf

56
index.html
Unescape View File

@ -13,36 +13,46 @@
<link rel="stylesheet" href="/resources/css/navbar.css"> <link rel="stylesheet" href="/resources/css/navbar.css">
<script src="https://kit.fontawesome.com/340f4d917c.js" crossorigin="anonymous"></script> <script src="https://kit.fontawesome.com/340f4d917c.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head> </head>
<body> <body>
<div class="box mainContent"> <!-- Main Content -->
<div class="mainContent">
<h1 class="name"><img src="/resources/img/favicon.ico" class="logo" alt="logo">Guus van Meerveld</h1> <h1 class="name">Guus van Meerveld</h1>
<div class="quickButtons">
<button class="keepclicking" onclick="window.open('/playground', '_self')" title="Test your HTML live at playground!"> <button class="goButton">Ga naar Playground</button>
<h1 class="playground">Want to test your HTML code?</h1> <button class="goButton" style="margin-left: 5rem;">Ga naar Minify</button>
<i class="fas fa-code fa-8x code"></i> </div>
</button> <a class="slideUp" href="#2" id="2"><i class="fas fa-caret-up fa-2x"></i></a>
<button class="keepclicking" onclick="window.open('/minify', '_self')" title="Minify your HTML/CSS/JavaScript code!"> <!-- <img src="/resources/img/rocket.png" alt="rocket" id="rocket"> -->
<i class="fas fa-cut fa-8x cut"></i>
<h1 class="minify">Need to minify your code?</h1>
</button>
</div> </div>
<!-- Triangle -->
<svg>
<polygon points="0,5 0,2000 300,5"/>
</svg>
<!-- About --> <!-- About -->
<div class="about"> <div class="about">
<h1 class="head">This website is built for those who like to code.</h1> <h1 class="infoBlockMe">Mijn naam is Guus van Meerveld</h1>
<h1 class="head">And it is built by those who like to code</h1> <h1 class="infoBlockMe">Ik ben 15 jaar oud en heb deze website gebouwd</h1>
<h1 class="head" style="border:0;">Suggest things you would like to see at <a href="/contact" style="text-decoration:underline!important;">contact</a></h1> <h1 class="infoBlockMe" style="border:0;">Als je suggesties hebt, ga dan naar <a href="/contact" style="text-decoration:underline!important;">contact</a></h1>
</div>
<!-- Info about the pages on the site -->
<div class="aboutPages">
<div class="infoBlockPages">
<div class="infoHeadPages">
<h2>Het doel van deze website is om handig tools aan te bieden.</h2>
</div>
<div class="infoTextPages">
<h2></h2>
</div>
</div><div class="infoBlockPages">
<div class="infoHeadPages">
<h2>Yeet</h2>
</div>
<div class="infoTextPages">
<h2>Yote</h2>
</div>
</div>
</div> </div>
<!-- Footer --> <!-- Footer -->
@ -75,7 +85,7 @@
</ul> </ul>
</div> </div>
<p id="copyright">&#169; 2019 Guus van Meerveld</p> <p class="copyright">&#169; 2019 Guus van Meerveld</p>
</footer> </footer>

12
js.js
Unescape View File

@ -0,0 +1,12 @@
$(document).ready(function(){
$(".slideUp").on('click', function(event) {
if (this.hash !== "") {
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 1000, function(){
window.location.hash = hash;
});
}
});
});

31
minify/css.css
Unescape View File

@ -0,0 +1,31 @@
.mainContent {
height: 100vh;
width: 100%;
padding: 7rem;
padding-bottom: 0;
background-color: #222226;
}
#inputCode {
width: 100%;
height: 85%;
}
.langButton {
background-color: rgb(59, 60, 69);
border: 0;
color: white;
float: left;
padding: 1rem 1.5rem;
}
#run {
float: right;
}
@media screen and (min-width:0px) and (max-width:1000px) {
.mainContent {
padding: 2rem;
padding-top: 5rem;
}
.langButton {
padding: .5rem 1rem;
font-size: 15px;
}
}

63
minify/index.html
Unescape View File

@ -0,0 +1,63 @@
<!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>Minify</title>
<link rel="stylesheet" href="/resources/css/cssall.css">
<link rel="stylesheet" href="/minify/css.css">
<link rel="stylesheet" href="/resources/css/navbar.css">
<script src="https://kit.fontawesome.com/340f4d917c.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div class="mainContent">
<button class="langButton" onclick="selectCode('html')">HTML</button>
<button class="langButton" onclick="selectCode('css')">CSS</button>
<button class="langButton" onclick="selectCode('js')">JS</button>
<button id="run" class="langButton">RUN</button>
<textarea name="" spellcheck="false" class="input" placeholder="Type the code that you want to minify here" id="inputCode" cols="30" rows="10"></textarea>
</div>
<footer>
<!-- Info -->
<div>
<h4>LINKS</h4>
<ul>
<li><a href="https://samtaen.ml">Sam Taen</a></li>
<li><a href="http://jonathanbos.nl">Jonathan Bos</a></li>
</ul>
</div>
<div>
<h4>SOCIAL</h4>
<ul>
<li><a href="https://www.youtube.com/channel/UCYuqpoMay5SezCBrA_HKVWQ?view_as=subscriber">Youtube</a></li>
<li><a href="https://twitter.com/GuusvanMeerveld">Twitter</a></li>
<li><a href="https://www.reddit.com/user/Marho_">Reddit</a></li>
<li><a href="https://instagram.com/gerda.6">Instagram</a></li>
</ul>
</div>
<div>
<h4>TOOLS</h4>
<ul>
<li><a href="https://w3schools.com">W3schools</a></li>
<li><a href="https://stackoverflow.com/">Stack overflow</a></li>
<li><a href="https://cloudflare.com">Cloudflare</a></li>
<li><a href="https://github.com">Github</a></li>
</ul>
</div>
<p class="copyright">&#169; 2019 Guus van Meerveld</p>
</footer>
<script src="/resources/js/navbar.json.js"></script>
<script src="/resources/js/insertNavbar.js"></script>
<script src="/minify/js.js"></script>
<script src="/resources/js/javall.js"></script>
</body>
</html>

9
minify/js.js
Unescape View File

@ -0,0 +1,9 @@
var d = document.getElementById.bind(document);
var g = document.querySelector.bind(document);
function selectCode(source) {
switch (source){
case: html
}
}

2
playground/index.html
Unescape View File

@ -61,7 +61,7 @@
</ul> </ul>
</div> </div>
<p id="copyright">&#169; 2019 Guus van Meerveld</p> <p class="copyright">&#169; 2019 Guus van Meerveld</p>
</footer> </footer>

10
resources/css/cssall.css
Unescape View File

@ -64,6 +64,9 @@ a {
a:hover { a:hover {
color: gray!important; color: gray!important;
} }
button:focus {
outline: 0!important;
}
/* Standard block styling */ /* Standard block styling */
.box { .box {
background-color: #454752; background-color: #454752;
@ -75,7 +78,7 @@ a:hover {
color: white; color: white;
outline: 0!important; outline: 0!important;
border-radius: 0.2rem; border-radius: 0.2rem;
transition: border .3s ease, background-color .3s; transition: background-color .3s;
} }
.button:hover { .button:hover {
background-color: #427a71; background-color: #427a71;
@ -91,7 +94,7 @@ a:hover {
color: white; color: white;
outline: 0!important; outline: 0!important;
border-radius: 0.2rem; border-radius: 0.2rem;
transition: border .3s ease, background-color .3s, border .3s; transition: background-color .3s, border .3s;
} }
.cancelButton:hover { .cancelButton:hover {
background-color: #a3281f; background-color: #a3281f;
@ -134,7 +137,7 @@ footer ul {
footer li { footer li {
margin-top: 1rem; margin-top: 1rem;
} }
#copyright { .copyright {
font-size: 15px; font-size: 15px;
position: absolute; position: absolute;
display: inline-block; display: inline-block;
@ -142,7 +145,6 @@ footer li {
bottom: 1rem; bottom: 1rem;
right: 1rem; right: 1rem;
white-space: nowrap; white-space: nowrap;
vertical-align: baseline;
} }
@media screen and (min-width:0px) and (max-width:1000px) { @media screen and (min-width:0px) and (max-width:1000px) {
footer { footer {

4
resources/css/navbar.css
Unescape View File

@ -89,11 +89,11 @@
.navList{ .navList{
padding: 10px 0 10px 1rem!important; padding: 10px 0 10px 1rem!important;
margin: 0!important; margin: 0!important;
border-top: #454752 2px solid; border-top: #33353d 2px solid;
} }
.navigation li{ .navigation li{
display: none; display: none;
background-color: #101012; background-color: #212126;
} }
.navigation .fa-bars:hover + ul li, .navigation ul:hover li { .navigation .fa-bars:hover + ul li, .navigation ul:hover li {
display: block!important; display: block!important;

BIN
resources/img/codepanta.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 386 B

BIN
resources/img/cross.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.8 KiB

BIN
resources/img/googlemaps.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

BIN
resources/img/googletranslate.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 123 KiB

BIN
resources/img/magister.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.4 KiB

BIN
resources/img/moon.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
resources/img/onedrive.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.9 KiB

BIN
resources/img/reddit.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.6 KiB

BIN
resources/img/rocket.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
resources/img/shortcut.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 23 KiB

BIN
resources/img/spotify.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 67 KiB

BIN
resources/img/w3schools.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.8 KiB

BIN
resources/img/youtube.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 18 KiB

67
vuurjongen-en-watermeisje-4/index.html
Unescape View File

@ -1,67 +0,0 @@
<!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">
<link rel="stylesheet" href="/resources/css/cssall.css">
<link rel="stylesheet" href="/resources/css/navbar.css">
<script src="https://kit.fontawesome.com/340f4d917c.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>Vuurjongen en Watermeisje</title>
<style>
iframe {
width: 100%;
height: 94.7vh;
border: 0;
margin-top: 55px;
}
</style>
</head>
<body>
<iframe id="game" src="https://html5.gamedistribution.com/3790681b69584409b7f681a8e400102d/" allowfullscreen></iframe>
<!-- Footer -->
<footer>
<!-- Info -->
<div>
<h4>LINKS</h4>
<ul>
<li><a href="https://samtaen.ml">Sam Taen</a></li>
<li><a href="http://jonathanbos.nl">Jonathan Bos</a></li>
</ul>
</div>
<div>
<h4>SOCIAL</h4>
<ul>
<li><a href="https://www.youtube.com/channel/UCYuqpoMay5SezCBrA_HKVWQ?view_as=subscriber">Youtube</a></li>
<li><a href="https://twitter.com/GuusvanMeerveld">Twitter</a></li>
<li><a href="https://www.reddit.com/user/Marho_">Reddit</a></li>
<li><a href="https://instagram.com/gerda.6">Instagram</a></li>
</ul>
</div>
<div>
<h4>TOOLS</h4>
<ul>
<li><a href="https://w3schools.com">W3schools</a></li>
<li><a href="https://stackoverflow.com/">Stack overflow</a></li>
<li><a href="https://cloudflare.com">Cloudflare</a></li>
<li><a href="https://github.com">Github</a></li>
</ul>
</div>
<p id="copyright">&#169; 2019 Guus van Meerveld</p>
</footer>
<script src="/resources/js/navbar.json.js"></script>
<script src="/resources/js/insertNavbar.js"></script>
<script src="/resources/js/javall.js"></script>
<script src="/vuurjongen-en-watermeisje-4/js.js"></script>
</body>
</html>