Responsive Landing Page Tutorial - HTML/CSS

Key Takeaways

hey there welcome back to web dev simplified I hope you're ready to make an awesome-looking web page because of today's video we're gonna take the web page we design in the last video and actually build it using HTML and CSS and don't worry if you haven't seen the last video you don't need to see it to watch this video but if you're interested in learning the design process behind this web page we're about to build make sure to check out that video linked in the description after you're done watching this one also if you're new to the channel make sure to subscribe for more videos of me simplifying the web for you let's get started now to get started here are the two designs that we created in the last video we have our desktop version as well as our mobile version and the very first thing that we need to do before we can get started is actually export all of the different images and assets that we need so for example all these icons that we need to export into our project that we're going to work on and this is actually really easy to do inside of figma all you need to do is just select the icon come down here and click export and we want to make sure we export these as SVG so we select xvg and then just click the export button and it'll export it for us but i've already taken care of that and exported all the images inside of this images folder here inside of our project also I have the video that I'm going to be using for this video section as well as the thumbnail for that video and lastly I have the font that I'm going to be using for this project stored in this fonts folder here again you don't need to use these exact assets that I have but if you do want to use these exact assets I have them linked on my github repository which is in the description down below where you can find all of these different assets that I have used here as well as the final code for the project now with all that out of the way all the assets taken care of let's actually work on building the page that we need and the very first thing we need is an index.html page so to do that we can just come up here create a new page index.html and to get started with the boilerplate just type exclamation point and hit enter and that'll build it all out for you if you're using something like the S code with an installed let's crease the size here a little bit and you may notice that I also have this file over here called normalized CSS this can be found if you just Google normalized CSS or you can find it on my github where I have this entire project linked but essentially what this does is it defaults the browser to have some really nice defaults such as a better line height such as no margins on the body and things like that which makes it just easier to work with your project across different browsers it's a great CSS file that I include in almost every project that I work on so the first thing we want to do is actually link that inside of our head here let's expand the room that we have to work with add that wink tag make sure we put an HR F here and we want to link this to normalize CSS and we first want to tell it here that this is a stylesheet so we'll say rel is going to equal whoops style sheet just like that so now we have our normalized CSS being included inside of our documentation also we can change this title here we're just going to change it to web dev simplified since again this is a site for my email signup list and now let's actually look at what we need to build as you can see we have our header we have our main section here with the email this is the main input area and then we have the main section that kind of describes all the content as well as has the video for our product so let's first focus on building out the HTML for this header section so what we know we need to do is we need a header tag because this is our header and inside of here we're gonna have three different sections we're gonna have the top section which is our brand icon our title or in our subtitle and if you remember when we designed this we actually used a grid layout to lay everything out so first we want to wrap everything inside of a grid so let's just create a div to do that we're just gonna give it here a class of grid for now to work with and we also going to give it another class of dark header because this is going to signify this is everything in the dark section of our header because our header is actually broken up into this dark section and this light section so we need to make sure we differentiate between the two so now instead of here what we know is we have a grid and that grid is going to contain essentially this section which is all in the same grid is just going to be called our content so we're gonna create another div we're going to give a class of content and this is going to be where we're going to put everything in this top section of our grid this dark blue area so first let's create our row that has our brand information we have our icon which is an image in here logo dot PNG and we also have in here the text so first let's create a div that's kind of wrapped both of those and we just know that this is for our brand information so we're gonna call it our brand row and inside of here we can first put an image tag so this is going to be for our image we want to make sure that it has a class of logo so we can style this in our CSS as our logo and alt which is going to also say logo essentially this is for people using screen readers it'll tell them that this is a logo since they can't actually see the image if they're blind or in some other way cannot see all so we're going to put this source here which is going to be in our images folder and it's called logo dot PNG close that image tag off and the next thing we need to do is add in the information for our header up here web dev simplified so we're going to make this in h2 because it's not our main header for the header section but it's still really important so we're using h2 instead of H one I'm gonna give it a class whoops make sure that says h2 I'm gonna give it a class here of a brand name and then inside of here we're going to put the text web dev simplified just like that and now if we save this and we right-click this open it with live server as long as you have that intention installed you can see that we have our SH h2 being shown right here and you may actually notice that our header here is pushed down really far and that's because if we highlight this you can see we have a giant blue section which is our image and it's just because our image is really large it's not scaled down yet but that's perfectly okay we'll do that in the CSS later next thing we need to focus on is this title section this is going to be the main section in our content so we're going to give this an h1 since it's the main section of our page the main title and again a class of title so we can style this later in our CSS and we just want to give that text which is going to be exclusive course discounts there we go and lastly we're gonna have our subtitle here which is going to be slightly smaller so we'll make it an h3 it's the least important thing and we're going to give it a class of subtitle so that we know we actually going to style this in our CSS just like that and I'm just gonna copy over the text so we don't have to watch me type it out paste that in there and you may notice that in the text here our learn react today is actually italicized so to make sure that we actually emphasize that in our HTML let's leave a little bit of room here and we want to put our learn react today on a new line and we're gonna wrap this in an e/m which stands for emphasis which is going to add emphasis to this and essentially italicize it or add emphasis to screen readers now if we save that go back to this page over here you can see that it's italicized and that learn react today's section force which is exactly what we want now before we move on to styling this light blue section of our header I think it'd be a good idea to get started on styling our page with our style sheet so let's include a style sheet styles dot CSS and in our index we want to make sure that we link that so we can come in here add in a link we're just gonna put the href here which is going to point to that style CSS and it lastly we of course need to tell it that it's a style sheet using that row just like this and there we go we have our Styles our CSS being included and I'm just going to paste in here the font family text that we need essentially all you want to do is say that family which in our case has got them rounded we want to say the source of where those files are which is in this fonts folder here and you want to tell it which weight and what style it should be using for that font it's just really repetitive to type out so I've just thrown it in here for us to use now let's scroll that out of the way and go into styling this first section of our page which is going to be the body you notice that we have a little bit of padding here at the bottom of our body so we want to make sure we include that so we select our bad body here we're gonna go padding bottom we just want to put 50 pixels of padding on the bottom just so our page is spaced out from the very bottom of the webpage so when we scroll to the bottom there's a little bit of white space for us also to make sure our content is centered we're going to use margin and we're just going to set zero for the top and bottom and auto for the left and right which is going to send our content in the middle of the screen for us and then lastly we want to set the font family for our entire application so in our case we're just gonna use Gotham rounded here you can use whatever font you want and you also want to put a fallback font in our case we're just going to use sans serve as our fallback font now if we save that and go back you can see that our font has immediately changed for us now let's go back to our design here to make sure we know what we want to do and if you remember we actually created a six column design where all of the content in the header here is in the middle four columns and we have an extra column on the left and right which contains absolutely nothing and our index dot HTML we actually made sure to take that into account with this grid column here so let's actually style that with the grid class we'll select our grid here and we just want to change this to be display grid and we want to set up a six column grid so we're gonna use grid template columns and we just want to repeat six times and we want one at far and this essentially means we're gonna have six equally spaced columns because they're all going to take up one fractional unit of their so each one is gonna be one six the width of the screen and those scaled responsibly for us also we want to cut a little bit of a gap between our elements we'll use 20 pixels we want a little bit of padding zero on the top and bottom and we want forty on the left and right this is just going to make sure our content never actually touches the edge of the screen which is crucial and then lastly we want to make sure that we set the grid template areas and this is going to define where our content is going to go and if you remember in our index.html we have this content section which we want to be the middle four grids and we want nothing on the left and we want nothing on the right so we can do is we can just put a period to say we want nothing on the left and we want our content in the center for so we'll just write out content four times and then lastly another period because we want nothing on the right side now if we save that and go over here you'll notice nothing actually is working properly you'll see that everything is in the leftmost column but we want it to be in the middle four columns and that's because we need to specify by selecting that content class we need to specify the grid area here and we want to set the grid area to content essentially the same thing as we typed right here now we save that you see immediately our content is being pushed into the middle four columns of our grid with nothing on the left and nothing on the right which is exactly what we want now the last thing we want to do with our content is just make sure it never gets too large so we're just gonna put a max width on it here by typing in max width and we want this to be just a thousand pixels and we also want to set the width to be 100% so we know that it's always gonna fill the content that it's given this way if we expand our screen on this side and it becomes over a thousand pixels our content will no longer expand any farther and we'll be able to see this later when we start adding more sections to our grid containers now the next thing we need to do is work on styling that header as we see we have this dark-colored header here and we again took care of this in our index.html with this dark header class so let's actually style that now we can just come down here type in dark header and the first thing we want to do is we want to actually change that background color so we'll come in here we'll type in background color and we can actually get this from our design so if we just come in here we click on our header section you'll see that we have our fill color right here which we can just copy over we can just paste that into here make sure we put that little hashtag in the front now if we go over after we save this you'll see that we now have that dark blue color being shown up as our background which is perfect also you'll notice our text is not white so let's change that real quick we'll just type the color in here to white and with that our header section is really starting to come together now it's actually work on styling the content inside of it to be the right sizes let's look over here to make sure we know what we're doing and the first thing we want to do is style our brand row here as you see they're on separate lines and we want them to be on the same line so we can just select our brand row what we want to do is we want to change the display to flex this is gonna put them on the same line for us and we also just want to say that we want everything to be in the center so we're gonna justify and align our items here in the center now if we save that and go back you'll see it's on the same line and everything is centered the next thing we want to do is actually massively shrink the size of our logo so let's select our logo here we're gonna change the width to 50 pixels and we're going to change a margin which is going to be on the right side we just want this to be 0.5 REM this is just going to give us a little bit of space between our logo and our text now if we save that you see that a logo and our text are slightly spaced out from each other and they're centered in our page perfectly for us next thing we want to work on is our title here so we can come down here we can select our title and all you want to do is we want to increase the font size quite a bit so we're going to say font size is going to be equal to for example 3 re M just like that I hope we say that you see our font is massively larger we also want to make sure it's centered so we'll just use text-align:center save that and you see now our text is in a dead center of the screen and now you may notice that this actually isn't exactly like our design because it's on multiple lines but that's because our design is for desktop over here so if we expand this out to be desktop sized you'll see it looks a lot more like our design and right now what we're first doing is developing for the desktop so the next thing we want to work on is actually styling this subtitle section so let's come down here and select that we'll just say dotsub title and inside of here we want to dispell subtitle correctly hopefully there we go and we want to change the font size first and it's going to be of course smaller than our title so we'll make it for example 1.5 re M about half the size we want to again align the content in the center so which text align center here and we want to change the font weight because right now it's bolded and we don't want it to be bold so we're just change it to normal here now when we save that you see it gives us a might much lighter text on this which is listening looking perfect expand this out and you see it looks really great on that larger desktop sized screen but you will notice we don't have this fancy curved section that we do over here and in order to get that fancy curved section is actually really difficult to do in CSS so what we're going to do is we're actually going to take the power here of our design and we're actually gonna pull out that curved section so what we're gonna do is we're just going to take this header section we're going to copy it drag it over here so now we have a copy of this header section and what we want to do is we want to shrink it down to the smallest size possible that includes the actual bottom portion of our wave so if you can see here all we have now is this very bottom portion of our wave and this is what we want to actually export into our application and I've already done this using a slightly different looking wave than this but essentially it's the same exact concept you want to do the same thing for the bottom portion of the wave cutting off everything except for the very bottom portion here of our wave so we can include that in our application and you want to make sure again that you do this as an SVG so now if we look over here I have that dark background SVG and light background Viji which are going to be used for this section and what we want to do is we just want to add a div to our container here so let's add another div we're gonna make this after our dark header here we're just gonna put it down here and we're gonna give this here a class which is gonna be dark header divider because this is going to be the wave that divides all of our content and we don't need anything inside of it now we can go back into our stylus here and we can actually select that dark header divider so we can set a dark header divider and all we want to do is we want to first set the background image so we can come in here background image we're gonna set it to a URL and this URL is going to be in our images folder and it's called dark background about SVG now if we look over here save our application and you'll notice that nothing's actually showing up and that's because we need to make our dark header a little bit bigger so to do that we'll just come in here we're going to set a height to 150 pixels and now if we save that you'll see that our wave is actually being shown up in our application but there's a little bit of spacing between our wave and the other background in order to get around that all we need to do is just add a margin top that's slightly negative so we'll just say negative 5 pixels and that'll blend those two into each other perfectly for us you'll also notice that the color between our background here and our background up here are slightly different so in order to get around that we can just copy our background color from our dark header and paste it into the fill section of our dark header SVG and as you can see those both line up perfectly now we can close out of this scroll all the way back down and we want to make a few more changes to our dark header so that our background is positioned where we want it to be to do that we can just use background position a bottom left and what this is going to do is it's going to put the bottom left-hand section of our background image right here for us also we want to make sure that our background image always fills the entire available height so to do that we can just use background position I'm sorry background size and we want to set this to cover now if we save that it'll just essentially make us so that our background always fills all the available space that it's given to us now as we expand our page and shrink our page you can see that that wave is able to scale all the way across all different browser sizes without looking terrible in any of the different sizes and with that that's all we need to do for a dark header section of our grid now we can move on to styling the light header section with the email field so in order to do that it's going to be very similar to our dark header section all we need to do is come down here below our divider what we want to do is we want to have first a div that's going to have a class here of light header because it is going to be the light section of our header and again that same exact grid class we can close that off and again we're gonna want our section to be inside of a content here so we're just going to have a div with the class of content and in here we're gonna have a forum for our email and our button so let's create a form this form is just gonna have a class which is going to say email form and we don't really have any action that we can post to right now but if you're doing this for a live site you would want to put in action here or something like slash email and you'd want to have a method which would be for example post we can close that off enter down here let's make our screen a little bit bigger so it's easy to see everything there we go and now instead of here we want to put our input so we can just have an input this is going to have a type of email and we want to set a name of email so we can get it on our server when we submit it and lastly a placeholder which we're just gonna put enter your email as the placeholder it really doesn't matter what the placeholder is you can do whatever you want now the next thing we need is our join Now button this is going to be a type here of submit and the text inside of here is just going to be joined now you can put an exclamation point in there save that go over to here and you can see we have our enter email as well as our join Now button lastly if we're just gonna need to use another divider which is going to go at the very end here and this is going to be instead our light header divider whoops make sure I spelled light correctly and that's all the HTML for this light blue section of our page let's jump into the stylesheet and actually start styling it and the very first thing we can start with is our light header because it's going to be very similar to the dark header instead of here we want to change the color to be white for our text and we also want to change here our background color background color and we want to make this our brand color which in my case is just going to be zero zero a AFF that's that light blue color that you can see on the right side here and you can just pull this from figma if you need now if we go over look at our page you can see that we have that nice blue section but the problem is that this blue is actually getting cut off by our background for our div up here we want our blue to expand all the way up to our dark blue section over here and in order to do that what we need to do is we actually need to set some padding on the top so we're going to say we want to have a padding on the top which is going to be 500 pixels and we want to have a margin on the top which is negative 500 pixels and essentially what this is going to do is it's going to Pat our can't down 500 pixels and then move it up negative 500 pixels but the background color will move with it so if we say that you'll see that our background is being moved up which is perfect I'm going to remove this margin and save it and you can see it adds a bunch of padding on the top of our section moves everything down but by adding the negative margin in there it moves everything back up to where it used to be but of course this is a bit problematic because we don't want our light blue section to be showing overtop of our dark blue section but we can use z-index in order to fix that problem so instead of our dark header here let's change the position to relative so that we can actually use the index and we set the z-index here to be 1 and if we save that you'll see that it's now being shown up over top of our light blue let's just copy this go down to our dark header divider and do the exact same thing we'll paste that in there and save it and now you'll see both are dark header divider as well as our dark header are being shown up over top of our light blue section while we're on the top of it headers let's actually do the exact same thing that we need to do for our light header I'm just going to copy all of this because our white header is almost exactly the same as the dark header but our image is going to be slightly different we're going to use the light backgrounds through the dark background and we don't actually want to position this relative or is the index because we want it to be behind everything now if we say that you see their light header is being shown up down here as our divider and again even when we scale our browser to all different sizes you'll see that it looks really good on all available sizes that we can get to work on actually style in our email form down here let's look at our actual design so we make sure we know exactly what we want to do then come down here we created a class called email form which is going to be the container that wraps both of our elements and essentially what we're going to do in here is display flex to make it easier for us to position our elements and make them grow and shrink responsively we also want to make sure everything is always in the center so will justify the content in the center we're going to put a margin top here of 4 REM what this is going to do is if we come over here and save it you'll see it's just gonna push our content down it gives us some spacing from the top section of our container which is really useful also we want some spacing from the bottom so we're going to use margin on the bottom in our cases are just going to be one REM and it's just going to make our bottom section a little bit longer which is perfect lastly to increase the font size we're just going to do font size here of 1.75 REM and save that and you can see now our font size is much larger now with the styling of the actual container done let's work on styling our elements the first thing we want to style is the email form input so we'll just select that and let's go back over to our design make sure we know exactly what we want to do and we want to first set the background to white because as you can see on the right hand side we have a background of white on our element and we also want to change the color here of our text and this color is the exact same color as our dark background so let's just copy that all the way down here for our color paste that in and you're going to save that if we look back over here you'll see we have the white background and when we go to type in the box you'll see we get that blue colored text which is perfect now go back to our design just so we make sure that we're following along everything perfectly and we can come in we can't set a border in our case this is going to be a two pixel solid black border and again you can pull this directly from the design when you click on this it'll tell you that it's a toothpick so solid black border also we're going to want to set the border radius which in our case we're just going to use point 5 p.m. this way our border radius actually scales with the size of the text of our input element we also want to add padding and again we're going to do this using e/m so that it scales at the size of our text so we're going to see is 0.5 a.m. and 1:00 a.m. now let's save that and look back over here to see what it looks like and you can see it's added a lot of extra spacing around our element for us and really just made it look a little bit beefier and I will come back over here the last thing we need to do is just add a little bit of spacing around everything so we're going to use a margin on the right hand side this is just going to be 1 a.m. and we also want to make sure we remove the outline from the element for when we click on it and of course we want to make sure that this element our input grows as large as it can so we're going to use flex to grow and we're going to set it to 1 this way it's just going to be as large as humanly possible as you can see it's very large and our button is very small now since we removed that outline for when we click on the element we want to make sure we add some kind of visual indicator for when we focus on this so we'll say email form input and we want to make it so when we focus on it that we actually changed the background color so we'll come in here we'll change the background color and you just want to use a light ish gray color in our example we're just gonna use DC f3 FF and an easy way to actually select these Styles is if you just come over here you can just drag this around wherever you want and whatever it lands on that's relatively similar it will work for you so far example when we click you'll see that it slightly changes the color of our input element just so the user knows that they're actually selecting the input element now with that out of the way let's move on to styling the actual button here so we'll say email form button and this is going to have a color here of white as we can see for my design over here we have a white color and we also have a background color which is almost completely black it's 1 1 1 which is just a really really dark grey and we have a border here which is going to be our 2 pixels solid white border it kind of mirrors our input element border and our border radius and padding we actually want to copy this exactly the same as what our email form input does so that we have a very consistent feel between the button and the actual input element it corresponds with now let's save that and look over here to see how that looks and you can see that it's already starting to look pretty good but we want to make it a little bit wider so we can do is we can just set a max width here of 250 pixels so it'll actually grow to be that 250 pixel size when our screen is larger as you can see if we expand over screen you can see that it grows to that size but as soon as it gets there it doesn't grow any farther which is perfect for our use case also we want to make sure that when we hover over this we get the pointer icon so we're going to come in here cursor:pointer so now you can see we get the pointer icon when we hover and very lastly what we need to do is select our email form button we want to say when we hover over the button or when we have actually focused it so email form oops button focus what we want to do is we just want to change that background color so we're going to come in here we're going to say the background color we're just gonna make it 333 which is just a lighter gray color and when we hover it over that it makes it very obvious to the user that this button is clickable and hover able now with that header section completely done it's time to move on to the main content of our page which is this video element as well as these benefits over here let's do that in our index.html outside of our header this is going to be the main section so the main content so we want to put it inside of the main and we have two sections we have this details section as well as this more general section so let's create a section here and this first section is going to be our grid for our video so we're gonna get it a class of grid because as I mentioned everything inside of our design is based on that same as that grid but this grid is slightly different the way the elements are laid out so we're going to give it a special class a grid video so we can style this grid to be the 50-50 grid as opposed to the centered grid next we want to actually put the video inside of here so we'll just say our video and this video is going to have a poster which is going to be our thumbnail so we have our thumbnail JPEG and this essentially just the thumbnail that's going to show up over the top of the video also we want to just say that we want to use controls on this video this just allows the user to play and pause the video as they see fit and the video is a little bit weird because you actually need to put the video source inside of here so we're gonna say that the source here with a source tag is going to be our thumb whoops not them know about JPEG it's gonna be our video mp4 and we need to tell it the type which in our case is going to be video slash mp4 which is the type of file that we're using now if we save that and go over here you can see that our video is being shown up it's very large we'll change that later but our video at least is being shown up next thing we want to work on is the HTML for our benefits section so let's actually make a div which is going to contain that we'll give it a class here there's going to be benefits whoops then if it's section just like that and make sure we spell benefits right there we go close that off and inside of here we're gonna have a div for each one of our benefits so we're gonna give it a class here of benefit just like that and inside of here whoops inside of here make sure we close that off we're going to have our image tag as well as our text so let's put first our image we're going to give it a source and this one's going to come from our images folder and this very first one is our email icon so we use email icon dot SVG we're also going to give it an alt again this is for screen readers so we just want to describe what the image is so we're just going to say that the image is an email icon we can close that off and then after here we're gonna put our text which is just email updates just like that if we can calculate down a couple times copy that down make sure we fix our indentation there we go and this next one instead of being email this is going to be our money icon make sure that's spelled correctly money icon there we go and this last one is going to be our extra content one so extra content icon and we want to make sure we change our alt this one here is going to just say money and this one down here is going to say extra content icon and we can change our text special discounts this is the real fun part of the video isn't it and exclusive whoops exclusive discounts there we go make sure I spell exclusive right and there we go now we can actually move on to styling these two sections of our grid the first thing we need to do is tell our grid how we want it to look so let's go up to where we define the rest of our grid information up here unless select our grid video that we just created and inside of here what we want to do is going to be slightly different our grid template areas we no longer have that content section what we have is we have a video which takes up half the screen so we'll view three videos and we have benefits which takes up the other half so we'll just do three benefits here so essentially what this is saying is the first three columns should be our video and then the next three columns should be the benefits now in order to get our video to actually show up in the video section we need to select our video we can just do that by saying grid video and our video element what we want to do in here is we just want to set the grid area now we want to set it to be video now we can save that and see how that looks and you can see it actually doesn't really change anything and that's because we need to make sure we define our width for our video to be 100% so that never expands past 100% of the container and as you can see now it's showing up on half of the grid which is perfect also just to make sure our video never gets too big if our screen gets really large we just want to set the max width here to 900 pixels and now when we expand our screen you see that our video is never going to get too large it's always going to stay under 900 pixels which is perfect for our use case another thing we want to do is you noticed when I expanded this very large you see our content is right up against our divider here we don't actually want that we want to make sure we shrink that down and a little add a little bit of margin so we're just gonna come in here at a margin of top which is going to be 50 pixels just like that and we also want to make sure our benefits are aligned in the center of our actual video so we're gonna come in here and align our items in the center and if we save that you see that everything is lined up Center so now our benefits over here are lined up in the center with our video now with our video completely styled we can move on to style in our benefits section and actually making sure we add that grid area to it so let's come down here all the way to the bottom we're just gonna call it the benefits section class that we created and we want to first add that grid area which is going to be benefits just like that and if we save that you immediately see this expands out to fill that entire section of our content which is great also if we want to space it out a little bit from our video so we're just gonna use a margin on the left here which is going to be 3 our am whoops 3 our am just like that and you can see now it's spaced out from our video which is perfect also we want to increase the font size drastically because this is the main point of our page as you can see over here the font size is really large so let's actually go down and left our benefit just like this so each individual benefit what we want to do is we want to take the font size we want to increase that to three REM and we also want to add a little bit space between them so we use a margin bottom of three REM as well and this is not going to look very good on this smaller screen but when we expand to our larger screen you can see that it really pops and fills up the information on our screen so let's shrink that back down so it's easier to work with and what we want to do is we also want to use display flex so we can easily align our items inside of our benefits section so to do that we can just come up here and we first want to justify here the container and we want to justify this using flex start this is just going to make sure our items line up all the way on the left hand side when we expand full screen you see they wind up on the left instead of lined up in the center of our grid this is just to make it look better on full screen and then instead of our benefit here we're gonna use the display flex and we also want to make sure here we are aligning our items in the center so we'll say Hawaiian items Center and this is just going to make sure that our content is all on the same line as each other and everything is perfectly centered also let's make sure we have that semicolon so now you can see our image is perfectly centered with our text and what our image is looking a little bit small as you can see it compared to our text so let's actually select that will say benefit we want to select the image and all we want to do is we want to change the height in here to be three REM this is the exact same size as our font size so they should look exactly the same and if you say that you see that this actual icon if we expand our screen is the exact same size as the text so they line up really well we just need to add a little bit of margin so we'll say margin on the right hand side and we just want to add for example two REM and that's just going to space out our icon from our image now let's expand this to be full screen size and you can see for the desktop this is looking almost exactly the same as our design over here is looking which is perfect now we can finally move on to the last section or of a web design which is going to be this benefits details section down below let's shrink down our browser so that we can actually start working with this go into our index dot HTML and this is going to be a new section that we create down here and this section is again going to be a grid so we're going to make sure we add that grid class but again this grid as you can see there's a three column grid as opposed to the center grid or this half and half grid so we need to add another class to make sure that we can style it properly and this is going to be grid fit detail just so we know what grid were working with down here and we can actually apply those specific styles now inside of here we just need three different sections we need have a benefit detail one two and three so let's create a div give it a class here which is going to be benefit detail there we go if I can spell close that off perfect make sure that's actually close there we go and decide this benefit detail we have our title and our content so let's come in here create a div which is going to be for our title we'll call a benefit detail title and in here we'll put our title for example this one's going to be email updates just make sure we put this on a new line just so it looks a little bit cleaner there we go and then we're gonna have our content so for example we're gonna have a class here where's your going to be benefit detail text and in here I'm just going to copy over this text because no one wants to watch me type that all out and there we go that's all of our text make sure it's indented properly and now all we need to do is just copy this and do it two more times so I'm gonna copy this code paste it down two more times make sure I end in everything properly there we go and this is instead of email updates this is going to be special discounts and I'm gonna copy this text inside of here paste it down and as you remember in here we have all future bolded so what we want to do is you want to find that section put it on a new line and we're just gonna use a strong emphasis on this put that all future section in there this is going to bold it and add emphasis to this section for us and now if we save this look over here scroll down you see that all future is bolded for us now the very last thing we need to do is in our last section here we want this to say extra content and we want to just copy this text over there we go indent that properly save it and now we have all of our different text inside of this section here as well as our headers and with that our HTML if the application is complete we can move on to style in our application and the first thing I want to do is actually style our grid so we can say grid benefits detail which is the details section for our grid it's actually details here oops just detail and we want to do a margin on the top of for our a.m. now if we say that you see it just based our content out down here from the content over here which looks great now we can actually move on to styling the individual benefits themselves let's scroll all the way down to the bottom here so that we have a distinct section for our benefit details we're going to select that wrapper class that wrapped each one of our individual details which is called benefit detail and in here we want to say that it's going to span two columns of our grid so we're gonna say grid column span - if you say that you see immediately everything is spanning two columns and it looks a lot more like a design over here the next thing we want to do is we want to actually add a little bit of margin between these elements so we're just gonna say a margin here which is going to be to our a.m. and if we save that come over here you see our content is much more spaced out from each other next we want to select our title so we can say benefit detail title and inside of our title we first of course want to align our text in the center and we also want to increase that font size in our case we're just going to use 1.75 REM and we want to change the color because in our design over here we used a 3 3 3 color which is just a whitish gray color it's fairly dark and lastly add a little bit of margin to the bottom we'll just say to REM to space out our header from our content now if we save that go back you can see immediately we have these nice headers which are spaced out from our content below next thing we need to do is actually style our detail text and inside of here we want our font size to be slightly smaller so we're just going to use 1.5 REM instead of 1.75 the color is also a slightly lighter which is just going to be 4 4 4 there we go and we want the font weight as well to be a lighter font weight so we're going to use lighter to make it less bold and if you say that you see immediately our text is larger thinner and a little bit lighter colored now if we expand here you can see that Lois looks really good on our desktop view and actually if we compare this to our design over here and over here our page looks exactly the same on desktop but we still have a lot of work to make it look good on the smaller mobile scale because right now this is very unusable and when you're designing a really easy way to figure out where your breakpoints should be on where you should change your design based on the size is if you just inspect the page using the browser tools you can see when you expand it left and right in the top corner you see that we have the size of our page so let's expand this to be almost the entire size of our page and as you can see when we drag this bar you can see this width of our page at the top and when we get to around let's say about this size 1200 pixels we actually just want our content to expand all the way to the edges of our side because right now this starts to get a little scrunched when we get below that you know 1200 pixel range so we're going to make our first cut off at this 1200 pixel number let's close that off you expand this so we can start typing our text and then come down here and we can use media queries for that so we can just say media we want to say when the max width whoops max width is 1200 pixels so essentially for everything under 1200 pixels this code is going to be run and what we want to do is like I said we want to expand these grid sections to take up the full width so we could just come in here we can select our grid and we can just make it a one column grid so we can say that our grid template columns they're just going to be one fr and we want the grid template area for that so we can say grid template looks template areas and the only thing in here is going to be our content so we'll just type out content like this and as you can see immediately that makes all of our top sections expand to full width but our bottom sections don't quite look right so what we want to do is we actually need to modify our other grids so we're gonna take our grid for our video here what we're gonna do is we're again going to change this to be a one column grid so we're gonna say our grid oops template columns is going to be one fr what we want to do is we want this to be a two line two grid because we want this video on the top section and our ENTER benefits below it so we can use our grid template areas to do that so we'll say grid template whoops template areas and the first thing we want is our video so we'll put that inside of quotes and then after that inside a separate quote will put benefits if is essentially says row number one is video and row number two is benefits now if we save that you can see immediately our benefits are moved below our video but our benefits are now no longer in the center of our page we want them to be centered with our video so that's actually really easy to do we can just come down here we can say benefits section in this benefits sections what we want to do is we just want to justify the self in the center if you save that you see it now centers our benefits and we also want to add a little bit of margin so we'll say margin on the top is going to be two REM and we're going to remove the margin from the left of this so we're just going to say margin left of zero now if we save that you can see that's all looking really good the last thing to notice is if we scale this up to around that 1200 pixel size where everything gets cut onto the run line which is right here these actually don't look that good when they're on one individual line we want this grid to still be six different columns so we can just come down here and select that we can just say we want our grid for our benefit whoops benefit detail we want this to be a grid template columns of six rows so we can just say repeat 6 times one fr and there we go now you can see that it's lined up on six different columns like this which actually looks much better when you're at this size right here you'll also notice that our video is not properly centered so let's actually make sure we change that as well we can just select that by doing grid video video and we just want to justify the content ropes justify itself sorry we want this to be in the center now when we expand our screen you see the video stays in the center of the screen just like this which is exactly what we want now that everything looks fairly good at this size let's actually hunt for where our next breakpoint should be we'll inspect the page make sure we expand this so we can see everything so here is our 1000 1200 break point where everything cuts off to the next screen so if we expand down here and we look at this section down here because we noticed that this is starting to get kind of scrunched as soon as we get to around this 1000 pixel mark you can see that it really starts to become hard to read and we probably want to expand this to be just the same as the rest of our grids so let's actually create a break point at 1000 pixels to do that let's incr