Started right here I have created this folder called modern hero section and uh I also have this folder called images and in that we have these three images which we going to use in our design and.
Let's start with the necessary file so let's create a new file called index.html and let's create another file called style.css and let's start with the.
Index.html file so in vs code you can just type exclamation and press Tab and you'll have this basic HTML 5 code and here let's link our CSS file so I'll just type link and press Tab and in the.
SR FL type Styler CSS right now let's start with the markup profile design so the first thing we will do is we'll create create a header tag and in that we'll have several sections so these are.
Let's tab 01 for the first section and then we have this bottom section where we have this heading and this paragraph so I'll just go ahead and create a division with the class of.
Bottom and and in that we will have an ed2 for the heading and let's tap heading one and let's create a paragraph and let's copy this paragraph from here and I'll just paste it over.
Here so this is the first section if you take a look at this we also have this background image so let's add the image right here and let go outside this bottom Division and let's create an IMG.
Tag and for the source let's Ty Images slash and 1. jpg and now let go and copy this section and let's paste it to more times so we have three sections in total so.
The second one let's set the number to 02 and let's change the heading and uh let's copy this uh paragraph and let's paste it over here and then we have the third section so.
Posts Related:
- Top 10 Letterhead Template - Free Download 2022
- Power BI Dashboard Showcase & Makeover ( REPLAY: Sep 16)
- Webinar Make, Airtable, and Typeform Better Together
Let's change the number to 03 and let's
Change the heading to heading three and let's copy this and paste it over here so with that we have added all the.Details and let's also change the numbers of the images so let's change this to image 2.jpg and images 3.jpg and now let's open this in our browser and let's see how it looks so I.
Have this extension called live server installed in vs code so once you have this installed you can just right click over here in the HTML file and click on open with live server and here you can.
See we have the first section and we have the image and everything is being displayed over here now let's go and style this using CSS so let's go to Styler CSS file and and uh let's start.
By adding some styles to the body so let's start body and uh the first thing we will do is set the margin to zero so we don't have any margins which is being applied default by the browser right now.
The next thing we need to do is we need to display these different sections one next to the other so let's target the header and in the header we have the different sections so let's set the.
Display to flex for that and let's set the WID to 100% and let's set the font family to Roboto and senstive and and uh let's also set the height to 100 vport height and this is how it looks so we.
Have all these different sections one next to the other right now let's go ahead and set the height and width of the image so let's type header section image and let's set the width to 100% of.
The parent and let's also set the height to 100% of the parent and let's set the object fit to cover so that it has the correct proportions and now let's go ahead and set the width of each of these.
Sections to the same so let's target the
Section so I'll just have header section and let's set the flex to one and now we can see each of them have the same width right now let's add some padding to the.Sections so let's type padding and let's set the padding to 16 pixels and uh let's also set the display to flex and flex direction to column and now we need to have this.
Number at the top and this bottom section at the bottom now before that let's go ahead and set the position of these images to Absolute and we'll position it relative to this section.
Division so for the section I'll just have position relative and for the image let's type position absolute and let's set the top position.
To zero and right and left position to zero and now we can see that the image is on top of the content so let's set a z index and let's set it to -1 and now we can see that the content is on top.
Now let's bring this uh bottom division to the bottom so here for the section we have set the display to flex and let's set the justify content to space between and now we can see that the bottom.
Section is at the bottom now by default we need to set the opacity of the image to a lower value and also set a filter so that the saturation is zero so let's do that so here for the image let's go.
Ahead and type opacity of 0.2 and let's set the filter to saturate zero and this is how it looks and now when we hold of this section we need to change the saturation and also the.
Opacity of the image so let's tap header section column hover IMG and let's set the filter to saturate one and uh let's set the opacity to one and we'll also add a smooth transition so let's St.
Transition of all 300 milliseconds is and now we can see that the image is working correctly now let's go ahead and style the other elements so let's style the number so here I'll just Ty header.
And uh we have this division with the class of number so let's target that I'll just tap number over here and for the number let's set the font size to 20 pixels and.
Let's say the font weight to bold and when we H over this section we need to change the font size of the number so let's go ahead and type header section column hover number and and when.
We heard of this we need to change the font size of the number to 40 pixels and uh we need to have a smooth transition so here for the number let's tap transition of all 300 milliseconds.
Is now we also need to change the color of the text when you over this section so here for the section we need to add a hover so just Ty header section column hover and let's the color to white and.
Now we can see everything is looking all right now for the number we also have this effect where we have this uh line before the number when we hold over this section so let's create that we will use.
A before selector for that so here for the number let's Ty header number colum column before now we need to position this before selector relative to this number so here we need to type position.
Relative and here we need to type position absolute and let's the content of the number to blank by default now let's go ahead and set a height of 4 pixels and let's set the width to 0.
Pixels by default and opacity to Zero by default and then let's set the left value to - 46 pixels this is what I calculated and let's set the top position to 50% from the top and let's.
Also add a transition of all 300 milliseconds e and we also need to add a background color and let's set it to Yellow all right now let's add the hover for this before selector so let's type.
Header section column hover and here let's type number column colum before and when we hor this we need to set the opacity to one and we need to set the width to 36 pixels and now we can see we.
Have the line displayed but when we have the line displayed we need to move both these elements to the right so for the number here in the hover effect let's go ahead and type transform translate X and.
Let's set it to 40 pixels and now we can see everything looks all right for the number now let's go ahead and style this heading so let's go and type header section h to let's.
Set the font size to 30 pixels let's set a margin bottom of zero and font family of popins sensitive and let's also set a fixed height for this bottom section so let's St header bottom let's set the.
Height to 200 pixels and we need to bring it up when we hor over this so here we can see that the header and the paragraph move up by default the paragraph is not being displayed so.
Let's do all of that let's go back and uh by default let's add a transform Translate Y and let's set it to 80 pixels and now we can see that the bottom section has moved down 80 pixels.
And let's also set the Overflow to Hidden for this header so that anything outside this header is not being displayed right now let's go back and uh let's add a.
Transition for smooth animation so let's St transition of all 300 milliseconds is and let's add the hover effect so let's tap header section column hover bottom and let's type transform Translate Y and.
Let's set it back to zero so now we can see that everything is working all right now we need to hide the paragraph at the beginning so let's add some styles to the paragraph here let's tap header.
Section P let's set the font size to 16 pixels let's set the opacity to Zero by default let's set the line height to 1.7 and let's add the horor effect so let's Ty header section column h p and.
