Pluralsight Login Page Clone - HTML & CSS

[Music] this video is sponsored by dev Mountain if you're interested in learning web development iOS or UX design dev Mountain is a 12-week design and development boot camp intended to get you a full-time position in the industry to learn more visit dev mountain comm or click the link in the description below hey what's going on guys so we haven't done a UI project in a while so I wanted to do something with HTML CSS and we're gonna build a clone of the Pluralsight login page which I actually think is a pretty good-looking page here with the the login on the side the sign-in and then this area here with the text in the background image so that's what we're gonna build this is the actual Pluralsight page it is a little different this image was actually different yesterday that's why I did this because this is what they had the text with the button I think this looks better anyways I think this is just a promotion but it isn't the exact code I didn't just copy it I did it in my own way as you can see the logo is sloped right instead of Pluralsight just to avoid any copyright issues so yeah that's what we'll be building it is completely responsive we're gonna be using flexbox along with media queries to make it responsive so right now you can see on big screens it's basically we have flex property of four and the Flex property of six over here so this side is wider once we hit I think twelve hundred pixels which is right here you'll see that it goes to flex one and one which which gives it equal sides and then when it hits I believe 768 the only the entire right side disappears so this is the mobile version and as you can see the real Pluralsight login they do the same thing okay once you hit that point goes to half-and-half and then once you get on bigger screens the right side is bigger alright so that's what we'll be doing guys this is aired towards anybody whether you're a beginner with HTML CSS or you know you just want to build a cool project then feel free to follow along so I'm going to open up vs code and all I have here is my IMG folder my images with the background and the go I'm gonna put this in a code pen which I'll put in the description so just go ahead and follow the links on code pen to grab the images if you want so index.html style dot CSS they're both empty so we're gonna start with the HTML that's usually what I do if it's a small enough project I'll do all the HTML and then go to the styling alright so one thing I want to mention if you haven't used flexbox before I would suggest watching my flexbox in 20 minutes video before this because I explained flexbox more in depth and I'm going to now okay so that's that's the only you know prerequisite I would recommend so let's go ahead and use Emmet here to generate a boilerplate we can do that with exclamation tab the title I'm gonna change to just sign in and then the name of the site which is sloped right I don't know I don't even know where I got that but I didn't want to use the actual company name let's bring in the stylesheet so I'm gonna put a link tag with the rel attribute of stylesheet and an href pointing to style dot CSS which I already created which is empty right now and then in the body we're gonna have an ID of wrapper and we're gonna have an ID of left and let's do an ID of right and I'm just using Emmet to to do this stuff quicker so basically we have wrapper left and right and if we look at the layout wrapper goes around everything and then this is the left this is the right so what I want to do is use flexbox here to align these side-by-side so to do that we're gonna make wrapper the container and left and right will be the Flex items inside but we're going to do that in the CSS which we'll get to in a little bit so on the Left we have the sign-in so let's give this an ID of sign-in okay inside sign in we're going to have pretty much everything except the footer so from the logo down to the create account button will all be in the sign-in div and then this will be a footer so let's do the logo which I'm actually going to do a div with the class of logo and then it I'm gonna do an image tag and that's gonna point to IMG / login logo.png for the alt will just say slow rope right and underneath the div of the logo we're going to put our form okay we don't need an action it's we're not actually going to be submitting this and then we're gonna have to two text fields one is going to be the email and one is going to be the password I'm going to wrap those in a div so we'll have a div with a label inside and this label is gonna say email or username and then we're gonna have a text field text field an input field with the type of text and we don't need a name and ID if you're gonna build some kind of backend you can add that stuff but we're just gonna have a class of text input so that we can style these okay so now I'm going to just copy the div here and we'll go right underneath and paste in another div and let's change this email or username to password let's change the type to password and we're gonna keep the class of text input okay so those are our two text inputs underneath this div we're gonna put our button it's gonna have a type of submit okay and we're just gonna say sign in and then this is gonna have a class of primary - BTN okay so primary BTN is basically going to be like a utility class I want to be able to use this around the site you know if we were to have other primary buttons so that's how we're going to style it and then underneath the form we have we take a look these two links right here forgot password sign in with company or schools so let's go ahead and let's do a class call links and we're gonna put just a link it's not actually gonna go anywhere but this will say forgot password and then we'll copy that down and let's do sign-in with company or school so those are the links if we look underneath the links let's take a look here we have this this or with these lines on the side so basically these are horizontal rules HR tags and then we have the or in the middle so we're gonna have to style it we're actually gonna use flexbox here to style it going in a horizontal fashion so let's have a class of or and then inside here we'll have an HR tag with the class of bar and let's do with Emmet I can do times two because I want two of those and in between we're gonna have a span with the text of or okay again we'll style this later on so underneath the or class we're gonna have our create account button which is actually a link okay so a tag we're gonna give it a class of secondary button okay that border style button that's gonna be secondary button the primary will be the orange color button and this is going to say create and account okay so let's see that's it for the sign in so we're gonna go under the div with the ID of sign in which ends right here and we're gonna put in a footer and I'm gonna give it an ID of main footer and inside here we'll have a paragraph with the copyright so I'll say copyright I'm going to use the HTML entity for the copyright symbol which is hamper samp copy semicolon will do 2018 and let's do slope right and we'll say all rights reserved okay and then underneath that we're just gonna have a div not a dog but a div with two links so let's create the first one this is going to be the Terms of Use and then after that link we're gonna put a pipe character to separate it and put another link which will be the privacy policy which isn't really going to go anyway all right so that takes care of the left side now if you want to check this out you can either open your HTML file or if you're using vs code you can use the plug-in called live server and just say open with live server and there we go that's what it's gonna look like so it's not gonna look good until we add our CSS now we want to add this side the right which is going to be much less markup so we just basically need a showcase so I'm going to call this I'm gonna give it an ID of showcase we're gonna have inside here a class of showcase - content and h1 with the class of showcase - text and the text is gonna say let's create the future together but I'm gonna put together inside strong tags to make it bold all right so that's our h1 and then under that we're just gonna have a link that's formatted as a button so it's gonna have the secondary - BTN class and this is gonna just say just gonna say start a free 10-day trial and that's it for the right okay that's it for the HTML actually so yeah it looks like this now looks like crap so let's start to style it now as far as the font goes the font that Pluralsight uses is actually not free I forget what it's called but I couldn't find it for free so I used Roboto which you can see is pretty similar so if we go to google fonts and search for Roboto and I'm gonna go and just click this right here this drop-down and and choose light 300 cuz I want it to be a lighter font and we're gonna click the plus sign down here we're gonna you can either use the link tag in your HTML or the import in your CSS which is what I'm going to do so I'm going to copy this import right here and then just paste that in and then we should be able to use for Bato inside our font family so let's go back and let's create the body and let's put that font family Roboto okay and just to make sure that's working let's close that up and now you can see the fonts changed I'm just gonna move this mic a little bit all right so let's let's continue actually you know what the the headings any heading I want to make sure the font weight is 300 as well as the body so let's add in a font weight of 300 and I'm actually going to copy that and for any heading we have so for any heading I also want that font weight okay so in the body let's do a background of almost black it's gonna be one eight three times hexadecimal value and then the color is gonna be white and let's set the overflow to hidden so that we don't have any scroll bars by default okay we'll save that and let's take a look and that's what it should look like now so let's let's work on the wrapper and the left and right so basically wrappers like I said is gonna be display flex and that will make the left and right aligned horizontally so let's do that let's say wrapper we want to display flex and I'm just gonna put a flex direction of row meaning horizontal that's the default anyway if you wanted to do the other way which we will do with some other elements you would use column instead of row and again if you want to really learn more about Flex blocks I would definitely suggest watching my crash course so just by doing that if we take a look oops let me just move this back if we take a look you can see that now the right is is on the right and the left left so we want to basically have it take up the whole page and be split in the middle so the way that we can do that is with the Flex property so if we say left and right and we set the Flex property to one and we save that and we take a look now it takes up the whole side and it's split evenly and you could change this like if you wanted right to be bigger you could do two and if we look now this side is bigger we're actually going to do a four six split on big screens but we're gonna add that through a media query in a little bit but the default I want to be flex one and one so the left side is also going to be a flexbox meaning everything inside this left div will be a flex item but I want it to go the other way I wanted to go up and down in a column so first of all let's display flex because you can have a flex item be also be a flexbox and then let's say Flex Direction column all right and we'll just oops I just want to move this up okay so let's align this stuff because right now you can see that this is aligned over here yeah we're gonna we're gonna do align - items to the center so if we saved that we take a look you can see it moved everything in the center horizontally I also want it centered vertically and to do that we use justify content but we also have to add a height so the height is actually going to be the whole Hut whatever is available so a hundred viewport Heights that takes up the whole browser in you know vertically no matter how big or small the browser is resized so now we can justify actually put this here on say justify content to the center okay so this is how we can position stuff so it's safe that and take a look and now you can see it's in the center both ways now I think that's good now we want to format this block okay the sign in everything that's in that sign in so I'm actually gonna put a comment here this is gonna be all sign in stuff so the sign in div itself we want that to also be a flexbox because we want to align stuff in there so we're gonna say display flex and we want to display it as a column so we need flex direction column so what goes up and down left and right and we want to justify content to the center align items to the center and we're gonna set a width of 80% okay instead of a hundred I don't want it to go all the way across its parent which is the left I want it to be 80% of that okay and then I'm just gonna add a padding bottom just to push the footer down a little bit I'm gonna use one REM now if you don't know what a REM unit is I do have a video explaining REM and M units in depth but basically it's a multiplier of whatever the pixels of the HTML element so the HTML element by default is 16 pixels so that's what one REM is gonna be now you could explicitly change the pixels of the HTML element in your CSS like let's say we set it to 10 pixels then one REM would be 10 pixels but in our case it's 16 ok 0.5 REM will be 8 2 REMS will be 32 it's just a multiplier of the HTML font size all right so let's go ahead and save that and now you can see it's about 80% so we're gonna work on the let's see let's add in the form so we'll say the sign-in form I just want that to be I'm gonna set the width to 80% and I'm also going to add some padding bottom to that and what I mean here is this is the the form where this ends so I want to push down these links that's the padding bottom that I'm adding and I'm gonna use three rims okay so that's the form now let's do some stuff with the logo so sign in there's a class of logo now you don't technically need to put sign in here because there's only one class of logo but I think it's it's or it's more organized to do it like this just so you know that that's in the sign-in so I'm gonna add a margin bottom to push it down and actually going to use the viewport Heights here so 8vh okay and the image itself so I want to say sign in class logo and then the image I want to set that to a fixed width of 300 pixels all right so let's take a look at that which is this right here so you can see this is pushed down this is a little smaller it's now the same size as this we also put padding here and padding here so just to kind of break things up a little bit so now let's work on the actual text fields and labels because this doesn't look very good so we're gonna work on the label first so let's do sign-in label and I'm gonna set a font size of 0.9 remm I'm gonna make it a little smaller and then a line height to just push the input down a little bit I'm going to use two Ram here and I'm gonna set a font weight 500 okay so that'll take care of the label now the text input say sign in remember we have a class of text input on the email and password so we want to do a margin bottom to push things down a bit so 1.3 R M and let's set a width to a hundred percent of its container we want the the input to go all the way across rather than you know have the label next to it so if I save that and we look you can see now it goes all the way across so let's see we also wanted a slight border radius okay so a slight curve on the edges I'm just going to do two pixels and then the background of the input is going to be dark okay so it's going to be that same one eight three times okay now since it's a dark background we want to have a border that'll be light so we want to do one pixels solid and let's do five five five which is kind of a medium gray I guess I don't want it to be like really light the color of the text will do CC C which is a light gray and for padding we want it to be fatter and then you want the inputs to be fatter so we're gonna do 0.5 REM top and bottom one REM left and right alright and then finally the line height we're gonna set that to 1.3 REMS and you can experiment if it doesn't look right to you it's fine you can experiment with it but I think this looks pretty good now one thing you'll notice if we look at the the final product the the these are not as wide and the reason is because the container the Flex item here is not as wide because on larger browsers we have a four six ratio rather than a one and one so I think that we should add the media query now just to handle that so I'm gonna go down below here and let's say media queries okay so basically what we want to do is say if the browser is is larger than twelve hundred pixels then change the orientation make the right side bigger so to do that we want to say at media okay if you've never written a media query this is how you do it and you you can do max with min width you can also do Heights we want to do a min with a minimum width of 1200 pixels what this means is if the browser is 1200 pixels are bigger than kicked these styles in and the styles we want to do is gonna be left left is gonna have instead of flex one we're gonna do flex four and let's do right will be flex six okay so if I save that we take a look now it's the say these are the same widths because the line is although we can't see it because we don't have an image here yet the line is right here instead of in the middle only on bigger screens if I make this smaller it's gonna kick back into half and half once it gets to twelve hundred so that's where we're starting to make it responsive let's see what do we want to do next so we did the text input I think next we want to do let's do the the button because right now if we look this button looks like crap so that's gonna be the primary button now prime of the primary BTN class is more like a utility I want to be able to use it across the site even though I mean this is the only primary button but just in case you were to add more it's gonna be separate from the specific sign-in form so let's say primary button and let's say we want to do here we want to actually do a few things so let's make it thicker bigger bigger with padding so I'm gonna say padding and that's gonna be 0.7 REM top and bottom and then one left and right I'm gonna give it a specific height of 2.7 REM and let's do display:block okay so that it's on its own line border will say 0 we don't want a border on this and then border radius I'm gonna make it a little curved with a 2 pixel border radius font-weight let's do 500 and let's do a background color of that that orange color which is going to be f9 six and then eight one six okay so that'll be the background the actual text color however will be white we want to make sure we don't have any underline so text decoration is going to be none that'll take away the underline we want the cursor to be a pointer when we hover over it and we want to text the line to the center and then finally I'm going to add a transition of all properties and we'll say zero point five seconds so when we add a hover state as long as the property is something that can transition it will and we're gonna have the color change slightly adding a transition will allow it to slowly fade into that color rather than to just switch to that color when you hover over it so let's take a look at that okay so that's good that's what I want primary button to be I do want this to go all the way across but I don't want every primary button to go all the way across so we need to specifically say up here sign in dot primary button that's where I want to add the width of 100% okay so we want that so that every primary button you were to create doesn't have a width of 100% but this one we want to oh actually the Oh see how these are stretched out further than the button that's because we don't have our box sizing properties set basically we added padding to these inputs and it's adding to the width so what we need to do and I should've did this earlier is I'm gonna go above the body I'm gonna say I'm gonna use an asterisk representing everything and I want to set the box sizing property to border box so if I save that and go back notice that now that padding it doesn't add to the width it's not going to stretch it out so I forgot to do okay so that's that's exactly what I want so let's go back down so we did the primary button let's let's do the primary button hover state which like I said is just gonna lighten it a little bit so say primary button hover hover I'll say hover and the background for that is going to be a hexadecimal value of FF 7 B 3 9 which is just a lighter a bit of a lighter orange and since we have transition all we could do just transition background I guess doesn't really matter our back we'd have to do background color and then do background color here so what that'll do is it'll slowly train well not slowly just whatever we put here 0.5 seconds it'll take to transition the color when we hover so if we take a look and we go over it you can see it doesn't just flick to the color it takes 0.5 seconds and you can make that longer if you want if you want it to slow going slower so now let's work on the secondary button which this create account and then this trial button these are both secondary buttons so I'm gonna copy all of this the primary button in the hover State paste it in and I'm gonna change this to secondary button let's change this to secondary button hover and we're gonna just change a couple things here I want the same padding same height all that stuff we do want to change the background to none okay it's not gonna have a background we do want to border though so instead of 0 we're gonna do 1 pixel solid and let's do F for 3 times which is a light gray okay I think that's all I want to change here and then for the hover instead of the background color changing to orange we want the border color to change to that color as well as the text color so we want this as well so let's save that and let's go back okay now if I hover over it there's no transition though because you know what I do want to keep this to all or at least make the secondary button all because now we're not transitioning the background color there is no background color in the hover state so we'll just say all and I'll just put this one to all as well all right so now if we go back and hover you can see that it slowly fades in okay don't worry about this being all the way across we'll fix that later on so there's a couple things all this stuff down here we want to be 60% okay if we look at the final project you see how these are it's it's more narrow than the form the form is 80% of its container we want this stuff to be 60% so let's add those styles I'm gonna go right sign in you know we'll go right here and the things that we want to be displayed 60% are gonna be the sign in secondary button , okay we also I'm also just gonna do this now I want the or class to be 60% as well as the links so all that stuff the width should be 60% okay so now you can see it looks like this so the create account button is pretty much all set let's go back up to the links right here we want them we want these to look like this we want them to be on top of each other so let's see yeah let's let's go right under that and let's do sign-in links class and then we want to style the individual link so first of all the color is going to be white we want to do a text-decoration:none we don't want an underline we want to actually push them down so we want to add a margin bottom and we're gonna do one REM okay we want them display as block so that they're on their own line I'm actually going to move that up here and then let's see what else do we want we want to align Center so text align Center and as far as the font size goes I'm gonna make them a little smaller so I'm going to do 0.9 REMS and I think that should be it so let's take a look at the links good now we're gonna work on this part this or where we have the bars on each side so we want that to be display flex so that they go across in a row so let's do sign-in or and we want it to display flex I guess we'll just put flex Direction row and let's add a margin bottom to push things down we'll do one point to REM and I also want to align to the center so align text Center I'm sorry not aligned text-align items okay so let's take a look now these right here you can see I I want these to go all the way across these bars so what we're gonna do here is go underneath and let's do sign in dot or and then for the class of bar we're actually gonna set flex Auto I'm gonna remove the border so I'm gonna say border zero or let's do I will do border none' and we're gonna just have a one pixel height okay and then the background is gonna be gray so we'll do triple-a okay so let's save that and take a look and now we have the lines here so I want some spacing right here so we want to style this or which is in a span right it's in a span so we'll say sign in in the or class we want to target the span which has the text in it and I'm just gonna make the color light gray and then let's add padding zero on the top and bottom and 0.8 RAM on the left and right I don't know why I put oh zero okay so let's take a look and now there's some spacing there so that looks pretty good so now we want to move on to the footer okay this footer right here and there's not too much we have to add for the footer it has an idea of main footer okay so I'm gonna say will make the color of the text gray and let's text a line everything to the center and let's set a font size we'll make it a little small I'm going to do 0.8 mm and I'm going to give it a max width of 80% and then padding top because I want to push it down quite a bit I'm gonna do five REM all right now the links in the footer so the links in the footer they're actually gonna be that orange color which or is it will grab it from primary primary button so that's going to be the color and I do what I do want them to have an underline because that's how the Pluralsight login page has it so I'll do text-decoration:underline which I don't use very often so let's save that we'll take a look and good so the photo looks good now we're gonna work on the this side the right side with a showcases so let's go ahead and let's put a comment here footer and right above the footer I'm gonna do all of our showcase stuff alright so showcase itself is gonna have a background image so I'm just going to use the background property and I'm gonna just put them all in the same line so the URL is gonna be in the image folder and it's going to be the log in beat BG okay we're gonna do no-repeat positioning will be Center Center on both the X and Y axis and then we want it to cover the entire area okay so if we save that and we take a look it doesn't look very good because we haven't we haven't set a height we want the height to be a hundred viewports so let's do height 100 VH okay we're gonna do some other stuff here this is actually going to be flex because everything in it should be a flex item so let's say display flex although actually no that yeah that should be fine and we want to Center everything so justify Content Center there's really only one item inside the showcase which is the showcase content class but I'm using flex so that we can Center it properly so we want that we also want to line items Center all right and let's make sure that everything is text-align:center as well okay so we'll save that and let's take a look good now let's make this a little more big and prominent so that has a class of showcase text so let's say showcase class of showcase - text font size I'm going to increase that to 3 R M and we want to set the width to 100% the color white and let's set a margin bottom - push the button down to 1.5 r m all right let's take a look good so the secondary button in the showcase it's a showcase secondary button I'm gonna set a width of 60% and just set the margin to auto so it's always in the middle let's take a look and there we go so that looks pretty good so we're almost done here we just need to make this a little more responsive because right now if I make this smaller kicks in here which is you know half and half which looks pretty good but once we get smaller like that obviously that doesn't look good so we're going to just completely get rid of the right side so down here at the bottom I'm going to add another media query for smaller screens basically tablet and under so 768 is a good a good width so let's say media and this time we're going to use a max width of 768 pixels meaning that anything that is under 768 or under these styles will will come into effect okay so the entire right side I want to set to display not so now if we go and we check and make this smaller the whole right side disappears which is exactly what we want now we still have some work to do because this looks fine on a browser but on a mobile device remember they're they're much shorter than this and right now we have it set to overflow:hidden which means we don't we won't even have scroll bars we won't be able to scroll so I'm gonna do a couple things here to basically make this you know less long so let's add in and we can probably just move this over yeah so let's do body and I'm just gonna change this to overflow:auto okay now the reason that this is pushed down so FAR's because our left div the I did with the idea of left the justify content is in the center so this is being in the center vertically what I want to change that on on smaller screens so let's go ahead and say for the left we want to add justify content start okay so if I save that now it gets pushed up I think it's a little too far up so I'm just gonna add a margin top here oops let's do margin top and we'll just do two viewport Heights which will push it down a little bit now underneath here this is too much space we don't need that so let's target the logo so I'm gonna do sign-in logo and we're gonna add a margin bottom I think right now it's like eight viewport Heights so let's change that to let's do to viewport Heights and save so that pushes that up we can also save some space on the text inputs right here I think there's like 1.3 Ram or something like that so we'll go ahead and say sign in and we want to get the text input and let's add a margin bottom or change the margin bottom from whatever it is to 0.7 REM save that so that made these more closer together and then the footer obviously there's a lot of space right here we can save on that as well so say foot actually what is it main footer and we're gonna set the margin top which I believe is initially 3 R M we set it to so let's set it to 1 R M on smaller screens main footer I'm sorry it's padding not margin and there we go pushes it up I do want to push the logo down a little bit so for left margin top let's do 4 yeah that's better okay so that looks pretty good and that should do it for I'm not gonna say every mobile device but most of them especially the newer ones yeah so once we get here splits once we get here it goes into you know 40 60 basically alright so that's gonna be it guys I hope you liked this project if you did please leave a thumbs up and that's it I'll see you next time

Channel: Traversy Media

Views: 123,493

Keywords: html, css, html css, logn page, login ui

Id: wIx1O5Y5EB4

Length: 42min 35sec (2555 seconds)

Published: Thu Nov 08 2018