Learn How To Build A Website In 1 Hour!

Key Takeaways

in today's video we're going to be going over all the HTML and CSS required to create this Spotify inspired website let's get started now before we get started actually coding this website I want to give a huge shout out to Ed over at the dev ed YouTube channel who actually came up with all the designs for this site and they look absolutely amazing if you want to learn how to create these exact designs make sure to check out his video on creating the designs for this website what you're gonna be linked in the description below and the cards above so now that we got that out of the way let's get started actually coding the website to get started I just have Visual Studio code open on the left here and I have our design open on the right so that we can reference it and inside of this images folder I have all the images that I've extracted from this design that we're going to need and all of these can be found in the github which is linked in the description below to get started we just need to create a new index dot HTML page this is just going to represent our landing page on the right here so you get started with a typical boilerplate HTML in Visual Studio code just type exclamation point and hit enter and it will enter in all this default information and since our application product is called Soundwave we'll use sound wave as the title of our page so now let's open that up using live server and as you can see we get Soundwave as our title and that looks perfect let's go back over to our mock-up so we can see what we need to design as you can see at the top here we have our header which is going to be the same on all of our pages we have our three different pages and all of them have the exact same header and as you can see our background color is the same and the layout of our content is also the same between all of our pages we have content on the left and then content on the right and that's the same for all of our different pages so we're going to be able to reuse a lot of our code on all of our different pages lastly the similarities is we have a footer on two of our pages which we can duplicate between the pages and again share more code so to get started let's just work on creating this header that we see up here because that's going to be shared between all of our pages the first thing that we're going to want to do is we're going to want to use the header tag instead of HTML to define that we're going to be using the header and then inside of here we're going to want to put our link for our home page which is going to be the sound wave section we see here so we're just going to have one we want the h4f of this to be going to the homepage which is just going to be a slash and since this is our brand logo we're just going to give it a class here of brand logo so that we can access this in our CSS then inside of here we want to put both our image and our text inside of here so we'll put an image tag and we're going to give this a source here which is just going to be inside of our images folder we have logo dot PNG close that off and then after that we need to put our actual text so we'll just do that inside of a div what we're going to give a class here of brand logo name so that we noticed the name of our brand logo and we'll put the name Soundwave in there if you save that and look over here we have our logo and our text which is perfect next we want to work on the other section of our navigation which is going to be these two links over here and since these are actually map elements we're going to want to put them inside of a nav element and then we're just going to make an unordered list with some list items for each of our different elements and again these are links so we're going to want to use anchor tags for these and this one is going to be pointing to our discover page which we were going to create later so it'll point to discover HTML and inside of here we're just put discovered and we can copy that and just do the exact same thing of for join instead of discover now as you can see we have our two different links here and our header has all of our different HTML content that we need for it from here let's create a new file we'll just call it styles.css and this is where we're going to put all the styles that we're going to share between all of our different pages also let's include that style inside of our header here so it's going here at a link tag give it an HRA of styles dot CSS and we need to tell it that this is a stylesheet so now we're actually importing our styles and the first thing that I want to do is use box sizing across our entire application because that'll make sizing things so much easier so we just want to do that for all of our elements inside of our entire application including the pseudo elements and we'll just say that we want a box sizing to be border box because this will just make widths and Heights much easier to deal with next to make sure things are actually working let's style our background color for our body so we can select that color straight here for mark does copy that over select our body she's gonna set the padding to zero the margin to zero and we want to set the background color to be this color that we just copied over and if we save that you should see that we're now getting that nice dark bluish black color on our background next we actually want to import the font that we're going to be using which is coming from google fonts I've already copied over the URL that we need to paste in here as you can see we're selecting the sizes 400 500 and 700 for this Poppins font next we can just set our font family for our entire application here to be using that font we can just save Poppins and we'll give it a default fallback font a sans serif if for some reason cannot download this Poppins font also I'm going to slightly increase the font size of our application just so it's easier for you guys to see now that we've got a lot of that boilerplate out of the way let's start actually styling this navigation the first thing we want to do is style the brand logo that we set apart at the beginning we'll just make that a display of Flex so that our items will be right next to each other side by side we're going to align them in the center so that the text will line up perfectly in the center of the logo and will slightly increase our font size here to 1.25 a.m. and if we say that you see that we now get our font size showing appear slightly larger and to make our color of it actually show up white we'll just use a color inherit and then on our body we'll set the color of our entire application here to be white now if you say that you see we're getting white text for our link instead of that bluish purple color also if we want to get rid of the underline for our link we just use text decoration here set that to none and now that's looking really great now we can select our actual logo name here which we just called brand logo name and we just want to give this a little bit of a margin on the left side but it's not quite right up against our logo there and if we say that we say that that now looks pretty good and a lot like our mock-up next we're gonna want to style our actual navigation here so instead of our HTML let's go to our nav and we're just add a class here of main nav so that we can select this easier now we can just select that main nav class and start applying the Styles we want for our navigation and main name selected we want to select the UL element inside of it change the display here to be flex remove all the margin and padding that are defaulted to UL elements change the list style to none to remove those dots on the side and that's all we need to do for our UL and as you say that we see that everything is nice and close together next what we want to do is actually select our anchor tags themselves so we can style them to be spread apart and have the different coloring that we want first we can set the color to inherit so it'll be a white color remove the underline by using text-decoration:none and lastly we can just add a little bit of padding here to one REM and if you say that you see that we now get nice little padding around of different elements also we want to style them slightly different when we hover over them so we can select our main nav here again select the anchor tag and when we hover it all we want to do is just change the color to be slightly darker and we're just going to use this slightly darker gray color and if you save that and we hover over each that we got our slightly darker gray color to indicate that these are hover a bowl and selectable the last thing we need to do is make it so that these two elements are on the same line so to do that we just want to add a clasp to our header here and we'll just call it main header and now inside of our CSS we can use that main header class to select our header and all we want to do instead of here is just changes so that everything is lined up side by side easiest way to do that is by using flexbox so we'll display it as flex we want to justify our content with space between which is just going to push these elements as far apart as possible and lastly we want these items to be in the dead center vertically and if you say that you see that our items are now as far apart as possible and centered so that everything is in a nice even line across all so in order to give our heading a little bit of space from the top of the screen and space below it we're going to give it a height here we're just going to give it a height of 140 pixels now as you save that you see that it's pushed away from the top of the screen and there's also space below it where items won't right up right next to it and if we look at our design you can see that it's just like what we have here also if we look at our design even more you can see that our items only expand to a certain width on our screen and don't go all the way to the very edge screen and as you can see everything on the entire page falls inside of this container that is just a certain width maximum so let's implement that into our page in order to do that we can just add a class to our body element here and we're just going to call it container then instead of our CSS we can just select that container class and all we want to do is give it a max width here which we'll just set to 1200 pixels we want to give it a margin of 0 on the top and bottom and auto on the left and right which will just Center everything in the center of the screen if it's wider than 1200 pixels and we want to give it a little bit of padding away from the edges of our screen so we'll just give it 40 pixels of padding on the left and right now if you say that you see that our items are pushed in slightly from the edge of the screen and if we increase the size of our screen you see it that once it gets large enough they just stay dead center without growing any further and that's exactly what we want it even works when it gets incredibly small or incredibly large the next thing we want to work on is the actual sizing of the content and our pages as you can see each one of these pages is essentially a full height page at a minimum as you can see on our desktop view we want this to be a full height page another full height page and another full height page so in order to do that there's a nice little trick we can use with flexbox to make this incredibly easy first we need to go to our body element up here and we need to set the minimum height of our page to be 100 view heights essentially this just means it'll be 100% of the height of the screen as the minimum height of the body which means all of our content will be pushed from the top to the very bottom at a minimum but it can grow past that if for example we're on a small device such as a phone we're then going to use a trick with flexbox by adding this class here called full height grill and inside of here all we're doing is changing the display to flex and the Flex direction to column by doing this we essentially don't change anything about how the items in our page are laid out vertically sits column changes it so that flex box plays things out vertically instead of horizontally but we do add the ability to be able to add in flex grow properties in order to make one element of our section grow to the entire height of our page in our case that is 100 view heights so in our example if we just go to our index here and make our body be our full height container or full height grow I think is what we called it there we go and then our next section that we create after this header we just want to give it a flex grow of 1 and we will take up the entire remaining height of the page let's just show that quickly it with a div here we're just gonna rudely style it here with the style tag will put Flex grow to be 1 and we'll just put a background color of red in here and if we close that off and save you'll see that that red dip grows to fill the entire height of our Flex height grout container which in our case is 100% of our screen if we removed flex grow from this you can see that it no longer grows to the full height so using this full height grow class which all it does is display flex and flex direction column we can create a single section of our application that fills all the remaining height of our page and this is going to be incredibly useful when we design these element sections of our different pages so now let's work on creating this element section here the first thing that we need to do is just remove this div here and add in a section which we're going to give a class of home main section since this is the main section on our home page and inside of here we have essentially two sections we have our left section and our right section so let's create two divs for these different sections I'll have one div here which is going to be in our image section and we'll have another div here which is going to be our text section and this div here we're just going to give a class here of image wrapper and instead of here we're going to put our image of the lady but we don't want to use an actual image tag such as this with a source because we need to do some fancy tricks of scaling this so that it'll always show up at the bottom of our screen so instead we're going to use a div with a class of lady image just so that we can uniquely identify this and we're going to use a background image property to put the image exactly where we want it inside of this div then inside of this second div we need to put all of our text content that we see over here the first thing that we're going to have is our h1 which is going to have a subtitle since this is the main title of our section and in here we'll just put feel the music if I can type there we go and then we'll want to have a span and then span we'll have a class of subtitle and the reason we're using these classes of subtitle and title is because as you can see throughout our application we have other instances where we have a title and subtitle system so we can just reuse these classes to make our style in of these sections easier then inside of here we just want to put that text stream over 20,000 songs with one click there we go I'm very slow typing unfortunately and then lastly if we just want to put our button which we're going to use an anchor tag since this button is just going to link to a different page so we'll give it an href here to the joined HTML page which we still have yet to create and we'll give it a class of button so that we can style it as we want to then the text join now and if we save that and go over to our page here you see that we have our title our subtitle and our join Now button so now we can actually work on styling our different sections over here to look exactly as our design over here to do that we're going to add another style of sheet into our page this one we're just going to call index CSS and the reason we're doing this is just to make it easier to see where our different styles are inside of our application so what's going here and we'll just create an index dot CSS style sheet and this is just going to be the styles for our index page only and instead our Styles desk CSS is where we're gonna have all of our shared styles that we're using across every page still so the first thing that we can do inside of our shared style sheet is add the styles for a title and subtitle so these are going to be shared across my entire application for our title here we just want to change the font weight to be 500 since it's just a slightly bolder font than our default font the font size is going to be much larger at 3 e/m want the margin bottom to be 1 REM and the margin top is going to be 0 so if we say that you see that we now get our nice large text here which lines up a lot like with what we have over here in our mock-up next we can work on the subtitle and the subtitle is going to be very similar we just want the font weight to be slightly bolder at 500 the font size here is going to be 1 point 2 e m and we want the margin bottom to be to re M so it just has a little bit of space between it and the things that are below it and now we can work on styling our button so we can select our button here we want the color to be white we want the background color to be that blue color that we can select from our mock-up here so let's just click on this get that blue color from here and we could just paste that in just like that while a little bit of heading to it so that we have space between our background and our text so we'll just use point 7 REM and 1.5 REM to give it a nice bit of padding around it a nice little bit of border radius we'll just use a point 5 REM so that our corners are slightly rounded text-decoration to remove the underlying it around it and if we save that we can take a look and that looks pretty good and let's just change our font size here to be slightly different so we use point 9 REM for example and if we say that there we go it's just a little bit smaller now that we have those base styles out of the way let's work on our specific styles for our main section we can select our main section here by doing home main section which is that class we created which wraps everything and we want to display this using flexbox we want to align the items inside of here to stretch to be the full height of the container and then we're just going to justify the content again with space between since we want as much space as possible between the two elements our section and lastly well add flex grow to be one here since we want this to spill the entire space for a remaining height in our page and if you can say that you see that we have our content as spread out as possible next let's work on the more complicated section of our two-sided layout which is the image of the woman so we can select that by using our home main section here and selecting the image record inside of it we want to make this flexi grow as well so we can set flux ro to 1 just so it'll take up as much space as possible inside of our square left to right change the flex direction of this to be column since we're going to make it as well the display of flex and this means that it'll be a horror vertical this flex direction inside of it which will allow us to push things to the very bottom of it which is what we need to do with our image also we want to align the items inside of here to be stretched as well and we want to justify the content to be flex and which will mean it will push the image as close to the text over here as possible since it's going to push it to the right as far as possible then we can select the actual background element which is just going to be inside of our home main section we want to select the lady image and this is going to be the actual background element that we put the background image on first we can just use the background image property to use our background image so they use URL get our images folder and the landing page girl PNG ever again that's perfect expand this a little bit so it's all in one line and then next we want to set the Flex cro of this again to be a flex grow of one so it'll grow to the full height of this section it's inside of then we can give it a max height which in our case we don't ever want this to be larger than 70% of the height of our screen and we'll give it a min width which is just going to be here 30% of the width of our entire screen because we don't ever want this image to become incredibly small also we can change how the background will actually appear so we'll use background size here of contain so that way it'll fit the entire image inside of it without cropping out anything or scaling it unnaturally we can also change the background to repeat to be no-repeat since we only want the image to ever show up once and then the very last but most important thing that we can add here is the background position and we want to change the position to be in the bottom left of our container this will hopefully push it as close to the bottom of our page as possible and if you save it you see that we now get this image showing up perfectly here down at the bottom of our page and if we expand our page you can see that it'll grow as we want it to but it won't get bigger than 70% of the height of our screen and this is exactly perfect and it will shrink down really small and this is really great now let's work on styling this second section of our page we need to add a class here to that div since we didn't actually do that yet we'll just add a class here of call to action since this is the call to action of our page and now instead of our index dot CSS we can select that by selecting the main section here and the call to action section inside of that and this is going to be a lot more straightforward for what we actually want to style first thing we want to do is change the display to flux again so everything lines up right next to each other and then since we want it to be above each other we can change the Flex direction to be column and now you can see everything's lined up top to bottom so that all of our content doesn't expand to fill the entire width we can just change here our line items to be flex start and if you say that you see that not everything is the perfect width that we want and we can change our margin around this item to be one re and so that we just have spacing between our actual image and our text then lastly we want to align this text in the center of our screen so we can just use the align self property and change it to Center and this will align it in the center of its Flex container and there we go now it's aligned in the dead center of this container section of our screen and as we expand and collapse the size of our screen you see that our image is growing and shrinking as we want it to but as you can see when we get a fairly small screen size such as here our image becomes so small that the page doesn't really work with this image so let's add an immediate media query so that we can remove the image when our screen gets too small so we add an at media here and we say that one of the maxed width of our screen is 900 pixels so when the screen is 900 pixels or less run all the code inside of here and we can just select again that home named section will select our image wrapper and we'll just change the display here to be none so that it will completely remove this image from our screen then we want to change our home main section again and we just want to change the justify of the content to be in the center since we now want this text section to be in the dead center of our screen and if you save that and we shrink down our screen size you can see that as image gets to a point where it becomes too small to be useful it disappears and our text becomes in the center of our screen which is exactly perfect now the last thing that we have to add to this page are these different circular elements that you can see here floating in the background which really add a nice aesthetic to the page in our HTML we can just add three different div tags to the very bottom of our page and we'll just give them classes of home page circle one and we'll copy that down circle two and circle three and the reason that we can just throw these in our page anyway is because we're going to be positioning them absolutely on our page so they're always in the exact same spot now in our index top CSS let's actually select those home page circles so we'll start with circle number one which we're going to treat as this bottom left-hand circle here first thing we want to do is set the position to be absolute and we want to give it a specific width in our case we'll do it a width of 24 or 25 I'm sorry percent of the screen and we'll make the height exactly the same so that way we know that it'll be a perfect square and in order to make this a circle all we need to do is set the border radius to 50% and it'll be a perfect circle in order to see this element let's give it a temporary background color here we'll just give it a background color of red and as you can see we have our circle which is approximately the same size as this circle here all we need to do is actually position this circle so that it's in the bottom left hand corner of our screen so we can use the bottom property to position it 5% of the screen away from the bottom and we'll do the same thing with the left property and we're going to put it again 5% of the screen away from the left and if you say that you now see that we have our circle down in the bottom left hand corner of our screen all we need to do is get the correct color so if we copy this we can get our exact color from here which we're going to use RGB let's copy this in paste it here and with Visual Studio code we can easily change this to be RGB by just clicking up here and there we go we get RGB because we want this to actually be RGB a with a 10% opacity so change this to be plant one and if we go back here we now see that we get that perfect looking circle color we want it to be behind our woman image so let's change the z-index here to be negative one so it'll be behind everything else by default and that's exactly perfect as we scale our page you can see that this circle shrinks and grows as our page changes so that it never becomes too large or too small for the page next inside of here we want to create this next circle which is going to be this blue circle in the top left so we can again do our homepage circle but this time we'll select number two and I'm just going to copy everything from our first circle because it's going to be very similar we're only going to change a few things I think the width and the height are going to look perfect for this the border radius again is going to be 50% we'll select from here again art color I paste that in and use Visual Studio code so that we can change it really quickly to RGB a and that looks perfect and now what we need to do is worry about our positioning of this element as you can see it's slightly offset from the top and the left so we'll use top here instead of bottom and we'll change this to 15% of the height of the screen and with the left we're going to do exactly the same here but instead we'll do 30% of the screen and now if we save this and go back to our page you can see that we get our circle here oh but we're using the wrong color so again copy in that color that we should be using make sure that visual studio code sets that to the right value and now if we go over you'll see we saved then if we get our blue circle right here and that again is growing and shrinking with our page size and we can do again the same exact thing with our third circle but it's going to be slightly different since it's outside of our screen and we don't actually want to scroll our screen to fit the rest of it so let's just copy this what we have so far and modify it as we need to change this to be a three and we need to change our width and height and our kiss this circle is quite a bit bigger so we'll change it to be 45 and 45 and we don't actually want a color on this circle because we're going to be using a pseudo element so we want to select that home page circled three again but we want thick the four element of that because we're gonna put our actual styling of the element in this pseudo selector so that way it can overflow the parent and not actually cause the page to scroll and inside of our parent here we just want to set this to be in the bottom right hand corner so change top to bottom here we'll change this to be zero and we'll do the same thing but for right because we want this in the very bottom right hand corner and now that is going to be put in a circle as far down at the bottom right of our page as possible and inside of this before is where we actually want to set the content for our circle so the first thing we need to do is set a content just to be empty so that something actually shows up we want to position it absolutely inside of the parent element that it's inside of which is this circle 3 and we want to set the height to be 100% and the width to be 100% of the parent and of course use border radius here of 50% so that it will be a circle and let's copy this background color from our previous circle since these two circles share the exact same color so now if we save that and take a look we have here we have our circle but it's not in the bottom right like we want it to be wound on this to be offset from our page so what we're going to use is the transform property and we're going to use what's called translate and we want to translate that 40 percent to the right and again 40 percent down if you say that you see their circle is where we want it to be but we get that problem with our page now scrolling to fit that entire circle and the reason we nested this circle inside of this circle is that we can put overflow of hidden on the parent and if we save that and now just cuts off all the outside content that we don't actually want and to fix the fact that we have a weird-looking circle here we just want to remove the border radius from the parent element since we're not actually making the parent a circle the parent is just a rectangle which contains a circle inside of it and there we go our home page here now looks almost identical to our mock-up here which is perfect and as we increase our screen size it still looks good or decrease in our criticise it still looks pretty good so now let's move on to creating some of the different pages for discover and join to get started with our discover page here we're just going to copy everything inside of our index.html page since it's going to be very similar will the create this discovered out HTML paste this all in here but instead of importing to index tab CSS will import discover dot CSS we're going to change our title here to be Soundwave discover our header is going to be exactly the same we don't want to change anything inside of here and our section down here is going to be different so let's remove what we have in our section save that and go to our discover page and as you can see we have a blank slate to start with if we look over at our mock-up here we can see that our discover page if we expand this so it's a little bit easier to see has a footer down at the bottom and the content that's going to be growing is this content in between the footer and the header so we can't actually have our container class here beyond the body of our discover element since we don't want to limit the width of our footer to be the width width of the container as you can see here this footer goes all the way across the full width of our entire page so we actually need to change this so that our container is no longer containing the footer element and instead is going to contain everything else inside of it so in here we'll add that container class and we're just going to wrap everything except for the footer in that container class and there we go now that we've moved everything inside of that container class let's work on styling the footer for our section it's going to be outside of that container as I talked about and we'll use the footer element inside of HTML in order to style this footer and we'll give it a class here which is going to be main footer next inside of that footer we're actually going to want to put the container class which sounds a bit weird since we just took the footer outside of the container and now we're putting everything in the footer inside of the container but what we want is for this background of our footer to expand all the way to the edge of our page but the content in the footer as you can see lines up perfectly with the borders of this container let's make it a little larger so it's easy to see but you can see this container here lines up perfectly with the content over the section of our footer so inside of our footer everything is going to go inside of the container now let's get that back so it's smaller so we can start working on your page and inside of our footer is where we're going to have our different navigations we're gonna have two Navs one on the left here for the about and the contact and then one on the right for the different social media links so first here we'll just put a nav and this is going to have a class of footer nav since we're going to want to style both of our Navs very similarly and in here we'll have an unordered list full of list items again just like the header and each of these are gonna have a link in our case since we're not actually making these pages we'll just have these links point to nowhere and inside of it will say about us for this one copy this one down call this contact and now we have our two different links in here for our about us and content section and we can copy this nearly exactly for our social media links paste it down again we want to use that foot or nav class since it's going to be styled very similarly but our links inside of our list items are going to be a bit different since they're going to contain an icon and they're going to contain text so we're gonna want to apply some special styling to this what is call it a social link since it's a social media link and so inside of here is where we're going to put our content our first one that we have is going to be Twitter so we'll change the text inside of here to be Twitter and we're going to add an image which is going to have the source of our images folder and there should be in here a Twitter SVG icon and let's copy this and paste it inside of this list item here get our spacing worked out there we go and this one is going to be Facebook and using the Facebook image now if we look back here and save it you'll see that we get all of our different links for our footer right here and we want to style these footer links exactly the same as we styled the header section of our pages so inside of our Styles dot CSS we can work on styling our footer just like our header so if we find here our main header here we go we can just tack on here main footer and all we want to take out of here is the height since the height of our footer is going to be different the height of our main header so we'll put our height inside of a separate class for main header but the rest of the content inside of this main header class can be shared with our main footer also we can share our main nav with our footer net so let's select our foot-and-a-half are ul elements inside of it and same thing down here you want to select the footer nav and we want to select a tag elements and again same exact thing here we want to select our footer nav now if you say that you see that it's already starting to look a lot like our header but our content isn't lined up side-by-side and that's because if you remember right we added this container class that's wrapping all of our different footer sections so what we want to do is we want to just add a simple selector here that is going to be for our main footer and we want to select the container inside of it in this container we wanted to give a display here of flex we want to do just a 5 content of space between and that will push all of our content away from each other and if we spell container correctly there we go you now see that our content and our footer looks exactly as we want it to lastly we can do some specific styling just to our footer we can change the height here to be 70 pixels since it's not quite as tall as our header we want to change the background color so if we go in here we can select the background color of our element get our footer get that footer section we'll select the fill color that we want to use so use background color here paste in that color that we want and now if we say that you see that we get that nice dark background color around it and lastly everything inside of here is going to be bolded font so we can just create a bold font here and we can move on to style in our social links so that they look slightly better so we remember we created that class called social link and inside of this class we want to select the image tag inside of that we want to change the width to be 1e m so that our image here is the exact same size as our text and we'll just add a little bit of matte margin on the right here we'll just do the point two five or a.m. for example and if you say that you now see that our icons are more in line with the size of our text and they're slightly spaced out from each other now we can actually work on adding in the content of our page so that it'll fill in and look nice so let's go back and look at our design here so we know we're working with make it slightly larger and we can work over into here and add in the section that we need as you remember this needs to go after a header but inside of our div container here so inside of that div container we'll create a section and we'll get of a class of discover main section so we can select this in our CSS to style it next instead of here we're going to have two different sections again our left section and our right section so let's create two divs and we're going to have our first section which is our left section which we're going to give a class again of call to action since this is the call to action for our page and in here we have our title our subtitle and then our icons in the middle so we'll create an h1 give it a class of title which we've already created this title class so we don't actually have to worry about styling it and in here we'll just put the text which is discover new music next we're going to have our icons section so we'll create a div with a class of icons section inside of this icon section did is we're going to put our three different icons so again we'll use a div to wrap those with a class of icon and inside of this icons section all we're going to do is have an image which is going to be the top part of our icon so we're just going to have our first one here be from our images and it's going to be the microphone SVG file and we'll just put charts as the text for it and we'll copy this down two more times since we're going to have two different images or two more icons sorry get our spacing all correct here and this one here is going to be our album's SVG and we have our more SVG and we can change the text inside of these and there we go now our icons are completely done and the last thing that we need to do is add our subtitle section so we just want to add here a simple div which we're going to get the class of subtitle and instead of here we're just going to put all the text we're gonna copy this over remove all that extra spacing and now if we save that and look here it's looking really good but it looks like this text is kind of larger than we actually want it to be so let's actually remove that subtitle text that we created for our class and we'll save that and now that looks a lot better it looks a lot more in line and lastly we just want to add in an image here instead of a div actually so we'll change this to an image well add a class here which is going to be covers image so this is going to be an image of all the covers and again source it's gonna come from our images folder and we use the covers JPEG file and now if we say that we said that I got our cover images and we have all the different elements that we need from our design over here we just need to actually lay everything out to look good and of course to do that we're going to use CSS and we're going to use a discover CSS file which will just create here this is going to be all the styles for this discover only page again inside of here we're going to use a lot of the same stuff we used from our indexed CSS file if we can actually come in here and copy this main section change this to be discover main section and it's going to be exactly the same and if we save that you see that now already we have our things spaced out side by side which is perfect next we want to select inside of our main section here our covers image and we want to set this that it's never too large or too small so we'll set the width here to be 30% of the screen width we'll set a margin here on the left side of it to be to our EMS that is never quite touching our text too closely we'll set the height to auto this will just make it so that our image scale so that it never becomes super stretched out it will always be a perfect square and we're going to give it a max width so that never becomes too large and we'll just say 350 pixels for example and now you may notice that our image is actually being distorted and that's because we were using stretch up here and instead we just want to use center so that everything inside of our page is perfectly centered now as you can see if we scale our image will scale perfectly and once the image reaches a certain size it won't grow any further this is perfect now we can actually work on styling our left section which is going to be a bit more complicated the main thing we need to style is our different icons so first we'll select our icons section and in order to get our elements to line up side by side will change the display in here to flex now we say that you see that everything's lined up side by side and we can work on styling actual icons themselves again we want to display these things so that our elements are above and below each other and we'll use flexbox again for that but instead will change the Flex direction here to be column instead of row and there we go now everything's above and below each other we're going to justify the content to have space between so there is spread out as possible from each other as we increase the height well line the items in the center so that way our images will be directly centered over our text and now we can work on adding our margin end with so we'll set a margin of 0.5 REM to give it a little bit of space between each item we'll want to set up padding here which is going to be 0.75 REM which will just allow us to have our nice background color which we can see over here we'll have a nice little background around our different elements we'll set the width to be 100 pixels and we're going to do the same thing for our height we'll just set it 200 pixels as well since we want these to be perfect squares and we'll go in here select these elements so that we can get the actual background color there we go so we can set our background color and if we go look at what we have so far you can see that these are already starting to look really close to what we want all we really need to do is add a little bit of margin to the bottom of this so that's now right up against our text down below and we're also going to want to modify the actual images since they're a bit too large so we'll just change the width here to be 40 pixels and if you say that that now looks a lot like what we have over in this section over here which is really nice but you will notice that our footer is not expanding all the way down to the bottom of our page and that's because if you look at our HTML we don't actually have that full height grow inside of our container here so let's copy that over paste it into here and now our container is going to be growing to fill the full height but the problem is is that our container does not have flex grow on it if we go into here for our styles.css find our container class which is all the way at the bottom and we add a simple flex grow of one on to here you'll now see that our container is growing this middle section is growing to fill the full height which means that our content can actually fit perfectly in the middle of our screen and as you can see it scales really nicely as our browser gets larger but when our browser gets smaller you'll see that the image on the right really becomes more in the way than anything so let's actually remove this image just like we did with the index page to do this again we're going to use a media query we're going to use max width and we're going to just say 800 pixels is when the image starts to become useless we'll select that discover main section and inside of here we're just going to change our Flex direction to be column and we're going to justify all of our content into the center this will just mean that our image here is going to show up below our text when our screen becomes too small so as you can see as our screen becomes too small all right and this shows up at the very bottom now we want to space our out this image so it looks a little bit better so we'll select that image section and we want to change the margin on the top to be to REM that way we have a little bit spacing we'll want to change the height here to be 30% of the height of the screen so it never becomes to lunch and we'll change the width to be auto this will just make us letter individual scale off of height instead of width now as you can see this is looking really good on the smaller screen even when it gets incredibly small and as it gets larger you can see the image pops over to the side and looks just like our mock-up that we have over here so now that we have this page done we can move on to our last page which is this joint page since this joint page is going to be very similar to our discover page let's just copy this discover page we want to change the name here to be join dot HTML and we're going to create a new file for our CSS we're just going to be joined as CSS instead of our joint HTML we can change this to be join CSS change discovered to be joined here our header section is going to be exactly the same this main section we're going to be changing so let's remove that and our footer again is going to stay exactly the same so now if we jump to that joint page you can see we're starting from a clean slate let's look at our mock-up over here to see what we actually need to style for our page as you can see we have some text on the left here which says join the fun and on the right side we have a nice-looking forum for people to contact us and join the program so let's add that into our HTML over here we want to do it after our header section and we're just going to give this section with the class of join main section just like we did for all of our other sections to make things easy to follow and on the left side here we're just going to have some text which is going to say join the fun I'll have an h1 which will just have a class of join text so that we know that this is going to be our text that we can select inside of our CSS to make it look nice and cool and inside of here we'll say join the and instead of actually putting fun inside of here we're going to want to wrap fun inside of its own span with the class of accent text and this is because this fun actually looks slightly differently since it's this pink looking color as opposed to the white color of the rest of our text and this will allow us to select just the word fun now we're going to have our actual form which is going to have our name email password and join Now button let's give this form a class here a join form so we can select this in our CSS and let's work on adding the different groups of elements we have so we want to wrap each of our elements inside of an input group so that we can space them out from each other properly and inside of each of them will have a label so the first one is going to say name and then and we're going to have an input here and this input is going to have a type of text there we go and let's just copy this down a couple more times so now we're going to have our second input here the email change the type here to email we're going to have password and we'll change the type here to password and then lastly we're just going to want to have one more input group and this input group is going to be a button instead of an actual input element so we'll just say button the type is going to be submit so it's going to be used to submit our form and we'll give it a class of button with the text inside of here that says join now and if we save that and go look over here you can see that we have all the different information inside our page we need and you can see our button is already mostly styled from our Styles the CSS file Celestra Zaid the last few remaining styles we need in order to finish styling our button all we need to do is we want to remove the outline from our button we want to remove the border and we want to change the cursor so that it's going to be a pointer cursor and now as you can see when we hover over that we get the nice pointer cursor and we just want to change this slightly so that we can tell whe