Eerste opzet html website #1
1 changed files with 304 additions and 0 deletions
304
assets/css/mrl.css
Normal file
304
assets/css/mrl.css
Normal file
|
|
@ -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*********************************************************************************************************/
|
||||
|
||||
Loading…
Reference in a new issue