diff --git a/Cakes-Co/images/2867922_menu_icon.png b/Cakes-Co/images/2867922_menu_icon.png new file mode 100644 index 00000000..d7b36e30 Binary files /dev/null and b/Cakes-Co/images/2867922_menu_icon.png differ diff --git "a/Cakes-Co/images/Sweet Cake\360\237\215\260\342\234\250.jpeg" "b/Cakes-Co/images/Sweet Cake\360\237\215\260\342\234\250.jpeg" new file mode 100644 index 00000000..bdb9acfb Binary files /dev/null and "b/Cakes-Co/images/Sweet Cake\360\237\215\260\342\234\250.jpeg" differ diff --git a/Cakes-Co/images/bars-solid.svg b/Cakes-Co/images/bars-solid.svg new file mode 100644 index 00000000..b238403f --- /dev/null +++ b/Cakes-Co/images/bars-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Cakes-Co/images/cupcakelogo.png b/Cakes-Co/images/cupcakelogo.png new file mode 100644 index 00000000..28577a31 Binary files /dev/null and b/Cakes-Co/images/cupcakelogo.png differ diff --git "a/Cakes-Co/images/icons8-men\303\272.svg" "b/Cakes-Co/images/icons8-men\303\272.svg" new file mode 100644 index 00000000..eb24758c --- /dev/null +++ "b/Cakes-Co/images/icons8-men\303\272.svg" @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Cakes-Co/images/images-removebg-preview.png b/Cakes-Co/images/images-removebg-preview.png new file mode 100644 index 00000000..7c41762a Binary files /dev/null and b/Cakes-Co/images/images-removebg-preview.png differ diff --git a/Cakes-Co/index.html b/Cakes-Co/index.html index 60b1afe1..ee1ac9dd 100644 --- a/Cakes-Co/index.html +++ b/Cakes-Co/index.html @@ -1,16 +1,142 @@ - - - - - - Responsive Cake webpage + + + + + Precious secret's + + - + + + +
+
+
+ +
+
+
+ ☰ +
+ + +

"Whipping up sweet moments,one unforgettable cake at a time."

+
+
+
+
+ +
+
+
+
+

+ Welcome to Precious
+ Secret's Bakery +

+
+

+ Precious Secret's Bakery creates heartfelt cakes, blending + family recipes and premium ingredients to craft treats that + celebrate life's special moments. Every cake is a personal + touch, thoughtfully made to transform simple occasions into + cherished, lasting memories. +

+
+
+ chocolate cate with vanilla icing and strawberry on top +
+ +
+
- - +
+

Our Star Attraction.

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+ +
+
+

+ Hey There!
I'm Precious
+ Owner and Creator
+

+

+ My name is Precious, and I'm currently studying web development, + which fuels my creativity and technical skills. Recently, I + discovered a passion for baking, which led me to start my own cake + business. Each cake I create is a reflection of my love for this + art, and I find immense joy in bringing sweet smiles to people's + faces. Every slice is made with love, dedication, and a sprinkle + of my unique flair! +

