Birkbeck2 · github-classroom · Dec 11, 2023 · Dec 12, 2023 · Dec 12, 2023 · Dec 12, 2023
diff --git a/README.md b/README.md
@@ -0,0 +1,30 @@
+[![Review Assignment Due Date](https://classroom.github.com/assets/deadline-readme-button-24ddc0f5d75046c5622901739e7c5dd533143b0c8e959d652212380cedb1ea36.svg)](https://classroom.github.com/a/59P2FRZS)
+
+
+This repository contains all the files necessary for the portfolio website Feast and Wonder. The website can be found at: 
+
+[https://animated-potato-73kqllg.pages.github.io/](https://birkbeck2.github.io/web-development-website-project-adeledsg/)
+https://birkbeck2.github.io/web-development-website-project-adeledsg/ 
+
+Feast and Wonder is a food travel blog with the design goal of creating a pleasurable user experience for the Blind and Visually Impaired. It contains five html documents, one CSS document and an image folder. 
+
+This portfolio website was made in the context of a homework assignment and is not for commercial use. It is submitted along a UX report via Turnitin. 
+
+# File content 
+The following HTML files are used to create the website:
+
+| File | Content |
+| --- | --- |
+| `index.html` | landing and home page |
+| `seoul.html` | gallery page for Seoul |
+| `paris.html` | gallery page for Paris |
+| `brussels.html` | gallery page for Brussels |
+| `contact.html` | Contact page containing the contact form |
+
+Additionally, a global stylesheet entitled `styles.css` is used to set styles for all five pages above.
+
+Comments have been provided in each document to provide further explanation on implementation details, the structure of the file (CSS file) and when references have been used.  
+
+All images and videos can be found in the `image` folder.
+
+The food images and videos were provided by Birkbeck University and are free to use. The social media icons (Instagram, Facebook, and Pinterest) were download from [Free Icons, Clipart Illustrations, Photos, and Music (icons8.com)](https://icons8.com/) for free through the developer’s personal account and following their [licensing requirements.](https://icons8.com/vue-static/landings/pricing/icons8-license.pdf)
diff --git a/brussels.html b/brussels.html
@@ -0,0 +1,80 @@
+<!-- <!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title>Feast and Wonder</title>
+    <link rel="stylesheet" href="styles.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+
+<body>
+    <header>
+        <div class="skip-to-main">
+            <a href="#main">Skip to main content</a>
+        </div>
+
+        <nav class="navbar">
+            <ul>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="seoul.html">Seoul</a></li>
+                <li><a href="paris.html">Paris</a></li>
+                <li><a href="brussels.html">Brussels</a></li>
+                <li><a href="visuals.html">Visuals</a></li>
+                <li><a href="contact.html">Contact</a></li>
+            </ul>
+        </nav>
+
+        <nav class="breadcrumbs"> 
+            <ul>
+                <li><a href="index.html">Home</a></li>
+                <li>Brussels</li>
+            </ul>
+        </nav>
+
+    </header>
+
+    <main id="main">
+        <section class="grid-second">
+            <h1 class="city-name">Brussels</h1>
+
+            <div class="flexbox-container"> 
+
+                <div class="video-container">
+                    <video width="1280" height="720" src="images/chocolate.mp4" controls></video> 
+
+                    <article class="video-transcript" aria-labelledby="video-transcript">
+                        <h2 id="video-transcript">At the chocolate shop</h2>
+                        <p>This short video shows a rotating pile of filled chocolates in a local chocolate shop -known as a chocolaterie.
+                            Shaped in the form of seashells, made from a mix of white and dark chocolate, and filled with praline -a nut and sugar paste- these
+                            chocolates are emblematic of Belgian chocolate.
+                        </p>
+                    </article>
+                </div>
+
+                <div class="image-container">
+                    <img src="images/waffles.jpg" width="1920" height="1173" alt="Freshly made waffles in the shape of a heart pictured with a bowl of flour, two eggs and a whisk.">
+                    <img src="images/christmas-cookies.jpg" width="1920" height="1146" alt="Star shaped spiced cinnamon christmas cookies surrounded by pine cones, whole walnuts in their shell, and cinnamon sticks.">
+                    <img src="images/chocolate.jpg" width="1920" height="1275" alt=" A close up picture of small differently shaped chocolates displayed in rows ; a combination of both filled and solid in white and dark chocolate.">
+                    <img src="images/bread.jpg" width="1920" height="1286" alt=" A close up picture of small bread buns -known in belgium as pistolet- coated with flour.">
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <footer>
+        <h3>Want to see more?</h3>
+        <hr>
+        <ul class="socials">
+            <li><a href="http://www.example.org"><img src="images/icons8-instagram-96.png" width="96" height="96" alt="Instagram icon"></a></li>
+            <li><a href="http://www.example.org"><img src="images/icons8-facebook-96.png" width="96" height="96" alt="Facebook icon"></a></li>
+            <li><a href="http://www.example.org"><img src="images/icons8-pinterest-96.png" width="96" height="96" alt="Pinterest icon"></a></li>
+            <li class="attribution"> <a href="https://icons8.com/icon/84884/instagram">Instagram</a>,<a href="https://icons8.com/icon/118487/facebook">Facebook</a>,<a href="https://icons8.com/icon/87072/pinterest">Pinterest</a>icons by<a href="https://icons8.com">Icons8</a></li>
+        </ul>
+    </footer>
+</body>
+
+</html>
+
+-->
diff --git a/contact.html b/contact.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title>Feast and Wonder</title>
+    <link rel="stylesheet" href="styles.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+
+<body>
+    <header>
+        <div class="skip-to-main">
+            <a href="#main">Skip to main content</a>
+        </div>
+
+        <nav class="navbar">
+            <ul>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="seoul.html">Seoul</a></li>
+                <li><a href="paris.html">Paris</a></li>
+                <li><a href="visuals.html">Visuals</a></li>
+                <li><a href="prototypes.html">Prototypes</a></li>
+                <li><a href="contact.html">Contact</a></li>
+            </ul>
+        </nav>
+
+        <nav class="breadcrumbs"> 
+            <ul>
+                <li><a href="index.html">Home</a></li>
+                <li>Contact</li>
+            </ul>
+        </nav>
+    </header>
+
+    <main id="main">
+        <section class="grid-contact"> <!--For the layout of the page-->
+            <h1 class="city-name">Contact me</h1>
+
+            <form method="post"> <!--setting the request method for the browser to use-->
+                <div class="form-section" aria-labelledby="first-name"> <!--Adding aria label for accessibility-->
+                    <label for="first-name">Name</label>
+                    <input id="first-name" name="first-name" type="text" placeholder="Enter your first name">
+                </div>
+                <div class="form-section" aria-labelledby="last-name">
+                    <label for="last-name">Last Name</label>
+                    <input id="last-name" name="last-name" type="text" placeholder="Enter your last name">
+                </div>
+                <div class="form-section" aria-labelledby="email">
+                    <label for="email">Email address</label>
+                    <input id="email" name="email" type="email" placeholder="Enter your e-mail address"> <!--type attribute for safety-->
+                </div>
+                    <div class="form-section" aria-labelledby="message">
+                    <label for="message">Message</label>
+                    <textarea id="message" name="message" placeholder="Enter your message"></textarea>
+                </div>
+                <div class="button">
+                    <button aria-label="submit form" type="submit">Submit</button>
+                </div>
+            </form>
+        </section>
+    </main>
+
+    <footer>
+        <h2>Want to see more?</h2>
+        <hr>
+        <ul class="socials">
+            <li><a href="http://www.example.org"><img src="images/icons8-instagram-96.png" width="96" height="96" alt="Instagram icon"></a></li>
+            <li><a href="http://www.example.org"><img src="images/icons8-facebook-96.png" width="96" height="96" alt="Facebook icon"></a></li>
+            <li><a href="http://www.example.org"><img src="images/icons8-pinterest-96.png" width="96" height="96" alt="Pinterest icon"></a></li>
+            <li class="attribution"> <a href="https://icons8.com/icon/84884/instagram">Instagram</a>,<a href="https://icons8.com/icon/118487/facebook">Facebook</a>,<a href="https://icons8.com/icon/87072/pinterest">Pinterest</a>icons by<a href="https://icons8.com">Icons8</a></li>
+        </ul>
+    </footer>
+</body>
+
+</html>
diff --git a/images/Book1.jpg:Zone.Identifier b/images/Book1.jpg:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\sreej\OneDrive\Desktop\Adele's shit\visual-web-dev\assignment-1\submission\wetransfer_mockups_2024-02-22_1836.zip
diff --git a/images/Book2.jpg:Zone.Identifier b/images/Book2.jpg:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\sreej\OneDrive\Desktop\Adele's shit\visual-web-dev\assignment-1\submission\wetransfer_mockups_2024-02-22_1836.zip
diff --git a/images/Book3.jpg:Zone.Identifier b/images/Book3.jpg:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\sreej\OneDrive\Desktop\Adele's shit\visual-web-dev\assignment-1\submission\wetransfer_mockups_2024-02-22_1836.zip
diff --git a/images/Croissant.mp4 b/images/Croissant.mp4
diff --git a/images/Seoul.mp4 b/images/Seoul.mp4
diff --git a/images/book1.jpg b/images/book1.jpg
diff --git a/images/book2.jpg b/images/book2.jpg
diff --git a/images/book3.jpg b/images/book3.jpg
diff --git a/images/bread.jpg b/images/bread.jpg
diff --git a/images/broth.jpg b/images/broth.jpg
diff --git a/images/building-sketch.jpg b/images/building-sketch.jpg
diff --git a/images/building-sketch.jpg:Zone.Identifier b/images/building-sketch.jpg:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\sreej\OneDrive\Desktop\Adele's shit\visual-web-dev\Bookcover.zip
diff --git a/images/castle.jpg b/images/castle.jpg
diff --git a/images/charcuterie.jpg b/images/charcuterie.jpg
diff --git a/images/cheese-board.jpg b/images/cheese-board.jpg
diff --git a/images/chocolate.jpg b/images/chocolate.jpg
diff --git a/images/chocolate.mp4 b/images/chocolate.mp4
diff --git a/images/christmas-cookies.jpg b/images/christmas-cookies.jpg
diff --git a/images/cover1.jpg b/images/cover1.jpg
diff --git a/images/cover2.jpg b/images/cover2.jpg
diff --git a/images/cover3.jpg b/images/cover3.jpg
diff --git a/images/croissant.jpg b/images/croissant.jpg
diff --git a/images/icons8-facebook-96.png b/images/icons8-facebook-96.png
diff --git a/images/icons8-facebook-96.png:Zone.Identifier b/images/icons8-facebook-96.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+HostUrl=about:internet
diff --git a/images/icons8-instagram-96.png b/images/icons8-instagram-96.png
diff --git a/images/icons8-instagram-96.png:Zone.Identifier b/images/icons8-instagram-96.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+HostUrl=about:internet
diff --git a/images/icons8-pinterest-96.png b/images/icons8-pinterest-96.png
diff --git a/images/icons8-pinterest-96.png:Zone.Identifier b/images/icons8-pinterest-96.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+HostUrl=about:internet
diff --git a/images/logo1.svg b/images/logo1.svg
diff --git a/images/macarons.jpg b/images/macarons.jpg
diff --git a/images/magical castle.png b/images/magical castle.png
diff --git a/images/magical castle.png:Zone.Identifier b/images/magical castle.png:Zone.Identifier
@@ -0,0 +1,4 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=https://mail.google.com/
+HostUrl=https://mail-attachment.googleusercontent.com/attachment/u/1/?ui=2&ik=08aadfbd9b&attid=0.1&permmsgid=msg-f:1791714515271748891&th=18dd72dbd5af0d1b&view=att&disp=safe&saddbat=ANGjdJ8zVxVLKgGmc2fO-lyjMynDaZ0PTh-eonrOLpG04UwV7XfnC30Wqhu0uXohe7Qb51fCs006ZJ37yPQduAwax4iiYEQvef8iItxwEQrMAdD61QgiOG5eV2b9ZunFo2oT_D7aSeuGDO-3fJjP0o5AFWbPRM_XdbNQJ7bHazPWOREawhVW_o9kp9OqiaMgBFRAbZ7GCf3i8s4IZz9WdUPwFasxH1dZ85Btxms1VvxKi0lXbYzQGIwqsFc9y5XniAMYzLl4ea2INhtZGvSkyJ4YVdpai_roGnTelPEQHDZ81kWh8oHgMf8vylKA867YhpROmgiIySP9imYVVLimYos43ilwGfR4e-Wzz2kumOsh-ByVocszn8xOxc2vnZbf_u0Q00C-lcqsKJQ0cvJXEkXFQ2tCqm0ZKqZVrrZuMbM_S44ls9IdY6vELAU78xNGYlbeqMJNjrdAj4g00H5MB4eSO6gygogzRhzJGxFCgwjBXAN44OgtUOJ_4DXJYvJK0bs4UUqu107tvERfMfNcWqYqgLnqICPXkK4T-4GZXn0ydi6bh7Cw_cPXKta3G6Cn10q3oVrb8RJm3lhskRW9JCEUa8MsIgk4LCZqf56KTJyj1UM3s-YVjJ9XXldU6vy3V1vY3vGKyGmDKoI7iTfkvN0x032IDnAf8C1rI_uxAZG5M_nYlNyrK1-8DgdiCN7Xh-8WZDV3B8X8lxKW10MQQkRCHHvD0WnKCV-yslDi-LySPsbGqL-xAl9UlecpPrmPMtOfaPuiyQqTv1oXU6pSCaFemPL8GYMb23kZV9kN03_VYOCg57WOs6_zloAx3tOZdaEMhyuQFGmRB2t-Ok882hvDgc30681MsB3PDSWqXFbAQiak-d2XeO5Yb6I8G3knyYzLRfnl32PKYYnMyteKcDpdQVFI_TmT0W216FSn5skpSiVH7jhO1UJXlRlwfLM2eoR8q3QSVtmeVbXfnsCINx_q9z6asZCTJ9MKVKdUGNcE0XQBtT01rK3lTnoRVnwAl6XxYdJuk3-2tsNC-UICr93Sp35AoZlnWNWbYF4LyQ
diff --git a/images/ramen.jpg b/images/ramen.jpg
diff --git a/images/store-items.png b/images/store-items.png