diff --git a/design/logo.svg b/design/logo.svg new file mode 100644 index 000000000..83fb82ab3 --- /dev/null +++ b/design/logo.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index 60b1afe13..1ebf6bd06 100644 --- a/index.html +++ b/index.html @@ -6,11 +6,41 @@ Responsive Cake webpage - + - +
+ + +

The best cakes in town delivered to your door

+ +
+
+
+

Welcome

+

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Porro, explicabo dolorum, nemo illum nihil consequuntur in magnam architecto mollitia minus aperiam accusamus molestiae. Temporibus, molestiae.

+ +
+
+
+ +
+
+ + +
+
+ + +
+
+
+ \ No newline at end of file diff --git a/readme.md b/readme.md index 720649019..952b040d5 100644 --- a/readme.md +++ b/readme.md @@ -8,7 +8,8 @@ Two wireframes are provided down below (scroll to the bottom). ## Task - **Fork and clone** this repo. - - To fork, hit the 'fork' button in the top right corner of this page on Github. + - To fork, hit the 'fork' button in the top right corner of this page + on Github. Now you should be on your own Github repository - you'll know this because your name should now be in the repo name at the top of the Github page. - To clone, click the green button that says 'Code' on that page. Now the code is on your own machine (this happened when you cloned), AND it's linked to your own Cakes repository on Github (which was created when you forked). diff --git a/style.css b/style.css index 6de1b3567..72659d7a9 100644 --- a/style.css +++ b/style.css @@ -1 +1,103 @@ -/* Add your styling here */ +/* Screen for Mobile */ +*{ + box-sizing: border-box; + margin: 0; + padding: 0; +} +Header { + display: flex; + position: relative; + height: 200px; + width: 100%; + background-color: brown; +} + +.logo { + width: 150px; + height: 100px; + position: absolute; + top: 20%; + left: 2%; +} +.logo > img { + width: 100px; + height: 90px; +} +#nav-mobile{ +position: absolute; +top: 1%; +right: 1%; +color: white; +} +/* header > nav { + position: relative; +} */ +/* nav > ul { +} +nav > ul > li { +} */ + +header > h4 { + position: absolute; + bottom: 2%; + right: 2%; + color: white; +} +.main{ + display: flex; + flex-direction: column; + padding: 10px; +} + +.introduction{ + height: 200px; + } + + .cakes{ + padding: 10px; + background-color: pink; +} +.first{ + display: flex; + justify-content: center; + padding-top: 20px; +} +.first >img{ + border-radius: 10px; + width:90%; + height: 400px; + +} +.second{ + margin-top: 10px; + display: flex; + flex-direction: row; + justify-content: center; + gap: 10px; +} +.second>img{ + width: 45%; + height: 300px; + border-radius: 10px; +} +.third{ + margin-top: 10px; + display: flex; + flex-direction: row; + justify-content: center; + gap: 10px; +} +.third>img{ + width: 45%; + height: 300px; + border-radius: 10px; +} +footer{ + display: flex; + justify-content: center; + height: 50px; + width: 100%; + background-color: brown; + padding: 10px; + color: white; +} \ No newline at end of file