diff --git a/img/Big-cake.jpg b/img/Big-cake.jpg new file mode 100644 index 000000000..d4a23c499 Binary files /dev/null and b/img/Big-cake.jpg differ diff --git a/img/Donut.jpeg b/img/Donut.jpeg new file mode 100644 index 000000000..f57825306 Binary files /dev/null and b/img/Donut.jpeg differ diff --git a/img/cake with candle.jpg b/img/cake with candle.jpg new file mode 100644 index 000000000..b9c929535 Binary files /dev/null and b/img/cake with candle.jpg differ diff --git a/img/cupcake.jpg b/img/cupcake.jpg new file mode 100644 index 000000000..f9964bfa1 Binary files /dev/null and b/img/cupcake.jpg differ diff --git a/img/cut cake.jpg b/img/cut cake.jpg new file mode 100644 index 000000000..e490ea61b Binary files /dev/null and b/img/cut cake.jpg differ diff --git a/img/newcupcakes.jpg b/img/newcupcakes.jpg new file mode 100644 index 000000000..1d6081acf Binary files /dev/null and b/img/newcupcakes.jpg differ diff --git "a/img/\342\200\224Pngtree\342\200\224hand painted light blue cupcakes_5567732.png" "b/img/\342\200\224Pngtree\342\200\224hand painted light blue cupcakes_5567732.png" new file mode 100644 index 000000000..f98bb1811 Binary files /dev/null and "b/img/\342\200\224Pngtree\342\200\224hand painted light blue cupcakes_5567732.png" differ diff --git a/index.html b/index.html index 60b1afe13..9f053baa2 100644 --- a/index.html +++ b/index.html @@ -6,11 +6,79 @@ Responsive Cake webpage - + - +

+ + + + + + +

+ + +

Welcome

Our delicious cakes in Leeds are perfect for any occasion. Whether you're buying some brownies & cookies + for yourself or looking for a last minute birthday cake anywhere in Leeds, you can count on Cutter & + Squidge to deliver the goodies!

Welcome

+ +

+ \ No newline at end of file diff --git a/style.css b/style.css index 6de1b3567..315b46cc9 100644 --- a/style.css +++ b/style.css @@ -1 +1,313 @@ -/* Add your styling here */ +header { + background-color: rgb(241, 241, 255); +} +.header { + background-color: rgb(237, 237, 237); + display: grid; + grid-template-columns: repeat(5, 1fr); + +} +.left-header { + grid-column: 1 / 3; + grid-row: 1/3; + +} +.logo{ + margin-top: 10px; + width: 100%; +} +.right-header { + grid-column: 5/6; + float: right; + +} +.slogan { + display: flex; + justify-content: right; + color: rgb(0, 0, 99); + grid-row: 2/3; + grid-column: 3 / 6; + text-align: right; + align-items: flex-end; +} + +.slogan p { + font-weight: 500; + font-style: italic; + margin-right: 10px; + margin-bottom: 16px; + +} +.nav-menu { + display: none; + +} + +.hamburger { + display: block; + cursor: pointer; + float: right; + margin: 10px 10px; +} + +.bar { + display: block; + align-items: right; + width: 25px; + height: 3px; + margin: 5px; + background-color:rgb(37, 37, 99); +} +body { + background-color: rgb(241, 241, 255); + max-width: 1440px; + margin: auto; +} +.welcome { + padding: 10px 16px; + margin: 16px 0; + color:rgb(0, 0, 99); +} +.welcome p{ + text-align: justify; + +} +.welcome h1 { + font-size:x-large; +} +.grid-img { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-column-gap: 10px; + grid-row-gap: 15px; + padding: 10px; + margin: 5px; +} +.grid-img img{ +width: 100%; +} +.img1 { + grid-column: 1/-1; + +} +.img2 { + grid-row: 2/3; + grid-column: 1/2; + height: 100%; + +} + +.img3 { + grid-row: 2/3; + grid-column: 2/3; + +} + +.img4 { + grid-row: 3/4; + grid-column: 1/2; + +} + +.img5 { + grid-row: 3/4; + grid-column: 2/3; + +} +footer { + background-color: rgb(237, 237, 237); + margin-top: 40px; +} +.social { + display: grid; + margin: 20px auto auto 10px; + grid-template-rows: repeat(3, 20px); + grid-template-columns: 100px; + grid-row-gap: 15px; +} +.face { + border: solid rgb(170, 170, 170); + background-color: rgb(170, 170, 170); + text-decoration: none; + color: rgb(0, 0, 99); +} +.twit { + border: solid rgb(170, 170, 170); + background-color: rgb(170, 170, 170); + text-decoration: none; + color: rgb(0, 0, 99); +} +.insta { + border: solid rgb(170, 170, 170); + background-color: rgb(170, 170, 170); + text-decoration: none; + color: rgb(0, 0, 99); +} +.end { + text-align: center; + border: solid rgb(200, 200, 200); + background-color: rgb(200, 200, 200); + text-decoration: none; + color: rgb(0, 0, 99); + margin: 30px; + white-space: nowrap; +} +.welcome2{ + display: none; +} +@media only screen and (min-width: 540px){ + .social{ + grid-template-columns: 1fr 1fr 1fr; + gap: 10px; + margin: 10px 10px; + } + .social a{ +text-align: center; +} +.end{ + margin: 20px 80px +} +.welcome h1 { + text-align: center; +} +} +@media only screen and (min-width: 900px) { + .right-header{ + display: none; + } + .header { + display: grid; + grid-template-columns: repeat(8, 1fr); + + } + .logo{ + margin-left: 32px; + width: 80%; + } + + .slogan { + display: flex; + grid-column: 4/ 9; + text-align: right; + margin-right: 32px; + margin-bottom: 16px; + } + + .slogan p { + font-weight: 700; + font-size: x-large; + + } + .nav-menu { + display: flex; + padding: 16px; + margin: 32px; + background-color: rgb(237, 237, 237); + justify-content: right; + } + .menu{ + display: grid; + grid-template-columns: repeat(5, auto); + grid-column-gap: 20px; + + + } +.nav-link { + text-decoration: none; + color: white; + border: solid rgb(170, 170, 170); + background-color: rgb(170, 170, 170); + padding: 2px 20px; +} +.grid-img{ + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-template-rows: repeat(2, auto); + margin: 10px 32px; +} +.img1{ + grid-column: 1/3; +} +.welcome{ + display: none; +} +.welcome2 { + display: grid; + gap: 20px; + grid-column: 3/5; + margin: 10px 0; + color:rgb(0, 0, 99); +} +.welcome2 p{ + text-align:justify; + margin-right: 32px; + align-items:stretch; + +} +.welcome2 h1 { + font-size:xx-large; + text-align: right; +margin-right: 32px; + +} +.img2{ + grid-column: 1/2; + grid-row: 2; +} +.img3{ + grid-column: 2/3; + grid-row: 2; + +} +.img4{ + grid-column: 3/4; + grid-row: 2; +} + +.img5{ +grid-column: 4/5; +grid-row: 2; + +} +.social{ + grid-template-columns: repeat(3, 90px); + grid-template-rows: 20px; + gap: 40px; + margin: auto; + justify-content: center; +} +.social a{ +text-align: center; + +} +.end{ +margin:20px auto; +width: 200px; +} + + +/* + + + + + + + + + + + + + + + + + + + + + + + +