diff --git a/design/icons/1189129.png b/design/icons/1189129.png new file mode 100644 index 000000000..fe548da49 Binary files /dev/null and b/design/icons/1189129.png differ diff --git a/design/icons/Facebook_icon.svg.png b/design/icons/Facebook_icon.svg.png new file mode 100644 index 000000000..7933d5a20 Binary files /dev/null and b/design/icons/Facebook_icon.svg.png differ diff --git a/design/icons/Instagram_logo_2016.svg.png b/design/icons/Instagram_logo_2016.svg.png new file mode 100644 index 000000000..f0ba5948d Binary files /dev/null and b/design/icons/Instagram_logo_2016.svg.png differ diff --git a/design/images/photo-1516054575922-f0b8eeadec1a.avif b/design/images/photo-1516054575922-f0b8eeadec1a.avif new file mode 100644 index 000000000..4e56e23fd Binary files /dev/null and b/design/images/photo-1516054575922-f0b8eeadec1a.avif differ diff --git a/design/images/photo-1535141192574-5d4897c12636.avif b/design/images/photo-1535141192574-5d4897c12636.avif new file mode 100644 index 000000000..c92ac6ea1 Binary files /dev/null and b/design/images/photo-1535141192574-5d4897c12636.avif differ diff --git a/design/images/photo-1559620192-032c4bc4674e.avif b/design/images/photo-1559620192-032c4bc4674e.avif new file mode 100644 index 000000000..288135def Binary files /dev/null and b/design/images/photo-1559620192-032c4bc4674e.avif differ diff --git a/design/images/photo-1560180474-e8563fd75bab.avif b/design/images/photo-1560180474-e8563fd75bab.avif new file mode 100644 index 000000000..a55a6458d Binary files /dev/null and b/design/images/photo-1560180474-e8563fd75bab.avif differ diff --git a/design/images/photo-1562777717-dc6984f65a63.avif b/design/images/photo-1562777717-dc6984f65a63.avif new file mode 100644 index 000000000..7c4437db6 Binary files /dev/null and b/design/images/photo-1562777717-dc6984f65a63.avif differ diff --git a/design/images/photo-1595272568891-123402d0fb3b.avif b/design/images/photo-1595272568891-123402d0fb3b.avif new file mode 100644 index 000000000..a848b8a76 Binary files /dev/null and b/design/images/photo-1595272568891-123402d0fb3b.avif differ diff --git a/index.html b/index.html index 60b1afe13..266f2f718 100644 --- a/index.html +++ b/index.html @@ -6,11 +6,72 @@ Responsive Cake webpage - + +
+
+ + cake + +

+ Sugar Bliss: Indulge in Heavenly Delights at Our Cake Shop +

