diff --git a/assets/css/mrl.css b/assets/css/mrl.css new file mode 100644 index 0000000..44a3441 --- /dev/null +++ b/assets/css/mrl.css @@ -0,0 +1,304 @@ +/*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; + color: white; + font-size: 50px; + position: absolute; + right: 15px; + top: 10px; + } + nav{ + display: none; + } + #main_menu_01 { + width: 100%; + border-top: 1px solid white; + border-bottom: 1px solid white; + background-color: #4d79ff; + } + #main_menu_01 ul li { + display: block; + } + } + + @media only screen and (max-width: 500px) { + 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 */ + } #page-container { + 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; + color: white; + } + #tekst-links h1{ + padding-top: 150px; + margin-top: 0px; + font-size: 42px; + margin-bottom: 60px; + } + #tekst-links h2{ + padding-top: 150px; + margin-top: 0px; + font-size: 30px; + margin-bottom: 60px; + } + #tekst-links p{ + background-color: #2B3642; + font-size: 15px; + } + + /*midden**/ + #tekst-midden{ + text-align: center; + color: white; + } + #tekst-midden h1{ + padding-top: 150px; + margin-top: 0px; + font-size: 42px; + margin-bottom: 60px; + } + + #tekst-midden h2{ + padding-top: 60px; + 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{ + color: white; + background-color: transparent; + text-decoration: none; + } + + a:visited { + color: rgba(255, 255, 255, 0); + background-color: #2B3642; + text-decoration: none; + } + + a:hover { + color: red; + background-color: #2B3642; + text-decoration: underline; + } + + /*specials*********************************************************************************************************/ + + logo { + color: #ffffff; + 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; + color: white; + cursor: pointer; + } + #knop a:link{ + color: white; + background-color: transparent; + text-decoration: none; + } + + #knop a:visited { + color: rgba(255, 255, 255, 0); + background-color: #2B3642; + text-decoration: none; + } + + #knop a:hover { + color: red; + background-color: #2B3642; + text-decoration: underline; + } + + #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; + } + nav ul li { + display: inline-block; + padding: 5px 17px 5px 17px; + text-transform: uppercase; + margin: 0; + } + nav ul li.active{ + background-color: #2B3642; + border-radius: 5px; + } + nav ul li a { + text-decoration: none; + color: white + } nav{ + float: right; + } + nav ul li { + display: inline-block; + padding: 5px 17px 5px 17px; + text-transform: uppercase; + margin: 0; + } + nav ul li.active{ + background-color: #2B3642; + border-radius: 5px; + } + nav ul li a { + text-decoration: none; + color: white + } + +/*footer*********/ + +.footer-links{ + max-width: 800px; + margin-left: auto; + margin-right: auto; + text-align: center; + } +.footer-links ul { + padding: 0px; + display: inline-block + } + +.footer-links ul li { + display: inline-block; + padding: 15px 17px 15px 17px; + text-transform: uppercase; + font-size: 20px; + + } + +.footer-links ul li a { + text-decoration: none; + padding: 15px 17px 15px 17px; + color: white; + } + + + /*uitzonderingen*********************************************************************************************************/ +