diff --git a/README.md b/README.md new file mode 100644 index 0000000..56b0e1b --- /dev/null +++ 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 new file mode 100644 index 0000000..f19ea89 --- /dev/null +++ b/brussels.html @@ -0,0 +1,80 @@ + \ No newline at end of file diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..a769490 --- /dev/null +++ b/contact.html @@ -0,0 +1,77 @@ + + + + + + + Feast and Wonder + + + + + +
+
+ Skip to main content +
+ + + + +
+ +
+
+

Contact me

+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
+
+ + + + + diff --git a/images/Book1.jpg:Zone.Identifier b/images/Book1.jpg:Zone.Identifier new file mode 100644 index 0000000..62afff4 --- /dev/null +++ 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 new file mode 100644 index 0000000..62afff4 --- /dev/null +++ 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 new file mode 100644 index 0000000..62afff4 --- /dev/null +++ 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 new file mode 100644 index 0000000..22c16a0 Binary files /dev/null and b/images/Croissant.mp4 differ diff --git a/images/Seoul.mp4 b/images/Seoul.mp4 new file mode 100644 index 0000000..5e9c3fd Binary files /dev/null and b/images/Seoul.mp4 differ diff --git a/images/book1.jpg b/images/book1.jpg new file mode 100644 index 0000000..5c213d3 Binary files /dev/null and b/images/book1.jpg differ diff --git a/images/book2.jpg b/images/book2.jpg new file mode 100644 index 0000000..7e047ec Binary files /dev/null and b/images/book2.jpg differ diff --git a/images/book3.jpg b/images/book3.jpg new file mode 100644 index 0000000..97abe20 Binary files /dev/null and b/images/book3.jpg differ diff --git a/images/bread.jpg b/images/bread.jpg new file mode 100644 index 0000000..fd6b2bb Binary files /dev/null and b/images/bread.jpg differ diff --git a/images/broth.jpg b/images/broth.jpg new file mode 100644 index 0000000..71550d3 Binary files /dev/null and b/images/broth.jpg differ diff --git a/images/building-sketch.jpg b/images/building-sketch.jpg new file mode 100644 index 0000000..83d58bf Binary files /dev/null and b/images/building-sketch.jpg differ diff --git a/images/building-sketch.jpg:Zone.Identifier b/images/building-sketch.jpg:Zone.Identifier new file mode 100644 index 0000000..40eb51f --- /dev/null +++ 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 new file mode 100644 index 0000000..196ab91 Binary files /dev/null and b/images/castle.jpg differ diff --git a/images/charcuterie.jpg b/images/charcuterie.jpg new file mode 100644 index 0000000..8fa7fb6 Binary files /dev/null and b/images/charcuterie.jpg differ diff --git a/images/cheese-board.jpg b/images/cheese-board.jpg new file mode 100644 index 0000000..8148242 Binary files /dev/null and b/images/cheese-board.jpg differ diff --git a/images/chocolate.jpg b/images/chocolate.jpg new file mode 100644 index 0000000..46e523d Binary files /dev/null and b/images/chocolate.jpg differ diff --git a/images/chocolate.mp4 b/images/chocolate.mp4 new file mode 100644 index 0000000..c8cd20c Binary files /dev/null and b/images/chocolate.mp4 differ diff --git a/images/christmas-cookies.jpg b/images/christmas-cookies.jpg new file mode 100644 index 0000000..bb81cbb Binary files /dev/null and b/images/christmas-cookies.jpg differ diff --git a/images/cover1.jpg b/images/cover1.jpg new file mode 100644 index 0000000..cef9fca Binary files /dev/null and b/images/cover1.jpg differ diff --git a/images/cover2.jpg b/images/cover2.jpg new file mode 100644 index 0000000..a189288 Binary files /dev/null and b/images/cover2.jpg differ diff --git a/images/cover3.jpg b/images/cover3.jpg new file mode 100644 index 0000000..8b7202d Binary files /dev/null and b/images/cover3.jpg differ diff --git a/images/croissant.jpg b/images/croissant.jpg new file mode 100644 index 0000000..e2a6bdf Binary files /dev/null and b/images/croissant.jpg differ diff --git a/images/icons8-facebook-96.png b/images/icons8-facebook-96.png new file mode 100644 index 0000000..851084e Binary files /dev/null and b/images/icons8-facebook-96.png differ diff --git a/images/icons8-facebook-96.png:Zone.Identifier b/images/icons8-facebook-96.png:Zone.Identifier new file mode 100644 index 0000000..053d112 --- /dev/null +++ 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 new file mode 100644 index 0000000..436c174 Binary files /dev/null and b/images/icons8-instagram-96.png differ diff --git a/images/icons8-instagram-96.png:Zone.Identifier b/images/icons8-instagram-96.png:Zone.Identifier new file mode 100644 index 0000000..053d112 --- /dev/null +++ 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 new file mode 100644 index 0000000..9b0a00a Binary files /dev/null and b/images/icons8-pinterest-96.png differ diff --git a/images/icons8-pinterest-96.png:Zone.Identifier b/images/icons8-pinterest-96.png:Zone.Identifier new file mode 100644 index 0000000..053d112 --- /dev/null +++ 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 new file mode 100644 index 0000000..76478e5 --- /dev/null +++ b/images/logo1.svg @@ -0,0 +1,65 @@ + + + + + + S + + + L + + + + + E + + + + + V + + + S + + + + + E + + + H + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/macarons.jpg b/images/macarons.jpg new file mode 100644 index 0000000..04c8213 Binary files /dev/null and b/images/macarons.jpg differ diff --git a/images/magical castle.png b/images/magical castle.png new file mode 100644 index 0000000..ac9a821 Binary files /dev/null and b/images/magical castle.png differ diff --git a/images/magical castle.png:Zone.Identifier b/images/magical castle.png:Zone.Identifier new file mode 100644 index 0000000..f0c3d5e --- /dev/null +++ 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 new file mode 100644 index 0000000..5793372 Binary files /dev/null and b/images/ramen.jpg differ diff --git a/images/store-items.png b/images/store-items.png new file mode 100644 index 0000000..f680db3 Binary files /dev/null and b/images/store-items.png differ diff --git a/images/store-items.png:Zone.Identifier b/images/store-items.png:Zone.Identifier new file mode 100644 index 0000000..d8c35f9 --- /dev/null +++ b/images/store-items.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:1791714792812437127&th=18dd731c7465de87&view=att&disp=safe&saddbat=ANGjdJ8_FC2JTsZ6WEFcmTsJQ8IuRXG03vv6U62cgGQYL3rS114kLodOEnzXJF9uKDjrPjO1fpFBNI82b2IEJQ3CT8V93eSn9LW6o5GPTXk_MnNZN5Kr44i7Si-YwF__URj-99g4DSJV5HMRIFp2ckppafh_vmN2DcXJSlD0jVMumdQzsKf-YbuAxXjIO__y9MOpSVuXCt4pxuMZHPbiuVBWwjzFXkBZAfO_c-8r2JxrYDjscVIWpdzPK2I_o6kcr9sDga4xhpsMC0hJ2n-eOq8EWMS1S55SSZHNDrWT6rtptwn9N3DmqMLsWsjuBxGHzjD98QUusC0UcpUFJLYupSwEWfQN1wsUstmZSkgU35z9Tuu0O17_wfkVclPXhlVjzsrJHpqSN2XAyRF-d3EvyvD6hkImhpdUAssmSBQh0o-9H_N4WM7OrCUzmQcy56ZpXueuEf6nfYwg_4sKs5IrZ1SP3tYKjVijDxwLb090UB_-d0xdRDH3hUPgFsPDwURS_bc7YuyV6wBTPf2auRU_YCavWnJRCMWRsYf4kKs9xvZ5KevHWgm-jZjCS8Z-UaGhqW42cteHv0Zn2-Z_eHO2XcrQsc_928nEg6Sv1tJ1KQNgFvCDtY1DuseYrKpZjhdBRFaT1LA8Sh6AcK8ZzKnm-P2rLhZoxJjA6_isJzOZ6xsbxCRRXi33BxohZDmBds5N1sCJFXpBlRIeMU0eCozqWPjEPz1fkK6QQpCOmZOSUWepIWJnLWDGJBCsCnsmBEEXamEYqBN4M6oXeGTixqTlTcCgmrizcw25Tn3AiIlnAbhVWAWaqnRHotP6lOc65K_1VlrQVFa1OBL2OSMEcaDv55jpk3F3OegvYZ74RvRgJf31m5wnCsYXkzOQ16oZjVI-o8kT6C-KeYiA48MbgcDES8gDpPo2TwY28X6vvVpE1F2PYdL_QhXEkudsNSIziFyI0bKjTuegsw9kDKrr-_w6qbAW_tS9RmxJqbbY9Pq0lOnrCsYtNY2Un93RZ8iCNyun64rjUXsTg_2el19XOwf5snD3rOc0ythNO5my1Tf-vA diff --git a/images/sushi.jpg b/images/sushi.jpg new file mode 100644 index 0000000..6674921 Binary files /dev/null and b/images/sushi.jpg differ diff --git a/images/tofu.jpg b/images/tofu.jpg new file mode 100644 index 0000000..bdd2381 Binary files /dev/null and b/images/tofu.jpg differ diff --git a/images/waffles.jpg b/images/waffles.jpg new file mode 100644 index 0000000..a11c612 Binary files /dev/null and b/images/waffles.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..1d419a7 --- /dev/null +++ b/index.html @@ -0,0 +1,62 @@ + + + + + + + Feast and Wonder + + + + + +
+
+ Skip to main content +
+ + +
+ +
+ +
+
+

