diff --git a/css/style.css b/css/style.css new file mode 100644 index 000000000..d66bfb084 --- /dev/null +++ b/css/style.css @@ -0,0 +1,258 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; + text-decoration: none; + list-style: none; + font-family: "Bebas Neue", cursive; + font-family: "Roboto", sans-serif; +} + +body { + margin: 0; + font-family: Helvetica, sans-serif; + background-color: #f4f4f4; +} + +a { + color: #000; +} + +.navbar { + width: 100%; + height: 150px; + background-color: #b6ad90; + display: flex; + justify-content: space-between; +} + +.logo { + margin: 20px 0px; + cursor: pointer; + transition: 0.5s; +} + +img:hover { + transform: translateY(-10px); +} + +.bar { + margin: 10px 10px; + font-size: 30px; + text-align: right; +} + +.ads { + font-size: 15px; + width: 70%; + text-align: right; + margin: 50px 0px 0px 60px; + font-style: italic; +} + +.menu { + list-style: none; + display: flex; + justify-content: end; + margin: 0; +} + +.row { + background-color: #fff; + box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.1); + position: absolute; + width: 100%; +} + +.row ul { + margin: 0; + padding: 0; + list-style: none; + overflow: hidden; + background-color: #fff; +} + +.row li a { + display: block; + padding: 20px 15px; + border-right: 2px solid #f4f4f4; + text-decoration: none; +} + +.row li a:hover, +.row .menu-btn:hover { + background-color: #f4f4f4; +} + +.row .menu { + clear: both; + max-height: 0; + transition: max-height 0.2s ease-out; +} + +.cake-3 { + height: 60vh; + width: 100%; + object-fit: cover; +} + +h1 { + font-size: 40px; +} + +p { + font-size: 20px; + font-weight: lighter; + margin-top: 30px; +} + +img { + height: 20vh; + width: 100%; + object-fit: cover; + border: 3px #b6ad90 solid; +} + +.content { + margin: 100px; + display: grid; + position: relative; + max-width: 100%; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + grid-template-rows: minmax(200px, auto); + grid-gap: 10px; +} + +.content .details { + padding: 10px; + place-items: center; + text-align: right; + transition: 0.5s; +} + +.content .details:hover { + transform: translateY(-10); +} + +.content .details:nth-child(1) { + grid-column: span 2; +} + +.content .details:nth-child(2) { + grid-column: span 2; +} + +.content .details:nth-child(3) { + grid-column: span 1; +} + +.content .details:nth-child(4) { + grid-column: span 1; +} + +.content .details:nth-child(5) { + grid-column: span 1; +} + +.content .details:nth-child(6) { + grid-column: span 1; +} + +.footer { + background-color: #b6ad90; + padding: 10px 0px; + margin-top: 60px; + transition: 0.5s; +} + +.logos-footer { + font-size: 15px; + gap: 10px; + color: #020202; + margin: 10px 20px; +} + +i { + gap: 20px; + margin: 5px; +} + +.copyrights { + text-align: center; + margin: 20px; + color: #020202; +} + +@media (min-width: 90px) { + .container { + margin-top: 70px; + } + + .row .menu { + clear: none; + float: right; + max-height: none; + } + + .row ul { + margin: 0px 20px; + } + + .logo-menu { + visibility: hidden; + } + + .logos-footer { + display: flex; + margin-left: 80vh; + } + + .copyrights { + text-align: center; + margin-left: 100px; + } +} + +@media (max-width: 450px) { + .content { + object-fit: cover; + margin: 0px; + + max-width: 100%; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + grid-template-rows: minmax(auto, auto); + } + + .logo-menu { + visibility: visible; + } + + .logos-footer { + display: block; + font-size: 15px; + gap: 10px; + color: #020202; + margin: 10px 20px; + } + + .row .menu { + visibility: hidden; + } + + p { + font-size: 15px; + margin-top: 5px; + } + .content .details { + text-align: left; + + } + + h1 { + font-size: 30px; + } + + .content .details:nth-child(2) { + order: -1; + } +} diff --git a/images/cake2.avif b/images/cake2.avif new file mode 100644 index 000000000..86abca941 Binary files /dev/null and b/images/cake2.avif differ diff --git a/images/cake3.avif b/images/cake3.avif new file mode 100644 index 000000000..b6e9f770f Binary files /dev/null and b/images/cake3.avif differ diff --git a/images/cake4.jpg b/images/cake4.jpg new file mode 100644 index 000000000..f025af51d Binary files /dev/null and b/images/cake4.jpg differ diff --git a/images/cake5.jpg b/images/cake5.jpg new file mode 100644 index 000000000..18edbc821 Binary files /dev/null and b/images/cake5.jpg differ diff --git a/images/cake6.jpg b/images/cake6.jpg new file mode 100644 index 000000000..a19ac4777 Binary files /dev/null and b/images/cake6.jpg differ diff --git a/index.html b/index.html index 60b1afe13..8a550ccec 100644 --- a/index.html +++ b/index.html @@ -3,14 +3,69 @@ + - - Responsive Cake webpage - + Cake page + + + + + - + +
+ +
+ + +
+
+
+
+
+
+ +
+

Welcome

+

+ With a wide selection of cakes, we are certain we have the perfect cake to match + your tastes. For birthdays or general gatherings, our celebration cakes are perfect to get your + attendees in the mood. +

+
+
+
+
+
+
+ +
+ + \ No newline at end of file diff --git a/style.css b/style.css deleted file mode 100644 index 6de1b3567..000000000 --- a/style.css +++ /dev/null @@ -1 +0,0 @@ -/* Add your styling here */