diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 31b7ee7..2282a5f 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -1,30 +1,30 @@ - - - - -## What section are you in: - -- [ ] Tuesday -- [ ] Wednesday -- [ ] Thursday -- [ ] Friday 3pm -- [ ] Friday 6pm - -**Is the solution complete?** - -[Yes/No] - -**Did you run into any problems?** - -[Describe...] - -**Did you collaborate with others on this solution?** - - + + + + +## What section are you in: + +- [ ] Tuesday +- [ ] Wednesday +- [ ] Thursday +- [ ] Friday 3pm +- [ ] Friday 6pm + +**Is the solution complete?** + +[Yes/No] + +**Did you run into any problems?** + +[Describe...] + +**Did you collaborate with others on this solution?** + + diff --git a/.github/class_labels.yml b/.github/class_labels.yml index 181e750..f85c09f 100644 --- a/.github/class_labels.yml +++ b/.github/class_labels.yml @@ -1,10 +1,10 @@ -Tuesday: - - '- \[(x|X)\] Tuesday' -Wednesday: - - '- \[(x|X)\] Wednesday' -Thursday: - - '- \[(x|X)\] Thursday' -Friday3pm: - - '- \[(x|X)\] Friday 3pm' -Friday6pm: - - '- \[(x|X)\] Friday 6pm' +Tuesday: + - '- \[(x|X)\] Tuesday' +Wednesday: + - '- \[(x|X)\] Wednesday' +Thursday: + - '- \[(x|X)\] Thursday' +Friday3pm: + - '- \[(x|X)\] Friday 3pm' +Friday6pm: + - '- \[(x|X)\] Friday 6pm' diff --git a/.github/workflows/class_labeler.yml b/.github/workflows/class_labeler.yml index b531e27..3ede8d6 100644 --- a/.github/workflows/class_labeler.yml +++ b/.github/workflows/class_labeler.yml @@ -1,17 +1,17 @@ -name: "Class Labeler" -on: - pull_request_target: - types: [opened, edited] - -jobs: - triage: - permissions: - contents: read - pull-requests: write - runs-on: ubuntu-latest - steps: - - uses: github/issue-labeler@v2.5 - with: - repo-token: "${{ secrets.GITHUB_TOKEN }}" - configuration-path: .github/class_labels.yml - enable-versioned-regex: 0 +name: "Class Labeler" +on: + pull_request_target: + types: [opened, edited] + +jobs: + triage: + permissions: + contents: read + pull-requests: write + runs-on: ubuntu-latest + steps: + - uses: github/issue-labeler@v2.5 + with: + repo-token: "${{ secrets.GITHUB_TOKEN }}" + configuration-path: .github/class_labels.yml + enable-versioned-regex: 0 diff --git a/.github/workflows/static.yml b/.github/workflows/static.yml index 89a8af0..789247d 100644 --- a/.github/workflows/static.yml +++ b/.github/workflows/static.yml @@ -1,42 +1,42 @@ -# Simple workflow for deploying static content to GitHub Pages -name: Deploy static content to Pages - -on: - # Runs on pushes targeting the default branch - push: - branches: ["main"] - - # Allows you to run this workflow manually from the Actions tab - workflow_dispatch: - -# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages -permissions: - contents: read - pages: write - id-token: write - -# Allow one concurrent deployment -concurrency: - group: "pages" - cancel-in-progress: true - -jobs: - # Single deploy job since we're just deploying - deploy: - environment: - name: github-pages - url: ${{ steps.deployment.outputs.page_url }} - runs-on: ubuntu-latest - steps: - - name: Checkout - uses: actions/checkout@v3 - - name: Setup Pages - uses: actions/configure-pages@v1 - - name: Upload artifact - uses: actions/upload-pages-artifact@v1 - with: - # Upload entire repository - path: "." - - name: Deploy to GitHub Pages - id: deployment - uses: actions/deploy-pages@v1 +# Simple workflow for deploying static content to GitHub Pages +name: Deploy static content to Pages + +on: + # Runs on pushes targeting the default branch + push: + branches: ["main"] + + # Allows you to run this workflow manually from the Actions tab + workflow_dispatch: + +# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages +permissions: + contents: read + pages: write + id-token: write + +# Allow one concurrent deployment +concurrency: + group: "pages" + cancel-in-progress: true + +jobs: + # Single deploy job since we're just deploying + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v3 + - name: Setup Pages + uses: actions/configure-pages@v1 + - name: Upload artifact + uses: actions/upload-pages-artifact@v1 + with: + # Upload entire repository + path: "." + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v1 diff --git a/.gitignore b/.gitignore index e43b0f9..6e8821b 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1 @@ -.DS_Store +.DS_Store diff --git a/README.md b/README.md index 590cfc4..d7067bc 100644 --- a/README.md +++ b/README.md @@ -1,81 +1,81 @@ -# Bootstrap 5.2 Lab - -## Build a responsive cookie store web page - -In this lab, you are given an [index.html](index.html) file that contains our web page's content, and we will be using Bootstrap to build a responsive layout and style the page. - -> NOTE 1: the goal of this lab is familiarity with bootstrap and grid systems. Your page does NOT have to be a pixel-perfect recreation of the screenshots provided. Feel free to use your own creativity for colors, fonts, and other undefined parts of the assignment. - -> NOTE 2: You can add additional `
` tags and other tags as necessary, but don't change the order of the original content tags. Reordering those tags would impact the accessibility of the content. - -![Screenshot of the cookie store on a large-screen](screenshots/index-lg-screen.png) - -## Part 1. Add Bootstrap - -1. Fork this repository -2. Clone your fork of the project -3. Open the [index.html](index.html) file in your code editor -4. Open the [index.html](index.html) file in your web browser -5. Link the `css/styles.css` file in the `` section of index.html - - _We will use this css file to add our own custom styles_ -6. Link the Bootstrap CSS file in the `` section of index.html - - Use the [CDN link tag](https://getbootstrap.com/docs/5.2/getting-started/introduction/#quick-start) -7. Reload index.html in your web browser - -> After reloading the page you should notice subtle changes to the page like a different font, margins, and spacing on the page. This lets us know that Bootstrap was added properly. - -## Part 2. Responsive layouts - -1. Apply the [bootstrap grid classes](https://getbootstrap.com/docs/5.2/layout/grid/) to the cookies on the page in the `
` section. The resulting responsive layout should display as follows: - - - On [mobile screens](screenshots/index-mobile-screen.png), 1 cookie per row - - Starting on [medium `md` screens](screenshots/index-md-screen.png), 2 cookies per row - - Starting on [large `lg` screens](screenshots/index-lg-screen.png), 4 cookies per row - - Read about making your [images responsive](https://getbootstrap.com/docs/5.2/content/images/) - -2. Apply styling and classes so that the title text is displayed centered within the `
` section. Below are some hints on how to do this: - - - Use custom styles for this section - - Give the header section a fixed height, I used 400px - - Read about using images with a `cover` [background-size](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size) - - Read about how to center a div block - - Choose a background image of your own or use [the image provided](images/coffee-biscuits.jpg) - - There are multiple ways to solve this section - -3. Style the "About us" section and the `
` section of the page to display similar to the [screenshots](screenshots/index-lg-screen.png) - - - Use a grid for the "About us" section - - style the footer as you like - -## Part 3. Reordering grid columns visually - -1. Open the [alternating.html](alternating.html) page in your code editor -2. Open the [alternating.html](alternating.html) page in your web browser -3. Using only bootstrap grid styles make the cookie products alternate as shown and described in the following screenshots: - - - On [mobile screens](screenshots/alternating-mobile-screen.png), display 1 cookie per row - - Starting on [medium `md` screens](screenshots/alternating-md-screen.png), display the cookie image and details on the same row, but alternate the order of these two on every row - - Read about [reordering columns](https://getbootstrap.com/docs/5.2/layout/columns/#reordering) and [offsetting columns](https://getbootstrap.com/docs/5.2/layout/columns/#offsetting-columns) in the bootstrap documentation - -> IMPORTANT: -> -> - _Don't_ change the order of the 3 main cookie html tags, the `

