Hulu Webpage Clone | HTML & CSS

[Music] hey what's going on guys so in this video we're going to be creating a clone of the hulu website home page a little while ago we actually did the netflix one we did microsoft we did a few different clones and you guys really seemed to like that so we're going to get into obviously html5 and modern css including flexbox the grid system media queries we're going to make it fully responsive we're also going to add a little bit of javascript so we can have this nice little login model pop up but basically you know we have the header area the sub header we have this area with some covers we're going to do some overlays this live tv section then we have the footer with some unordered lists and some social media icons and just to show you what it would look like on mobile screens we can use the devtools device toolbar and you can see the modal still looks good and everything is just basically stacked and still looks really nice on on small screens all right so we are actually going to deploy this you can see i have it deployed at traversingdemo.com and we're going to be using hostinger and hostinger is actually sponsoring this video so they have all different types of hosting shared cloud hosting vps's so we're using a shared web hosting account and they have extremely cheap prices for just a ton of features so if we go ahead and select this package you can choose to pay monthly or 12 months 24 months and actually have a coupon code that you can use so traversing media will give you 10 off all right so i'll have that link in the description or you can just type the code in so that's it let's go ahead and get started with our project all right so i have the hulu website open here that we can use as kind of a reference and like i said it's not going to be pixel perfect but we're going to get it as close as possible um without actually you know looking at the the html and css for hulu we're not going to be doing this part either just because i think it will take up too much time in the video all right so in vs code i have a few files and folders if you're following along which i would highly recommend that you do you're going to want to get all of these images so i'll have a link to the github repository in the description where you can get access to all these images the header background and all that stuff and then as far as the other files here i just have an index html which i'm going to open a style css i'm going to open that as well we have a main js file so that's just going to be for the this modal that we're going to do probably last and then i just have the favicon in the root here as well all right so let's get started with the html i'm just going to go ahead and create a boilerplate with emmett so exclamation enter and let's change the title here to say stream tv and movies actually let's make that uppercase stream tv and movies live and online and hulu okay and we'll go ahead and close the sidebar up we don't need that and then we're going to bring in the css files so we want a link tag in our head and let's bring that in from css style css and we might as well add our script tag while we're at it so we're gonna have a source going to our js folder and then main js and for now i'll just have an h1 we'll just say hello so you want to open this index html file up in your browser you can just open it on your file system or if you're using vs code i'd recommend using the live server extension that's what i'll be using so you can get that installed and then you can just right click and say open with live server and we should just see hello for now okay so let's continue on here we're basically just going to go top to bottom we're going to do each section at a time first being the header so basically from the top to here that's including the navigation if you even want to call it that it's really just a button that opens a modal but if you want to add more links later on you can alright so let's start on the header so i'm going to get rid of this h1 we're going to use a header tag and i'm going to give this a class of header as well and i'll be using emmett to create my classes and let's add a nav tag here with a ul and then a list item and this is actually going to be a button because it's just going to open up a modal it's not an actual link to another page or anything so i'm going to give this a class of login btn and we'll just say log in and let's go ahead and look at ours so it's going to look you know pretty ugly for now but we'll style the head the header once we're done uh but that's it for the nav now we want the rest of this stuff right here which i'm going to put into a class called header content so let's go under the nav and say header content and we're going to want first an h4 and say try up to one month free and then we're going to have an image i'm going to give this a class of logo because that's what it is let's do image slash logo png again you can get the images from the github repo and we'll just say hulu and then let's see what we have under that so we have this text right here we can just grab it and the hulu website at the time that you're watching this might be different um if so i mean you can just use the demo website that i have or you can just copy the text so actually we're going to put that in a div with the class of header dash text dash one so we'll paste that in and then under that div will have let's say header dash text dash two and that's going to be this text right here this hbo max showtime etc and then underneath that we have this button right here so under that div let's create a button actually uh yeah we'll just we'll keep it as a button we're going to give it a class of btn which is going to be kind of a utility class for all buttons on the page and then we'll add on to that btn cta which is just call to action and let's see what's the same here start your free trial so you want to put that start your free trial and then underneath that we have some really tiny text here we can call this the legal text so under the button let's give a class of legal text and paste that in so that should be all the content all the mock-up that we need what is that wait a minute what is this oh i put logos here so you can't see it because it's on a white background but it's actually this um this is called logos this is just logo so that should be that should be singular it's like what the hell is going on um all right so that's the mock-up now let's get into the styling so before we get into the actual header styling we have some just you know base styles for the body and all that so first thing is the font and if we look at the hulu font uh let's see let's just pull this up so if we look at the body of the hulu website you'll see it uses this graphic font and i looked into it that's a premium font so we're not going to be using that but i found something that's pretty similar called rubik so if we go to google fonts we search for rubik r u b i k this right here this is pretty similar so we're going to just go ahead and use this so i'm going to select a few styles here we want light 300 we want regular 400 semi bold 600 and bold 700 and once you do that you can you could use the link here but i'm going to grab the import so everything in between these style tags and then just paste it right in and then this font family right here this font family property is going to go in our body so let's do html body and paste that in and now we should be using the rubik font yeah all right so we have our font now we have some other kind of base classes to do or not classes but base stylings um so i'm going to take the universal selector an asterisk and i'm going to add box sizing border box which i do in pretty much every layout just so when we add padding to an element it doesn't affect the width we also want to zero out the margin and padding so we're just going to add a reset here and that will take away any space on any elements and then wherever we need to add margin and padding we'll just add it ourselves okay and then for the body let's add a background of black and let's do the text color will be white i'm going to do a line height of 1.7 and i'm also going to add an overflow x to hidden so that we don't have any scroll bars on the x-axis so horizontally okay cool so let's just make this a little smaller and then we just have some some elements that i want to add some default styles for like links we'll do white and let's remove the text decoration or i should say remove the underline with text decoration none and then on hover we'll just make the color uh let's say gray all right and then for the unordered lists we want to remove any bullets uh so let's do list style type none and for images by default they should take a hundred percent of the container and as soon as i do that the logo is going to go 100 across the entire page here but we're going to add a fixed width to that in a second so for the header so we have a class of header i'm going to set a height on this of let's say 5 30 pixels and then for the background we have an image that we want to use so i'm going to set url and we want to go up one level into img and then there's a header.jpg and i'm going to add some other properties like background repeat we'll set that to no repeat the background position will do center center and we want it to cover the area okay so that gives us our background let's take care of that logo so header and class of logo you don't have to prefix logo with header but i like to just do it just for organization so let's do a width of let's say 270 pixels and then margin on the top and bottom will do 20 pixels so top and bottom 20 left and right zero okay now for let's see let's do the con no we'll do the nav so right here remember this button is inside of a nav so we'll put that right here we'll say header nav and i'm going to display this as a flexbox which is going to make the ul inside of it a flex item there's only one item inside or one element inside of the nav a one direct element which is the ul and i want to align that over here to the right so we can simply add justify content and set that to flex end which means you know to the right so you can see it's over here now we do also want to add some padding i don't want it right up against the edge like that so let's do padding 20 pixels 40 pixels and that will move that down um and then let's see this is really ugly looking so let's style the button so we have our header nav and then we have a class of login dash btn and i'm going to set the cursor to a pointer and let's take away the standard button look so basic basically the background and the border so border none okay and then we'll make the color of the text white let's make the font weight bold and let's text transform to uppercase wherever we want all uppercase we don't want to just put that in the html because you might want to change it at some point so it's good to use this text transform instead of just you know typing in uppercase letters and let's see what else let's make it let's make the letter spacing one pixel kind of break it up a little bit okay so i think that looks pretty good so now let's move on to the header content itself so we'll go right here and say header header dash content all right now for the header content i'm going to want to um display as flex so that i can align everything now as soon as i do that all the flex items inside of header content are going to be put in a row a horizontal row which i don't want i want to change the direction so flex direction change it from a row to a column and that'll make it go vertical and then as far as justify content so justify content since it's a column that pertains to aligning it vertically so for that i'm going to use flex start because i want it to be at the top now to align it in the middle horizontal since we said it's a column then align items is going to pertain to that and we want that to be center and then i want to move it down just a little bit so let's do margin top and we'll do 30 pixels all right so yeah that's it's not like i said it's not going to be pixel perfect but it's pretty close so now we have some stuff in here we want to style this text is all squished together we also want to style the button so let's do the text so we have two we have header what is it header text one where i'm going to take the font size and bump it up a bit to 22 pixels and i'm also going to font weight make that bold okay so that's this right here and then this one is header text two so let's copy that down and let's change this to two font weight is going to be 18 and then we don't want it to be bold but i do want to add some margin on the top and bottom so we'll do 20 i think i did 25 pixels top and bottom so that'll push this text up and the button down all right so now let's do um let's do the button now remember we have a btn class and we're going to use that in other places as well so we don't want to prefix it with header in fact i'm going to put it up here because what i like to do is like the base styles and then utility classes like button and then and then our more targeted um styles so i'll just put a comment there for header now btn will have quite a few styles here first thing i'm going to do is display it as let's do an inline block because it's inline by default and then the background i'm going to set that to white color is going to be dark gray almost black and then i'll set a min width of 1 35 and let's do padding so padding will do 20 pixels 32 pixels okay so you can see that that's much bigger now let's increase the font size a bit to 14 pixels i'm sorry 15 i think 15 pixels and then let's make it bold so font weight um actually we'll do 600 which is i think semi bold and then let's see line height we're gonna do 14 pixels border we want we want no border let's say none and then border radius i wanted to have a slight slightly rounded edge edges so 5 pixels and let's see letter spacing we'll do one pixel and let's see what else we need cursor pointer yes cursor pointer and then let's make it uppercase so text transform is going to be uppercase and this is just the btn class so it's going to be for all the buttons around the page all right so that looks pretty good now when we hover over this you'll see it go it gets translucent so what we'll do i only want that to happen on this button the cta so we'll say btn-cta hover then let's make the opacity change it from the default of one to zero point eight so now we hover over it's slightly translucent all right now this right here this is the legal text which we're also going to use in other areas so that's kind of a utility so let's say legal text let's do font size 10 pixels we'll make that really small we're going to make it gray and we're going to add a margin top of 20 pixels all right and then the last thing is this right here this h4 we're going to want to make that green like this and there's a few h4s i'm going to make this an h4 this so these will all have the same styling so let's put it up here h4 and let's get the color and let me just find that color real quick all right so it's going to be hexadecimal 0 0 e d 8 2 and then font size is going to be 14 pixels and text transform is going to be uppercase okay it's a little bigger than i guess we could do 13 and it's a member it's a different font too but i think that that's close enough so let's see what do we want to do next let's uh i want to do the responsiveness for each section kind of as we go instead of you know saving it till the very end so let's do that i'm gonna um i'm gonna open up my dev tools and i'm gonna click this right here this device toolbar and i like to use one that actually has the phone chrome around it so let's do six seven eight uh yeah we'll just do that i guess six seven eight or i mean you can keep it on iphone x i just like to have the outline of the phone but yeah you can do it however you want and then we can make this a little bigger okay now there's a couple things we're going to want to do the logo i want that to be a little smaller so let's go down here this is going to be at the very end this is going to be our media queries so let's do media and i'm going to actually make this a max width of 768 okay so anything under that these styles will uh oops forgot my ad these styles will take effect so the header logo the width instead of 270 let's do 200 okay so we'll make that a little smaller um let's see let's do let's make it all centered so we'll do header header content text text align center and let's do a little bit of padding on the side so we'll do padding uh 20 pixels on the sides yeah i think that looks pretty good we could make this text smaller but i think that that looks alright so we'll just keep it like that for now okay so i'm going to just go back to the desktop view and then we're going to move on to the next section which is going to be this subheader so first we want to do the html of course let's go back here and html we do need this to be a little wider so header ends there now each section i'm going to use a section tag so let's say section with the class of sub header and basically what i want to do is use the grid system here css grid so basically we'll have a grid and we'll have three grid items the first will be this image second will be a div with this stuff in it third will be a div with this button and this link in it so sub header will be the actual grid then we'll have the image this time it's going to be logos and then underneath that we'll have a div that wraps in h4 which is going to be this right here bundle it's a bundle with any hulu plan save and then underneath that we'll use an h3 which is going to be this text right here okay and then we have a link with details so let's do a it's not actually going to go anywhere and say details and let's give this a class we'll use a class of let's say sub dash link all right so that's the second grid item this div the third is going to be a div with a link formatted as a button so btn we're also going to have a btn outline class to style this button and that's going to say get bun uh not nundell but bundle and then under that we'll have another link with a sublink class and that's going to say terms is the terms apply and that should do it for the mock-up so now let's go let's take a look at it it's going to look pretty bad so let's go ahead and we'll say subheader make this a little bit smaller okay so subheader we want to display this as oops we should probably have the class so sub header and we're going to display this as a grid now just doing that isn't going to align it into a row we have to define our columns so let's say grid template columns and basically we could use percentages here pixels i'm going to use fractions so basically you know fractions of the row um and like if we wanted to them to be all equal we could do one fraction for each so one one one but we want the middle one to be wider than these other two so i'm actually going to do two four two so the first and the last will be the same width and then we want some spacing in between so let's add a gap of 40 pixels so now there's some space in between there um we want to align sorry about that we want to align items to the center that's going to be this way since it's a row and then let's do some padding on the sub header so padding 30 pixels top and bottom 40 pixels left and right excuse me and then we have a background gradient that i'm going to use and i'm just going to paste that in i hate typing these out so we're just setting it to a linear gradient 318.68 degrees and then the colors and the percentages that we want that those colors to take up so we get that nice hulu gradient branding so next um let's see so let's do the h3 we want that to be bigger and i'm gonna put that up here since it's uh just you know it's not just this h3 it's all of them so right here we'll do h3 and we're going to set the font size to 26 and i'm going to set the font weight it's bold by default i want to set it to 300 which is lighter than normal and then we also have these right here these links which have a class of sub link and i think i think this is the only place we have sub link well actually no we'll put it up here so under legal text we'll say sub link and i'm going to display as block because you can see right here it's on the same line as the button so let's display that as block uh so i save that that will get pushed down and then let's also change the color to gray the font size is going to be 12. let's do margin top five oops five pixels and then we're going to put an underline so let's do text decoration underline all right there we go now this button we're going to want to style that so remember it has a class of btn outline so we'll go under the rest of the buttons here and do btn outline and then i'm going to want to remove the background change the color okay add a border board is going to be 2 pixels solid and let's do white all right cool um what else do we want to do with this so the hover effect i don't want it to i wanted to do this so basically just change the color of the border so we'll add down here let's say btn outline hover state we're going to want the color to stay white but we want the border color to change so border color will be gray so now we get that same effect now notice the button isn't all the way over like if we look at hulu the button is all the way over well as far as it can go so since we use the grid we can take that specific grid item which is a div now we don't have a class on it if we look in the sub header here we want to grab this div we could put a class on it but this is a good opportunity to show you how to use pseudo pseudo-selectors basically we want to use the last of type because we want the last div in the sub header so we'll say subheader and let's say we want the immediate div so or i should say a top level div and then put a colon and do last of type and that should pertain to the very last div in subheader okay and what i want to do here is justify self because i'm doing just the specific grid item and i'm going to say justify self to the end okay so that'll push it over we'll also do a line items to the end as well which will align it this way you know all the way down i'm sorry align self okay and then this link the sub link we want to put in the middle so what we can do is grab this so we're targeting the last div but then we want the sub link within that div and we're going to text a line to the center awesome okay so that looks pretty similar now as far as uh being responsive let's open up our dev tools and take a look so it doesn't look very good and that's because we're still we're still using three columns so what we'll do is we'll go down to uh to our media query let's make this a little wider okay so we'll go down to our media query and we're going to change see what are we going to change here um the sub header itself so subheader now remember by default we have grid template columns and we did what 2fr 4fr 2fr in this case we just want one column one stacked column so we'll say 1fr and as you can see now they're all on top another thing i want this image to be a little smaller so let's do subheader image and let's do a width of 250 okay and we want that centered since it's an image we can do margin auto okay that'll set up that image let's make this a little bigger alright and then let's see this right here that i guess that's well you know what we'll text align everything so in subheader let's do text align center and let's also make the gap a little smaller it's 40 by default we'll make it 20 on smaller screens and then this we don't want this justify itself all the way over so again we're going to have to target i'm just going to copy this yeah let's copy this right here and then so we're grabbing the last div and we're going to set justify self instead of end we want it to be center same thing with align self we'll set that to center and now if we take a look everything is nice and stacked cool actually i think in the header if we look at the responsive version of this this hbo max thing right here isn't shown so we might want to do that and we can do that by just simply taking header and i think that's header text two and then display none and then we probably want to add some margin to uh to header text one to push that down so header text one margin uh bottom so margin bottom we'll say 40 pixels there we go not exact but i think it looks pretty decent all right cool so that's it for um the sub header now let's move on to let's get rid of this let's move on to this area so we have an h4 here we have this large text another subtext and then we have these which we're going to use the grid for now these are all background images okay they're background images with some text overlay and there's also a shadow um there's also uh an overlay to make this darker so that the white letters show even on a light background so we have to deal with that as well all right now we're going to do this part well we're just going to do all the html first so let's go back here and i'm going to call this section categories so section categories all right and then we're gonna want let's see so we want the h4 first that says included in all plans and then we have the large text which is this all the tv you love so that's going to go in a div called text excel because we're going gonna have a few of these around the site around the page and then we have this text here which i'm gonna grab and we're gonna call this subtext and there'll be other subtext to around the site so that takes care of the actual text okay it's ours isn't going to look very good right now but now we have to do these i'm calling this this the covers so still within the sect the category section let's say covers so that'll be display grid and then we'll have cover dash one and we're going to have that gradient so i'm going to have a an element here called cover let's call it cover grad cover grade and nothing's going to go in there we're just using it for styling it's going to be basically an overlay and then let's do cover text which is going to include the sub subtitle which is a smaller text so let's do sub dash title and this is going to say past and current seasons and then underneath that we'll have an h3 and we'll say tv shows okay so basically it's this these two texts right here this like the fox and bob's burgers this is in the image so we don't have to do that and yeah so that's the first one cover one then what we'll do is grab cover one copy it down three more times okay and then let's change this class that'll be two that'll be three that'll be four we need those two so we can add the background images and then the second one is going to be new and classics and this is going to be um oops what is this movies okay then we have for this one here this is gonna be groundbreaking and that's going to be hulu originals for the h3 okay and then this last one here this one add-on and that's going to say premiums all right so let's save that and if we look it's not going to look like much we need to go ahead and start styling so we'll start with styling the text so let's see underneath subheader let's do categories all right so categories actually we don't have any styles on categories itself let's do let's do the text let's do the large text and i don't want to put that down here because we are going to use it in other places as well so let's go up to the the where we're doing the utility classes so we have sub link and we'll do text excel and we'll say font size going to be really big 70 pixels so right away we should see that really big and then we're just going to set the font weights to bold and then underneath that we have this which is the sub text so let's do sub text and we want this to have a max width because we don't want it to stretch out all the way so let's do 850 as a max width margin bottom 10 pixels font size 24 pixels okay good and i think that should do it as far as the utilities now let's go back down to where we have categories and we want to do categories and then covers so categories covers actually we want we want this to be centered did i do oh we do have we do have classes i mean we do have styles for categories itself so categories we're going to display flex so we can easily align that's going to put everything in a row obviously we don't want that so we want to change the direction to a column and then we're going to set let's do align items not align self align items to the center let's text a line to the center all right um we're also gonna want to bring this down a lot so let's add some padding and we'll do 90 pixels on the top and bottom 40 on the left and right okay so that pushes that down uh let's also add justify content center as well and then i think that's it as far as categories now this part here we want to look like this so we're going to use the grid for that we're going to use some background images so let's display covers as a grid all right and then i want to push it down a bit so actually let's do our columns first so grid template columns and i want these all to be all to be equal so i could do one fr four times or i could just use repeat and say repeat four times one fr right so if i save that now you'll see that the covers are all in you know equal column row i also want to push it down so let's do margin top and we'll set that 40 pixels and then for actually we want to add some gap as well so let's say gap 20 pixels okay so that looks good now we want to target these divs individually so let's say categories covers and then we want all of the immediate divs or all the top level divs and i'm going to set a height and a width to each one so let's do a height of 500 and let's do a width of 300 and we're going to position this relative because we're going to want the text inside to be positioned absolute oh shoot you know what i forgot something um for the header notice how here it has that top shadow um i forgot to do that so you know we'll just finish this and then we'll we'll do that real quick just reminded me because we're doing it kind of the same way with the overlay but yeah so position relative and then we have the gradient remember we have the cover grad class let's go ahead and do that so let's say categories cover dash grad and for the background it's going to be a linear gradient and i'm going to just paste this in and you can copy it from the repo if you want i hate typing this stuff out but we're using linear gradient using two linear gradients and let's see so if we save that i mean we're not going to see anything yet we should probably do the images which is really simple we just have each one you know cover one we'll have a specific background image so for that let's do background url and we want to go up into images and we want cover one we want to set no repeat we want to set center center slash cover all right so we take a look there we go let's do the same thing for the other ones we'll just copy that down so we have two make sure you change the image as well so two three three four four all right now we can't see the the this cover gradient overlay yet because what we want to do is position this to be absolute and we basically wanted to cover the entire um the entire div so we can do that by setting the position to top zero left zero so we're saying you know put it in the top left corner and then we want the wanted to cover the whole thing so width would be 100 and height would be 100 and save that and now you can see that we have that overlay so the text right now is behind it but as soon as we position it it won't be so let's do the text next so we'll do cover um actually let's prefix it with categories we can do these two just to kind of stay consistent we know that cover one is not going to be used anywhere else so it's fine categories and then we want cover dash text so this is going to be position absolute and as soon as i do that it should be on top yep so now you can see the the words are now readable and as far as positioning let's do top 20 pixels and left 20 pixels and let's align it to the left instead of centered so um text align will be to the left all right so there we go i think that looks pretty good so like i said i want to add the shadow up here so we're going to do that by going let's see we also have to handle the responsiveness of the categories but let's just take care of this shadow first so we're going to go up back up to where we have the header and what i'm going to do is use the pseudo selector after so basically before and after we can use is kind of like a ghost element to to style it's not actually an element in the html but we're saying you know put one after and then style it and you need to have this content you could put text in here but obviously we don't want to do that but we do need the content and we're going to kind of do what we just did we're going to position what am i doing we're going to position it absolute right and then from the top 0 left 0 we want the width to go a hundred percent now the height the height we don't want to be a hundred percent we're going to do 180 pixels because we only want it to come down to like you know here we don't want to cover this whole thing so height 180 let's set a z index of one and let's set the background now the background is going to be a linear gradient so i'm going to paste that in and now you can see we have that shadow okay now that this link right here is behind the overlay and we don't want that so we put as the index of one here and the higher the z index the closer to you can think of it as like the closer to you the the screen it is the the lower the z index the further back it is so we want a higher index on the nav right here so we'll change that to 2. now it's still not going to work because it has to in order to use z index it has to be positioned so we're going to position relative and now that's in front of the shadow okay so now let's let's look at the responsive version of this or i should say the mobile version and let's see so this i don't like the line height of this that's the text xl this right here so let's go down to our media query and let's put text xl and let's set the line height to i don't know one that's a little too close let's do 1.3 yeah that's good and then let's also make the font size a little smaller instead of 70 we'll do font size 40 and then this right here this is the subtext so in the media query let's do sub text and let's change the font size to let's do so it's 26 by default we'll do 20. okay that looks decent and then let's see for this right here we're going to want these to stack so let's add in our media query let's do categories and then covers right so covers is our grid and let's change the grid template columns to just one fr so that they stack there we go now if you want i mean if i change if i look at the desktop version right and i start to make this smaller you see it doesn't change until 768. you might want to change it to a two column grid at a certain point as well so we could add another media query for that so we could do media and let's say max with and we'll set this to 1100 pixels and then what we'll do is we'll take the categories cover and we'll set it to 1fr 1fr so it'll have two columns alright so if i start to shrink this down now it's in two columns and then when i hit 768 it'll stack all right cool so that takes care of that the next part we have is the la oh no we have yeah the live tv section we have this border so we're going to add the html for that so let's see this is going to be a section so section i'm going to give it a class of live and let's do another class of live border for that um that green border and let's do an h4 we'll say hulu plus live tv and then we're gonna have the really large text so text dash excel and that's gonna say this right here and then underneath that we have another subtext section so we're going to do a class of subtext so we're reusing these classes in multiple places this too this is going to be legal text so legal text and that that'll already be styled for us we don't have to worry about it then we have this link right here i'm not going to do the little chevron that thing you can add that if you want but i'm not going to so this is just going to be an a tag and actually i don't want it to be uppercase in the html so i'll say view channels in your area and that should do it for this section here as far as the markup so you can see we already have some styling here but let's go into our css and make sure you're not in the media queries we're going to go up here let's say live and as far as the live itself we're gonna do a background that is a little lighter than the black so we'll do hexadecimal one five one five one six so that should be yep so that's a little lighter and uh padding so padding will do 40 pixels all the way around okay then we need that that green border so remember we have a class of live dash border and we'll set border to 4 pixels solid and we're going to do as far as the color we're going to do one ce it's going to be our border okay and there we go so we also want that to be rounded so let's say border radius 16. i hate how with live server when you're doing the css for some reason it pushes me back up um i wish it didn't do that but it does and let's see we're going to do a padding inside of the border of 100 so give us a bunch of space i'm just going to do the we'll just look at it after i also want to do display flex so that we can align so we'll set flex direction is going to be column instead of row and then we're going to align items not self ah what did i do column and then align items to center and then let's also do justify content to center because we want it centered both horizontally and vertically and then we also want the text align to be center so let's take a look at that so that looks pretty good um this stuff is already styled the link here i want to style that a little bit and move it down so let's say live and it's the only link there so we'll just say live a we're going to text transform this to uppercase we're going to change the font size to 18 pixels move it down so margin top will be 20 pixels text decoration is going to be underline all right so that looks pretty good so next actually let's check it out let's check out the the mobile version all right so we're going to want to change a couple things up here basically what's making it look so bad is the is the amount of padding in the live border so let's go into our 768 media query and let's say live border and i think it's a hundred by default i'm going to change it to 30 on the top and bottom and just 10 on the left and right so now yeah so that looks better i mean we could add some spacing but yeah i think that's fine so we'll just leave it like that now the next part is going to be this this live sports now on the hulu site you do have this slider i didn't include that just because like this video is already going to be really long you can add this if you want it's not too hard you're just going to have a bunch of different sections and have a little javascript to load those when you click these but we're basically just going to have this and the background is the the basketball player and the tv that's all one image so that's going to be our background then we'll have the the content with the text and then these images now these these the logos that you see here are these are in the html these are inline images but the circle behind it is a background image okay and then we just have this legal text here so let's add the html so right under section live let's do another section and we'll call this one live sports okay and then we're gonna want the live sports content because i'm going to position that absolute within live sports and then we'll have the large text so div with text excel and that's going to say live sports and then underneath that we'll have another subtext which is going to be this okay so we'll put that in there and then underneath that still within live sports content so you want to stay within that right under the subtext we'll have live sports not spots sports dash logos and each one is going to be a div and inside we'll have an image and this one is going to be image slash live live sports logo one all right and then what we'll do is copy this div down we want four of them and then we'll have two three four and what's weird is hulu the the three which is what nbc this one is an svg and not a png for some reason i don't know why but that one's going to be an svg and we have all these you should have all these in your image folder so we'll save that actually one more thing is the legal text so that's actually going to go under this div still within the content so let's do legal dash text and in there is going to go this okay so if we look at ours the images are going to be huge but we're going to fix that so let's go to our css and we're going to want to go above our media queries and let's say live sports so we're going to want the background image so let's do live dash sports and that'll have a background of a url and that's going to be dot dot slash img slash and then let's see it's this right here live sports jpeg no repeat center center cover okay and then i'm going to set a height of 800 pixels for this and then position relative because we need to position the content inside absolute and if we take a look we should see the background so let's do the live sports content class sports dash content and we're gonna like i said position that absolute and as far as where we want it we'll go from the top 160 pixels and the left 100 pixels and i'm going to set a max width so it doesn't bleed into the the tv part of the background image so max width is going to be pixels okay so we take a look you can see this is placed where we want it but um obviously the logos don't look right so let's see we're gonna do we're gonna do live sports logos and we want um for this i'm gonna set a width of 300 pixels and push it down so margin top will be 40 pixels and i'm gonna display flex and align items to the center and then justify content i'm going to take the remaining space and put it in between so space between so that's what it looks like so far now we want to target the divs that wrap around so each div that wraps around the image so to do that let's say live sports logos and then the immediate divs or the top level divs we want to add a background because we want to have that white circle which is a separate image so let's say url it's going to be dot dot slash image slash and it's this network logo bg and same thing we want to do no repeat center center cover and let's make this a height of 60 and a width of 60. and we're going to display flex so that we can align everything so well i'm sorry so we can align the image within it to the center both ways so justify content center and align keeps to itself line items center okay so if we take a look at it we're getting there but the logos are too big so we just want to change remember this is 60 pixels so let's make the logos 40. so we'll do um no what is it just want to do this and then image and set the width to 40 pixels all right so now if we take a look there we go that looks good the legal text looks good so that's it for that um and then the last thing well actually let's take care of the mobile version see what that looks like we can make this a little bigger um yeah so this obviously doesn't look great we just we want to kind of position it differently um so let's do let's go to our 768 media query and let's do live sports now there's actually another image for this because this background image doesn't really make sense um so let's change the background image on smaller screens to i forget what it's called amg slash and yeah right here live sports small no repeat all right so let's see what that looks like yeah so now we have a different image which looks better now for the content on small screens let's say live sports content we're going to position actually it's already positioned absolute but let's set it from the top instead of 160 or whatever we'll do 30 and we'll do 30 from the left and let's set a max width of oh no are we going to change that would i have it 550 let's see max with 550 yes so we don't need to add it here that's going to carry over all right so we'll go down and let's take a look alright so i'm not bad but we'll probably want to push this down a little bit so for the content let's do margin top let's see what uh 60 pixels looks like i don't have this pre-made pre-made yeah i think that looks good all right so that's live sports and then the last thing we're not doing this part here so the last thing is going to be the footer so we're going to do these unordered lists and also the social media icons so let's handle that html real quick so we'll jump over here and let's add a footer so we'll use the html5 footer tag i'm going to give it a class of footer and then basically we want a footer container so that it doesn't go all the way over to the sides and then we want a class of footer lists which is going to be the uls because i want that to be a grid basically i want you know this to be a grid in each one of these ul's to be a grid column or a grid item and then this line here is going to be our divider so i'll put the list in in a minute but underneath that we want our divider no content inside just the div and then we have our social icons all right now i'm gonna paste the social icon links in so they're just svgs in the image folder and then for the footer lists i'm going to grab those okay so paste these in and it's just like i believe five sets of ul's so we have this and notice if it's a head the li has a class of list head so that's one then we have this one this one this one and this one okay and we'll save that and that should be it for the html for the whole thing and if we take a look obviously you know those icons are huge and we want to change some things up here in terms of the styling so let's go up top here above our media query and specify this is going to be our footer styles now let's see for the footer itself i don't think we have well yeah we have just the background so let's do class footer and let's set the background to a color it's going to be a light color i'm going to do e say e b e d f 2 that's going to be the background and then the color will be dark gray 333 so now we have a light background now the the links are still white so we want to make sure we add footer a and make those dark all right good and let's see the footer container so footer dash container basically just like any other container we're going to give it a max width let's say 1100 pixels we're going to margin auto so that it's in the middle and we're going to add padding 40 pixels okay so that'll push it over so now you can see it's pushed over into the container now the list i'm actually going to use flex for this not grid i mean you could use grid if you want but we're just going to use let's say footer dash lists and we'll say display flex which will just automatically you know put them into a row okay and then the remaining space see how there's a bunch of space we want it in between each one so for that since it's a row we use justify content to align it horizontally and we're going to set that to space between and now if we take a look now all the spaces in between and then we have that list head class i want to make these a little bit more prominent so let's say footer dash lists and then list dash head so i'm going to text transform and set that to uppercase and then font weight we'll set that to bold and let's add just a little bit of margin bottom we'll do five pixels okay so now the list heads i hate how it does this list heads are a little bit more prominent all right cool um so for the divider remember we have a divider between these let's do that next so divider and we're going to make this width 100 the height is going to be 3 pixels and then the border top is going to be 1 pixel color will do ccc and then solid and then let's do margin 30 pixels on the top and bottom okay so now we should have our divider good and then the icon images social icons that's going to be easy we'll just say social icons image and say width 25 pixels and we're also going to set the height to 25 and we're also going to set the margin dash right to 25 so if we take a look there we go good and actually we're probably gonna have to do a couple things for the mobile version let's see yeah so basically we can just um change the direction of the of the flexbox instead of a row we can change it to you know a column so down in our 768 media query down at the bottom here let's say footer lists and we'll change the flex direction to a column and now there we go and i'll just keep it like that it kind of looks like just one big list so now the last thing we want to do is the uh the modal so we're going to need a little bit of javascript but before we do the javascript we're just going to create the modal so we want kind of like an overlay around everything right and then we want the white box with the form so let's go to our html and let's go we could put this anywhere really because it's going to be just absolute and it's only going to show when we click the login but i like to put the modal at the bottom so go down here and let's do a class of modal and then inside that so modal will be that'll take care of like the overlay the dark background then we want the modal box itself so motorbox and then we'll have the modal body and that's where the form is going to go i'll put that in a second underneath the body we're going to have the footer so modal dash footer and just to show you on the hulu website what i'm talking about is so this will be the body and then this right here will be the footer all right so we have modal footer and we also want the close button so under the footer let's do image and we're actually going to give this a class of clothes so class close and image is going to be img slash close svg and for the alt close all right now inside the footer that's going to be pretty easy just a paragraph we'll say don't uh yeah i don't have an account and then we'll have a link and we'll say start your free trial okay now the body we're going to have the form so let's do an h3 first and we'll say log in and then we're gonna have a form and this isn't actually gonna do anything obviously but so we don't need an action and then we'll do a class of form control and let's do a label we'll say label for email and email right and then for the input we're gonna do input with the type of email we don't need a name oops we don't need a name and then id will be email and then we're going to do the same thing for password so we'll just grab this form control copy that down change these to password okay and let's see we're gonna have the forgot your password if we look at this right here we're just gonna have this forgot your password we're not gonna do the captcha but this is going to go under the let's see yeah we want to still still be within the form but under the form control and we'll have a paragraph with an a tag and inside here we'll say forgot your email or password and then underneath that paragraph we'll have a button let's give it a class of btn and btn-doc and that will say login all right so if i save that that's going to be down at the very bottom giant close button but you can see it's it's showing now we want to start to style this so let's go in our style sheet we want to go above the at the end but above the media queries and let's say this is styling the modal right now first thing is going to be the modal class itself which is like i said like the overlay so let's do modal and ultimately it's going to display none because we don't want it to show by default but i'm going to comment that out for now so the position is going to be fixed and we want to place this at the top left okay so top left z index i'm going to do one and we want it to be 100 a height all right because we want to cover the entire page so 100 height and width and then for the overlay we're going to do a background of rgba so red green blue alpha 0 0 0 which is black and then for the alpha value or the transparency we'll do 0.5 so if i save that now you can see there's a dark overlay over the entire page all right now let's do the the um box make this smaller so modal and then we'll go into that we'll do modal dash box okay so for this i want it to be in the middle i'm going to do 10 margin on the top and bottom and auto on the left and right so it's in the middle and then a width if you want to mess around with this you can i'm going to do 400 pixels all right so now you can see that we're in the middle 400 pixels we want a white background so let's say background white okay we want the text to be dark we want the position to be relative because the close button will be positioned absolute all right and then we have some stuff in the body so let's first do modal dash body and let's do padding so modal body padding will do 50 pixels okay kind of push everything in and let's um actually yeah that's good that's all we need for the body itself but we have some other stuff inside the modal body like the h3 for instance which is the login i'm gonna set the font weight to bold and that's actually all we need to do there let's see what else the uh should we do the form yeah let's do the we'll do the form last let's do the button so it has the btn class which is a white button but we want this to be dark so let's see button dark i'm actually going to put as a utility class though so we'll go up top where we have the rest of our buttons and say button dark so background let's do [Music] zero zero zero and let's do color white all right and then let's go back down and there's a couple things i want to do with that button that's in the the modal body so let's say moto body btn i want it to be all the way across so width is going to be 100 percent and then let's also push it down so we'll do margin top 30 pixels okay now uh let's do the the close button so the close button is going to be positioned absolute so let's say modal close and first of all we'll do a cursor pointer and then let's position let's let's change the size first so we'll do a height of 23 pixels and a width of 23 and then let's position actually we'll save that okay and then the position uh position is going to be absolute within the modal and the location is going to be top 20 pixels from the top and then let's do from the right also 20 pixels so that'll put it up in the corner good and then before we get to the form let's do the footer which is this part right here so we'll say modal modal dash footer so background background for the footer is going to be a gray so it's going to be f7f7f9 okay that's our footer and the color 333 and the padding let's do 20 pixels top and bottom we're also going to do a slight border top so border top will do triple e one pixel solid and let's text a line to the center okay and then the link obviously we can't see the link because it's white so let's just take this and say for the link inside we'll do color and i'm just going to do steel blue all right cool so that's our footer now for the form the form i'm not going to prefix with modal because if you want to use the form control class in other places if you were to continue on this i want you to be able to do that so let's say form so form control i just want to have margin 20 on the top and bottom oops just to kind of separate them out a little bit and then the label so form control label let's display block so that will put it on its own line i also want to text transform to uppercase okay and then finally we have the input all right so the input let's do a width of 100 percent stretch it all the way across let's do the border at 2 pixels and let's do ccc so we're going to lighten that border up all right we'll do a slight border radius um so border radius let's do 5 pixels and then let's do a height of 50 pixels and we'll add a bit of padding of 5 pixels all right so not exact in terms of you know spacing but i think that looks pretty good uh let's take a look at it on mobile screens so it i mean it's good except i think it could be a little uh a little more narrow so what we'll do is just take let's go into our 768 media query and let's do modal we want the box so modal dash box and let's just say width i think it's 400 let's change it to 300 or maybe 3 50. yeah i think that looks good all right so we have the excuse me we have the modal created now i'm going to go back up to the modal class and where i have the display none commented out i'm gonna uncomment that and that's gonna just go away it's not gonna show so this is where the javascript comes in right let me just get rid of this all right so we want to be able to click on that and open it up so now let's go into our javascript file so we should have js main js and it should be already you should have your script tag in your html and the first thing i want to do is bring in what i need so let's say const modal and i'm going to use document dot query selector and i'm going to select it by the class of modal okay and then i'm going to bring in two other things here i want to bring the login button so login dash btn class login btn and then let's see we also want the close button and that has a class of close okay so we're bringing that stuff in now we need to create some event listeners so when the login button is clicked so we'll do add event listener and we'll say when there's a click then let's run a function actually we're going to call this we're gonna name this function open modal okay so that'll run that and we might as well just create the rest of this too so we'll have close button so when close button is clicked it's going to call close model and then also we want to make it so when we click outside of the modal it also closes so to do that we're going to say window so on the window object we're going to add an event listener for a click and then we're going to do outside click so we have three functions that we're going to create so first is going to be function open modal and all we need to do is take our modal which i brought in up at the top and then add a style oops so modal dot style so we can directly manipulate css here remember it's displayed hidden right or i'm sorry display none i'm going to set it to display block so that it shows so let's save that and let's go over here and click and now you can see it's goes from display none to display block now i don't have a way to close it at the moment unless i reload the page so let's create our function close [Music] modal and then for that we're simply going to take this do the same thing here except we're going to set it back to none right so if i click open click the close that's it now like i said i want to make it so when i click outside it also closes so that's easy to do we have our function uh outside click and that's going to take it we can pass in an event parameter here because this function is being fired off uh when an event fires off when a click fires off now we want to just check the target so e dot target and say if that is equal to modal then we want to just run close modal alright so now if i click opens up i click outside if i click inside it doesn't obviously it doesn't close but if i click either the close button or i click outside that's going to close now if you want to do make it a little smoother like when it opens see how it just kind of flicks in and that's that's what hulu does they did put it on the side for smaller screens but i don't see a need to do that but if we wanted to have kind of a a delay we could add in our css we could do a little animation here so let's go to [Music] see we want the modal box and i'm going to add let's say animation and we'll have a keyframe an animation called modal open and let's make the direction direction duration one second and then right underneath here we'll say at keyframes modal open you could call it whatever you'd like and let's put our from so from we're going to start with the opacity at 0 and then 2 we want to end up with the opacity at one which is just you know no no transparency so now if i click you can see that it kind of fades in it takes a second if you want it to be shorter you could do like .5 or i mean if we could say like four seconds and it's going to take four seconds to actually get to opacity one but i think one second is good all right so now what i want to do is actually take this project and deploy it to hostinger so we're going to do that next all right guys so we're going to go ahead and deploy this hulu website and we're going to be using hostinger they are the sponsor of this video and we're using a shared hosting account so if we go to hosting shared web hosting and there's a bunch of ways that we can deploy we can use ssh we can use ftp there's a lot of different ways i like to use git so that way we can just push to a github repository and we can set up auto deployment so that's the first thing we need to do is create a new repository so i'm going to go to github new repository and we'll call this hulu webpage clone and this will be the exact repository that i have in the description and we'll just say hulu webpage clone and i'm going to make this public let's create a repository and i'm just going to grab this right here so i'm going to copy this this is to add our remote repository let's go back to you can either just open a terminal or you can use the vs code terminal which is what i'll be doing so i'm going to open that up and we'll make this bigger just make sure you're in the file directory and let's initialize the git repository so get in it okay and then let's go ahead and i'm just going to clear this up so we initialized the repository now let's get add all so we're going to add everything to the staging area then we want to make a commit to our local repository so git commit dash m and we can put a comment we'll just say initial commit okay now i'm going to clear that up and i'm going to paste in that git remote command which is going to add our remote repository and then if we look back here we just want to create a main branch so we can paste that in and then we're going to go ahead and grab this and we're going to push to our main branch all right and then once that's done you should be able to come back to your repo reload and you should see your files okay now we can take let's see let's go to code and we want to grab our ssh so click on ssh and we're going to just copy this to our clipboard all right and then we're going to go to hostinger and i'm going to log in okay once i'm logged in i'm going to go down to my hosting account that i want to use which is this traverseydemo.com so i'm going to click manage and then i'm going to go down to i think it's advanced and then get okay now we do need to generate an ssh key um the repository i'm going to paste in that's what i just copied from github but i do want to generate an ssh key and then what we want to do is take this we can just click copy and go to github and go to settings so i want to go over here and go to settings and we just want to add this ssh key so right here ssh and gpg keys we're going to click new whoops i don't want gb gpg new ssh key and i'll call this hostinger and then we just paste that in and add our key okay so now that's added as a key all right now so this is the repository that we want to use the branch name is main and then directory it's just the root directory so let's click create and we should see a message yep get report get repository stored successfully and if we scroll down you'll see manage repositories and we should see our hulu web page and it's as easy as that if i go to traversiedemo.com there we go we're all deployed and just check our modal that works good so if you're interested in hosting i have a 10 off coupon in the description and hopefully you guys enjoyed this hopefully it should help you sharpen up some of your css skills and you got a cool little project so thanks for watching and i will see you next time

Channel: Traversy Media

Views: 58,351

Rating: 4.9786625 out of 5

Keywords: html, css, html and css, html css, build a website, website

Id: 9OVLaEjY-Rc

Length: 90min 56sec (5456 seconds)

Published: Thu Jul 15 2021