How to create a simple hero section with HTML & CSS

so what's up everybody welcome to this video so today we are going to make this nice looking here section as you can see here so this is the hero section layout as you can see you might see it in main website this is actually a common layout you can say we have a heading and also subheading background and a call to action and we have a background image so this is a simple hue section so in main website you might saw this kind of layout and also you can make this uh center and also right align i will show you all these things and also i will show you some techniques that can be helpful whenever you will make this kind of hero section next time so stay tuned for that so before we start the video i want to mention that if you want to follow us on our instagram you can do that the handle is instagram.com slash web underscore cipher so if you follow us you will get some interesting tips and tricks about web design and development maybe that will be helpful for you and also if you face any kind of problem with this tutorial you can join our community group the link will be in the description we have a great number of community member and which is growing day by day so join the group the link will be description all the link will be in the description so with that saying let's roll the intro so here as you can see that this is the html and this is the css file so first of all in our html let's get a boilerplate with this exclamation sign and after that inside of our body so first of all let's say that i will have a section here and with the id of hero and inside of our this section i will have a d with the class of container and inside this container i will have my div for info and if you have image you can also create a separate div for your image and you can have your info and image side by side if you want to have it but for this tutorial we will have a simple hero section so we will not use image we will use only info for our hill section and for info we will have basically three things uh heading so let's say that this is heading and we'll have a sub heading here so let's say that this will be h2 and here let's say that lorem 5 so it will give us 5 word here and after that let's have a break grab lorem 20 and finally let's have a cta button here so let's say that click me so this is the content for our simple hero section as you can see and after that let's actually link our style sheet here and link it here and after that let's actually style this content so first of all here let's actually remove all the unexpected gap padding and also the margin and also say that box sizing will be the border box and if i save now it's actually looking perfect there is no extra gap anymore and after that let's actually get the font so the font that we are going to use is robotomano so go to the fonts.google.com and from here grab the roboto mono font or whatever you like so grab the font and paste the import tag here and now you can use the font so in our html let's say that font family will be the robot mono and font size will be something like 18 pixel and if i save now you can see that the font is already applied here and after that let's say that inside of our hero section first of all the width will be 100 and the height will be 100 v8 means it will have the full width and also the full height of our window and also let's have a background image so i already have a background image here so this is the image that we are going to use so let's actually add it here so in our background let's say that url and give the path of our this image and if i save now you can see that the image is here but uh it's not in perfectly positioned so for that we can actually say that no repeat here so not repeat sorry so it is the background repeat property and the value will be not repeat so after that we can uh give the value of background position so we want it in the center and after that uh forward slash and we need we can give the value of background site so for the site we will use cover and if i save now you can see that the background is perfectly in position so you can see that i'm using this background shorthand so you can use it make sure that you are having background not the background image if you are using background image you can only use background url but for the shorthand to use all the property in one line you need to use background only as a property so the problem is as you can see that we can't see our content because uh the background is black here so for that let's say that the color of our content will be the white here so now you can see that in our image in many place we have bright color here so the problem with the bright color is whenever the content will be in the top of this bright color there will not have enough contrast so it is always a good idea to have a overlay uh with this background so to have a overlay you can do this technique here so you can see that we are using background and to have a black overlay with this background color or sorry with this background image what you can do actually in here you can use linear gradient and i want to have a black color as a overlay so linear gradient black and most importantly make sure that you are using comma after the linear gradient and if i save now you can see that is actually white full white because here we are using one color let's actually also make our second color so black so both are the black so now you can see that the background is black because we are using linear gradient black so let's actually decrease the opacity around here 4 and also do it for the second color so if i save now you can see that we have our perfect overlay going on here so this is the technique that you can use for overlay uh with the background image and after that let's actually uh position this content here so it is in our container so let's say that in the container the container width will be around 90 percent and the height will be 100 and also a max width will be something like 1200 pixel and margin 0 and auto so now you can see that uh the content is now in 90 width it's not having the full width and also we have a max width 1200 pixel which will actually help us whenever we'll have a big device as you can see that it's a big device now means the full screen now you can see that whenever we'll have a big device something like that the content is not going all over here in the left edge it's actually keeping 1200 pixel and not allowing to go any content outside of this 1200 pixel and also we don't want to have our content in the left side in the right side we want to have our content in the middle of our website you can actually have something like 1000 pixels so it will actually keep everything inside of 1000 pixel it will not allow anything outside of 1000 pixel so you can use uh 1200 or 1000 whatever you want so i will keep 1000 pixel as a max width for our container so after that let's actually make this uh content in the center so for that i will use display flags and align item center and also justify content center so this is the technique that i use to make anything in the center so you can see that now the content is now perfectly in the center of my hero section and it is looking really good so after that let's actually uh style this heading so it's in the container inside the info we have this heading and let's say that font size will be gdm and also let's say that margin bottom will be one so if i save now you can see that the font is actually bigger and we have a margin bottom so you can see that i'm using ram value here so because it's actually a lot flexible than pixel values so you can see that here in the html i used 18 pixel so this is the base value for double ram so what i'm saying here why number i will say 3 ram it means actually 18 pixel into 3 so it's that simple so whenever you need to adjust this you can actually adjust the base font size and everything you will use this ram will be resized as you change this font size in the html so that's why most of the time you will see everyone using ram instead of pixel values so after that let's actually go to our container and heading to basically this is our sub heading so info h2 and here let's say that font size will be 1.2 ram and also a margin bottom will be something like 2 ram and if i save now you can see that it's actually looking good and after that here let's actually increase the font size a little bit about 1.5 ram so after that let's actually do some style for our background so we can actually copy this selector here so instead of h2 we'll use paragraph here so let's say that font size will be 1.2 mm and also max width will be 60 percent so why we are using a mx width so because as you can see that uh if i don't use this mac suite the problem will be in our large device so you can see that this is our background and it's actually getting all the width that is available here so we don't want it we want to have a max width of something like around half of our full width so we don't want it to get all the width we already have here we wanted uh half of them so let's say that the max width will be around 50 or 60 percent so now it will get only the 60 percent of our full width as you can see so and after that let's actually give some style for our this anchor tag here so info anchor tag and let's say that here the text decoration will be none basically it will remove the underline here and display will be inland block and uh background color white and also let's say that border areas will be four pixel and also let's say that font size will be 1.8 ram and let's also have some padding will be 0.5 m and 2 m so now you consider we have this button here so you can see that we are using display inline block because by default this anchor tag is actually display inline so the problem with the inline element is whenever you will have an inline element uh you will not have a proper padding top and bottom and the margin top and bottom so this is the problem with the inland element so to fix that you need to use inland block so let's actually show you if i don't use inland block so you can see that the padding top is here is not respected it is actually overlapping with the previous element here so for that we need to make sure that we are using land block here and perfect also let's use margin bottom sorry margin top here not bottom two ram perfect and also if you can see that we are using ram value as a font size and m value for our space as you can see here so there are some difference between this ram and m and if you want to know more about that please comment down i can make a separate video about these all units so after that uh let's actually say that the color for our this button will be let's actually copy the color here and this is the color so you can see that the color is here so perfect uh it's looking good for our large device uh actually you can use uh around 70 percent i think it will look good if i use 70 percent yeah looking great seventy percent for our display graph max width so now you can see that our hue section is actually looking good as you can see in the large device so let's actually make it good for our small device so for now for our small device as you can see that in the mobile it is not looking good so for that let's actually come here in our css media query media only screen and max width 768 pixel and here inside of our media query whenever the max width is 768 means from 0 to 768 means inside of our small device width so here in our html first of all let's say that the font size will be 10 pixel and if i save now you can see that it is already responsive we don't need to worry about anything else as you can see that it is responsive because we used ram value here so because as you can see that we are using ram value here for all of our phone size or the content size as you can see so it will actually flexible or it will bound with this base font size so whenever you will change the base font size lower amount all the element will be lower or the smaller as you can see we don't need to orie anything else here hero section is looking good whenever you will go to the large device as you can see it's looking perfect and whenever you will go to the mobile device it will be perfect so as you can see that uh we are having all of our content in the left side but if you want to have it in the center what you can do in your container you just can say the text align center so everything will be center so the problem is the max width is actually having in the left side because we actually limit this width with our max suite so go to your paragraph and here you just can say that margin zero auto to have your all the content in the center and if you want it in the right side what you need to do actually you need to say that um margin right zero here so now what i'm saying is we are saying that here margin left and right will be auto but after that we are saying that the margin right will be zero basically the margin left will be auto and the margin right will be zero basically it will have your the spread gap in the right side and here you just can say in the container you just can say that text and will be in the right so you can create different kind of layout as you can see that now everything is in the left side you can have it in the center you can have it in the uh left or right whatever you want so i will keep it in the center let's say that perfect as you can see so this is how you can create a simple hero section with flexbox so that's it guys if you like this video please give it a thumbs up and don't forget to share it with your friends and family also if you want to watch more video like this one please subscribe the channel and also turn on the notification bell so that you can get notified whenever i will upload my next video so my name is arfan and i will see you in the next video till then bye bye good [Music] [Applause] [Music] office [Music] you

Channel: WEB CIFAR

Views: 6,101

Keywords: web cifar, shaif arfan, hero section in website, hero for website, website hero, best hero section, hero website design, Create Banner section in Html and CSS, hero image, How to Create a Hero Image HTML And CSS Only, How to Create a Hero Image, create image banner css html, hero image tutorial html and css, banner image html css, how to create a hero section, How to create a hero section with html css, css flex box, simple hero section

Id: fs923Mu5EXY

Length: 17min 18sec (1038 seconds)

Published: Fri Jan 15 2021