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.
- Open the practice site in VSCode: Open VSCode
- Open a tab so you can preview your site as you work: View Your Practice Site
- 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:
- 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. - Find your
aside
element with theclass
of quote. Since we learned theblockquote
element, it makes more sense to use that tag rather than aside. We'll also apply a Bootstrap setting to it.- Replace
aside
withblockquote
, making sure you change the closing tag, as well. - Add a class to the opening tag with the value blockquote. This is from Bootstrap.
- Between the end quotation mark and the —, place a closing
p
tag and remove the now extra closingp
tag after "Attendee". - Move — A Happy Attendee to a new line and place
footer
tags around it. Add a class to the openingfooter
tag with the value blockquote-footer.
- Replace
- Find the three
section
elements with the class conference-info. Make the following changes inside of all three:- From the
a
element in the header, remove the entireclass
attribute including its value of highlight-link. - From the
figure
element, remove the entireclass
attribute including its value of teaser. - From the
img
element inside the figure, remove the entireclass
attribute including its value of teaser-image.
- From the
- Moving back up the HTML, find the
div
that contains a hyperlink labeled "Register Now". Make the following changes:- Remove the entire
class
attribute from thea
element including all of its values of highlight-link button button-alt. - Surround the words "Register Now" with the opening and closing tags for
button
. Now that you know how to make form elements, usingbutton
is a more appropriate choice. The line should now look like this:
<a href="/register.html" target="_blank"><button>Register Now</button></a>
- Remove the entire
Let's turn to your style.css file make the changes necessary to implement complex selectors.
- 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:- 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 thea
. Here's how the first two should look:
.conference-info > header a { color: #eeeeee; } .conference-info > header a:visited { color: #eeeeee; }
- Replace
- To the fourth of these selectors (the one with
:hover
), add the propertytext-decoration
with the value of none. - Next, find the selector for
.button
, which should be closely followed by a selector for.button-alt
. Make the following changes:- 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. - 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:- Remove all four of its existing properties.
- Add a property of
color
with the value #eeeeee - Add a property of
padding
with .5em on the top/bottom and 1em on the left/right.
- Delete the entire selector and properties for
- Add a new selector of
#introduction button:hover
with the propertiesbackground-color
orange andcolor
#000000. - 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. - Find the selector for
.quote
, which should be closely followed by selectors for.teaser
and.teaser-image
. Make the following changes:- Change the selector for
.quote
to#introduction blockquote
since we changed the aside in HTML. Modify thepadding
property to have .5em on ALL sides. - Change the selector for
.teaser
to.conference-info figure
. Add a property to it to setmargin-bottom
to 1.5em. - Change the selector for
.teaser-image
to.conference-info figure > img
.
- Change the selector for
- Within your first media query that has a max-width of 992px, change the selector for
footer
to.sitefooter
. - 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.
- Open the HTML file "register.html".
- Below the list for "Why Attend" (following the closing
</ul>
tag), add afigure
element. Inside the figure, add animg
element with thesrc
of https://jasontmickel.com/dci108/inclass/offer.png and analt
attribute of Limited Time Offer. - Go to your CSS file "style.css" and find the CSS for your registration page and the form elements.
- 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 withmargin
of auto andheight
of 320px. - Add a selector for
#reginfo figure img
, and add the following properties:transform
of scale(50%) rotate(-20deg) translate(2%, -45%)transition-property
of transformtransition-duration
of 1stransition-timing-function
of ease-in-out
- Add a selector for
#reginfo figure img:hover
and add a property oftransform
with the value scale(60%) rotate(-15deg) translate(2%, -45%). - 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 oftransition
with the value border .5s ease-in-out, border-radius .5s ease-in-out. - Add a selector for
.formfield:hover, .formfield:focus
. Add properties:- A border that is 2px wide, solid, and the color rgb(115, 53, 39)
- Rounded border corners of 3px
- 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:transition-property
of background-color, color, transformtransition-duration
of .5stransition-timing-function
of ease-out
- Add a selector for
#regform button:hover
with the following properties:- background color of rgba(115, 53, 39, .2)
- color of rgb(115, 53, 39)
- outline of none
- transform of scale(110%)
Your latest style.css file should look like this: