diff --git a/INFO-1252 (Front End Dev)/Labs/Lab-5/Lab 5 - Desktop Version - Screenshot.png b/INFO-1252 (Front End Dev)/Labs/Lab-5/Lab 5 - Desktop Version - Screenshot.png new file mode 100644 index 0000000..fe489b2 Binary files /dev/null and b/INFO-1252 (Front End Dev)/Labs/Lab-5/Lab 5 - Desktop Version - Screenshot.png differ diff --git a/INFO-1252 (Front End Dev)/Labs/Lab-5/Lab 5 - Mobile Version - Screenshot.png b/INFO-1252 (Front End Dev)/Labs/Lab-5/Lab 5 - Mobile Version - Screenshot.png new file mode 100644 index 0000000..fa94c77 Binary files /dev/null and b/INFO-1252 (Front End Dev)/Labs/Lab-5/Lab 5 - Mobile Version - Screenshot.png differ diff --git a/INFO-1252 (Front End Dev)/Labs/Lab-5/Lab 5 - Tablet Version - Screenshot.png b/INFO-1252 (Front End Dev)/Labs/Lab-5/Lab 5 - Tablet Version - Screenshot.png new file mode 100644 index 0000000..6888980 Binary files /dev/null and b/INFO-1252 (Front End Dev)/Labs/Lab-5/Lab 5 - Tablet Version - Screenshot.png differ diff --git a/INFO-1252 (Front End Dev)/Labs/Lab-5/images/dinner.jpg b/INFO-1252 (Front End Dev)/Labs/Lab-5/images/dinner.jpg new file mode 100644 index 0000000..91b1cb6 Binary files /dev/null and b/INFO-1252 (Front End Dev)/Labs/Lab-5/images/dinner.jpg differ diff --git a/INFO-1252 (Front End Dev)/Labs/Lab-5/images/dinnerparty.jpg b/INFO-1252 (Front End Dev)/Labs/Lab-5/images/dinnerparty.jpg new file mode 100644 index 0000000..51be395 Binary files /dev/null and b/INFO-1252 (Front End Dev)/Labs/Lab-5/images/dinnerparty.jpg differ diff --git a/INFO-1252 (Front End Dev)/Labs/Lab-5/images/nachos.jpg b/INFO-1252 (Front End Dev)/Labs/Lab-5/images/nachos.jpg new file mode 100644 index 0000000..d626d75 Binary files /dev/null and b/INFO-1252 (Front End Dev)/Labs/Lab-5/images/nachos.jpg differ diff --git a/INFO-1252 (Front End Dev)/Labs/Lab-5/images/smileyface.png b/INFO-1252 (Front End Dev)/Labs/Lab-5/images/smileyface.png new file mode 100644 index 0000000..c101a18 Binary files /dev/null and b/INFO-1252 (Front End Dev)/Labs/Lab-5/images/smileyface.png differ diff --git a/INFO-1252 (Front End Dev)/Labs/Lab-5/images/squares_bg.png b/INFO-1252 (Front End Dev)/Labs/Lab-5/images/squares_bg.png new file mode 100644 index 0000000..e20ec33 Binary files /dev/null and b/INFO-1252 (Front End Dev)/Labs/Lab-5/images/squares_bg.png differ diff --git a/INFO-1252 (Front End Dev)/Labs/Lab-5/index.html b/INFO-1252 (Front End Dev)/Labs/Lab-5/index.html new file mode 100644 index 0000000..6a0c6f9 --- /dev/null +++ b/INFO-1252 (Front End Dev)/Labs/Lab-5/index.html @@ -0,0 +1,111 @@ + + + + + Sandy's Cooking Blog + + + + + + + + + +
+ +

Sandy's Cooking Blog

+ + +
+ + +
+ +
+
+

Dinner Party Ideas

+
By: John
+
Jan 11, 2022
+ dinner party food +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc + mollis, nulla non elementum tincidunt, felis ligula sodales lectus, + sit amet dignissim quam massa sit amet lorem. Aenean lorem risus, + tempus nec, gravida eu. +

+
+ +
+

Weeknight Meals

+
By: Mary
+
Jan 07, 2022
+ nice dinner +

+ Donec cursus faucibus turpis. Quisque auctor est at magna. In + sagittis quam ac ante. Etiam et erat. Morbi sem. Mauris faucibus + elit eu est. Nulla wisi eros, vehicula et, congue quis, consectetuer + non, leo. Phasellus suscipit felis non est. +

+
+ +
+

Superbowl Snacks

+
By: Sandy
+
Jan 06, 2022
+ plate of nachos +

+ Pellentesque habitant morbi tristique senectus et netus et malesuada + fames ac turpis egestas. Morbi condimentum, odio sit amet aliquet + adipiscing, nunc odio fermentum tellus, tincidunt pulvinar leo purus + quis libero. Vivamus quam. +

+
+
+ + +
+

About Sandy

+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum + gravida mattis molestie. Donec in urna ut dolor imperdiet faucibus. + Pellentesque habitant morbi tristique senectus et netus et malesuada + fames ac turpis egestas. Sed luctus a mi et facilisis. Class aptent + taciti sociosqu ad litora torquent per conubia nostra, per inceptos + himenaeos. Ut condimentum purus eu luctus tincidunt. Maecenas + elementum, augue at vulputate ornare, ipsum enim lacinia orci, id + elementum velit enim gravida diam. Aliquam vitae pharetra ex. In hac + habitasse platea dictumst. Curabitur vitae facilisis nulla. Morbi quis + condimentum lorem. Fusce sit amet orci mauris. Donec fringilla lectus + nec efficitur sagittis. Aliquam sed nunc ligula. +

