Create a Split Landing Page With HTML, CSS & JS

[Music] hey guys in this video we're gonna build a splint landing page from scratch using just HTML CSS and a little bit of JavaScript so the idea of this would be for someone that is a designer or a pro and a programmer and of course you can substitute this with anything at all but you may have different sections or pages for each of these these categories so this is a nice sleek way to give your visitors the option to choose where they want to go do they want design services or programming services and you'll see if I hover over the designer it's going to extend and push the programmer part over and make it darker and we can hover hover over this button as well and this would go to a specific part of the site and then the same thing over here if we go hover over programmer it'll push designer over and we could go to that part of the site alright and as far as responsiveness it's pretty responsive if I go down to a certain point you'll see that the button and the heading will get smaller you can tweak this this around if you want when we get to about here it starts to mash up a little bit but if you hover over one of them it comes into focus okay even on very very thin screens and then for the height you'll see that if I make this smaller I don't want them to mash into each other so I added a media query that when we get to a certain point the button gets moved to the bottom that way you can have it even at this height and it'll still look good alright and we're using some background images from pixels com and I will include the code pen and that'll have a remote link to the images another thing we're going to do is we're going to use the native CSS variables or CSS custom properties which I did a tutorial on about a week ago but I haven't created a project yet using them so we will implement those in this project so you can easily change for instance the background colors you can change the width for instance this is 75% in the programming is 25% but you can change that up easily with the variables all right so that's what we'll be building guys hopefully you enjoy this and you can use this on your own website if you want it's open source and let's get started hey guys if you've been watching my videos for a while and you really like what I do when I've helped you out a lot consider becoming a patron even for one dollar per month it pushes me to keep bringing you guys the best content I possibly can there's reward tiers for discounts for you to me courses personal support and more so check out the patreon link in the description below for more info all right so we're gonna get started here I have vyas code open and what I've done is I've created three files index.html mange a s and style dot CSS and they're all completely empty and then I have an image folder an IMG folder with the designer dot JPEG and programmer dot JPEG which isn't going to display it's too large but I have those images and I will include a remote link with the code pen but if you want to download these yourself what you can do is go to pixels com so PE X Els dot-com and I just search for programming and these are all free to use images and I grab this first one here and then for the other one I search for design red and it's this brush one right here and for both of them I grab the nineteen twenty by twelve eighty version alright so let's start off with the HTML it's gonna be very very simple so let's go ahead and add our basic boilerplate with Emmet so we'll do exclamation tab and that will give us just our basic boilerplate here and we'll add a title of let's say split landing page and I'm gonna add in a link to our style sheet okay and let's go ahead and add a container class this is going to be very minimal and then we're gonna have two classes with split so I'll go ahead and say split times to tab with Emmet and then this one will also have a class of left and then this one will have a class of right okay so each of these they're gonna have an h1 this one will say the designer and then let's do an a tag here with the class of button it's just gonna go to a hash and then for the text we'll just say read more all right so now I'm just going to copy the h1 and the link and put that into this div and we'll change the text here to the programmer and we should be all set now we just need to add in our script tag and it's going to point to main dot J s all right and that's it so we'll save that now I am using live server which I have running let me just stop it real quick if you want to use live server and vyas code you can go to the extensions icon and just search for it here and it'll come up and you can just click the green install button and that'll set it up and then you can simply right click and just say open with live server okay so that's what it's gonna look like for now so let's uh let's see I would say let's do the JavaScript next because it's pretty easy all we need to do is remove and add classes the hover left and hover right classes from certain elements so we're just going to create a couple variables we're going to create one called left and we're going to use document dot query selector and we're gonna grab the class of left all right put that in a variable and let's see we'll go ahead and just copy that and then we're gonna have a couple more here so this is going to be for the right class of right call that right this one's gonna be for the container so it'll be dot container all right so those are our variables from the Dom we're gonna take left and we're gonna add an event listener onto it please don't use jQuery for this it's this this is exactly what you should not use jQuery for there's no reason for it we're just gonna add an event listener for mouse enter and we'll put a function here I'm just going to use a callback I'm sorry an arrow function and then we're gonna take the container and we're gonna say dot class list what we want to do is add a class so classless dot add and we're gonna put in here hover - left that's the class we want to add so for the left class which is this right here okay this div right here when we mouse enter it then we want to add the class of hover left that's that's all this is doing all right so let's let's go ahead and copy this down and let's add an event for Mouse leave so we're going to actually now remove that class so we can say class list dot remove hover left and I'm going to just copy that again and then this is gonna be for on the right element for a mouse enter and then we're gonna add the class of hover rights okay and then we want one more and this is gonna be for the mouse leave so right mouse leave then we want to remove hover right okay and that's it that's all we need to do for our JavaScript we can go ahead and save this and we're done here so the style.css this is this is where most of our work is going to be done so like I said we're using CSS variables also called custom properties and I'm gonna scope them all to the root element so that we can use these variables anywhere in any other element all right so first thing we'll put is the container background color and we're gonna set that to hexadecimal 333 which is a very dark grey and then let's do the left - BG - color and for this we're going to use an RGB alpha value and I want to make this a red so it's going to be two two three three nine three nine that's the red green red green blue and then for the opacity or the Alpha value we're gonna do 0.7 okay so that's the left BG color now let's do the left button - hover - color and for that we'll do our GBA and this is gonna be just like a darker red so we'll do one six one 11 eleven and let's do 0.3 for the transparency okay then we're going to do our right bgcolor so for that this is going to be a dark gray almost black so it's gonna be 43 what whoops we need to do our GBA and then 43 3 times and let's do for the alpha 0.8 and you can experiment with these colors if you want but if you want it to match exactly what I'm doing then use these so now we want the button hover color for the right side so our GBA and this is gonna be just a lighter dark grey so it's gonna be 92 three times and then for the opacity let's do 0.3 okay now we want the hover width variable so I'm gonna set this to 75% and then the other width is what I'm calling it I'm gonna set that to 25% and then the last variable we want is the speed that we want it to move and I'm gonna do 1000 milliseconds which is one second okay so that's it for our variables now we're gonna move on to the HTML and body so for the for this we want to zero out the padding and margin so margin zero and let's do a font family of franklin gothic medium let's see you'll do a width of 100% and a height of 100 percent and then I'm gonna do an overflow - X so we prevent any any horizontal scrolling so we're gonna set that to hidden okay so after the hgm body let's do the h1 so we're gonna set a font size here and I tried to use all REM units if if you don't really understand REM and M units I have a tutorial on that I did about a month ago or so you can search for that if you're interested let's do four REM basically one REM is equal to whatever the pixels of the of the roots HTML element which by default is 16 pixels so for REM would be 4 times 16 pixels okay and I go more into that in that tutorial so color is gonna be white and then position is gonna be absolute and we're gonna say from the left 50% and then from the top 20% alright and if we look at the finished product here what we're talking about this h1 so we're saying from the left 50% from the top 20% okay so let's continue here and let's do transform because we need the h1 to actually move when we do our transformation or our transition so we'll set translate X we want it to move along the x axis and we're going to do negative 50% all right because when we look and we hover over this see how the h1 moves same thing with the button we need that to move and not stay in place and then I'm also gonna add in white space of nowrap because when this moves over when that moves over I don't want the programmer to go on the next line even if even if this gets too small I want it to just stay on one line so I'm adding the nowrap all right so that's the h1 now let's do the button so this has the most Styles out of all the elements we're gonna display it as a block level element we're going to position it absolute and as far as its position we'll do left 50% just like the h1 and then from the top are gonna do 40% ok the h1 was 20% this one we want below so we're going 40% from the top so for the height of the actual button let's do 2.5 REM for the padding we're gonna actually just do padding top and we're gonna set that to 1.3 REM and then for the width of the button I'm going to do 15 REM and then let's align to the center and let's make the color white and then we want to add a border so the border will also be white not 4f solid and I'm going to use a REM unit here so we're gonna do 0.2 REM for the the width of the border alright the font size we're gonna use one REM so 16 pixels and let's make the font-weight:bold and let's make it all uppercase with text transform and let's make sure there's no underline so we'll say text-decoration:none and we also want to add a transform on this which will be translate X just like the h1 and then here we're gonna say negative 50% okay so that should be good alright so the next thing we're gonna do is the the button:hover so I'm going to do button:hover actually there shouldn't be a space there so button:hover and I'm gonna set the background color now remember we have a variable for this so this is the first time we're going to use a variable so we need to use the var syntax and then just pass in the variable we want which is going to be left button hover color and if you're using vyas code you'll get these nice dropdowns and then the border color is going to be the same thing so that'll also be left button hover color actually you know what this is going to be only for the left part because yeah this is going to be for the left so let's add dot split dot left button hover alright and then what I'm gonna do is just copy this and let's do split right button hover alright remember we had that we have a variable called right button hover color as well all right so now let's do the container so the container is actually going to be positioned relative and I'm not showing you it yet because it's just it's gonna be nothing if we look at it you can see there's nothing I mean the words are there let me see if I can highlight it they're just white yeah we can't we can't see it yet so we'll get back to it after we add some more stuff let's set the container with to a hundred percent and the height and for the background remember we had a variable for that so that'll be container BG color alright so now if we look at it now it should look like this so far okay so let's see that's it for the container now let's do the split class so for the split we're gonna set left to zero and this is where we're gonna set our I'm sorry not left zero this isn't that's not right we want position absolute and the width is going to be 50% for the split okay member the right and the left clap elements have the class split on it so each one will be 50% wide and a hundred percent high and then we're just going to set the overflow to hidden we don't want any kind of scroll bars or anything like that so that'll be hidden okay now we'll do the split left so it'll be split dot left and this is where we set left to zero and we're gonna set our background URL so background set that to a URL and it's gonna be the design our image so it's in the image folder slash designer and then we want to Center the image X&Y center and then no-repeat okay and then for the background size we're gonna say cover all right so let's see what that gives us so now it's pushed over you can see that it's split where's the I guess it doesn't show the background image yet or is that not loading hmm why is that not loading oh I didn't put that dot JPEG there we go okay so that's that side now to add the the overlay for the image because we don't want just the image we want a color overlay for that we're gonna use the before pseudo-class and CSS so we're gonna say dot split dot left and then colon before alright and this can be used to add content so first thing we're gonna do is just position it absolute we're gonna say content but it's going to be empty we don't want to actually insert any content here we want to set the width and the height to a hundred percent just like the split left and we'll set the background to the variable of left bgcolor all right so that'll be the overlay so now you can see that the picture is darker because we have the overlay of the red alright so we're getting there now we're gonna start to work on the right side so let's do split dot right just move this up for you guys alright so split right and we're gonna set right to zero and let's set our background URL here as well so say background URL and center center no-repeat and for the URL it's gonna be in our image folder slash programmer dot jpg all right and then we just want to do background size and that should be cover okay now just like we did with the split left we need to have split right before for our overlay so split right before and we can actually just copy yeah we'll grab this and let's set the background color to right BG color all right so let's take a look at that and there we go now there's no effect yet or anything like that but we do have our split-level design so pretty cool now we want to add the transition so we're gonna go down here we're gonna add for split left split dot left and also split dot right also for the split dot right before and split dot rights I'm sorry split dot left before so this is where we'll add a transition you know transition so transition takes in the speed and also if we want the way that we want it to to move we're going to use ease in out but the speed is actually in a variable so we're gonna use that here and then we're gonna say all and then ease in out so basically you know start off slow and then oops and then end slow all right now this is where we want to add our hover left and hover right stuff now remember this is an apply until we do our Mouse enter and mouse leave that's what we did in the JavaScript file we're adding and removing these classes so add the class of hover - left and then on the Left element so we want to set the width here and we're going to use our hover width variable okay and then for the right so hover left and the right this is where we want to use the other width variable okay so when we hover over the left we want the left to be the hover width which is the the larger one the 75% also when we hover on the left we want the right side to be the other width which will be the 25% all right so hopefully that makes sense and then we're gonna want the like the heading and the button to fade a little bit so we got a we got to go to the before so hover - left and then we want the right before and we're gonna set the z-index to two because we want that to come up front all right and then let's do the right so what I'm gonna do is actually just copy all of this and then we'll go ahead and just bring that down oops just clicked outside and then this will be hover right let's do hover right right and then for the width let's see hover right right we'll have the hover width which will be the the large one and then let's do hover right left which will be the other width okay and then for hover right and then we want to do left before we'll have Z index of two all right so what I'm gonna do is save this and let's go over here now if I hover over it it gets pushed over but this side does not let's see why isn't that that sides working perfectly but this one's not so what did I screw up so hover left left right before left before all right well you know what let's look in the JavaScript here so we enter the left side it adds hover left we leave the left side it removes however left we enter Oh most enter I spelled this wrong I forgot an e here should be mouse enter all right let's try that that should work stupid mistake so that side works that side works good okay the button isn't hovering this one is so that works but this one doesn't so I must have a mistake somewhere else let's go up to where the button is let's see split left button hover left button hover color I'm sure you guys have seen you guys probably notice that spelling mistake earlier left button I recolor rgba okay something's wrong here I put a dot stupid mistake all right so now that that hover works good so you see how the when I went on this side the programmer you see how it fades kind of the h1 and the button and stuff that's what the Z index is doing so right here if I were to get rid of this and now that side you can see it fades out but this side doesn't so that's why we need that Z index there in case you are wondering about that but that's pretty much it aside from our media queries everything else it looks good so let's just add in some very simple media queries for responsiveness I want to do it for the height in the width so let's do at media and we're gonna say for a max width of 800 pixels so basically when it gets down to 800 pixels or anything less than that then for the h1 I want to reduce the font size I think it's for R M but I want to reduce it to 2 R M and then for the button I want to set the width to twice it's 15 by default I'm gonna set it to 12 all right and then I'll add one more media query for the minimum height so when its height of 700 pixels or less then we're gonna take the button and we're gonna change the top property which by default I think is 40% from the top we're gonna set it to 70% which will move it down so let's save that and let's go ahead and try it out so reload everything works good let's go ahead and make this smaller and when we hit a certain point 800 pixels then the heading and the button gets smaller okay and then for the height if I were to make this smaller wait a minute I think I have it backwards yeah this should be max height all right so it should the button should be close to the heading until it's on it's very small and then it goes down to the bottom good alright guys so that is it so I bet this was a little easier than you thought especially on the JavaScript side all we need to do is add and remove classes there's no need to use jQuery for something like that so I'm gonna put this in the code pen and put the link in the description if you guys want to take it and use it and tweak it you can use different background images feel free to put it as the home page of your website if you have you know more than one section maybe you could even tweak it and add a third section and have that kind of do some cool effects whenever you guys take my work and take my tutorials and modify them and can create something new and are add to them feel free to put a link in the description I'm not in the description in the comment section and I'll always approve those links they usually go right to spam but if it's something that you worked on that has to do that's relevant to my tutorial I'll always approve those if you want to share them with other people alright so that's it guys thanks for watching if you like this video please leave a like and please follow me on social media I'm trying to build up my Twitter audience and fate my Facebook page and all that stuff so if you can take a second just to go over there and subscribe or whatever it's called follow I'd appreciate that alright thanks guys I will see you next time hey guys I've just created a new discord server that's open to the public the goal is to have a place where people can go to help each other out for programming issues as well as just a place to discuss new ideas and get feedback I also check in daily there's a channel to request videos on YouTube and much more so if you want to check it out just go to discord GG slash traversée media

Channel: Traversy Media

Views: 125,666

Keywords: html, css, js, javascript, landing page, html page, html website, split landing page, html landing page, html css

Id: oRmQN244Ir0

Length: 34min 13sec (2053 seconds)

Published: Wed Jan 03 2018