Updated /feedback, added a footer and redid contact page

add-license-1
Guuq 5 years ago
parent 3d02dbc018
commit 558f4e57c0

@ -1,5 +1,4 @@
.main { .main {
background-color: #212126;
width: 100%; width: 100%;
float: left; float: left;
} }
@ -11,6 +10,7 @@
.form { .form {
margin: 6rem auto; margin: 6rem auto;
width: 50%; width: 50%;
background-color: #454752;
position: relative; position: relative;
border-radius: 7px; border-radius: 7px;
box-shadow: 0px 0px 15px -3px rgba(0,0,0,1); box-shadow: 0px 0px 15px -3px rgba(0,0,0,1);
@ -32,7 +32,6 @@
.dataInput { .dataInput {
width: 90%; width: 90%;
display: block; display: block;
background-color: #2d2d33;
margin: 0 auto; margin: 0 auto;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
@ -40,7 +39,7 @@
outline: 0; outline: 0;
} }
.info { .info {
background-color: #18181b; background-color: #33353d;
box-shadow: 0 -1px 6px 1px hsla(0, 0%, 0%, 0.8); box-shadow: 0 -1px 6px 1px hsla(0, 0%, 0%, 0.8);
width: 100%; width: 100%;
padding-top: 2rem; padding-top: 2rem;

@ -47,6 +47,7 @@
<li>Gelderland, Nederland</li> <li>Gelderland, Nederland</li>
</ul> </ul>
</div> </div>
<script src="/resources/js/navbar.json.js"></script> <script src="/resources/js/navbar.json.js"></script>
<script src="/resources/js/insertNavbar.js"></script> <script src="/resources/js/insertNavbar.js"></script>
<script src="/resources/js/javall.js"></script> <script src="/resources/js/javall.js"></script>

@ -33,97 +33,11 @@ svg {
font-size: 2rem; font-size: 2rem;
margin: 0; margin: 0;
} }
/* Feedback */
#feedbackContent {
background-color: #33353d;
float: left;
width: 100%;
}
.feedback {
display: inline-block;
padding: 14vh 0 14vh 5%;
width: 50%;
vertical-align: top;
}
#feedbackOne {
border-right: #454752 4px solid;
}
.user {
display: inline-block;
min-width: 8rem;
}
.user h3 {
text-align: center;
}
.userImg {
width: 8rem;
height: 8rem;
margin-left: calc(50% - 4rem);
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;
float: left;
font-family: 'Open Sans', sans-serif;
}
footer div {
margin: 5rem 0 3rem 8rem;
display: inline-block;
vertical-align: top;
}
footer h4 {
color: gray;
}
footer ul {
list-style-type: none;
margin-top: 20px;
padding: 0;
}
footer li {
margin-top: 1rem;
}
#copyright {
font-size: 15px;
position: absolute;
display: inline-block;
margin: auto;
bottom: 1rem;
right: 1rem;
white-space: nowrap;
vertical-align: baseline;
}
/* Mobile support */ /* Mobile support */
@viewport { @viewport {
width: device-width; width: device-width;
zoom: 1.0; 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 */ /* Support for mobile devices */
@media screen and (min-width:0px) and (max-width:1000px) { @media screen and (min-width:0px) and (max-width:1000px) {
section { section {
@ -135,15 +49,4 @@ footer li {
.time { .time {
font-size: 4rem!important; font-size: 4rem!important;
} }
footer {
float: left;
width: 100%;
display: block!important;
}
footer div {
margin: 3rem 0 1rem 4rem!important;
}
#feedbackContent {
float: left;
}
} }

@ -1 +1,49 @@
jslkf .feedbackContent {
background-color: #33353d;
float: left;
margin-top: 55px;
width: 100%;
}
.feedback {
display: inline-block;
padding: 14vh 0 14vh 5%;
width: 50%;
vertical-align: top;
border-right: #454752 4px solid;
border-bottom: #454752 4px solid;
}
.user {
display: inline-block;
min-width: 8rem;
}
.user h3 {
text-align: center;
}
.userImg {
width: 8rem;
height: 8rem;
margin-left: calc(50% - 4rem);
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;
}
@media screen and (min-width:0px) and (max-width:1525px) {
.feedback {
display: block;
width: 100%;
padding: 5vh 0 5vh;
border-right: 0;
border-bottom: #454752 4px solid;
}
.user {
margin-left: calc(50% - 20rem);
}
}

@ -8,7 +8,7 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Feedback</title> <title>Feedback</title>
<link rel="stylesheet" href="/resources/css/shortcuts.css"> <link rel="stylesheet" href="/resources/css/shortcuts.css">
<link rel="stylesheet" href="/css.css"> <link rel="stylesheet" href="/feedback/css.css">
<link rel="stylesheet" href="/resources/css/cssall.css"> <link rel="stylesheet" href="/resources/css/cssall.css">
<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>
@ -17,11 +17,67 @@
</head> </head>
<body> <body>
<!-- Feedback -->
<div class="feedbackContent">
<div 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>Guus van Meerveld</h3>
</div>
<h2 class="userFeedback">Zou jij graag je eigen feedback hier tussen zien? Ga dan naar <a href="/contact" style="text-decoration:underline!important;">contact</a> en verstuur een bericht!</h2>
</div><div class="feedback">
<div class="user">
<img src="/resources/img/user.png" alt="" class="userImg">
<h3>User</h3>
</div>
<h2 class="userFeedback">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a risus eu ex sagittis interdum ac ac odio. Proin eleifend turpis a aliquam.</h2>
</div>
</div>
<!-- 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/navbar.json.js"></script>
<script src="/resources/js/insertNavbar.js"></script> <script src="/resources/js/insertNavbar.js"></script>
<script src="/js.js"></script> <script src="/js.js"></script>
<script src="/resources/js/javall.js"></script> <script src="/resources/js/javall.js"></script>
</body> </body>
</html> </html>

@ -69,23 +69,6 @@
<polygon points="0,5 0,2000 300,5"/> <polygon points="0,5 0,2000 300,5"/>
</svg> </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>User</h3>
</div>
<h2 class="userFeedback">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a risus eu ex sagittis interdum ac ac odio. Proin eleifend turpis a aliquam.</h2>
</div>
</div>
<!-- Footer --> <!-- Footer -->
<footer> <footer>

@ -1,28 +1,27 @@
#content { .content {
position: absolute;
width: 100%; width: 100%;
height: 61.7rem; height: 61.7rem;
top: 55px; margin-top: 55px;
} }
#content div { .content div {
float: left; float: left;
} }
#codeContent { .codeContent {
height: 100%; height: 100%;
width: 50%; width: 50%;
background-color: #222226; background-color: #222226;
} }
#codeContent textarea { .codeContent textarea {
height: 100%; height: 100%;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
width: 100%; width: 100%;
} }
#codeContent div { .codeContent div {
margin-left: calc(50% - 45%); margin-left: calc(50% - 45%);
width: 90%; width: 90%;
height: 85%; height: 85%;
} }
#codeContent button { .codeContent button {
background-color: #3b3c45; background-color: #3b3c45;
border: 0; border: 0;
color: white; color: white;
@ -32,10 +31,10 @@
width: 6rem; width: 6rem;
height: 3rem; height: 3rem;
} }
#codeContent button:hover { .codeContent button:hover {
background-color: #27282e; background-color: #27282e;
} }
#codeContent button:focus { .codeContent button:focus {
outline: 0; outline: 0;
} }
.options { .options {
@ -46,13 +45,14 @@
height: 100%; height: 100%;
border: 0; border: 0;
width: 50%; width: 50%;
float: left;
} }
@media screen and (min-width:0px) and (max-width:1079px) { @media screen and (min-width:0px) and (max-width:1079px) {
#codeContent { .codeContent {
display: block!important; display: block!important;
width: 100%; width: 100%;
} }
#codeContent button { .codeContent button {
width: 4rem!important; width: 4rem!important;
font-size: 11px; font-size: 11px;
} }

