Join Chris Converse for an in-depth discussion in this video Styling the hero captions, part of Creating a Responsive Web Experience.
Next we're going to style the content inside…of the caption area, inside of the hero.…So back in the myWebsite project let's take screen_styles.css inside of…our CSS folder, and open this up in our text editor.…Now the rules inside of this CSS file, mostly applied to text…and any design elements that are consistent across all the screen sizes.…So inside up here, lets scroll down to the bottom.…Let's hit a few returns, and…in here we're going to target the caption inside of the panel inside of the hero ID.…So, first we'll start with #hero .panel .caption.…
We're going to set the text color, rgba.…We're going to set this to 65% white, so 255,…255, 255, then .65. We're going to set a line…height of 14 pixels. Next, we're going to target the h3s…inside of the caption, so #hero .panel .caption h3.…We're going to set color to white.…Font size is going to be 1.2 ems. Then margin bottom of five pixels.…
Next we'll target the paragraphs.…#hero .panel .caption p. We'll set margin bottom of five pixels.…Next, we're going to target those anchor links inside of the…
- Modifying the graphics
- Adjusting the CSS for the navigation
- Loading content with jQuery
- Loading alternate content based on screen size
- Animating the hero panel
- Maintaining support for Internet Explorer 7 and 8
Skill Level Intermediate
Q: I don’t see the original course in which this course is based. Where is the final project to the previous course?
A: The exercise files, both premium and free versions, now contain a copy of the previous course’s final project.