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

Greatly improved homepage and gallery mobile view

Browse Source
add-license-1
Guuq 5 years ago
parent 03cdc67e2c
commit e20b2af921
7 changed files with 60 additions and 25 deletions
Show Stats Download Patch File Download Diff File

31
css.css
Unescape View File

@ -13,12 +13,11 @@
font-size: 4rem; font-size: 4rem;
white-space: nowrap; white-space: nowrap;
text-align: center; text-align: center;
height: 5rem;
} }
.welcome { .welcome {
display: block; display: block;
margin: 2rem auto; margin: 2vh auto;
width: 50%; width: 80%;
text-align: center; text-align: center;
} }
.slideDown { .slideDown {
@ -45,15 +44,14 @@
width: 100%; width: 100%;
box-shadow: 0 -1px 15px 5px hsla(0, 0%, 0%, 0.8); box-shadow: 0 -1px 15px 5px hsla(0, 0%, 0%, 0.8);
float: left; float: left;
height: 30vh;
background-color: #33353d; background-color: #33353d;
} }
.infoBlockMe { .infoBlockMe {
height: 30vh;
padding: 1rem; padding: 1rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100%;
width: 33%; width: 33%;
border-right: #454752 2px solid; border-right: #454752 2px solid;
} }
@ -71,7 +69,6 @@
} }
/* About Website */ /* About Website */
.aboutPages { .aboutPages {
height: 30vh;
float: left; float: left;
background-color: #33353d; background-color: #33353d;
width: 100%; width: 100%;
@ -83,11 +80,12 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100%; height: 30vh;
float: left; float: left;
} }
.infoTextPages { .infoTextPages {
width: 70%; width: 70%;
font-size: 2.5rem;
text-align: center; text-align: center;
} }
/* Mobile support */ /* Mobile support */
@ -106,6 +104,23 @@
/* Support for mobile devices */ /* Support for mobile devices */
@media screen and (min-width:0px) and (max-width:1000px) { @media screen and (min-width:0px) and (max-width:1000px) {
.name { .name {
font-size: 3rem; font-size: 9vw;
}
.welcome {
font-size: 8vw;
}
.infoBlockPages {
width: 100%;
border: 0;
border-bottom: #454752 2px solid;
}
.infoBlockMe {
height: 20vh;
border: 0;
border-bottom: #454752 2px solid;
width: 100%;
}
.about {
display: block;
} }
} }

25
gallery/css.css
Unescape View File

