diff --git a/week3/2-website/index.html b/week3/2-website/index.html index 22e4f2c2..5bcbc5fd 100644 --- a/week3/2-website/index.html +++ b/week3/2-website/index.html @@ -1,94 +1,62 @@ - - - - - - Responsive Cake webpage - + + + - - - -
-
- Let Them Eat Cake logo - - -
- - + + Charlie and the Cake Factory. + + + - -
-
+

Let Them Eat Cake

-

Feeding the cake deprived since 2020

- - Cupcakes with sprinkles -
- -
-

Just a small sample of our bakes:

+ +
+ delicious cup cake +
+

Just a small sample of our bakes:

+
+
+ +
+
+ +
+
+ +
+
+ +
+ + + +
+
    -
  • - Sponge cake with blackberries and flowers -
    • -
  • - Wedding cake -
    • -
  • - Cake decorated with macarons -
    • -
  • - Frangipane with raspberries -
    • -
-
-
- - - - + + \ No newline at end of file diff --git a/week3/2-website/style.css b/week3/2-website/style.css index 42ed132b..599fc52d 100644 --- a/week3/2-website/style.css +++ b/week3/2-website/style.css @@ -1,196 +1,160 @@ -/* 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); +html, body, div, header, nav, main, footer, ul, li { + padding: 0; + margin: 0; + width: 100%; } -/* Header styles */ - -.top-header { - display: flex; - flex-direction: column; - align-items: center; -} -.top-header .header-image { - height: 200px; - width: 200px; - padding: 20px; +body { + font-family: "Pacifico", cursive; + background-color: #bcf3e2; } -.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; +.container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } -.navigation ul { - display: flex; - flex-direction: column; - padding-left: 5px; +#logo, #contact-btn { + margin: 10px; } -.navigation li { - padding-top: 25px; - padding-right: 50px; - font-size: 25px; +#contact-btn { + font-family: "Pacifico", cursive; + font-size: 1.5rem; + color: #8a71bc; + border-radius: 1rem; + background-color: #bcf3e2; + padding-left: 20px; + padding-right: 20px; + border: outset; } -/* About section styles */ - -.about { - padding-top: 50px; +#contact-btn:active{ + border: inset; } -.about h1 { - font-size: 40px; - color: rgb(255, 128, 153); - text-align: center; +#contact-btn:focus{ + outline: none; } -.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; +ul { + list-style: none; + text-align: left; + margin-left: 20px; } -/* Example cake styles */ - -.example-cakes h3 { - font-size: 25px; - color: rgb(255, 128, 153); - text-align: center; - padding-top: 50px; - padding-bottom: 20px; +a { + font-size: 25px; + text-decoration: none; + color: #8a71bc; } -.example-cakes ul { - padding-left: 0; +#tagline{ + text-align: center; + color: rgb(240, 118, 158); } - -.example-cakes li { - display: flex; - justify-content: center; - flex-wrap: wrap; - padding-bottom: 20px; +#tagline h1 { + font-size: 2rem; } -.images { - border: 2px solid rgb(252, 251, 253); +#mainimg { + width: 100%; + border:solid 3px white; } - -/* Footer styles */ - -.footer { - display: flex; - padding: 50px; - justify-content: center; +p { + color: rgb(240, 118, 158); + text-align: center; + font-size: large; + font-weight: bold; } - -.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 { +#cake-images-container { 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; - } + justify-content: center; } -@media only screen and (min-width: 1000px) { - .top-header .header-image { +.examples { 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; - } + justify-content: center; + margin-top: 20px; +} +.examples img { + border:solid 3px white; +} +footer ul { + margin-top: 70px; + margin-bottom: 70px; + margin-left: 0; + text-align: center; +} + +@media screen and (min-width: 650px){ + + #cakes-menu, footer ul { + width: 650px; + margin-left: auto; + margin-right: auto; + font-size: 1.5rem; + } + ul { + display: flex; + justify-content: center; + + } + + + li { + text-align: center; + } + #cake-images-container { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + } + .examples { + width: 45%; + margin-top: 20px; + display: flex; + justify-content: center; +} + +} +@media screen and (min-width: 1000px){ + #logo { + align-self: flex-start; + margin-left: 20px; + height: 250px; + width: 250px; + } + #contact-btn { + font-size: 2rem; + align-self: flex-end; + margin-right: 20px; + } + #cakes-menu { + width: 800px; + margin-left: auto; + margin-right: auto; + + } + a { + font-size: 2rem; + } + + #tagline h1 { + font-size: 4rem; + } + #tagline h3 { + font-size: 1.5rem; + } + p { + font-size: x-large; + } + .examples { + width: 20%; + } }