Feast
&Wonder

+
+
+ +
+

Welcome to Feast & Wonder, a food travel blog. + Follow my travels through videos and pictures of typical cuisine around the world. + Through my portfolio, I hope that whenever you come accross some of these meals or + ingredients in real life you are transported into the city associated with it. + Alternatively, whenever you find yourself in one of these places please keep your + senses open to feel the wonderful culinary experiences available to you! +

+
+
+
+ + + + + diff --git a/paris.html b/paris.html new file mode 100644 index 0000000..491096e --- /dev/null +++ b/paris.html @@ -0,0 +1,77 @@ + + + + + + + Feast and Wonder + + + + + +
+
+ Skip to main content +
+ + + + +
+ +
+
+

Paris

+ +
+ +
+ + +
+

At the bakery

+

This short slow-motion video pans over freshly baked croissants and pains au chocolat. + Known as viennoiserie, these pastries are a staple in every French bakery -boulangerie- and + are commonly enjoyed for breakfast with a cup of strong coffee. +

+
+
+ +
+ A selection of macarons in bright and loud colours. + Close up picture of croissants, coated in sugar, fresh out of the oven. + Charcuterie and cheese board accompanied by fresh cherry tomatoes and sliced cucumber, and a bottle of white wine. + A buffet display of bread rolls, cheese, and chutney accompanied by fresh grapes, apples, and pears. +
+
+
+
+ + + + + \ No newline at end of file diff --git a/prototypes.html b/prototypes.html new file mode 100644 index 0000000..fdb79f3 --- /dev/null +++ b/prototypes.html @@ -0,0 +1,55 @@ + + + + + + Feast and Wonder + + + + + +
+
+ Skip to main content +
+ + + + +
+ +
+
+

