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

23-11 #1

Browse Source
add-license-1 v0.1-alpha
Guuq 5 years ago
parent 2afe5da2dc
commit 320082354c
10 changed files with 130 additions and 42 deletions
Show Stats Download Patch File Download Diff File

79
css.css
Unescape View File

@ -3,7 +3,7 @@ section {
float: left;
display: inline-block;
width: 50%;
margin-top: 3.2rem;
margin-top: 55px;
height: 95vh;
overflow: scroll;
overflow-x: hidden;
@ -12,11 +12,11 @@ section::-webkit-scrollbar {
display: none;
}
svg {
margin-top: 3.2rem;
margin-top: 49px;
fill: #454752;
stroke-width: 1;
stroke: #454752;
height: 95vh;
height: 95.6vh;
}
/* Clock */
#timeBox {
@ -24,20 +24,55 @@ svg {
padding: 1rem;
font-family: 'Open Sans', sans-serif;
}
section div p {
.time {
display: inline-block;
font-size: 8rem;
font-size: 7rem;
margin: 0;
}
#date {
font-size: 2rem;
margin: 0;
}
/* Feedback */
#feedbackContent {
background-color: #33353d;
width: 100%;
}
.feedback {
display: inline-block;
padding: 14vh 0 14vh 5%;
width: 50%;
height: 100%;
}
#feedbackOne {
border-right: #454752 4px solid;
}
.user {
display: inline-block;
height: 100%;
width: 10rem;
}
.userImg {
width: 8rem;
height: 8rem;
margin-bottom: 2rem;
}
.userFeedback {
font-family: 'Open Sans';
display: inline-block;
vertical-align: top;
margin-left: 2rem;
padding-left: 1rem;
border-left: #ededed 2px solid;
width: 30rem;
word-wrap: break-word;
}
/* Footer */
footer {
background-color: black;
width: 100%;
position: relative;
display: flex!important;
height: 20rem;
font-family: 'Open Sans', sans-serif;
}
footer div {
@ -55,39 +90,55 @@ footer ul {
footer li {
margin-top: 1rem;
}
footer p {
font-size: 13px;
#copyright {
font-size: 15px;
position: absolute;
margin: 0;
bottom: -20rem;
display: inline-block;
margin: auto;
bottom: 1rem;
right: 1rem;
white-space: nowrap;
vertical-align: baseline;
}
/* Mobile support */
@viewport {
width: device-width;
zoom: 1.0;
}
@media screen and (min-width:0px) and (max-width:1525px) {
.feedback {
display: block!important;
width: 100%!important;
padding: 5vh 0 5vh;
border-right: 0!important;
}
.user {
margin-left: calc(50% - 20rem);
}
#feedbackOne {
border-bottom: #454752 4px solid;
}
}
/* Support for mobile devices */
@media screen and (min-width:0px) and (max-width:1000px) {
section {
width: 100%!important;
height: 80vh!important ;
}
svg {
display: none;
}
.time {
font-size: 6rem!important;
font-size: 4rem!important;
}
footer {
float: left;
width: 100%;
display: block!important;
}
footer div {
margin: 3rem 0 1rem 4rem!important;
}
footer p {
bottom: -12rem!important;
#feedbackContent {
float: left;
}
}

26
index.html
Unescape View File

@ -22,11 +22,11 @@
<section class="box">
<!-- Clock -->
<div id="timeBox">
<p id="hours">uren</p><p id="mins">:minuten</p><p id="secs">:seconden</p><br>
<p id="hours" class="time">uren</p><p id="mins" class="time">:minuten</p><p id="secs" class="time">:seconden</p><br>
<p id="date">datum</p>
</div> <br>
<span id="shortcuts">
<span class="shortcuts" id="shortcuts">
<button onclick="window.open('https://www.youtube.com/')">
<img src="/resources/img/youtube.png" alt="">Youtube
</button>
@ -56,7 +56,7 @@
</button>
</span>
<span>
<span class="shortcuts">
<button onclick="openMenu()" title="Voeg je eigen shortcut toe">
<img src="/resources/img/cross.png" alt="">Voeg toe
</button>
@ -69,6 +69,23 @@
<polygon points="0,5 0,2000 300,5"/>
</svg>
<!-- Feedback -->
<div id="feedbackContent">
<div id="feedbackOne" class="feedback">
<div class="user">
<img src="/resources/img/user.png" alt="" class="userImg">
<h3>Peer Droog</h3>
</div>
<h2 class="userFeedback">"Een goede en overzichtelijk website met een handige klok, wel mist er de mogelijkheid om je eigen plaatjes toe te voegen aan de shortcuts."</h2>
</div><div class="feedback">
<div class="user">
<img src="/resources/img/user.png" alt="" class="userImg">
<h3>Sam Taen</h3>
</div>
<h2 class="userFeedback">adkjfkldjafkldfjdklfjdklafjdklaadkjfkldjafkldfjdklfjdklafjdklaadkjfkldjafkldfjdklfjdklafjdklaadkjfkldjafkldfjdklfjdklafjdklaadkjfkldjafkldfjdklfjdklafjdkla</h2>
</div>
</div>
<!-- Footer -->
<footer>
@ -97,7 +114,8 @@
<li><a href="https://cloudflare.com">Cloudflare</a></li>
</ul>
</div>
<p>&#169; 2019 Guus van Meerveld</p>
<p id="copyright">&#169; 2019 Guus van Meerveld</p>
</footer>

7
js.js
Unescape View File

@ -7,6 +7,12 @@ function showTime() {
var date = new Date()
var days = ["Zondag","Maandag","Dinsdag","Woensdag","Donderdag","Vrijdag","Zaterdag"]
var months = ["Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December"]
if (date.getHours() < 10) {
d("hours").innerHTML = "0" + date.getHours() + ":"
}
else {
d("hours").innerHTML = date.getHours() + ":"
}
if (date.getMinutes() < 10) {
d("mins").innerHTML = "0" + date.getMinutes() + ":"
}
@ -19,7 +25,6 @@ function showTime() {
else {
d("secs").innerHTML = date.getSeconds()
}
d("hours").innerHTML = date.getHours() + ":"
d("date").innerHTML = days[date.getDay()] + " " + date.getDate() + " " + months[date.getMonth()];
setTimeout(showTime, 1000);
}

7
playground/css.css
Unescape View File

@ -18,8 +18,7 @@
width: 100%;
}
#codeContent div {
margin-left: 5%;
margin-right: 5%;
margin-left: calc(50% - 45%);
width: 90%;
height: 85%;
}
@ -52,6 +51,10 @@
display: block!important;
width: 100%;
}
#codeContent button {
width: 4rem!important;
font-size: 11px;
}
iframe {
width: 100%!important;
}

