From 582c9a39bfa20588379a8dd9d4b239e13d82f926 Mon Sep 17 00:00:00 2001 From: Ade0211 <62720742+Ade0211@users.noreply.github.com> Date: Wed, 3 Jun 2020 02:57:52 +0100 Subject: [PATCH 1/7] The webpage created The header, nav-bar and nav-links created and neccessary pictures added. Athough some adjustments will still be done --- week3/2-website/index.html | 191 ++++++++++++++++++++---------------- week3/2-website/style.css | 196 ------------------------------------- 2 files changed, 104 insertions(+), 283 deletions(-) diff --git a/week3/2-website/index.html b/week3/2-website/index.html index 22e4f2c2..402932be 100644 --- a/week3/2-website/index.html +++ b/week3/2-website/index.html @@ -1,94 +1,111 @@ - - - - - Responsive Cake webpage - - - - - -
-
- + My Cake + + + + + + + + +
+ Let Them Eat Cake logo + + + + + + +
+ + + +
+
+

+ CAKE WORLD +

+

+ Order cake for dessert + Or to celebrate a birthday + An accomplishment + Or anniversary + No one bats an eye + But order cake for breakfast? + Might just incite a riot +
+ There is a time and place for cake + Society has deemed it so + We are not the rulers of our own lives + (Though we could be) + Instead our culture dictates + The rules of life + Steak for breakfast or for dinner + But not lunch + Bread goes with every meal + Eggs and bacon are for the morning + But at night is a nice treat - on occasion + Beer after five + But it’s five o’clock somewhere +

+
+
+ +
+
- +
+ +
+
+
+ +

Blackberry Cake

+
+
+
+ +

Wedding Cake

+
+
+
+
+ +

Macron Cake

+
+
+ +
+
+ +

Special cake

+
+
- -
- -
-
-

Let Them Eat Cake

- -

Feeding the cake deprived since 2020

- - Cupcakes with sprinkles -
- -
-

Just a small sample of our bakes:

- -
-
- - - - + + \ No newline at end of file diff --git a/week3/2-website/style.css b/week3/2-website/style.css index 42ed132b..e69de29b 100644 --- a/week3/2-website/style.css +++ b/week3/2-website/style.css @@ -1,196 +0,0 @@ -/* Universal styles */ - -* { - font-family: "Pacifico", cursive; - background-color: rgb(188, 243, 226); -} - -li { - list-style: none; -} - -a { - text-decoration: none; - color: rgb(200, 144, 233); -} - -/* Header styles */ - -.top-header { - display: flex; - flex-direction: column; - align-items: center; -} - -.top-header .header-image { - height: 200px; - width: 200px; - padding: 20px; -} - -.contact-button { - color: rgb(200, 144, 233); - font-size: 25px; - border-color: rgb(252, 251, 253); - border-radius: 20px; - border-width: medium; - width: 125px; - height: 50px; -} - -.navigation ul { - display: flex; - flex-direction: column; - padding-left: 5px; -} - -.navigation li { - padding-top: 25px; - padding-right: 50px; - font-size: 25px; -} - -/* About section styles */ - -.about { - padding-top: 50px; -} - -.about h1 { - font-size: 40px; - color: rgb(255, 128, 153); - text-align: center; -} - -.about h3 { - font-size: 25px; - color: rgb(255, 128, 153); - text-align: center; - padding-bottom: 50px; -} - -.about .cupcakes { - display: flex; - justify-content: center; - width: 100%; - border: 2px solid rgb(252, 251, 253); - margin: 0; -} - -/* Example cake styles */ - -.example-cakes h3 { - font-size: 25px; - color: rgb(255, 128, 153); - text-align: center; - padding-top: 50px; - padding-bottom: 20px; -} - -.example-cakes ul { - padding-left: 0; -} - -.example-cakes li { - display: flex; - justify-content: center; - flex-wrap: wrap; - padding-bottom: 20px; -} - -.images { - border: 2px solid rgb(252, 251, 253); -} - -/* Footer styles */ - -.footer { - display: flex; - padding: 50px; - justify-content: center; -} - -.footer li { - padding-right: 50px; - font-size: 25px; -} - -/* Media queries */ - -@media only screen and (min-width: 650px) { - .navigation ul { - display: flex; - flex-direction: row; - justify-content: center; - padding-left: 20px; - } - - .example-cakes ul { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-evenly; - } - - .example-cakes li { - width: 45%; - height: 45%; - } - - .footer ul { - display: flex; - flex-direction: row; - } -} - -@media only screen and (min-width: 1000px) { - .top-header .header-image { - display: flex; - flex-direction: column; - align-self: start; - height: 250px; - width: 250px; - } - - .contact-button { - display: flex; - flex-direction: column; - align-self: flex-end; - width: 175px; - height: 75px; - font-size: 30px; - padding-left: 30px; - padding-top: 8px; - margin-right: 5px; - } - - .navigation li { - font-size: 30px; - } - - .about h1 { - font-size: 60px; - } - - .about h3 { - font-size: 30px; - } - - .example-cakes h3 { - font-size: 30px; - } - - .example-cakes ul { - display: flex; - justify-content: space-evenly; - } - - .example-cakes li { - width: 20%; - height: 20%; - } - - .footer li { - font-size: 30px; - } -} From 1241234489d100ee26152541bda9db906ef5435f Mon Sep 17 00:00:00 2001 From: Ade0211 <62720742+Ade0211@users.noreply.github.com> Date: Thu, 4 Jun 2020 00:30:13 +0100 Subject: [PATCH 2/7] Webpage adjusted I adjusted the whole webpage especially the columns that splits my section where i changed it to the card type in bootstrap and i finished up with my footer --- week3/2-website/index.html | 153 ++++++++++++++++++++++++------------- 1 file changed, 102 insertions(+), 51 deletions(-) diff --git a/week3/2-website/index.html b/week3/2-website/index.html index 402932be..fcb51727 100644 --- a/week3/2-website/index.html +++ b/week3/2-website/index.html @@ -4,20 +4,20 @@ My Cake - + - -
+ +
my image - + @@ -25,10 +25,10 @@
-
-
-