diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 000000000..c3551c0f0 Binary files /dev/null and b/.DS_Store differ diff --git a/img/about.jpg b/img/about.jpg new file mode 100644 index 000000000..052230d96 Binary files /dev/null and b/img/about.jpg differ diff --git a/img/bg.jpg b/img/bg.jpg new file mode 100644 index 000000000..8167891f8 Binary files /dev/null and b/img/bg.jpg differ diff --git a/img/cake-1.jpg b/img/cake-1.jpg new file mode 100644 index 000000000..33575b6b3 Binary files /dev/null and b/img/cake-1.jpg differ diff --git a/img/cake-2.jpg b/img/cake-2.jpg new file mode 100644 index 000000000..8a8c1df8b Binary files /dev/null and b/img/cake-2.jpg differ diff --git a/img/cake-3.jpg b/img/cake-3.jpg new file mode 100644 index 000000000..3689c2fca Binary files /dev/null and b/img/cake-3.jpg differ diff --git a/img/hero.jpg b/img/hero.jpg new file mode 100644 index 000000000..7c002881a Binary files /dev/null and b/img/hero.jpg differ diff --git a/img/offer.jpg b/img/offer.jpg new file mode 100644 index 000000000..8ce9c87cd Binary files /dev/null and b/img/offer.jpg differ diff --git a/img/service.jpg b/img/service.jpg new file mode 100644 index 000000000..f82737e79 Binary files /dev/null and b/img/service.jpg differ diff --git a/img/team-1.jpg b/img/team-1.jpg new file mode 100644 index 000000000..545b9147d Binary files /dev/null and b/img/team-1.jpg differ diff --git a/img/team-2.jpg b/img/team-2.jpg new file mode 100644 index 000000000..f7b7c16ae Binary files /dev/null and b/img/team-2.jpg differ diff --git a/img/team-3.jpg b/img/team-3.jpg new file mode 100644 index 000000000..e6a68aa82 Binary files /dev/null and b/img/team-3.jpg differ diff --git a/img/testimonial-1.jpg b/img/testimonial-1.jpg new file mode 100644 index 000000000..75fd665f5 Binary files /dev/null and b/img/testimonial-1.jpg differ diff --git a/img/testimonial-2.jpg b/img/testimonial-2.jpg new file mode 100644 index 000000000..0fcf65084 Binary files /dev/null and b/img/testimonial-2.jpg differ diff --git a/img/testimonial-3.jpg b/img/testimonial-3.jpg new file mode 100644 index 000000000..3e65e8301 Binary files /dev/null and b/img/testimonial-3.jpg differ diff --git a/img/testimonial-4.jpg b/img/testimonial-4.jpg new file mode 100644 index 000000000..a954e81b1 Binary files /dev/null and b/img/testimonial-4.jpg differ diff --git a/index.html b/index.html index 60b1afe13..fcb185bf6 100644 --- a/index.html +++ b/index.html @@ -6,11 +6,37 @@ Responsive Cake webpage - + + + + - + +
+
service
+ +
main
+ + + +

content1

+
+
+ content2 +
+
+ content3 +
+
+ content4 +
+
+ + \ No newline at end of file diff --git a/style.css b/style.css index 6de1b3567..58e75b986 100644 --- a/style.css +++ b/style.css @@ -1 +1,120 @@ /* Add your styling here */ +:root { + --main-radius: 5px; + --main-padding: 5px; + } + + body { + font-family: "Inter", sans-serif; + } + img { + + +} + .container { + display: grid; + height: 100vh; + grid-template-columns: 1fr 1fr 1fr 1fr ; + grid-template-rows: 1.2fr 0.4fr 2.4fr 2fr 0.5fr; + grid-template-areas: + "firstpic firstpic firstpic firstpic" + "nav nav nav nav" + "sidebar sidebar main main" + "content1 content2 content3 content4" + "footer footer footer footer" + ; + grid-gap: 0.2rem; + font-weight: 800; + text-transform: uppercase; + font-size: 12px; + color: #004d40; + text-align: center; + } + #first { + background: #6fffd2; + grid-area: firstpic; + border-radius: var(--main-radius); + padding-top: var(--main-padding); + } + + + nav { + background: #a7ffeb; + grid-area: nav; + border-radius: var(--main-radius); + padding-top: var(--main-padding); + } + + main { + background: #84ffff; + grid-area: main; + border-radius: var(--main-radius); + padding-top: var(--main-padding); + } + + #sidebar { + background: #18ffff; + grid-area: sidebar; + border-radius: var(--main-radius); + padding-top: var(--main-padding); + } + + #content1 { + background: #6fffd2; + grid-area: content1; + border-radius: var(--main-radius); + padding-top: var(--main-padding); + } + + #content2 { + background: #64ffda; + grid-area: content2; + border-radius: var(--main-radius); + padding-top: var(--main-padding); + } + #content3 { + background: #64ffda; + grid-area: content3; + border-radius: var(--main-radius); + padding-top: var(--main-padding); + } + #content4 { + background: #64ffda; + grid-area: content4; + border-radius: var(--main-radius); + padding-top: var(--main-padding); + } + + footer { + background: #64ffda; + grid-area: footer; + border-radius: var(--main-radius); + padding-top: var(--main-padding); + } + + + + + + + + + @media only screen and (max-width: 550px) { + .container { + + grid-template-columns: 1fr; + grid-template-rows: 0.4fr 0.4fr 2.2fr 1.2fr 1.2fr 1.2fr 1fr 1fr; + grid-template-areas: + "nav" + "sidebar" + "main" + "content1" + "content2" + "content3" + "content4" + "footer" + ; + + } + } + \ No newline at end of file