Merge pull request 'Footer update' (#14) from test_02 into main

Reviewed-on: #14
This commit is contained in:
Mathijs Lermer 2023-04-19 20:50:26 +02:00
commit c72a06e3ea
3 changed files with 179 additions and 27 deletions

View file

@ -45,8 +45,7 @@
<ul> <ul>
<li> <a href="/index.html">Welkom</a></Li> <li> <a href="/index.html">Welkom</a></Li>
<li> <a href="/assets/downloads/CURRICULUM VITAE Mathijs Lermer zonder contact gegevens.pdf">Curriculum vitae</a></Li> <li> <a href="/assets/downloads/CURRICULUM VITAE Mathijs Lermer zonder contact gegevens.pdf">Curriculum vitae</a></Li>
<li> <a href="https://uptime.lermer.nl/status/overzicht">Uptime</a></Li> </ul>
</ul>
</nav> </nav>
<a href='#' id="menuknopje" onclick="hamburgermenuknopje()" style="display: none;"><i class="fa fa-bars" aria-hidden="true"></i></a> <a href='#' id="menuknopje" onclick="hamburgermenuknopje()" style="display: none;"><i class="fa fa-bars" aria-hidden="true"></i></a>
@ -82,15 +81,32 @@
<section id="sectie_footer"> <section id="sectie_footer">
<div class="container"> <div class="container">
<footer> <footer>
<div class="footer-links">
<ul> <table style="width:100%">
<!--- <li><a href="/">&copy;LERMER.NL</a></Li> --> <tr>
<li><a href="https://git.lermer.nl/Mathijs/lermer.nl" rel="external"> <i class="fa fa-code-fork fa-lg" aria-hidden="true"></i></a></Li> <td style="width:45%">
<li><a href="mailto:info@lermer.nl" rel="me"> <i class="fa fa-at fa-lg" aria-hidden="true"></i></a></Li> <div class="footer-links-r">
<li><a href="https://matrix.to/#/@mathijs:lermer.nl" rel="me"> <i class="fa fa-matrix-org fa-lg" aria-hidden="true"></i></a></Li> <ul>
<li><a href="https://mastodon.lermer.nl/@mathijs" rel="me"> <i class="fa fa-mastodon fa-lg" aria-hidden="true"></i></a></Li> <li><a href="mailto:info@lermer.nl" title="e-mail" rel="me"> <i class="fa fa-at fa-lg" aria-hidden="true"></i></a></Li>
</ul> <li><a href="https://matrix.to/#/@mathijs:lermer.nl" title="Bericht via MATRIX" rel="me"> <i class="fa fa-matrix-org fa-lg" aria-hidden="true"></i></a></Li>
</div> <li><a href="https://mastodon.lermer.nl/@mathijs" title="Mastodon" rel="me"> <i class="fa fa-mastodon fa-lg" aria-hidden="true"></i></a></Li>
</div>
</td>
<td style="width:2%">
<div class="footer-links-bar">
<ul>
<li><a>|</a></Li>
</div>
</td>
<td style="width:45%">
<div class="footer-links-l">
<ul>
<li><a href="https://git.lermer.nl/Mathijs/lermer.nl" title="GIT" rel="external"> <i class="fa fa-code-fork fa-lg" aria-hidden="true"></i></a></Li>
<li><a href="https://uptime.lermer.nl/status/overzicht" title="Uptime"s rel="external"> <i class="fa fa-arrow-up fa-lg" aria-hidden="true"></i></a></Li>
</div>
</td>
</tr>
</table>
</footer> </footer>
</div> </div>
</section> </section>

View file

@ -113,7 +113,7 @@
position: absolute; position: absolute;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: 80px; height: 100px;
} }
@ -293,19 +293,21 @@
/*footer*********/ /*footer*********/
/*footer**cernter*/
.footer-links{ .footer-links{
max-width: 800px; max-width: 800px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
text-align: center; text-align: center;
border-radius: 5px; border-radius: 5px;
} }
.footer-links ul { .footer-links ul {
padding: 0px; padding: 0px;
display: inline-block display: inline-block
} }
.footer-links ul li { .footer-links ul li {
display: inline-block; display: inline-block;
padding: 15px 17px 15px 17px; padding: 15px 17px 15px 17px;
text-transform: uppercase; text-transform: uppercase;
@ -335,6 +337,124 @@
.footer-links ul li a:active { .footer-links ul li a:active {
color: #8d100e; color: #8d100e;
} }
/*footer**links*/
.footer-links-l{
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-align: left;
border-radius: 5px;
}
.footer-links-l ul {
padding: 0px;
display: inline-block
}
.footer-links-l ul li {
display: inline-block;
padding: 15px 17px 15px 17px;
text-transform: uppercase;
border-radius: 5px;
font-size: 20px;
}
.footer-links-l ul li:hover {
display: inline-block;
background-color: #374351;
text-transform: uppercase;
border-radius: 5px;
font-size: 20px;
}
.footer-links-l ul li a {
text-decoration: none;
color: #D2E0F0;
}
.footer-links-l ul li a:hover {
text-decoration: none;
border-radius: 5px;
color: #D2E0F0;
}
.footer-links-l ul li a:active {
color: #8d100e;
}
/*footer**rechts*/
.footer-links-r{
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-align: right;
border-radius: 5px;
}
.footer-links-r ul {
padding: 0px;
display: inline-block
}
.footer-links-r ul li {
display: inline-block;
padding: 15px 17px 15px 17px;
text-transform: uppercase;
border-radius: 5px;
font-size: 20px;
}
.footer-links-r ul li:hover {
display: inline-block;
background-color: #374351;
text-transform: uppercase;
border-radius: 5px;
font-size: 20px;
}
.footer-links-r ul li a {
text-decoration: none;
color: #D2E0F0;
}
.footer-links-r ul li a:hover {
text-decoration: none;
border-radius: 5px;
color: #D2E0F0;
}
.footer-links-r ul li a:active {
color: #8d100e;
}
/*footer**bar*/
.footer-links-bar{
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-align: center;
border-radius: 0px;
}
.footer-links-bar ul {
padding: 0px;
display: inline-block
}
.footer-links-bar ul li {
display: inline-block;
padding: 0px 17px 0px 17px;
text-transform: uppercase;
border-radius: 5px;
font-size: 50px;
}
.footer-links-bar ul li a {
text-decoration: none;
color: #D2E0F0;
}
/*uitzonderingen*********************************************************************************************************/ /*uitzonderingen*********************************************************************************************************/

View file

@ -44,8 +44,7 @@
<ul> <ul>
<li class="active"> <a href="/index.html">Welkom</a></Li> <li class="active"> <a href="/index.html">Welkom</a></Li>
<li> <a href="/assets/downloads/CURRICULUM VITAE Mathijs Lermer zonder contact gegevens.pdf">Curriculum vitae</a></Li> <li> <a href="/assets/downloads/CURRICULUM VITAE Mathijs Lermer zonder contact gegevens.pdf">Curriculum vitae</a></Li>
<li> <a href="https://uptime.lermer.nl/status/overzicht">Uptime</a></Li> </ul>
</ul>
</nav> </nav>
<a href='#' id="menuknopje" onclick="hamburgermenuknopje()" style="display: none;"> <a href='#' id="menuknopje" onclick="hamburgermenuknopje()" style="display: none;">
@ -74,15 +73,32 @@
<section id="sectie_footer"> <section id="sectie_footer">
<div class="container"> <div class="container">
<footer> <footer>
<div class="footer-links">
<ul> <table style="width:100%">
<!--- <li><a href="/">&copy;LERMER.NL</a></Li> --> <tr>
<li><a href="https://git.lermer.nl/Mathijs/lermer.nl" rel="external"> <i class="fa fa-code-fork fa-lg" aria-hidden="true"></i></a></Li> <td style="width:45%">
<li><a href="mailto:info@lermer.nl" rel="me"> <i class="fa fa-at fa-lg" aria-hidden="true"></i></a></Li> <div class="footer-links-r">
<li><a href="https://matrix.to/#/@mathijs:lermer.nl" rel="me"> <i class="fa fa-matrix-org fa-lg" aria-hidden="true"></i></a></Li> <ul>
<li><a href="https://mastodon.lermer.nl/@mathijs" rel="me"> <i class="fa fa-mastodon fa-lg" aria-hidden="true"></i></a></Li> <li><a href="mailto:info@lermer.nl" title="e-mail" rel="me"> <i class="fa fa-at fa-lg" aria-hidden="true"></i></a></Li>
</ul> <li><a href="https://matrix.to/#/@mathijs:lermer.nl" title="Bericht via MATRIX" rel="me"> <i class="fa fa-matrix-org fa-lg" aria-hidden="true"></i></a></Li>
</div> <li><a href="https://mastodon.lermer.nl/@mathijs" title="Mastodon" rel="me"> <i class="fa fa-mastodon fa-lg" aria-hidden="true"></i></a></Li>
</div>
</td>
<td style="width:2%">
<div class="footer-links-bar">
<ul>
<li><a>|</a></Li>
</div>
</td>
<td style="width:45%">
<div class="footer-links-l">
<ul>
<li><a href="https://git.lermer.nl/Mathijs/lermer.nl" title="GIT" rel="external"> <i class="fa fa-code-fork fa-lg" aria-hidden="true"></i></a></Li>
<li><a href="https://uptime.lermer.nl/status/overzicht" title="Uptime"s rel="external"> <i class="fa fa-arrow-up fa-lg" aria-hidden="true"></i></a></Li>
</div>
</td>
</tr>
</table>
</footer> </footer>
</div> </div>
</section> </section>