alvin/Schoolkantine
1
0
Fork 0
mirror of https://github.com/Alvin-Zilverstand/Schoolkantine.git synced 2026-03-06 21:36:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

Move CSS styles to a separate stylesheet for better organization

Browse Source
This commit is contained in:
vista-man
2025-02-11 13:24:28 +01:00
parent 753a9895c3
commit d142e78db6
2 changed files with 70 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
website/index.html
View File

@@ -4,77 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>McDonald's Menu</title> <title>McDonald's Menu</title>
<style> <link rel="stylesheet" href="style.css">
body {
font-family: Arial, sans-serif;
margin: 0;
display: flex;
}
/* Linkerkant: Het menu */
.menu-list {
width: 30%;
background-color: #f2c14e;
padding: 20px;
height: 100vh;
overflow-y: auto;
}
.menu-list h2 {
color: #d32f2f;
font-size: 2em;
margin-bottom: 20px;
}
.menu-item {
background-color: #fff;
padding: 15px;
margin: 10px 0;
border-radius: 8px;
cursor: pointer;
font-size: 1.2em;
}
.menu-item:hover {
background-color: #f59e42;
}
/* Rechterkant: Detail weergave */
.menu-detail {
width: 70%;
background-color: white;
padding: 20px;
display: none; /* Start verborgen */
}
.menu-detail img {
width: 100%;
max-width: 400px;
height: auto;
margin-bottom: 20px;
}
.menu-detail h2 {
color: #d32f2f;
font-size: 2em;
}
.menu-detail p {
font-size: 1.2em;
color: #555;
margin: 20px 0;
}
/* Footer */
footer {
text-align: center;
padding: 20px;
background-color: #f2c14e;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head> </head>
<body> <body>

69
website/style.css Normal file
View File

@@ -0,0 +1,69 @@
body {
font-family: Arial, sans-serif;
margin: 0;
display: flex;
}
/* Linkerkant: Het menu */
.menu-list {
width: 30%;
background-color: #f2c14e;
padding: 20px;
height: 100vh;
overflow-y: auto;
}
.menu-list h2 {
color: #d32f2f;
font-size: 2em;
margin-bottom: 20px;
}
.menu-item {
background-color: #fff;
padding: 15px;
margin: 10px 0;
border-radius: 8px;
cursor: pointer;
font-size: 1.2em;
}
.menu-item:hover {
background-color: #f59e42;
}
/* Rechterkant: Detail weergave */
.menu-detail {
width: 70%;
background-color: white;
padding: 20px;
display: none; /* Start verborgen */
}
.menu-detail img {
width: 100%;
max-width: 400px;
height: auto;
margin-bottom: 20px;
}
.menu-detail h2 {
color: #d32f2f;
font-size: 2em;
}
.menu-detail p {
font-size: 1.2em;
color: #555;
margin: 20px 0;
}
/* Footer */
footer {
text-align: center;
padding: 20px;
background-color: #f2c14e;
position: fixed;
bottom: 0;
width: 100%;
}