Visual Design Assignment 2

+

Submission

+ + + +
+
+ Hifi prototype of an e-reader app's homepage + Hifi prototype of an e-reader app's reading page + Hifi prototype of a website's homepage + Gif +
+
+
+
+ + + \ No newline at end of file diff --git a/prototypes/E-Reader-HomePage.png b/prototypes/E-Reader-HomePage.png new file mode 100644 index 0000000..77ff7af Binary files /dev/null and b/prototypes/E-Reader-HomePage.png differ diff --git a/prototypes/E-Reader-HomePage.png:Zone.Identifier b/prototypes/E-Reader-HomePage.png:Zone.Identifier new file mode 100644 index 0000000..bbbaf19 --- /dev/null +++ b/prototypes/E-Reader-HomePage.png:Zone.Identifier @@ -0,0 +1,3 @@ +[ZoneTransfer] +ZoneId=3 +HostUrl=https://www.figma.com/ diff --git a/prototypes/E-reader-ReadingPage.png b/prototypes/E-reader-ReadingPage.png new file mode 100644 index 0000000..802ceb4 Binary files /dev/null and b/prototypes/E-reader-ReadingPage.png differ diff --git a/prototypes/E-reader-ReadingPage.png:Zone.Identifier b/prototypes/E-reader-ReadingPage.png:Zone.Identifier new file mode 100644 index 0000000..bbbaf19 --- /dev/null +++ b/prototypes/E-reader-ReadingPage.png:Zone.Identifier @@ -0,0 +1,3 @@ +[ZoneTransfer] +ZoneId=3 +HostUrl=https://www.figma.com/ diff --git a/prototypes/GIF-final.gif b/prototypes/GIF-final.gif new file mode 100644 index 0000000..41fa509 Binary files /dev/null and b/prototypes/GIF-final.gif differ diff --git a/prototypes/GIF-final.gif:Zone.Identifier b/prototypes/GIF-final.gif:Zone.Identifier new file mode 100644 index 0000000..c26ecb7 --- /dev/null +++ b/prototypes/GIF-final.gif:Zone.Identifier @@ -0,0 +1,4 @@ +[ZoneTransfer] +ZoneId=3 +ReferrerUrl=https://ezgif.com/optimize/ezgif-1-226d9d0eb9.gif +HostUrl=https://ezgif.com/save/ezgif-1-5b106ff1d4.gif diff --git a/prototypes/Website-HomePage.png b/prototypes/Website-HomePage.png new file mode 100644 index 0000000..6e16ac5 Binary files /dev/null and b/prototypes/Website-HomePage.png differ diff --git a/prototypes/Website-HomePage.png:Zone.Identifier b/prototypes/Website-HomePage.png:Zone.Identifier new file mode 100644 index 0000000..bbbaf19 --- /dev/null +++ b/prototypes/Website-HomePage.png:Zone.Identifier @@ -0,0 +1,3 @@ +[ZoneTransfer] +ZoneId=3 +HostUrl=https://www.figma.com/ diff --git a/seoul.html b/seoul.html new file mode 100644 index 0000000..30fff07 --- /dev/null +++ b/seoul.html @@ -0,0 +1,78 @@ + + + + + + + Feast and Wonder + + + + + +
+
+ Skip to main content +
+ + + + +
+ +
+
+

