Responsive so if you decrease the width of the browser window this is how it will look on tablets and if you decrease it even more this is how it will look on smaller screens that is smartphones.
Let's go ahead and create this using HTML and CSS so let's get [Applause] [Music] started all right I have created this.
Folder called about a section and I have this folder called images where we have this image and we're going to use this in our design so let's start by creating the necessary files I'll just create a.
New file called index.html let's create another file called style. CS and let's start with the index.html file in vs code we can just type exclamation.
Markup of our design so the first thing we will do is we'll create a container Division and let's go a class of about container and in this we need to have two sections one for the image and the.
Other for this content so let's create a division with the class of about image and in that we will have the image so I'll just create an IMG tag and in the source let's type images slab image.jpg.
And then we have another section on the right side so let's call it about info so let's create a division with the class of about info and in that we need to have all these other sections so the.
First one is uh this text over here so I just go ahead and create a paragraph for that and let's give it a class of info and let's tap about our design studio and then we need to have this.
Heading so let's copy this heading from here and uh let's create an edge2 for the heading and let's paste it over here and then we need to have this uh paragraphs let's copy this and let's.
Posts Related:
- 5 Mind-Blowing FREE Windows Apps (you probably didn't know existed)
- Power BI: How to Always Show Current Week vs. Prior Week Automatically!
- Excel 2019 VBA Beginner Tutorial (Part 1 of 4)
Create a P tag and uh let's give it a
Class of description and let's paste the text over here and then we need to have these two different sections so let's create a.Division with a class of features for that now that we will have these two sections in two separate divisions so let's create a division with the class of.
Feature and in that we need to have the icon and this text so let's create a division with the class of Icon and the icon let's add the icon so let's get the icon from hero icons.com so here we are.
In hero icons.com and let's search for check and let's select solid and let's copy this icon from here let's click on copy SVG and let's paste it over here and uh then let's go ahead and.
Create a division after this uh icon Division and let's create a division with the class of feature description and here let's go ahead and uh copy this heading and for the heading.
We'll create an S3 let's paste it and let's create another paragraph over here and let's paste this text and let's paste it over here right now let's go and copy and paste this feature Division.
And uh I'll just paste it down one more time and uh let's change the content let's change this heading to tailored cre ations let's paste it over here and let's copy this text and let's paste it.
Over here right now let's create this button so for that let's go outside this features Division and uh let's go ahead and create an anchor tag and you can add.
The link of your page over here I'll just type hash for now and let's create a class called BTN and here for the text let's type learn more and the last thing we need to.
Do is when to create a div for this
Background color that you see over here so for that I'll just create a division with the class of BG color and uh that's basically with the.HTML of our design so 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 we can see all the content are displayed in our browser now let's go and style this using CSS so let's go to Styler CSS.
File and the first thing we will do is we will set the margin of the body to zero and then let's go ahead and set the size of the image so let's go ahead and type about container which is the.
Container Division and uh let's target the image so just tap IMG and let's set the width of the image to 400 pixels and let's set the height of the image to 100% and let's tap.
Object fit to cover so that it has the correct proportions and here we have the image and we'll also set the object position to top so that the top part of the image is always.
Displayed now let's go ahead and Target the container Division and let's place these two elements which are the about image and the about info one next to the other so let's type about.
Container and let's type display of flex and let's add a gap of 60 pixels between the elements and let's St align items to the center to bring it to the the center vertically and let's add a Max width of.
1,200 pixels and let's bring everything to the center so let's step margin in line which is margin left and right and let's set it to Auto and uh let's also add a.
Padding and let's set the padding to 30 pixels let's set the font family to Roboto sensor and uh let's say the color of all the text to 1 D3.
557 now here we can see we have this division for the background color and uh we're going to position it as absolute so it can go outside our about us division so let's go ahead and add an.
Overflow of hidden so that we don't have the extra scroll bar at the bottom right now let's go and set the width of the icon so that we can see everything clearly so let's tap about container and.
We have this division with the class of icon in that we have the icon displayed so let's go ahead and set the width of the icon to 30 pixels and let's set the color of the icon to E6.
3946 and now we can see we have the correct WID for the icons right now let's go to style this info division so here we can see we have this uh division with the class of info and in that we.
Have this text so let's tap about container info and let's set the color of the text to 4 five7 b9d and let's set the font size to 18 pixels right now let's style this H2 so.
Let's St about container H2 and let's set the font size to 50 pixels let's set the line height to 1.2 and let's set the margin to zero right now let's target all the paragraphs so let's tap about.
Container p and uh let's set the font size to 18 pixels and line height to 1.8 let's also add a margin top of 30 pixels so this is how the paragraph looks right now let's style these.
Features division so we need to have these features one next to the other in larger screens so let's St about container features because we have this.
Division of the class of features and in that we have the two features so let's type display of flex justify cont turn to space between and let's set the background color to.
White and let's add a padding of 16 pixels and let's set the margin top and bottom to 24 pixels right now just go and style this feature so in the features division we.
Have a division with class of feature so let's St about container feature and let's set the display to flex because we want the icon on the left side and the content on the right side and let's set.
The flex to one so that both of these features have the same width and let's set a gap of 16 pixels between the icon and the text now here we can see that the icon is shrinking because of the.
Content on the right so here for the icon let's type Flex shrink and let's set it to zero now the icon will not shrink right now let's style the S3 so let's tap about container feature S3 and.
Let's set the margin to zero now let's target this paragraph inside the feature so let's tap about container feature p and uh let's set the margin to zero for this as well and uh we will add a margin.
Top of 12 pixels let's also add some padding to this icon so here for the icon let's go ahead and type padding of zero top and bottom and four pixels left and right right now let's go and style.
This button so for the button we have this anchor tag with a class of BTN so let's go and tap about container BTN and uh let's go ahead and set a background color of transparent and uh let's set a.
Border of two pixels solid and for the color let's tap E6 3946 and let's set the color of the text to this dark color and let's remove the underline by typing text decoration To.
None let's set a padding of 12 pixels top and bottom 40 pixels left and right and let's also set the display to inline block so that we have the padding top and bottom working correctly let's set.
The font size to to 18 pixels and font weight to bold let's also add a margin top of 16 pixels and now when we hold of this we need to have this hover effect so for that let's go ahead and type.
