diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..a3bb5573 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,26 @@ +{ + "cSpell.words": [ + "adipisicing", + "amet", + "assumenda", + "Catalunya", + "consectetur", + "deserunt", + "dolorum", + "eaque", + "elit", + "ipsa", + "itaque", + "maxime", + "necessitatibus", + "nesciunt", + "Obcaecati", + "officia", + "recusandae", + "Specialities", + "unde", + "velit", + "Veniam", + "veritatis" + ] +} diff --git a/Cakes-Co/css/general.css b/Cakes-Co/css/general.css new file mode 100644 index 00000000..8859635d --- /dev/null +++ b/Cakes-Co/css/general.css @@ -0,0 +1,108 @@ +/* General styling */ +:root { + /* Main colors */ + --main-color: #fae5d3; + --main-light-color: #fdf2e9; + --main-color-2: #e67e22; + --cta-color: #45260a; + + /* Shades */ + --shade-dark: #eb984e; + --shade-light: #ddd; + + /* Greys */ + --grey-color-1: #888; + --grey-color-2: #555; + --grey-color-3: #333; + --grey-color-4: #767676; /* (Lightest grey allowed on #fff) */ + --grey-color-5: #6f6f6f; /* (Lightest grey allowed on #fdf2e9) */ +} + +/* Box shadow +box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.15); +box-shadow: 0 0.4rem 0.6rem rgba(0, 0, 0, 0.1); + */ + +/* Reset padding and margin for all elements and set box-sizing to border-box */ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +/* set default font size to 10px */ +html { + font-size: 62.5%; +} + +/* Default for body */ +body { + font-family: "Rubik", sans-serif; + line-height: 1; + font-weight: 400; + color: var(--grey-color-4); +} + +/* container sizing */ +.container { + max-width: 130rem; + padding: 0 3.2rem; + margin: 0 auto; +} + +/* Headings sizing */ +.heading-primary, +.heading-secondary, +.heading-tertiary { + font-weight: 700; + color: var(--grey-color-5); + letter-spacing: -0.5px; +} + +.heading-primary { + font-size: 5.2rem; + line-height: 1.05; + margin-bottom: 2.4rem; +} + +.heading-secondary { + font-size: 4rem; + line-height: 1.2; + margin-bottom: 2rem; +} + +hr { + max-width: 50%; + margin: 5rem auto; + opacity: 0.4; +} + +/* select list first option styling */ +select { + font-style: italic; +} + +select:focus option, +select option { + font-style: normal; +} + +select:valid { + font-style: normal; +} + +/* Button styling */ +.btn, +.btn:link, +.btn:visited { + display: inline-block; + text-decoration: none; + font-size: 2rem; + font-weight: 600; + font-family: inherit; + border: none; + border-radius: 0.9rem; + padding: 1.6rem 3.2rem; + cursor: pointer; + box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.1); +} diff --git a/Cakes-Co/css/media-queries.css b/Cakes-Co/css/media-queries.css new file mode 100644 index 00000000..bdce26ca --- /dev/null +++ b/Cakes-Co/css/media-queries.css @@ -0,0 +1,136 @@ +@media only screen and (max-width: 1024px) { + .main-nav-list { + font-size: 1.8rem; + } + + .hero-heading { + line-height: 1.2em; + font-size: 3.4rem; + margin-bottom: 1.2rem; + } + + .hero-description { + font-size: 1.8rem; + line-height: 1.4em; + } +} + +@media only screen and (max-width: 960px) { + .cta-form { + grid-template-columns: 1fr; + } +} + +@media only screen and (max-width: 800px) { + /* nav to menu */ + .main-nav { + padding: 0; + height: 0; + } + + .main-nav-list { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background-color: var(--main-light-color); + flex-direction: column; + align-items: center; + justify-content: center; + z-index: 999; + } + + .main-nav-list li { + margin: 1rem 0; + } + + .menu-icon { + display: block; + position: fixed; + top: 5rem; + right: 2rem; + z-index: 1000; + } + + /* When the checkbox is checked, show the menu */ + .menu-toggle:checked + .menu-icon + .main-nav-list { + display: flex; + } + /* nav to menu end */ + + .site-description { + font-size: 2.2em; + max-width: 60%; + line-height: 1.2; + margin: 0 2.5rem; + } + .featured-heading { + margin-bottom: 0; + } + .featured-section { + grid-template-columns: repeat(2, 1fr); + padding: 2.4rem; + } + .section-cta { + padding: 3rem 0 5.6rem 0; + } + .cta-text { + line-height: 1.4; + } + .cta { + grid-template-columns: 1fr; + } + .cta-text-box { + padding: 3.2rem; + } + .cta-img-box { + height: 24rem; + grid-row: 1; + } + .footer { + grid-template-columns: repeat(2, 1fr); + row-gap: 2.4rem; + } +} + +/* Mobile devices */ +@media only screen and (max-width: 600px) { + .site-description { + font-size: 1.8em; + max-width: 60%; + line-height: 1.2; + } + .hero-section { + grid-template-columns: 1fr; + } + .hero-content { + order: -1; + } + .hero-heading { + line-height: 1.2em; + font-size: 2.8rem; + margin-bottom: 1.2rem; + } + .hero-image { + border-radius: 0 0 0.5rem 0.5rem; + } + .footer { + grid-template-columns: 1fr; + gap: 5rem; + } + .footer-heading { + font-size: 1.6rem; + font-weight: 500; + margin-bottom: 1.5rem; + } + .address { + margin-bottom: 1.2rem; + } + .contacts { + font-size: 1.4rem; + font-style: normal; + line-height: 1.2; + } +} diff --git a/Cakes-Co/css/style.css b/Cakes-Co/css/style.css new file mode 100644 index 00000000..c0604b39 --- /dev/null +++ b/Cakes-Co/css/style.css @@ -0,0 +1,342 @@ +/* Styling */ +.logo-section { + display: flex; + justify-content: space-between; + align-items: center; + background-color: var(--main-color); + height: 14rem; + padding: 0 5rem; + margin-bottom: 1.6rem; +} + +.logo { + height: 12rem; +} + +.site-description { + font-size: 2.6em; + color: var(--main-color-2); + font-weight: 700; + text-transform: capitalize; + text-shadow: 0 0.4rem 0.6rem rgba(0, 0, 0, 0.2); + margin: 0 2rem; +} + +/* ******* */ +/* Nav Bar */ +/* ******* */ + +.main-nav { + max-width: 120rem; + width: 90%; + display: flex; + align-items: center; + background-color: var(--main-light-color); + height: 3rem; + padding: 2.5rem; + margin: 0 auto; + border-radius: 0.5rem; + box-shadow: 0.1rem 0.4rem 0.8rem rgba(0, 0, 0, 0.1); +} + +.main-nav-list { + font-size: 2rem; + list-style-type: none; + width: 100%; + display: flex; + justify-content: end; + gap: 3rem; +} + +.main-nav-link:link, +.main-nav-link:visited { + background-color: var(--main-color); + padding: 0.3rem 2.5rem; + border-radius: 0.5rem; + color: var(--main-color-2); + font-weight: 500; + text-transform: uppercase; + text-decoration: none; + display: inline-block; + transition: transform 0.1s ease; +} + +.main-nav-link:hover, +.main-nav-link:active { + transform: scale(1.05); + color: var(--grey-color-2); +} + +.menu-icon { + display: none; + font-size: 2.4rem; + font-weight: 500; + cursor: pointer; + color: var(--cta-color); + background-color: var(--main-color-2); + padding: 1rem; + border: none; + border-radius: 5px; +} + +.menu-toggle { + display: none; +} + +/* ************ */ +/* Hero section */ +/* ************ */ + +.hero-section { + display: grid; + grid-template-columns: 1fr 1fr; + margin-bottom: 8rem; + background-color: var(--main-light-color); + border-radius: 0 0.5rem 0.5rem 0; + margin-top: 3.2rem; +} + +.hero-image-container { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; +} + +.hero-image { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 0.5rem 0 0 0.5rem; +} + +.hero-content { + display: flex; + flex-direction: column; + padding: 2rem; +} + +.hero-heading { + text-align: center; + line-height: 1.2em; + margin-bottom: 0; +} + +.hero-description { + font-size: 2.4rem; + text-align: center; + margin-top: 1.5rem; + line-height: 1.5em; +} + +/* **************** */ +/* Featured Section */ +/* **************** */ + +.featured-heading { + color: var(--main-color-2); + text-align: center; + text-shadow: 0 0.4rem 0.6rem rgba(0, 0, 0, 0.15); +} + +.featured-section { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 1.6rem; + padding: 1.6rem; + margin-bottom: 5rem; +} + +.featured-image { + overflow: hidden; + border-radius: 0.5rem; +} + +.featured-image img { + display: block; + width: 100%; + transition: all 0.4s; +} + +.featured-image img:hover { + transform: scale(1.15); +} + +/* *********** */ +/* CTA Section */ +/* *********** */ + +.section-cta { + padding: 4.8rem 0 9.6rem 0; +} + +.cta { + background-color: var(--main-color-2); + box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.15); + border-radius: 1.1rem; + + display: grid; + grid-template-columns: 2fr 1fr; + + background-image: linear-gradient( + to right bottom, + var(--shade-dark), + var(--main-color-2) + ); + overflow: hidden; +} + +.cta .heading-secondary { + color: var(--cta-color); + margin-bottom: 3rem; +} + +.cta-img-box { + background-image: linear-gradient( + to right bottom, + rgba(235, 151, 78, 0.35), + rgba(230, 125, 34, 0.35) + ), + url(../imgs/cta-image.jpg); + background-size: cover; + background-position: center; +} + +.cta-text-box { + padding: 4.8rem 6.4rem 6.4rem 6.4rem; + color: var(--cta-color); +} + +.cta-text { + font-size: 1.8rem; + line-height: 1.8; + margin-bottom: 4.8rem; +} + +.cta-form { + display: grid; + grid-template-columns: 1fr 1fr; + column-gap: 3.2rem; + row-gap: 2.4rem; +} + +.cta-form label { + display: block; + font-size: 1.6rem; + font-weight: 500; + margin-bottom: 1.2rem; +} + +.cta-form select, +.cta-form input { + width: 100%; + font-family: inherit; + color: inherit; + font-size: 1.8rem; + padding: 1.2rem; + background-color: var(--main-light-color); + border-radius: 0.9rem; + border: none; + + box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1); +} + +.cta-form input::placeholder { + color: var(--grey-color-1); +} + +.btn--form { + background-color: var(--cta-color); + color: var(--main-light-color); + align-self: end; + padding: 1.2rem; +} + +.btn--form:hover { + background-color: #fff; + color: var(--grey-color-2); +} + +/* ************** */ +/* Footer Section */ +/* ************** */ + +.footer-section { + padding: 6rem 0; + margin: 0 auto; +} + +.footer { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + justify-items: center; +} + +.logo-col { + display: flex; + flex-direction: column; + align-items: center; +} + +.footer-logo { + display: block; + margin-bottom: 3rem; +} + +.social-links { + list-style-type: none; + display: flex; + gap: 2.4rem; +} + +.social-icon { + height: 2.4rem; + width: 2.4rem; +} + +.copyright { + margin-top: 2rem; + font-size: 1.4rem; + line-height: 1.6rem; + color: var(--grey-color-4); + text-align: center; +} + +.address-col { + align-self: center; +} + +.footer-heading { + font-size: 1.8rem; + font-weight: 500; + margin-bottom: 4rem; +} + +.address { + margin-bottom: 2.4rem; +} + +.contacts { + font-size: 1.6rem; + font-style: normal; + line-height: 1.6; +} + +.made-by { + align-self: end; + font-size: 1.2rem; + text-transform: uppercase; +} + +.footer-link:link, +.footer-link:visited { + text-decoration: none; + color: var(--grey-color-4); + font-size: 1.6rem; + transition: all 0.3s; +} + +.footer-link:hover, +.footer-link:active { + color: var(--grey-color-2); +} diff --git a/Cakes-Co/imgs/birthday-cake.jpg b/Cakes-Co/imgs/birthday-cake.jpg new file mode 100644 index 00000000..dd77830a Binary files /dev/null and b/Cakes-Co/imgs/birthday-cake.jpg differ diff --git a/Cakes-Co/imgs/cake-pie.jpg b/Cakes-Co/imgs/cake-pie.jpg new file mode 100644 index 00000000..dc47c3fd Binary files /dev/null and b/Cakes-Co/imgs/cake-pie.jpg differ diff --git a/Cakes-Co/imgs/cake-with-fruits.jpg b/Cakes-Co/imgs/cake-with-fruits.jpg new file mode 100644 index 00000000..cef769d8 Binary files /dev/null and b/Cakes-Co/imgs/cake-with-fruits.jpg differ diff --git a/Cakes-Co/imgs/cta-image.jpg b/Cakes-Co/imgs/cta-image.jpg new file mode 100644 index 00000000..e9b81a1c Binary files /dev/null and b/Cakes-Co/imgs/cta-image.jpg differ diff --git a/Cakes-Co/imgs/cup-cake.jpg b/Cakes-Co/imgs/cup-cake.jpg new file mode 100644 index 00000000..6438f82d Binary files /dev/null and b/Cakes-Co/imgs/cup-cake.jpg differ diff --git a/Cakes-Co/imgs/favicon.png b/Cakes-Co/imgs/favicon.png new file mode 100644 index 00000000..ed636b64 Binary files /dev/null and b/Cakes-Co/imgs/favicon.png differ diff --git a/Cakes-Co/imgs/logo.png b/Cakes-Co/imgs/logo.png new file mode 100644 index 00000000..698b4af5 Binary files /dev/null and b/Cakes-Co/imgs/logo.png differ diff --git a/Cakes-Co/imgs/main-image.jpg b/Cakes-Co/imgs/main-image.jpg new file mode 100644 index 00000000..9a041d61 Binary files /dev/null and b/Cakes-Co/imgs/main-image.jpg differ diff --git a/Cakes-Co/index.html b/Cakes-Co/index.html index 60b1afe1..4c7ca0aa 100644 --- a/Cakes-Co/index.html +++ b/Cakes-Co/index.html @@ -1,16 +1,209 @@ + + + + - - - - - Responsive Cake webpage - - + + + - - - + Cakes & Cravings - Your Sweetest Moments, Perfected + + + - \ No newline at end of file + + + + +
+
+ + + +

+ The best cakes in town delivered to your door +

+
+ + +
+ +
+
+
+
+ multiple decorated cakes +
+ +
+

+ Welcome to Cakes&Cravings +

+

+ Indulge in a world of delightful flavors and exquisite designs. + From classic chocolate to vibrant fruit cakes, we craft each + creation with love and artistry. Perfect for any + occasion—birthdays, weddings, or just because! +

+
+
+ +
+

Our Specialities

+
+
+ birthday cake +
+
+ cake with fruits +
+
+ cup cake +
+
+ cake pie +
+
+
+
+ +
+
+
+
+

Order your cake today

+

+ Quality ingredients, handcrafted perfection, and a sprinkle of + magic in every slice. Discover your new favorite treat today! + Satisfy your sweet tooth and elevate your celebrations with our + custom cakes, baked fresh just for you!

*Enter your + details and we will get back to you ASAP. +

+ +
+
+ + +
+
+ + +
+
+ + +
+ + +
+
+ +
+
+
+
+ +
+ +
+
+
+ + + +

+ Copyright © 2024 by Cakes&Cravings, Inc.
+ All rights reserved +

+
+ +
+

Contact us

+
+

Plaza Catalunya 999, Barcelona 08002

+

+ 612-345-678 +

+

+ hello@cakescravings.com +

+
+
+ +
+ Made by Umair +
+
+
+ + + + + diff --git a/Cakes-Co/readme.md b/Cakes-Co/readme.md index a4ad84b8..6eafd91f 100644 --- a/Cakes-Co/readme.md +++ b/Cakes-Co/readme.md @@ -22,13 +22,13 @@ Make sure that all elements are visible and functional on both mobile and deskto ## Acceptance Criteria -- [ ] The webpage is responsive and follows the Mobile First approach -- [ ] The layout adapts appropriately for larger screens using media queries -- [ ] Fonts and colors are selected appropriately and cake pictures are visually appealing -- [ ] The webpage includes hover effects to add interactivity -- [ ] All elements are visible and function as intended on both mobile and desktop devices according to the wireframes -- [ ] Your page scores 100 on Lighthouse Accessibility -- [ ] Your site is deployed to Netlify and the link is included in your PR message. +- [x] The webpage is responsive and follows the Mobile First approach +- [x] The layout adapts appropriately for larger screens using media queries +- [x] Fonts and colors are selected appropriately and cake pictures are visually appealing +- [x] The webpage includes hover effects to add interactivity +- [x] All elements are visible and function as intended on both mobile and desktop devices according to the wireframes +- [x] Your page scores 100 on Lighthouse Accessibility +- [x] Your site is deployed to Netlify and the link is included in your PR message. ## Tips for success diff --git a/Cakes-Co/style.css b/Cakes-Co/style.css deleted file mode 100644 index 6de1b356..00000000 --- a/Cakes-Co/style.css +++ /dev/null @@ -1 +0,0 @@ -/* Add your styling here */ diff --git a/Form-Controls/README.md b/Form-Controls/README.md deleted file mode 100644 index 6d74a7a8..00000000 --- a/Form-Controls/README.md +++ /dev/null @@ -1,66 +0,0 @@ -# HTML/ CSS Week 3 - -## Forms, styling forms, and Devtools - -## Aims - -- Interpret requirements -- Write a valid form -- Style form controls -- Test with Devtools -- Refactor using Devtools - -## Task - -We are selling t-shirts. Write a form to collect the following data: - -Our customers already have accounts, so we know their addresses and charging details already. We don't need to collect that data. We want to confirm they are the right person, then get them to choose a colour and then pick a delivery date. - -Writing that out as a series of questions to ask yourself: - -1. What is the customer's name? I must collect this data, and validate it. But what is a valid name? I must decide something. -2. What is the customer's email? I must make sure the email is valid. Email addresses have a consistent pattern. -3. What colour should this t-shirt be? I must give 3 options. How will I make sure they don't pick other colours? -4. What size does the customer want? I must give the following 6 options: XS, S, M, L, XL, XXL -5. When do they want the t-shirt to be delivered? I must collect a date and make sure that date is in the next four weeks. How will I do this? How will I make sure there are no mistakes about the date? - -All fields are required. -Do not write a form action for this project. - -## Developers must test their work. - -Let's write out our testable criteria: - -- [ ] I have used HTML and CSS only. - -### HTML - -- [ ] My form is semantic html. -- [ ] All inputs have associated labels. -- [ ] My Lighthouse Accessibility score is 100. -- [ ] I require a valid name. I have defined a valid name as a text string of two characters or more. -- [ ] I require a valid email. -- [ ] I require one colour from a defined set of 3 colours. -- [ ] I require one size from a defined set of 6 sizes. -- [ ] I require one date from a constrained date range. - -### CSS - -- [ ] I show which element is focused. -- [ ] My Lighthouse Accessibility score is 100. - -## Extension Task - -If you have done all these things and you would like a really big challenge, run a further test and refactor your code. - -- In Chrome Devtools, open the Command Palette - https://developer.chrome.com/docs/devtools/command-menu/ -- Type 'coverage' and open the Coverage drawer - https://developer.chrome.com/docs/devtools/coverage/ -- Refactor your code until you have no unused CSS, or as close to that as you can get. Prettier will prevent you minifying your code so the last few bytes are out of your reach, sorry! -- This challenge isn't about writing less CSS, it's about writing less _pointless_ CSS, so don't remove code that is actually being used in your layout. -- Insider tip: you might have to select some elements so their focus states don't get miscounted as unused. You can force state in Devtools: - https://twitter.com/ChromeDevTools/status/986992837127319552 -- Take a screenshot of your coverage stats. - -Sanity check: this extension is tough! Try it in your own time and don't let it hold up your coursework submission. diff --git a/Form-Controls/index.html b/Form-Controls/index.html deleted file mode 100644 index 4344b144..00000000 --- a/Form-Controls/index.html +++ /dev/null @@ -1,28 +0,0 @@ - - - - - - My form exercise - - - - - -
-

Product Pick

-
-
-
- - -
- -
- - - - \ No newline at end of file diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css deleted file mode 100644 index e69de29b..00000000 diff --git a/MultiPage-Clone/README.md b/MultiPage-Clone/README.md deleted file mode 100644 index 5a2ac06c..00000000 --- a/MultiPage-Clone/README.md +++ /dev/null @@ -1,98 +0,0 @@ -# Make a multi-page responsive website using CSS Grid - -Choose one of the designs below, and re-create the design to perfection, using CSS Grid, and media queries to make the site fully responsive. - -## Learning Objectives - -1. Create a mobile-first, responsive website -2. Use CSS Grid and flexbox for layouts and alignment -3. Save fonts and colours in CSS variables - -## Style guide - -Here are 3 designs to choose from, along with suggested fonts and colours to use for your chosen projects: - -### **DESIGN 1: Prickles & Co** - -**An e-commerce site selling plants** - -![Prickles & Co homepage](./designs/Cactus%20shop.png) - -Live demo here: https://www.wix.com/website-template/view/html/1995 - -### Fonts - -**Headings:** Fjalla One - Regular 400 -https://fonts.google.com/specimen/Fjalla+One -**Subheadings:** Outfit - Extra-light 200 -https://fonts.google.com/specimen/Outfit -**Body:** Outfit - Extra-light 200 -https://fonts.google.com/specimen/Outfit - -### Colors - -Red Brown: #A05941 -Green Black: #133032 -Light Grey: #EDEDEE -White: #FFF -Transparent White: rgba(0,0,0,0.75) - -===================================== - -### **DESIGN 2: Resume** - -**A website to showcase skills and projects** - -![Business resume homepage](./designs/Business%20portfolio.png) - -Live demo here: https://www.wix.com/website-template/view/html/2622 - -### Fonts - -**Headings:** Poppins - Semi-bold 600 -https://fonts.google.com/specimen/Poppins -**Body:** Quicksand - Light 300 -https://fonts.google.com/specimen/Quicksand - -### Colors - -Dark beige: #E6DACD -Light beige: #F4ECE6 -Royal blue: #0150FD -Black: #000 -White: #FFF - -===================================== - -### **DESIGN 3: Juice Bar** - -**An e-commerce site for fruit juices** - -![Juice Bar homepage](./designs/Juice%20bar.png) - -Live demo here: https://www.wix.com/website-template/view/html/2962 - -### Fonts - -**Headings and subheadings:** Questrial - Regular 400 -https://fonts.google.com/specimen/Questrial -**Buttons:** Raleway - Regular 400 -https://fonts.google.com/specimen/Raleway -**Body:** Roboto - Light 300 -https://fonts.google.com/specimen/Roboto - -### Colors - -Black: #000 -White: #FFF -Lylac: #f5e8ff -Light Green: #E6FAC0 -Medium Green: #5E7D1F -Dark Green: #394B2A - -===================================== - -## **Crediting** - -Very important: please credit the designer in your footer with the sentence -"This website design was created by Wix.com, and is used here for strictly educational purposes." diff --git a/MultiPage-Clone/css/main.css b/MultiPage-Clone/css/main.css deleted file mode 100644 index aa561706..00000000 --- a/MultiPage-Clone/css/main.css +++ /dev/null @@ -1,3 +0,0 @@ -/* Add your CSS here */ - -/* Dont' forget to link this file to your HTML in the */ diff --git a/MultiPage-Clone/designs/Business portfolio.png b/MultiPage-Clone/designs/Business portfolio.png deleted file mode 100644 index c26278ae..00000000 Binary files a/MultiPage-Clone/designs/Business portfolio.png and /dev/null differ diff --git a/MultiPage-Clone/designs/Cactus shop.png b/MultiPage-Clone/designs/Cactus shop.png deleted file mode 100644 index c543d741..00000000 Binary files a/MultiPage-Clone/designs/Cactus shop.png and /dev/null differ diff --git a/MultiPage-Clone/designs/Juice bar.png b/MultiPage-Clone/designs/Juice bar.png deleted file mode 100644 index 53869d3d..00000000 Binary files a/MultiPage-Clone/designs/Juice bar.png and /dev/null differ diff --git a/MultiPage-Clone/index.html b/MultiPage-Clone/index.html deleted file mode 100644 index cd704c69..00000000 --- a/MultiPage-Clone/index.html +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - - - Responsive grid project - - - - - - - - -

This website design was created by Wix.com, and is used here for strictly educational purposes.

- - - \ No newline at end of file diff --git a/MultiPage-Clone/main.js b/MultiPage-Clone/main.js deleted file mode 100644 index 11e6b744..00000000 --- a/MultiPage-Clone/main.js +++ /dev/null @@ -1,4 +0,0 @@ - -const OVERFLOW = $('#toggle1'); - -OVERFLOW.click(e => e.target.checked ? $("body").css("overflow-y", "hidden") : $("body").css("overflow-y", "auto")); \ No newline at end of file diff --git a/Wireframe/README.md b/Wireframe/README.md deleted file mode 100644 index 83b77c7e..00000000 --- a/Wireframe/README.md +++ /dev/null @@ -1,42 +0,0 @@ -# Wireframe - -![Wireframe](./wireframe.png) - -Using the provided wireframe, create a new webpage explaining: - -1. What is Git? -2. Why do developers need Git? -3. What is a branch in Git? - -The page should NOT use any framework like Bootstrap. - -## Learning Objectives - -- Apply a consistent color scheme to links and text on the webpage -- Use semantic HTML tags to structure the webpage -- Create a page header with a title and description -- Create an articles section with three articles, each including a title, summary, and a link -- Create a page footer and fix it to the bottom of the viewport -- Use the :first-child pseudo-class to style the first article so that it stands out from the others -- Use version control by committing often and pushing regularly to GitHub -- Don't use any frameworks; write your own layout using HTML and CSS - -Use the wireframe sketch provided to lay out the page. Please note that this is just a sketch - you can choose the colors, fonts, and images that you want to use on the page. - -## Acceptance Criteria - -- [ ] The webpage has a consistent color scheme for links and text. -- [ ] Semantic HTML tags are used to structure the webpage. -- [ ] The page header includes a title and description. -- [ ] The articles section has three articles, each including a title, summary, and a link. -- [ ] The page footer is fixed to the bottom of the viewport. -- [ ] The first article is styled using the :first-child pseudo-class. -- [ ] The webpage is styled using a linked .css file. -- [ ] The webpage is properly committed and pushed to a branch on GitHub. -- [ ] The webpage does not use any frameworks such as Bootstrap. - -## Resources - -- [Wireframe](https://www.productplan.com/glossary/wireframe/) -- [Semantic HTML](https://www.w3schools.com/html/html5_semantic_elements.asp) -- [:first-child](https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child) diff --git a/Wireframe/css/style.css b/Wireframe/css/style.css deleted file mode 100644 index e69de29b..00000000 diff --git a/Wireframe/index.html b/Wireframe/index.html deleted file mode 100644 index 67544158..00000000 --- a/Wireframe/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - Wireframe - - - - - - -