diff --git a/Cakes-Co/design/cakes wireframe - mobile.png b/Cakes-Co/design/cakes wireframe - mobile.png deleted file mode 100644 index 12900589..00000000 Binary files a/Cakes-Co/design/cakes wireframe - mobile.png and /dev/null differ diff --git a/Cakes-Co/images/1.webp b/Cakes-Co/images/1.webp new file mode 100644 index 00000000..6ab1887c Binary files /dev/null and b/Cakes-Co/images/1.webp differ diff --git a/Cakes-Co/images/cakes-autumn-FF-626-23.jpg b/Cakes-Co/images/cakes-autumn-FF-626-23.jpg new file mode 100644 index 00000000..68bd7bbe Binary files /dev/null and b/Cakes-Co/images/cakes-autumn-FF-626-23.jpg differ diff --git a/Cakes-Co/images/cakes-celebrations-569-23.jpg b/Cakes-Co/images/cakes-celebrations-569-23.jpg new file mode 100644 index 00000000..d6915793 Binary files /dev/null and b/Cakes-Co/images/cakes-celebrations-569-23.jpg differ diff --git a/Cakes-Co/images/cakes-fruit-cakes-569-23.jpg b/Cakes-Co/images/cakes-fruit-cakes-569-23.jpg new file mode 100644 index 00000000..02ca3955 Binary files /dev/null and b/Cakes-Co/images/cakes-fruit-cakes-569-23.jpg differ diff --git a/Cakes-Co/images/cat-landing-autumn-loafs-569-23.jpg b/Cakes-Co/images/cat-landing-autumn-loafs-569-23.jpg new file mode 100644 index 00000000..94af6dd9 Binary files /dev/null and b/Cakes-Co/images/cat-landing-autumn-loafs-569-23.jpg differ diff --git a/Cakes-Co/images/happy-birthday-cake-in-a-tin-850.jpg b/Cakes-Co/images/happy-birthday-cake-in-a-tin-850.jpg new file mode 100644 index 00000000..130a3a70 Binary files /dev/null and b/Cakes-Co/images/happy-birthday-cake-in-a-tin-850.jpg differ diff --git a/Cakes-Co/images/images (1).jpeg b/Cakes-Co/images/images (1).jpeg new file mode 100644 index 00000000..4a035b6b Binary files /dev/null and b/Cakes-Co/images/images (1).jpeg differ diff --git a/Cakes-Co/images/images (2).jpeg b/Cakes-Co/images/images (2).jpeg new file mode 100644 index 00000000..78fc11cd Binary files /dev/null and b/Cakes-Co/images/images (2).jpeg differ diff --git a/Cakes-Co/images/images (3).jpeg b/Cakes-Co/images/images (3).jpeg new file mode 100644 index 00000000..21785c74 Binary files /dev/null and b/Cakes-Co/images/images (3).jpeg differ diff --git a/Cakes-Co/images/images (4).jpeg b/Cakes-Co/images/images (4).jpeg new file mode 100644 index 00000000..90735f9c Binary files /dev/null and b/Cakes-Co/images/images (4).jpeg differ diff --git a/Cakes-Co/images/images.jpeg b/Cakes-Co/images/images.jpeg new file mode 100644 index 00000000..562d3530 Binary files /dev/null and b/Cakes-Co/images/images.jpeg differ diff --git a/Cakes-Co/images/logo.webp b/Cakes-Co/images/logo.webp new file mode 100644 index 00000000..ae7486fc Binary files /dev/null and b/Cakes-Co/images/logo.webp differ diff --git a/Cakes-Co/images/welcomecake.jpeg b/Cakes-Co/images/welcomecake.jpeg new file mode 100644 index 00000000..d03a0e8b Binary files /dev/null and b/Cakes-Co/images/welcomecake.jpeg differ diff --git a/Cakes-Co/index.html b/Cakes-Co/index.html index 60b1afe1..e1520bc3 100644 --- a/Cakes-Co/index.html +++ b/Cakes-Co/index.html @@ -1,16 +1,88 @@ + + + + + + + Cakes co + + + + + +
+ + + +
+ + +

The best cakes in town delivered to your door

