In-class Practice

Complex Selectors, Transforms, and Transitions

Part 1

We're in the process of wrapping up our conference site. Let's return to our home page in the file index.html and refactor some of the code by using complex selectors rather than needing to apply classes. This should clean up our HTML as well as fix some nagging issues that we came across.

  1. Open the practice site in VSCode: Open VSCode
  2. Open a tab so you can preview your site as you work: View Your Practice Site
  3. You will need to have completed Practices 1 through 7 to continue. If you haven't, stop here, go back and get up-to-date.

Start with the HTML:

  1. Add the Bootstrap framework to your homepage by adding the following four lines of code ABOVE the link element for "style.css":

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
    
    Remember, they MUST go above "style.css" so that your CSS takes precedence.
  2. Find your aside element with the class of quote. Since we learned the blockquote element, it makes more sense to use that tag rather than aside. We'll also apply a Bootstrap setting to it.
    1. Replace aside with blockquote, making sure you change the closing tag, as well.
    2. Add a class to the opening tag with the value blockquote. This is from Bootstrap.
    3. Between the end quotation mark and the &mdash;, place a closing p tag and remove the now extra closing p tag after "Attendee".
    4. Move &mdash; A Happy Attendee to a new line and place footer tags around it. Add a class to the opening footer tag with the value blockquote-footer.
  3. Find the three section elements with the class conference-info. Make the following changes inside of all three:
    1. From the a element in the header, remove the entire class attribute including its value of highlight-link.
    2. From the figure element, remove the entire class attribute including its value of teaser.
    3. From the img element inside the figure, remove the entire class attribute including its value of teaser-image.
  4. Moving back up the HTML, find the div that contains a hyperlink labeled "Register Now". Make the following changes:
    1. Remove the entire class attribute from the a element including all of its values of highlight-link button button-alt.
    2. Surround the words "Register Now" with the opening and closing tags for button. Now that you know how to make form elements, using button is a more appropriate choice. The line should now look like this:

      <a href="/register.html" target="_blank"><button>Register Now</button></a>

Let's turn to your style.css file make the changes necessary to implement complex selectors.

  1. Find the selector for a.highlight-link. This should be followed by three other similar selectors on which you used complex pseudo selectors without even realizing it. Make the following change to ALL 4 selectors:
    1. Replace a.highlight-link with .conference-info > header a. The three selectors following the main one should still have the colon and "visited", "active", and "hover" directly against the a. Here's how the first two should look:

      .conference-info > header a {
        color: #eeeeee;
      }
      
      .conference-info > header a:visited {
        color: #eeeeee;
      }
      
  2. To the fourth of these selectors (the one with :hover), add the property text-decoration with the value of none.
  3. Next, find the selector for .button, which should be closely followed by a selector for .button-alt. Make the following changes:
    1. Delete the entire selector and properties for .button-alt. Since we removed it from our page, it is no longer needed as that was the only occurrence.
    2. Change the selector .button to #introduction button. This way, only buttons that are descendants of the id "introduction" will be impacted. From its properties, do the following:
      1. Remove all four of its existing properties.
      2. Add a property of color with the value #eeeeee
      3. Add a property of padding with .5em on the top/bottom and 1em on the left/right.
  4. Add a new selector of #introduction button:hover with the properties background-color orange and color #000000.
  5. Find the selector for all li elements. Change the selector to .sitemenu li so that only list items in the pages' header and footer will be impacted. This should fix the bulleted list problem we experienced on our registration page.
  6. Find the selector for .quote, which should be closely followed by selectors for .teaser and .teaser-image. Make the following changes:
    1. Change the selector for .quote to #introduction blockquote since we changed the aside in HTML. Modify the padding property to have .5em on ALL sides.
    2. Change the selector for .teaser to .conference-info figure. Add a property to it to set margin-bottom to 1.5em.
    3. Change the selector for .teaser-image to .conference-info figure > img.
  7. Within your first media query that has a max-width of 992px, change the selector for footer to .sitefooter.
  8. Within the media query that has a max-width of 768px, change the selector for .quote to #introduction blockquote.

Your index.html file and new CSS should now look like this:

The output of your page will look only slightly different than it did before with the addition of Bootstrap. Primarily, your work improved the flexibility and quality of your code.

However, register.html should look slightly different because the bullets in the "Why Attend" list now appear.

Part 2

To wrap up our site, let's apply some transitions and transforms to our register.html page.

  1. Open the HTML file "register.html".
  2. Below the list for "Why Attend" (following the closing </ul> tag), add a figure element. Inside the figure, add an img element with the src of https://jasontmickel.com/dci108/inclass/offer.png and an alt attribute of Limited Time Offer.
  3. Go to your CSS file "style.css" and find the CSS for your registration page and the form elements.
  4. We want the image stating that the $99 price is for a limited time to stand out, so let's create an animation when the page loads and when it is hovered over. Add a selector for #reginfo figure. Add properties to it with margin of auto and height of 320px.
  5. Add a selector for #reginfo figure img, and add the following properties:
    1. transform of scale(50%) rotate(-20deg) translate(2%, -45%)
    2. transition-property of transform
    3. transition-duration of 1s
    4. transition-timing-function of ease-in-out
  6. Add a selector for #reginfo figure img:hover and add a property of transform with the value scale(60%) rotate(-15deg) translate(2%, -45%).
  7. Also, we want the form fields to have a thicker border to indicate they are active when a user hovers over them AND when the user puts them in focus (places the cursor inside). Find the .formfield selector. Add a property to it of transition with the value border .5s ease-in-out, border-radius .5s ease-in-out.
  8. Add a selector for .formfield:hover, .formfield:focus. Add properties:
    1. A border that is 2px wide, solid, and the color rgb(115, 53, 39)
    2. Rounded border corners of 3px
  9. When the user hovers over the send request button, ease the color change. To do so, add a selector for #regform button with the following properties:
    1. transition-property of background-color, color, transform
    2. transition-duration of .5s
    3. transition-timing-function of ease-out
  10. Add a selector for #regform button:hover with the following properties:
    1. background color of rgba(115, 53, 39, .2)
    2. color of rgb(115, 53, 39)
    3. outline of none
    4. transform of scale(110%)

Your latest style.css file should look like this:

Final Output