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

Updated everything

Browse Source
add-license-1
Guuq 5 years ago
parent c79d3785c4
commit 03cdc67e2c
24 changed files with 295 additions and 108 deletions
Show Stats Download Patch File Download Diff File

3
contact/css.css
Unescape View File

@ -1,6 +1,9 @@
.main { .main {
width: 100%; width: 100%;
float: left; float: left;
background-position: center;
background-image: url("/resources/img/leaves.jpg");
background-size: cover;
} }
.main h1 { .main h1 {
text-align: center; text-align: center;

8
contact/index.html
Unescape View File

@ -16,21 +16,21 @@
<body> <body>
<div class="main"> <div class="main">
<h1>Need more info?</h1> <h1>Meer info?</h1>
<div class="form"> <div class="form">
<form action="/contact/thank-you/" method="get"> <form action="/contact/thank-you/" method="get">
<h3>Name and last name<span>*</span></h3> <h3>Naam en achternaam<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>
<input type="text" class="dataInput input" required name="email" spellcheck="false"> <input type="text" class="dataInput input" required name="email" spellcheck="false">
<h3>Message<span>*</span></h3> <h3>Bericht<span>*</span></h3>
<input type="text" class="dataInput input" required name="message" spellcheck="false"><br> <input type="text" class="dataInput input" required name="message" spellcheck="false"><br>
<input type="submit" class="submit button"> <input type="submit" class="submit button">
</form> </form>
</div> </div>
</div> </div>
<div class="info"> <div class="info">
<h2>Contact information:</h2> <h2>Contact informatie:</h2>
<ul> <ul>
<li> <li>
<h4>PHONE</h4></li> <h4>PHONE</h4></li>

98
css.css
Unescape View File

@ -1,8 +1,11 @@
/* Main CSS */ /* Main CSS */
.mainContent { .mainContent {
padding-top: 10rem; padding-top: 10vh;
width: 100%; width: 100%;
height: 100vh; height: 100vh;
background-position: center;
background-image: url("/resources/img/roadwoods.jpg");
background-size: cover;
} }
.name { .name {
margin: 0 auto; margin: 0 auto;
@ -12,43 +15,23 @@
text-align: center; text-align: center;
height: 5rem; height: 5rem;
} }
.quickButtons { .welcome {
margin: 0 auto; display: block;
margin-top: 8rem; margin: 2rem auto;
width: 50%; width: 50%;
display: flex;
justify-content: center;
}
.goButton {
background-color: #33353d;
border: 0;
min-width: 25rem;
text-align: center; text-align: center;
cursor: pointer;
border-radius: .3rem;
margin: 2rem;
color: white;
border-bottom: #26282f 5px solid;
padding: 2rem;
font-size: 2rem;
}
.goButton:hover {
color: white!important;
}
.goButton:active {
border: 0;
border-top: #26282f 5px solid;
} }
.slideDown { .slideDown {
display: flex;
position: absolute; position: absolute;
padding: .8rem; align-items: center;
width: 4rem; justify-content: center;
height: 4rem; width: 3.5rem;
height: 3.5rem;
border-radius: 50%; border-radius: 50%;
border: 2px solid white; border: 2px solid white;
text-align: center; left: calc(50% - 1.75rem);
left: calc(50% - 2rem); top: 80vh;
top: 85vh;
} }
.slideDown:hover { .slideDown:hover {
color: white!important; color: white!important;
@ -60,17 +43,31 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100%; width: 100%;
box-shadow: 0 -1px 15px 5px hsla(0, 0%, 0%, 0.8);
float: left; float: left;
height: 30vh; height: 30vh;
background-color: #454752; background-color: #33353d;
} }
.infoBlockMe { .infoBlockMe {
padding: 1rem; padding: 1rem;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 33%;
border-right: #454752 2px solid;
}
.infoBlockMe h1 {
text-align: center; text-align: center;
display: inline-block; max-width: 80%;
height: 10rem; }
width: 25rem; .secondBackground {
border-right: 3px solid white; width: 100%;
height: 80vh;
background-position: center;
float: left;
background-image: url("/resources/img/roadwoodsred.jpg");
background-size: cover;
} }
/* About Website */ /* About Website */
.aboutPages { .aboutPages {
@ -85,33 +82,30 @@
border-right: #454752 2px solid; border-right: #454752 2px solid;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center;
height: 100%; height: 100%;
float: left; float: left;
} }
.infoHeadPages {
width: 40%;
margin-left: 1rem;
padding-right: 1rem;
border-right: 3px solid white;
}
.infoTextPages { .infoTextPages {
margin-left: 2rem; width: 70%;
width: 50%; text-align: center;
} }
/* Mobile support */ /* Mobile support */
@viewport { @viewport {
width: device-width; width: device-width;
zoom: 1.0; zoom: 1.0;
} }
/* Support for mobile devices */ @media screen and (min-width:0px) and (max-width:1500px) {
@media screen and (min-width:0px) and (max-width:1000px) { .infoBlockMe h1 {
.mainContent { font-size: 1.8rem;
width: 100%!important;
} }
svg { .infoBlockPages h2 {
display: none; font-size: 1.5rem;
} }
.time { }
font-size: 4rem!important; /* Support for mobile devices */
@media screen and (min-width:0px) and (max-width:1000px) {
.name {
font-size: 3rem;
} }
} }

25
gallery/css.css
Unescape View File

@ -0,0 +1,25 @@
* {
box-sizing: border-box;
}
body {
background-color: #212126!important;
}
.gallery {
margin-top: calc(3rem + 55px);
text-align: center;
}
.rowImg {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
margin-top: 3rem;
}
.columnImg {
flex: 33%;
max-width: 33%;
padding: 0 4px;
}
.columnImg img {
margin-top: 8px;
width: 100%;
}

45
gallery/index.html
Unescape View File

@ -0,0 +1,45 @@
<!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>Gallerij</title>
<link rel="stylesheet" href="/resources/css/cssall.css">
<link rel="stylesheet" href="/resources/css/navbar.css">
<link rel="stylesheet" href="/gallery/css.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.3.1/jquery.min.js"></script>
</head>
<body>
<h1 class="gallery">
Dit is de gallerij voor alle foto's die op deze website gebruikt zijn. <br>
Er staan ook nog wat extra foto's bij die ik misschien nog wil gaan gebruiken.
</h1>
<div class="rowImg">
<div class="columnImg">
<img src="/resources/img/mountain.jpg">
<img src="/resources/img/leaves.jpg">
<img src="/w3images/falls2.jpg">
</div>
<div class="columnImg">
<img src="/resources/img/roadwoods.jpg">
<img src="/resources/img/sunset.jpg">
<img src="/w3images/falls2.jpg">
</div>
<div class="columnImg">
<img src="/resources/img/roadwoodsred.jpg">
<img src="/resources/img/nightcity.jpg">
<img src="/w3images/falls2.jpg">
</div>
</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>

29
index.html
Unescape View File

@ -21,36 +21,29 @@
<!-- Main Content --> <!-- Main Content -->
<div class="mainContent"> <div class="mainContent">
<h1 class="name">Guus van Meerveld</h1> <h1 class="name">Guus van Meerveld</h1>
<div class="quickButtons"> <h1 class="welcome">Welkom op deze website!</h1>
<a class="goButton" title="Playground" href="/playground">Creër je eigen website</a> <a class="slideDown" href="#2"><i class="fas fa-caret-down fa-2x caret-down"></i></a>
<a class="goButton" title="Minify" href="/minify">Maak je code korter</a>
</div>
<a class="slideDown" href="#2" id="2"><i class="fas fa-caret-down fa-2x"></i></a>
<!-- <img src="/resources/img/rocket.png" alt="rocket" id="rocket"> -->
</div> </div>
<!-- About Me--> <!-- About Me-->
<div class="about"> <div class="about" id="2">
<h1 class="infoBlockMe">Mijn naam is Guus van Meerveld</h1> <div class="infoBlockMe"><h1>Mijn naam is Guus van Meerveld</h1></div>
<h1 class="infoBlockMe">Ik ben 15 jaar oud en heb deze website gebouwd</h1> <div class="infoBlockMe"><h1>Ik ben 15 jaar oud en heb deze website gebouwd</h1></div>
<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 class="infoBlockMe" style="border:0;"><h1>Als je suggesties hebt, ga dan naar <a href="/contact" style="text-decoration:underline!important;">contact</a></h1></div>
</div> </div>
<!-- -->
<div class="secondBackground"></div>
<!-- Info about the pages on the site --> <!-- Info about the pages on the site -->
<div class="aboutPages"> <div class="aboutPages">
<div class="infoBlockPages"> <div class="infoBlockPages">
<div class="infoHeadPages">
<h2>Het doel van deze website is om handig tools aan te bieden.</h2>
</div>
<div class="infoTextPages"> <div class="infoTextPages">
<h2>Zoals playground, waar je je eigen website kan bouwen met HTML, CSS en JavaScript</h2> <h2>Het idee van deze website is om al mijn hobbys op een plek samen te brengen.</h2>
</div> </div>
</div><div class="infoBlockPages"> </div><div class="infoBlockPages">
<div class="infoHeadPages">
<h2></h2>
</div>
<div class="infoTextPages"> <div class="infoTextPages">
<h2></h2> <h2>Ik vind het vooral leuk om foto's te maken, maar ook om te programmeren.</h2>
</div> </div>
</div> </div>
</div> </div>

31
minify/css.css
Unescape View File

@ -1,7 +1,36 @@
#headsUp {
visibility: hidden;
transition: height .3s;
background-color: #454752;
box-shadow: 0 1px 6px 1px hsla(0, 0%, 0%, 0.4);
z-index: 3;
margin-top: 55px;
position: relative;
}
.welcome {
position: absolute;
bottom: 4.5rem;
padding-left: 2.5%;
}
.removeOptions {
width: 100%;
position: absolute;
bottom: 1rem;
padding-left: 2.5%;
}
.hideHeadsUp {
height: 3rem;
}
.removeHeadsUp {
cursor: pointer;
display: inline-block;
margin-left: 1rem;
border-bottom: white 3px dotted;
}
.mainContent { .mainContent {
height: 100vh; height: 100vh;
width: 100%; width: 100%;
padding: 7rem; padding: 3rem;
padding-bottom: 0; padding-bottom: 0;
background-color: #222226; background-color: #222226;
} }

13
minify/index.html
Unescape View File

@ -14,6 +14,19 @@
</head> </head>
<body> <body>
<div id="headsUp">
<div class="welcome">
<h5>Welkom bij Minify,</h5>
<h5>Hier kan je je HTML, CSS en JavaScript code kleiner laten maken.</h5>
<h5>Het voordeel hiervan is dat je code sneller werkt.</h5>
<h5>Plak hieronder je code en klik op run om het kleiner te maken.</h5>
</div>
<div class="removeOptions">
<button class="hideHeadsUp button" onclick="hideHeadsUp()">Begrepen</button>
<h5 class="removeHeadsUp" onclick="removeHeadsUp()">Laat mij dit niet meer zien</h5>
</div>
</div>
<div class="mainContent"> <div class="mainContent">
<button class="langButton" onclick="selectCode('html')">HTML</button> <button class="langButton" onclick="selectCode('html')">HTML</button>
<button class="langButton" onclick="selectCode('css')">CSS</button> <button class="langButton" onclick="selectCode('css')">CSS</button>

25
minify/js.js
Unescape View File

@ -3,7 +3,30 @@ var g = document.querySelector.bind(document);
function selectCode(source) { function selectCode(source) {
switch (source) { switch (source) {
case: html case html:
minifyHTML();
break;
case css:
minifyCSS();
break;
case js:
minifyJS();
break;
}
}
function minifyHTML() {
} }
if (localStorage.getItem("showHeadsUpMinify") == undefined) {
d("headsUp").style.visibility = "visible"
d("headsUp").style.height = "13rem"
}
function hideHeadsUp() {
d("headsUp").style.height = "0"
}
function removeHeadsUp() {
hideHeadsUp();
localStorage.setItem("showHeadsUpMinify", "1")
} }

31
playground/css.css
Unescape View File

@ -1,7 +1,36 @@
#headsUp {
visibility: hidden;
transition: height .3s;
background-color: #454752;
box-shadow: 0 1px 6px 1px hsla(0, 0%, 0%, 0.4);
z-index: 3;
margin-top: 55px;
position: relative;
}
.welcome {
position: absolute;
bottom: 4.5rem;
padding-left: 2.5%;
}
.removeOptions {
width: 100%;
position: absolute;
bottom: 1rem;
padding-left: 2.5%;
}
.hideHeadsUp {
height: 3rem;
}
.removeHeadsUp {
cursor: pointer;
display: inline-block;
margin-left: 1rem;
border-bottom: white 3px dotted;
}
.content { .content {
width: 100%; width: 100%;
height: 61.7rem; height: 61.7rem;
margin-top: 55px;
} }
.content div { .content div {
float: left; float: left;

18
playground/index.html
Unescape View File

@ -15,6 +15,18 @@
</head> </head>
<body> <body>
<div id="headsUp">
<div class="welcome">
<h5>Welkom bij Playground,</h5>
<h5>Hier kan je experimenteren met HTML, CSS en JavaScript om een website te bouwen.</h5>
<h5>De knop autorun zorgt ervoor de je code automatisch uitgevoert wordt zodra je het typt.</h5>
<h5>Zodra je op run klikt, wordt je code voor je opgeslagen zodat je het niet kwijtraakt.</h5>
</div>
<div class="removeOptions">
<button class="hideHeadsUp button" onclick="hideHeadsUp()">Begrepen</button>
<h5 class="removeHeadsUp" onclick="removeHeadsUp()">Laat mij dit niet meer zien</h5>
</div>
</div>
<div class="content"> <div class="content">
<div class="codeContent"> <div class="codeContent">
<div> <div>
@ -23,9 +35,9 @@
<button onclick="showCode()" class="langButton" id="jsButton">JS</button> <button onclick="showCode()" class="langButton" id="jsButton">JS</button>
<button class="options" id="autoRun" onclick="autoRun()">AUTORUN</button> <button class="options" id="autoRun" onclick="autoRun()">AUTORUN</button>
<button onclick="updateCode('run')" class="options">RUN</button> <button onclick="updateCode('run')" class="options">RUN</button>
<textarea class="input langInput" id="htmlInput" onkeyup="updateCode('autoRun')" placeholder="Type your HTML here" spellcheck="false"></textarea> <textarea class="input langInput" id="htmlInput" onkeyup="updateCode('autoRun')" placeholder="Type hier je HTML" spellcheck="false"></textarea>
<textarea class="input langInput" id="cssInput" onkeyup="updateCode('autoRun')" placeholder="Type your CSS here" spellcheck="false"></textarea> <textarea class="input langInput" id="cssInput" onkeyup="updateCode('autoRun')" placeholder="Type hier je CSS" spellcheck="false"></textarea>
<textarea class="input langInput" id="jsInput" onkeyup="updateCode('autoRun')" placeholder="Type your JavaScript here" spellcheck="false"></textarea> <textarea class="input langInput" id="jsInput" onkeyup="updateCode('autoRun')" placeholder="Type hier je JavaScript" spellcheck="false"></textarea>
</div> </div>
</div> </div>
<iframe id="htmlOutput"></iframe> <iframe id="htmlOutput"></iframe>

12
playground/js.js
Unescape View File

@ -62,3 +62,15 @@ function updateCode(source) {
emmet.require('textarea').setup({ emmet.require('textarea').setup({
use_tab: true // expand abbreviations by Tab key use_tab: true // expand abbreviations by Tab key
}); });
if (localStorage.getItem("showHeadsUpPlayground") == undefined) {
d("headsUp").style.visibility = "visible"
d("headsUp").style.height = "13rem"
}
function hideHeadsUp() {
d("headsUp").style.height = "0"
}
function removeHeadsUp() {
hideHeadsUp();
localStorage.setItem("showHeadsUpPlayground", "1")
}

1
resources/css/cssall.css
Unescape View File

@ -10,7 +10,6 @@ html {
} }
body { body {
font-family: 'Raleway', sans-serif!important; font-family: 'Raleway', sans-serif!important;
background-image: url(/resources/img/wallpaper.png);
margin: 0px; margin: 0px;
color: white!important; color: white!important;
overflow-x: hidden; overflow-x: hidden;

BIN
resources/img/leaves.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 MiB

BIN
resources/img/moon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 19 KiB

BIN
resources/img/mountain.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 MiB

BIN
resources/img/nightcity.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

BIN
resources/img/roadwoods.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

BIN
resources/img/roadwoodsred.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 MiB

BIN
resources/img/rocket.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.2 KiB

BIN
resources/img/sunset.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 MiB

BIN
resources/img/wallpaper.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 108 KiB

50
resources/js/insertNavbar.js
Unescape View File

@ -21,31 +21,31 @@ var hamburger = c("i")
hamburger.className = "fas fa-bars fa-2x" hamburger.className = "fas fa-bars fa-2x"
navigation.prepend(hamburger) navigation.prepend(hamburger)
// Search // // Search
var search = c("input") // var search = c("input")
search.className = "searchBar" // search.className = "searchBar"
search.placeholder = "Enter a searchterm or url" // search.placeholder = "Enter a searchterm or url"
search.type = "text" // search.type = "text"
navigation.appendChild(search) // navigation.appendChild(search)
//
g(".searchBar").addEventListener("keyup",searchEnter) // g(".searchBar").addEventListener("keyup",searchEnter)
function searchEnter(key) { // function searchEnter(key) {
if(key.key == "Enter") { // if(key.key == "Enter") {
var search = g(".searchBar").value; // var search = g(".searchBar").value;
var containsDot = search.indexOf("."); // var containsDot = search.indexOf(".");
if (search !== "") { // if (search !== "") {
if (containsDot > -1) { // if (containsDot > -1) {
open("http://" + search); // open("http://" + search);
} // }
else { // else {
open("https://www.google.com/search?q=" + search); // open("https://www.google.com/search?q=" + search);
} // }
} // }
} // }
if (key.key == "Escape") { // if (key.key == "Escape") {
closeSearch() // closeSearch()
} // }
} // }
// Create Navbar // Create Navbar
Navbar.forEach(i=>{ Navbar.forEach(i=>{

10
resources/js/navbar.json.js
Unescape View File

@ -14,6 +14,16 @@ Navbar = [
desc: "Feedback for this website", desc: "Feedback for this website",
link: "/feedback" link: "/feedback"
}, },
{
name: "Wireframe",
desc: "De wireframe voor deze website",
link: "/wireframe"
},
{
name: "Gallerij",
desc: "Verzameling van foto's",
link: "/gallery"
},
{ {
name: "Tools", name: "Tools",
desc: "Tools for programming", desc: "Tools for programming",