Window this is how to look on smaller screens we have a different layout so in this video I'll show you how to design this from scratch using HTML and and CSS so let's get.
[Applause] [Music] started right here I have created this folder called modern list and I just opened it with vs code and I also have.
This folder called images over here in that we have these three images which we going to use in our design so let's go and create the necessary file I'll just create a new file called.
Index.html let's create another file called style.css 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.
The class of custom list now this custom list we need to have different list items so these are list items this is one list item then we have another list item so let's create a division for that.
And just create a division with the class of list item and in this list item we need to have two elements one is the number and the other is this info so let's go and.
Create a division with the class of number and in the number the first one is 01 so let's tap 01 over here and after the number we need to have the info so let's create a division with the.
Class of info and in this info we need to have a heading and a paragraph So let's create an S3 for The Heading and let's copy this uh text from here and let's paste.
It over here and let's create a paragraph and I'll just copy this text and let's paste it over here so that's basically with the list item let's go ahe and copy this and paste it two more.
Posts Related:
- Event Ticket Design in MS Word DIY Tutorial Professional Ticket Template in 10 Minutes Office
- Create This Automated Time & Billing Tracker With 1-Click Invoicing & Stripe Payments In Excel Today
- Learn Excel 2016 - PowerPivot How-To
Times and for the second one let's go
Ahead and change this number to number 02 and let's change the heading so let's copy this and I'll just paste it over here.And let's change the info I just copy this and let's paste it over here and then we have number three so let's change this to number three and let's change the.
Heading and uh let's change the paragraph So let's copy this and let's paste it right here so with that we have completed writing the HTML of our design 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 if 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 that our content is displayed in the browser now let's go and style this using CSS so let's go to Styler CSS file and uh let's.
Start by styling the container division which is a division with the class of custom list so let's start do custom list and first of all let's set the font family to Roboto and.
Sensitive and uh let's add a Max width over here and let's set it to 700 pixels and let's bring it to the center so I'll just tap margin and for top and bottom I'll just have 32 pixels and for.
Left and right let's tap Auto and now we can see that it is in the center let's also add some padding to the left and the right so that it will look good on smaller screens so let's tap padding.
Zero for top and bottom and 30 pixels left and right and let's also set the display to flex and flex direction to column and now we can go ahead and add some gap between these list items so if.
I just type a gap of let's say 50 pixels
Now you can see that we have this Gap over here for now I'll just remove this Gap and let's start styling the other elements now let's go and style this.List item so the list item is uh the division inside the custom list so we need to have this number and the info one next to the other so let's target the list item so let tab list item let's.
Set the display to flex and align items to the center and now we can see that these two elements are one next to the other now for the alternate list items we want to flip the sides so we want to.
Have this number on the right side for the second one so let's do that let's go over here and let's tap list item call an nth of type and here let's tap even so it will.
Target the even number of list items so it will Target two four and so on so here let's tap flexx Direction and let's set it to row reverse so now if you go back here we can see that the number is.
On the right side over here for the even elements right now let's go ahead and style this number so let's type list item number we have this division with the class of number and let's set the.
Font family of the number to Poppins and sensitive and let's set the font weight to bold and let's set the font size to 200 pixels and let's add a padding of zero.
Top and bottom 30 pixels left and right right now the next thing we need to do is we need to change the color of these numbers we need to change it to this image so for that we need to go ahead.
And first of all let's set the color to transparent and now we cannot see the number now we need to add a background image so let's St background and let's set it to URL and let's set the URL to.
Images for Slash and the first one is AI and uh let's set it to no repeat and center and now if you go back here we can see that we have the complete background displayed over here we need.
To display just the areas of the text so for that you have to type background clip of text and now we can see that we have the color just for the text let's let's also go ahead and set the.
Background size to cover now for some browsers you need to type webkit background clip and set it to text now we can see that all the three.
Numbers have the same image we need to change the images so for the second one we have a different image and for the third one we have an image of network so let's change that for that let's go back.
To the HTML and let's add classes for these so for the number one let's type number one as the class for the second number let's type number two as the class and for the third one let's type.
Number three as the class now let's go ahead and style these numbers so let's type list item number one and for that let's copy this background URL I just cut it from here.
And paste it right here and now if you go back we have the image for the first number let's copy this and uh paste it down two more times for the number two let's change the.
Image to images SL Quantum computing. jpg and for the third one let's change this to images SL 5G jpg and we also need to change this to number three and now we can see that we have the correct.
Background images for the text right now let's go and style this heading so we have an S3 inside the custom list so let's St custom list S3 and let's set the margin to four.
Pixels top and bottom zero for left and right and uh let's set the font size to 20 pixels and I need to have this line on the left side so for that we'll go ahead and uh set the position of this S3.
To relative and we'll go ahead and add a before selector so step custom list S3 column col before and let's add a content and if we just type some text.
Over here we can see that the text is displayed in front of all these S3s now we don't want to display the text so let's remove this and let's set the position of this before selector to.
Absolute now it will be positioned relative to this S3 and let's go and set the left position to zero and the top position to zero and let's the height to 100% of the S3 and let's set the width.
To 6 pixels and background color to red and let's add some padding left for this S3 so here let's tap padding left and let's set it to 16 pixels and with that we have styled our.
S3 now for the paragraph let's add a line height so that it has some space between the lines so let's tap custom list p and let's set the margin to 12 pixels top and bottom zero for left and.
Right and and let's set the line height to 1.7 and let's set the font size to 16 pixels and let's also add an opacity of.
0.7 so that's it with the paragraph and with that we have styled our custom list so everything looks all right right now let's go ahead and make this responsive so let's go back and let's add a media.
Query so I'll just havep at media Max width of 700 pix and uh let's tap custom list and uh let's set the max width to 500 pixels when we are on smaller.
Screens and uh we need to change the layout of this list item so let's Ty list item and let's set the flex direction to column now for the second one which is the even list item we don't.
Have the correct styling so for that we need to copy the selector of that as well so let's copy this and let's go ahead and paste it over here I just add a comma and paste.
