Create Landing Page using Bootstrap 4 for beginners | Sarfaraz Kasmani | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Create Landing Page using Bootstrap 4 for beginners

teacher avatar Sarfaraz Kasmani, Front End Developer and Digital Marketer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

28 Lessons (3h 5m)
    • 1. Lecture1 intro

      4:15
    • 2. Lecture2 what is bootstrap

      1:36
    • 3. Lecture3 grid system

      9:14
    • 4. Lecture4 responsive grid system

      8:22
    • 5. Lecture5 media queries

      3:25
    • 6. Lecture6 file structure

      3:22
    • 7. Lecture7 fontawasome

      2:10
    • 8. Lecture8 navigation

      8:49
    • 9. Lecture9 styling navigation

      6:12
    • 10. Lecture10 styling header

      12:46
    • 11. Lecture11 styling header 2

      13:25
    • 12. Lecture12 followus

      5:24
    • 13. Lecture13 followus styling

      7:00
    • 14. Lecture 14 who section

      5:00
    • 15. Lecture15 who styling

      4:50
    • 16. Lecture16 our latest work

      9:00
    • 17. Lecture17 our latest work styling

      6:05
    • 18. Lecture18 why section

      6:03
    • 19. Lecture19 why section styling

      2:04
    • 20. Lecture20 customers section

      7:56
    • 21. Lecture21 customers sections styling

      4:18
    • 22. Lecture22 pricing section

      7:50
    • 23. Lecture23 pricing section styling

      5:07
    • 24. Lecture24 contact section

      7:24
    • 25. Lecture25 footer section

      8:48
    • 26. Lecture26 footer styling

      2:40
    • 27. Lecture27 animation setup

      3:54
    • 28. Lecture28 animation

      18:23
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

8

Students

--

Projects

About This Class

This course will help you create a perfect bootstrap responsive landing page for your own personal portfolio, or for your business. You will ideally have a little knowledge of HTML & CSS, however it isn't essential as I will walk you through every step of code to ensure you have the right understanding of the bootstrap framework, and the tools to further your learning after you have completed the course.

This course mainly targets beginner and intermediate level of knowledge on Bootstrap 4 with practical usage on sample projects.

By the end of this course you will have hand coded a modern & professional landing page using HTML & CSS and built a solid understanding of the bootstrap framework to help you develop your own pages in the future.

Who this course is for:

  • Individuals who want to develop awesome responsive pages
  • Anyone wanting to brush up on their coding skills
  • Bootstrap newbies

Meet Your Teacher

Teacher Profile Image

Sarfaraz Kasmani

Front End Developer and Digital Marketer