+

+ Quisque tempus ornare est, eu scelerisque sem ultricies et. Sed sed + interdum odio. Suspendisse id lacinia sem. Cras fermentum tortor sit + amet mollis commodo. Morbi facilisis arcu a est dapibus, vitae laoreet + sapien feugiat. Aenean vel viverra arcu, eu pulvinar nulla. + Pellentesque habitant morbi tristique senectus et netus et malesuada + fames ac turpis egestas. Mauris id viverra leo, sed pellentesque est. + Maecenas quis hendrerit dui, tincidunt maximus velit. +

+
+
+ + + + + + \ No newline at end of file diff --git a/INFO-1252 (Front End Dev)/Labs/Lab-5/notes.txt b/INFO-1252 (Front End Dev)/Labs/Lab-5/notes.txt new file mode 100644 index 0000000..9b560b0 --- /dev/null +++ b/INFO-1252 (Front End Dev)/Labs/Lab-5/notes.txt @@ -0,0 +1,22 @@ + This project has all the css code in one giant file and there are + pros and cons of doing this. + + pros: + slightly faster webpage load times and less network traffic. + cons: + you have one big giant css file which can be hard to maintain if the + project is just a little bit larger than this. + + In the industry, we separate the css codes into multiple files. + The css code can easily be thousands of lines in a small real-world projects + and we have no choice but to separate the codes. + By doing this we get the benefit of maintainability. + + When the code is actually sent to the clients/users there are tools + to combine the css(and JavaScript) code into less css file. + By doing this we get the benefit of less network traffic and slightly + faster load times. + + Do not worry about it for now if this does not make sense. + Try different approaches and see how you like it. + You will learn/experience more about this throughout the journey of IWD. \ No newline at end of file diff --git a/INFO-1252 (Front End Dev)/Labs/Lab-5/styles/main.css b/INFO-1252 (Front End Dev)/Labs/Lab-5/styles/main.css new file mode 100644 index 0000000..165a2a3 --- /dev/null +++ b/INFO-1252 (Front End Dev)/Labs/Lab-5/styles/main.css @@ -0,0 +1,192 @@ +/* global settings */ +*, +*::before, +*::after { + box-sizing: inherit; + padding: 0; + margin: 0; +} + +html { + box-sizing: border-box; + font-size: 62.5%; + line-height: 1.6; +} + +body { + font-family: "Roboto", sans-serif; + background: url(../images/squares_bg.png); + color: #686868; +} + +li { + list-style-type: none; +} + +a { + text-decoration: none; +} + +/* Header */ +.header-logo { + display: block; + margin: 2rem auto; + opacity: 30%; + width: 50%; +} + +.header-title { + font-family: "Dancing script"; + font-size: 4.2rem; + text-align: center; + color: teal; +} + +.header-nav { + background-color: #fff; + text-align: center; + border-top: 5px solid teal; + border-bottom: 5px solid teal; + padding: 0.4rem 0; + margin-top: 2.4rem; +} + +.header-nav-list-item { + margin: 0.8rem 0; +} + +.header-nav-list-item a:link, +.header-nav-list-item a:visited { + font-size: 2.4rem; + color: #686868; +} + +.header-nav-list-item a:hover, +.header-nav-list-item a:active { + color: teal; + font-weight: 600; +} + +/* Main */ +.recipes { + margin-top: 2.4rem; +} + +.recipe { + margin: 2rem 1rem; + border: 1px solid grey; + background-color: white; + border-radius: 20px; + padding: 2.4rem 1.2rem; +} + +.recipe:hover { + box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25); + transform: translateY(-10px); + /* we will learn this later. Don't worry about this line*/ +} + +.recipe-title { + font-family: "Dancing script"; + text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25); + font-size: 3.6rem; + color: teal; + margin-bottom: 2.4rem; +} + +.recipe-by, +.recipe-by strong, +.recipe-date { + text-align: right; + font-size: 1.6rem; +} + +.recipe-image { + width: 80%; + border-radius: 50%; + display: block; + margin: 1rem auto; +} + +.recipe-desc { + font-size: 1.8rem; + margin-top: 2.4rem; + padding: 0 1.2rem; +} + +/* About */ +.about { + padding: 2.4rem; + background-color: rgb(82, 82, 82); + opacity: 70%; +} + +.about-title { + font-family: "Dancing script"; + font-size: 4.8rem; + color: #fff; + margin-top: 2rem; + text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.75); +} + +.about-text { + /* use white colour + opacity or grey font color to achieve this result*/ + color: #fff; + opacity: 0.75; + font-size: 1.8rem; + margin: 2rem 0; + text-shadow: 1px 1px 0 black; +} + +.about-logo { + display: none; +} + +/* Footer */ +.footer { + background-color: teal; + color: rgb(207, 207, 207); + text-align: center; + padding: 3.6rem 0; + font-size: 2.4rem; +} + +.footer-name { + color: #fff; + font-size: 2.4rem; +} + +@media (min-width: 820px) { + .header { + position: relative; + } + + .header-logo { + position: absolute; + left: 5%; + top: 33%; + transform: translateY(-50%); + width: 15%; + opacity: 0.3; + z-index: 0; + } + + .header-nav { + position: relative; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + padding: 1rem 0; + } + + .header-nav-list { + display: flex; + justify-content: center; + align-items: center; + gap: 4rem; + width: 100%; + } +} + +@media (min-width: 1200px) {} \ No newline at end of file