@ -1 +1,75 @@
<!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>Playground</title> <link rel="stylesheet" href="/resources/css/cssall.css"> <link rel="stylesheet" href="/resources/css/navbar.css"> <link rel="stylesheet" href="/playground/css.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></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"></head><body> <div id="content"> <div id="codeContent"> <div> <button onclick="showCode('html')" class="langButton" id="htmlButton">HTML</button> <button onclick="showCode('css')" class="langButton" id="cssButton">CSS</button> <button onclick="showCode()" class="langButton" id="jsButton">JS</button> <button class="options" id="autoRun" onclick="autoRun()">AUTORUN</button> <button onclick="updateCode('run')" class="options">RUN</button> <textarea class="input langInput" id="htmlInput" onkeyup="updateCode('autoRun')" spellcheck="false"></textarea> <textarea class="input langInput" id="cssInput" onkeyup="updateCode('autoRun')" spellcheck="false"></textarea> <textarea class="input langInput" id="jsInput" onkeyup="updateCode('autoRun')" spellcheck="false"></textarea> </div></div><iframe id="htmlOutput"></iframe> </div><script src="/playground/emmet.min.js"></script> <script src="/resources/js/navbar.json.js"></script> <script src="/resources/js/insertNavbar.js"></script> <script src="/resources/js/javall.js"></script> <script src="/playground/js.js"></script></body></html> <!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>Playground</title>
<link rel="stylesheet" href="/resources/css/cssall.css">
<link rel="stylesheet" href="/resources/css/navbar.css">
<link rel="stylesheet" href="/playground/css.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></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">
</head>
<body>
<div class="content">
<div class="codeContent">
<div>
<button onclick="showCode('html')" class="langButton" id="htmlButton">HTML</button>
<button onclick="showCode('css')" class="langButton" id="cssButton">CSS</button>
<button onclick="showCode()" class="langButton" id="jsButton">JS</button>
<button class="options" id="autoRun" onclick="autoRun()">AUTORUN</button>
<button onclick="updateCode('run')" class="options">RUN</button>
<textarea class="input langInput" id="htmlInput" onkeyup="updateCode('autoRun')" spellcheck="false"></textarea>
<textarea class="input langInput" id="cssInput" onkeyup="updateCode('autoRun')" spellcheck="false"></textarea>
<textarea class="input langInput" id="jsInput" onkeyup="updateCode('autoRun')" spellcheck="false"></textarea>
</div>
</div>
<iframe id="htmlOutput"></iframe>
</div>
<!-- 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="/playground/emmet.min.js"></script>
<script src="/resources/js/navbar.json.js"></script>
<script src="/resources/js/insertNavbar.js"></script>
<script src="/resources/js/javall.js"></script>
<script src="/playground/js.js"></script>
</body>
</html>

@ -110,3 +110,47 @@ a:hover {
padding: 1%; padding: 1%;
resize: none; resize: none;
} }
/* Footer */
footer {
background-color: black;
width: 100%;
position: relative;
float: left;
font-family: 'Open Sans', sans-serif;
}
footer div {
margin: 5rem 0 3rem 8rem;
display: inline-block;
vertical-align: top;
}
footer h4 {
color: gray;
}
footer ul {
list-style-type: none;
margin-top: 20px;
padding: 0;
}
footer li {
margin-top: 1rem;
}
#copyright {
font-size: 15px;
position: absolute;
display: inline-block;
margin: auto;
bottom: 1rem;
right: 1rem;
white-space: nowrap;
vertical-align: baseline;
}
@media screen and (min-width:0px) and (max-width:1000px) {
footer {
float: left;
width: 100%;
display: block!important;
}
footer div {
margin: 3rem 0 1rem 4rem!important;
}
}

@ -1 +1,67 @@
<!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> <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> <!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>