Mathijs/lermer.nl
Mathijs/lermer.nl
2
1
Fork 0
Code Issues 2 Pull requests Activity

Eerste opzet html website #1

Merged
Mathijs merged 8 commits from test into main 2023-01-08 13:04:34 +01:00
Conversation 0 Commits 8 Files changed 8097 +304
1 changed files with 304 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 2bd926b7a6 - Show all commits

304
assets/css/mrl.css Normal file
View 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*********************************************************************************************************/