+ +
+ +
+
+
+ cake-image +
+
welcome
+
+ Experience pure bliss at Sugar Bliss, where our heavenly cakes are crafted with love and passion. From classic favorites to innovative creations, our cakes cater to every palate and occasion. Indulge in velvety chocolate or fruity delights, or explore our specialty cakes that are true works of art. We also offer gluten-free, vegan, and sugar-free options. Pair your cake with premium coffees and teas for the ultimate pleasure. Our friendly staff will assist you in finding the perfect treat. Visit our cake shop today and indulge in pure bliss. +
+
+
+
+ cake-image +
+
+ cake-image +
+
+ cake-image +
+
+ cake-image +
+
+
+ +
\ No newline at end of file diff --git a/style.css b/style.css index 6de1b3567..b592ac025 100644 --- a/style.css +++ b/style.css @@ -1 +1,264 @@ -/* Add your styling here */ + +html, body { + box-sizing: border-box; + background-color: #ffc8dd; + margin: 0px; + } + + + /*header*/ + + .header{ + background-color: #cdb4db; + } + + + header > p{ + color: rgb(211, 55, 225); + cursor: pointer; + font-size: 1.5rem; + margin-left:1%; + width: 100%; + } + header > img{ + + width: 20%; + height: 100%; + } + + /*navigation*/ + + .nav{ + background-color: rgb(242, 249, 249); + margin-left: 0.5rem; + margin-right: 0.5rem; + margin-top: 0.5rem; + border: solid; + border-radius: 0rem; + border-color: #eadff3; + margin-bottom: 1rem; + + } + .ul-nav{ + list-style-type: none; + border-radius: 0rem; + } + .ul-nav a { + text-decoration:none; + border-radius: 0rem; + + } + .nav > ul{ + display: flex; + flex-direction: row; + justify-content: flex-end; + margin-right: 20%; + } + .n-link{ + border: solid; + border-color: rgb(242, 249, 249); + padding: 0.5rem; + background-color: #eadff3; + border-radius: 1rem; + + } + a:hover{ + background-color: aqua; + } + + /*main*/ + + .cake-1{ + width: 70%; + border-radius: 2rem; + margin-left: 2rem; + height:80%; + } + .section-1{ + font-size: 2rem; + color: rgb(31, 37, 82); + height: 20%; + } + .section-2{ + margin-top: 15%; + font-size: 1.5rem; + margin-right: 5%; + color: rgb(31, 37, 82); + height: 20%; + } + + .main-2{ + margin-top: 1rem; + } + .cake-a{ + width: 90%; + height: 90%; + } + .cake-b{ + width: 90%; + height: 90%; + } + .cake-c{ + width: 90%; + height: 90%; + } + .cake-d{ + width: 90%; + height: 90%; + } + + /*footer*/ + + .footer { + background-color: #614178; + } + .section-a{ + margin-top: 5%; + } + .icon-a{ + width: 80%; + } + .section-b{ + margin-top: 12%; + margin-left: 15%; + } + .icon-b{ + width: 38%; + } + + .section-c{ + margin-top: 10%; + } + .icon-c{ + width: 30%; + } + .section-d{ + margin-top: 10%; + color: aqua; + cursor: pointer; + font-size: 1.3rem; + width: 100%; + } + + /*grid*/ + + /*header*/ + + .header { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: auto; + } + + header >p{ + justify-content: end; + align-self: self-end; + } + + /*main*/ + + .main-1{ + display: grid; + grid-template-columns: repeat(6,1fr); + grid-template-rows: 1fr 1fr ; + + } + .article-1{ + grid-column: 1/4; + grid-row: 1/3; + } + .section-1{ + grid-column: 4; + grid-row: 1; + } + .section-2{ + grid-column: 4/6; + grid-row: 1/3; + } + .main-2{ + display: grid; + grid-template-columns: repeat(6,1fr); + grid-template-rows: 1fr; + } + .article-a{ + grid-column: 2; + } + .article-b{ + grid-column: 3; + } + .article-c{ + grid-column: 4; + } + .article-d{ + grid-column: 5; + } + + /*footer*/ + + .footer { + display: grid; + grid-template-columns: repeat(5,1fr); + grid-template-rows: 1fr 1fr; + } + .section-a{ + grid-column: 2; + width: 40%; + } + .section-b{ + grid-column: 3; + } + .section-c{ + grid-column: 4; + } + .section-d{ + grid-column: 3; + grid-row: 2; + } + + /*media query*/ + + @media only screen and (max-width:450px){ + + .header{ + width: 100%; + height: 40%; + } + .header >p{ + margin-left: 0.1rem; + } + .cake-1{ + margin-top: 15%; + } + .section-1{ + font-size: 1rem; + margin-top: 25%; + + + } + .section-2{ + margin-top: 30%; + font-size: 0.5rem; + } + nav{ + display: none; + } + .icon-a{ + width:40%; + } + .icon-b{ + width:2.3rem; + margin-left: 2rem; + } + .icon-c{ + width:2rem; + margin-top: 0.6rem; + margin-left: 1rem; + } + + } + + @media only screen and (max-width:900px) { + .contaner{ + width: 100%; + } + } \ No newline at end of file