alvin/Spik-en-span
1
0
Fork 0
mirror of https://github.com/Alvin-Zilverstand/Spik-en-span.git synced 2026-03-06 11:17:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

add bestellen.css for improved styling and update HTML files to include new stylesheet

Browse Source
This commit is contained in:
vista-man
2025-04-09 10:23:51 +02:00
parent a38eb5e7af
commit 226559eaea
7 changed files with 124 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
bestellen.css Normal file
View File

@@ -0,0 +1,32 @@
.item-container {
display: flex;
justify-content: space-between;
margin-top: 30px;
}
.item {
flex: 0 0 48%;
border: 1px solid #ddd;
border-radius: 5px;
padding: 15px;
text-align: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.item img {
max-width: 100%;
height: auto;
margin-bottom: 15px;
}
.item h5 {
margin-bottom: 10px;
}
.item p {
margin-bottom: 15px;
}
.item button {
width: 100%;
}

1
bestellen.html
View File

@@ -7,6 +7,7 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="assets/favicon.ico"> <link rel="icon" type="image/x-icon" href="assets/favicon.ico">
<link rel="stylesheet" href="bestellen.css">
</head> </head>
<body> <body>

133
style.css
View File

@@ -13,12 +13,13 @@
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
} }
.navbar { .navbar {
display: flex; display: flex;
align-items: right; align-items: right;
justify-content: right; justify-content: right;
background-color: #000; background-color: #000;
padding: 10px 20px; padding: 10px 20px;
color: black;
} }
.logo { .logo {
@@ -44,64 +45,104 @@
} }
.section{ .section{
background-color: #000; background-color: #000000;
} }
.size { .size {
width: 33.33%; width: 33.33%;
height: 25%; height: 25%;
} }
.item-container { body {
display: flex; font-family: Arial, sans-serif;
justify-content: space-between; margin: 0;
margin-top: 30px; padding: 0;
} background-color: #ffffff;
.item {
flex: 0 0 48%;
border: 1px solid #ddd;
border-radius: 5px;
padding: 15px;
text-align: center; text-align: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
} }
.container {
.item img { max-width: 600px;
max-width: 100%; margin: 50px auto;
height: auto; background: white;
margin-bottom: 15px; padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
} }
input, textarea {
.item h5 {
margin-bottom: 10px;
}
.item p {
margin-bottom: 15px;
}
.item button {
width: 100%; width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
background-color: #28a745;
color: white;
padding: 10px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #218838;
} }
.video-container { body {
display: flex; font-family: Arial, sans-serif;
flex-direction: column; margin: 0;
align-items: center; padding: 0;
justify-content: center; background-color: #f8f9fa;
text-align: center; text-align: center;
margin-top: 20px; }v
.container {
max-width: 800px;
margin: 50px auto;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
opacity: 0.5;
background-color: rgba(255, 255, 255, 0.7);
}
h2 {
color: #28a745;
}
p {
text-align: left;
line-height: 1.6;
}
.team-member {
margin: 20px 0;
}
.team-member img {
border-radius: 50%;
width: 150px;
height: 150px;
}
.team-member h3 {
margin: 10px 0 5px;
}
.team-member p {
margin: 0;
} }
.background-video { .achtergrond-video {
max-width: 100%; position: absolute;
height: auto; top: 0;
margin-top: 15px; left: 0;
} width: 100%;
height: 100%;
.inhoud button { object-fit: cover;
margin-top: 10px; z-index: -1;
} }
.inhoud {
position: relative;
z-index: 1;
color: white;
text-align: center;
margin-top: 20vh;
}

1
vrijdag-kinderen.html
View File

@@ -7,6 +7,7 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="assets/favicon.ico"> <link rel="icon" type="image/x-icon" href="assets/favicon.ico">
<link rel="stylesheet" href="bestellen.css">
</head> </head>
<body> <body>

1
vrijdag-volwassenen.html
View File

@@ -7,6 +7,7 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="assets/favicon.ico"> <link rel="icon" type="image/x-icon" href="assets/favicon.ico">
<link rel="stylesheet" href="bestellen.css">
</head> </head>
<body> <body>

1
zaterdag-kinderen.html
View File

@@ -7,6 +7,7 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="assets/favicon.ico"> <link rel="icon" type="image/x-icon" href="assets/favicon.ico">
<link rel="stylesheet" href="bestellen.css">
</head> </head>
<body> <body>

1
zaterdag-volwassenen.html
View File

@@ -7,6 +7,7 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="assets/favicon.ico"> <link rel="icon" type="image/x-icon" href="assets/favicon.ico">
<link rel="stylesheet" href="bestellen.css">
</head> </head>
<body> <body>