diff --git a/icon/dT76Ga98c.png b/icon/dT76Ga98c.png
new file mode 100644
index 000000000..be0339c1e
Binary files /dev/null and b/icon/dT76Ga98c.png differ
diff --git a/icon/pngwing.com (1).png b/icon/pngwing.com (1).png
new file mode 100644
index 000000000..2003dadc7
Binary files /dev/null and b/icon/pngwing.com (1).png differ
diff --git a/icon/yio6XBkeT.png b/icon/yio6XBkeT.png
new file mode 100644
index 000000000..dbf18b51a
Binary files /dev/null and b/icon/yio6XBkeT.png differ
diff --git a/image/alex-lvrs-aX_ljOOyWJY-unsplash.jpg b/image/alex-lvrs-aX_ljOOyWJY-unsplash.jpg
new file mode 100644
index 000000000..91d83c174
Binary files /dev/null and b/image/alex-lvrs-aX_ljOOyWJY-unsplash.jpg differ
diff --git a/image/american-heritage-chocolate-vdx5hPQhXFk-unsplash.jpg b/image/american-heritage-chocolate-vdx5hPQhXFk-unsplash.jpg
new file mode 100644
index 000000000..ab357d38c
Binary files /dev/null and b/image/american-heritage-chocolate-vdx5hPQhXFk-unsplash.jpg differ
diff --git a/image/deva-williamson-S2jw81lfrG0-unsplash.jpg b/image/deva-williamson-S2jw81lfrG0-unsplash.jpg
new file mode 100644
index 000000000..df7dce9f6
Binary files /dev/null and b/image/deva-williamson-S2jw81lfrG0-unsplash.jpg differ
diff --git a/image/heather-barnes-_TN1m5R1pFI-unsplash.jpg b/image/heather-barnes-_TN1m5R1pFI-unsplash.jpg
new file mode 100644
index 000000000..aab54ecce
Binary files /dev/null and b/image/heather-barnes-_TN1m5R1pFI-unsplash.jpg differ
diff --git a/image/henry-be-_y5CCcYWTjU-unsplash.jpg b/image/henry-be-_y5CCcYWTjU-unsplash.jpg
new file mode 100644
index 000000000..197f057cc
Binary files /dev/null and b/image/henry-be-_y5CCcYWTjU-unsplash.jpg differ
diff --git a/image/jacob-thomas-6jHpcBPw7i8-unsplash.jpg b/image/jacob-thomas-6jHpcBPw7i8-unsplash.jpg
new file mode 100644
index 000000000..99cd06072
Binary files /dev/null and b/image/jacob-thomas-6jHpcBPw7i8-unsplash.jpg differ
diff --git a/index.css b/index.css
new file mode 100644
index 000000000..ae93da595
--- /dev/null
+++ b/index.css
@@ -0,0 +1,259 @@
+
+html, body {
+box-sizing: border-box;
+background-color: #eadff3;
+margin: 0px;
+}
+
+
+/*header*/
+
+.header{
+ background-color: #614178;
+}
+
+
+header > p{
+ color: aqua;
+ cursor: pointer;
+ font-size: 1.3rem;
+ margin-left: 16%;
+ width: 100%;
+}
+header > img{
+
+ width: 20%;
+ height: 100%;
+}
+
+/*navigation*/
+
+.nav{
+background-color: rgb(242, 249, 249);
+margin-left: 0.5rem;
+margin-right: 0.5rem;
+margin-top: 0.5rem;
+border: solid;
+border-radius: 1rem;
+border-color: #eadff3;
+margin-bottom: 1rem;
+
+}
+.ul-nav{
+ list-style-type: none;
+
+}
+.ul-nav a {
+ text-decoration: none;
+}
+.nav > ul{
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+ margin-right: 20%;
+}
+.n-link{
+ border: solid;
+ border-color: rgb(242, 249, 249);
+ padding: 0.5rem;
+ background-color: #eadff3;
+ border-radius: 1rem;
+
+}
+a:hover{
+ background-color: aqua;
+}
+
+/*main*/
+
+.cake-1{
+ width: 70%;
+ border-radius: 3rem;
+ margin-left: 2rem;
+}
+.section-1{
+ font-size: 2rem;
+ color: black;
+
+}
+.section-2{
+ margin-top: 18%;
+ font-size: 1.5rem;
+ margin-right: 5%;
+ color: black;
+}
+
+.main-2{
+ margin-top: 1rem;
+}
+.cake-a{
+ width: 90%;
+ height: 90%;
+}
+.cake-b{
+ width: 90%;
+ height: 90%;
+}
+.cake-c{
+ width: 90%;
+ height: 90%;
+}
+.cake-d{
+ width: 90%;
+ height: 90%;
+}
+
+/*footer*/
+
+.footer {
+ background-color: #614178;
+}
+.section-a{
+ margin-top: 5%;
+}
+.icon-a{
+ width: 80%;
+}
+.section-b{
+ margin-top: 12%;
+ margin-left: 15%;
+}
+.icon-b{
+ width: 38%;
+}
+
+.section-c{
+ margin-top: 10%;
+}
+.icon-c{
+ width: 30%;
+}
+.section-d{
+ margin-top: 10%;
+ color: aqua;
+ cursor: pointer;
+ font-size: 1.3rem;
+ width: 100%;
+}
+
+/*grid*/
+
+/*header*/
+
+.header {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-template-rows: auto;
+}
+
+header >p{
+ justify-content: end;
+ align-self: self-end;
+ }
+
+/*main*/
+
+.main-1{
+ display: grid;
+ grid-template-columns: repeat(6,1fr);
+ grid-template-rows: 1fr 1fr ;
+
+}
+.article-1{
+grid-column: 1/4;
+grid-row: 1/3;
+}
+.section-1{
+ grid-column: 4;
+ grid-row: 1;
+}
+.section-2{
+ grid-column: 4/6;
+ grid-row: 1/3;
+}
+.main-2{
+ display: grid;
+ grid-template-columns: repeat(6,1fr);
+ grid-template-rows: 1fr;
+}
+.article-a{
+ grid-column: 2;
+}
+.article-b{
+ grid-column: 3;
+}
+.article-c{
+ grid-column: 4;
+}
+.article-d{
+ grid-column: 5;
+}
+
+/*footer*/
+
+.footer {
+ display: grid;
+ grid-template-columns: repeat(5,1fr);
+ grid-template-rows: 1fr 1fr;
+}
+.section-a{
+grid-column: 2;
+}
+.section-b{
+ grid-column: 3;
+}
+.section-c{
+ grid-column: 4;
+}
+.section-d{
+ grid-column: 3;
+ grid-row: 2;
+}
+
+/*media query*/
+
+@media only screen and (max-width:450px){
+
+.header{
+width: 100%;
+height: 40%;
+}
+.header >p{
+ margin-left: 0.1rem;
+}
+.cake-1{
+ margin-top: 15%;
+}
+.section-1{
+ font-size: 1rem;
+ margin-top: 25%;
+
+
+}
+.section-2{
+ margin-top: 30%;
+ font-size: 0.5rem;
+}
+nav{
+ display: none;
+}
+.icon-a{
+ width:5rem;
+}
+.icon-b{
+ width:2.3rem;
+ margin-left: 2rem;
+}
+.icon-c{
+ width:2rem;
+ margin-top: 0.6rem;
+ margin-left: 1rem;
+}
+
+}
+
+@media only screen and (max-width:900px) {
+.contaner{
+ width: 100%;
+}
+}
diff --git a/index.html b/index.html
index 60b1afe13..cf0ec5fc2 100644
--- a/index.html
+++ b/index.html
@@ -7,10 +7,76 @@
Responsive Cake webpage
+
+
+
+
+
+
+
+
+
+
+
+ We have a wide variety of cakes organised into collections.
+ Many of our cakes can be purchased online
+ and either delivered in the Edinburgh and
+ Glasgow regions of Scotland or collected from our cake shops.
+ Make your selection here!
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+