Overlapping Layout With CSS Flex Box

[Music] so what is up guys welcome to this video today we are going to create this overlapping layout so this is a popular kind of layout you might saw it many website and in this video we are going to create these with html and simple css so you can see that there are two columns and they are overlapping each other and it's looking good and also it's a fully responsive design so let's go to responsiveness here so it's looking good in our large device so let's check and what it will be in our small device so you can see that in our small device it's also looking good and that's what we are going to make in this video i hope you will like it and no more talk let's dive into it and here is my html and here is my css file and i also have this image here so let's come here in our html let's get the layout so i will have a boiler plate you can create a while plate in with the studio code with exclamation sign and after that i will have a section and inside the section i will have a d with a class of container and inside this container i will have a div which is basically our left side so it will be the left side div and also similarly we will have a right side div so right side dip so this will have a right class so inside our left class we will have the image so this will be empty for now because we will use the image as a background image so in our right side we will have a div with a class of content so there will be our all of content so first of all let's create a h1 so inside the h1 let's say that this is a heading so very simple and after that i will have a prep graph where i will have some text so let's use lorem 20. so this is basically what we will have and after the program let's also have a anchor tag with and death link and for the text we will have something like click me and let's also give it a class so that we can style it so button so this is our simple layout we don't need anything else so let's link our style sheet here so it will link the style sheet so first of all in our css let's remove all the unexpected gap with the universal selector so here i will say that padding will be zero and margin will be also zero and also let's say that box sizing will be the water box and after that let's grab some fonts here so let's go to the fonts.google.com and here we will actually use monster at front so let's search for the monster art and that's the font and just grab something like 300 which is the light and also let's grab the 500 which is the medium so grab the embed and from the embed let's grab the import tag so copy that and paste it in the top of our css so now we can use our font inside of our this css file actually let's save and see what is happening here so you can see that all the content that we have in our html so all the heading and all the program and and our buttons so in our html first of all let's actually say that the font family that we want to use actually monsterat so this will apply the font so you can see that the font is already applied and after that let's come to the section and here let's say that mean height something like 100 vh and also the width will be 100 and after that we will have display which is the flex and align items will be the center and also justify content which will be also center so basically it will make the content center of our website so as you can see here and also we will have a background color here so the background color we will use actually so let me copy the background color here so this will be a simple color so as we consider that's how our background color that we have so after that let's come to our container so container and here we will say that the width will be something like 90 percent and also the max width and it will have something like 1000 pixel so maximum width and also let's say that margin will be 0 and auto auto and also let's have something like display as a flex and align items will be center and also justify content will be center so you can see that now we have our container inside the container we are actually displaying the items which is actually our left side and the right side column and both will have um flex as you can see that we are displaying it as a flex and those will be the flex items and we are saying that the align items will be center and justify content will be centered basically all the things will remain in the center inside of our container so now basically let's give some left height and width so that we can see it so let's say that the width will be something like 50 percent and also we'll have a height of 600 pixel and background color will be uh not background color so background image so the background image will be so the image that i showed you earlier so you can see that that's the image and first of all as you can see that the image is not actually what we want we need to resize that so for that i just can say that repeat will be no repeat and also we need to make sure that whenever we are using background property shot and we need to use background not background image so repeat and after that we need to say that the position which is the center and also the size which will be the cover now you can see that it's looking much better so after that let's also say that the border radius so border radius will be something like 8 pixel okay great and looking great as you can see now what i want actually i need to come here in our right side so right and also we need to make the width 50 percent so whenever i will use 50 as you can see that the 50 percent will be for our left and other 50 percent will be for our right so we will have basically two column side by side and also let's say that i wanna have something like min height for that so 400 pixel and after that i will have background color so let's also copy the color so which will be this dark kind of green color as you can see here and after that let's also say that display will be flex for our content so if i display flex and align items center and justify content center so basically this display flags will do a centering here as you can see so it will align everything center inside of our this right container and also what i can do i can say something like i want to have some padding which will be something like 30 pixel so it's looking good and also i can say border radius will be 8 pixel so it's also looking good as you can see here so we can change our color so let's say that the color i want to have is the white color because there is not enough contrast before so it's looking great so after that let's also style this heading and also style the background so those are inside of our h inside of our right column so write each one so i want to have a font size of 40 pixels for our heading and also font weight of something like lighter so as you can see that it's looking good now and also for our break grab so let's select the bread graph here and let's say that the margin will be something like 20 pixel in the top and bottom also and for the left and right i will use zero so you can see that we have some space between the heading and also a space we have between the uh button here as you can see yeah after that let's also say that font weight will be something like 500 and also line height uh will be 25 pixel so if i save now you can see that this font is also looking good so let's also style our anchor tag here and let's see the text decoration will be none so i will not have the underline anymore so our text transform will be uppercase and also let's say that background color will be something like white and also i will have some color so white not white so i use background color white so i can use something blackish color for our font color of the button so we will use padding so 20 pixels for the top and bottom and something like 30 pixels for the left and right and display will be something like inline block and also letter spacing we'll use two pixel so now you can see that we have this nice button here which is looking good so now it is time to create the overlapping layout so for that what i can do in our right side means in our this container or in this column in the right side column we just can create a margin so we want to have a negative margin in the left side so margin left we can use 100 pixel so if i save now you can see that it is having this overlapping layout 150 pixel and it's looking good actually now you can see so you can see that whenever we are going to largest in size it is looking good and also in our smaller skin side it is also looking so if i hover the container you can see that that's our container and beside that in the two side left and right you can see some brown color so these are the ten percent of our width left here so because we said only 90 percent width will be for our container so other 10 percent will actually have as a margin and you can you saw that so it will be good if i have some background color so that i can show you so let's have a background color of something like aqua so now you can see that that's our container and if you can see that we have the container but inside of our container we have some space in the left and in the right side and also we have this aspect which is actually because we say that the width will be 90 percent so rest 10 percent of our width will be as a space as you can see that here and there and also inside our container we have some space because as you can see that in our right side what i say it is whenever we are giving a negative margin means is overlapping means whenever we are overlapping they are there will be some space left so these space will be divided by two and half will be in the left side and half will be in the right side so let me show you i never i will comment it out and save now you can see that there are no more space left because we don't have any kind of overlapping but whenever i will have overlapping it will automatically make everything center and the rest of the space will be divided by two and half will be in the left side and half will be in the right side so basically it will actually make our content in the center so whenever you will create these overlapping layout with flexbox as i created there as you can see so you will have this kind of benefits whenever you will have overlapping everything will be in the center you don't need to worry so that's what i want to show you so let's remove the background color so whenever you will have any kind of overlapping so you don't need to worry everything will be center for you and also you can also change this height and width so everything will be center even if you have a different width something like i want to have 40 and 60 so something like that so you can see that you don't need to worry because everything is center for you so let's also have something like 40 for our right hand 64 hour left so now you can see that everything is center so this is something nice that you will have high whenever you will create this layout with flexbox so also let me show you one more thing whenever we will go to mobile device something like a smaller device size as you can see that it's not looking good so let's create a media query to fix it so media only screen so only screen and max width 768 pixel and width so inside that media query i will just say that the flex container that we have so which is the flex content this is the flex container for our this layout so here i will just say that the flex direction will be the column instead of the row so i just can say that flex direction will be the column so whenever i will do that so now you can see that it's now having a column layout for our flags and also what i can do actually you can see that we are saying that the width will be 50 and the width will be 50 percent also for our left and right so both will have a 50 percent of width for that you can see that there are so many space so what i can do actually i can say that the left and also the right will have a weight of something like 80 percent or even 100 for our left so now you can see that the left one means the top one will have a hundred percent of width so similarly if i can say the right one will have a width of something like eighty percent not hundred percent so now you can see that it's having the eighty percent of the width so you can see that this right one is having a negative margin that we did in the left side so that's why it is in the left side so let's actually say that i don't want to have any kind of margin in the left side so i will say that margin will be zero so you can see that now it is in the center so also what i can do instead of left margin i can give it a top margin which will be also 100 pixel negative because i want to have an overlapping in the top right now so if i save now you can see that we are having the overlapping in the top side of our container and it's looking good as you can see that instead of now we are having a top overlapping but whenever we will go to a large device it will have the overlapping in the left side so you can do that with the opposite way means you can also position this one in the left side and this one in the right side so it will not change anything so the technique will remain same and also if i go to something like a very small device so let me also show you here so now you can see that you can see if i even go further you can see that we have some problem which is actually this this container means this left one it's not having much space so you can also increase the space here and also you can say that the container width that we did before 100 so if i come here so you can see that the container with for our large device was 90 percent so you can actually give it a 100 so if i save now you can see that it's 100 but there will be a problem whenever you will give a hundred percent there will be not any kind of space as you can see that in the side of our container so what you can do actually to have some space in the left and right side you can use margin so i just can say that in the top it will be zero and in the left and right side i will have only 10 pixel so now you can see that in the left and right side there are some space which is 10 pixel and it's enough for our this layout so you can see that it's looking good and whenever i will have something like this kind of smaller device it will also look good and if you want to control these height of our this left one you can give it also a height for our mobile size device so let's say that 400 will be the height for our this left column whenever it will go to the mobile device so if you consider the height is already changed and let's actually give it a 20 pixel instead of 10 pixels so it will look good yes looking good so that's it i don't think anything else left here we did a pretty good job and if i come here so you can see that we have this layout where you can see overlapping columns and it's also a responsive layout as you can see so now you can create this layout this is a popular layout you might saw it many website now you can create this with flexbox and it is really simple and easy things to do so and if you like this video please give it a thumbs up and don't forget to share this video and if you want to see this kind of video this kind of web related video website design web development related video please make sure to subscribe the channel and also turn on the notification bell and my name is arfan and i will see you in the next video till then bye bye good harvest you

Channel: WEB CIFAR

Views: 35,226

Keywords: overlapping layout, overlapping layout html css, flex box practice, flex layout, overlapping sections, overlapping layout html, overlapping columns, image overlapping, overlapping, website section, website layout, overlapping elements, overlap content, overlap, CSS overlap, overlap in css, overlap with flex box, overlapping div, overlapping css, overlapping images in css, overlapping boxes css, css overlapping, webcifar, shaifarfan, html css, web design, css elements overlap

Id: _HTL0XSMcRQ

Length: 18min 27sec (1107 seconds)

Published: Mon Oct 26 2020