diff --git a/img/cake1.jpg b/img/cake1.jpg new file mode 100644 index 000000000..ccc75b1c2 Binary files /dev/null and b/img/cake1.jpg differ diff --git a/img/cake2.jpg b/img/cake2.jpg new file mode 100644 index 000000000..2be16740a Binary files /dev/null and b/img/cake2.jpg differ diff --git a/img/cake3.jpg b/img/cake3.jpg new file mode 100644 index 000000000..0c329c75b Binary files /dev/null and b/img/cake3.jpg differ diff --git a/img/cake4.jpg b/img/cake4.jpg new file mode 100644 index 000000000..48bae6082 Binary files /dev/null and b/img/cake4.jpg differ diff --git a/img/cake5.jpg b/img/cake5.jpg new file mode 100644 index 000000000..87e031bb3 Binary files /dev/null and b/img/cake5.jpg differ diff --git a/img/cake6.jpg b/img/cake6.jpg new file mode 100644 index 000000000..dd30e6f29 Binary files /dev/null and b/img/cake6.jpg differ diff --git a/img/cupcake.png b/img/cupcake.png new file mode 100644 index 000000000..e3d72cd61 Binary files /dev/null and b/img/cupcake.png differ diff --git a/index.html b/index.html index 60b1afe13..6ae232f7b 100644 --- a/index.html +++ b/index.html @@ -7,10 +7,102 @@ Responsive Cake webpage + + + - + +
+
+ +
+
+

Cake Factory

+

"The best cakes in town delivered to your door"

+
+ +
+
+
+

welcome

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum, tellus vitae convallis sodales, diam nunc convallis mi, et scelerisque massa mauris rhoncus sem. Integer placerat mi libero, nec commodo sem vulputate a. Sed sit amet aliquam quam. Donec nunc purus, pharetra et ipsum et, bibendum bibendum lectus. Vivamus nec tellus eleifend, porttitor nunc eu, aliquet erat. Aenean tincidunt vel dui nec consectetur. Nulla vel mi est. Vestibulum a tempor mauris, non cursus justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam quis massa quis diam iaculis porttitor id eget odio. Donec pharetra consectetur tincidunt. Morbi sit amet magna odio. Nam ut arcu sem. Ut pulvinar sem quis libero condimentum dictum. +

+

+ Curabitur eget eleifend dolor. Donec viverra sem dolor, sit amet tincidunt purus imperdiet in. Aenean placerat turpis eu mi tristique, a consequat magna mollis. Ut eros erat, pulvinar blandit euismod a, vestibulum tincidunt nulla. Mauris ac felis ut purus placerat tempus venenatis non orci. Phasellus at urna nisi. Suspendisse potenti. Integer ut dui eget orci euismod ornare eu nec eros. Praesent nec nulla eget tortor facilisis porttitor id ut eros. Vestibulum pharetra ut velit mattis maximus. Morbi id lorem ante. Sed ultricies, sapien eget pharetra feugiat, odio urna ultrices sem, et aliquet turpis orci vel augue. Praesent consequat dictum risus congue pellentesque. +

+

+ Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent sed pulvinar nulla. Curabitur placerat dui et ullamcorper lacinia. Nulla elementum imperdiet leo, non rhoncus metus finibus in. Morbi maximus justo a dui molestie, sit amet mattis metus efficitur. Sed rhoncus interdum lorem, id sollicitudin nulla rutrum a. Pellentesque suscipit convallis ultricies. Proin pellentesque sodales fringilla. Pellentesque maximus, mi in aliquam convallis, nibh augue ullamcorper urna, vitae hendrerit felis magna a libero. +

