HTML & CSS Website Landing Page | Frontend Mentor Challenge

so hello everyone welcome to this video today we are going to create this landing page as you can see that this is a nice looking landing page here we have a simple header here and also we have nice hero section also we have this section with some cards and also we have a cta cards here and we have a nice photo here so also this website is fully responsive as you can see that if i come to the iphone x so in the iphone x it will look like that also if i come to any kind of device something like tablet ipad as you can see that this device is looking good so i hope you guys will like this video and let's start this video actually [Music] so here is i am in front and mentor website and from here as you can see that that's the challenge that we are going to take for our landing page as you can see so here as you can see that we have a download option which and here as you can see that we can download all the starter file here just download it or what you can do is you can get the file from our github repo so come this repo also i will link it in the description so you can get the files from here also and if you come to this page please give it a star i think it deserves some stars so once you have the files what you can do is let's open it so let's extract all the files from here and open it with our visual studio code or any kind of code editor so let me use visual studio code and here it is as you can see that we have all the design something like for the desktop it will be like that pretty good let me zoom in and for the mobile it will be like that so you can see that it's fully responsive also as you can see that we have a image folder where you can see all the images that we used in this web page and also i have a html file and a style guide so in the style guide if you open their style guide as you can see that we have some style guides something like what color we need to use and also what font we need to use in heading or on other section so also you can see that we have some resource for the icons because we are using some social icons i believe in the bottom yeah that's the social icons that we need to use so that's all what we need to do so what we are going to do is we are going to use sas for this web page so let's create a file actually folder called sas so in this sas folder let's get a file called style dot css so that's the css file and for the css file or we need to use actually we need to use a extension from visual studio code which is live sas compiler so that's the extension as you can see that so install this laptop's compiler and also come here in the settings so i believe we need some settings for this live sas compiler so in the settings as you can see that for this web page we are going to use the settings for the live sas compiler if you want you can follow me so here what i am saying that the save path will be in our current directory means if i am in our standard and from here we need to go to back because i don't want my style.css file in this sas file so we need to get back or step out from this sas file and create a css folder in this directory so that's it for the sas settings and here let's watch our search so once you have the live source compiler installed you will get this in your visual studio code this button and just click it and as you can see that we already have this css folder which is automatically created and here we have no css for now but in the future we will have some css so it is working perfectly fine so let's come back to our html so here as you can see that if i open the design so that we can get some style so in the design as you can see that that's the design and here we have a header section this header section we have an app bar here or something like that and we have this hero section here after that we have some cards and in the footer before the footer we have this also cta card here and in the footer we have this nice footer so that's a pretty simple layout that as you can see so let's come back to our html and create this layout so for that so let's have a first of all let's get section so section with the id of first one will be the header so in this header i will have another div with a class of container so actually i will have this container div in each and every section so it will be a common layout something like section and container and after that we will have our all the content so after that as you can see that we have two part first part is this number where we can see that the logo and this button so and after that as you can see that we have our hero section where we can see our images and also the info so first of all let's create these in two parts first one will be the number and second one will be the hero section so we will have a div with a class of nav and also we will have a class of hero so as you can see that in this container we have two the first one is the nav and second one is the hero so in the nav what we will have is we will have a logo so d with the class of logo where we will have our logo so let's get a img tag and here we will have our images and um where is the logo so this is the last one logo.sbd so also for the alternative tag let's get a logo alternative so here that's our for logo so let's get another div in the number so which will be our anchor tag actually that will be the button so type will be the button so let's have some class here so if you can see that in our design we have actually three button uh almost same design on those three so for that what we can do actually so for the button we will have two class one will be the common class for all the cta button and second one will be the individual class for the this will be different for the each of button so this first one will be the cta header so as you can see we have cta which is common which will be the common in our all of button and this is the second class that will be different for the each and every city button so that's for our network and let's go to the hero section so in this hero section as you can see we have two part if i come here in zero section we have two part first part is the info and second part is our image so let's create two div the first one will be the hero info and the second one will be the hero image so in the first one what we will have actually we will have a h1 so it will be something like oh i forgot to give the text for our button in the header sorry in the neighbor so let's give the button text try frame so for the header here for the hero section header what we will have actually we will have this text if you can see here so that's the text and paste it in the h1 and also we will have some track graph that's the background so i believe yeah that's the background and paste it in the background and that's it and i think we also have this button here so let's have this button so we will create this button with anchor tag and also we will have type of button so as i said we will have two class first one will be the cta for common and second one will be the cta hero so that's it and for the button text i will use get started for free and that's it so for the image let's get an image tag and something like images and the image that we want to use actually that is this one so if i save that's the image so that's all for our header section so if i come here as you can see here it is yeah so as you can see that that's for all what we have so as you can see after that we have our card section here so we have three cards actually so let's tell them so let's get a section with the id of something called cards after that we will have a class of container so in this container we will have our each of card item so div with class of card item and in the card item actually i will have 2d first one will be if i open the design so that i can show so two part first one will be the image second one will be the text so here first one will be the card image i believe first one will be the info after that we will have the image one and for the info let's create and for the info let's create h3 so for the h3 let's have the text and paste it here and also let's get a background and the text will be for the paragraph is this one cut it and paste it here that's it so after that let's have our image after that i believe yeah let's have the image so for the first image so img that we need to use actually is this grow together so that's an image something like that so that's all for our one card item so let's have more so for the second one the text will be this one and the break grab will be this one and the image that we need to use for the second one will be this this one which is as you can see after that the last card item so copy the h3 text and paste it here and for the break up paste it here and for the image let's have the image actually so for the image for the last one this one will be the image here so that's it for what we have so that's it for our card section so after the card section as you can see we have another section which is this ctr of card so let's have another section with an id of cta section cta card and in this card section what we will have is we will have div with a class of container and also we will have a div with the class of card so after that so in this card we will have our h2 for the h2 we will have something like ready to build your community paste it and also let's have our anchor tag means the ctr button so the type will be button and also we will have a class cta and cta card and for the button text let's grab this text and paste it here so that's it for our cta card section yeah as you can see also as you can see that we have this nice photo here so let's have this photo so let's create another section and we will have a id of photo and in this photo we'll have idea of container sorry deep of container and also we will have two part actually if you open the design as you can see we will have this photo content here and also we'll have this copyright so for that as you can see what i can do actually i can create 2d first one will be the div footer info and the second one is copyright or photocopyright and in the footer info if i open so in the footer as you can see that we have four column of content as you can see so let's create a div with a class of footer one and we will have four of them so that will be the two this will be three and this will be four so for the first column what we have is as you can see we have this logo and the text so let's have ul ally so for the first one we will have a logo so leave with a glass of logo and here we will have our image and let's have the logo image and also give it a logo alternate chip so the second ul sorry second ally will be our this icons and also we have as you can see we have text here so this is something like icon box so for that let's have a div with a class of content sorry contact and here let's have our first div with the class of icon and for the icon i will get back to it later so for the second one we will have a background actually so for the breakup what we need to use is this one for the address actually so that's it for our address so let's have another ally for our phone number so let's have a div with the class of contact and in this contact we will have fast div for icon as you can see so that's the div and for the first drip we have our icon and from the second db we will have our content which is the number of our phone number as you can see get that text paste it in the playgroup so let's have our last ally so for the last ally we have this email so we can say that for the we will have a contact and here we'll have first one is the icon so give me the class of icon and also we will have our this breakup which is this one actually let's have the icon here we do not need to have the div actually we can use the image directly so that's the image and we will have the location for the address sorry that's not the address so this is the phone number so for that we will use phone number and this is the address so instead of this div icon we will use also image here so images and we will have something location here so that's a icon so let's have the image for our icon so that's it images so we can use our this what is the it is the email so that's it what we have here so after that let's go to the photo number two where we will have ul and also the ally for the first ally we will have the about us so that's pretty much simple actually and paste it two more time for the second one what we do third one actually those are the links so for that actually what you can do create a anchor tag and paste it inside the echo tag so just cut it ph anchor tag and paste it here that's what we need to do so the last one is i believe it was faq and photor3 ul li this so this one is pretty much same as our previous one so let's get anchor tag and paste the text inside this anchor deck create two mod so create two more as you can see and for the second one it will be this blog and for the last one we will have our contact us so that's it what we have here so after that let's go to the so for the footer for we will have some social icons as you can see here so in the photo 4 we will have some social icons so before that social icons let's come here in our footer and create our this text of copyright so just paste it inside a paragraph so just open it and let's see how it is looking now so open this with our live server so this is the live server and this is the how our website is looking now pretty good so also let's grab the social icon so for the social icons if i open my style.md file so here as you can see that we have some resource for the social icon so i will use these ionic icons so just copy this url and paste it here so ionic icons so here what you need to do for usage if i come here we need to add a script act so and here as you can see that we have this script tag just copy this and paste it in our index.html so before this body tag i will paste it here so now we can use these ionic icons so first icon that we need is we need to have this facebook just copy this ionic icon tag here and paste it where you need to use it so we need to use it in our photor4 so paste it here not that we need to paste the ionic icon tag so this is for our facebook so also have the twitter one the tag and paste it and also the last one which is for our instagram so copy this and paste it here so that's it as you can see what we have now and if i open our website we should see our icon here so as you can see that the icon is here so that's it for our html so let's get back to our style section which will be in our style.css so for the css what we need to use first of all if i come here as you can see that for the web page we will use these fonts so let's come to our fonts.google.com and here we can see we will have some fonts and first one which is poppins grab this font this one will be used in our headings and the white will be only 600 so grab the 600 weight here it is yeah this one and also let's have our open sense so google phones open sense yeah that's the font and we need to use four and seven hundred so four and seven hundred so now let's come to our embed option and here as you can see that we have import and copy the import tag from here and come to our style.css and paste it here so if i come to the style guide as you can see that we need to use pop-ins here so what i can do i can say that for the h1 h2 and h3 we will use our font family puppins and also we will have sans serif as a fallback and for the other body section or body content we will use our regular font family which is open sense font family will be the open sense and let's have the fallback and also if you can see that industrial guide we have something like font size of 80 pixel in the body so let's have it in the body so font size of 80 pixel so that's it after that let's remove all the unexpected cap here so let me do it here and padding will be zero and margin will be zero and also box sizing will be the border box so that's it if i open as you can see it is working not working okay we need to add our link for the style sheet so create a link stylesheet so link sheet here whatever i don't know stylesheet so it is in our actually css folder so now as you can see that we don't have our this unexpected s style here which is this padding or margin so all the padding and margin is now zero so after that let's create some sas variable so for that what we will use so as you can see that we have some colors here so for the primary we have this pink and for the neutral we have this three color here so actually what we can do actually we can use them as a variable so copy them just copy not cut so copy them and create some variable here so let's add some variables variables so in here let's have this ping and just what we need to do is we need to make it a variable so we have a variable of pink also let's have the neutral colors so copy them and paste it here here and just make them as a variable so also here remove the gap and we have a list of variables as you can see here so everything is perfect we have our variable here we have our h1 h2 h3 and we have our body so let's style this now so first one we need to come here in the header so in the header the width will be the 100 and the height will be the 100 or we can use auto and also say that display will be block and also give it a background image that we need to use in our here so url we need to get back to our root url and after that we will go to the image and we need to use the mobile version of the background which is this one so after that let's have the background position so background position will be the center top and also we will have a background size of something like 120 percent and also say that background repeat will be done no repeat so also let's have a background here so background for the background color what we will have we will need to use berry pal cyan color this one so that's a variable and the color is this one so it is working fine i believe oh okay we need to use the height is 100 bh actually so it is not working because we did a silly mistake so as you can see that that's now we have a background here and also that's a 100 vh so working fine so after that what we need to use actually we need to come to our container so container so in the container we will have a height of auto height of auto not that auto and also let's say that display will be flex and align items will be center and justify content will be center so now as you can see it is in center but what i need to use actually i need to make the justify content in the top or what i can say start and after that let's have a text align in the center and also as you can see that it is now texture line center display flex and all other things actually what i need to use actually here this flex direction will be the column so as you can see that's looking perfect now so also as you can see that these images we have some images and this is quite big so for that what i need to use so let's come here in the top and say that all the images will have a height of 100 percent and also will have a width of 100 percent so now as you can see that our images is now 100 something like that so also in our container we will have a max width of 1080 pixel and also we will have something like what we will have we will have margin so that it stay in the center after that let's also have some padding in 0 and 30 pixel so what it will do this max width so no matter which large device you are on this content will remain in this width which is 1080 pixel so that's it so let's also make this style in common so that every container can have this so in here let's create a container and paste it here so now as you can see that each and every section who have this container class now will remain in our 1080 pixel width so that's looking good so after that let's have our number so in the nav actually if i open yeah that's the name so in the nav what we need to do actually i need to make it position absolute and also let's say that it will be in the top zero means in the top side which will be hundred percent and also let's have some margin of zero auto so that we have some margin here so actually instead of this hundred percent let's give it width of 1080 pixel max width and emergency rotor so that it remains in the center and also have some padding here 30 pixel that's it for our this nav and also let's have some flex here flex sorry display flex and align items center and justify content center so if i give it display flex as you can see that this one which is our header we can't see it because it is overlapping so for now let's just say that this position absolute in comment so that you can install it we will make it absolute later so as you can see that this is the header and for the display flags what we have now we have our logo and our this button side by side so let's make it something like that so that we can have some space here as you can see so for that what we need to do actually in our nap just say align items will be something like a space between not here i think we need to make it in the justify content the space between so as you can see that space button is not working because we don't have a width here so width of 100 so let's see so as you can see that now we have the space is between them so after that let's come to the logo so it is in the nav so logo and let's say that which will be about 120 pixel and for the logos after that let's come to the cta header as you can see that we are using link here for our ctn so let's get and go take a style for common so whenever i will use this anchor tag this has 12 will be applied so this will be the common style something like something like what text decoration that we don't want so text decoration will be none and also something like that we want to make the color of the text is black something that we don't want something like that and also and that's it i don't need anything else so so as you can see that whenever i am using this anchor tag means i'm using also here as you can see so this is now applied here and there so after that come to the city header and let's give it some padding to our button in the header so let's give it padding of 10 pixels top and bottom and 45 pixel left and right and also let's give it a borderless because we want the rounded water radius i believe so come here and as you can see that we want actually the rounded border and also that you can see that it is a bold and the background is white so let's also give the style here so let's say that background that we want background color white and also let's say that we want the phone to weight to the 700 i believe yeah um 400 let me see down still right here yeah 700 we have so as you can see that it is now bold and the background is now something like so after that let's have a box shadow so box shadow not sizing box shadow now box shadow i already tested out the box shadow so let me just copy and paste the shadow value so here as you can see that we have subtle amount of box shadow here so actually let's make it mobile size iphone x yeah so that we can install it so as you can see that it is in now iphone and it is look like that so also let's make the font size here so font size will be one ram yeah something like that so as you can see that this is not looking good in iphone x because we have um bigger space in the left and right so this is happening because we commented out this position absolute so that we can style it so actually let's also style this hero section after that we will remove the comment from here so let's come to the hero section so it is in the container as you can see so inside this container let's have our here section so dot hero and here i will have a width of hundred percent and also height of hundred percent so that we can have our content in the exactly in the middle so after that let's say that display will be flex and align items will be center and justify content that we want is center so looking good but i need flex direction in the column so flex direction in the column working fine so that's it after that let's come to the hero info so hero info and here let's say that i want to stand the h1 and let's say that font size that we want is 1.8 ram and after that font weight will be 600 600 or 400 i believe yeah that's the phone okay that's uh that's the poppins font which also have the 600 so after that let's say that i want the margin bottom which will be 1.3 ram so as you can see that we have now much gap in the bottom so after this h1 let's come so after this h1 let's come to the background and let's say that font size will be 1.1 ram and font weight will be 400 and also margin bottom will be 50 50 pixel and that's it so after that let's come to the ctr button so as you can see that we already have a cta class here so this one have actually a cta hero something like that so as you can see that we already styled our city button here so what i need actually from our here how is the style yeah this is the city header just copy this style from here and come in the top and paste it as a cta style so that we can have it in a common style so everyone will have now this style as you can see so just i want to say that this background will be the pink not punk it should be pink and also the color will be white sorry black or white white white for the pink so as you can see it is not working so what is the problem okay pink background color pink is not now it is working i don't know what happened no but so as you can see that now we have our pink here in the background and the white color so what i need actually in our this city header i just want to say that background will be the white and the color will be the black and now it will be perfect for our header so it is working fine so also come here in our hero so it is already styled as you can see i just want to make it bigger so so let's give it a padding so padding will be 15 pixel and 50 pixels for the top and bottom so it is now like slightly bigger and also make the font size on them so looking good not bad so after that let's go to the image so it is here so in the image let's say that max width so max it will be 500 pixel and also margin top let's give it a margin top about 80 pixel so i want gap here yeah looking good not good but so margin top 100 pixel margin top is not working why it is not working okay i need to apply this image style in the actual div which is hero image so let's come to the hero image this was the hero info and now we are in the hero image and paste the img here so as you can see that we have style here but i don't want it so i saw but i don't 100 pixel i just need some 80 pixel so as you can see it is working perfectly so the next thing that i want actually here in our containers sit here where it is actually let's say that justified content will be the center so now as you can see that everything is now center and just i want to make this nab bar position absolute so it is position absolute why everything is in the top okay i need to make a width for the container okay which will be sorry height will be no total sorry not auto it will be 100 so now as you can see that it is now perfectly positioned as you can see here and as you can see this image is not looking good so for that i what i need actually i need to come here what is the image here image and let's say that object fit contain so now it is looking perfect so also i think we should decrease the size of the margin 60 pixel 50 let's decrease it in here so it is in here margin top yeah this is the model top so let's keep it something like 40 pixel okay so 40 pixel will look good so perfect as you can see our this first section is looking perfect so after that let's come to the section of our cards so this card section as you can see it is looking good so let's create this card section so come here and say that card card cards which one cards actually okay cards and let's say that in the container i have a card item card item so for the card item i will have padding something like 50 pixel and also say that 30 pixel for the top and bottom so we have our padding and also let's say that we will have box shadow so let's have the box shadow that we used before for the cta and paste it here so as you can see that the box shadow is looking not nice also let's have a margin of something like martin bottom 50 pixel so the margin is okay but the box shadow is not looking good so let's also decrease it something like 1.13 and now it is looking fine i think we have now more subtle background box shadow okay after that let's have a border radius border ideas will be 10 pixel and text align center so now our text align is center and looking good so after that if you can see in our mobile the image which is this one the image is in the top and the text in the bottom we can do it easily by flex so display flags and flex direction will be column reverse so now as you can see that our image is now in the top so perfect after that what i need actually i need to go to the card info so in the cart info let's have a margin top here of 30 pixel and after that let's go to the h3 so font size that we want is actually 1.3 m and margin bottom will be 20 pixel so as you can see now we have a gap in the font after the font so actually let's make it 1.5 so after that let's go to the program and say that font size will be 0.9 m after front size let's come to the font weight and make it 400 and line height 1.5 gram and the color that we want is actually our something grayish color so let's call the variables and as you can see that we have a variable of grayish blue so this one will be the color for the program so that's it for our this background and also for our card info let's come to the image actually do we need any style for the card image so i don't think so we need any style so it is looking good for now so after that let's come to the card is looking good actually we need some space here so let's come to the cards and make some padding here padding will be 100 pixel top and bottom so looking fine as you can see so after that let's create this section which is this one as you can see so let's get this card so this is actually the cta card so here cta card and say that display will be flags so let's have some padding here padding 50 pixel for the top and bottom and after that let's come to the container container so after that let's say that ct occurred and say that width will be 100 and padding will be something like 30 pixel and text align center and box shadow so we will use same box shadow that we used before so let's grab this block shadow and paste it here so now as you can see we can't see why we can't see so let's make it card not cto card yeah now as you can see that we have our box shadow here so after that box shadow let's say that background will be the white color and also make a border radius of something like 10 pixels yeah looking fine so after that let's style the h2 here and say that font size will be 1.3 ram and margin bottom will be 30 pixel so now we have perfect text here so after that come to the footer so this is the footer as you can see so come to the footer and let's have a background color of something so we have this color which is very dark cyan and if i applied it as you can see that we have very dark sign here and we have massive looking icons here because the icons is i think having hundred percent width that's why it is looking so much big so we will fix it so color will be the white color for the text here and the color is white looking good so after that let's have a padding of something like 100 pixels and 0 pixel and 30 pixel and 0 pixel so 100 pixels for the top zero pixel for the left and 30 pixel for the bottom we would want only 30 pixels for the bottom because it is about as you can see that in the bottom we don't need any kind of 100 pixel space but in the top we need actually so after that let's come to the container and the width will be something like 100 pixel 100 actually and display flags and flex direction that we want is column so as you can see we don't have any much change here so footer info let's come to the photo info and let's say that display will be flex and flex direction will be the column so now as you can see that it is in the column this footer if i remove it so let me show you so now as you can see that this flex photo photorecontent we are having it in a row here as you can see but we want it in a column because in the mobile design the photo will be in a column as you can see so after that let's come to the justify content flanks and start so after that let's come to our first footer folder one so footer one that we want so for the water one margin top will be something like 30 pixel and also for the ul list style will be this test style will be none and also have the list so in the list we will have margin top of 25 pixel so as you can see that we don't have our list style so looking good so after that let's get so after that let's style our logo so let's come to the logo so after that let's give it a width of 200 pixel so it is looking good but that is a problem if i open the design as you can see that the logo is white also in the desktop the logo is white so we don't have any white logo here in our images if i open we don't have any white look we have only the this logo dot svg so what we can do actually let's open this svg and copy the code from this svg just copy this and close this loco dot svg and also create another spg image here so let's create a file here not there i want it here in this image folder so let's name it logo white dot s b bg so after that let's paste the copy svg code from the logo.spg here so as you can see that this is the svg code from our logo.sbg and here we have all the spg code in one line but i want to show it but i want to see it in a one time not in something like that so for that what you need to do is you need to press alt plus set or say whatever you say so just pressed all plus set or z so this will make it something like that now you can see all the code of this sbg and here if you can see in this svg what we have we have two path for the first part if i come in the top logo here this is the same logo as you can see so for the first part which we have is for this icon and for the second part if i scroll down this is the second path here which is for this text so we have only these two path here as you can see we don't have any more so what we need to do is in this path if i come here as you can see this is the opening path and in this part we have this closing path here so before this closing tag we can say that we have a property which is saying that fill color so we need to make it white for our white logo so keep it white something like 6f and also for the second part go to the closing tag here before the closing tag we can see the fill color so just make it white so now we have our white logo so let's apply it in our html so let's come to the html here where is the html here is the html so let's come to the html and in the footer let's apply our white logo instead of this only logo so just hit enter and we should see our white logo here so perfect so after that let's style this content here so for that we already gave it as 10 so in the ally if i have any contact class so if i open the html you can see that we kept this style sorry in this class in our alloy so whenever we have this contact class under the ally so we will say that display will be flex and also let's say that align items start and also justify content start so come here as you can see that it is now perfectly in place as you can see the icon in the left side and the content in the right side perfect so after that let's come to the icon so in the content we also have a icon class so in the icon i will say that the width that we want is 15 pixel so it is not working because if i open here as you can see that index we don't have any icon div actually what we have is actually we have our image img so instead of this icon what we can say the img so now as you can see that we have our img which is now having 50 30 50 pixel of width perfect so after the image let's go to the pregraph and say that font size will be 1.2 m and also say that margin left will be 20 pixel flex one so looking good as you can see that so as you can see that we are having this problem so in the image let's have a margin top here of 10 pixel this will fix it yeah looking good perfect for now so after that let's come to our this photo 2 and footer 3. so footer two and footer three will have also a similar style so footer two and photo three so let's grab it together and here what i need actually i can say that ul list style will be none and ally margin top will be 18 pixel and for the anchor tag i'll say that text decoration will be none and color will be 1.2 ram sorry not color font size and also i need the color white okay good sorry we need to grab the for sorry photo 2 and footer 3. so now it is looking good as you can see here so after that let's grab the icons here so structural icons it will be in the photo four quota four and let's say that margin top that we want to have is 100 pixel and text line is center and font size will be 40 pixel yeah looking better let's give it 80 pixel sorry 80. yeah looking better now so after that let's come to our footer copyright so for the photocopyright as you can see we need to apply it so it is outside of our this where it is for our info so come back here and after the photo info let's grab our footer copyright so photo copyright the margin top that we want to have is 20 pixel and the text line will be center and font size will be 0.8 ram so looking good as you can see that's the website now we have the last thing that we want is actually i want to overlap this section so for that what i need actually in our cart i need to make a negative margin so margin bottom minus 60 pixel already in place let's make it more 5 pixel something 75 something like 100 minus 100 pixels so that's it so 100 so 100 pixel is working now here so after that it is pretty much okay for our mobile design so let's come to the responsiveness so let's come to our desktop design so whenever we will have something like that let's design for our desktop so we need to fix something here so let's come here and say that create a media query media only screen and mean width 768 pixel and after that let's come to our media query and let's have some style here so the first thing that we want to remove is if i come to our design as you can see so here as you can see that these layout so as you can see that the style for our desktop is something like in row so we need to change the flex direction for our hero so let's come to the header and here let's come to the container and in the hero say that flex direction will be the row now as you can see that we have row flex but extra line that we want is in the left and i want to make this image bigger so for that what i need to do actually inside the hero we have the hero image i want to say that flex will be 3 and for the only hero info the flex will be 2. so now as you can see that our image is now big so after that let's also have some margin so margin right 50 pixel and also increase the h1 so font size 2.2 ram looking good as you can see here also let's change the background we have a separate background for the desktop so in the header let's say that background image that we want so url so it is in the design so as you can see we have a background hero desktop svg so looking good as you can see that also let's say that background position will be center and background site will be background site will be cover so looking fine after that we need to fix the card section so after the header let's have our cards here and in the container we will have our card item so here i want something like flex direction row now as you can see that everything is now flex direction row as you can see and also i want to have some padding here 50 pixel and 100 pixel so looking good and i want something flex justify content center and align items center yeah and also say that i want it in the text line left so looking good as you can see in these images and the cards as you can see that if i open our images here so for that here as you can see so for the odd number of cards means one and three the image in the right side but for the even number of cards means two or if i have another card for the image in the right side so what we can do actually so if i have ants child and child so if i have even i want the flex direction column reverse so now as you can see that sorry row reverse not column reverse now as you can see that it is now reversed here and i want the padding so after that let's have uh some space between our images and this text so for that let's go to the what is the name card info and margin left let's give it something like 50 pixel so we are having margin left for this even card but for this odd card we should have our margin right so in our regular card let's go to the card info and let's come here and say that margin right will be 15 pixel so now we have this as you can see also let's increase the h3 so here after the info we have also h3 and let's say that font size that we want 1.8 ram yeah looking better seven yeah seven is looking good and also let's increase the font size for our background so the paragraph font size that we want is one ram yeah looking good so after the background font size so we need to increase this card here so city a card so let's grab the cta card after these cards so after these cards come here and grab the cto card and here let's come to the container and grab the cto card and say that padding that we want we'll have is 50 pixel h2 so h2 h2 will have something like font size of how many two to them and also have a margin bottom of 50 pixel not city a card i want to have on the card so that's it and for the ctr card or this anchor tag so for the anchor tag let's say that display will be inline block and also have some padding 20 pixel and 60 pixel and font size 1.2 ram yeah it is now quite big as you can see so for the footer let's come to the footer so after this ctr card let's come to the footer and in the footer in the container footer info i want to say that flex direction that we want to have is row so now everything is now in one line so after that let's say that footer one and grab all the footer in here so footer one footer two put a three and four three i also have this and the last photo four is we'll have flex 1 and also say that margin that we want to have is 50 pixel for the left and right so it is now looking good as you can see that yeah but i want to have much space for this one so what i can say is i can say that footer one will have something like 1.6 sorry flex 1.6 so now as you can see that it is having much space sorry it will be 50 pixel so so as you can see that so let's say that we don't want margin something like that let's say that we only want margin in the left side so 50 pixel and for the one first one we don't want any margin so as you can see that it is looking fine and let's have it in the top so let's say that for the two three four two three four so two three and four i will say that top or margin top will be something like 70 important yeah perfect as you can see i don't need this important thing they are looking good perfect as you can see so the last thing that we want is actually we want to make this copy that in the right side so we can do it easily so in the content photo after the photo info we have also got our copyright i want the text align in the right side so that's it it is in the right side so perfect as you can see i think we should increase the max width for this image what is there let's make it 700 ah looking much better now so as you can see that it is not looking in this kind of device this kind of width of device so let's also create another query selector for this kind of device which will be something like thousand so let's come to here and let's get another one so i'm creating it so that it looks nice in all kind of device so only screen and min with 700 sorry thousand pixel so whenever i'm in this kind of device so let's say that whenever i am in this kind of device i don't want it in a row i want it in our previous design something like in a column so to make it in a column what i can do actually i can grab this from here so where i am saying that not this one so in our this query sector where i am saying that this header making this header in a row so cut it from here and say that after whenever i will pass 1000 only then make the header in a row so now as you can see that it is in a column perfectly looking fine as you can see column column column but whenever i will pass 1000 now it is looking perfect but whenever i am in on this side these all applied in already here but this header will remain in row sorry in column but all the style for our desktop design is already applied as you can see so that's pretty much looking amazing here so that's it for the video i hope you enjoyed the video and if you did please give it a thumbs up and don't forget to subscribe my channel and my name is arfan i will see you in the next video till then bye bye kodahafez you

Channel: WEB CIFAR

Views: 4,031

Keywords: responsive website, build a website, Business Website Landing Page, Business Page Web Design, Business Page HTML CSS, landing page design html css, responsive landing page html css, website design from scratch, Huddle landing page, frontend mentor challenges, frontend mentor solutions, frontend mentor, huddle landing page solution, sass, web cifar, arfan, html tutorial, html5, html tutorial for beginners, sass project, project, html practices project

Id: 6SCV-JXNvXI

Length: 76min 57sec (4617 seconds)

Published: Sat Jul 04 2020