lermer.nl/assets/css/mrl.css

300 lines
6 KiB
CSS
Raw Normal View History

2023-01-08 12:52:20 +01:00
/*responsive (media query)*********************************************************************************************************/
@media only screen and (min-width: 1141px) {
.container{
margin-left: auto;
margin-right: auto;
}
}
@media only screen and (max-width: 1140px) {
.container{
margin-left: 15px;
margin-right: 15px;
}
}
@media only screen and (max-width: 850px) {
#menuknopje {
display: inline-block !important;
2023-01-08 14:34:02 +01:00
color: #D2E0F0;
2023-01-08 12:52:20 +01:00
font-size: 50px;
position: absolute;
right: 15px;
top: 10px;
}
nav{
display: none;
}
#main_menu_01 {
width: 100%;
2023-01-08 14:34:02 +01:00
border-top: 1px solid #D2E0F0;
border-bottom: 1px solid #D2E0F0;
background-color: #10161D;
2023-01-08 12:52:20 +01:00
}
#main_menu_01 ul li {
display: block;
}
}
2023-01-11 17:16:42 +01:00
@media only screen and (max-width: 850px) {
2023-01-08 12:52:20 +01:00
logo {
font-size: 50px !important;
}
}
/*Fonts**********************************************************************************************************/
@font-face {
font-family: "Titillium_Web";
src: url("/assets/fonts/Titillium_Web/TitilliumWeb-Regular.ttf");
font-display: fallback;
}
@font-face {
font-family: "Roboto";
src: url("/assets/fonts/Roboto/Roboto-Bold.ttf");
font-display: fallback;
}
/*Algemeen*********************************************************************************************************/
body {
margin: 0;
padding: 0;
/* font-family: Titillium_Web , Fallback, sans-serif; */
font-family: Roboto , Fallback, sans-serif;
background-color: #171E26;
overflow: auto;
}
#page-container {
position: relative;
min-height: 100vh;
}
#content-wrap {
padding-bottom: 80px; /* Footer height */
2023-01-11 17:16:42 +01:00
}
#page-container {
2023-01-08 12:52:20 +01:00
position: relative;
min-height: 100vh;
}
#content-wrap {
padding-bottom: 80px; /* Footer height */
}
.container{
max-width: 1140px;
}
/*Secties*********************************************************************************************************/
#sectie_kop {
background-color: #10161D;
border-bottom: 2px solid #242D38;
}
header {
padding-top: 10px;
padding-bottom: 10px;
}
#sectie_pagina {
background-color: #171E26;
min-height: 595px;
}
#sectie_footer {
background-color: #10161D;
border-top: 2px solid #242D38;
position: absolute;
bottom: 0;
width: 100%;
height: 80px;
}
/*Standaard*********************************************************************************************************/
/*links**/
#tekst-links{
text-align: left;
2023-01-08 14:34:02 +01:00
color: #374351;
2023-01-08 12:52:20 +01:00
}
#tekst-links h1{
2023-01-11 17:16:42 +01:00
padding-top: 100px;
2023-01-08 12:52:20 +01:00
margin-top: 0px;
font-size: 42px;
margin-bottom: 60px;
}
#tekst-links h2{
2023-01-11 17:16:42 +01:00
padding-top: 30px;
2023-01-08 12:52:20 +01:00
margin-top: 0px;
font-size: 30px;
margin-bottom: 60px;
}
#tekst-links p{
background-color: #2B3642;
font-size: 15px;
}
/*midden**/
#tekst-midden{
text-align: center;
2023-01-08 14:34:02 +01:00
color: #D2E0F0;
2023-01-08 12:52:20 +01:00
}
#tekst-midden h1{
2023-01-11 17:16:42 +01:00
padding-top: 100px;
2023-01-08 12:52:20 +01:00
margin-top: 0px;
font-size: 42px;
margin-bottom: 60px;
}
#tekst-midden h2{
2023-01-11 17:16:42 +01:00
padding-top: 30px;
2023-01-08 12:52:20 +01:00
margin-top: 0px;
font-size: 30px;
margin-bottom: 60px;
}
#tekst-midden p{
font-size: 18px;
}
a:active {
color: yellow;
background-color: #2B3642;
text-decoration: underline;
}
a:link{
2023-01-08 14:34:02 +01:00
color: #D2E0F0;
2023-01-08 12:52:20 +01:00
background-color: transparent;
text-decoration: none;
}
a:visited {
color: rgba(255, 255, 255, 0);
background-color: #2B3642;
text-decoration: none;
}
a:hover {
background-color: #2B3642;
}
/*specials*********************************************************************************************************/
logo {
2023-01-08 14:34:02 +01:00
color: #D2E0F0;
2023-01-08 12:52:20 +01:00
margin-top: 25px;
margin-bottom: 25px;
text-transform: uppercase;
font-family: Roboto, Fallback, sans-serif;
font-size: 50px;
text-shadow: -3px 0 black, 0 3px black, 3px 0 black, 0 -3px black, 1px 1px 2px black, 0 0 25px black, 0 0 5px black;
}
.knop{
padding: 25px 90px 25px 90px;
text-align: center;
text-decoration: none;
border-radius: 5px;
font-size: 20px;
2023-01-08 14:34:02 +01:00
color: #D2E0F0;
2023-01-08 12:52:20 +01:00
cursor: pointer;
2023-01-11 17:16:42 +01:00
2023-01-08 12:52:20 +01:00
}
#knop a:link{
2023-01-08 14:34:02 +01:00
color: #D2E0F0;
2023-01-08 12:52:20 +01:00
background-color: transparent;
text-decoration: none;
}
#knop a:visited {
color: rgba(255, 255, 255, 0);
background-color: #2B3642;
text-decoration: none;
}
#knop a:hover {
background-color: #2B3642;
}
#knop a:active {
color: yellow;
background-color: #2B3642;
text-decoration: underline;
}
.knop_contact{
padding: 25px 25px 25px 25px;
width: 100%;
font-size: 18px;
background-color: #171E26
}
/*menu*********/
nav{
float: right;
}
2023-01-11 17:16:42 +01:00
nav ul li {
display: inline-block;
padding: 10px 17px 10px 17px;
text-transform: uppercase;
margin: 0;
2023-01-08 12:52:20 +01:00
}
2023-01-11 17:16:42 +01:00
nav ul li.active{
background-color: #2B3642;
border-radius: 5px;
}
nav ul li:hover {
background: #374351;
border-radius: 5px;
cursor: pointer;
color: #D2E0F0;
text-decoration: none;
}
nav ul li a {
text-decoration: none;
color: #D2E0F0
}
2023-01-08 12:52:20 +01:00
/*footer*********/
.footer-links{
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-align: center;
2023-01-11 17:16:42 +01:00
border-radius: 5px;
2023-01-08 12:52:20 +01:00
}
.footer-links ul {
padding: 0px;
display: inline-block
}
.footer-links ul li {
display: inline-block;
padding: 15px 17px 15px 17px;
text-transform: uppercase;
2023-01-11 17:16:42 +01:00
border-radius: 5px;
2023-01-08 12:52:20 +01:00
font-size: 20px;
}
.footer-links ul li a {
text-decoration: none;
padding: 15px 17px 15px 17px;
2023-01-11 17:16:42 +01:00
border-radius: 5px;
2023-01-08 14:34:02 +01:00
color: #D2E0F0;
2023-01-08 12:52:20 +01:00
}
/*uitzonderingen*********************************************************************************************************/