diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6b665aaa --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/Cakes-Co/images/cake-1.jpg b/Cakes-Co/images/cake-1.jpg new file mode 100644 index 00000000..9666ddf6 Binary files /dev/null and b/Cakes-Co/images/cake-1.jpg differ diff --git a/Cakes-Co/images/cake-2.jpg b/Cakes-Co/images/cake-2.jpg new file mode 100644 index 00000000..b0111b1a Binary files /dev/null and b/Cakes-Co/images/cake-2.jpg differ diff --git a/Cakes-Co/images/cake-3.jpg b/Cakes-Co/images/cake-3.jpg new file mode 100644 index 00000000..2960405e Binary files /dev/null and b/Cakes-Co/images/cake-3.jpg differ diff --git a/Cakes-Co/images/cake-4.jpg b/Cakes-Co/images/cake-4.jpg new file mode 100644 index 00000000..b775879e Binary files /dev/null and b/Cakes-Co/images/cake-4.jpg differ diff --git a/Cakes-Co/images/cake-hero.jpg b/Cakes-Co/images/cake-hero.jpg new file mode 100644 index 00000000..e796c623 Binary files /dev/null and b/Cakes-Co/images/cake-hero.jpg differ diff --git a/Cakes-Co/images/cake-logo.png b/Cakes-Co/images/cake-logo.png new file mode 100644 index 00000000..d86d247b Binary files /dev/null and b/Cakes-Co/images/cake-logo.png differ diff --git a/Cakes-Co/images/facebook-icon.svg b/Cakes-Co/images/facebook-icon.svg new file mode 100644 index 00000000..b3e55147 --- /dev/null +++ b/Cakes-Co/images/facebook-icon.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/Cakes-Co/images/instagram-icon.svg b/Cakes-Co/images/instagram-icon.svg new file mode 100644 index 00000000..56e20708 --- /dev/null +++ b/Cakes-Co/images/instagram-icon.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/Cakes-Co/images/twitter-icon.svg b/Cakes-Co/images/twitter-icon.svg new file mode 100644 index 00000000..a480cdbe --- /dev/null +++ b/Cakes-Co/images/twitter-icon.svg @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/Cakes-Co/index.html b/Cakes-Co/index.html index 60b1afe1..77978cb3 100644 --- a/Cakes-Co/index.html +++ b/Cakes-Co/index.html @@ -1,16 +1,115 @@ - - - - - + + + + Responsive Cake webpage + + + - + + - - - + +
+ +

Cakes Co

+
+ +

+ The best cakes in your town delivered to your door +

+
+
+
+
+
+ A cheesecake with strawberries +
+
+

Welcome

+

+ At Cakes Co, we're passionate about creating delicious and + beautifully crafted cakes that add a touch of magic to every + occasion. Our talented bakers and cake artists pour their heart and + soul into each creation, using the finest ingredients and their + creative flair to ensure every cake is a masterpiece. +

+
+
+
+
+ Cake topped with strawberries and blueberries +
+
+ cheesecake slice with strawberries and blueberries in plate +
+
+ Chocolate cupcake +
+
+ Cupcakes in blue color +
+
+
+
+ + + + diff --git a/Cakes-Co/style.css b/Cakes-Co/style.css index 6de1b356..1a2b3ed0 100644 --- a/Cakes-Co/style.css +++ b/Cakes-Co/style.css @@ -1 +1,258 @@ /* Add your styling here */ +:root { + --blue : #a8d7de; + --cream: #f6df7e; +} + +html { + margin: 0 auto; + max-width: 900px; +} + +.title { + text-wrap: nowrap; + position: fixed; + margin-left: 7rem; + color: var(--blue); +} + +body { + font-family: "Inria Sans", sans-serif; + background-color: rgba(243, 243, 226, 0.514); + margin: 0px 10px; +} + +.header { + font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; + background-color: var(--cream); + width: 100%; + top: 0; + position: sticky; + display: flex; + justify-content: space-between; + max-width: none; +} + +.logo { + width: 5em; + height: 6em; + position: static; +} + +.trigger { + display: none; +} + +.hamburger { + cursor: pointer; + padding: 20px; +} + +.hamburger span { + height: 5px; + width: 30px; + background: black; + display: block; + margin-bottom: 7px; +} + +.nav-text { + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: flex-end; +} + +.nav-list { + display: none; + margin-right: 50px; + /* padding: 0px 60px; + position: absolute; + right: -100vw; + transition: right 0.3s ease-in-out; */ +} + +.trigger:checked ~ .hamburger { + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: flex-end; +} + +.trigger:checked ~ .nav-list { + display: flex; + flex-direction: column; + /* right: 0; */ + /* position: sticky; */ + transition: right 0.3s ease-in-out; +} + +.navigation__item { + padding: 0.4rem; + margin-bottom: 5px; + background-color: #a8d7de; + text-align: center; + border-radius: 5px; + cursor: pointer; +} + +.navigation__list { + display: block; + list-style: none; + text-decoration: wavy; +} + +.navigation__list a { + color: black; + text-decoration: solid; +} + +.header-text { + padding: 0px 20px; + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + font-style: italic; +} + +/* .container { + display: grid; + grid-gap: 5px; + grid-template-columns: repeat(autofill, 200px); + grid-template-rows: repeat(auto, 1fr); +} */ + +.container { + display: flex; + flex-direction: column; +} + +.hero { + display: flex; + flex-direction: column-reverse; + justify-content: center; + align-items: center; + padding: 1rem; +} + +.img-hero { + width: 90%; + max-width: 540px; +} + +.brief-text { + font-weight: 200; +} + +.small-images { + display: grid; + grid-gap: 5px; + grid-template-columns: repeat(2, 1fr); + grid-auto-rows: 9rem; + justify-content: center; + align-items: center; +} + +.s-images img { + display: flex; + justify-content: center; + align-items: center; + width: 12rem; + height: 8rem; +} + +.footer { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.social-icons { + display: flex; +} + +.social { + display: flex; + justify-content: center; + width: 15px; + height: 15px; + padding: 5px; + margin: 5px; + border: 1px solid rgba(219, 219, 219, 0.726); + border-radius: 50%; +} + +.copyright { + text-align: center; + font-size: 10px; + font-weight: lighter; + color: gray; +} + +@media (min-width: 540px) { + .small-images { + display: grid; + grid-gap: 5px; + grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); + grid-auto-rows: 9rem; + justify-content: center; + align-items: center; + } +} + +@media (min-width: 900px) { + /* html { + margin: 0 auto; + max-width: none; +} */ + +.hamburger{ + display: none; +} + +.trigger:checked ~ .hamburger { + display: none; +} + +.nav-list { + display: flex!important; + justify-content: flex-end; + align-items: flex-end; + padding: 0px 15px; + right: -5.5vw; + position: absolute; + transition: right 0.3s ease-in-out; + margin-top: 60px; + background-color: var(--cream); + width: 100%; + max-width: 850px; +} + +.navigation__item { + display: inline-block; + margin: 1rem; + font-size: 1.4rem; +} + +.container { + margin-top: 130px; +} + + .hero { + display: flex; + flex-direction: row; + } + +.img-hero { + min-width: 300px; + margin-right: 2rem; +} + + .small-images { + display: grid; + grid-gap: 5px; + grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); + grid-auto-rows: 9rem; + justify-content: center; + align-items: center; + } +}