html {
--black: #161615;
-webkit-font-smoothing: antialiased; /* Dit maakt de letterype mooier */
}
body {
margin: 0;
font-family: futura-pt,Helvetica,Arial,sans-serif;
line-height: 1.15; /* Bepaalt de ruimte tussen twee zinnen die onder elkaar staan */
color: var(--black); /* Een var begint in css altijd met twee streepjes. Var gebruik je met twee haakjes */
font-size: 14px;
}
header {
height: 100vh; /* Vh staat voor de hoogte van de browser. 100 is de maximale*/
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
section {
box-sizing: border-box; /* De breedte van de padding wordt niet extra toegevoegt aan het element van 100%*/
width: 100%;
max-width: 100%;
padding: 0 20px 0 20px;
margin-top: 30px;
}
img {
width: 100%;
}
.home-background {
background-image: url(../images/header_achtergrond.png);
}
h1 {
font-size: 28px;
letter-spacing: -0.5px;
text-transform: uppercase;
}
/* Header */
.navigation_bar {
box-sizing: border-box;
display: flex;
height: 60px;
overflow: hidden;
justify-content: space-between;
padding: 20px 25px;
color: white;
position: fixed;
width: 100%;
transition: all 300ms ease-in; /* Animatie header - van wit naar zwart */
top: 0px;
}
.navigation_bar.inverse {
background-color: white;
color: var(--black);
}
.navigation_bar .logo {
margin-left: 30px;
}
.navigation_bar .hamburger svg,
.navigation_bar .logo,
.navigation_bar .options svg,
.navigation_bar a {
height: 100%;
color: currentColor;
fill: currentColor;
}
.navigation_bar .options a:first-child {
margin-right: 30px;
}
/* Producten */
.product-container {
display: flex;
}
.product {
margin-left: 5px;
margin-right: 5px;
}
.product:first-child { /* De first child selecteerd alleen het eerste element met die class.*/
margin-left: 0px;
}
.product:last-child {
margin-right: 0px;
}
.product img {
width: 100%;
margin-bottom: 15px;
}
.product h1 {
font-size: 14px;
font-weight: 500;
margin-bottom: 15px;
margin-top: 0;
}
.product h2 {
font-size: 14px;
font-weight: 400;
margin-right: 5px;
}
.section-title {
font-size: 21px;
font-weight: 400;
margin: 0 0 20px;
text-transform: uppercase;
}
/* hero */
.hero {
height: calc(100vh - 60px);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
display: grid; /* Dit wordt gezien als een grafiek */
place-items: center;
}
.hero .content {
margin-top: 120px;
color: white;
text-align: center;
font-weight: 700;
text-transform: uppercase;
letter-spacing: -0.25px;
width: 100%;
}
.hero .content h1 {
line-height: .8;
font-size: 32px;
margin: 20px 0;
}
.hero .content h2 {
font-size: 16px;
line-height: 1;
margin: 20px 0;
}
.button {
font-size: 12px;
line-height: 1;
padding-top: 16px;
padding-bottom: 16px;
color: #fff;
border: 2px solid #fff;
width: 50%;
display: block;
text-decoration: none;
text-align: center;
}
.hero .content .button {
margin: 0 auto
}
.button--black {
background: var(--black);
border: 0;
}
.button--full {
width: 100% !important; /* Met important wordt de width van 100% niet overgeschreven */
}
.cities {
width: 75%;
}
.button--big {
font-weight: 700;
font-size: 16px;
width: 75%;
}
.button--inline {
width: fit-content;
padding: 10px 20px;
font-size: 32px;
font-weight: 200;
font-family: futura-pt,Helvetica,Arial,sans-serif;
}
.storelocator {
text-align: center;
}
.information h1 {
font-weight: 400;
margin: 0;
}
.storelocator .button {
margin-top: 50px;
margin-right: auto;
margin-left: auto;
}
.information {
background: #ededed;
padding: 30px 24px;
text-align: center;
}
.emailform {
display: flex;
border: 1px solid var(--black);
margin-top: 20px;
}
/* Footer */
footer {
background-color: var(--black);
color: white;
padding-top: 40px;
padding-bottom: 40px;
}
footer h1 {
margin: 0px;
font-size: 18px;
}
footer ul {
list-style-type: none; /* De puntjes voor lijst zijn weg */
padding: 0px;
column-count: 2;
}
footer li {
padding-top: 5px;
padding-bottom: 5px;
}
footer a {
color: white;
text-decoration: none;
}
footer a:not(.button):hover { /* selecteerd alle a's behalve met class button */
text-decoration: underline;
}
footer section {
margin: 0px 0px 30px 0px;
}
footer .button {
margin-bottom: 20px;
font-weight: 700;
}
footer .payment ul {
column-count: 1;
width: 70%;
}
footer .payment ul li {
display: inline; /* Inline wordt gezien als tekst */
margin-right: 5px;
margin-bottom: 2px;
}
footer .social ul {
column-count: 1;
fill: white;
display: flex;
justify-content: space-between;
}
footer .copyright {
text-align: center;
}
/* Over ons */
.about h1 {
font-size: 21px;
margin-top: 121px;
margin-bottom: 50px;
font-weight: 400;
}
.about p {
margin-bottom: 30px;
margin-top: 0px;
font-size: 15px;
font-weight: 400;
line-height: 1.4;
}
.picture_square {
aspect-ratio: 7/6; /* Is de verhouding van de breedte en hoogte */
width: 100%;
object-fit: cover; /* Werkt alleen met plaatsjes */
margin-bottom: 20px;
}
.radio_group {
display: flex;
margin-top: 10px;
}
.form {
text-align: center;
margin-bottom: 60px;
padding: 0px 40px 0px 40px;
}
.form h1 {
text-transform: none;
font-size: 18px;
}
/* Formulier */
input:not([type="radio"]):not([type="submit"]) { /* Selecteerd alle input's behalve de type atribut met de waarde radio */
background: none;
width: 100%;
border: none;
padding: 15px;
}
input[type="radio"] { /* Hier wordt de type atribut met de waarde radio wel geselecteerd */
height: 20px;
width: 20px;
vertical-align: middle;
margin-right: 10px;
}
input[type="radio"]:checked {
accent-color: var(--black); /* Accent-color zorgt ervoor dat het zwart wordt */
}
.radio_group_element {
width: 100%;
}
::placeholder {
color: rgb(180, 187, 195);
}
.form input:not([type="submit"]) {
box-sizing: border-box;
border-radius: 2px;
padding: 0px 0px 0px 16px;
height: 38px;
font-size: 14px;
font-weight: 400;
letter-spacing: 0px;
border: 1px solid rgb(180, 187, 195);
margin-bottom: 20px;
}
.radio_group_element label {
vertical-align: super;
}