 I want this. This is pure HTML. So every concept we are understanding with HTML and also with the CSS Now the same page. I want to design like this. I Want to design the same page in this way this way. So what is coming? This is same example only But the unordered list the first time or any all unordered list we apply a background color orange red and for each list item For each list item we are providing a separate background color So we want to design the same page We want to design the same page. I'll make a copy of this Same page HTML unordered list with the CSS so 9 HTML unordered list Dot HTML with the CSS only so same page Same page, but we want to show it with the CSS so refresh 8 to 1 HTML unordered list dot HTML. So what I want is I Don't want this one. I want a separate phone called as word Anna Another phone you can take the phone names from We you can take the phone name from MS office or from the font folder. So what Anna is coming? I Don't want that much space 22 pixels enough Sir, what is this? In which cap cap family belongs to I'll explain this when we start with our CSS We have got basically four categories of phones are there serif sans serif cursive and mono space These are the four category of one see for example My house my family from my forefathers onwards. We got a family name So all the members of that family belongs to that particular family only so in my family From my grandfather my father my me my kids. So everyone belongs to the same family, but everyone have got their own some special features So the same way font is also having a different family. So four families are there for phone So this is only to tell that in which family category this word Anna belongs to not much impact If you're not writing also, you will get the same output only Got it Hello. Yeah So font size 22 pixel We are getting now what I want is This unnoted list I want to provide a background color So in order to provide the background color for the unnoted list We'll say background hyphen color of orange red. It's a background color. We are providing it as orange red Yes, we got the background color Then after that each list item Each list item I want to provide a separate color. So for that purpose For each list item, so I'll say L I For the list item background color of light salmon Some color is applied light salmon Each list item some background color is applied, but everything is coming together. So I want to provide some gap So in order to provide some gap for the list item margin we can provide Five pixel the whole side margin of five pixel. We are providing The whole side margin we are providing and for the list item some padding also if you want you can provide So padding of five pixel For the list item some padding can be applied. Yes sir, is it not At the bottom margin at the bottom. I just given all the side. I provided some margin Here also some margin if you want to have only at the bottom. It depends on you. So I'll say Yeah On the top there is no margin No, that is not margin. That is padding That is called as padding of the This unordered list. So if you want to provide some space there for the unordered list, you just say padding top 10 pixel. So padding top 10 pixel. Have you seen space is coming? Padding top and for the bottom also if you want to provide padding bottom So why I'm not using padding Say padding bottom. So bottom also padding is applied Got it Now why I'm not giving the padding see for example When you see this item This unordered list, let us go to inspect element You take one unordered list Just one point you have to understand inspect element So you take one you will when you take that you will You see this picture you can see here, right? So there what is coming? padding For the unordered list padding on the top is nothing Right nothing is given bottom. Nothing is given but in the left-hand side. How much is given? 40 pixel See if I apply padding 5 pixel this bullets will go inside you may not be able to see by default For a unordered list or ordered list padding left is given with the 40 pixel Padding left is given with the 40 pixel. Please remember that and the margin top and bottom is also 22 pixel Margin top and bottom is 22 pixel. Now when you take the list item Padding is 5 pixel top right bottom left 5 pixel padding is applied Got it So any element and padding margin bottom is 5 pixel Margin bottom is 5 pixel So any element if you want to see just inspect the element and you will understand and the most important is Padding left for the unordered list or ordered list is 40 pixel Padding left for the unordered and ordered list is 40 pixel. That is one point you have to understand Okay, sir So there's a reason why so I'm not giving padding for this so for example When you come to this and if you say padding of 10 pixel even left also will be reduced when you come here You may not be able to see the bullets Have you seen because padding left is gone inside So don't apply padding left directly. You can say padding top 10 pixel and padding bottom 10 pixel padding left and padding bottom and pixel and the margin is also applied So I don't want this much width So it's occupying the complete area if you don't want to have that much width We can say width of 60 percentage of the screen Width of 60 percentage of the screen. We applied 60 percentage now padding top padding bottom And I want to provide padding Right also Maybe 10 pixel padding right also 10 pixel. So everything is coming So this is how we design our ordered list So what I'm not ordered this unordered list. So we have got an unordered list So unordered list is defined with the UL So we got the font family We provided the font size We are providing a background color padding top bottom. So why padding? Left we have not given because by default padding left is 40 pixel by default padding left is 40 pixel So then only I can see this marker in a correct way And for the list item also we applied a separate background color and also we given margin bottom Only margin bottom is applied So now I'll okay list item margin bottom. So if I'm not providing the margin bottom, it will be clubbed together Because of that padding, it will be clubbed together. I want to have some gap between so margin bottom So this is what unordered list See how to create an application. I mean software YT dot html This is what the page we want to develop a Very simple page only the colors and all you can go for so when you see this page Identify how many sections are there? When you see this page, we can make this yellow colored thing as one section and All the texture contents are coming to the center. So one division some background color is coming and Softwave IT solutions two colors are coming first color and the second part. I mean second textures another color So in order to create this we work with the span. So this is one span and this is another span Then after that we have got our team So our team have got some paragraph three images are coming Then some paragraph our clients. So the complete text is coming to the center Complete thing is coming to the center. So this is what the page we want to develop So first you understand how many sections are coming or how many divisions are required in this page So this is first division We got the second division third division fourth one and The fifth division so we need to have five divisions in our page So let's create one project So new file maybe 14 We say project one dot html So based on what we studied till now using that we are going to design a page project one dot html So exclamation So this is what the page of soft wave IT so title we are providing it a soft wave IT So inside this We plan how many divisions one two three four five divisions, right? One two three four five divisions. So in order to have five divisions diff star five So we got five divisions so division second division The third division fourth division and also we got five divisions So the first division is nothing but header part. So we call this as header section header section Comments also we are writing The second part is nothing but our team. So team section the next section is client section client section then after that development section so we got development section and The last two one is nothing but footer section the last two one. We got the footer section So this is what the page we have so division. This is what the footer section all the sections has come now In this sections header section What is that we want to provide? So header section we want to provide soft wave IT solutions may be H1 and also some paragraph and H1 also two sections are coming that heading also two sections are coming to provide that H1 span So we got span soft to wave IT And also we got another span solutions So soft to write your solutions. That's what the header and now we got the paragraph Inside this paragraph. I'm giving maybe 70 words So first header section we have done so H1 one span another span and a paragraph also we have done So let's open this page and see how it looks like Open with the live server. I'll just copy this path and We use that in our Firefox browser So soft to a white is solutions and this particular paragraph has come This is one division Now by default all the text should come to the center The complete body the complete page should come to the center. Okay, that we'll see Now this is one division Now the second division our team. So that I will give it as H2 our team So inside the division our team We say our team So when we say our team some paragraph Three images are coming and one another paragraph So one paragraph Lorem 70 Then in between we have got three images. So if you want that images can be given inside a separate division so IMG SRCC is equal to images slash Team one dot JPG. We have already downloaded some images from pixels.com. We downloaded team one dot JPG You see images Team one dot JPG. This is team two dot JPG And also this is team three dot JPG. So you can download these images from pixels.com so pixels.com Download some images of team So team or teams team So we are looking for team. So this is one image second image. So working in a team environment So this images can be taken and we'll set development what we develop development Images may come These are all development then we have got clients We'll get clients Search for client. So these are all clients. So from pixels.com. You can download the required images So our team three images is what we want. So first image IMG SRCC is equal to images slash team two dot JPG IMG SRCC is equal to images slash team three dots JPG Team three dots JPG. These are the three images. So our team section is over When you come to our page first image Second image and the third image is coming. So our team is done After that our team what is coming our clients We got our clients the next section So in this one it's to our clients So they're also one paragraph We say lorem 70 70 words are required We need to have another division Inside this we need to have the images. So we will say images slash client one dot JPG The second image Client to dot JPG We are making the structure of the page first then we will do styles and all so three dot JPG again Here also we need to have a paragraph After the images lorem 70 Then after that the client section images are placed after that a paragraph with the lorem 70 70 words are required. So this is what clients our clients Now we got the development section H2 watch we Develop what we develop heading a paragraph So lorem 70 So paragraph is coming. So we got the division in that if IMG SRC is equal to images slash Develop hyphen one dot JPG because we are already really I mean we are already having the images So it is easy for us to develop this page So we know what to write. So because only dummy text only lorem So it is easy for us to do the coding part. So then paragraph We got lorem 70 So this is what what we develop now below that footer section copy write Followed by C surrounded with a circle 2020 soft way by the solutions. This is h3 maybe so inside the footer section h3 Copy write So we say copyright Ampersand copy semi-colon. This is called as entity. We will study this. So copyright simple see surrounded with the circle copyright comma Softwafe it solutions This is h3 copy right ampersand copy Softwafe it solutions Then after that inside a paragraph or directly all rights reserved in The next line all rights reserved in the next line Developed and maintained by you can write your name. So develop and maintained by designed and developed by designed and developed by Designed and developed by team at softwafe IT. So this is what we are writing. So all our contents are ready All our contents are ready. So whatever the tags we studied using that we developed this page So header section one division H1 so practically we can understand the use of division So H1 H1 is closed. We got a paragraph Again H2 our team paragraph diff is closed paragraph client section And also development section Footer section everything is done. Now, let's see how our page looks like So header part is coming Team is coming Images are coming Everything is coming now the first part. So copyright simple ampersand copy semi-colon Copy right software by the solutions all rights reserved designed and developed by team at SIT This is the page So our contents are ready Now what we need is We want all these texture should come to the center We want our own specific font. So for that purpose Let us come to the style section We have body In this body text hyphen align sender To keep all the text to the sender. So body text hyphen align center Everything is coming to the center Including the images are coming to the center. All right Now let us make this image in a proper width and height Whatever images are there. So in order to say whatever images are there IMG tag we want to provide a specific width of 250 pixel and we provide a height of 150 pixel. Let us see how it looks like So image size is reduced All images width and height. So maybe we increase the width to 280 and 170 So bigger image size is coming three images are coming or if you want you can keep four images also Now some gap is required. So we'll say margin hyphen right of 25 pixel Margin hyphen right of 25 pixel. All right So width reduced to 160. I want to provide a border for each image. So border three pixel solid black color Some border radius is required for us border hyphen radius of 15 pixel a curve So some padding is applied padding of 4 pixel some gap between the content and image We want to provide some box shadow Box shadow zero zero So 10 pixel as well as black color So we are applying some box shadow. So Images of bigger size. So we are providing our own image width and height Some gap we are providing Then we are providing a border same like photo frame in the last class we discussed about a photo frame Same thing we are applying border radius is 15 pixel adding a 4 pixel and box shadow You see images are coming The text is coming to the center Now what else we need we want to provide a Background color for each one of this a Background color to be applied to each one of this. So each one we are providing a background color So for that purpose Each division for that inline styles to be applied style is equal to Background hyphen color dark Slate gray some color we applied background color dark slate gray first part and I don't want to provide see this space. I mean margin is not required and We want to provide some padding for all the division For all the division We want to provide a padding of 10 pixel the space between the content and boundary and When you see this body There is some space is coming So by default body margin is 0 pixel. We don't want that. So we'll say margin 8 pixel is a default margin for body the default margin is 8 pixel because of that that space was coming. So we made it as margin 0 pixel. Now you see space is gone This is what the first part Now our team We want a separate background color. So what we do is inside the division inline style background hyphen color of light green Background color of light green is what we are providing. You see light green is coming So almost similar only our page also only color is different our clients Our clients we want to provide a background color off. So style is equal to background hyphen color of Light blue. So we are providing a background color of light blue. All right the next division style is equal to background color of Light coral we are providing a bright background color of light coral and The footer section same header. What color is given we are providing. So style is equal to background hyphen color Dark slight gray Dark slight gray and foreground color. We want to give it as white color foreground color We want to provide white color color white. So This is what the pages So even here also if you want you can provide the background color us I mean foreground color as white now soft wave IT solutions we want two different colors. So for that span How to provide that style is equal to we provide the color as violet Or dark violet. Okay, let's see violet and the other one Style is equal to The foreground color. We are giving it as yellow the foreground color. We are providing it as yellow So software white solutions some text is coming our team three majors our clients What we develop copyright soft to have IT solutions all rights reserved. So whatever tags we discussed Based on that we were able to develop a page the purpose of studying This is we should be able to develop a real web page So we are in the initial stage. So based on what we studied Whatever the tags we studied till now we were able to implement. So we use the headings H1 H2 We use the division We use the span We use the images Then what else we studied some text formatting tags only Rest all the tags are being used in our page rest all the tags are being used in our page additional thing also and If you want you can provide your own font So inside this body Textalign to keep all the text in the center. So phone hyphen family. I'll say comic sans emus Serif So we are providing phone family comic sans emus and serif So font also is being changed and The paragraph font size can be increased Paragraph your font size can be increased or I'll provide only word and a or a real The font is aerial All right, so paragraph size to be increased so for all the paragraph I want the font size to be 18 pixel Phone size to be 18 pixel. So we are increasing the font size also. So this is a real phone Understood this almost similar with the previous page So more better way we were able to develop so you can increase the image size if you want to increase you can increase that also so I'll provide 320 and 190 pixel 320 and 190 pixel we are getting a bigger image So we designed so even the color can be given as white color also So this is how we design our page. So whatever we studied Everything we applied on this so foreground color is white Foreground color is white. So any of the other font if you want you can apply that So good phones and all you apply So paragraph some line height is required. So some gap is required. I'll say line height of 1.5 so we are providing line height of 1.5 So some gap is also happening between the text. So everything is based on the CSS So we designed a real page Using the tags that we discuss till now. So this is what the page Next thing we are going to talk about is iframe So what is basically iframe when we talk about iframe? Iframe is a tag This iframe is stands for inline frame. The iframe stands for inline frame What is the purpose of that? So I have got a web page So this is my web page Inside this web page. I want to keep one another website or One another HTML document I want to keep here So we have got many HTML documents are there. I Want to keep one another HTML document in our web page itself Or I want to keep one PDF file or a PowerPoint Presentation or any other type of document or I want to provide my Google map the location map I want to keep Or if I want to keep a 360 degree image 360 degree image or I want to keep one another Website in my web page another software by the web page. I want to keep here or a Google site I want to keep it here. So for that purpose we use iframe So inline frame, what is the purpose? So iframe tag it defines an inline frame That contains another document like an HTML document a Video any type of document like text document PDF file another website, etc Into the current web page if you want to keep any other Type of document or a YouTube video or a 360 degree image Anything if you want to keep we use this iframe inline frame So a useful tag not only that not only this document So HTML document YouTube video Google Maps Google Maps 3d 360 degree image Any type of document like text document PDF file another website, etc Anything if you want to place we use this iframe tag So alignment also can be given frame width is calling all that now what I want is What is the use case we are going to do the use case? We are going to do is local HTML pages This is one page image file table Ordered list. These are the three different pages. So if I want to keep that so local HTML pages That means whatever the pages are there in our website itself. We want to integrate. So we'll create one new HTML file 21 HTML underscore I frame Dot HTML So we are having iframe so We'll just say the title as HTML I frame So what is the first part so inside the division? inside a division We want to have a heading as local HTML pages. So H2 local web pages pages So I want to keep the local web pages local web pages. So how to keep the local web pages? These are all our local web pages So I want to keep the ordered list. So for that purpose. I Say I frame SRC is equal to We want to keep the ordered list. So 11 dot ordered list 11 HTML order 11 dot HTML 11 dot HTML underscore Ordered underscore List dot HTML List dot HTML Frame border by default zero. It is paid tag. I frame is paid opening and closing is coming So what page to be integrated 11 dot correctly, right? 11 HTML underscore ordered or RED underscore list to dot HTML open with the live server What is coming here? This is what our ordered list So in one web page, we are able to integrate some other pages in one web page We are able to keep one another page if you set frame border one You see the difference We are able to see a border here This is how we integrate the local web page. Now, let us keep one more web page I frame I Frame SRC is equal to images. I want to keep so 13 dot HTML underscore images dot HTML Let us provide the frame border as one and One more I frame I frame SRC is equal to let us keep that project so 14 dot project 14 dot project one dot HTML Project one dot HTML frame border and providing it as one. So this is how we integrate a Local web page where nothing is coming. Yeah, just refresh. This is what the image page three images We discussed about this images so that we have integrated and this is what Our page with the specific size and all I mean, this is what the project we have done Now what I want is In one another division There's also local frame only or Below that or inside a separate division. I Framed the same project one dot HTML. We are giving We are able to keep this with our own width and height So I'll just say width is equal to 500 pixel. I'm just providing the width as 500. See which is increased I want to have the height us Height is equal to 350 pixel With then height so it's increased With then height is increased or maybe slightly more 600 pixel and height 350 pixel and we will use something like a line Align is equal to center. I want to keep it to the Center is not working. So this is what the software it is solutions Align left to right Top center is not there. So middle. So it is related with the Text associated with so now we will say a line is equal to right Align is equal to right Right side is working I'll just use middle. It is applicable to the text associated with that. So middle. It's not coming So same like image left and right is working there. So align not using that align if you want to keep this Let's say style is equal to Margin auto. I'm just providing style is equal to margin auto Still that is also not coming there. So that's not possible to be applied. So it is an inline element So display block. So by default, I frames are in line. See when you keep this three I frames that is coming one to the side of other One is coming to the side of other. So if I want to keep this one even image Span, they're all in line elements by default. It will come one to the side of other Only block level elements will come below So now we made it does Display what is that we'll study in CSS for the time being You understand that how to make an inline as a block level element So by default I frames are in line. It will occupy only that area required for the content So I frame SRC is equal to this one frame border one with this 600 pixel to keep that I frame to the center There's no use of a line a line is only left or right or for the content same like image So I want to keep it to the center even images can be you can keep the image to the center by using this style Style is equal to display block style is equal to display block and margin auto Style is equal to display block and margin auto. This is how we keep our image to the center I mean I frame so first part We discussed about How to keep so I can keep this I frame also along with that after keeping so two breaks Two line breaks. I'm keeping this I frame So after keeping two breaks, we are keeping that coming to the center Now the second part is We want to integrate a Google page some other websites into our site some Google page so for that a Heading a Google page in frame so another website in our page So another website in our web page So if you want to keep another website in our page, for example, we say I frame SRC is equal to HTTPS call-and-slash www.softwave it.co Only that I'm not giving frame board or nothing. So we got I frame I Frame SRC is equal to HTTPS call-and-slash www.softwave it.co You see software IT.co is integrated You can increase a bit the height everything so for the body Will provide some margin so style to make it a scrollable body body margin bottom of 300 pixel so margin bottom of 300 pixel so refresh We can scroll it. So we are getting the site another website in our page So we can provide the width the height all that things can be provided So like how you provide the width the height and all you can apply here also So this is another website in our page So I can keep The frame border is Equal to one so frame border is equal to one frame border is applied Zero or one can be applied. So this is how we integrate another website in our page Now the third case is I Want to integrate a display a PDF file in frame? so I Want to integrate a PDF file. So for that purpose so division H2 Another file in our page Another type of file in our page. So here we got resources Inside resources we got core UI technologies dot PDF So this PDF file we want to integrate in our page something like a government website in a government website They have got some geo government orders will be there So how to keep that government orders in the government website itself so that they use the same thing I Frame SRC is equal to resources slash Resources slash core space UI Technologies dot PDF I frame SRC is equal to I Frame SRC is equal to resources slash RESO you are CES resources slash core UI technologies dot PDF Core UI technologies dot PDF. This is how another resource. We are integrating Always better. You write some comments also. Anyway, we have written this message. So it's not required So refresh Come down refresh this What is this? This is what our PDF file? This is our PDF file. I'll just increase the size So you are able to scroll down and you can see the complete thing. This is what the PDF file You can increase the width height also. So I'm just increasing the width and height So with is equal to like what we have done before 600 pixel Height is equal to 300 pixel. So we are providing our own width and height You see width and height is increased We got the software writing I free now the next two cases We want to integrate a YouTube video So we want to integrate a YouTube video in our page So if you want to integrate a YouTube video so H2 YouTube video In our page so how to integrate a YouTube video, please look here So first thing we need to get some YouTube video. I'll go to youtube.com When we come to youtube.com our channel is soft wave IT Our channel is soft wave IT So suppose I want to integrate environment setup. So this is what the page So we open this After opening this Let us go to share How to do the environment setup you a technique you can also refer this in case if you face any problem of Integrating I mean working with the visual studio code or if any of your people if they want to know they can follow this one Live server auto safe everything is integrated. So our channel is soft wave IT So now once we come to this page you start playing that Go to share I'll click on share When we click on share so we got a separate dialog box like this Once we get this go to mbird So once again, I'll show you so we come to youtube.com Take the video you want to play After taking that Come down you click on this share When you click on that share, there is something called embered Click on this embered There itself. We are having the eye frame So this video is used to understand how to do the environment setup of visual studio code so just copy this and after copying Just write our cities just paste our cities into our web page. They're also I frame with this coming height is coming SRC Frame border Allow accelerometer. So these are all predefined things allow full screen. Also if you want you can remove all this not a problem So by default they are giving with the their own space auto allow full screen also. So come to the page refresh YouTube video in our page same YouTube video. They're on with the height everything so start playing So we can maximize you can accelerometer. Everything is coming there Next thing what we want is we want to integrate our location Display Google Maps with iFrame. So I want to show the Google Maps in our iFrame in our web page So for that purpose another division We got one division. So inside this division H2 Google map In our page our location. So software why it is location We want to show in the Google page in our web page not Google page in our web page We want to integrate the Google map. So in order to integrate the Google map in our web page What is that we need to do? so let us come to Google.com just see this search for software YT So this is our software YT and you come to maps software YT solution come to maps Once you come to this one What is that? So this is what our office when you come to this There is something called share there is something called share Click on the share The second link is embered a map embered a map There we go go to this iFrame. So just copy html. So you take Copy html we copied So once you copy just integrate that in our web page paste it Maps Google.com Maps embered some code is coming. Don't make any changes into that So width and height is given 600 and you can change that. So I want to provide it as 560 and And height as 315 Same width and height is given. So border zero allow full screen area hidden something. So save this Let us open the page And you see our Google map Well, so today we are going to do a project With the help of the tags that we have discussed till now So we discussed about around 10 or 12 for type of tags like heading paragraph division span Then text to formatting tags. We discussed about list ordered unordered description list We discussed about anchors. So these are all the main things using iFrame iFrame also We discussed about so these are the main things that we discussed about using that we want to design a project something like this So for that purpose Let us first understand what is the page to be developed? So this is what the page to be developed So we require some images So the main resources that we require is we require images So to get this images We can use pexels.com and you download the required images or something like a restaurant So the two images are of restaurant Then burger section so different type of burgers are coming burgers are coming. So for that you download pexels.com so from pexels.com So we have got two Images coming in the main section restaurant. So for that purpose Restaurant or restaurants are what we are looking for So download the images from here So this is one image that we have used in our picture this one. This is one image And the other image that we have used is you can download any of the images from here Any of these images can be downloaded. So we already got that images Then the second section burgers So we search for burgers And you identify whatever the or which are all the images that we need to have so these are all burger images So some of the images we have used here. So one two three four four images The same way fry fire and ice with our fries. So we'll search for fries and you search for fries and Get the required images. So these are all some of the fries So like that all that images you get now what we do is in our Visual Studio code Will create a new Application so let's come to our workspaces UI 3 Say in this UI 3 So we'll create a website with the name of food website so 22 We'll create a new directory inside HTML With the name of 22 food website So we are creating a new directory food website Inside this food website will have a folder For images to keep the images. We have got some folder Images folder we have so images is coming inside food website And also in order to keep the CSS normally in a project development We keep the images in images folder CSS Inside CSS folder. So we write the CSS inside CSS folder. So images as well as CSS Then what else is required we need to have one file index.html The HTML page is nothing but index.html. So we have done the structure so CSS Images and index.html 22 food website that we have Now let us keep all the required images inside this folder So what I do is I already got some images. So these are all the images which we have already downloaded from pixels.com So main underscore 1.jpg Main underscore 3.jpg. So like that different images are coming. So bread's Burgers So we'll give burger one So not bread will give it as we renamed it. So burgers underscore one the second one burgers underscore two Reaning Burgers underscore two The third one burgers underscore three Burgers underscore three So like this we got the four images. So green Desert all these things are coming. So let me copy all these images And we will keep in our folder si 3 ui 3 HTML food website images So this is what the first step. So the structure is already done and then We got CSS index dot html So inside CSS we want to write all our styles. That's called us external stylesheet So we call external stylesheet. So in order to keep the external stylesheet What is that we'll study in our CSS class But still we do we want to do it as a real project. So inside CSS We write a file as styles dot CSS. This is an external stylesheet Whatever the styles dot till now Whatever the way web pages we created in all the web pages we were writing the CSS as internal or inline But now we want to create an external stylesheet. So styles dot CSS All right Now coming to index note html When you see this page, we need to understand how many sections are there? So let us keep these two Comes under one division. So section is nothing but division. So first we need to understand the different division So how many divisions are coming? These two under one division we call it as the header. So that means this is actually navigation Then the heading also we combine both these things together and we will make it as a header section so one division ID Header so one division for header. So we need to know how many divisions are required That means we have got different sections. So diff ID is equal to header This is one division Then another division This is what the main content so that means two images One heading h2. So this is h1 yummy food says h1. This is h2 Some CSS is applied some paragraph then two images Then below that the title of that I mean that image title or the caption of that image is coming So this is done with that table. This is purely based on a table which has got two rows The first row as well as the second row contains the caption and one paragraph. So we call it as main content So second division Diff ID is equal to diff ID is equal to main content So this is a main content division Then the third section is Burgers section paragraph Four images then paragraph. So that is Burgers. So diff ID is equal to Burgers So this is diff ID is equal to Burgers section Then fries section noodle section. So diff ID is equal to fries So division is over then another division is nothing but Fries not F.I.R.S. fries. This is only to understand how to develop the page whenever you get a page What is the way so fries the next one is noodles fries noodles Eat and healthy. So healthy section Another one healthy or greens healthy is nothing but greens Desserts desserts and One more section is nothing but the footer section So these are all the One two three four five six seven eight sections that we have So is it correct one two three four five six seven and eight So these are the eight sections in our page. So first thing is we should understand how many sections are there in the page Then only the CSS will come so in the header section What is that we need to have we need to have a navigation These are all anchor. So when you click on home top of the page Burgers, it should come to the burger section When you click on fries, it should come to the fries section greens Healthy eat and stay healthy right same Then when we click on desserts, it should come to the dessert section When you click on contact, it should come to footer section. So footer section So this also below that we have got the same anchor. So we call this as navigation. So this is what the Structure so we are ready with our structure. So header section main content burgers fries noodles greens desserts and food So let's come to our HTML We write in this title. We are providing it as SIT group of hotels SIT group of hotels So this is what the title we are giving so in the place of yummy foods will provide it as a SIT group of hotels And before that, let us keep all that divisions. So I just copied all that divisions So header section header section for navigation and Main heading For heading navigation and main heading Then this is main content section main content section. This is nothing but burger section So like that, whatever the sections are there. We are mentioning for our understanding. So this is nothing but fries section So what are all the fries section? So each section there is a paragraph And also some images are coming. So this is a new deals section. This is new deals section green section or healthy section Then we have got the third section So whenever you design a page, you write some comments so that we can easily understand any Modifications are required. It is easy for us to understand that the search section and Also, we got footer section Desert section as well as we got the footer section now coming to this header What is required? We need to have these links now when I click on burgers, it should come to the burger section How this burger section is identified with the ID? This is nothing but linking using bookmarks linking within the page itself. So this is what the burger section Burgers fries noodles greens desserts footer So in order to provide that link if you want to keep it in a separate division If you want you can keep it in a separate division to for grouping all that navigation So division what are all the how many links are required? So we need to have one two three four five six seven links are required So in order to provide that a star seven So a star seven seven anchor tags will be coming The first section home anyway, we are in the home section only Hash come to the top of the page. That's what home The second section is what? Main content not required burgers So burgers ID is nothing but burgers only so we'll say hash Burgers So that means whenever we click on this link burgers whenever we click on that burgers It should go to Burgers place the next one fries hash fries when we click on fries section it should come fries link it should come to that place Then we got noodles hash noodles Noodles Nw D L E S noodles Then when we click on greens hash greens greens Desserts and footer. So hash desserts remember what is the ID given the same thing to be provided so deserts and This is nothing but hash footer So footer section is nothing but what is the link contact footer is nothing but contact So these are all the links that we provide. So this is nothing but navigation So we give it as navigation Section so inside the header. We are providing the navigation section a H ref hash home burgers fries noodles greens desserts contact. This is nothing but ID So linking within the page itself. We are using linking within the page itself After this What is that we want to have we need to have yummy foods? So or we'll give it as a heading H1 S I T hotels We give it as S I T or soft wave hotels Yummy foods in that place. We provided a soft wave hotels. It is need to have two sections Because the first one is coming with the red color and the second one is coming with the yellow color So to provide that two section, we need to have span so soft to wave is written inside the span and Hotels is also written in span. So we have got two sections in our page Slash span so span soft to wave and the hotel. So this is what the Division so diff ID is equal to header. So one division is navigation and the other division is nothing but heading So first part is done. Now. Let's see how it looks like Open with a live server So the links are coming and also soft wave hotels are coming Then we need to have the header section So welcome to soft to wave hotels or welcome to hotel or something we are providing Then we need to have a paragraph two images are required So that images to be placed because just below that this text is also coming So we need we need to have a table so one image and Second image we need to have in the first two row two cells second row two cells and below that one paragraph is required So it's to so now coming to the main section it's to Welcome to our hotel So welcome to our hotel So we need to have a paragraph Lorem with the 40 or 50 words so one paragraph Below that a table is required inside that two rows. So we need to have a table Inside that two rows in the first two row table data We want to place one image IMG SRC is equal to images slash main underscore one dot JPG and In the next cell TD IMG images Main underscore three dot JPG both the images are placed So in the cell first cell one image In the first cell one image In the second cell one another image so first two row two images will be coming. Let's see this So both are big images first image and the second image very big images both are coming Then in the next two row TD the caption of that image So interior something we can provide so caption Awesome ingredients and nice interior. So something we are providing awesome ingredients TD nice Infrastructure or nice interior So after that table The third part is a paragraph again. So some right up of that. So that right up is nothing but lorem 50 So this is what the second section that we have So welcome to yummy food world. So we mentioned something so below that image awesome ingredients Nice interior and some right up is coming. So this is what the content. So one header section and Welcome to our hotel. That means the main content section. We designed the content Now let us keep Let us keep One more section that is burgers section. What is required for burger section if burger section is okay We can just make a copy of that content and all so burger section Burgers collection bonanza That is it too. So it's to Burgers collection bonanza We need to have a paragraph lorem with the 50 Then we need to have four tables. I mean one table with the four images Burgers one two three four and the right up also. So for that purpose, we'll have table table row table data IMG SRC is equal to images slash burgers underscore 1.jpg TD IMG SRC is equal to images slash Burgers 2.jpg TD IMG Images slash So remember all these images we got from Tech pixels dot com or you just download that images. So TD IMG SRC is equal to images slash Burgers 4.jpg four images are given Under each image we want to provide burger one burger two burger three all that So when you see that below all the burger images are coming in the same table two three four Then after that one more table row TD burger one Under each image burger one burger two three and four we are providing So this is burger two burger three and burger four and below that table one more paragraph lorem 50 so we are providing lorem 50 so that section is also done So we have got both the sections are done So two sections are done if you are able to do two sections rest all the things are same only Now let's think about some CSS Let us think about some CSS or contents are coming the first part is let us provide some Styling for the image so that the size of the page will be reduced So how to provide the CSS so this is what image You know to provide that now all the contents are coming to the center All the contents are coming to the center. So let us think about the CSS inside styles dot CSS body We will provide the font hyphen family. You can see some phone family as comic sans ms Sans serif so we provided the font family and The complete content should come to the center. So text a line center. This is what the two properties we given for body But it will not be applied on the image by default. It will not be applied on the image So what is happening is we applied that styles in a separate file? So styles dot CSS and that styles dot CSS is present inside the CSS folder so what I need is in our html We want to integrate The CSS which is defined in some other place So for that purpose we use a tag called link So we use link tag Relation is equal to style sheet What type of relation so link we have used before also so in order to provide some favorite icon So the icon along with the title bar in order to provide that we use link relation is icon Now href is equal to where that styles are defined. So styles are defined in CSS slash styles dot CSS now save this Everything is coming to the center of the page That part is done and the font is also being changed Everything is coming to center. So I don't want to provide this space So by default body 8 pixel margin is there. We don't want to provide so coming to styles dot CSS We say margin Zero pixel so margin zero pixel. So we are providing margin zero pixel. The space is being removed then after that Let us arrange the images properly. So IMG for the image tag IMG will provide a specific width of 300 pixel and a height of 150 pixel, let us see how it is coming for all the image width and height is reduced Alright, looks better. The width and height is applied Now we'll apply some border hyphen radius and remember Whenever you provide some integer values number values and all don't give that in double quotes So 20 pixel is what we are providing See every image some 20 pixel border is coming. Now. I'll just apply that inside double quotes Save it See, is it applied the border pixel is not applied border radius is not applied So make sure when you are giving the value don't give that value in double quotes If you apply that in double quotes that effect will not come. So that is done But what I want is What I want is These four images. Okay, the size is that much is enough the size of that much or we'll provide 270 This much size is enough or we'll provide 160 pixel So this is enough but for the main two images, it should be bigger size So only for that two images the size should be bigger So for that purpose only for these two images Only for these two images the size should be bigger for that purpose What I do is IMG dot main IMG dot main or simply dot main That is used to provide. This is called as class selector. This is called as class selector I'll apply width of 550 pixel height of 250 pixel so width and height IMG dot main so dot main is a class selector Whatever properties are applied that can be applied to the image tag You use class is equal to if you want to apply that We will say class Is equal to main and for the second one also Class is equal to main. So what happens is Whatever the properties are defined for IMG that is applied along with that Whatever properties are defined inside this class that also being applied that is also being applied. Let us see The size is increased. Yes, size is increased. So with this increase and also height is increased So now we don't want to have or move maybe 500 pixel and 270 pixel 550 as well as to 500 pixel and to 270 pixel so the same border radius everything is coming along with that Whatever the class selectors are applied. So anything starts with the dot is called as class selector If I apply IMG this can be applied only to IMG tag Not for every tag this particular class can be applied class is equal to main Class is equal to main can be applied only to IMG tag Class is equal to main can be applied only to IMG tag So this is what the first part. So page is looking like this Burgers everything is coming softwares Hotels welcome to our hotel and Also ingredients nice interior everything is coming. So text content is I mean text aligned center So everything is coming to the center. So this is what the first two part of our page Go to this points, please now what we want is I Want so how much area the table is occupying to know that you go to inspect element We want to know why this table the image is not coming to the center. Let's come to the table The image is okay. Let's come to the table. So table is occupying this much area only have you seen Only that much area. So I want to make the table to occupy 100 percentage of area. So for that purpose Let's come to the styles we will have the table and The table we provide with the hundred percentage of the table So with the hundred percentage to be occupied now, you see Table is occupying the hundred percentage area. So inspect element using that we can understand how all the things are coming So looks better. So now the table is occupying the hundred percentage area space and all the things are applied now then What is required is So that table part is also done for the image some box shadow also we want to apply so box hyphen shadow Zero zero ten pixel and black color. So some shadow also we want to apply for the image Yes, that's also applied for all the images burger section Then what is required? So we want This heading to be displayed in a proper way This is h2 all h2s to be displayed in a proper way So what weight should require a? background linear gradient is required There is a specific width for this. So black Brown red or dark red and black three colors are coming. So for h2 for h2 We provide background linear gradient 35 degree or 45 degrees will say black dark red As well as black. So we are just providing Linear gradient 45 degrees black dark red and black Let's come to this page. Okay, it's occupying the complete area I don't want to make it occupy this much area. We just want to provide a bit of a specific width So width of 60 percentage of the screen width of 60 percentage of the screen and All these things should come to the center. Text is coming to the center. Okay, but the text should be in white color So for that color white the text should be in white color Okay, and it should come to the center that h2 should come to the center How can you keep that to the center? So we will say margin auto by providing margin auto It will come to the center. All right Now we want to provide some padding so space between the content and boundary. So padding of 20 pixel It's more space. Let's provide 10 pixel padding of 10 pixel. All right Then we want to provide a border only for the bottom Okay, we'll see that now we want to have a curve here left side we want to have a curve Right side we want to have a curve Bottom not required. So for that purpose for h2 border high fund radius of 60 percentage top left 60 percentage top right 0 percentage bottom right and 0 percentage bottom left Only top side border is coming. So you see 60 percentage is applied. So looking something like that Looking something like that Now we will apply some border for the bottom. So padding may be slightly more padding is required So we'll provide the padding of 15 pixel So this looks better compared to the other one and also below. So some White color is coming. So border is applied only for the bottom So now before that if you want to get that effect Let us apply a background color for the body So two colors are coming. This is a light green below some other color. So for that for the body We apply background Linear gradient 45 degrees light Coral light green light coral as well as light green colors we are applying This is our page. Okay Two colors are coming. This is okay. Welcome to our hotel and we want to provide a border We want to provide a border only for that. So in order to provide a border, maybe h2 Will provide the width as 50 percentage of the screen We'll provide 50 percentage of the screen and we want to provide a border bottom The complete area. We don't want to have the border border. We want to apply only for the bottom So for that border hyphen bottom will study all this border bottom five pixel Solid and white color solid is what type of border? We want to have a solid border with the size of five pixel and color as white color. You see Almost looks same Burger section all images are coming content is coming. Everything is okay. Almost similar to the other one So home One piping symbol is required. So index dot html home So some font and all if you want you can apply there. So So we are providing this also. So when I click on burgers, it's coming to the burger section Home anyway top of the page only burgers only one section is coming So this is what the page we have done. Welcome to our hotel burgers collection bonanza Then the same baby can cope. I mean soft to wave and hotels So we want to provide so this is nothing but h1 So for the h1 what properties are required for h1 Only one h1 Inside this h1 What is the phone phone hyphen? family phone hyphen family CASD a little castler Let's let me check out that it's working or not sans serif. So some font So this is coming as a default one not the actual phone. So there is a Windward Let us see what is actually one phone we will take so which font we are taking is I'm taking one font soft wave Soft wave. I'll increase the size to 48. Okay C A S T C A S T E L L A R. So this font we want to have C A S T E L L A R copy So we will provide that particular font So when you apply that font see That font is coming. Let us increase the font size font size to 40 pixel 45 pixel We are increasing the font size to 45 pixel Now the first one we want to provide the red color and other one yellow color. So for that index dot html span Style is equal to color red color and the other one Style is equal to color Yellow color so red color as well as yellow color we are providing Soft wave hotels red color and yellow color we are getting Then I want to provide some shadow So what is that shadow? I'll explain later. So I'll just apply not h2 for the h1 So text hyphen shadow text hyphen shadow same like box shadow So 0 0 10 pixel and black. So some shadow. We are applying to the text. You see Soft wave hotels is coming Castler and the font is also coming And if I want to have some border bigger size font hyphen weight. I want to have W E I G ht font by weight bolder So some phone to wait as bolder thickness is coming phone weight bolder. So soft to wave hotels Same way yummy foods soft way hotels. We have done. So some text shadow also applied So left same like box shadow. So left is 0 top 0 10 pixel black So index dot html all these things are applied now when you click on this burgers It is coming very fast lead to this section Coming very fast lead to this particular section. I want to make it as a slow movement The control should go in a very smooth way So in order to do that inside body Will say a property called scroll behavior smooth So inside body we will say scroll behavior smooth smooth transition should take place No transition actually. So let's click on this. You see the difference Burgers It's coming in a smooth way not directly coming there so It no, it's not no effect is coming, right? Burgers, it's coming same speed only now. What I do is I'll apply this not inside body For the entire html. I'll apply for the root element will apply Scroll behavior as smooth For the body, there is no effect. No, let's see any effect is coming or not a refresh I'll click on burgers. See You see the difference. It's coming in a smooth way to that section. So scrolling effect So smooth scroll behavior in a smooth way. It is coming. So this is what burger section Then what's the next section? So in order to do the rest of the thing, we can just make a copy of this So burger section we have already done Only headings are different and images are different. I'll just make a copy of this Paragraph also make a copy of this and we will keep this Inside the fries section. So in the fries section, what is the heading in the fries section? The heading is nothing but Burgers fries and ice with our fries Fire and ice with our fries any in any heading fire and ice with our fries and only the image to be changed In the place of this will say fried underscore one dot JPG Fried underscore two dot JPG The third one fried underscore three dot JPG and fried underscore four dot JPG Fried underscore four dot JPG and the caption also you change it fries one fries to fries three Fries for so we are giving the fries section. Let's see how it is looking coming to this page burgers Fire and ice with our fries fries is also coming. So we'll go to burgers coming back fries coming to the fries section Now the next to one Noodle section so inside this noodle section You can provide our collection of noodles our collection of noodles So images to be changed So we downloaded all the required images from pixels.com from any of the website you can download that We just provide what is that? The image names you should see deserts greens fries other maybe other underscore one. So images Other underscore one other underscore two other underscore three So the images we are placing here other underscore four So all that four images so noodles one two three four noodles three Noodles four. So this is what the noodle section now healthy. So inside this healthy section We'll just give it as lead a healthy life lead a healthy life So we provide greens underscore one green underscore one The next one green underscore two dot JPG Because one section if you are able to do rest of the things are simply green underscore three Green underscore four. I mean green four dot JPG. So section is also we are changing. So greens one Then we got greens two Greens three So the caption something like a caption of the image greens four. So this is one section Then the final section we are having is called as desert section so Inside this desert section What is that we are providing? So let's see what is the heading given here? Enjoy the deserts Enjoy the deserts one paragraph and the images Desert underscore one desert underscore two desert underscore three desert underscore four So we'll provide in the place of burger ice cream one ice cream two three four So this is nothing but the four ice cream sections we have Now coming to the footer section now. Let's see what is actually happening. So our page design is all over So these are all the sections. Welcome to our hotel home top of the page burgers fries noodles greens deserts Now we want to come to contact So what is that we require inside contact? What is that you require inside contact? So contact SIT. So one heading H2 contact SIT hotels So this is what the heading contact SIT hotels. Copy rights Ambrose Sanch all rights reserved So we'll provide some paragraph. So paragraph Ambrose Sanch copy Ambrose and copy semi-colon 2020 SIT group of hotels that we have got one another paragraph all rights reserved All rights reserved All rights reserved exclamation in the next line B are developed and maintained by so developed and Maintained by Anger tag a Ruff is equal to HTTPS colon slash slash WWW dot Softwave it.com or CEO Softwave it slash a so this is what the footer section and below that we want to have a horizontal ruler HR is a horizontal ruler and below that all the links are also provided So to provide that link already we have got the navigation section So this division is available. I'll make a copy of this with the Comment will make a copy of this and we will keep at the bottom of the page. So we got the Division HRF so our page design is over. So yummy foods. This one is old one Then we will provide some color. So this is salmon. So that one is coral color So you can provide the background color us if you want to have the same color light Salmon Light Salmon is what the color we are providing. So now you see 45 degrees color So some body background board and bottom some space if you want you can you can provide that also body So top and bottom for the body Margin Top and bottom 10 pixel left and right zero pixel top and bottom 10 pixels on some gap is coming Contact section below also some 10 pixel gap is coming noodles The complete page design is done. So this is what the same page So whatever we studied till now Everything is applied on this page So that CSS and all you should have a clear understanding so HTML so for when you are moving the Control from one location to another location. We provide the scroll behavior smooth Body what is a background color? Then another new property what we discussed is only about border radius. So multiple values can be provided So 60 percentage 60 percentage for four values are given. So basically border radius can be applied to four regions So top left top right bottom right and bottom left. So this 60 percentage is top left the 60 top right zero percentage bottom right and Zero percentage bottom left. So these are only the new styles We applied rest all the things we used in our pages before and also we discussed about the class selector So class selector can be applied to a specific. So by this time we discussed about Element selector or tag selector IMG is a element selector dot main Is nothing but the class selector if you want to apply this property You should explicitly mention that how to mention that in order to explicitly mention that we use the class Attribute so class is equal to main. So whatever properties are declared inside this We are able to apply to that particular element class is equal to main So may class is equal to main can be applied only to IMG So some restriction we are giving IMG dot main So this is what the page that we have designed. So burger section home burgers fries noodles greens desserts contact Soft wave hotels. This is called as navigation then header section. So whenever you get a page First you understand How many sections are there in the page? Now that header H2 rather than 50. I'm just providing it as 60 percentage So slightly more space 60 percentage is applied. So two images all the other so content is simple only Very simple page design So H2 some other font if you want you can apply there. So not that this one. I want to apply H2 We want to have a separate phone phone hyphen family Ariel Serif So Ariel Serif. So welcome to our hotel Burgers collection bonanza fire and ice with our fries. So any phone so that standard phone We applied to all the H2 each one is some other font So this is how we design this page So is that clear to you? So some CSS styles some new things we studied is how are we able to work with the External style sheet. How are we able to work with? External style sheets or link relation is equal to style sheet H rough CSS slash styles dot CSS. How are we able to work with the external style sheet? Now in this page Food website, so you don't need to provide index dot html So when you come to html We got 22 food website when you click on this Automatically index dot html page will be open. I'm going to click on this Automatically index dot html is coming. How come index dot html because every website Index dot html is the default page now when you click on HTML see for example When you click on html, it will come inside the page Because there's no index dot html if any index dot html is there that will get so open in food underscore website We have got index dot html because of that index dot html is being open