Lab03Index.html

<!--
    Copyright (c) 2023 Promineo Tech
    Author:  Promineo Tech Academic Team
    Subject:  Bootstrap Lab
    FE Lab03
 -->

<!---------------------------------------------------
Key Terms:
* class
* bootstrap
* component

Objectives:
* Use BOOTSTRAP utilities and selectors to target specific HTML elements and apply styles to them.
* Use BOOTSTRAP utilities and selectors to change the layout, typography, and visual design of the webpage.
* Use the BOOTSTRAP utilities and selectors to control the size and spacing of HTML elements.
* Use BOOTSTRAP utilities and selectors to create a responsive layout that adapts to different screen sizes and devices.
* Use BOOTSTRAP official documentation.
-----------------------------------------------------

Instructions: The HTML file provided has no style. Using ONLY Bootstrap CSS fill in the bootstrap class names necessary to style the page as indicated. You will have to fill in the CLASSES for each element. The Bootstrap CSS is already linked to the HTML file. This assignment provides practice in searching through the Bootstrap documentation. Take a look at the FinalProduct in the images folder to see what the page should look like when you're done.

-----------------------------------------------------
PART 1:
* Step 1: Install the bootstrap dependency by running npm install in your IDE terminal.
* Step 2: In SECTION 1, add a SECONDARY (grey) background color to the BODY element by adding a class to the BODY tag that will change the background color.(See documentation: https://getbootstrap.com/docs/5.2/utilities/background/)
* Step 3: In SECTION 1, now that the background is all grey, add a LIGHT background color to the main-container DIV element by adding the bg-light class to the BODY tag.
* Step 4: The banner image on top of the page doesn't fit, add a class that will make the image responsive to the window screen size. (See documentation: https://getbootstrap.com/docs/5.3/content/images/#responsive-images)
* Step 5: Center the page title "Dog Breeds" and add a margin bottom of 5. (See documentation: https://getbootstrap.com/docs/5.3/utilities/spacing/#margin-and-padding  AND  https://getbootstrap.com/docs/5.3/utilities/text/#text-alignment)

PART 2:
* Step 6: In SECTION 2, activate the bootstrap container class by adding "container" to the DIV's class. Also, add a margin bottom of 5 and change the font size to a level 5. (See documentation: https://getbootstrap.com/docs/5.3/utilities/text/#font-size)
* Step 7: In SECTION 3, add the "container" class to the small-dog DIV, then center the text in the DIV, add a margin bottom size 5 and change the font size to size 5 as well.
* Step 8: In SECTION 4, add the "container" class to the medium-dog DIV, then center the text in the DIV, add a margin bottom size 5 and change the font size to size 4.
* Step 9: In SECTION 5, add the "container" class to the large-dog DIV, then center the text in the DIV, add a margin bottom size 5 and change the font size to size 3.
* Step 10: In SECTIONS 4 and 5 assign columns with size and break points:
    * For SECTION 3, find the DIVs of Small Dog breed names and observe how each DIV in the ROW has a COLUMN class that will break when the screen is LARGE and change over to COLUMN size of 2.
    * In SECTION 4, for each DIV of Medium dog breeds in the ROW... assign a COLUMN class that will break when the screen is MEDIUM and assign a COLUMN size of 4.
    * In SECTION 5, for each DIV of LARGE dog breeds in the ROW... assign a COLUMN class that will break when the screen is MEDIUM and assign a COLUMN size of 6.
    * (See documentation: https://getbootstrap.com/docs/5.3/layout/columns/#column-breaks)

PART 3:
* Step 11: In SECTION 6, for the three DIVs that have an ID of "card-#" assign a "card" class AND a class that will change the background color to SECONDARY. (See documentation for CARD: https://getbootstrap.com/docs/5.3/components/card/#about)
* Step 12: In SECTION 6, change the btn-dark class on all three BUTTON links to an outline class, choose a color from the documentation. (See documentation: https://getbootstrap.com/docs/5.3/components/buttons/#outline-buttons)
* Step 13: In SECTION 6, find the 3 DIVs inside the DIV with a class of ROW... add a COLUMN class to each DIV that will break when the screen is a MEDIUM size resulting in stacking of the DIVs.
* Step 14: In SECTION 7, align the text in the FOOTER to center.

----------------------------------------------------->

<!-- ↓ YOUR HTML CODE HERE ↓  -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dog Breeds</title>
    <link
      rel="stylesheet"
      href="./node_modules/bootstrap/dist/css/bootstrap.css"
    />
  </head>

  <!----- SECTION 1 ----->

  <body class="bg-secondary">
    <div id="main-container" class="bg-light container pt-2 pb-5">
      <div>
        <img
          src="images/banner.png"
          class="img-fluid "
          alt="Page banner art of paws, dog bones, and cartoon dogs."
          width="2000"
        />
      </div>

      <h1 class="text-center mb-5">Dog Breeds</h1>

      <!----- SECTION 2 ----->

      <div class="container fs-5 mb-5">
        <p>
          When selecting a dog to adopt, it's important to consider the
          different breeds and their characteristics to find the best fit for
          your lifestyle. For example, if you have a small living space and
          limited time for exercise, a small dog breed like a Chihuahua or
          Pomeranian may be a good fit. On the other hand, if you have a large
          yard and enjoy long walks, a large breed like a Labrador Retriever or
          German Shepherd may be a better choice.
        </p>
        <p>
          Size isn't the only factor to consider when selecting a dog breed.
          It's also important to research their specific personality traits,
          grooming needs, and potential health issues to ensure that you're
          choosing a breed that will be a good match for your lifestyle and
          family.
        </p>
      </div>

      <div class="container mt-5 mb-5 p-5">
        <!----- SECTION 3 ----->

        <div id="small-dog" class="container text-center fs-5 mb-5">
          <div class="row"><h3>Small Breeds</h3></div>

          <div class="row">
            <div class="col-lg-2">Dachshund</div>
            <div class="col-lg-2">Pug</div>
            <div class="col-lg-2">Jack Russell Terrier</div>
            <div class="col-lg-2">Pomeranian</div>
            <div class="col-lg-2">Beagle</div>
            <div class="col-lg-2">Maltese</div>
          </div>
          <div class="row">
            <div class="col-lg-2">Yorkshire Terrier</div>
            <div class="col-lg-2">Corgi</div>
            <div class="col-lg-2">French Bulldog</div>
            <div class="col-lg-2">Shih Tzu</div>
            <div class="col-lg-2">Miniature pincher</div>
            <div class="col-lg-2">Chihuaha</div>
          </div>
        </div>

        <!----- SECTION 4 ----->

        <div id="medium-dog" class="container text-center fs-4 mb-5 ">
          <div class="row"><h3>Medium Breeds</h3></div>

          <div class="row">
            <div class="col-md-4">Border Collie</div>
            <div class="col-md-4">Boxer</div>
            <div class="col-md-4">Boston Terrier</div>
          </div>
          <div class="row">
            <div class="col-md-4">Bulldog</div>
            <div class="col-md-4">Cocker Spaniel</div>
            <div class="col-md-4">Siberian Husky</div>
          </div>
        </div>

        <!----- SECTION 5 ----->

        <div id="large-dog" class="container text-center fs-3">
          <div class="row"><h3>Large Breeds</h3></div>

          <div class="row p-1">
            <div class="col-sm-6">Golden Retriever</div>
            <div class="col-sm-6">Great Dane</div>
            <div class="col-sm-6">German Shepherd</div>
            <div class="col-sm-6">Rottweiler</div>
          </div>
        </div>
      </div>

      <!----- SECTION 6 ----->

      <div class="container text-center mb-5 fs-2">
        <div class="row">
          <div class="p-3 col-md">
            <div id="card-1" class="card bg-secondary">
              <img
                src="images/retriever.jpg"
                class="card-img-top"
                alt="Close up of Golden Retriever sitting on grass."
                width="100"
              />
              <div class="card-body">
                <h5 class="card-title">Golden Retriever</h5>
                <a href="#" class="btn btn-outline-dark btn-lg">More Info</a>
              </div>
            </div>
          </div>

          <div class="p-3 col-md">
            <div id="card-2" class="card bg-secondary">
              <img
                src="images/dane.jpg"
                class="card-img-top"
                alt="Greate Dane sitting next to body of water."
                width="100"
              />
              <div class="card-body">
                <h5 class="card-title">Great Dane</h5>
                <a href="#" class="btn btn-outline-dark btn-lg">More Info</a>
              </div>
            </div>
          </div>

          <div class="p-3 col-md">
            <div id="card-3" class="card bg-secondary ">
              <img
                src="images/shepard.jpg"
                class="card-img-top"
                alt="German Shepard sitting on fall leaves and grass."
                width="100"
              />
              <div class="card-body">
                <h5 class="card-title">German Shepherd</h5>
                <a href="#" class="btn btn-outline-dark btn-lg">More Info</a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!----- SECTION 7 ----->
      <footer class="text-center">Promineo Tech ©️2023</footer>
    </div>
  </body>
</html>