+
+
+ +
+
+ + \ No newline at end of file diff --git a/Cakes-Co/style.css b/Cakes-Co/style.css index 6de1b356..70b28ccc 100644 --- a/Cakes-Co/style.css +++ b/Cakes-Co/style.css @@ -1 +1,249 @@ -/* Add your styling here */ +/*universal styling */ +* { + margin: 0; + padding: 0 !important; + box-sizing: border-box; +} +/*body*/ +body { + font-family: Garamond, sans-serif; + background-color: #fff; + overflow: auto !important; +} +/* wrapper*/ + +/*logo*/ +.logo { + width: 6rem; + height: auto; + border-radius: 8px; +} +.menuicon { + font-size: 2rem; + margin-left: 10rem; + cursor: pointer; + color: #ed4672; + display: block; +} + +/*header*/ +header { + display: flex; + justify-content: space-between; + align-items: center; + overflow: hidden; + padding: 10px 20px; + background-color: #fed9e1; + color: #ffffff; +} +nav { + display: none; +} +nav ul { + list-style: none; +} /* +.header-text ul { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + margin-bottom: 50px; + color: #ed4672; +} +.header-text { + margin: 5px 1px; +}*/ +header p { + font-size: 1.1rem; + font-weight: bold; + font-style: italic; + color: #ed4672; + margin-top: 2rem; +} +/*article*/ +.hero-article { + background-color: #fed9e1; + margin: 2rem 1.5rem; + font-size: 400; + color: #767676; + display: flex; + flex-direction: column; +} +.hero-article h2 { + font-size: 2rem; + text-align: center; + padding: 3px; + line-height: 2rem; + margin-top: 3rem; + margin-bottom: 1rem; +} +.hero-article p { + font-size: 1.2rem; + line-height: 1.7rem; + margin: 0 8px; +} +.hero-article img { + width: 100%; + height: auto; + margin-top: 2rem; + margin-bottom: 0; +} +.image-section h2 { + text-align: center; + margin-top: 3rem; + margin-bottom: 2rem; + font-size: 2rem; + font-weight: bold; + color: #ed4672; +} + +.image-section img { + width: 90%; + margin-left: 1rem; + border-radius: 5px; +} +.image-featured img:hover { + transform: scale(1.2); + opacity: 0.9; +} +.image-featured { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, 1fr); + gap: 0.5rem; + margin: 1rem; +} +.about-me { + background-color: #fed9e1; + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 1fr; + margin-top: 30px; + gap: 3rem; + margin-left: 1.5rem; + margin-right: 1.5rem; + margin-bottom: 50px; +} +.aboutme-image { + background-position: left center; + background-size: cover; + overflow: hidden; + max-height: 100%; + width: 100%; +} +.about-me p { + font-size: 1.3rem; + font-weight: 300; + color: #767676; + line-height: 2rem; + margin-right: 2rem; + margin-left: 2rem; + margin-top: 2rem; + margin-bottom: 3rem; +} +.about-me em { + color: #ed4672; +} + +footer img { + width: 100px; + margin-left: 8rem; +} +hr { + margin-top: 0; + background-color: #ccc; + width: 60%; +} +footer p { + font-size: 1.4rem; + font-weight: 300; + line-height: 3rem; +} +footer { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-top: 10px; +} +.secondp { + text-align: center; + font-size: 0.9rem; + color: #767676; + margin-top: 2rem; + margin-bottom: 5rem; +} +@media screen and (min-width: 540px) { + .container { + overflow-x: hidden; + } +} +@media screen and (min-width: 900px) { + .header-text p { + margin-right: 1.5rem; + } + .menuicon { + display: none; + } + nav { + display: flex; + flex-direction: row; + justify-content: flex-end; + } + nav ul { + display: grid; + grid-template-columns: repeat(5, 1fr); + gap: 2rem; + padding: 15px; + margin: 0 3px; + background-color: #fed9e1; + margin-top: 3rem; + width: 95%; + border-radius: 8px; + margin-right: 30px; + margin-bottom: 100px; + } + nav ul li { + background-color: #ffb6c1; + font-size: 1.5rem; + font-weight: 400; + border-radius: 8px; + text-align: center; + } + .hero-article img { + margin: 0; + width: 600px; + height: 407px; + } + + .hero-article { + display: flex; + flex-direction: row-reverse; + height: 50vh; + } + .image-featured { + display: grid; + grid-template-columns: repeat(4, 1fr); + width: 97%; + height: 50vh; + margin-right: 1.2rem; + margin-left: 1.1rem; + } + .aboutme-image { + width: 100%; + height: 60vh; + margin: 0; + } + .about-me { + display: grid; + grid-template-columns: 1fr 1fr; + border-radius: 8px; + height: 60vh; + } + .aboutme p { + margin-left: 2rem; + } +} +footer { + margin-top: 100px; + margin-bottom: 50px; +} diff --git "a/Form-Controls/image/\320\236\320\262\320\265\321\200\321\201\320\260\320\271\320\267.jpeg" "b/Form-Controls/image/\320\236\320\262\320\265\321\200\321\201\320\260\320\271\320\267.jpeg" new file mode 100644 index 00000000..80c5fb91 Binary files /dev/null and "b/Form-Controls/image/\320\236\320\262\320\265\321\200\321\201\320\260\320\271\320\267.jpeg" differ diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 4344b144..40656bc0 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -1,28 +1,100 @@ - - - - My form exercise - - - - - -
-

Product Pick

-
-
-
- - -
- -
- - - - \ No newline at end of file + + + + My form exercise + + + + + +
+

Product Pick

+
+
+

Please Fill In The Information.

+
+
+
+
+ + +
+
+ + +
+ +
+

Choose T-shirt Colour

+
+ + +
+
+ + +
+
+ + +
+
+
+

Size of T-shirt

+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+

Select a Delivery Date

+ + +
+
+ +
+ + +
+
+
+
+ + + diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css index e69de29b..b86a5e07 100644 --- a/Form-Controls/styles.css +++ b/Form-Controls/styles.css @@ -0,0 +1,195 @@ +/* universal styles */ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} +/*body*/ +body { + font-family: garamond, serif; + margin: 0; + padding: 0; + color: #1b1212; + background-color: #f5c9d6; +} +/*h1*/ +h1 { + margin-top: 0.4rem; + text-align: center; + margin-bottom: 1rem; + font-size: 2.5rem; + font-weight: 500; +} +/*h2*/ +h2 { + margin-top: 0.7rem; + margin-bottom: 0.8rem; + margin-left: 3rem; + font-weight: 500; + font-size: 2rem; +} +/*wrapper*/ +.container { + display: grid; + grid-template-columns: 1fr 1fr; + margin-left: 3rem; + gap: 2rem; + padding-left: 2rem; + padding-bottom: 2rem; + align-items: start; +} +/*Form*/ +.form-section { + display: flex; + flex-direction: column; + border: 1px solid transparent; + height: 100vh; + font-size: 1.1rem; +} + +.form-section form { + display: grid; + grid-template-columns: 1fr; + row-gap: 1.5rem; +} + +form h3 { + margin-bottom: 0.5rem; +} +.colour-tshirt h3 { + margin-top: 1rem; + font-size: 1.5rem; + font-weight: 400; +} +.colour-tshirt input { + accent-color: #b76e79; +} + +.size-tshirt h3 { + margin-top: 1rem; + font-size: 1.5rem; + font-weight: 400; +} +.size-tshirt input { + accent-color: grey; +} +.delivery-date h3 { + margin-top: 1rem; + font-size: 1.5rem; + font-weight: 400; +} +.input [type="date"] { + margin-top: 2rem; +} +form label { + margin-bottom: 0.4rem; +} +.firstname { + width: 70%; +} +.lastname { + width: 70%; +} +.email { + width: 70%; +} +.delivery-date { + width: 50%; +} +.button { + width: 30%; + margin-top: 1rem; +} +input[type="text"], +input[type="email"], +input[type="date"], +button { + width: 100%; + padding: 0.5rem; + font-size: 1rem; + border-radius: 8px; +} + +button { + cursor: pointer; + background-color: #b76e79; + color: white; + border: none; +} + +.image-section { + background-image: url(image/Оверсайз.jpeg); + background-position: left center; + background-repeat: no-repeat; + background-size: cover; + background-blend-mode: multiply; + height: 100vh; + max-width: 100%; + width: 100%; + z-index: -1; + border-radius: 2px; + transform: scale(1.11); + opacity: 0.9; +} +/*footer*/ +footer { + text-align: center; + margin-top: 2rem; + margin-bottom: 1rem; + font-weight: 400; + font-size: 1.2rem; + color: #808080; + border-top: 1px solid #ccc; +} +/*media query for screen 768px*/ +@media screen and (max-width: 768px) { + .image-section { + display: none; + } + + body { + background-image: url(image/Оверсайз.jpeg); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + height: 100vh; + color: #1b1212; + } + label { + font-size: 1.3rem; + } + .firstname { + width: 100%; + } + .lastname { + width: 100%; + } + .email { + width: 100%; + } + .delivery-date { + width: 80%; + } + .button { + width: 38%; + } + h3 { + font-size: 1.8rem; + } + footer { + font-size: 1.3rem; + margin: 0; + padding: 0; + bottom: 5rem; + text-align: center; + } +} +/*media query for screen 1000px*/ +@media screen and (max-width: 1000px) { + label { + font-size: 1.3rem; + } + .image-section { + width: 100%; + } +}