@@ -23,9 +35,9 @@
-
-
-
+
+
+
Contact information:
+Contact informatie:
-
PHONE
diff --git a/css.css b/css.css
index 489db66..c8bae16 100644
--- a/css.css
+++ b/css.css
@@ -1,8 +1,11 @@
/* Main CSS */
.mainContent {
- padding-top: 10rem;
+ padding-top: 10vh;
width: 100%;
height: 100vh;
+ background-position: center;
+ background-image: url("/resources/img/roadwoods.jpg");
+ background-size: cover;
}
.name {
margin: 0 auto;
@@ -12,43 +15,23 @@
text-align: center;
height: 5rem;
}
-.quickButtons {
- margin: 0 auto;
- margin-top: 8rem;
+.welcome {
+ display: block;
+ margin: 2rem auto;
width: 50%;
- display: flex;
- justify-content: center;
-}
-.goButton {
- background-color: #33353d;
- border: 0;
- min-width: 25rem;
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 {
+ display: flex;
position: absolute;
- padding: .8rem;
- width: 4rem;
- height: 4rem;
+ align-items: center;
+ justify-content: center;
+ width: 3.5rem;
+ height: 3.5rem;
border-radius: 50%;
border: 2px solid white;
- text-align: center;
- left: calc(50% - 2rem);
- top: 85vh;
+ left: calc(50% - 1.75rem);
+ top: 80vh;
}
.slideDown:hover {
color: white!important;
@@ -60,17 +43,31 @@
justify-content: center;
align-items: center;
width: 100%;
+ box-shadow: 0 -1px 15px 5px hsla(0, 0%, 0%, 0.8);
float: left;
height: 30vh;
- background-color: #454752;
+ background-color: #33353d;
}
.infoBlockMe {
padding: 1rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ width: 33%;
+ border-right: #454752 2px solid;
+}
+.infoBlockMe h1 {
text-align: center;
- display: inline-block;
- height: 10rem;
- width: 25rem;
- border-right: 3px solid white;
+ max-width: 80%;
+}
+.secondBackground {
+ width: 100%;
+ height: 80vh;
+ background-position: center;
+ float: left;
+ background-image: url("/resources/img/roadwoodsred.jpg");
+ background-size: cover;
}
/* About Website */
.aboutPages {
@@ -85,33 +82,30 @@
border-right: #454752 2px solid;
display: flex;
align-items: center;
+ justify-content: center;
height: 100%;
float: left;
}
-.infoHeadPages {
- width: 40%;
- margin-left: 1rem;
- padding-right: 1rem;
- border-right: 3px solid white;
-}
.infoTextPages {
- margin-left: 2rem;
- width: 50%;
+ width: 70%;
+ text-align: center;
}
/* Mobile support */
@viewport {
width: device-width;
zoom: 1.0;
}
-/* Support for mobile devices */
-@media screen and (min-width:0px) and (max-width:1000px) {
- .mainContent {
- width: 100%!important;
+@media screen and (min-width:0px) and (max-width:1500px) {
+ .infoBlockMe h1 {
+ font-size: 1.8rem;
}
- svg {
- display: none;
+ .infoBlockPages h2 {
+ 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;
}
}
diff --git a/gallery/css.css b/gallery/css.css
new file mode 100644
index 0000000..782f4c8
--- /dev/null
+++ b/gallery/css.css
@@ -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%;
+}
diff --git a/gallery/index.html b/gallery/index.html
new file mode 100644
index 0000000..968d7f1
--- /dev/null
+++ b/gallery/index.html
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+
+ Dit is de gallerij voor alle foto's die op deze website gebruikt zijn.
+ Er staan ook nog wat extra foto's bij die ik misschien nog wil gaan gebruiken.
+
+
+
+
+
+
+
+
+
+
+
diff --git a/index.html b/index.html
index fef6939..5d4a19b 100644
--- a/index.html
+++ b/index.html
@@ -21,36 +21,29 @@
-
+ 
+ 
+ 
+
+
+
+
+
+ 
+ 
+
+
+
+
+
+
+ 
+ 
+
+
+
+
+
+
-
diff --git a/minify/css.css b/minify/css.css
index 0008111..0dd2220 100644
--- a/minify/css.css
+++ b/minify/css.css
@@ -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 {
height: 100vh;
width: 100%;
- padding: 7rem;
+ padding: 3rem;
padding-bottom: 0;
background-color: #222226;
}
diff --git a/minify/index.html b/minify/index.html
index 052fefe..089a138 100644
--- a/minify/index.html
+++ b/minify/index.html
@@ -14,6 +14,19 @@
+
Mijn naam is Guus van Meerveld
-Ik ben 15 jaar oud en heb deze website gebouwd
-Als je suggesties hebt, ga dan naar contact
+
+
+
+
+
+
+
Mijn naam is Guus van Meerveld
Ik ben 15 jaar oud en heb deze website gebouwd
Als je suggesties hebt, ga dan naar contact
-
-
Het doel van deze website is om handig tools aan te bieden.
-
-
Zoals playground, waar je je eigen website kan bouwen met HTML, CSS en JavaScript
+Het idee van deze website is om al mijn hobbys op een plek samen te brengen.
-
-
-
-
+
Ik vind het vooral leuk om foto's te maken, maar ook om te programmeren.
+
+
+
+ Welkom bij Minify,
+Hier kan je je HTML, CSS en JavaScript code kleiner laten maken.
+Het voordeel hiervan is dat je code sneller werkt.
+Plak hieronder je code en klik op run om het kleiner te maken.
+
+
+
+ Laat mij dit niet meer zien
+
diff --git a/minify/js.js b/minify/js.js
index 64980bc..066d1fe 100644
--- a/minify/js.js
+++ b/minify/js.js
@@ -2,8 +2,31 @@ var d = document.getElementById.bind(document);
var g = document.querySelector.bind(document);
function selectCode(source) {
- switch (source){
- case: html
-
+ switch (source) {
+ 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")
+}
diff --git a/playground/css.css b/playground/css.css
index a1f8c55..2461c16 100644
--- a/playground/css.css
+++ b/playground/css.css
@@ -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 {
width: 100%;
height: 61.7rem;
- margin-top: 55px;
}
.content div {
float: left;
diff --git a/playground/index.html b/playground/index.html
index 94a4e67..b038056 100644
--- a/playground/index.html
+++ b/playground/index.html
@@ -15,6 +15,18 @@
+
diff --git a/playground/js.js b/playground/js.js
index 5bf8247..fd222e6 100644
--- a/playground/js.js
+++ b/playground/js.js
@@ -62,3 +62,15 @@ function updateCode(source) {
emmet.require('textarea').setup({
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")
+}
diff --git a/resources/css/cssall.css b/resources/css/cssall.css
index 59a650b..8733b33 100644
--- a/resources/css/cssall.css
+++ b/resources/css/cssall.css
@@ -10,7 +10,6 @@ html {
}
body {
font-family: 'Raleway', sans-serif!important;
- background-image: url(/resources/img/wallpaper.png);
margin: 0px;
color: white!important;
overflow-x: hidden;
diff --git a/resources/img/leaves.jpg b/resources/img/leaves.jpg
new file mode 100644
index 0000000..b183955
Binary files /dev/null and b/resources/img/leaves.jpg differ
diff --git a/resources/img/moon.png b/resources/img/moon.png
deleted file mode 100644
index 04fb41c..0000000
Binary files a/resources/img/moon.png and /dev/null differ
diff --git a/resources/img/mountain.jpg b/resources/img/mountain.jpg
new file mode 100644
index 0000000..cc2907f
Binary files /dev/null and b/resources/img/mountain.jpg differ
diff --git a/resources/img/nightcity.jpg b/resources/img/nightcity.jpg
new file mode 100644
index 0000000..71e7dd3
Binary files /dev/null and b/resources/img/nightcity.jpg differ
diff --git a/resources/img/roadwoods.jpg b/resources/img/roadwoods.jpg
new file mode 100644
index 0000000..ba756d1
Binary files /dev/null and b/resources/img/roadwoods.jpg differ
diff --git a/resources/img/roadwoodsred.jpg b/resources/img/roadwoodsred.jpg
new file mode 100644
index 0000000..45de532
Binary files /dev/null and b/resources/img/roadwoodsred.jpg differ
diff --git a/resources/img/rocket.png b/resources/img/rocket.png
deleted file mode 100644
index 55e6cbd..0000000
Binary files a/resources/img/rocket.png and /dev/null differ
diff --git a/resources/img/sunset.jpg b/resources/img/sunset.jpg
new file mode 100644
index 0000000..f3134eb
Binary files /dev/null and b/resources/img/sunset.jpg differ
diff --git a/resources/img/wallpaper.png b/resources/img/wallpaper.png
deleted file mode 100644
index aee0d40..0000000
Binary files a/resources/img/wallpaper.png and /dev/null differ
diff --git a/resources/js/insertNavbar.js b/resources/js/insertNavbar.js
index a3dda7e..b471853 100644
--- a/resources/js/insertNavbar.js
+++ b/resources/js/insertNavbar.js
@@ -21,31 +21,31 @@ var hamburger = c("i")
hamburger.className = "fas fa-bars fa-2x"
navigation.prepend(hamburger)
-// Search
-var search = c("input")
-search.className = "searchBar"
-search.placeholder = "Enter a searchterm or url"
-search.type = "text"
-navigation.appendChild(search)
-
-g(".searchBar").addEventListener("keyup",searchEnter)
-function searchEnter(key) {
- if(key.key == "Enter") {
- var search = g(".searchBar").value;
- var containsDot = search.indexOf(".");
- if (search !== "") {
- if (containsDot > -1) {
- open("http://" + search);
- }
- else {
- open("https://www.google.com/search?q=" + search);
- }
- }
- }
- if (key.key == "Escape") {
- closeSearch()
- }
-}
+// // Search
+// var search = c("input")
+// search.className = "searchBar"
+// search.placeholder = "Enter a searchterm or url"
+// search.type = "text"
+// navigation.appendChild(search)
+//
+// g(".searchBar").addEventListener("keyup",searchEnter)
+// function searchEnter(key) {
+// if(key.key == "Enter") {
+// var search = g(".searchBar").value;
+// var containsDot = search.indexOf(".");
+// if (search !== "") {
+// if (containsDot > -1) {
+// open("http://" + search);
+// }
+// else {
+// open("https://www.google.com/search?q=" + search);
+// }
+// }
+// }
+// if (key.key == "Escape") {
+// closeSearch()
+// }
+// }
// Create Navbar
Navbar.forEach(i=>{
diff --git a/resources/js/navbar.json.js b/resources/js/navbar.json.js
index d62d02e..a54d921 100644
--- a/resources/js/navbar.json.js
+++ b/resources/js/navbar.json.js
@@ -14,6 +14,16 @@ Navbar = [
desc: "Feedback for this website",
link: "/feedback"
},
+ {
+ name: "Wireframe",
+ desc: "De wireframe voor deze website",
+ link: "/wireframe"
+ },
+ {
+ name: "Gallerij",
+ desc: "Verzameling van foto's",
+ link: "/gallery"
+ },
{
name: "Tools",
desc: "Tools for programming",
+
+
+ Welkom bij Playground,
+Hier kan je experimenteren met HTML, CSS en JavaScript om een website te bouwen.
+De knop autorun zorgt ervoor de je code automatisch uitgevoert wordt zodra je het typt.
+Zodra je op run klikt, wordt je code voor je opgeslagen zodat je het niet kwijtraakt.
+
+
+
+