@ -4,9 +4,15 @@
body { body {
background-color: #212126!important; background-color: #212126!important;
} }
button {
border: 0;
padding: 0;
margin-top: 8px!important;
}
.gallery { .gallery {
margin-top: calc(3rem + 55px); margin-top: calc(3rem + 55px);
text-align: center; text-align: center;
font-size: 2vw;
} }
.rowImg { .rowImg {
display: flex; display: flex;
@ -20,6 +26,23 @@ body {
padding: 0 4px; padding: 0 4px;
} }
.columnImg img { .columnImg img {
margin-top: 8px;
width: 100%; width: 100%;
} }
@media screen and (min-width:500px) and (max-width:1000px) {
.columnImg {
flex: 50%;
max-width: 50%;
}
.gallery {
font-size: 3vw;
}
}
@media screen and (min-width:0px) and (max-width:500px) {
.columnImg {
flex: 100%;
max-width: 100%;
}
.gallery {
font-size: 5vw;
}
}

17
gallery/index.html
Unescape View File

@ -15,25 +15,22 @@
<body> <body>
<h1 class="gallery"> <h1 class="gallery">
Dit is de gallerij voor alle foto's die op deze website gebruikt zijn. <br> Dit is de gallerij voor alle foto's die op deze website gebruikt zijn. (Ik heb ze niet zelf gemaakt) <br>
Er staan ook nog wat extra foto's bij die ik misschien nog wil gaan gebruiken. Er staan ook nog wat extra foto's bij die ik misschien nog wil gaan gebruiken.
</h1> </h1>
<div class="rowImg"> <div class="rowImg">
<div class="columnImg"> <div class="columnImg">
<img src="/resources/img/mountain.jpg"> <button onclick="window.open('https://www.pexels.com/photo/scenic-view-of-rocky-mountain-during-evening-1624438/', '_self')"><img src="/resources/img/mountain.jpg" alt="img"></button>
<img src="/resources/img/leaves.jpg"> <button onclick="window.open('https://www.pexels.com/photo/close-up-photography-of-leaves-with-droplets-807598/', '_self')"><img src="/resources/img/leaves.jpg" alt="img"></button>
<img src="/w3images/falls2.jpg">
</div> </div>
<div class="columnImg"> <div class="columnImg">
<img src="/resources/img/roadwoods.jpg"> <button onclick="window.open('https://www.pexels.com/photo/landscape-photo-of-riverand-pine-trees-2217365/', '_self')"><img src="/resources/img/riverwoods.jpg" alt="img"></button>
<img src="/resources/img/sunset.jpg"> <button onclick="window.open('https://www.pexels.com/photo/asphalt-dark-dawn-endless-531321/', '_self')"><img src="/resources/img/roadwoods.jpg" alt="img"></button>
<img src="/w3images/falls2.jpg">
</div> </div>
<div class="columnImg"> <div class="columnImg">
<img src="/resources/img/roadwoodsred.jpg"> <button onclick="window.open('https://www.pexels.com/photo/concrete-road-between-trees-1563356/', '_self')"><img src="/resources/img/roadwoodsred.jpg" alt="img"></button>
<img src="/resources/img/nightcity.jpg"> <button onclick="window.open('https://www.pexels.com/photo/silhouette-of-trees-during-sunset-1723637/', '_self')"><img src="/resources/img/sunset.jpg" alt="img"></button>
<img src="/w3images/falls2.jpg">
</div> </div>
</div> </div>

6
index.html
Unescape View File

@ -22,11 +22,11 @@
<div class="mainContent"> <div class="mainContent">
<h1 class="name">Guus van Meerveld</h1> <h1 class="name">Guus van Meerveld</h1>
<h1 class="welcome">Welkom op deze website!</h1> <h1 class="welcome">Welkom op deze website!</h1>
<a class="slideDown" href="#2"><i class="fas fa-caret-down fa-2x caret-down"></i></a> <a class="slideDown" href="#about" id="about"><i class="fas fa-caret-down fa-2x caret-down"></i></a>
</div> </div>
<!-- About Me--> <!-- About Me-->
<div class="about" id="2"> <div class="about">
<div class="infoBlockMe"><h1>Mijn naam is Guus van Meerveld</h1></div> <div class="infoBlockMe"><h1>Mijn naam is Guus van Meerveld</h1></div>
<div class="infoBlockMe"><h1>Ik ben 15 jaar oud en heb deze website gebouwd</h1></div> <div class="infoBlockMe"><h1>Ik ben 15 jaar oud en heb deze website gebouwd</h1></div>
<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 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>
@ -41,7 +41,7 @@
<div class="infoTextPages"> <div class="infoTextPages">
<h2>Het idee van deze website is om al mijn hobbys op een plek samen te brengen.</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" style="border:0;">
<div class="infoTextPages"> <div class="infoTextPages">
<h2>Ik vind het vooral leuk om foto's te maken, maar ook om te programmeren.</h2> <h2>Ik vind het vooral leuk om foto's te maken, maar ook om te programmeren.</h2>
</div> </div>

BIN
resources/img/nightcity.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.0 MiB

BIN
resources/img/riverwoods.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.3 MiB

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

@ -26,16 +26,16 @@ Navbar = [
}, },
{ {
name: "Tools", name: "Tools",
desc: "Tools for programming", desc: "Tools voor programmeren",
dropdown: [ dropdown: [
{ {
name: "Playground", name: "Playground",
desc: "Test your HTML live!", desc: "Test je HTML live!",
link: "/playground" link: "/playground"
}, },
{ {
name: "Minifier", name: "Minifier",
desc: "Minify your HTML/CSS/JavaScript", desc: "Minify je HTML/CSS/JavaScript",
link: "/minify" link: "/minify"
} }
] ]