diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 000000000..31977923b Binary files /dev/null and b/.DS_Store differ diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md old mode 100644 new mode 100755 diff --git a/.github/workflows/close.yml b/.github/workflows/close.yml old mode 100644 new mode 100755 diff --git a/GRADING.md b/GRADING.md old mode 100644 new mode 100755 diff --git a/HOW-TO-GET-HELP.md b/HOW-TO-GET-HELP.md old mode 100644 new mode 100755 diff --git a/HOW-TO-SUBMIT.md b/HOW-TO-SUBMIT.md old mode 100644 new mode 100755 diff --git a/HOW_TO_MARK.md b/HOW_TO_MARK.md old mode 100644 new mode 100755 diff --git a/assets/chocolate cake.jpg b/assets/chocolate cake.jpg new file mode 100755 index 000000000..b5d365532 Binary files /dev/null and b/assets/chocolate cake.jpg differ diff --git a/assets/cupcake.jpg b/assets/cupcake.jpg new file mode 100755 index 000000000..042b2d550 Binary files /dev/null and b/assets/cupcake.jpg differ diff --git a/assets/fotor_2023-2-8_22_18_44.jpg b/assets/fotor_2023-2-8_22_18_44.jpg new file mode 100755 index 000000000..b4f315747 Binary files /dev/null and b/assets/fotor_2023-2-8_22_18_44.jpg differ diff --git a/assets/logo.png b/assets/logo.png new file mode 100755 index 000000000..61ad4de38 Binary files /dev/null and b/assets/logo.png differ diff --git a/assets/pavlova-with-summer-berries-1024x652.jpg b/assets/pavlova-with-summer-berries-1024x652.jpg new file mode 100755 index 000000000..3bdb65f83 Binary files /dev/null and b/assets/pavlova-with-summer-berries-1024x652.jpg differ diff --git a/assets/strawberry-cake1.jpg b/assets/strawberry-cake1.jpg new file mode 100755 index 000000000..9a8637a55 Binary files /dev/null and b/assets/strawberry-cake1.jpg differ diff --git a/assets/weding.jpg b/assets/weding.jpg new file mode 100755 index 000000000..ff768a945 Binary files /dev/null and b/assets/weding.jpg differ diff --git a/assets/welcome.jpg b/assets/welcome.jpg new file mode 100755 index 000000000..4e18d631c Binary files /dev/null and b/assets/welcome.jpg differ diff --git a/design/cakes wireframe - desktop.png b/design/cakes wireframe - desktop.png old mode 100644 new mode 100755 diff --git a/design/cakes wireframe - mobile.png b/design/cakes wireframe - mobile.png old mode 100644 new mode 100755 diff --git a/index.html b/index.html old mode 100644 new mode 100755 index 60b1afe13..e3f841cfb --- a/index.html +++ b/index.html @@ -6,11 +6,81 @@ Responsive Cake webpage - + + - - - - - \ No newline at end of file +
+
+ +
+ +
+
+
+
+
+
+
+
+
+ +
+ +
+ +
+

Welcome To Cake Art

+

In cake art we make cakes with the best products and we give it a distinctive characteristic since the + client participates in the creation both choosing the ingredients and the decoration, resulting in a unique work. + We are not a factory, we are an art studio.

+
+
+ glazed cake +
+
+
+
+
+

Deserts

+ Pavlova con fresh fruits +

+
+
+

Cup Cake

+ cup cakes +

+
+
+
+
+

Wedding Cake

+ beautiful wedding cake +

+
+
+

Chocolate Cake

+ chocolate cake +

+
+
+
+ + +
+ + + + + \ No newline at end of file diff --git a/readme.md b/readme.md old mode 100644 new mode 100755 diff --git a/style.css b/style.css old mode 100644 new mode 100755 index 6de1b3567..4e362e181 --- a/style.css +++ b/style.css @@ -1 +1,212 @@ -/* Add your styling here */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body, html{ + /* height: 100vh; */ +} + +.header { + /* grid-area: header; */ + display: flex; + align-items: center; + background-color: rgb(185, 185, 116); + + } + .main { + grid-area: content; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin-bottom: 1rem; + background-color: rgb(219, 218, 212); + } + .img-wrapper-1 { + grid-area: content; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: rgb(159, 110, 133); + } + + .footer { + grid-area: footer; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + background-color: rgb(252, 195, 50); + } + + .welcome-img{ + width: 100%; + /* height: 400px; */ +} +.logo { + display: flex; + flex-direction: row; + align-items: center; +} +.logo-name { + font-size: 1.5rem; +} + + .cake-img { + width: 250px; + height: 250px; +} + +.menues-bar{ + display:block; + position: fixed; + visibility: hidden; + top: 0; + left: -100%; + width: 300px; + height:100% ; + margin: 0; + padding: 80px 0; + list-style: none; + background-color: rgb(209, 203, 203); + box-shadow: 1px 0px 6px rgba(0,0,0,.2); + border: solid 2px red; + + +} +.menues { + display: flex; + flex-direction: row; + justify-content: space-evenly; + align-items: center; + list-style: none; +} +font-family sans-serif{ + font-size:20px; + font-weight: 600; + text-decoration: none; + transition-duration: .25s; + +} +.menues:hover{ + background-color:rgb(252, 252, 195); +} +li { + padding: auto; +} + +.img-wrapper-2 { + display: flex; + justify-content: center; + flex-direction: row; + flex-wrap: wrap; + +} + +.header-img { + width: 5rem; + height: 5rem; + padding: 2rem; +} + +@media only screen and (min-width: 500px) { + .wrapper { + grid-template-columns: 1fr 3fr; + grid-template-areas: + "header header" + "main main" + "img-wrapper img-wrapper" + "footer footer"; + } + nav ul { + display: flex; + justify-content: space-between; + } + } + + @media only screen and (min-width: 540px) { + .grid { + grid-template-rows: 15rem 4rem 20rem 13rem 10rem 3rem; + grid-gap: 1rem; + grid-template-areas: + "header header" + "nav nav" + "image welcome" + "cake cake" + "media media" + "footer footer" + + } + .images-cakes { + grid-template-columns: repeat(4,1fr); + grid-template-rows: 20rem; + grid-template-areas: + "cake1 cake2 cake3 cake4"; + } + .social-media { + display: flex; + justify-content: center; + + align-items:center; + } + .insta { + padding: 0 5rem; + } + .hamburger { + display:none; + } + .title { + font-size:x-large; + max-width: 30rem; + } + .navigation { + display:block; + grid-area: nav; + background-color: #333; + + } + .navigation__list { + display: flex; + list-style: none; + justify-content: flex-end; + + } + + .navigation__item { + padding: 0.5rem 0.5rem; + color: white; + + } + .navigation__item:hover { + color: #FAF9F6; + + } + .navigation__link { + color: var(--grey-dark); + font-weight: 600; + text-transform: uppercase; + text-decoration: none; + padding: 0 1rem; + } + h1 { + margin: 0 auto; + } + } + + @media only screen and (min-width: 900px) { + .grid { + grid-template-columns: 1fr 4fr 4fr 1fr; + grid-template-rows: 15rem 4rem 22rem 15rem 10rem 3rem; + grid-gap: 1rem; + grid-template-areas: + "header header header header" + ". nav nav ." + ". image welcome ." + ". cake cake ." + "media media media media" + "footer footer footer footer"; + } + } \ No newline at end of file