`, followed by the `

`, and then the `` tags. _Remember, we want to keep semantic order._ -> - You can add `

`'s and bootstrap classes as needed, you can wrap the tags in div's as needed, as long as you don't change the order. - -## Submitting your work - -- Add and commit your code to your forked repo -- Make a pull request back to this repo -- Fill out the template repo noting which class section you're in - -## Additional Resources - -- [Bootstrap 5.2 Examples](https://getbootstrap.com/docs/5.2/examples/) -- [How to add different fonts to your web page](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts#using_an_online_font_service) - - [Google Fonts](https://fonts.google.com/) offers free fonts - -## Credits - -- Coffee mug and biscuit photo by Daria Nepriakhina πŸ‡ΊπŸ‡¦ on Unsplash -- Bakers illustration from https://undraw.co/illustrations -- Cookie images from https://www.girlscouts.org/ +# Bootstrap 5.2 Lab + +## Build a responsive cookie store web page + +In this lab, you are given an [index.html](index.html) file that contains our web page's content, and we will be using Bootstrap to build a responsive layout and style the page. + +> NOTE 1: the goal of this lab is familiarity with bootstrap and grid systems. Your page does NOT have to be a pixel-perfect recreation of the screenshots provided. Feel free to use your own creativity for colors, fonts, and other undefined parts of the assignment. + +> NOTE 2: You can add additional `
` tags and other tags as necessary, but don't change the order of the original content tags. Reordering those tags would impact the accessibility of the content. + +![Screenshot of the cookie store on a large-screen](screenshots/index-lg-screen.png) + +## Part 1. Add Bootstrap + +1. Fork this repository +2. Clone your fork of the project +3. Open the [index.html](index.html) file in your code editor +4. Open the [index.html](index.html) file in your web browser +5. Link the `css/styles.css` file in the `` section of index.html + - _We will use this css file to add our own custom styles_ +6. Link the Bootstrap CSS file in the `` section of index.html + - Use the [CDN link tag](https://getbootstrap.com/docs/5.2/getting-started/introduction/#quick-start) +7. Reload index.html in your web browser + +> After reloading the page you should notice subtle changes to the page like a different font, margins, and spacing on the page. This lets us know that Bootstrap was added properly. + +## Part 2. Responsive layouts + +1. Apply the [bootstrap grid classes](https://getbootstrap.com/docs/5.2/layout/grid/) to the cookies on the page in the `
` section. The resulting responsive layout should display as follows: + + - On [mobile screens](screenshots/index-mobile-screen.png), 1 cookie per row + - Starting on [medium `md` screens](screenshots/index-md-screen.png), 2 cookies per row + - Starting on [large `lg` screens](screenshots/index-lg-screen.png), 4 cookies per row + - Read about making your [images responsive](https://getbootstrap.com/docs/5.2/content/images/) + +2. Apply styling and classes so that the title text is displayed centered within the `
` section. Below are some hints on how to do this: + + - Use custom styles for this section + - Give the header section a fixed height, I used 400px + - Read about using images with a `cover` [background-size](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size) + - Read about how to center a div block + - Choose a background image of your own or use [the image provided](images/coffee-biscuits.jpg) + - There are multiple ways to solve this section + +3. Style the "About us" section and the `
` section of the page to display similar to the [screenshots](screenshots/index-lg-screen.png) + + - Use a grid for the "About us" section + - style the footer as you like + +## Part 3. Reordering grid columns visually + +1. Open the [alternating.html](alternating.html) page in your code editor +2. Open the [alternating.html](alternating.html) page in your web browser +3. Using only bootstrap grid styles make the cookie products alternate as shown and described in the following screenshots: + + - On [mobile screens](screenshots/alternating-mobile-screen.png), display 1 cookie per row + - Starting on [medium `md` screens](screenshots/alternating-md-screen.png), display the cookie image and details on the same row, but alternate the order of these two on every row + - Read about [reordering columns](https://getbootstrap.com/docs/5.2/layout/columns/#reordering) and [offsetting columns](https://getbootstrap.com/docs/5.2/layout/columns/#offsetting-columns) in the bootstrap documentation + +> IMPORTANT: +> +> - _Don't_ change the order of the 3 main cookie html tags, the `

