diff --git a/README.md b/README.md
index a5b2b18..5650670 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,25 @@
[](https://classroom.github.com/a/59P2FRZS)
+
+
+This repository contains all the files necessary for the portfolio website Feast and Wonder. 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
index db31f43..863742f 100644
--- a/brussels.html
+++ b/brussels.html
@@ -4,13 +4,17 @@
- Food Travel Blog
+ Feast and Wonder
+
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.
+
+
-
-
-
-
-
+
+
+
+
+
-
+
diff --git a/contact.html b/contact.html
index 2ff5b33..ea82395 100644
--- a/contact.html
+++ b/contact.html
@@ -4,13 +4,17 @@
- Food Travel Blog
+ Feast and Wonder
+
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.
+
+
-
-
-
-
+
+
+
+
-
+
diff --git a/seoul.html b/seoul.html
index c232f46..cdbbfe1 100644
--- a/seoul.html
+++ b/seoul.html
@@ -4,13 +4,17 @@
- Food Travel Blog
+ Feast and Wonder
+
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.
+
+
-
-
-
-
+
+
+
+
-
+
diff --git a/styles.css b/styles.css
index b0fa5a8..98e97a1 100644
--- a/styles.css
+++ b/styles.css
@@ -1,56 +1,64 @@
/*Cascading CSS and Phone version*/
-*{ /*https://www.freecodecamp.org/news/html-page-width-height/#:~:text=If%20you%20set%20the%20width,width%20value%20on%20the%20body.*/
- margin: 0;
- padding: 0;
- box-sizing: border-box;
-}
-html {
- font-size: 16px;
- font-family: Arial, sans-serif;
- background-color: black;
+*{ /*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 {
+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%;
+ width: 100%;
}
-main{
- margin-top: 20%; /*margin top equivalent to heigh of the navbar so they dont overlap*/
- padding-left: 10%; /*use of vw so it is responsive according to the viewport*/
+#main{ /*targetting element that has this id*/
+ margin-top: 20%;
+ padding-left: 10%;
padding-right: 10%;
- margin-bottom: 5%;
+ 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;
- left: 0;
- right: 0;
+ 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;
- background-color: black;
- padding-left: 10%;
+ 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 {
- position: relative;
- left: 0;
- right: 0;
- margin-top: 3%;
+ margin-top: 3%;
+ width: 100%;
+ height: auto;
}
.navbar ul {
- list-style-type: none;
- display: flex;
- justify-content: space-between;
- align-items: center;
- background-color: black;
- padding: 0;
-}
-.navbar ul li {
- display: inline;
+ 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;
@@ -59,35 +67,40 @@ header {
}
/*Breadcrumbs Styles*/
-.breadcrumbs{
+.breadcrumbs{ /*targetting elements classified as breadcrumbs*/
display: flex;
position: fixed;
right: 0;
line-height: 0.05;
- background-color: black;
margin-top: 3%;
margin-right: 10%;
}
-.breadcrumbs ul {
+.breadcrumbs ul { /*targetting ul tag in elements classified as breadcrumbs*/
display: flex;
justify-content: end;
}
-.breadcrumbs ul li{
+.breadcrumbs ul li {
display: inline;
list-style: none;
text-decoration: none;
}
-.breadcrumbs li a{
+.breadcrumbs li a {
text-decoration: none;
color: white;
}
-.breadcrumbs li+li::before {
+.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 {
+.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;
@@ -97,14 +110,12 @@ header {
background-color: white;
color: black;
}
-footer a:focus {
+.socials a:focus {
outline: 2px solid white;
- background-color: black;
- color: black;
}
/*Footer Styles*/
-footer {
+footer {
position: relative;
bottom: 0;
left: 0;
@@ -113,153 +124,184 @@ footer {
padding-right: 10%;
padding-left: 10%;
width: 100%;
- color: white;
text-decoration: none;
}
-footer hr {
+footer h2 {
+ margin-top: 2%;
+ margin-bottom: 2%;
+}
+h3{
+ margin-top: 2%;
+ margin-bottom: 2%;
+}
+footer hr {
width: 100%;
}
-.socials{
+.socials {
+ list-style: none;
display: flex;
flex-direction: row;
- justify-content: space-around;
- align-items: center;
- list-style-type: none;
+ justify-content: center;
width: 100%;
padding: 0;
margin-top: 3%;
margin-bottom: 3%;
}
-.socials img{
+.socials li{
display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- width: 20%;
+ 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{ /*using grid for the structure of the page*/
- position: relative;
- top: 0;
- display: grid;
- grid-template-rows: 0.8fr 2fr; /*separating title h1 and body text*/
+.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: 0px;
- line-height: 0.9;
+ left: 0; /*Assuring the title is on the left of the page*/
+ line-height: 0.9; /*Reducing line height for the title*/
}
-.larger{
- font-size: 2em; /*Explain the use of em*/
+.title-container hr {
+ margin-top: 3%;
}
-.smaller{
- font-size: 1em;
+.larger {
+ font-size: 3.5rem; /*Making the font size 3.5 bigger than the one set up in the html tag*/
}
-.between{
- font-size: 1.5em;
+.smaller {
+ font-size: 2rem;
+ margin-left: 2%;
}
-hr {
- width: 100%;
-}
-.body-container {
- position: relative;
- top: 0;
- margin-top: 3%;
+.between {
+ font-size: 2rem;
}
.body-container p {
- text-align: justify;
- line-height: 2;
- font-size: 100%;
+ line-height: 2; /*Doubling line height to increase readability*/
}
-/*gallery pages styles*/
-.city-name{
+/*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*/
+}
+.video-container {
+ display: flex; /*Applying flex to the child element*/
+ flex-direction: column;
+ gap: 10px;
width: 100%;
+ height: auto;
}
-.flexbox-container{
- display: flex;
- flex-direction: column;
- justify-content: center;
- gap: 10px;
+.video-transcript {
width: 100%;
+ height: auto;
}
-.video-container{
- display: flex;
- flex-direction: column;
- justify-content: center;
- gap: 10px;
+.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;
+ display: flex; /*Applying flexbox to the child element*/
flex-direction: column;
- justify-content: center;
- gap: 10px;
+ gap: 10px;
width: 100%;
+ height: auto;
}
-.image-container img{
+.image-container img {
width: 100%;
height: auto;
}
-/*Contact form style https://blog.logrocket.com/how-to-style-forms-with-css-a-beginners-guide/*/
+/*Contact form style*/
form {
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- padding-left: 10vw;
- padding-right: 10vw;
-}
-.form-section{
- display: flex;
- flex-direction: row;
+ display: flex; /*Creating flexbox layout for the contact form*/
+ flex-direction: row;
flex-wrap: wrap;
- width: 100%;
+ padding-left: 10%;
+ padding-right: 10%;
}
-.form-section label {
- display: flex;
+.form-section {
+ display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.form-section input{
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
width: 100%;
- padding:10px;
- margin:10px 0;
- border-radius:10px;
-
+ padding: 2%;
+ margin: 2% 0;
+ border-radius: 10px;
}
.form-section textarea{
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
width: 100%;
- padding:10px;
- margin:10px 0;
- border-radius:10px;
+ padding: 2%;
+ margin: 2% 0;
+ border-radius: 10px;
+ font-family: inherit;
}
.button {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
- align-items: center;
width: 100%;
}
-button{
- padding:10px;
- margin:10px 0;
- border-radius:10px;
+button {
+ padding: 10px;
+ margin: 10px 0;
+ border-radius: 10px;
}
-@media screen and (min-width:601px) and (max-width:900px){ /* Adding Media Query for Ipad accessibility reasons?*/
+@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 styles iPad*/
+/*Landing page*/
.grid-main{
position: relative;
top: 0;
@@ -281,85 +323,81 @@ button{
margin-top: 3%;
}
.body-container p {
- text-align: justify;
line-height: 1.7;
}
-/*gallery pages styles iPad*/
+/*gallery pages styles*/
.grid-second{
display: grid;
- grid-template-rows: 0.5fr 3fr;
+ grid-template-rows: auto auto;
+ row-gap: 2%;
text-align: center;
- justify-content: center;
- align-items: center;
}
.city-name{
- grid-row: 1;
text-align: center;
}
.flexbox-container {
+ grid-row: 2;
display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- flex-wrap: wrap;
- width: 100%;
+ flex-direction: column;
}
.video-container {
display: flex;
flex-direction: row;
- justify-content: center;
- align-items: center;
flex-wrap: wrap;
width: 100%;
}
.image-container {
display: flex;
flex-direction: row;
- justify-content: center;
- align-items: center;
flex-wrap: wrap;
width: 100%;
}
.video-container video {
- width: 82%;
- height: 100%;
+ width: 95%;
+}
+.video-transcript {
+ width: 95%;
}
.image-container img{
- width: 40%;
- height: 10em;
+ 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 on iPad*/
+/*Footer Styles*/
footer {
position: fixed;
width: auto;
background-color: black;
margin-top: 2%;
}
-footer hr {
- width: 100%;
+.socials {
+ gap: 50px;
}
-.socials{
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- list-style-type: none;
- width: 100%;
- padding: 0;
- margin-bottom: 3%;
-}
-.socials img{
- width: 20%;
+.socials img {
+ width: 50%;
height: auto;
}
+.attribution {
+ font-size: 0.9rem;
}
-@media screen and (min-width:901px) { /* Adding Media Query for laptop accessibility reasons?*/
-
-/*Landing page styles laptop*/
-.grid-main{
+/*Landing page styles*/
+.grid-main {
position: relative;
top: 0;
display: grid;
@@ -379,35 +417,10 @@ footer hr {
margin-top: 3%;
}
.body-container p {
- text-align: justify;
+ font-size: 1.5rem;
line-height: 1.7;
}
-/*Footer Styles laptop*/
-footer {
- position: fixed;
- width: auto;
- background-color: black;
- margin-top: 2%;
-}
-footer hr {
- width: 100%;
-}
-.socials{
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- list-style-type: none;
- width: 100%;
- padding: 0;
- margin-bottom: 3%;
-}
-.socials img{
- width: 20%;
- height: auto;
-}
-
/*gallery pages styles*/
.grid-second{
display: grid;
@@ -415,7 +428,6 @@ footer hr {
text-align: center;
}
.city-name{
- grid-row: 1;
text-align: center;
margin-bottom: 3%;
}
@@ -429,21 +441,61 @@ footer hr {
.video-container{
display: flex;
flex-direction: row;
+ flex-wrap: wrap;
width: 45%;
}
.image-container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
- width: 45%;
+ width: 50%;
}
.video-container video{
width: 100%;
height: auto;
}
+.video-transcript {
+ line-height: 1.7;
+ width: 100%;
+ height: auto;
+}
.image-container img{
- width: 40%;
+ width: 45%;
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;
+}
+
}
- 
- 
- 
+ 
- 
- 
- 
+ 
- 
- 
- 
+