From the course: Creating a Responsive Web Design

Unlock this course with a free trial

Join today to access over 22,400 courses taught by industry experts.

Atmosphere section

Atmosphere section

So now we're going to style the atmosphere section. We're going to bring in a graphic down here just like we did with the SPG graphics here in section main and the header, and then we're going to position the type over toward the right. So let's go back to our CSS file. We'll start by targeting section.atmosphere. So we'll target the main container. We're going to set a position property of relative. We're going to position items inside of this. Next, we'll set margin bottom. We'll set 40px. Then we'll set padding top. We're going to set this to 50px. And now instead of assigning a background color, I'm going to put a border on the top of this element. That will help separate the items on the printed page, but we don't want users to have to print a full color in the background. So we'll define border top. We'll set 1px, solid style, and for the color, we'll pick a medium gray. So #, and then a c for each of the red, green, and blue properties. Next, we'll add a psuedo element of…

Contents