`, followed by the `

`, and then the `` tags. _Remember, we want to keep semantic order._ +> - You can add `

`'s and bootstrap classes as needed, you can wrap the tags in div's as needed, as long as you don't change the order. + +## Submitting your work + +- Add and commit your code to your forked repo +- Make a pull request back to this repo +- Fill out the template repo noting which class section you're in + +## Additional Resources + +- [Bootstrap 5.2 Examples](https://getbootstrap.com/docs/5.2/examples/) +- [How to add different fonts to your web page](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts#using_an_online_font_service) + - [Google Fonts](https://fonts.google.com/) offers free fonts + +## Credits + +- Coffee mug and biscuit photo by Daria Nepriakhina πŸ‡ΊπŸ‡¦ on Unsplash +- Bakers illustration from https://undraw.co/illustrations +- Cookie images from https://www.girlscouts.org/ diff --git a/alternating.html b/alternating.html index a3f5035..d088dac 100644 --- a/alternating.html +++ b/alternating.html @@ -1,30 +1,30 @@ - - - - - - Cookie Store - - -
-

Our Cookies

-

Checkout our latest and delicious cookies.

- -

Mint Chocolate

-

Tasty mint chocolate cookies

- A single mint chocolate cookie - -

Peanut Butter

-

Yummy peanut buttery goodness

- A single peanut butter cookie - -

Oatmeal

-

Your fitness instructors favorite

- A single oatmeal cookie - -

Chocolate Chip

-

Gooey chocolate you'll love

- A single chocolate chip cookie -
- - + + + + + + Cookie Store + + +
+

Our Cookies

+

Checkout our latest and delicious cookies.

+ +

Mint Chocolate

+

Tasty mint chocolate cookies

+ A single mint chocolate cookie + +

Peanut Butter

+

Yummy peanut buttery goodness

+ A single peanut butter cookie + +

Oatmeal

+

Your fitness instructors favorite

+ A single oatmeal cookie + +

Chocolate Chip

+

Gooey chocolate you'll love

+ A single chocolate chip cookie +
+ + diff --git a/css/styles.css b/css/styles.css index 3c3f2b6..af8f56e 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1 +1,74 @@ -/* Add custom css styles here */ +/* Add custom css styles here */ +#hero-text { + text-align: center; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: white; + background-color: rgba(0, 0, 0, 0.6); + height: auto; + width: auto; + border-radius: 5%; + padding: 2%; + font-size: x-large; +} +.heroimg { + background-image: url("http://127.0.0.1:5500/images/coffee-biscuits.jpg"); + height: 400px; + background-position: center; + background-repeat: no-repeat; + background-size: 100% 100%; + position: relative; +} + +h2, h3, p { + text-align: center; + margin-left: auto; + margin-right: auto; +} +.section-divider { + height: 20px; + border-width: 1px 0; + } + +#cookie-images { + display: flex; + align-items: center; + margin-left: auto; + margin-right: auto; + border-radius: 50%; + min-width: 50%; +} + +#about-us-picture { + border-radius: 50%; + min-width: 50%; + scale: 50%; +} + +.About-Us { + background-color: #adadad5a; +} + +footer { + background-color: blue; + color: white; + padding: 2.5%; + font-size: x-large; +} + +#bakers-text { + display: flex; + width:100%; + font-size: larger; +} + /* h3, img, p { + display: flex; + justify-content: center; align horizontal + align-items: center; + margin-left: auto; + margin-right: auto; + max-width: 100%; + height: auto; +} */ \ No newline at end of file diff --git a/index.html b/index.html index eae824d..22d7004 100644 --- a/index.html +++ b/index.html @@ -1,57 +1,102 @@ - - - - - - Cookie Store - - -
-

Cookie Store

-

Buy our awesome cookies. All proceeds go to charity!

-
- -
-

Our Cookies

-

Checkout our latest and delicious cookies.

- -

Mint Chocolate

-

Tasty mint chocolate cookies

- A single mint chocolate cookie - -

Peanut Butter

-

Yummy peanut buttery goodness

- A single peanut butter cookie - -

Oatmeal

-

Your fitness instructors favorite

- A single oatmeal cookie - -

Chocolate Chip

-

Gooey chocolate you'll love

- A single chocolate chip cookie -
-
-

About us

- - illustrations of two people baking -
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim - veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea - commodo consequat. Duis aute irure dolor in reprehenderit in voluptate - velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint - occaecat cupidatat non proident, sunt in culpa qui officia deserunt - mollit anim id est laborum. -
-
-
-

Contact us

-
- 100 Broadway Avenue,
- New York, NY 10001
- (212) 555-1234 -
-
- - + + + + + + + + Cookie Store + + +
+
+
+

Cookie Store

+

Buy our awesome cookies. All proceeds go to charity!

+
+
+
+

+ +
+
+
+
+
+

Our Cookies

+

Checkout our latest and delicious cookies.

+
+
+
+
+
+

Mint Chocolate

+

Tasty mint chocolate cookies

+ A single mint chocolate cookie +
+
+

Peanut Butter

+

Yummy peanut buttery goodness

+ A single peanut butter cookie +
+
+

Oatmeal

+

Your fitness instructors favorite

+ A single oatmeal cookie +
+
+

Chocolate Chip

+

Gooey chocolate you'll love

+ A single chocolate chip cookie +
+
+
+
+
+

+ +
+
+
+
+

About us

+
+
+
+ illustrations of two people baking +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint + occaecat cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. +
+
+
+ +
+
+
+ +
+ + + +