+
+
+ strawberry cake with a strawberry, blueberry and raspberry on top +
+ 3 mini layered cakes with strawberry and butter icing + bowl full of macarons + chocolate cupcakes + cake with chocolate shards and decorated strawberries on top +
+ + \ No newline at end of file diff --git a/style.css b/style.css index 6de1b3567..c15962973 100644 --- a/style.css +++ b/style.css @@ -1 +1,344 @@ /* Add your styling here */ + +body { + font-family: 'Comfortaa', cursive; + -webkit-font-smoothing: antialiased; + +} + +:root { + --dark: #3A3E3B; + --gold: #F0B945; + --red: #9D556A; + --taupe: #BAAAAC; + --light: #b5b8c0d8; +} + +h1,h2,h3,h4,h5,h6 { + margin-top: 0; + margin-bottom: 0; +} + +html, body, div { + margin: 0; + padding: 0; + border: 0 none; +} + +a { + color: var(--red); +} + +/* Body */ + +.body-container { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: auto auto auto; +} + +/* Header */ + +.header-container { + grid-column: 1 / -1; + grid-row: 1 / 2; + display: grid; + grid-template-columns: repeat(10, 1fr); + grid-template-rows: repeat(5, 1fr); + background-color: var(--taupe); +} + +.header-logo-container { + grid-column: 1 / 4; + grid-row: 1 / -1; +} + +.header-logo { + width: 90%; + padding: 10%; +} + +.header-title-container { + grid-column: 5 / -1; + grid-row: 3 / -1; + text-align: center; +} + +.nav-container { + position: fixed; + right: 1rem; + background-color: var(--gold); + opacity: 85%; +} + +.nav-link-container { + display: none; + opacity: 85%; + background-color: var(--dark); + height: 100vh; +} + +.nav-list > li { + padding: 1rem; +} + +[for="nav-checkbox"] { + display: block; + text-align: end; + padding: 1rem; + margin-bottom: -1rem; +} + +.text-after { + display: none; + color: var(--red); +} + +#nav-checkbox { + display: none; +} + +/* Menu Checkbox Settings */ + +#nav-checkbox:checked ~ .nav-link-container { + display: block; +} + +#nav-checkbox:checked ~ label .text-before { + display: none; +} + +#nav-checkbox:checked ~ label .text-after { + display: inline; +} + + +/* Main Section */ + +.main-container { + grid-column: 1 / -1; + grid-row: 2 / 3; + display: grid; + padding: 1rem; + grid-template-columns: repeat(8, 1fr); + grid-template-rows: repeat(4, auto); + gap: 1.2rem; + background-color: var(--light); +} + +.grid-article { + grid-column: 1 / -1; + grid-row: 1 / 2; +} + +.img-span-container { + grid-column: 1 / -1; + grid-row: 2 / 3; +} + +.img-span { + width: 100%; + height: 100%; + object-fit: cover; +} + +.img-grid-1, .img-grid-2, .img-grid-3, .img-grid-4 { + width: 100%; + height: 100%; + object-fit: cover; +} + +.img-grid-1 { + grid-column: 1 / 5; + grid-row: 3 / 4; +} + +.img-grid-2 { + grid-column: 5 / -1; + grid-row: 3 / 4; +} + +.img-grid-3 { + grid-column: 5 / -1; + grid-row: 4 / -1; +} + +.img-grid-4 { + grid-column: 1 / 5; + grid-row: 4 / -1; +} + +/* Footer */ + +.footer { + grid-column: 1 / / -1; + grid-row: 3 / -1; + padding: 1rem; + background-color: var(--taupe); +} + + +/* Utility Classes */ + +.no-bullet { + list-style: none; + padding-left: 0; +} + +.border-tb { + border-top: 0.3rem solid var(--red); + border-bottom: 0.3rem solid var(--dark); +} + +.center-text { + text-align: center; +} + +.text-justify { + text-align: justify; +} + + +/* Tablet View */ + +@media (min-width: 540px) { + + /* Tablet Header Section */ + + .header-logo-container { + grid-column: 1 / 4; + grid-row: 2 / -1; + } + + .header-title-container { + grid-column: 4 / -1; + grid-row: 2 / -1; + align-self: center; + } + + /* Tablet Main Section */ + + .grid-article { + column-count: 2; + } + + .img-grid-1 { + grid-column: 1 / 3; + grid-row: 3 / 4; + } + + .img-grid-2 { + grid-column: 3 / 7; + grid-row: 3 / 4; + } + + .img-grid-3 { + grid-column: 7 / -1; + grid-row: 3 / 4; + } + + .img-grid-4 { + grid-column: 1 / -1; + grid-row: 4 / -1; + } + + + + /* Tablet Footer Section */ + + .footer-links { + display: flex; + justify-content: space-around; + } + +} + +/* Desktop View */ + +@media (min-width: 900px) { + + /* Desktop Header Section */ + +.nav-link-container { + height: auto; + display: block; +} + +.nav-list { + display: flex; + justify-content: space-around; +} + + +.header-title-container { + grid-column: 4 / -1; + grid-row: 3 / 4; +} + +.nav-container { + grid-column: 1 / -1; + grid-row: 4 / -1; + position: static; + background-color: transparent; +} + +.header-logo-container { + grid-column: 1 / 3; + grid-row: 1 / 4; +} + + /* cancel menu checkbox settings */ + + [for="nav-checkbox"] { + display: none; + } + + /* Desktop Main Section */ + + .main-container { + padding: 3rem; + } + + .grid-article { + grid-column: 2 / -1; + grid-row: 1 / 2; + } + + .img-span-container { + grid-column: 1 / 2; + grid-row: 1 / 2; + } + + + .img-grid-1 { + grid-column: 1 / 3; + grid-row: 3 / -1; + } + + .img-grid-2 { + grid-column: 3 / 5; + grid-row: 3 / -1; + } + + .img-grid-3 { + grid-column: 5 / 7; + grid-row: 3 / -1; + } + + .img-grid-4 { + grid-column: 7 / -1; + grid-row: 3 / -1; + } + + .grid-article { + column-count: 3; + } + + /* Desktop Footer Section */ + + .footer-links { + column-count: 3; + } + +} +