Seoul

+ +
+ +
+ + +
+

In the street of Seoul

+

This short time-lapse video is set at night in a busy street in downtown Seoul and shows a street food stalls + serving korean pancakes to passerbyers. It illustrates an important aspect of korean food culture: + the simple but flavoursome cuisine made and sold by street vendors. +

+
+
+ +
+ A bird's eye view of a ramen bowl filled with egg noodles, boiled egg, fresh spinach, sauteed mushrooms and marinated sliced chicken. + A geometric display of suchi composed of california maki rolls and tuna and salmon sashimi. + A close up of a rich and spicy beef broth garnished with fresh coriander. + Raw tofu arranged neatly in slices on a serving plater. +
+
+
+
+ + + + + + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..32ddbcf --- /dev/null +++ b/styles.css @@ -0,0 +1,668 @@ +/*Cascading CSS and Phone version*/ + +*{ /*resetting - Applied the following properties from https://www.freecodecamp.org/news/html-page-width-height/#:~:text=If%20you%20set%20the%20width,width%20value%20on%20the%20body. To avoid a horizontal scrollbar, and body to be 100% of the viewport, default margins removed.*/ + margin: 0; /*removing all default margins*/ + padding: 0; /*removing all default paddings*/ + box-sizing: border-box; /*Including width and height of padding and border when calculating the element's width and height.*/ +} +html { /*root element of my webpage. Specifying here the default styles for my entire webpage, cascading onto the child elements.*/ + font-size: 16px; + font-family: Arial, Helvetica, sans-serif; + background-color: black; + color: white; +} +body { /*targetting body so that the width is that of the viewport and height is at least that of the viewport*/ + min-height: 100vh; + width: 100%; +} +#main{ /*targetting element that has this id*/ + margin-top: 20%; + padding-left: 10%; + padding-right: 10%; + margin-bottom: 5%; + width: 100%; + min-height: 100vh; +} + + +/*Skip to main content styles*/ +.skip-to-main a { /*targetting a tag in element classified as skip to main*/ + position: absolute; + top: -500px; /*placing the element 500px above the viewport hidding it from view but accessible via keyboard*/ + left: 0; + padding: 10px; + background-color: white; + color: black; + text-decoration: none; +} +.skip-to-main a:focus { /*targetting a tag in element classified as skip to main when focused*/ + top: 0; +} + +/*Nav bar Styles*/ +header { + position: fixed; /*Applying this property so that my header does not move when the user scrolls vertically*/ + left: 0; /*aligning header to the left of the viewport*/ + right: 0; + top: 0; + height: 11%; + z-index: 1; /*Giving a stacking order that is more than 0 so that my header appears on top of any other content*/ + background-color: black; + padding-left: 10%; + padding-right: 10%; +} +.navbar { + margin-top: 3%; + width: 100%; + height: auto; +} +.navbar ul { + list-style-type: none; + display: flex; /*applying flexbox to ul element*/ + justify-content: space-between; /*distributing the child elements li evenly within ul*/ +} +.navbar a { + text-decoration: none; + color: white; + font-weight: bold; +} + +/*Breadcrumbs Styles*/ +.breadcrumbs{ /*targetting elements classified as breadcrumbs*/ + display: flex; + position: fixed; + right: 0; + line-height: 0.05; + margin-top: 3%; + margin-right: 10%; +} +.breadcrumbs ul { /*targetting ul tag in elements classified as breadcrumbs*/ + display: flex; + justify-content: end; +} +.breadcrumbs ul li { + display: inline; + list-style: none; + text-decoration: none; +} +.breadcrumbs li a { + text-decoration: none; + color: white; +} +.breadcrumbs li+li::before { + color: white; + content: "/\00a0 "; +} + +/*Hover Styles*/ +nav a:hover { /*targetting a tag in nav tags, using a pseudo-class to change the appearance of the a tag when the user hovers over it*/ + padding-bottom: 1%; + border-bottom-style: solid; +} + +/* Focus Styles for accessibility*/ +.navbar a:focus { /*targetting a tag in my elements classified as navbar, using a pseudo-class to change the appearance of the a tag when the user focuses on it over it*/ + outline: 2px solid white; + background-color: white; + color: black; +} +.breadcrumbs a:focus { + outline: 2px solid white; + background-color: white; + color: black; +} +.socials a:focus { + outline: 2px solid white; +} + +/*Footer Styles*/ +footer { + position: relative; + bottom: 0; + left: 0; + right: 0; + z-index: 1; + padding-right: 10%; + padding-left: 10%; + width: 100%; + text-decoration: none; +} +footer h2 { + margin-top: 2%; + margin-bottom: 2%; +} +h3{ + margin-top: 2%; + margin-bottom: 2%; +} +footer hr { + width: 100%; +} +.socials { + list-style: none; + display: flex; + flex-direction: row; + justify-content: center; + width: 100%; + padding: 0; + margin-top: 3%; + margin-bottom: 3%; +} +.socials li{ + display: flex; + justify-content: center; +} +.socials a{ + display: flex; + justify-content: center; +} +.socials img { + display: flex; + width: 100%; + height: auto; +} +.attribution { + display: flex; + flex-direction: row; + flex-wrap: wrap; + font-size: 0.9rem; + align-content: center; +} +.attribution a { + color: white; + padding-right: 0.9%; + padding-left: 0.9%; +} + +/*Landing page styles*/ +.grid-main { + display: grid; /*Using grid to structure the page*/ + grid-template-rows: auto auto; /*Separating title and text*/ + row-gap: 3%; +} +.title-container { + position: relative; + left: 0; /*Assuring the title is on the left of the page*/ + line-height: 0.9; /*Reducing line height for the title*/ +} +.title-container hr { + margin-top: 3%; +} +.larger { + font-size: 3.5rem; /*Making the font size 3.5 bigger than the one set up in the html tag*/ +} +.smaller { + font-size: 2rem; + margin-left: 2%; +} +.between { + font-size: 2rem; +} +.body-container p { + line-height: 2; /*Doubling line height to increase readability*/ +} + +/*Gallery pages styles*/ +.city-name { + font-size: 2rem; + margin-bottom: 3%; +} +.flexbox-container { + display: flex; /*Creating flexible responsive layout*/ + flex-direction: column; /*Stacking video-container and image-container vertically*/ + width: 100%; + height: auto; /*Maintaining the aspect ratio*/ + gap: 10px; /*Adding space between video-conatiner and image-container*/ +} +.flexbox-container-2{ + display: flex; /*Creating flexible responsive layout*/ + flex-direction: column; /*Stacking video-container and image-container vertically*/ + width: 100%; + height: auto; /*Maintaining the aspect ratio*/ + gap: 10px; /*Adding space between video-conatiner and image-container*/ +} +.video-container { + display: flex; /*Applying flex to the child element*/ + flex-direction: column; + gap: 10px; + width: 100%; + height: auto; +} +.video-transcript { + width: 100%; + height: auto; +} +.video-container video{ + width: 100%; + height: auto; +} +.video-transcript h2 { + font-size: 1.5rem; + margin-bottom: 3%; +} +.video-transcript p { + line-height: 2; +} +.image-container { + display: flex; /*Applying flexbox to the child element*/ + flex-direction: column; + gap: 10px; + width: 100%; + height: auto; +} +.image-container-2{ + display: flex; /*Applying flexbox to the child element*/ + flex-direction: column; + gap: 10px; + width: 100%; + height: auto; +} +.image-container img { + width: 100%; + height: auto; +} +.image-container-2 img{ + width: 100%; + height: auto; +} +.sketches{ + display: flex; /*Applying flexbox to the child element*/ + flex-direction: column; + justify-content: center; + align-items: center; + gap: 10px; + width: 100%; + height: auto; +} +.sketches img{ + justify-content: center; + align-items: center; + width: 100%; + height: auto; +} +.resources{ + display: grid; /*Using grid to structure the page*/ + grid-template-rows: auto auto auto auto; /*Separating title and text*/ + row-gap: 3%; + padding: 5% 5% 5% 5%; +} +.resources a { + color: white; +} +.resources p { + font-size: 1.5rem; +} +.grid-second p { + font-size: 1.5rem; + padding: 5% 5% 5% 5%; +} + + +/*Contact form style*/ +form { + display: flex; /*Creating flexbox layout for the contact form*/ + flex-direction: row; + flex-wrap: wrap; + padding-left: 10%; + padding-right: 10%; +} +.form-section { + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 100%; +} +.form-section input{ + width: 100%; + padding: 2%; + margin: 2% 0; + border-radius: 10px; +} +.form-section textarea{ + width: 100%; + padding: 2%; + margin: 2% 0; + border-radius: 10px; + font-family: inherit; +} +.button { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + width: 100%; +} +button { + padding: 10px; + margin: 10px 0; + border-radius: 10px; +} + +.flexbox-container-3{ + display: flex; /*Creating flexible responsive layout*/ + flex-direction: column; /*Stacking video-container and image-container vertically*/ + width: 100%; + height: auto; /*Maintaining the aspect ratio*/ + gap: 10px; /*Adding space between video-conatiner and image-container*/ +} +iframe{ + width: 100%; + height: 90vh; + margin-bottom: 10px; +} +.image-container-3{ + display: flex; /*Applying flexbox to the child element*/ + flex-direction: column; + gap: 10px; + width: 100%; + height: auto; + align-items: center; +} +#reader{ + width: 40%; + height: auto; +} +#page{ + width: 40%; + height: auto; +} +#website{ + width: 70%; + height: auto; +} +#gif{ + background-color: white; + width: 50%; + height: 10vh; +} + +@media screen and (min-width:601px) and (max-width:900px){ /*Adding Media Query*/ + +/*footer styles*/ +footer h3 { + text-align: center; +} +.socials img { + width: 90%; + height: auto; +} +.attribution { + font-size: 0.8rem; +} + +/*Landing page*/ +.grid-main{ + position: relative; + top: 0; + display: grid; + grid-template-columns: 1fr 3fr; + grid-template-rows: 0.5fr 1fr; +} +.title-container { + grid-row: 1; + grid-column: 1; + position: relative; + left: 0px; + line-height: 0.9; +} +.body-container { + grid-row: 2; + grid-column: 2; + width: 100%; + margin-top: 3%; +} +.body-container p { + line-height: 1.7; +} + +/*gallery pages styles*/ +.grid-second{ + display: grid; + grid-template-rows: auto auto; + row-gap: 2%; + text-align: center; +} +.city-name{ + text-align: center; +} +.flexbox-container { + grid-row: 2; + display: flex; + flex-direction: column; +} +.flexbox-container-2{ + grid-row: 2; + display: flex; + flex-direction: column; +} +.video-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 100%; +} +.image-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 100%; +} +.image-container-2{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 100%; +} +.video-container video { + width: 95%; +} +.video-transcript { + width: 95%; +} +.image-container img{ + width: 47%; /*modified number until wanted effect was reached*/ + height: auto; +} +} + +@media screen and (min-width:901px) { /*Adding Media Query*/ + +/*Nav bar Styles*/ +header { + height: 17%; +} +.navbar a { + font-size: 1.5rem; +} +.breadcrumbs li { + font-size: 1.5rem; +} + +/*Footer Styles*/ +footer { + width: auto; + background-color: black; + margin-top: 2%; +} +.socials { + gap: 50px; +} +.socials img { + width: 50%; + height: auto; +} +.attribution { + font-size: 0.9rem; +} + +/*Landing page styles*/ +.grid-main { + position: relative; + top: 0; + display: grid; + grid-template-columns: 1fr 3fr; + grid-template-rows: 0.5fr 1fr; +} +.title-container { + grid-row: 1; + grid-column: 1; + position: relative; + left: 0px; + line-height: 0.9; +} +.body-container { + grid-row: 2; + grid-column: 2; + margin-top: 3%; +} +.body-container p { + font-size: 1.5rem; + line-height: 1.7; +} + +/*gallery pages styles*/ +.grid-second{ + display: grid; + grid-template-rows: 0.5fr; + text-align: center; +} +.city-name{ + text-align: center; + margin-bottom: 3%; +} +.flexbox-container{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 100%; + height: 100%; +} +.flexbox-container-2{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 100%; + height: 100%; +} +.video-container{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 45%; +} +.image-container{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 50%; +} +.image-container-2 { + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 100%; +} +.video-container video{ + width: 100%; + height: auto; +} +.video-transcript { + line-height: 1.7; + width: 100%; + height: auto; +} +.image-container img{ + width: 45%; + height: auto; +} +.image-container-2 img{ + width: 49%; + height: auto; +} +.sketches{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 100%; +} +.sketches img{ + width: 49%; + height: auto; +} + +/*Contact form styles*/ +.grid-contact { + display: grid; + grid-template-rows: auto auto; +} +form { + display: grid; + grid-template-rows: auto auto; + grid-template-columns: auto auto; + row-gap: 3%; + column-gap: 3%; +} +.form-section label { + font-size: 1.2rem; +} +.form-section input{ + padding: 5%; + margin: 5% 0; + border-radius: 15px; +} +.form-section textarea{ + padding: 5%; + margin: 5% 0; + border-radius: 15px; +} +button { + padding: 3%; + margin: 3% 0; + border-radius: 15px; +} +.button{ + justify-content: left; +} + + + +/*Prototypes*/ +.flexbox-container-3{ + display: flex; /*Creating flexible responsive layout*/ + flex-direction: column; /*Stacking video-container and image-container vertically*/ + width: 100%; + height: auto; /*Maintaining the aspect ratio*/ + gap: 10px; /*Adding space between video-conatiner and image-container*/ +} +iframe{ + width: 100%; + height: 90vh; + margin-bottom: 10px; +} +.image-container-3{ + display: flex; /*Applying flexbox to the child element*/ + flex-direction: column; + gap: 10px; + width: 100%; + height: auto; + align-items: center; +} +#reader{ + width: 20%; + height: auto; +} +#page{ + width: 15%; + height: auto; +} +#website{ + width: 50%; + height: auto; +} +#gif{ + background-color: white; + width: 20%; + height: 10vh; +} + +} diff --git a/visuals.html b/visuals.html new file mode 100644 index 0000000..4fee24c --- /dev/null +++ b/visuals.html @@ -0,0 +1,74 @@ + + + + + + Feast and Wonder + + + + + +
+
+ Skip to main content +
+ + + + +
+ +
+
+

Visual Design Assignment 1

+

Submission

+ +
+
+ Book Cover Mockup, L'elegance du Herisson + Book Cover layout, L'elegance du Herisson + Book Cover Mockup, Lonely Castle in the Mirror + Book Cover layout, Lonely Castle in the Mirror + Book Cover Mockup, Convenience Store Woman + Book Cover layout, Convenience Store Woman +
+
+ +
+ +
+

External resources

+ Book Cover Mockup + Parisian Facade before image + Lonely Castle in the Mirror background image +
+ +

Original sketches

+
+ Building sketch + Shelves Logo + Castle digital drawing + Convenience store products and items digital drawing +
+
+ +
+
+ + + \ No newline at end of file