diff --git a/website/index.html b/website/index.html index a31cf12..4b9392e 100644 --- a/website/index.html +++ b/website/index.html @@ -8,6 +8,8 @@ + + @@ -54,6 +56,7 @@

© 2025 Vista

+ diff --git a/website/media/groentensoep.jpg b/website/media/groentensoep.jpg new file mode 100644 index 0000000..bf08e52 Binary files /dev/null and b/website/media/groentensoep.jpg differ diff --git a/website/script.js b/website/script.js index 3a42ce5..5bf6475 100644 --- a/website/script.js +++ b/website/script.js @@ -1,10 +1,4 @@ // Functie om de productcategorie te tonen - -function goToMainPage() { - document.getElementById('welcome-page').style.display = 'none'; - document.getElementById('main-page').style.display = 'block'; -} - function showCategory(category) { const productDisplay = document.getElementById('product-display'); productDisplay.innerHTML = ''; // Maak het display leeg voordat we nieuwe items toevoegen @@ -62,7 +56,9 @@ function showCategory(category) { } else if (category === 'Soepen') { items = [ { title: "Tomatensoep", imageSrc: "media/soep.jpg", price: 2.50 }, - { title: "Kippensoep", imageSrc: "media/soep.jpg", price: 2.80 }, + { title: "Kippensoep", imageSrc: "https://static.ah.nl/static/recepten/img_RAM_PRD121479_1224x900_JPG.jpg", price: 2.80 }, + { title: "Erwtensoep", imageSrc: "https://www.24kitchen.nl/files/styles/media_text_wide/public/2022-09/erwtensoep%20%282%29.webp?itok=5FwzHgSE", price: 2.50 }, + { title: "Groentesoep (met gehaktballetjes)", imageSrc: "https://www.maggi.nl/sites/default/files/styles/home_stage_1500_700/public/srh_recipes/a55f0226c938b6bc40878dad5306271b.jpg?h=02cb7f90&itok=AmnkjPc3", price: 2.80 }, ]; } else if (category === 'Salades') { items = [ diff --git a/website/style.css b/website/style.css index 4b17d20..0e9db20 100644 --- a/website/style.css +++ b/website/style.css @@ -134,4 +134,3 @@ body { #add-to-cart:hover { background-color: #45a049; } - diff --git a/website/welcome.css b/website/welcome.css new file mode 100644 index 0000000..28be63b --- /dev/null +++ b/website/welcome.css @@ -0,0 +1,37 @@ +.welcome { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + height: 100vh; + background-color: #ffffff; + color: #431111; + text-align: center; + } + + .welcome h1 { + font-size: 50px; + margin-bottom: 20px; + } + + .welcome p { + font-size: 20px; + margin-bottom: 30px; + } + + .welcome button { + padding: 10px 20px; + font-size: 18px; + color: white; + background-color: #431111; + border: none; + border-radius: 5px; + cursor: pointer; + box-shadow: #ff0000; + transition: transform 0.3s ease; + } + + .welcome button:hover { + transform: scale(1.2); /* Grows 20% larger */ + background-color: #a35c5c; + } \ No newline at end of file diff --git a/website/welcome.html b/website/welcome.html new file mode 100644 index 0000000..5af8d6d --- /dev/null +++ b/website/welcome.html @@ -0,0 +1,28 @@ + + + + + + De Welkompagina van de Mees + + + + + + +
+
+

Assesment 2

+

Van Johnny Kindermann

+
+ + + +
+ + + + + \ No newline at end of file