Merge pull request 'JS en kleuren update' (#7) from test into main

Reviewed-on: #7
This commit is contained in:
Mathijs Lermer 2023-01-16 20:25:22 +01:00
commit 8d5684d11d
5 changed files with 82 additions and 54 deletions

View file

@ -29,6 +29,7 @@
<link rel="icon" href="assets/afb/favicon.png" type="image/png"> <link rel="icon" href="assets/afb/favicon.png" type="image/png">
<link href="/assets/css/mrl.css" rel="stylesheet"> <link href="/assets/css/mrl.css" rel="stylesheet">
<link href="/assets/fontawesome/css/all.css" rel="stylesheet"> <link href="/assets/fontawesome/css/all.css" rel="stylesheet">
<script type="text/javascript" src="/assets/js/mrl.js"></script>
<!--- site--> <!--- site-->
<meta name="viewport" content="width=device-width, initial-scale=1" > <meta name="viewport" content="width=device-width, initial-scale=1" >
</head> </head>
@ -39,7 +40,7 @@
<section id="sectie_kop"> <section id="sectie_kop">
<div class="container"> <div class="container">
<header> <header>
<logo>Lermer.nl</logo> <logo><a href="/">LERMER.NL</a></logo>
<nav id="main_menu_01"> <nav id="main_menu_01">
<ul> <ul>
<li> <a href="/index.html">Welkom</a></Li> <li> <a href="/index.html">Welkom</a></Li>
@ -83,25 +84,14 @@
<div class="container"> <div class="container">
<footer> <footer>
<div class="footer-links"> <div class="footer-links">
<ul> <ul>
<li><a href="https://lermer.nl">&copy;LERMER.NL</a></Li> <li><a href="https://lermer.nl">&copy;LERMER.NL</a></Li>
<li><a href="https://git.lermer.nl/Mathijs/lermer.nl">GIT</a></Li> <li><a href="https://git.lermer.nl/Mathijs/lermer.nl"> <i class="fas fa-code-merge"></i></a></Li>
</ul> </ul>
</div> </div>
</footer> </footer>
</div> </div>
</section> </section>
</div> </div>
</body> </body>
<script>
function hamburgermenuknopje() {
var x = document.getElementById('main_menu_01');
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
</html> </html>

View file

@ -164,7 +164,7 @@
} }
a:active { a:active {
color: yellow; color: #8d100e;
background-color: #2B3642; background-color: #2B3642;
text-decoration: underline; text-decoration: underline;
} }
@ -181,7 +181,7 @@
} }
a:hover { a:hover {
background-color: #2B3642; background-color: #374351;
} }
/*specials*********************************************************************************************************/ /*specials*********************************************************************************************************/
@ -197,45 +197,72 @@
} }
.knop{ .knop{
padding: 25px 90px 25px 90px;
text-align: center; text-align: center;
padding: 25px 90px 25px 90px;
text-decoration: none; text-decoration: none;
border-radius: 5px; border-radius: 5px;
font-size: 20px; font-size: 20px;
color: #D2E0F0;
cursor: pointer; cursor: pointer;
} }
#knop a:link{ #knop a:link{
color: #D2E0F0; color: #D2E0F0;
background-color: transparent; background-color: #2B3642;
text-decoration: none; text-decoration: none;
padding: 25px 25px 25px 25px;
} }
#knop a:visited { #knop a:visited {
color: rgba(255, 255, 255, 0); color: #D2E0F0;
background-color: #2B3642; background-color: #2B3642;
text-decoration: none; text-decoration: none;
} }
#knop a:hover { #knop a:hover {
background-color: #2B3642; background-color: #374351;
} }
#knop a:active { #knop a:active {
color: yellow; color: #8d100e;
background-color: #2B3642; background-color: #2B3642;
text-decoration: underline; text-decoration: underline;
} }
.knop_contact{ #knop_contact{
padding: 25px 25px 25px 25px; text-align: center;
width: 100%; padding: 0px 0px 25px 0px;
font-size: 18px; text-decoration: none;
background-color: #171E26 border-radius: 5px;
font-size: 20px;
cursor: pointer;
} }
#knop_contact a:link{
color: #D2E0F0;
background-color: transparent;
text-decoration: none;
padding: 25px 25px 25px 25px;
}
#knop_contact a:visited {
color: #D2E0F0;
background-color: transparent;
text-decoration: none;
}
#knop_contact a:hover {
background-color: #374351;
border-radius: 5px;
}
#knop_contact a:active {
color: #8d100e;
background-color: #2B3642;
text-decoration: underline;
border-radius: 5px;
}
/*menu*********/ /*menu*********/
nav{ nav{
float: right; float: right;
@ -284,16 +311,30 @@
text-transform: uppercase; text-transform: uppercase;
border-radius: 5px; border-radius: 5px;
font-size: 20px; font-size: 20px;
} }
.footer-links ul li:hover {
display: inline-block;
background-color: #374351;
text-transform: uppercase;
border-radius: 5px;
font-size: 20px;
}
.footer-links ul li a { .footer-links ul li a {
text-decoration: none; text-decoration: none;
padding: 15px 17px 15px 17px; color: #D2E0F0;
}
.footer-links ul li a:hover {
text-decoration: none;
border-radius: 5px; border-radius: 5px;
color: #D2E0F0; color: #D2E0F0;
} }
.footer-links ul li a:active {
color: #8d100e;
}
/*uitzonderingen*********************************************************************************************************/ /*uitzonderingen*********************************************************************************************************/

