css

06. Custom Jumbotron 👩‍🎓👨‍🎓

Custom Webpage Jumbotron

In this activity, you will turn the default Bootstrap 4 jumbotron you have now into a professional-level, attention-grabbing image.

Custom Jumbotron Solution

Instructions

  1. Add the rockBackground class to the jumbotron <div>.

  2. Again, you will be using this class to style this element.

  3. Add a new <div> with the class jumboCopy within the jumbotron <div>.

  4. Move the jumbotron’s content within this new <div>.

  5. Update the copy and button text in the jumbotron to reflect the design above.

  6. Note: Feel free to add a more compelling description.

  7. Add the following CSS within a selector that targets the jumbotron <div>:

Jumbotron CSS Properties

  1. Add a selector for the jumboCopy class with the following properties and values:

jumboCopy CSS Properties

Great work!

✅ Solutions

Solutions Click Here