diff --git a/images/alexandra-gornago-_B7shfNUXEA-unsplash.jpg b/images/alexandra-gornago-_B7shfNUXEA-unsplash.jpg new file mode 100644 index 000000000..90d84f709 Binary files /dev/null and b/images/alexandra-gornago-_B7shfNUXEA-unsplash.jpg differ diff --git a/images/brooke-lark-V4MBq8kue3U-unsplash.jpg b/images/brooke-lark-V4MBq8kue3U-unsplash.jpg new file mode 100644 index 000000000..0fdbda6ea Binary files /dev/null and b/images/brooke-lark-V4MBq8kue3U-unsplash.jpg differ diff --git a/images/bryam-blanco-nXKWLn8y9qE-unsplash.jpg b/images/bryam-blanco-nXKWLn8y9qE-unsplash.jpg new file mode 100644 index 000000000..d23cfaaa3 Binary files /dev/null and b/images/bryam-blanco-nXKWLn8y9qE-unsplash.jpg differ diff --git a/images/deva-williamson-S2jw81lfrG0-unsplash.jpg b/images/deva-williamson-S2jw81lfrG0-unsplash.jpg new file mode 100644 index 000000000..df7dce9f6 Binary files /dev/null and b/images/deva-williamson-S2jw81lfrG0-unsplash.jpg differ diff --git a/images/heather-ford-Fq54FqucgCE-unsplash.jpg b/images/heather-ford-Fq54FqucgCE-unsplash.jpg new file mode 100644 index 000000000..902f90bae Binary files /dev/null and b/images/heather-ford-Fq54FqucgCE-unsplash.jpg differ diff --git a/images/icons8-facebook-64.png b/images/icons8-facebook-64.png new file mode 100644 index 000000000..af8822a14 Binary files /dev/null and b/images/icons8-facebook-64.png differ diff --git a/images/icons8-hamburger-menu-24.png b/images/icons8-hamburger-menu-24.png new file mode 100644 index 000000000..92f14629b Binary files /dev/null and b/images/icons8-hamburger-menu-24.png differ diff --git a/images/icons8-instagram-64.png b/images/icons8-instagram-64.png new file mode 100644 index 000000000..89ba5fe45 Binary files /dev/null and b/images/icons8-instagram-64.png differ diff --git a/images/icons8-tiktok-64.png b/images/icons8-tiktok-64.png new file mode 100644 index 000000000..de1c957b2 Binary files /dev/null and b/images/icons8-tiktok-64.png differ diff --git a/images/katie-rosario-QNyRp21hb5I-unsplash.jpg b/images/katie-rosario-QNyRp21hb5I-unsplash.jpg new file mode 100644 index 000000000..a7b6383c9 Binary files /dev/null and b/images/katie-rosario-QNyRp21hb5I-unsplash.jpg differ diff --git a/index.html b/index.html index 60b1afe13..370eb1e53 100644 --- a/index.html +++ b/index.html @@ -1,16 +1,89 @@ - - - - - + + + + Responsive Cake webpage + + + + - + - + - - \ No newline at end of file +
+
+ Multicolour cupcake +
+
+

Dreaming of cupcakes? Let us bake it happen for you.

+
+
+ +
+
+ +
+ +
+

Welcome to Oh My Goodies

+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia ipsum + officia eveniet asperiores sit voluptas, quibusdam voluptate velit + nihil quod? Nobis adipisci tenetur numquam cupiditate illo minus + fugit rerum quisquam. Lorem ipsum dolor sit amet consectetur + adipisicing elit. Quia ipsum officia eveniet asperiores sit + voluptas, quibusdam voluptate velit nihil quod? Nobis adipisci + tenetur numquam cupiditate illo minus fugit rerum quisquam. +

+
+ +
+ Birthday Cake +
+
+ +
+ + + + +
+
+ + + + diff --git a/style.css b/style.css index 6de1b3567..b13bdc99e 100644 --- a/style.css +++ b/style.css @@ -1 +1,292 @@ /* Add your styling here */ +/*General Style*/ + +:root { + --melon: #ffa8a9; + --pink: #f786aa; + --magenta: #a14a76; +} + +body, +p, +ul, +a, +li { + margin: 0; + padding: 0; + text-decoration: none; + font-family: "Playfair Display", sans-serif; +} + +body { + background-color: var(--melon); +} + +li { + list-style-type: none; +} + +header { + background-color: var(--magenta); +} + +.header-image { + width: 160px; + padding: 0; + background-size: cover; + margin: 5px; +} + +header img { + width: 100%; + padding: 0; + border: none; + border-radius: 10px; + align-self: center; +} + +/*Mobile version*/ + +.grid { + display: grid; + grid-template-columns: repeat(8, 1fr); + gap: 10px; +} + +nav ul { + display: none; +} + +.header-image { + grid-column: 1/4; + grid-row: span 2; + margin-left: 5px; + margin-bottom: 0; +} + +.header-text { + grid-column: 5/9; + grid-row: 2; + color: white; + padding: 5px; +} + +.hamb-menu { + grid-column: 8; + width: 40px; +} + +.welcome h1 { + grid-column: 2/6; + grid-row: 1; + font-size: 2.5rem; +} + +.welcome-text { + grid-column: 2/8; + grid-row: 2; + margin-bottom: 10px; +} + +.welcome-image { + grid-column: 1/9; + grid-row: 3; + /*width: 540px;*/ +} + +.welcome-image img { + width: 100%; +} + +.gallery { + /*width: 500px;*/ + grid-column: 1/9; + margin: 10px auto; +} + +.gallery img { + width: 100%; + grid-column: span 4; + align-self: center; + border-radius: 20px; +} + +footer { + background-color: var(--pink); +} + +.socialmedia-icons { + grid-column: 4/7; + grid-row: 1; + margin-top: 10px; +} + +.socialmedia-icons img { + width: 40px; +} + +footer p { + grid-column: 3/9; + grid-row: 2; + margin-bottom: 10px; + margin-left: 15px; +} + +/*Tablet version 540px to 900px*/ + +@media screen and (min-width: 540px) { + .grid { + display: grid; + grid-template-columns: repeat(12, 1fr); + gap: 10px; + } + + .header-text { + grid-column: 5/13; + font-size: large; + } + + .hamb-menu { + grid-column: 12; + } + + .welcome-text { + grid-column: 7/13; + grid-row: 2; + margin-right: 15px; + text-align: right; + padding-top: 25px; + font-size: large; + } + + .welcome-image { + grid-column: 1/7; + grid-row: 2; + margin: 10px; + } + + .welcome-image img { + border-radius: 20px; + } + + .gallery { + /*width: 500px;*/ + grid-column: 1/13; + margin: 10px 10px; + } + + .gallery img { + width: 100%; + grid-column: span 3; + align-self: center; + border-radius: 20px; + } + + .socialmedia-icons { + grid-column: 6/11; + grid-row: 1; + margin-top: 10px; + } + + footer p { + grid-column: 5/12; + grid-row: 2; + margin-bottom: 10px; + margin-left: 15px; + } +} + +/*Desktop version min 900 px*/ + +@media screen and (min-width: 900px) { + .header-image { + grid-row: 1; + } + + .header-text { + grid-column: 7/13; + grid-row: 1; + font-size: larger; + padding-top: 15px; + align-self: center; + } + + .hamb-menu { + display: none; + } + + .welcome h1 { + grid-column: 9/13; + grid-row: 1; + font-size: 2rem; + text-align: center; + align-self: center; + margin-right: 15px; + margin-top: 20px; + height: fit-content; + } + + .welcome-image { + grid-column: 1/8; + grid-row: span 2; + } + + .welcome-text { + grid-column: 9/13; + grid-row: 2; + margin-top: 15px; + } + + .welcome-text p { + font-size: large; + } + + nav ul { + display: grid; + grid-column: 5/13; + align-items: center; + text-align: center; + } + + .one { + grid-column: 5; + } + .two { + grid-column: 6; + } + .three { + grid-column: 7; + } + .four { + grid-column: 8; + } + .five { + grid-column: 9; + } + + li { + padding-top: 15px; + padding-bottom: 20px; + } + + a { + color: black; + font-size: larger; + } + + a:hover { + font-size: x-large; + text-decoration: underline 2px; + text-decoration-color: var(--magenta); + transition: 1s; + } + + .socialmedia-icons img { + padding-left: 10px; + } + + footer p { + grid-column: 5/12; + padding-left: 90px; + } +}