28
resources/css/cssall.css
Unescape View File

@ -2,7 +2,7 @@
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
html {
height: 100%;
min-height: 100%;
}
::selection {
background: #6ec1b3;
@ -15,7 +15,7 @@ body {
color: white!important;
overflow-x: hidden;
width: 100%;
height: 100%;
min-height: 100vh;
background-color: #19191C;
}
/* Search */
@ -72,28 +72,36 @@ a:hover {
background-color: #454752;
}
.button {
border: 2px #4c8a80 solid;
background-color: #4c8a80;
border: 0;
border-bottom: #37655e 5px solid;
color: white;
outline: 0!important;
border-radius: 0.2rem;
transition: border .3s, background-color .3s;
transition: border .3s ease, background-color .3s;
}
.button:hover {
background-color: #386661;
border: #386661 2px solid;
background-color: #427a71;
}
.button:active {
border: 0;
border-top: #37655e 5px solid;
}
.cancelButton {
border: 2px #b52c22 solid;
border: 0;
border-bottom: #96231b 5px solid;
background-color: #b52c22;
color: white;
outline: 0!important;
border-radius: 0.2rem;
transition: border .3s, background-color .3s;
transition: border .3s ease, background-color .3s, border .3s;
}
.cancelButton:hover {
background-color: #8a1e16;
border: #8a1e16 2px solid;
background-color: #a3281f;
}
.cancelButton:active {
border-top: #96231b 5px solid;
border-bottom: 0;
}
.input {
border: 0px #363840 solid;

15
resources/css/shortcuts.css
Unescape View File

@ -1,30 +1,31 @@
/* Shortcuts */
section span button {
.shortcuts button {
margin: 0 0 1rem 1rem;
width: 12rem;
max-height: 5.3rem;
padding: 1rem;
color: white;
background-color: #363840;
border: #363840 2px solid;
border: #363840 0px solid;
border-radius: .5rem;
display: inline-block;
transition: background-color .5s, border .5s;
}
section span button::-webkit-scrollbar {
.shortcuts button::-webkit-scrollbar {
display: hidden;
}
section span button:hover {
.shortcuts button:hover {
background-color: #3d3e47;
border-color: #3d3e47;
}
section span button:hover .removeShortcut {
.shortcuts button:hover .removeShortcut {
display: inline;
}
section span button:focus {
.shortcuts button:focus {
outline: none;
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.25) inset;
}
section span img {
.shortcuts img {
width: 3rem;
margin-right: 1rem;
height: 3rem;

BIN
resources/img/error.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 62 KiB

BIN
resources/img/rocket.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 19 KiB

BIN
resources/img/user.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.7 KiB

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

@ -10,16 +10,18 @@
<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>
</head>
<body>
<style>
iframe {
width: 100%;
height: 100%;
height: 94.7vh;
border: 0;
margin-top: 55px;
}
</style>
</head>
<body>
<iframe id="game" frameborder="0" src="https://html5.gamedistribution.com/3790681b69584409b7f681a8e400102d/" allowfullscreen></iframe>
<iframe id="game" src="https://html5.gamedistribution.com/3790681b69584409b7f681a8e400102d/" allowfullscreen></iframe>
<script src="/resources/js/navbar.json.js"></script>
<script src="/resources/js/insertNavbar.js"></script>