8
assets/js/mrl.js Normal file
View file

@ -0,0 +1,8 @@
function hamburgermenuknopje() {
var x = document.getElementById('main_menu_01');
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}

View file

@ -28,6 +28,7 @@
<link rel="icon" href="assets/afb/favicon.png" type="image/png"> <link rel="icon" href="assets/afb/favicon.png" type="image/png">
<link href="/assets/css/mrl.css" rel="stylesheet"> <link href="/assets/css/mrl.css" rel="stylesheet">
<link href="/assets/fontawesome/css/all.css" rel="stylesheet"> <link href="/assets/fontawesome/css/all.css" rel="stylesheet">
<script type="text/javascript" src="/assets/js/mrl.js"></script>
<!--- site--> <!--- site-->
<meta name="viewport" content="width=device-width, initial-scale=1" > <meta name="viewport" content="width=device-width, initial-scale=1" >
</head> </head>
@ -38,7 +39,7 @@
<section id="sectie_kop"> <section id="sectie_kop">
<div class="container"> <div class="container">
<header> <header>
<logo>Lermer.nl</logo> <logo><a href="/">LERMER.NL</a></logo>
<nav id="main_menu_01"> <nav id="main_menu_01">
<ul> <ul>
<li class="active"> <a href="/index.html">Welkom</a></Li> <li class="active"> <a href="/index.html">Welkom</a></Li>
@ -67,14 +68,13 @@
</picture> </picture>
<h2>Contactgegevens:</h2> <h2>Contactgegevens:</h2>
<div id="knop_contact">
<div id="knop"> <a href="mailto:info@lermer.nl">E-mail: Mathijs@lermer.nl</a><br>
<a href="mailto:info@lermer.nl" class="knop knop_contact">E-mail: Mathijs@lermer.nl</a><br> <br><br><br>
<br><br> <a href="https://matrix.to/#/@mathijs:lermer.nl">[MATRIX]: @mathijs:lermer.nl</a><br>
<a href="https://matrix.to/#/@mathijs:lermer.nl" class="knop knop_contact">[MATRIX]: @mathijs:lermer.nl</a><br> <br><br><br>
<br><br> <a href="https://mastodon.lermer.nl/@mathijs">Mastodon: @mathijs@lermer.nl</a><br>
<a href="https://mastodon.lermer.nl/@mathijs" class="knop knop_contact">Mastodon: @mathijs@lermer.nl</a><br> <br>
<br><br>
</div> </div>
</div> </div>
@ -91,7 +91,7 @@
<div class="footer-links"> <div class="footer-links">
<ul> <ul>
<li><a href="https://lermer.nl">&copy;LERMER.NL</a></Li> <li><a href="https://lermer.nl">&copy;LERMER.NL</a></Li>
<li><a href="https://git.lermer.nl/Mathijs/lermer.nl">GIT</a></Li> <li><a href="https://git.lermer.nl/Mathijs/lermer.nl"> <i class="fas fa-code-merge"></i></a></Li>
</ul> </ul>
</div> </div>
</footer> </footer>
@ -99,15 +99,4 @@
</section> </section>
</div> </div>
</body> </body>
<script>
function hamburgermenuknopje() {
var x = document.getElementById('main_menu_01');
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
</html> </html>

0
robots.txt Normal file → Executable file
View file