body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 20px;
background-color: #fff;
padding: 30px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 999;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}
.cookie-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #f7f7f7;
padding: 20px;
text-align: center;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
z-index: 9999;
}
.cookie-banner p {
margin: 0;
font-size: 14px;
color: #444;
}
.cookie-banner button {
margin-top: 10px;
padding: 8px 15px;
font-size: 14px;
color: #fff;
background-color: #0096db;
border: none;
cursor: pointer;
}
main {
margin-top: 500px;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.introductie h1 {
font-size: 36px;
margin-bottom: 20px;
}
.introductie p {
font-size: 18px;
line-height: 1.5;
margin-bottom: 30px;
}
.portfolio {
margin-top: 50px;
}
.portfolio h2 {
font-size: 24px;
margin-bottom: 20px;
}
/* Stijlen voor de footer */
footer {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
font-size: 14px;
}
footer ul {
list-style-type: none;
padding: 0;
margin-bottom: 10px;
}
footer ul li {
display: inline;
margin-right: 10px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
top: 100%;
z-index: 1;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropbtn:hover {
color: #007acc;
}
.dropdown:hover .dropbtn {
color: #007acc;
}
.introductie-geen-account {
margin-top: 50px;
text-align: center;
}
.introductie-geen-account h2 {
font-size: 24px;
margin-bottom: 20px;
}
.introductie-geen-account p {
font-size: 16px;
line-height: 1.5;
margin-bottom: 10px;
}
.introductie-geen-account a {
color: #007acc;
text-decoration: none;
}
.introductie-geen-account a:hover {
text-decoration: underline;
}
.scroll-button {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
display: none;
background-color: #ccc;
border: none;
border-radius: 50%;
padding: 10px;
cursor: pointer;
transition: opacity 0.3s ease-in-out;
}
.scroll-button.show {
display: block;
}
.scroll-button img {
width: 30px;
height: 30px;
}
.introductie {
margin-top: 70px;
text-align: center;
}
.introductie h1 {
font-size: 36px;
margin-bottom: 20px;
}
.introductie p {
font-size: 18px;
line-height: 1.5;
margin-bottom: 30px;
}
.introductie .tekst-foto {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
}
.introductie .foto-tekst {
flex-direction: row-reverse;
}
@media screen and (max-width: 768px) {
.introductie .tekst-foto,
.introductie .foto-tekst {
flex-direction: column;
}
.introductie .tekst-foto .tekst,
.introductie .foto-tekst .tekst,
.introductie .tekst-foto .foto,
.introductie .foto-tekst .foto {
flex-basis: 100%;
}
}
.introductie .tekst-foto .foto img,
.introductie .foto-tekst .foto img {
display: block;
max-width: 100%;
height: 10px;
}
.introductie .gelijke-grootte {
height: 100%;
object-fit: cover;
}
.list {
padding: 0;
text-align: left;
}
.introductie .tekst-foto .tekst,
.introductie .foto-tekst .tekst {
flex-basis: 40%;
padding-right: 60px;
padding-left: 60px;
}
.introductie .tekst-foto .foto,
.introductie .foto-tekst .foto {
flex-basis: 60%;
}
.introductie .tekst-foto .tekst h2,
.introductie .foto-tekst .tekst h2 {
font-size: 24px;
margin-bottom: 10px;
}
.introductie .tekst-foto .tekst p,
.introductie .foto-tekst .tekst p {
font-size: 16px;
line-height: 1.5;
margin-bottom: 0;
}
.introductie .tekst-foto .foto img,
.introductie .foto-tekst .foto img {
width: 100%;
height: auto;
}
@media screen and (max-width: 767px) {
header {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
order: -1;
}
.hamburger-menu {
order: 3;
margin-right: 30px;
padding-right: 30px; /* Voeg 20 pixels rechtervulling toe */
display: flex;
}
nav ul.menu {
display: none;
align-items: center; /* Plaats het menu-items aan de rechterkant */
top: 100%;
width: 100%; /* Pas de breedte van het menu aan naar wens */
background-color: #fff;
}
nav ul.menu.open {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #fff;
position: absolute;
top: 100%;
right: 0;
z-index: 999;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}
nav ul.menu li {
margin-right: 0;
margin-bottom: 10px;
}
}
/* Responsive stijlen voor introductie sectie */
@media screen and (max-width: 768px) {
.introductie {
margin-top: 100px;
}
.introductie h1 {
font-size: 28px;
margin-bottom: 10px;
}
.introductie p {
font-size: 16px;
margin-bottom: 20px;
}
}
/* Responsive stijlen voor portfolio sectie */
@media screen and (max-width: 768px) {
.portfolio .project {
flex-basis: 100%;
margin-bottom: 20px;
}
}
/* Responsive stijlen voor testimonials sectie */
@media screen and (max-width: 768px) {
.testimonials .testimonial {
width: 100%;
}
}
/* Responsive stijlen voor review-form sectie */
@media screen and (max-width: 768px) {
.review-form textarea {
height: 100px;
}
}
/* Responsive stijlen voor geheime-functies sectie */
@media screen and (max-width: 768px) {
.geheime-functies input[type="text"],
.geheime-functies textarea {
width: 100%;
}
}
/* Responsive stijlen voor introductie sectie */
@media screen and (max-width: 768px) {
.introductie {
margin-top: 100px;
}
.introductie h1 {
font-size: 28px;
margin-bottom: 10px;
}
.introductie p {
font-size: 16px;
margin-bottom: 20px;
}
}
/* Responsive stijlen voor review-form sectie */
@media screen and (max-width: 768px) {
.review-form textarea {
height: 100px;
}
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
top: 100%;
z-index: 1;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropbtn:hover {
color: #007acc;
}
.dropdown:hover .dropbtn {
color: #007acc;
}
/* CSS voor het hamburgermenu */
.hamburger-menu {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
width: 30px;
height: 20px;
cursor: pointer;
}
.line {
width: 100%;
height: 2px;
background-color: #333;
margin: 2px;
}
/* CSS voor het menu op kleinere schermen */
nav ul.menu {
list-style: none;
display: flex;
justify-content: flex-end;
align-items: center;
margin: 0;
}
nav ul.menu li {
margin-right: 20px;
}
nav ul.menu li:last-child {
margin-right: 0;
}
@media screen and (max-width: 768px) {
.hamburger-menu {
display: flex;
}
nav ul.menu {
display: none;
flex-direction: column;
align-items: flex-start;
}
nav ul.menu.open {
display: flex;
}
nav ul.menu li {
margin-right: 0;
margin-bottom: 10px;
font-size: 30px;
font: bold;
}
}
.hamburger-menu.active .bar {
background-color: transparent;
}
.hamburger-menu.active .bar:before {
transform: translateY(7px) rotate(45deg);
}
.hamburger-menu.active .bar:after {
transform: translateY(-7px) rotate(-45deg);
}
nav ul {
list-style: none;
margin: 0;
padding: 10;
display: flex;
}
nav li {
margin-left: -15px;
padding-right: 50px;
}
nav a {
color: #333;
text-decoration: none;
font-size: 16px;
font-weight: bold;
}
nav a:hover {
color: #007acc;
}
.Glogo {
margin-top: 7px;
max-width: 100%;
}
@media (max-width: 767px) {
.Glogo {
margin-top: 10px;
}
}
.introductie {
text-align: center;
}