+ +
+
+ + + + - - - - - Responsive Cake webpage - - +
+
+ +

Welcome

+

+ Indulge in the art of celebration with our exquisite cakes. + Each slice is a symphony of flavors and a masterpiece of craftsmanship, + meticulously crafted to transform any moment into a memorable occasion. + Whether you're savoring the classic elegance of a velvety chocolate cake, + the playful sweetness of a rainbow-colored delight, + or the timeless charm of a buttercream-frosted masterpiece, + our cakes are more than desserts; + they're a canvas for your sweetest moments. + Welcome to a world where every bite is a celebration, + and every occasion is made unforgettable by the magic of our delectable creations. +

+
+ + - - - +
+ wedding cake +
+
+ birthday cake + tart + cupcake + donut +
+
+ + \ No newline at end of file diff --git a/Cakes-Co/style.css b/Cakes-Co/style.css index 6de1b356..3a57ed78 100644 --- a/Cakes-Co/style.css +++ b/Cakes-Co/style.css @@ -1 +1,251 @@ -/* Add your styling here */ +* { + margin: 0; + padding: 0; + } + body { + font-family: "Roboto", sans-serif; + font-size: 4vw; + background-image: linear-gradient(rgb(243, 207, 232), rgb(168, 247, 200), rgb(255, 126, 203)); + + } + h1 { + font-size: 2.4em; + font-weight: 500; + } + h4 { + font-size: 1.2em; + font-weight: 400; + font-style: italic; + } + + h6 { + font-size: 0.7em; + font-weight: 200; + } + p { + font-size: 1em; + font-weight: 300; + line-height: 1.4em; + } + img { + width: 100%; + border-radius: 10%; + } + + :root { + + --backgroundColor: linear-gradient(rgb(249, 170, 217), rgb(246, 239, 115), rgb(243, 129, 207)); + --generalPadding: 1em; + --sectionGap: 2em; + --white: rgb(75, 6, 52); + } + + header { + height: 40vw; + padding: var(--generalPadding); + background-color: var(--backgroundColor); + display: flex; + flex-direction: row; + justify-content: space-between; + color: var(--white); + } + + + + + + .logo-img { + margin-top: var(--generalPadding); + height: 70%; + width: auto; + border-radius: 50%; + + } + .header-area { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: flex-end; + text-align: end; + } + #menu-inpt { + display: none; + } + .menu-lbl { + height: 30%; + width: auto; + position: relative; + cursor: pointer; + } + + .menu-img { + height: 100%; + } + + .header-area p { + width: 19ch; + } + + .nav-nav { + display: none; + width: min-content; + border-radius: var(--generalPadding); + padding: var(--generalPadding); + background-color: rgb(231, 119, 162); + position: absolute; + top: 70px; + right: 100%; + transition: 0s; + } + + #menu-inpt:checked + .nav-nav { + display: block; + right: var(--generalPadding); + } + + .nav-ul { + width: min-content; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 1em; + } + .nav-a { + border: solid 1px; + text-decoration: none; + border-radius: 0.5em; + background-color: var(--backgroundColor); + padding: 0.25em 1em 0.2em; + color: var(--white); + } + + main { + margin: var(--sectionGap) 0; + padding: var(--generalPadding); + display: flex; + flex-direction: column; + gap: var(--sectionGap); + } + + #intro-sctn { + display: flex; + flex-direction: column; + gap: var(--sectionGap); + } + + #images-sctn { + display: grid; + gap: var(--generalPadding); + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, auto); + } + + footer { + height: 40vw; + padding: var(--generalPadding); + background-color: var(--backgroundColor); + display: flex; + flex-direction: column; + justify-content: space-between; + } + + #nav-footer { + display: flex; + flex-direction: column; + gap: calc(var(--generalPadding) / 2); + } + #nav-footer a { + text-decoration: none; + color: var(--white); + font-size: 1em; + font-weight: 400; + } + + footer h6 { + align-self: center; + color: var(--white); + } + + @media screen and (min-width: 540px) { + body { + font-size: 2vw; + } + header { + height: 10vw; + } + .header-area { + justify-content: flex-end; + } + + .nav-nav { + margin: var(--generalPadding) var(--generalPadding) 0; + display: flex; + width: auto; + border-radius: 0; + position: static; + justify-content: flex-end; + } + + .nav-ul { + font-size: 0.75em; + display: flex; + flex-direction: row; + gap: 1em; + } + + .menu-lbl { + display: none; + } + + main { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, auto); + padding: 0 var(--generalPadding); + } + .nav-area { + justify-content: flex-end; + } + .nav-area img { + display: none; + } + .nav-area p { + width: auto; + } + #intro-sctn { + grid-column: 2/-1; + text-align: right; + } + #hero-sctn { + grid-column: 1/2; + grid-row: 1/2; + } + + #images-sctn { + grid-column: 1/-1; + display: grid; + gap: var(--generalPadding); + grid-template-columns: repeat(4, 1fr); + grid-template-rows: auto; + display: grid; + grid-template-columns: auto auto auto auto; + + } + + footer { + height: 10vw; + gap: var(--sectionGap); + justify-content: center; + align-items: center; + } + + #nav-footer { + display: flex; + flex-direction: row; + gap: calc(var(--generalPadding) * 2); + } + #hamburger { + display: none; + } + } + diff --git a/Wireframe/css/style.css b/Wireframe/css/style.css index e69de29b..452b2682 100644 --- a/Wireframe/css/style.css +++ b/Wireframe/css/style.css @@ -0,0 +1,81 @@ +body { + min-height: 100vh; + display: flex; + flex-direction: column; + background-image: linear-gradient(rgb(243, 207, 232), rgb(247, 243, 168), rgb(255, 126, 203)); +} + +header { + font-size: 25px; + text-align: center; +} + +.footer-content { + text-align: center; + } + +h1{ + font-size: 35px; + color: rgba(200, 27, 168, 0.836); +} + +h2{ + font-size: 20px; + color: rgb(158, 19, 161); +} + +p { + font-size: 20px; + color: rgb(171, 4, 135); +} + + +.container { + display: grid; + grid-gap: 10px; + grid-template-columns: 1fr; + grid-template-rows: 1fr 1fr; + } + + +.article { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + border: 1px solid rgb(58, 3, 44); + padding: 43px; + margin: 43px; +} + +article:first-child { + background-color: rgba(89, 10, 65, 0.11); + +} + +.article-wrap { + display: grid; + grid-template-columns: 1fr 1fr; + + gap: 20px; + width: 100%; +} +.article_button { + border: rgb(235, 121, 227); + background-color: rgb(246, 185, 237); + color:rgb(126, 4, 101) + padding: .75rem; + border-radius: 8px; + text-align: center; + + +} + +.read-more { + margin: 10px; + padding: 5px; + background-color: rgba(153, 8, 158, 0.63); + border: 0.1px solid rgba(148, 10, 125, 0.63); + border-radius: 6px; + color: rgb(208, 156, 194); +} diff --git a/Wireframe/index.html b/Wireframe/index.html index 67544158..724df9b2 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -4,10 +4,63 @@ Wireframe - + + + + + +
+ +

Learning how to use Git

+

This page will help you develop some understanding of Git

+
+ +
+ +
+ +

What is Git?

+

By far, the most widely used modern version control system in the world today is Git. + Git is a mature, actively maintained open source project originally developed in 2005 by Linus Torvalds, + the famous creator of the Linux operating system kernel. + A staggering number of software projects rely on Git for version control, + including commercial projects as well as open source. + Developers who have worked with Git are well represented in the pool of + available software development + talent and it works well on a wide range of operating systems and IDEs (Integrated Development Environments).

+ +
+ +
+
+

Why do developers need GIT?

+

I will explain why GitHub is such an important tool for today’s coders, + and how you can go about using it to get your name out there and using it is a simple tip to + becoming a successful web developer.

+ +
+
+

What is branch in GIT ?

+

Branches allow you to work on different parts of a project without impacting the main branch. + When the work is complete, a branch can be merged with the main project. + + You can even switch between branches and work on different projects without them interfering with each other. + + Branching in Git is very lightweight and fast!

+ +
+
+
+ + +