diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 000000000..afa57df1a Binary files /dev/null and b/.DS_Store differ diff --git a/index.html b/index.html index 60b1afe13..6ac147126 100644 --- a/index.html +++ b/index.html @@ -7,10 +7,85 @@ Responsive Cake webpage + + + + + + + + + +
+
+ +
+
+ +
+ +
+ +
+ +
+ +
+
+
+
+ profiteroles +
Backed cup cake
+
+
+ fruit tart +
Rainbow Coverd Cake
+
+
+ sacher torte +
Cake Wth strowberry topping
+
+
+ millefoglie +
Maccron on cake
+
+
+ + \ No newline at end of file diff --git a/style.css b/style.css index 6de1b3567..3822986b5 100644 --- a/style.css +++ b/style.css @@ -1 +1,137 @@ /* Add your styling here */ + + +/*Header and logo stlye*/ + +body { + padding: 0; + margin: auto; + max-width: 1000px; + background-color: white; +} + +.header { + display: flex; + list-style: none; + flex-direction: row; + justify-content: space-between; + align-items: center; + background-color: rgb(255, 249, 240); +} + +ul { + display: flex; + list-style-type: none; + flex-direction: column; + justify-content: space-around; + margin-left: 50px; +} + +.logo { + border-radius: 50%; + width: 200px; +} + +.call { + font-size: 20px; + margin-bottom: 20px; + font-weight: bold; +} + +@media screen and (min-width: 900px) { + body { + background: rgb(218, 226, 238); + } +} + + +/*navba& liknd-buttons styling*/ + +.nav-buttons { + display: flex; + flex-direction: row; + padding: 3%; + margin: 0; + justify-content: space-between; + background-color: rgb(174, 123, 240); + border-radius: 2%; +} + +.navigation { + border-radius: 2%; +} + +.buttons li:hover { + color: #021e24; + font-weight: bold; +} + + +/* information section style*/ + +aside { + width: 40%; +} + +.information { + display: flex; + margin-top: 10px; +} + +.image1 { + max-width: 100%; + height: 300px; + border-radius: 2%; +} + + +/* Cakes styles */ + +.cakes { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + background-color: rgb(174, 123, 240); + color: #0a3f35; + border-radius: 1%; + margin-bottom: 20px; +} + +.cake { + text-align: center; + max-width: 100%; + height: 200px; + border-radius: 2px; +} + +.cake:hover { + background-color: rgb(214, 196, 214); +} + +.cake-img { + width: auto; + max-width: 350px; + height: auto; + max-height: 100%; +} + +figcaption { + margin: 1rem; +} + + +/* footer*/ + +.footer-item { + display: flex; + flex-direction: row; + justify-content: space-between; + margin-top: 100px; + padding-left: 20px; + padding-right: 20px; +} + +footer { + background-color: rgb(245, 237, 237); +} \ No newline at end of file