Teacher

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Lecture1 intro: welcome to Bootstrap Training program ready to see that you're interested in learning. Bootstrap. Good step allows you to create modern and stunning user experience with latest Web standards. Who strap is the world most user front end framework to add sleep professional and attractive user interface for your application. So in this course we are going to clear the landing page using booster. So are there any course requirements are pretty crusade? Yes, work on this project. You must have the following skin sets. You should be comfortable with. HTM It you should be familiar with basic CS is and you should have a basic knowledge of us . The close objective participants will be able to implement at once bootstrap concept in project at college level for it in the street level. What you will learn in this pose, you'll able to create a landing page using both stepped forward, you will able to learn both step great system. We will also work on foreign Dawson for your project so you can use foreign awesome for any project. We will be using type of Rafi and utilities to create the lending piece so you will learn that as well who other dog it. Excluding students with Noble step or Web development experience. Front end developers. Anyone who wants to learn both stepped foot. So by the end of the stores, you will have the falling skill sets you will be having hand on recording practical and real life scenarios off creating landing page, using bootstrap full. So what are we going to create? Let's see that. So on the page load on the top, we have the boot step navigation bar. We have the logo on the left inside and the many options under bite inside. Then you'll see a large background which have a introduction, which gives you a chance to see the key points on the page. The left hand side of the page, we have the logo and then the title, and under that we will have a section of Litex and on the right inside off the page, we have a sign up form, and then we have ah, Roberton that will take you to the rest of the content within dockage. So this will be the initial state off the page. When the you that first visits and if we scroll down, we have a social section. You're with all those social likens, so if I hold on it, you can see her for what effect then we have who we are section like about the section. We have a button underneath this, which can be linked to one of the page or section, and on the right hand side, we haven't image explaining what the business does. Then we have the latest work section, which is a great way to so case. What the business does also case on products, and if I hold on the image it has a nice effect with then I own it. So you could link this through another page or another section of the page if you want, and each image have some next, which can be used to introduce or provide additional information for the world. Then we have a section called Why Work With Us? Which hasn't Aiken some title and some information takes for Icann's I have used for Torso . Then we have a customer testimonials sections. I have used ruling Corozal for this, So if I click on this people stroll, then we have uprising section, then we have a contact form which is a static form, and then finally we have the foot of section. Then if we sharing the page down, we can see that the whole pages responsive. It works on already ways. So all the sections are the size. We have also added the animation. So if I refresh the pigs, you can see that some of the elements are feeding in. Some are fading from the site, some are fading from. So so this is the project which we are going to create from scratch. So let's get started and I'll see you in the next lecture. 2. Lecture2 what is bootstrap: In this lecture, we will see what is Bootstrap. Bootstrap helps to build Responsive Mobile first projects on the Web with the world's most popular front and competent library. Who strapped is open, so stilted for developing HTML, CSS and JavaScript. So this is the official website off bootstrap. Just get pulled, stripped out. Tom. This is the website where you can get all the official documentation regarding boots that, as you can see, the current version as off now is 4.5 point zero. Let's check the documentation section. It contains all the important information, which you can refer back. Then you want to learn about new elements, are confident. It starts with introduction to boot step, and this includes all the information you need to get started. Then, on the left hand side, it provides all the sections such as competent. This is the most popular section, as it contains all the different elements, which you can use within bootstrap. This will help you to build your pages boots step Also provide some quick examples, so there are really templates. Toe practice things out after you have completed tacos so you can put your new ideas into your own pages and test out what you have learned throughout the lectures. So this was just a quick overview of the booster upside. So just bookmark this website so you can quickly for back in future if you need. So that's it for this lecture, and I even see you in the next video. 3. Lecture3 grid system: welcome back doing at the video. The most important part of will strap is rigged system. It is very important to clear while creating the layout off the Pigeon Butcher brake system lets you create layout in the weapons that is dividing your were plays into multiple boxes , such as other navigation content and footer Would stab grid system is used to create peace . Leo. It is a city's off container rows and columns. The page contains a container our containers flute. The container contains a set off rose. Each row contains exactly, well columns. You can create a box that means a dip back inside the rule, and you can decide exactly how many column, but it has to occupy. It must at least occupy one column bit and maximum off well. Columns A box can occupy. One column, two columns. Three columns, four columns. Five columns, six columns. Seven Collins eight Colon's nine columns 10 Columns, 11 columns Art welcomes For example, you have created a box that occupying six columns in a row. Beside that, you can please another box that occupies the remaining six follows, so we call it as six plus six. Like this, you can clear any combination off boxes. That makes a some off up to 12 columns, for example, eight plus four Oh, are four plus eight and so on. You can place and I started great. That means you can create a room inside the call so again he will get well columns inside it. The number of columns inside a row will be always to it. We can change it. If any end user columns are left, the space will be left empty as it is in the output. If the number of columns off a box exceed the limit off available columns for that particular rule, the boats jumps to the next room automatic. The side of each column is equal to the total bit off row, divided by to it by the full board. Start maintains some default margin and fighting to make the content look good. So let's write some cool to make it more here, so I go to my visuals for the airport. So let's Goto Jones for the poor and your I'll never class them as container food. So inside the starting a feud, we must place a rope, so I'll I'll remote the style. I don't require this. So inside this container will Adul so deaf glass equals two room. So now you will get well column inside this room. So inside this room, we need to create First column. So I like to read the first problem, Dave. Class equals to all. I found one. And you're right. Baldwin and I will give some background colors, So style equals two. Magadan on the gallows will be blue, so I could give some different different colors. Okay, so you copied this column and I'll paste it 11 times. Okay. 12 be 456789 and 11. So the wreck total 12. Al Jane, the colors. Okay, let's give bad. I'm giving this summer and Brendan pillars in yellow being like thing audience instead. So this is problem. Do the for five, six, seven, nine, then 11. Do it. Let's say this file and let's go do the browser. So yeah, you can see direct Well, columns. 123456789 10 11 12. So I would give some height for this. So let's go to the region studio food and your we need to give a height. This is equal to 200 XL. So I got with this and I'll based it on all those all the columns and let's save this file and let's go to the roses so it will display something like this. So now let's create an adoro. That s four boxes. So let's go to Visual Studio four and your l created one more. Do with the class. Go on it will. I have four boxes of it. So do and you're like class. It was too Paul treat because we need four boxes, so each box will have $3. So I'll copy this on. I'll pasted three times. So we have four boxes today. 69 into it. Okay, so the total number rest well, and let me give some style. Let's save this and let's go to the browser. So 1234 tonight. So you'll get an idea. All one going to all three and Carlos for letting this. So all 1234 OK, so the output will look something like this. So let me go to divisions for their code and start off three. If I right here for so Now the total number is 369 And and so, Dr Well, it will be touching if I save this. And if I go to the browser so you can see the last box automatically comes down. So it moves to the next line, so you must take care about the some off. Well, let's go back and put it back as three. And if you can see the output now, hysteric. So the total should be 12. So now we'll take one more roll and let me just copy be studio. And instead of three, we will put six by six. Okay, So six and 6 12 If I save this and if I go to the browser, you can see call one in part due But I quickly divided by six in the same way you can do different combinations. Okay, If I go got business. If I faced here. So you then, uh but it as eight by food. If I save this eight by phone, So it this is eight, and this is for so you can try it out with different kind of combination which will help you to understand more about this. So like this, you can create any number of boxes depending upon the well calling rules. So we have understood the basic off grid system in the boot step, and the further lesson we will take it to the next level. Until then, take care on. But by assuming the next video. 4. Lecture4 responsive grid system: welcome back to another video. In orderto target your webpage to multiple devices and make the content automatically fit for any resolution. You can do that by using responsive great system in Bootstrap. One of the main highlight, a bootstrap is responsiveness. The responsive, great system of bootstrap makes the content off the page automatically fit for any resolution from the largest to the smallest. You can specify exactly how many columns should be occupied by the box. With respect to to each diaper device individually, for example, you can specify the boxer occupy three columns only in extra large T ways, not on other devices. Do you know based on risk factor, you can divide their devices into different types. It is not based on branding, cost of device or physical screen size off the device. It is only based on bid off screen resolution based on the screen with. We can divide the devices into fighters. Extra large D ways. Large do raises you dim the ways small alleyways an extra large T ways. Whenever the skin with is greater than are equal Toto 1200 pixels. We can call it as extra large device whenever the strain with is greater than or equal to 992 pixels and less than or equal to 1199 pixels. We can call it as large the ways whenever the strain with is greater than or equal to 7 68 pixels and is less than or equal to 991 pixels we can call it s medium the ways whenever the string, with this greater than or equal to 576 pictures and let's don't or equal to 7 57 pictures, we can call it as multi ways. Whenever the strain. With this less than 5 76 pixels, we can call it S extracts More levels for extra large device. We can specify the number off column in that last name as call hyphen, Excel, iPhone and then the number of columns. For largely ways, we can specify the number off column with the last name Paul iPhone, LG iPhone and then the number of columns for medium device. We can specify the number of columns with the last name call hyphen, MD hyphen and then the number of columns for small device. We can specify the number of problems with took last name, call hyphen, sm hyphen and then the number of problems. For extra small device, we can specify call hyphen and then the number off columns. Excel stands for extra large L. D. Stands for large M D stands for medium as instance for small and for extracts. More device. There is no any attribution by Defour called refers to extra small events. So now let's suppose we have four boxes that this folded, attacked in our webpage, assumed that. Do you want to display 1st 4 boxes side by side, so out off total 12 columns. Each box can get three columns. Of course, you can share number of problems unequally if you want to. It just depends upon the requirement or content. If you want to share equally, you can give call hyphen Excel hyphen three For response in the large device assumed that you want to display 1st 3 boxes side by side and the last box display on the next line. So you will give call life in L G four for the 1st 3 boxes, and you will give tall iPhone. LG happened 12 for the last box in case off medium device assumed that you want 1st 2 boxes to be displaced side by side and the last two boxes display on the next line. So you will give all hyphen MD hyphen six for the 1st 2 boxes, and you will give Call him hyphen. MD happened six for the remaining two boxes as well, in the case of small alleyways, assumed that you want 1st 2 boxes display side by side on the last two boxes. This bill line by line so you will give call hyphens sm hyphen six for the 1st 2 boxes, and you will give call hyphen, sm my friend well for the remaining two boxes in case off extra small device assumed that you want to display all four boxes line by line so you will give call hyphen 12 for all the four boxes. Finally, this is the way you can give lasting toe, although they've accordingly. Now let's see the example by writing some food. So let's go to visual studio pulled. So I go to regions to the airport and you're all removed, the unwanted those which we don't required on your we need only four boxes, So 1234 and I will remove the remaining the So For extra large, we will give class as call Excel iPhone three for all the four boxes. So let me copy this last name Andi. And based on here on all the four news and I'll say this on, then we can go in the browser to check. So let me refresh this. So this isn't how it will look for the extra last device and in case of large device, So let's go to regions to do pull. And for large device, we will give the class name Icefall hyphen LG food for the 1st 3 lives. So let me copy this class. Basically. Yeah. And for the last one, it will give us call LG 12. Let's save this. Let's check in the browser. So currently it is for extra large device, So let us may minimize the browser with So now it is for last the ways so it will look something like this in lasting ways. Now, in case off medium, the ways is due has to occupy six column So the class name will be called. I've been MD hyphen six. So this is for medium device let me save this and let's go to browser and let's minimize the browser. This is the medium. Anyways, we need the 1st 2 box under top and remaining two boxes below that. Now, in case of small device, the 1st 2 books should occupy the six column, and the remaining two should be on different lengths. So for that we need to write Call. I've been sm iPhone six. Call definition, my friend six. And for remaining two, we will write Call Hyphen is, um, my friend. Well, because this tour we wanted on a separate line let me say this and let's go to the browser and let's minimize So this is for this Morally wise. The 1st 2 boxes will be in one line and side by side, and remaining two will be and the bottom one by one. No, for express Morley ways for each books. That class ah will be call. I found 12 for each day we need to write the same class. The fall happened well and you're I forgot to read sm so sm unfriendly. So let me say this on. Let's go to the browser and we need to minimize, but I was not minimize. We need toe string the browser so that this is the small device. So in small alleyway in extra small alleyways, it will look something like this. So now let's check it again. So in extra large, there'll be four boxes in large the ways there'll be three boxes side by side and one at the on the next lane. Then, in medium anyways, they'll be to bow to side by side and the do boxes below that and in smaller ways, we need to walk side by side. And then the two boxes, the meaning. Two boxes will be one below the other. And in the small alleyways all the boxes will be one below did. So. This is how ah responsiveness glued system works in bootstrap. So this is it for this lecture, and I'll see in the next video. Till then, take care on the way 5. Lecture5 media queries: welcome back to another lecture. One of the best things about bootstrap is the fact that you can use mediocrities into your CSS fights. This helps you target styling for specific devices. So if you click on documentation on if you click on Leo and if I scroll a little down so yeah, you can see mediocrities so this break points are important. This helps you to decide which device you want to style. So in the first section of the court, we have the media queries for all the break points except the extra small devices. And this uses them in with. And if you scroll down a little, we can see all break points except for extra large devices. And this uses Maxwell. So if you're designing for mobile first, then we use minute. And if you're designing for the straw, then we use Maxwell. So to get in better idea, let's say an example. I have returned some Stein's. This is the test class, and the properties are foreign size one idiom and the calories green. This is the global state, so let's check in the browser. So this is the global stage for inside this 1 90 m and the calories green. So if I go to visual studio cold, so your average on a media creating, where the foreign status to R E. M and the color is rate friends were using Maxwell, it means that this style will be added to their devices that have a maximum with off 768 pixels or anything under 768 pictures or under the medium devices. So basically or least more devices will have the states. So let's check in the browser if I stink this down. And now, when mission, the medium, the ways we will see the changes. So in the larger screen, the phone says, is one idea on the calories bean and in the small devices, the phone sizes to R E M Onda calories rate. So the content did say, But the styling is different. You dummy Jack Ready? So let's go to a judge studio cold and switch this two men instead. Off Max, I have used many, so it is basically reversed. Let me save this file so the global style will be anything under 7 68 pixels and anything with a minimum with off 768 pixel or about will have new styling applied. So let's second Ambrose's. So if I minimize this or if I string this now, the color is green and the phone chases one rdm And if I go back to the largest thing the phone sizes you r, E M and Nicholas State. So it is basically the worst. So now for the medium, the ways or small alleyways the stylist different on for the large. Anyways, the style is different. So it is opposite off what we have done before. So mostly I use Max. But so if I want to use our different styling for mobile or medium device, I used Maxwell. I don't use men, but so if I save this the four largest thing, we have a global style and for smaller screen, we can use this media quit. So in the smartest thing, you will see a different state. This is the best way off using mediocrity. So this was a basic introduction to mediocrity. You will get better understanding as we go through the course. So this is it for this video, and I'll see you in the next lecture 6. Lecture6 file structure: welcome back to another lecture in this lecture. We are going to create our final structure. So for that I will create a folder on my desktop with the name Bootstrap. Lt means bootstrap landing pitch and inside that folder and inside this for the I really create two folders, one is or images, so I'll given name images, and the 2nd 1 will be four. CS is, so I've given them ceases on in this images folder. We need to add images so you will get all the images and the source of step. And if I go back and into use this folder, we will create a file that just styles docked, CIA says, but will not create jerk. Right now, we will create individual through the airport, so I will goto Vigils review board and open this folder. So if you don't have vigils to the airport and you need to go to Google and search for the jewels with the airport, and this is the posting, which you'll get so if you are using Mac so you can download and install it. And if you're using windows so you can just download and install it, the ones who install, and you need to open it on your we need to goto open and we need to select the full of So I'll select the folder Bootstrap LP and inside ceases older. We need to create a new file with the name styles. Dorsey is's and in bootstrap fel that we need to create a fire in extraordinary female. For that, we need to click here and we need toe click on this. What have you done? You've filed with the name index dot html and press enter the ones this is done. We need to goto get bootstrap dot com and you're in the documentation. We really get the starter templates. So your we need toe populace and we need to go to a vigil struggle port and you have any toothpaste and we need to connect. This study starts A says, so your we need to right wing by the end equals still stand ship and Charlie ethic was too . She is this we need to give the partner we need to save this file. So during this file, or open this file in the browser I'm using an extension are open in Rosa. So I'm using this extension. So you need to install this extension. I have already install it. So close this. And once you install this extension and she right, look on this index storage Jamil file, it will say open in the fall browser. So you need to click on this. Certainly open this file and that does it. We have successfully added the food and you can see hello world sprint table. So in the next lecture, we will add formed. Awesome. So this is it for this lecture and I'll see you in the next election. 7. Lecture7 fontawasome: you come to another lecture in this video, we will see how to download font. Awesome! I can font Awesome Aikens are scalable vector writings that can be customized easily through CS is they can be style the same as you style your text So we will use front Awesome items on our webpage Toto download found awesome! I can we need to Google and search for on Awesome And I'm using version 4.7 So I'll click on this. And as you can see font awesome dot com slash version 4.7 point zero So we need to click on get started and here we need to select No, thanks. I just stick with foreign tossem for So we need to come down a little and you're going to click on download. So again we need to get condoms we're doing start downloading the fights. So I opened this folder and that he copied this on Dawson And then you go to my desktop where I have created the folder would step LP and I'll pay strict here on. I'll rename this to want Awesome! This is the only virgin 4.7 so we can go there The ones we have added this folder in boot step LP. Then we need to go to regions forgetful and in index or HTML. We need to linked the CSS find So linked, Arial, it pulls to time. I see it the your life or you ready for this agency, Charlie s equals two. You need to select the folder off on Tossem and CSS and Foreign Dawson, Dr. Mindy actually is nearly to close this and we need to save this fight. We have successfully downloaded Tufano some files and we have successfully linked to our webpage. So this is it for this video and I'll see you in the next video. 8. Lecture8 navigation: I'll come back to another election in this video, we will add now Barto our page. So for that we need to go to visual studio. Poured and inside in bags are extreme ill and in the body attack we need to add in effect, so I'll remove this actual intact. We don't require Yeah, I will admit attack and we need to other class fall now, but and we need to add another class which is now back, iPhone explained. I have been engine. This basically tells the browser went toe collapsed a number or to expand it if we want to expand. When we hit Tom medium the way stream, then we just need to change the algae to MD off a small stream. We need to change us and then we need to close this now time. Now we need to never to be fixed on top of this thing. For that, we need a class which is called fixed. I think so. Now, in scientists now back, we need to add navigation options for that. We need to under the attack with the class, which is a full too. But let's this basically informs the browser that this Dave and all its content will be collapsible elements. Then we need to add a class now. But, my friend, perhaps next we need an i d. This will connect to our total button that we need to add. So the idea name should be unique. So I will give tidy name as my now Now I'll closes their attack. Now we need to add our navigation options. We will do it with you. L we're just a northerly stack. So I would like to do well time and inside you will take. I will other class which is a Puerto now by I said now and I'll close this you will take These are all the four bold step classes that provides relevant padding and position that requires now within this UL tags we can add a navigation options. For that we need to other a lighter. So I will add a light I and inside I like that I will give a class Now I found items and I will close this and like that Now we need to add traveling so we need to add a it tight. So in child ally, we will take a tag. And with that last, it pulls to. Now I fumbling and your we need to give, actually if which is equal to as and then lose this attack. And inside this a type our first Linkous follows. So I'll give Follow us and I received this and let's check in the browser. But if I deflect us, you can see our first link has been printed out. Now we need to go to results to report and we need to add any meaning links. So we have seven different navigation options on final phase that we will be creating the 1st 1 is followers. So I will give the name s social. So here I'll do so so And then I'll copy this light act and I will base their And the 2nd 1 is who so I'll change their title and struggling this we will connect with the i d. Later on my night couldn't intersection. So right now just give the name accordingly and again. We need to copy this and paste it here. And the 3rd 1 is work. We are also Ivan. Change it to what? That's based it The 4th 1 is why and the next one is customer. Then we have prising and the final one this contact so Monday that saved is and let's shake in the browser and let's replaces. So we're getting all the links here. So now if I string this page and when we hit the medium device, this navigation disappears because we have not included our total. But so let's add a toggle button. So let's go to each month for the airport. So about the the tax year, we need to add a but in time with the class, which is required to now. But I think the type is equal to button on. We need a data Tuggle attributes, so I'll write data at other, which is equal to collapse on. We need a data target at the root, which is required to the I D. But we have given you a minor. So I'll write, has my now, and I'll close this. But in tight and inside the button attack, we will add the icon to toggle open. So for that, we need to give us plan on with the class, which is equal to now. But I think Douglas, I sent I and we need to close this Phantom lets it is. And let's go to the brother and check if I refresh this right now also, you won't see anything because there there is nothing. If I write button and I say this once you refers this, you can see you. But once we add the background, you will see and I can't. Okay, Right now you won't see anything but in the switcher lecture. When Aleida background. So you can see that toe. Let me increase the size and I'll remove this. Okay, let me say this. So now we need to add a logo on the left inside. For that, we need to goto rituals to the airport. And after this but intact. We need to aland attack. But the class which is a goingto no But Brian And you know we need to give a Charlie if it falls to has Onda, we need to close this attack And inside this a type we will light image tag SRC will be put into the pot. But that image Okay, so we need to so like this folder image and I've added all the the major's which I require so you will get all the images and resource that so just download and pasted an image folder Oil Select logo. I've been small, dark PNG nine year. I'll give all day SK technology on your liver class between the photo I am the fluid. This last means the image will be the size and optimizing all devices. This saves our time to play a different side of images for different devices. So let's close this image tag and let's save this and let's go to the browser and check been exposed us so you can see we have successfully added a logo on our webpage. Now we need this local Toby on the left side and this navigation menus on the right inside . This can be easily achieved with the class, which is animal hyphen auto so that we need to add in you will. Well, you're going into an animal hyphen auto. Let me say this and let's if there's this now you can see the Lobo is on the left inside, and the menu options are on the right in psych eval, strange for margin left so that once you give em a hyphen auto, so it automatically fills the margin from the left hand side off our navigation ritual. Effectively shift our navigation toe that identity. So if you want toe see more about this Well, young, you can go and search for um Ele Otto. So you will get all the things in new ability. So if I scroll down, you can see a lot of examples here. So you really be able to understand you're Euridice. So right now, I suppose, Ah, if we have a duty, okay? And this is the sticking one and you're is the flex item. And after that there are two more deals. So if I put em are or to your foot automatically fills the right space on duh. Remaining two items will base appeared on the right side. And similarly, if you see there are three items in this do on it on the last item. If I give margin left auto. So you're in this day we have given margin left auto, so that about the items will be shifted on the left hand side and this will remain on the right side so you can just go through this example. Margin Barrett auto and margin left photo, so you will have an idea about her. So this is it for this video and I'll see in the next video. 9. Lecture9 styling navigation: Welcome back to another lecture in this video. We are going to style our navigation bar if we go to our final page. The main thing we can see is that our background is slightly transparent and we are using different phone and we have this thing border at the bottom. That's a Princeton navigation from the other content. Let's try to achieve this. First thing we will do is we will add transparency, and we can do that by accessing the number close that we have added in our index fight. So let's go to visual studio code and let's go to a next door. That statement. So this is a never class which we need to access. Let's go with this and you're I will baster and let's open the curly braces. Inside this, we will add a property called background color and you know we need to add a color values. So for that, we need to write RGB A and your we need to add color values, which in our case is 21 31 33 and here we need to add a opacity or transparency. We just see 2.5 you can increase Arctic, please. So it's up to you how much transparency you want or how much adversity you want. So I did save this. And yes, I go to the browser. And if I refresh the speech, you can see the transparency has been added. Now we will add the border at the bottom like this. Okay, so let's go do that. Stay Lord CSS and your We need to add border. I found mortem. It was too one pixel solar on the color will be, Didn't we? Did you Okay, let's save this and let's go to the browser. The 31st is you won't be able to see the color because the background is right and, uh, the lettuce to light. So we're not be we will not be able to see, but expectancy. Yeah, that his own border. Okay, so once I'll add the background image. Then you will able to see that Now we will change the color of this navigation which does not look good right now. So for that we need to goto vigils will be accord. And if you go to and they start X to Yemen. So these are unravelling, which we need to color. So this traveling is inside now. But hyphen now. So this is how we can access. So here are right now, but I found now and then a space dart. Now I've sent the link and we need to open the curly braces. And here we need to give well a property which is de even do you want Do you want? Let me say this and let's go to the browser. And if I reflect this now, you can see the color has been changed. Now we need the whole what effect? So for that, we just need to copy this class he stirred and your I will add Well on this we need toe change it to right, which is s S s fss. Okay, let me say this and refresh. But now you can see if you hold it, you can see a white color. Now we need to change the phone stay. We are using Roboto, which is a Google form. So for that we need toe goto bonus dot google dot com on As you can see, this is the first fund that you were able to see if you don't find it here. Then you can search it for over. Then you need to click on this and you need to select the style which you want. So I need this light 300. I need this type. So I'll say like this. Then I need 400. Then I need 700 which is bored then toe. Use this for If we need to click on and bed on, we need to just copy this link on. We need to go toe indexed or HTML and at the top job. We need to baste it. Let's save this file and again we need to goto this website on. We need to copy this and your we need to go toe style, Lord CIA says. And at the top, we will add a body on really based on this property so that all elements should get this foreign family. And one more thing we have kept distracted, so I will remove this title and I'll give it SK Technologies. So we have successfully added the phone and changed the phone. Let's see in the browser let's save this. As you can see, the phone has been changed and now it is no Bordeaux. So one more thing we need to do is if I shrink this your we need to see, and I can't. So let me put it back on. Then I'll need to add one class, which is now bar my friend out. Let me save this. And if I go to the browser and refresh it and if I shrink this now, you can see be able to see that I can. And if I take $3 as I told you in ah in earlier lectures, I will add this background and you can you will be able to see this. Aiken. So this is the class with between to add. So we have successfully added their transparency for the navigation and we have changed the phone and we have even changed the color for the toggle button. So this is it for this video and you see in the next video where we will work on the header section 10. Lecture10 styling header: when you come back to another lecture in this video, we will work on the head of section. Let's take the final page. We have a background image like this with two separate sections that contains our intro text logo and the sections condensed a sign up form. So let's try to achieve this. So for that we need to go to regions to be a cold and index dot html page. After now tag, I will give a comment. So to give a come in, we need to you agree? Didn't sign exclamation on hyphen hyphen Odai's dash. And inside this comment I will write Head up and you copy this and based on are the ends. So this is HTML comment. So the reason to add this comment is that it helps us to identify that this is heather section because once we start adding at the sections, then the court will be quite wrong. So do you usually find a particular section? We will add comments. Let's say this is header section. So I have added a comment headed and if it is ah ah for low section. So then we will add a comment less followers Okay, so it is important to add comments. It is very helpful. And inside this we will add a tag we just section But then I d which is a quarto. And we need to close this section back and inside this we will other do with the class which is equal to container. I need to close this the attack and inside this we will Allah row. So this is a real class. And inside this rule, we know that our content is divided into two sections. The first section contains the logo and the entire text and other section sentenced a form so desire, equality waited We can split it into half. So the first bit off content can take up six columns and the second can take up the remaining six column So and does do which is inside the rule. We can take a class we just call. I've been MD hyphen six and we need to close this to attack. So this will be one day of and the other day will also have call MD hyphen six. So their total should be 12. So first we will complete this section, press enter and inside this. We need a logo like this. Okay, so for that, I will, right? Image tag SRC. And in this I'll take the part images on DA local or PNG and at all times, which is equal to escape technology. And I'll add a class, which is a photo image. I am G hyphen flute, and I really close this image tag. And after that, I would take a pee tag, and I have some dummy takes. So this is a dummy text, which I'll and if you want this kind of text, So you just need to go to Google and search for Lord and Gibson, and this is their w text generator. So you need to click, and you can copy this dummy text. Okay, Lets Toto cold, and you're going to copy based. Okay. Two former dis text I have used option shipped. If you are a Windows user, you need to press controlled shift. And I'm using an extension called prettier. This for man, Their text. Okay, so there are different kind off. You can use return now. This is also very nice. Ah, you can use this. And once you install this, then you need to option. You need to press option shift as a few other Mac users. And if your Windows user come on control shift F Let's save this on. One more thing which I wanted to tell you, is like we were using open in Broza to open the page. Okay, so I have found something else which is much better life sever. Okay, so if you install this what happened to start? Let me close this one to install this. It will ask you to go life. The jury will get an option. Go life. And if you click on it, it will be It will go live like this. Okay, so once you make any change and if you say it automatically saves you don't have to refresh the page. But this is much, much better. So I will not use this. I use this. Okay, so let me close this loadem Epsom because I copied the dummy text from you. If you need, you can use that. I have I did this dummy text Now we need one more pretax, so I'll copy this dummy text. Okay, You're also we need some title toe. Let me finish this he died. Auction shift F. Okay. And before the speed today, I will take I will take at two time. And inside this x project. I would like this totally populace not based on. Let's save this on. If you check the browser, check in the browser so you can see Louisville the title and to be tights. Okay, now we will. Well, style this, But before that, we will finish this form tag. So let's go do the bull. And here after this columns we need to add one more column which is having a class, which is a protocol. I've been MD hyphen six because this studios, like, proliferated So in this reveal out of phone tag. So I had a farm back. And if you go toe the official website, get bootstrap dot com the other day. If you search for foam, let's go incompetent and your if you go to farms. So you're all the examples for the forms. You can just refer just This is just for your reference. Let's scored it. Okay, so you're inside this form check. I will take feel said with the class which is equal to form there, and it closed us for you, Tag Field said. On inside, I'll take label with the class, which is equal to Assad. I found only this means that dis label is only useful for screen readers and you're available. And after the livery time, weevils haven't important, which is type equals to text because this is for name. So if it is an email, so we need to write type because to know email And if it is done a murder, a phone number, then we need to write and put type because to number. So there are different different types that you can just check the form. Ah, in a good mood step website. Okay, so your we need to add a class from hyphen control to add a bootstrap styling toe, our input fee on Then we need to add placeholder, which is a four to name, need to close this. Let's save this on. Let's go to the browser on defy defense. This here, you can see this name in protest. Um, okay, let's copy this and the corporatist feed said and paste it because we need it for email. So you need to change all this email type is email. Placeholder is email. Let's save this and let's go to the browser. See your email. Okay, so we can see the label. Okay, if I remove this class and if I goto the brother, then you can see the labor. So this is only for the screen reader, and normally it will be hidden. So right now you can see it is with them now, below this, we need a button. So for that, we need to go toe a visual studio code and your Benito at Burton and last is a quarto beauty in which adds default styling. And then we need to add Bt and hyphen out. Lane I've been in for this will add only doubt Line to the button, which is a new feature in Bootstrap four, which was not there in boot. Step three. Then we need to add a class beauty and hyphen. This will stretch to Burton to fill the element which is placed within automatically. Now we need to close is but in tag on inside about integrity late signed up. Let's say this and let's go to the browser and let's refresh it. So you're is the but then we have added. So we have place all elements here. Now we need to add this at all. Okay, so let's go to visual studio code and we need to add one more after this road. So what we can do is we can close this room and after this no, we will add one more with the class. No, and close this and inside we will take a do at the class which is equal to fall. This class helps to take up all that well columns on all the screen size so need to close this tag and your we need to enter font. Awesome. I can. So for that, we need to go to Google. And so it's for fun, Dawson and I'm using version four points and 40.0. So we'll boehlje and we will click on this icon and all like it's and you have You need to type chevron down. OK, so this is I can which we want to use. So we need to just copy this whole thing and go to the court and we need to paste it here. So if I save this and if I go to the browser so you can see that I can has been added. But we need ah size, which is bigger than this. As you can see, this is the sites for size. You need to go to example and need to click on examples. So as you can see, if you want a larger I can the yard is the class for that F. A haIf analogy will give you this much off size f A high friend. Two weeks, we'll give you this much of size three x will give you this. Pollex will give you this and fights mitigate with this. So we will add three X. So yeah, so this we need to add this FAA. I found three x on Let's Okay, so you're is the Eiken. Now we need this in. Dissented. So for that, we need to and a class in column. So text iPhone center. So this makes the arrow in the center. So in this section, we have completed all the we have placed all the elements. But in the next lecture, I'll style all of this with a background image. We will add this background. Okay, So Okay. One thing we have for God we have. We need to add this Pitak. Okay, so in the farm let me open this row and your You're I will add a pitak and in type B die. I will take some dummy text which I can cooperate from your and paste it that saved this. And if I go to the browser So your vehicle we have out here dummy text. So in the next lecture I will complete this old section. This is it for this video and I'll see in the next video. 11. Lecture11 styling header 2: Welcome back to another lecture in this lecture, we will continue to work on styling the head of section. If you look at this, we need to add a background here. So for that we need to go to regions to the airport and we need to go to style. Lord sees this and first I will add a coming to add a comment in style Shoot. We need to write slash star and then had it. And against our slash and your from your weaken right ceases for a header section. So if you remember, we have given an i d in the header section So you're his i d head of So we can access this in our thesis style. Shoot torches is So let's stop this on. If I go here on your we need to put hash and the idea name for I d. We need to give hash and tender. I didn't for class. We need to give dark and the class day. So you have you need to open locally places and first we need to give background. So back it on which will be equal toe. You are ill and insider. You well We will give the but name off image. So right now via in CSS fuller toe get one step out offered. We need toe add are dark slash and then we need to go to Image folder on In Image folder. We have a background with the name stars iPhone beachy. The second property will be background, open size equals took over and the 3rd 1 is height, which is equal to 100 person. Let's save this and let's go to the browser and check So as you can see the images displayed and it is filled over the container, but it does not feel over the beach. But before we fix this issue, we will change the color of this fund. So for that we need to go to vigils for the airport and you're ill. Aditya. Well, a property. It is a Quito F F f for weight. That's a this and let's go to the Rosa Now you can see we have added a color here white color. Now we need to fix this background, which should cover the full page. This is basically because the body also needs the parent element for it to skill directly so you're in style, Orgy says. In the body, we need to add HTML and you have any toe, said the high property as 100. Listen and let's say this this will solve our issue. So let's go to the browser and now the frequency disco, this image Callisto and Time section when the pages initially loaded. So now you can. As you can see, the content is moving on the top. Right now, you can see it didn number, but in our case it is on the top. So we need to act more classes. So let's go toe style, Garcia says. And in the header we need to add display flex and a line items incentive. Let's say this and let's go to the browser. As you can see now, our content is a number that is, ah, padding issue between the logo and their texts. So for that, we need to go to a region studio bold and your are you take the I D on a lightheaded and I access image, Dag. So let's go doing extorted statement. We have access header and inside this at that I d. Anything which is having image tag will take this class, take this property. Okay, so you're I'll add padding. It's Zito. Zero does to stop right and from bottom being in 20 fixes and from left, zero top right for them left. And we need to and just a bit also, which is equal to 80%. Let's save this and let's go to the browser. Let's take fresh you have. We don't need Palmer. It saved this. So now you can see there is a space in between no image and undertaking and for the steaks , which is it doesn't look that played. We need to add a class in the P Tech, which is called lead class, equals two lead and let's save this. And if I go to the browser now, you can see for Texas bigger and the line height is also increase. As you can see you, it is bigger and the line height is also increased. You can add the lead class for this as well, but I leave it OK. It's up to you. If you want to add, you can other ways to live it. Now we need to add a background for this I know from so for that I will go to regions to be a port and I will add a class inside this bottom with the name and then a friend, right? The reason to at this class is that we can target this specific section individually in our index. Fine, let's say this file and let's copy this last name. We need to add the background holy for this section. So I did a class here and you're ill right dot and I'll place the class name as this is a class we need to add a door. If it is a 90 then we need to add a hash before the knee and the properties are background equals two rgb a And then we need to give the color values. I will give black color to give black larvae. We need zero Hamas Ito form a zero and opacity will be 0.5. Then the second property will be fighting padding. I need 30 pixels from all the sights and then border radius. Border radius will be 10 p x. Let me save this file on Let's go to the browser and check. So as you can see, we have added the background for this sign. A form. And now this arrow is really close to this form. We need some space in between. So for that, I will go to visual studio code and to access this fund. Awesome. I can. What we need to do is okay. First, let me go to the polls to record and index or a stable file. This is the fund. Awesome. Aiken to access. What I will do is I will not directly right f A What s a? And I'll give some padding what I lose. I'll access it through. Heather, I d. So you copied this had already, which is on the top. And then I like, says this f a for awesome. Plus on, I'll give margin from top 5% on from left Trade zero top and bottom will be 5%. Let's save this and let's go to the brother. Now you can see there's this margin in between. There's a good space in between. Both Now I'll add a over effect on this. So what we can do is I'll go to the vigils for the airport and I copied this good Hastert here on your land a tag and you're I learned a class property which is having a value off as after ff white color. OK, and then we need over work for this. So and and of work for this on the color, I'll change it to C C. C, which is a graceful. Okay, so let's save this on. Let's go to the browser and check and fresh this. Okay, We need to add on attack. So which have Norden? So a and shoddy f And you know, we need to give the I d which we have given for social so so ocean. And that includes this attack. And I got this and you're really pissed. Okay, let me save this and let's go to the browser. Okay, so now you can see if I have order honored. It is giving me a grayish color on one to click on this. It will go do the social sex in which we have not created but we re create. And then one thing I forward is that Ah, during navigation. All this menu items are a pockets, and in our case, it is lower case. Okay, so we need to change start. So let's go Do stand. Lord, Serious is your We need to write text transform uppercase. Okay, And let's say this and let's go to the browser. So as you can see, all the text size are all the phone stylist uppercase. Okay, now, if I swing this town so as you can see, this logo is starting up on This is not saying deadline, But in our case, you're again. See everything That's center line. Okay, so what we can do is we can add a mediocrity, and then we can make this ended late. Okay, so for that, we need to add a mediocrity. So on the top here, I will give Adelaide Media on Maxwell, which will be 768 the X and then opened them backers Maxwell, it means anything which is equal to 768 or less than deck will apply this stain. Okay, you're I'll give the i d at their i. D. You're a good techs. Align sent. Let me say this and let's go to the browser and check reflects this official in this speech . No, everything is centered line, but still, this is touching on top. So for logo, we can increase. Let me copy this. And Hastert here, let's remove this on this weekend. Decrease the size by 70%. So let me refresh and let's showing this. Let's inspect, okay? We're not We're not able to apply this. So what I can do is and give your important We didn't override. No, it's very flesh under 70% is applied and I closed us. Still, we can decrease the size by 20% because it is too big. No, this phone this is all total big. So we can change this. Select me, make it bigger. And this font size is too big. So in Syria veg to I will use it. Three type. OK, let's save this. So now you can see it's to taggers. Much better now. Everything is fitting within this books. Ah, if you want to hide this text and more value aces on medium do aces. Okay. If you need. If you want to hide district so what you can do is you can add a class which is a Quito de None means display None. Okay. And there's one more class the iPhone MD I sun block. Okay, So demons mean it will not be seen in all the devices, but in medium devices it will be displayed block medium devices. And about that means from 768 to the high wasn't it will be displayed, block. So in the higher wage in you're able to see this attack. But once you had 768 this will be gone. Okay? And if I make it small, you will not be able to see that. So dissolved default Bootstrap classes, which which are really helpful. So you can just try it out if you want to have some Ah, paragraphs in more valuable Asian and you want to show it on only desktop version. So this is the class for that. So we have successfully completed this section, and in the next section we will work on followers. The social section. Okay, you're it is. So in the next lecture, we will work on this. So this is it for this video and you see in the next video 12. Lecture12 followus: I'll come back to another lecture in this video we are going to create for lower section. So if I go to the final page So this is the follower section, which we need to create so appropriate this We need to go to vigils through the airport on after Heather Tag after this header section, I will that I don't come in, follow us and give us bag section with an I D, which is a weirdo. Don't sit and that goes this section. Thank and inside. I'll take a deal with the class container inside. This do I will take one more day with the class, which is equal good role. So once again, this section is split into Don't booth against C A. This section is split into who it's been off content. Occupy six file of a Pro zero. So we need to create motives with call MD six mile create first day with the class All I found ending hyphen. Six. On inside. I'll take at Stoop Bag and I'll write for Lewis, and after this, I will take up in type and I'll add some W takes and in between we need a border Okay, So you're for this border. We will take a charge tax, my child, is what is on federal on inside this ill. All right, Elaine left, and I takeover bid property, which will have a bid off 50%. And I really close this uncharted that received this. And if we check in the browser, so you're as you can see, follow us and we haven't. Horizontal lines are separated, and then some day mutates This followers could be that delay. So I will write Follow as OK, that's it for this. And let's start with the brother. So right now we have finished this. Now we will add our items, as we have in the final page. We need to add it here. So for that I will take one more. Dave, you are. And with the class that is equal to call m d six on, we need to take you will. Hey, on entirely will, I will take elect on inside the U. N. Attack. I will add a class which is equal to list iPhone in length and in a light, I I would like the class which is equal to the list. Iceland in line item and inside this l A we will add our front Awesome item. So for that, we need to go do for endorsing website that you go to foreign Dawson I'm using world and for so let's go. So this link and we're in the I can I'll click on our lightens and I'll search for Facebook . But we need this one. So I clicked on this and I'll copy this and we need to paste it here. And if I save this on, if I go to the browser Well, your residency, our Facebook Aiken has been displayed. Now we need to add all this items. So for that, we need to goto rituals to the airport. And I copy this and like and I'll Peaster okay, before that, we need to wrap this into any text. So a sorry if it pulls to Yes. You know, you can give you all It's not shelling if you have a Facebook place, so that so then you can be willing off your Facebook piece. Now we can populace and life, I'll taste it. So how maney I can't do we need find 2345 OK, so learn 234 and five. So Facebook for Facebook. We have wrote Facebook and list of the things I know. So I later Twitter if you want, you can just search it. You're OK, but I know the name so automatically. Writer. You're a great start, Graham. And then we have been placed. I wouldn't be. Then we have Google Plus and then we have our offices. Let me save this on. Let's go to the brother. So your residency, we have added all the Aiken's. And now we need to style this section. Okay, so that I'll do in the next video. So this is it for this video, and I'm seeing the next with you. 13. Lecture13 followus styling: come back down under electoral in this video, we are going to sign this for lower section. For that we need to go to which wants to deport. And first I will goto Styling starts here says after this header, I'll give a coming as so sell our followers. So I like followers. And now I access the I d, which is social, and I'll give some padding. So padding from top and bottom will be 4.25 I d, um, And from left, right, we need zero. I would say this and if we go to the browser and check so from top and bottom, we gotta padding and from the left, right, regard zero padding. Now, I started this social lichens, so I grabbed the FAA class. I like I mean, so so. And dark fc. Okay, now we are able to access this Plus, so you're give some styling, so we need to add some property phone size, which is a little too 1.5, you know, and then color, which is going to be for a B five. See you night. You can change the color according to your team. If you want if you have some other color branding so you can danger. Border. I gave one solid and I give the same color. Four be five c night. And after the border, I get some of it. Do they weirdo 60 picks us. I again saying 60 pixels that seem this. And let's go to the browser and check so you can see we're getting all this. But we are getting us per square. So we need a radius. So let's go there, and we need to give a radius. So border radius, which is a weirdo 13 by the same. Okay, uh, let me see if this and that's well do. Okay, now, now we're getting out of this now. Just I think should be in the center. So for that. So let me do one thing. Let me a good side by side. So you will have an idea what I'm I think so. Now we need this. I need this. I can Toby in the So you're all right. This play flakes, the other will be other property will be justified. Front and center. It meant a line. I tell us. I think that Let me say this So now, as you can see, this Aikens are in the center of this box now. I'll never understand effect. So for that, I very transition. All we need to give the kind isn't all the elements. Ah, and timing will be 0.4 seconds and the effect will be easy. Oh, okay. Let's take this. Now we need to give a whole what effect? So for that I, by ash so silly dot essay and a light for you only need to give background. So the background is to sink a little bit to be ah giving you So I like hash that to this on. Let's shake her. So as you can see, we are getting, ah, background colors, but the we need to add discolor property would I can should be right in talent. So if I have word on this right now, you can see we are getting in. We're effect. But we're getting an underlying. So to remove that underline, I will. We'll show self okay. And for what? In a tank. I will take a property. Thanks. Deposition? No. Bit like received this on. Let's this dish it. So now you can see once I Who was this? That is no one Delaine. Okay, now it may could be good. Okay, No click here. Now, As you can see, we are getting the word effect and we're getting the Aiken's exactly like this. So instead of 1 16 I'll take the border as two pixels for the borders that the two pictures see of this. And so now the border is two pixels, So it is looking much better now if I sing this for the more better anyways, as you can see, this is left the line. We need things to be in the US and billing. So for that, I'll go to visual studio pole and we need to use mediocrity. So yeah, I'll grab this social I d on. I'll buy takes Elaine. Same thing. Let's say this now. We can tick now. Everything is center now, years. So horizontal line is on the left side. So you're you need to write, shows a job on. We need to give margin from top in what we need. 8%. And from left, right will do auto fertile decentralize. So now it's against me. This sword is on the line. Is in the center and everything is ineffective. And they're This piece is imagine from so often. 35. Me good. Bigger. So this is how it looks in that stop wasn't soon they stop Wilson. It will look something like this. And if if you stink to Mobile Virgin, it will look something like this. So? So we have successfully Stein the followers section. So this is it for this with you and everything in it. 14. Lecture 14 who section: Welcome back to on a election. In this video, we are going to create our WHO section. If you look our final page, we can see this section is again split into two sections. He's bit off Fontaine, taking six follow. Each gold structure is almost same as related for follow a section so you can pause this video and right on your own. I hope you were able to complete this section. But if not, then no worries. I'm going to do it right now. So let's go toe index dot html page. And here after this section for lower section. Well, let me towards. We were coming here and then we need to give up coming for cool section. So and let's copy this and Hastert here who ends and your I'll give six and bags with an I D. Which is equal to who. And I close this section type and inside we will take a day with the class Dana. And inside we will take or diff with the class, which is equal, duro, and we need to columns. So first we will take our deal with the class call. I've been MD iPhone six and inside this we need to right a title with its to text. So I'll copy this and I would give each to tag. And inside this I'll paste this and then we need in horizontal line. So as we did it for for lower section, Same thing we need to do it there. Align equals stewed less. And it which is a little 15 person Our next close This and then I will take up you tag. And I pieced this Ford so Pitak and I'll paste in the format off sensitive. Ok? And your I will take a class which is equal to lead as we did it for this section. Okay, so now I'll take one more free tag and I paste this contract, so be taxed and paste it Here. Autzen Ship F. Okay, let's save this and let's check in the browser. So, as you can see, we have given a title horizontal line on some, uh, content with inside of you. That and then we need to and a Burton. But this is custom button. Okay. Uh, so you're after Pitak? I would like Britain and the class which give us bt N on a I will not give bootstrap class for this. I'll give Button, my friend who? So that we can customize this button. Okay. And internal. Right. Find out more as we everyone you'll find out more. Okay, so let me see if this and let's go to the bother and check. So right now, you can see there is no styling, that we will add it because this is a test. Um, Burton, I'll show you how to give styling for custom, but okay. And then we need image on the right inside. So this is the image minuto guests. So again, we need to add one more day with the problem with the class ball. I've been MD happen six and your entire retaking me today s I C U to the Quito, but is a major hyphen. What a major. Okay. And then Plus is equal to image. I am seafood and we need an artifact which is a Puerto. Who are we movie up? Sorry on. I'll close this fact. Save this and I'll check it end up. So as you can see, we have finally added to the media as well. So these are all the elements which are required for who we are. Section. So in the next video, I'm going to sign this section. Are you give a background. I'll style this button. Okay, so if you can see yeah, we have a background color. We we need to start in this part so that we'll go in the next video. So this is it for this video, and it seems that next figure 15. Lecture15 who styling: Welcome back down at the lecture in this lecture. We're going to start this who we are. Section okay. The first thing I'll do is I will give up filing for this section, and then I'll add a background. So let's go to regions to the airport and we need to go to style start CSS. And after followers, I would you got coming. Oh, don't do exist. The i d. We need to write hash on the name off the idea which we gave us. Move. So you're if you can check. This is Idema Tree. Have given. So you are. I'm going to use this. Okay, now for shall give fighting. So riding, which will be 5 p.m. from dope in bottom and zero from left and right. And then I give a background color who that will be as have 66 athletes. Okay, now, let's save this and let's go to the browser and check. So, as you can see, we got this background color and we gotta piling. The looting is remaining. Is we need to style this, but it So for that I need to go toe. It goes to court and I'll access the burden style by writing the I d on way have given a class. We just be d n under hyphen Boo. So you're in the glass which we have given button I phone Booth. Okay. This is the very quick since this last. So now I like the properties banking on which will be Puerto for you be five c night and the color of their text will be white So f f f and then the world will be 50% Let me see of this And let's forget about that and check So you're as you can see we have ah, even the styling for Britain. But we need a whole What effect? Something like this. So for that, I would go to reveals for the airport. I would not be this plus And you know that I will write forward so that we can give you what effect go back it on will be transparent on we need a border which is one pixel solar on the color will be so e beef. I've seen it. We need their text color. It should be seeing food. You c five c night. Let's save this and this second the closer. So as you can see, if I have forward on this button, you get an effect. The B G is transparent and the text the letters that the loan which we have given now if it's during the speeds, as you can see it, has left the line. So we need everything should be in the right telling. So the least we need. Everything should be in this entitling. So as you can see a all those I'm saying that the line and that is a please in between this . So that's change the media creating styling? Well, yeah, I will write as who died the name a job on the child of he will write image tag because we need spacing between the image again. So margin top will be 15%. You save this and let's go to the browser. Who is against Ah, you're being gotten? Imagine talk 15%. Now we need to make this intento for you. Copy this. I based it on your I like now this battle is in the center and now we need this a chart to be in the center. So you're we already have a class. What I'm going to do is I'll, Atacama and I but that idea who? And it's on. Let's say this and let's go to the No, sir, as you can see this Ah, we have a leader styling. I spot our design. Thank you. But as you can see this. But this is also exactly the same. So this is how we have completed since full section. So this is it for this video, and I'll see in the next. 16. Lecture16 our latest work: welcome back to another lecture in this video. We're going to create our leaders world section if you look at our final page design. So we have four projects in each row with an image and some description. And if I hold on the image, you will see a nice effect with an eye that indicate the user to click for some more information. So we need to create this section. So let's go to vigils to the airport and your index start html after the whole section. We need to add a coming as well on we need to They're coming work and okay. And your we need to give attack section with a class which is equal to so they with an i d matiz it put it to work and lose this section type and inside this really take a day with the class which is equal to container and in turn we we take one do with the class which is a doodle, and inside this room we will take a deal with the class which is equal to all this will fill the entire row. And inside this we were date at stupid brother title which is I would leave this work and then we need a pitak for this text on In between. We need an it's our tax. So a job, a line one stone left on which we can take 50% or 30 person what they were. You feel like you can take it. I'll take 30% and I received this and let's go to the browser and check. So we have got this section, that title HR horizontal line and some description. Now we will add this project's open. So let's go to Richard Studio food and we will take one more draw. Predictive class, I don't know. And in time, just over unique four columns because there are four projects. Okay, so in medium the wise we wanted to so four projects, but in smaller ways we need to be wanted to so believe, two projects. So we need to act two classes. So for me don't be ways we will let all MD City So three plus 36 expressed 39 and then last April. And for we dont want this fall I've been a same hyphen 66 plus six point. And inside this we will news starts there. So if I goto step Lipsyte on the side thank God. So you had other different options off card which you eat and use, So I will be using this option. So there are a lot of other options. You can just go through it for your reference. What I'm going to do is I'm going to cop it this instead off writing all this and it is going to copy this food and you're able based it and this style we don't require. So remove this on. Inside this I lead one more class, which is image I m g Flute and the source. I will add Manger's Slash building and all the time. Also, I beleive anything. So let's say this on. Let's go to the browser and check So we have added this first limits. Similarly, we need to act three more cars. So you taught me this. There's on based it the ice who three times saying this and as you can see, we have added three more images. Now we need to change the name of the image. So for that, I'll come here individuals to the report on the second image which we are going to use is fair or Dagwood beats that. So you're pretty fan on 30 minutes will be city boredom is will be. It was Let's savers and let's go to the browser and check. So the other four images which we have added now we need for more images. So you're began for business entire rule and I'll paste it the lotus. And if I save this and find Goto the browser propensity, we have added four more pages and then we need to change the name so name all day. Meat is still really changed in the the 1st 1 This speed 2nd 1 is frank toward one is Golden Date and the 4th 1 is bold. Think. Okay, let's say this now. You can see all these images are being added. But in the attack, I have not even the very clean so did back well indeed being save this and let's go to the browser. So we have successfully added all elements which are required for this hourly like this work in the next lecture, we will we are going to style the remaining thing. Okay. And one more thing which we need to add Is this overly so we will and that they were as well. So let's Orban this it'll and yeah, we will That this image tag reductive inside this well, either class which is work life in my AMG We need to close this. They attack in practice on once. We need to add this Look OK on then. We need to our it died in the image. So I ate. I I will have the attack Charlie F which people do as and that had close this attack so need to practice the attack. And I would place strict here for there was a small mistakes. So I have rectified so often Shift f Okay, do for mental Now, after this image we need to add are due for overly so their classic ones too. I am g or running on when he took lose the stoop that so similar living in tow. Add this bill with eight times on this image of elective back on all this card images. So I will do it and you also do it in the rest of the images. So I'll see you in the next video where we've been It's time This section the I will leave this world section helping. So this is it for this video and I don't see you in the 17. Lecture17 our latest work styling: Welcome back to another election in this video, we're going to complete the styling for this project section. As we can see in this final pitch, we will add the overly effect on. We will add some spacing to our projects. So as you can see, all the stars are realistic to each other. So we need to give some margin and we need to give some batting for this section. So let's go to style dot CS is on after this rule section. We need to either coming for work and here I will access the I D, which we like given which is world on. I'll give Friday, which is 5 p.m. don't open Porto and from left and right zero Okay, that status. And yet we got disparaging. And for the star, we need to add a global style. So let's toe at the top and your people out of global style for cars. So I need to write start, start and I give margin bottom 15 fixem. So let's save this and let's fulfill a brother. Now you can see we have ah given the margin 15 picks of severity of space in between visible now we will add the overall effect. Okay, so that in style to Dr Years says we need to write the idea work and the class which may have greater work. I felt image on image. I felt overly. I just need to check the spelling so well, car front image on the second class is image. I felt a little I injury. I felt overly so let's so now we'll add some position so position will be absolute on the other property will be stopped zero on from left. We need zero. Let's say this and we need a background. So by ground RGB and the value will be black l s 00 comma zero on opacity. We've been zero point by that TV's and let's pull with the those around They fished this So we need to add some more properties of Soro but would be 100% and right will be 100% and we need to add one. No class work dot Work, my friend image. And for this, the position will be relative and let saying this and let's spoke to the browser. But now we can see the overly on the base. And now we need to give the I I open on this image. So let's give that So you're I like background, which is before you do, You are in on. We need to get the park. We need toe, dot, dot, slash images on the images. I dark beings. And then we need to, Right? I never knew a little bit. I get on, I think image. And then we need to give background. Repeat. No, the beat on, then. Baghran Paulison Background position will be center center. Okay, that saved this on. Let's talk to the browser and check. So here we get. Be the image in the center of the limits. Now we need to give the opacity as it'll so pass City will be zero on that index will be zero. Now, we need to give her what effect on this. Let's not be this class and Advil work on there. We need to give the rapacity as one. Um, serving bets will be one as well. Let's in this and let's boot with the builder. And if you can see if I hope we're on it, it shows that I happen. But the conviction is not so smooth. So for that we need to add a competition effect. So you're like condition on give Tom the central, all the elements on 0.3 seconds. And the effect is in Zim. Oh, okay. Save this and let's go to the other. Now, if I hold on this frequency, we're getting a nice effect. So we have successfully computer the section. Only one thing is remaining meaning to make this centerline. So then do it. It is very simple for the world Sidewalk builder. Tighter. Well, we can add a Lastex center that saved us and this really couldn't move. So now everything is in the center. And if I string this speech so in the mid anyways, there will be four projects. But once I hit, the small alleyways will be pulled projects. Okay, that's what I have written. The class fall I've been sm. I found six. And in those ex first Morley ways, there'll be one in majors. Fully only one. So this is it. We have completed the section and I will see you next 18. Lecture18 why section: Welcome back to another lecture in this video we are going to work on why section So to work on this Let's go on. We judge to be a port and we need to go on index dot html file. And after this work section, we will either coming. So you're leaning a ladder coming as what? And then we need to up with this and based it year on year. Well, right ends. So this wouldn't start and okay, but now again, we need to take section tag with an idea, which is people do, but and I close this and inside I would take a deal with the class which is equal Dupin dinner. And then we need to day today with the class, which is a total. Now we need this title along with this HR bag and some text you. So for that, I will take a day with the class which is equal to all and your I'll take That's true tag. And I'll copy this line and I will be a studio. And after this and it taken hr tech, we need this hole is underline Toby in the center, So I know. Write a line left here, I will only give the village, which is equal to 30%. If you want to increase of its you can. I don't think turkey places. Then I'll add a P tag and I will probably this text and I will pay studio. And that saved this and let's go to the browser Check three. Finally fresh. And if I scroll down here, you can see the section is added on. Let's go to visual studio support and then we need to add this section of your So so this is divided into three parts. Okay, so, well, divide by three, which comes to four. So we need to take Colin before problem before and pollen before. So we need three problems. So well, divide by three, which is four. So we will take one moral. After this is over, you will take one model and then we will take a day with the class which is a football MD hyphen. Four. Then we need this. I can So I will go to fund awesome website and I search for the sytem. So in the items, having such support comes up. So I need this. I think so. You copy this and I based it. Yeah, and we need a bigger size. So your I gave a plus as C I found the X. Let me see this. And let's go to the house on, as you can see, be good. And I can you. Now we need this title. So after this, I can I will add edge to take iron. I'll cope with this and paste it here and then I'll take a B tag and I'll go up with this text. And I hope a studio an option shift s too far, Mentor Ford. Okay, let's save this and let's go to the house and check. So if you can see, we got this section, and now we need similar toolboxes. Okay. Same. So what I'm going to do is I'm going to copy this column on the stick ways. And now we need different items so and different text. So the item will be lying chart, So I search for a line chart. So this is the only Eichmann. Well, I in charge really popular this and I'll replace this. It happened with lane check and then we need one more items which is award. So make me so much That award. We need this, Aiken. Sorry. Corporate this like, and I'll replace it with this. Let's say this. Ah, and we need to change this title. So I'll copy this. A man based? No, I might be strict. You net music this and let's go to the browser and check. So we got all the three sections, but here, I need to give the sighs, Effie. Definitely. Except Mirage F A Infantino. Let's save this. And now we can We have got this. Three sections, three boxes. Now we need everything to be in the center. So for that, we need to go to open Dana and your I need to add at last text a friend center that save this and let's build with the closer. Now you can see everything is center lane. And now we need to style this. We need a background. We need this fellow is okay. So we have place all the elements, the styling part we will do in the next lecture. So I'll see you in the next video. 19. Lecture19 why section styling: Welcome back to another election. In this video, we will complete our wife section. For that, we need to go to our state, starts here says, And your I will add a comment. Why? And first I will add the background for our section. For that I really need to access the I d. So for that I write cash and ideas. Why? And first let me give the fighting so batting is fine. I am from top and bottom on zero from less than day. And then we will add a background, which is F six F six F six over here. Let's save this and let's go to the browser and check. So yes, I read the background. Now we will work on the phone. So, as you can see in the final page or foreign color is different from what we have now. And we should have a fighting here. So let's go toe style. Start CSS on. Then to access the FAA class, we need to write No, i d as y on. Then, start effect class. Okay. And inside this we will now the color. So the color for our branding is fully be five C nine and then we realized some padding. So fighting will be 15 pixels from top and bottom on zero from left. In fact, let's save this and let's go to the browser and check. So you relatives, we have successfully added the color and some planning for this I pins. So this is how we have completed this section. If I sing this speech so in the medium on in the small device equal look proper because we have kept our letting center line so we don't need to write mediocrity. So if I scroll down so as you can see, this section is looking good. So this is it for this video on. I'll see you in the next, will you? 20. Lecture20 customers section: Welcome back to on a daily lecture in this video. We are going to create this section for customers. So this is basically a customer testimonial section. So to work on this, we need to goto reveals to deal coat on inside index or HTML you're after. Why section We will add a comment as the stomachs and I copied this moment. Another baster, You're and I like ends. So we start from you and NZ. Okay, in between, we need to write the code. So first, we will take the section bag with an idea which is equal dope. Estermann. And then we need to close this section tax. Then we need to take a deal with the class which is equal to container. And we need to close the stack and we need to take a day with the class which is equal doodle. Then we need to close this deal back then. We need to take a day with the class, which is a point to all that takes something that'll we need to lose their day and press enter. Then we need to update its to tag and inside this will retake the title. So albopictus That's Thomas and I'll is still here. Then we need a horizontal line. So for that I take HRT and I said public close to 30% and I close this like Then I'll take a pee tag and interned a pitak. We need this line, but a copy this and then pasted in between this feedback. And let's see if this and let's go to the browser in check. So we are getting this The stomach tighten what is on the line and then don't you text? Okay, now we need everything Toby in the center. So as we did for this section, we will add a class for this section as well. So I will add a Lastex Ivan center. This will make the content in the center. Let's go back to browser and check. So you know that this we're getting all look content in this things that now let's work on assistant spot. OK, so this is the Barossa to work on this part or to achieve this section, we need to goto bold step official website and we need to go in the competent and in the document. In the documentation time, we need to go to confidence. And we need to Contreraz and your other different example off the road so you can just have a look. There are different types of those. Oh, so the one which we require this this one. So this is the one which has everything which is required for a project. Go into enough writing all this. I'll just stop with this food and I'll get back to my job. So, people, and here we need to take one more go deal with the class, ro, and close the stiff time. So based, affordable task, poppet. And your we need to change the idea. So I'll change. I little Popes. Then we don't require this previous and next button, so I will be moved us then we don't require this section. Instead of this, we will required ports open. So for that, we need to go to both stepped outside and inside the content. We need to click on typography and we need to store down. Once you scroll down, you will find this blocked ports. So we need this in on project. So what I'll do is I'll Poppy this and I'll go back to, but just for their food. Let me check again. This is the court which required So I just copy this and I go toe it was to the airport and we need to revolt this image and this, Dave. And we need to paste a black book. Similarly, we need to remove this image and we need to based up. Look, they're also we need to remove and we need to pay stop, block, and then we need toe inside. This day you need to take one, do with the class, which is it for doodle. And I need to close this deal. But this closing live and I need to pay stick. Similarly, we need to copy this and there any toothpaste but this Tic tacs and Hastert here again on the 3rd 1 minute back east. We need to get this losing their tax and pay strict here. Now we need to format the option shift. This was for makeup. So now you're there is only one stop. Oh, toe, we need three. So I'll just copy this basted basted. You're also we need three. I just pieced this and you're also beneath three. If I save this and if I go to the browser and let's secondo upset. So your other three block courts, which are visible now we need these three things to be side by side, but that we need to go. So vigils for the airport and you're in the first block. Quote. We need to add a class, which is call. I have been MD hyphen food because we need three columns. Support has on him. Paul hyphen MD happened food. So you're also in the second blackboard. I will act this in the 3rd 1 on fire enders before plus 4 +88 plus for wealth. Okay, so the total should be well, And in the second no, we need read this, Paul. I found MD happened for actors and in the third section. Also, we need to see him. So do you have any toe Hastert? You're going to paste it on the opening, Mr. Let's save this and let's go back to beach. And as you can see, the Corozal is also working and our courts are side by side, as you can see you. Okay, so this buttons are in blue color Where is in artistic this way so that we will go in the styling section, which is our next lecture. But before that I will add one more glass, which is for this border. So for that, come back here and in the second Blackpool Real and the last border my family left That will help us to are the border on the left side. There. I need to Mr in the first black court we don't require in the second and third week waggle Similarly, we need to idea on the 2nd 1 and then the total on on the first. We have missed this. So you're like border left. Save it and let's go to the buzzer and check. So you notice, Uh, you have successfully entered the border. Now we will do some styling. In our next lecture. We will add some padding. We will make this, but in some blue. Okay, So this is it for this video and I will see in the next video. We'll take that and nobody 21. Lecture21 customers sections styling: come back to another lecture in this video. We are going to style this section so all the elements are being added. Now we will are some padding for the section and we need to style the arousal indicators. So for that, we need to go to visual studio Cold. Um, we need to go through style, start CSS. And here we need to our document. It is best Imus and your I will exist that I d because estimates Yeah, and I will give up fighting, which is 5 p.m. from top in bottom and zero from the left and right. That saved us. And let's go to the house. So as you can see, we have added the padding and it looks much better now. We need to add the styling for that. I was on indicators for that. We need to go to index storage female and where we need to access this and life. So first we relaxes this idea. Then this class and then elect we'll go to style largely assess. And first we need to access the I. D in the class, which is frozen hyphen indicators. So let's talk about this basically we're and then the life and your I will Axum magic. We don't need to add. Imagine to L. A. But we need to add a background so background, which is art in dollars so more you be five c night. So Well, maybe five. Nine. Let's say this and let's go to the does it So as you can see indicators in blue color but the styling is not that great. So let's because there are they are inside this. But I was also we need to give some magic the let's go to visual Studio port. Okay, we need to access that I was in in a class. So the Arosa in her class is here. We need to exercise this. So begin first access the i d. With justice too much. Then we need to access this last that I wasn't enough. Let's start with this. Be a student here and now I will give imagine from bottom. So bottom well, still 50 fixes. Let's say this and let's go to the browser and check. So as against we have got some margin. But still some styling is remaining, so we will finish that. And now we will act Imagine too actually indicated So what we can do is we'll top it this on well, placed it on a remote us alive We don't require on this back. Don't the more just property background then you're I will act Imagine ison boredom which is equal to minus 50. Big sense that saved it And let's go to the buzzer. But I know I can see we have added a margin on that is a good space If you want, you can minimize the space by making it target pixels so it doesn't spoil your nude if you want a little if you want Ah, more space than you can increase the value here. Okay, so we have stylist arousal indicators. So the size off this indicator is not as for our design Terrific unsee. Our style is very sleek and you're just too much off fighting. So what we can do is we need to go to with those to the airport and in this class we will. I love property called border Zero pictures and we need to save this and we need to go to closer. Right now you can see your style is matching too. The final page tiling. So we have successfully completed the section on this is it for this video and I was the endemic, but 22. Lecture22 pricing section: Welcome back to on a daily lecture In this video we are going to create pricing section But this we need to go to Israel. So they're poor and we need to go doing They start html and ah, further customer section. We need to add a coming and you're going to write prising And that a cop in the stomach I'm pasted here and yet and here I light aims on in between people write our full. So first I'll take section tank with the I D, which is a Quito phasing you took lose this stack on. I'll take a live inside this with the class which is equal Dupin dinner and then we will take a deal with the class Which is it going to little And then again you will take a deal with the class which is a quadruple which takes during title and you know we need to write its to attack In time. We will add a title which is facing I copied this and I'm basically a and then we need Ardizzone Delaine for that we need to write at our tag and with will be 30% to close this time and then we will add a pitak. So I'll cooperate this lying and I'll pay strict here and I other class, which is a totally let's say this and let's go to the browser in check. So as against see, we have added this section with titans horizontal line on and this affect let's go to We went through the airport and make this entire section incentive. Before that, we need to adhere. The glass was just fixing that saved this and let's go to the brother and yet it is. Our section is now in this thing. Now we need to add this for this we will new start, so we need to go to adjust to the airport and I'll take one more roll. So you're dealing with the class which is equipped to rule. And inside this I will take a deal with the class. All I found MD I find food because here we need three columns. So four plus 48 plus 4 12 So well, be right back three with this food. No, there. We need to. Inside this we will take one dough with the class which is equal to card and inside this do we would take? I live with the class. What is it going to do? God, hyphen. I did. And we need to close this time. Dude, I and our headed is basically And then after this, we will take a Newell tag. Just a Nord Erred list with the class Jay Z, Quito, this Typhon group and then we need to take one more class list. I found I found flesh that fleshes out. Imagine from left, right, So important. Now we need to close this. You were attacked and inside we will take a lighter with the class, which is equal to list hyphen. Item on inside this elect, I I will write Abundant, which is two pro fights. Helicopter This and I'll based it were. And this Number two, we need to be bored. So for that, I will use a strong tag. I got this and I'll pay strict here. Let's say this and let's go to the browser and check. What are we getting? So we have successfully added the car. Now we will add the remaining content like this. So for that we need to go do this to the airport and help our business on how many content ? Harmony alive we need to take one toe. The 457 So we need seven more in life, isn't for 56 and seven and we need to change the stakes, so I'll just copy others. Well, let me play that manually. Month on there you can take dollar or what they worked out and see you want you can take back. This is storage on this This dang GB this content you can modify according to your landing page and you re bandwidth one f b a town. Then we have upside integration. Then we have basic customization. And then he emailed support. You mean support? We're seeing this and let's go to the browser and check. So we have added for this basic plan. Now we need to add for standard on problem. OK, so what we can do is okay. We need to add, but and also So first we will add the Burton The sign number 10 for that meaning after the U. S tank, we will take one does with the class which is able to card F in body, and we need to close this still attack and inside we will take a button. So for that we need to write button type will be Martin on class which is equal to BD en on the second class will be between I found out line and full and then Bt in F in law it took closes but intact and inside we will I sign up. Let me say this and let's go to the browser and check So we have successfully added a button as well. Now we will add two more cards. So for that we need to poppy this parliament and pay strict wise. Okay, let me see if this and if I go to the browser As you can see, this is a basic plan. This will be standard and this will be cool. So we need to change the text a little standard and the cesspool. Let's say this So as you can see, we have added the text. So I am not changing the content of you can. If you want, you can just change the content according to your requirement. But this is how we can have the content and the sign up button. So we have placed all the element for the section. Now, in the next lecture, we will style this pointing. We will give some fighting for the section and we will give some background color for this title, and we need some spacing as well. So this is it for this video and I'll see in the next video. 23. Lecture23 pricing section styling: Welcome back to on a elector in this video. We're going to style this section according to our final pitch. So all the elements have been placed and now we need to do leader styling part. So let's go toe, which is for the airport. And instead he starts the essence. You need to under coming as surprising and your we need to give the fighting for this section. So I access the i. D. I was just praising on your we need to go padding from top and bottom FYI, GM and from left Vape zero and we need to give a background it just f six f six f sets. Let's save this and let's go to the browser and check. So we got this. Take a little background. So now it is looking good and alternative gray color background. We have given for this for sections. Okay, one is good. Anyone is white One, is there. Okay, so no. Uh so So now we need to change the background color for this headers. So, in order to access this card header class, let's go do it goes to the airport. And if I go to index dot html. This is the plan header, plus Soto access this. First we need to access. The idea was just praising. Then we will access the card class and then we were like Sisters are headed Plus So let's go toe style largely assess. And first we will access Dai Ichi. Then we would like since the class star. Then we were like says that class. Hardheaded. Let me check the spelling, uh, hyphen. And then we need to open the curly braces and your I will give the background color, as e 66 is. It's and the coolest off the phone should be quite so fellow and stay safe. Let me say this and let's go to the browser Check next the Festus. So the background color is six. G 16 16. Let's say this and let's go to the bro's it. So now the background color forehead and has been updated. Now we need to change the middle card head of style. For this, I will add additional class, but only decided. Let's go to index dot html and yours is the standard better. So you're I will add additional class, which is standard and now to access this class, we will first access. No, I d was just praising. Then we will access the card, Klaus. And then we will access the standard plus and your I will give a background for e B five c night. Then I will increase the phone. I'll increase the phone size to 1.5. Yeah, Then I'll increase the padding by 15 pixels from top and bottom and zero from left in vain . So let's save this and let's go to the browser and check. So you're Attar's. This looks much better and this is stand out now. I will even for effect on this two cards. So for that I will access the I. D was despising then God, dog head and I late for work and we need to copy this background fellow and I'll paste it. And if you can do with this, you can see that color has been changed. Now we need to have the time to send effect as it is you. So Judd, in the main class have a bladder condition for all the elements on. Timing will be 0.2 seconds and the effect is easy. Let's save this and Let's go to the browser and check So you find the wood on this side of you can see that the Lenin benching. Now, if I minimize this Oh, are sitting down to mobility ways You can see all our card is looking much better and the rising section has been completed So this is it for the section we have completed Uprising In the next lecture we will complete upon take a section It is this so I'll see you in the next video Till then. Take that and buy. 24. Lecture24 contact section: I'll come back to another lecture in this video. We will create contact a section. So for that we need to go. It was to do poor and here I will add a comment going back as okay and then we need to add a section tag puppet. First, I'll just stop with this and I'm Hastert on your arrival right and then in with me and we would like the cold so section. But then I d, which is frequent. Let's close this tax and inside during the Taper deal with the class, which reports do contain a and then we will take a glass there with the classroom and then do with the class which is going to it's the entire group. Lose this and then it's two day. And in its two time revived contact, it was okay. And then we will take a pitak on. We will prop it, this line handing. But being we need what is on the line toe child bag on, but will be 30 person so 30% on. Let's close this day. Let's save this and let's go to the browser and check. So as you can see, we thought that I turned this started on the line and the subtitle on this We need toe boom center. So for that we will add next iPhone center. Let's seeing this on Let's go over the brother. So as against e tighty and the subtitle and that's our or down the lane in the center. Now, after this row, we will take one other grow. But before, before that data farm tag and in tired this wintry day Pedro, they glass. It bolsters so on inside the room we need to take motifs off calling basics and problem this. Expect er's. As you can see, your this section is Do I didn't do this is stalling visits and this is for linguistics. So few of the figures will come on the left side on the remaining with someone that I'd say so we need to move the regions from the airport and you know I will. I a glass which is equal. Do call Ivan nd hyper six against six volumes on inside this I will take Field said. The SEC reports two plus the glass it close to Tom, I think group, and we need to close this and intact this. We were taking put type, which will be email, and we need a glass. But it will do farm, I think control and the class will be from, I think control. Evan, listen, if you want, decides to be if you want the input sense too big, you need to take from control energy. But I need it. I need small one. So from control, then we need I d So idea was to you will and placeholder that spirit being in it. Then I'll close this and protect. Let's Inglis and let's check in the browser. But Julia So we got this input. Uh, three email. Now we will add name on subject, ready for business based in here Institute No type will be next, but we needed for names. So I d will be name snooze for that will be name. And when you do close losing protect. So that is that your like this? Thanks. I d is subject are in place. Holder will be I didn't subject have been Let's see this and let's move to the gun and check. So we got all the three input feeds now on the right that they need uh, messaged and submit. But it so you're I will add one more problem. The last is equal to Paul. I think MD happen six and again we need to feed sex. So I talked to this and I'll paste her butt and stood off input. We will take text 80 out. Yes, I do know this. You're like next media and the type which is next class you required from I've been told. And Palm I've been booze happen isn't Ivy Stool message and play sort of that will be message. Okay, lets lose this. Take Stadion. So now disclosed he now we need a button so But then I will be somewhere Class is required . So be TN VT and I fin outline in full and Bt and hyphen block. We need to close this but intact and we need to write something. Let me say this and let's go to the brother. So as against the all this feelings have been added. Now we need some idea for message like stadia. So lively I do which we couldn't do three. Let's save this on. Let's fish rules so but not rule. So now the hiatus people Okay, And now we need I'm spacing for this section. So I need to understand seat and year. I'll add atomic as on back and lose this coming on your arrival Oh, access the i d. So our ideas contact and I will be the fighting the purple If I i d m and from dope in water and zero from left and right, Let me say this on It's the fish. So as you can see, the batting has been added. So we have successfully completed the section toe. This is it for this video and I have seen that next 25. Lecture25 footer section: Welcome back to another lecture in this video, we're going to create footer section. So for that, we need to go to visual Studio court on We need to go to index dot html and after the contact section, we need to add a comment. As for the another, copy this coming and I'll pay. Start here and inside the swing retake section tag. But then I d which is equal to foot. And that includes the section Tech and I take a deal with the class which is equal do container and I close this too. Then I will take a do with the class it is equipped to grow, and inside this we will take two problems. Okay, so this things this section is divided and took to section 1st 1 is divided into eight columns and the second is divided four problems. Okay, so for that we need to You were doing with the class, which is a protocol. It's an MD iPhone it and in small. Otherwise I need to, uh I need to call him Toby degraded and do six farms. So one I've been sm iPhone six. And inside this I will take its through Dank and I write about SK Technology. So let me copy this and I'll pay Street here and then I would take a p time. And I hope that this text and I'll baster yeah, inform it and to press option shift. Then I will take on a dopey attack. And I raised this lane some more text. Let me say this. And if I go to the browser and check our base So here's the section which is added, No, we will add this Aiken's so in the about section on the top we have this I can so we need the same year. So what I'll do is I go on follow section and this is the U. N of each. I need some copy entirely win and I put the foot of section. And after this Pitak, I'll pay straight here now the same tests. And I could do that, Rosa. And if I take fish you can see on Nike and have been added, now we will work on the right section. So for that we need to add another column. So, after this column, I mean, we need to take one more day with the class, which is equal to call. I've been nd iPhone four, and for small devices, we need call iPhone, sm iPhone six. Then we wouldn't take. That's to Dag and I would say, See, look and then people take you will die and entirely will think we will have a light act. And inside the ally I will take this Aiken, for I can we need to go too far in Dawson and you know, we need to search for Matt. So I did search for map. And this is like in which we need so any copy this I can on I'll based her. Yeah, on before that I will take a beat that because this needs to be it happened b tech. So Pitak. And after that I can I will take this text, which is actress. So I write interests, which is a going to and I think this taste Let me see of this and let's go to the browser and check how it looks. So you can see we are getting this item under texts. But we don't want this to remove this bullet point. We need to have a class in the U L as class equals two list iPhone unstable and then many tooth. A strong ties for the ICANN and address. So I tasted here. Let's save this. Let's format the text option shift efs before mental boards that saved us. And let's go to the so know that as you can see, the bullet point has been removed by the class, which we have answered. And this part is board and the the meaning is normal. Then we need to add the email. So for that and for printers and I tag and I'll be stirred here and we need to change diets . And before that, I write emails and you that email is and four in full and great. Some random emails dark home, and this should be in pretax. So a HIV effort balls to as it's and this practice and pastry here, and we need to change. I think so. For tired, I'll search the open as email and I need this one. Oh, maybe you can take this. Let's take this one. And I got with this, in any case, stood here. Let's see if this and let's build with a browser and check, then this is the phone. So we need to add the phone to let copy this away and paste it here. And, you know, we need toe change to phone, and we need to add the number four numbers. So let me remove this. Let's add this one number and you're going to change died. So again, Aiken, our lightens and your l search for phone. So you take this. I feel free to take any item you want. Espo. Idiotic Wedeman. There are a lot of other options before, so you can just take it, taste it and save this and to do the browser and check. So this is the phone with Jeff addict? No, be able. I have discomfited section so but that I will add one more row after this room. So let me check where the Ruiz ending. So let's close this and we will add one more. Oh, Class, which is quite beautiful. And then we will take order with the last fall which will take time to go. And then we will add and copy and we need to add this year. So when did Wendy Let's copy this and let's save this And let's go to the browser and check . So just copied it. Text has been others. Now we need to stay in this section as but our final page so that I will do in the next lecture. So this is it for this video, and I assume that next with you 26. Lecture26 footer styling: Welcome back to another lecture in this video. We're going to style this photo section for that. We need to go to regards to people and still not see a sense you need to. I had a coming worked out on. We need to access the idea which is and first we need to give the planning. So I give the padding as to by the end and Gino from lifting. Very. And then we do the background Hillary. As for 8 44 then I give the color on color as f f f means white. Let's see if this and let's go to the browser and check that you can see. We have added the background we have added. Depending on we have seen the far nobler to wait. Now we will change this stellar, but that we need need to goto we just to be aboard and you're ill and I d what time and we need to access the eight time and then your we need to give color, which is a little Steve this and let's go back now. As you can see, Mr Lin has been changed to wait with just matching alert status now you can t this point very close to each other, throwing in some space. Let's go boom things to do before and who access the foreign for some. Plus they will post access the idea which is put them. And then that porn doesn't Glass was to start FAA, and then we will give a padding from top bottom will give zero. And from right and left, we will deal five picks. It's OK, let's say this and let's put with the elders that you can see we but a space in between all the plants. So now if I sting this page, you can see this is left the lane. So we need everything to be in the centers for that illegals and fix them India Greeting the year Alexis that I d with just water and property is Thanks, Elaine Center. Let's say this and go to the brother. And you know, as you can see, everything is tempted. So this is how we have computed with the section. Now, in the next later we will on the animation. You up it. But this is it for this video. And I don't see you in the next to do 27. Lecture27 animation setup: Welcome back to another lecture in this video, we are going toe do the set up for animation. For that, we need to download who fights. One is animal torture cases and the second this ball gorgeous. So for that, we need to go to Google and search for any minute. She is this on, and you need to search this Speak up Dark bomb. And he made life. NC is this and we need to click on this and your We need to click on an image Darcy asses, and then we need to download the file. So go download a file. We need to play con fold. And this is their download. But the pope Sony Meaning totally conscious. I want to download this. We need to goto time zip file. And from that we need to expect the fight. And if I open this file, I need and he made Dr Min Dark seizes. So I'm going to a couple of days and we need to goto I would before you did. Oh, my for lettuce bootstrap LP in this year's this boulder. I'll Christa. Okay, then we need to search for world art is so well Jesus, and we need to keep on this. So these other animations, you can just have a look. Download the file. We need to goto Jack picked up. So if I take on this and here is the full you need to download, download this file and then we need to extract. And here we need men while Darkman dodges. But I'm going to do this. I'm going toe create a new folder on with the name Gs, and I like this by it. And then we don't require this to foreigners. So I'm going to delete all this next week, knows this and no, we need to go to index down. It's teeming. And And the link that so, in fact, we're gonna help you lose. So you heard of this? So we need to act bristling for enemy Dorsey's is. And we need to, uh, and this stripped to our indexed our genes link to see Asus and Emission library and link and activate wild orgies the first time. It probably this link and I don't believe once the billboard Yeah, and in the next RGs I'll go at the top and you're really baster. And this is any make dark men dart. Seems that's okay on. We need disaster taught me this and that. Basic you. So this is the five years to our Dutchman Dodgers of electricity. This and now they have successfully added buildings on. We have downloaded finds, which I require. So in the next lecture, we're going to start animating our beach. So this is it for this video and and see in the next year? 28. Lecture28 animation: I'll come back for another lecture in this video. We are going to any made our webpage. So if I go to our Dodgers website So these other steps which we have been okay, we have added buildings. Now you given animation to a particular element being into other class. Wow. And then we need to write the animation. They if we want to see a different panel animation, you you just need to click on this animal Dark seer says if you click, you really will build this website. And here there are different type of animation. You just need to flick and see what kind of animation you want. OK? And you just need to copy this and the mission name and you just need group Easter. Yeah, after well, close. Ok, so better advanced options also like they don't want to you listen, just animation duration date. Our Billy DeLay before the animation starts the double absurd this sense to start an animation there Tower iteration the butt off trying. The animation is depicted. Okay, but this is how we can add this Andorrans options. So now we will add animation to our weapons. So for that we need to do and they start extra Yemen. On first, we will give animation. So that left side, then we will give any mission with the right side. So So this is the left side problem. And this is the right checkpoints. So here we need to add a class. Wow. And the animation which required is frayed. Okay. And then we need to our data, I think. Well, I found we live, which will be one second, um, data iPhone. Well, hyphen do addition. Well being do in seconds. Okay, collecting this on let's go to the browser on if I defensed us. So once I refresh the speech. So this animation is not working. So I went toe the official website and I found that the witch in which we are using is the latest one, but we need 3.7 point two. So what we need to do is we need to top it this link and we need to go to with will. So the report and it on on index storage demon. We need to paste it. You're OK. And we need to commenter this link so you come into it out. So this enemy. Darkman, Darcy says, is the latest one, but we need 3.7 point two words in to animate Darkman. Doc says. It's let's see if this. And now let's go to the browser and let's say and let's deflation. So now, as you can see, the animation is working. Now this left side column is animated. Now we need to animated every 10 side with. So let's put which will still be a cool and if I scroll down. But this was the any mission we left site. But this was the left column. Now this is the right side column. Okay, so you're we need to add Wow on. We need to add last speed and and data. Whoa. I found delay, which is equal to do 1.5 seconds of it. We need this block. Should appear after this one, so this will appear after one second, and this should appear after 1.5 seconds. Okay, Now that Ah, I said, Well, I found beautician, which is a bulletproof two seconds. Okay, this will be see. So let's save this and let's go to the browser and check. We fight it fresh. So first, the left hand side will appear. And then this will appear after 1.5. So that is the reason why I have I did 1.5 seconds. One second and then 10.5 seconds. I could say more then this will appear. OK, so now this stool boaters are being animated. Now we need toe animate the Spartan, this Arab. Okay, so I need to add a class. Okay. So, yeah, where is my But this is the butter. So you're where there's a row class, we need to add a glass. Wow. And the effective swing and data. Wow, delay will be two seconds. So let's save this and let's go to the browser and lets the freshness. So, as you can see en suite of fresh, this do things appears. And then this adult swings Okay, so there's this one second, 1.5 seconds and two seconds. So we need to get some delay for every an immigrant element. So you know the effect. OK, so now we will add an animation for lower section, but that we need to go the rivers from the airport and we need the whole container toe animal okay from the bottom being in, well, a class in the containers. So wow, made in and data slowly fading up Because we need to make the animation from the bottom so they have all delay will be 0.5 seconds on duration will be the dog, while education will be one sec. Okay, so now let's say this and let's go to the browser. As you can see. Ah, literally fish. This appears and once I scroll down, you can see fails from the bottom on effect Looks very nice of it. So now we need to animate movie are so for this, we will animate in such a way that this left problem will appear from left side and this right problem will appear from the right side. So for that, we need to What? We're in blue section. And this is the first problem. And this is when first column we will add. Wow. Plus And then other class. This will be sorry Didn't lift on. Did, uh Well, the live will be 0.5 seconds and duration again. Be 1.5 31. Say no. We need that. I do it. So wow, feed in night data. Wow. Delay will be 0.5 seconds on the dark. Tradition will be one second. Let me say this. And let's move with the brother Athletic fish. So I was against it like its mission speech. So this column comes from the left side and this from the rights and let me refresh again. Okay, this looks stood. Okay, Now we need to we need to enemy or late this work. Okay, so for that, we need to go boom work section and you're in the container. I will add a class Wow, and then say in Yeah, and let me see if this and let's go to the brother and the fresh the size again see its food from the bottom. And then we need to field in all this project one by one. It's ah, but that we need to Ah, the glasses in all this guards. Or you can add it last year. So this is all each column. So your arrival at a class which is wow and fade and and they doggedly how will delay delay , which is 0.1 2nd and we don't need regulation. So again, we need to copy this. Um, we need to paste it here. When? This day double delay will be little 0.2 seconds. This is 0.1 This is there a point toe? Let me show you the effect. You get an idea. Fairly freshness. Okay, so here we don't require this Britain up. Let me until this on. We need the effect on this this fall. Um, let me say this and let so yet, as you can see, if I did fish that any fish again. So this battle freezing from the bottom on After that, you can see this project feeds off it. So really complete the entire section late. Pick up with this on. We need toe based it. Here and again. Data delay will be little 0.3 seconds if required. We can are duration also. So let me check then. They started with little 0.4 seconds in Africa when we need to add the so let me out in every column and then we will add the delay. They don't really I didn't. And that saved us. And now we need toe chain. Start timing. 0.4 seconds. Those little painful We need 0.5 You don't burn six little 0.7 0.8 today. Let me say this. And now let's go to the browser and check if I refresh so as you can see all this project Okay, lets see from the beginning. So the other tests one by one You again. See now it is looking much better once he's told the peach little down again. Now this animation is then for latest Look now we will animate Why work with us? I will animate the entire do from the bottom So it is very simple. You're in the container plus and will add Whoa then fade in It's on the border my required and did Ah wow! Delay will be 0.5 segments. Let's see this and it's pulled the so as you can see me finally flesh. So now as you can see, this animation is looking good, but it is overlapping This dude, if I refresh, you can see this is coming from your but it should come from here. The entire potential should come from here and not from the weight back not looking. So we need to add a CSS property So let's vocal style. Lord, CS is, uh and y section 40 right? Yeah. This is why your we need toe are overflow prop property as hidden. So would flow as Hillary. Let's see this and let's go to the browser and lets the fresher. Now, as you can see, we're getting the content from this play area and not from the white building. That's let me refresh. We've been Now we're just looking much better Now we need to animate a customer testimonial part. So again I will have the same effect from the bottom. So let's go to the next light. Stay in very. You can try a different kind of animation. If you want. You can just go toe their website and you can just set. There are a lot off animations you can try. Whichever the animation you find better. You can just go through that. So, data I've been well, delay maybe 0.5 seconds. Okay, say this and yeah, getting this. Okay, so let's see from the big name then. This is looking good. Now we will animate surprising section. So we will enemy. We will give the effect that's feeding against the lips for this column. This column in despondent But this two columns will appear first, and then this will appear so for that we need to go visuals to the airport and you need to check. There is the rising section. Okay, there is the prize in section. So first column is this. So we will add well and fade in, then data while the live will be game 0.5 seconds. Man, we need toe. Just copy this. Okay? On a you're in the 2nd 1 The second. Follow it, will I? They're deeply will be like once a So if I've tasted here and we need to change this one second on your again. I had this class well, bid and then did I know delay will be zero point by let's save this and exploded up. So we find if this first this two boats appears and then the we're going Okay, so it looks smart and this is the standing note following. Okay, Now we will and then you mission for contact us. Now we will try something else. We will gives Ah gonna take us the effect which is full zoom in. So let's try that. No yard in the Montana. I will add, uh, Klaus says well, and boom in. Okay, then we will and did. Ah, well, delay for, like, 0.5 seconds seeing this. And it's now, as you can see, they're zooming in fairly fresh, you know, resuming. So now there is the only last one remaining the filter section footer section we will again , uh, they did this and dad section from the border. So let's add that. You know, it is not for that on Venus a while. Thank you. And did, uh, while dealing will be, like syrup on five seconds. And you Have you been lad data? I found me our tradition for, like, one second. Why I am doing Why minding their relation here? Because this two sections already there is no time. Okay, boost role. Make If I the fresh so like this an emission are coming in the same time. So we need some time to see the effect. So here I really don't like one second. And your relation will be like 1.5 2nd You can just play around with this. Do you want a custom one step contact us his animated. Then we can see the foot. So let's right, Let's see from the big name. Let me finish. No, this line emitted, then this adults and emitter. Now this one for Lewis will be odd. Our world lead this work, Then who I work returns to estimate testimonial, rising, Then contact. And then so you can just play around with their timings and all. You can just check, which works much better again. So we have added all the animation for our page. And this is it for this video. I hope you like everything which we have done for this project. And, uh, we have completed this project, and I hope you like it. And, uh, we need to practice. There's only one way you can learn things are that this practice? So just practice, maybe a little bit off project and posted in the public section. So this is it for the stores, and this is it for this video, and I'll see you in some other boost, and then they can and by