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 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 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 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


Just as America and we take of the federal High Court, the Booja has adjourned the trial of Abba Kerry in six orders till March the 14th. Kerry, who was a former deputy commissioner of police before his suspension, is expected to remain in the custody of the National Drug Law Enforcement Agency, until he reappears in court at the adjourned date for his bill hearing. While the other four senior police officers also pleaded not guilty, the two civilians pleaded guilty to count five, six, and seven. Shortly after the defendants entered their plea, the NDLEA, through its Director of Prosecution and Legal Services, Joseph Sunday, applied for trial date and for review of fact in respect of the defendants that pleaded guilty to the charge. Hello, hope you enjoyed the news. Please do subscribe to our YouTube channel and don't forget to hit the notification button so you get notified about fresh news updates.


Hey, what's going on everyone? It is BAV here again, and this time this is not just the Thor Ragnarok review. This is the Thor Ragnarok spoilers review. Spoilers, spoilers, spoilers. We talking all spoilers as if you've already seen the movie. So if you do not want to be spoiled, I strongly suggest you turn the video off now. Go to my description box. There is a link to my non-spoiler review. You can check that out. Then go see the movie. Then come back and watch this video because I'm going to be spoiling everything as if you've already seen the movie. So you have been warned. This video does contain spoilers. So spoilers, spoilers, spoilers. You have been warned. Let's go ahead and get into it. Now if you saw my review, my non-spoiler review, I told you that I did not like the first five minutes of this movie. So let's just go ahead and get to this. So at the end of Age of Ultram, Thor was like, hey, what's going on? You know, this doesn't make sense. This is too big of a coincidence. You know, all these Infinity Stones are just coming up out of nowhere randomly. I want to get to the bottom of this. So he held up his hammer. He held up Mjolnir. Mom Mjolnir right here. Now he held up Mjolnir and flew up in the in the in the bridge or whatever. And you know, the next thing that we know at the beginning of Thor Ragnarok, he's in the cage or whatever. Now, I kind of wish we would have saw how he was locked up and how he ended up in Surtor's lair. But this is the part where I just did not like because this is the introduction to Surtor. Surtor in the Thor lore is like one of the biggest badasses ever.    And I'm just like, man, like you're ruining the introduction to Surtor. Like, you know, I want to feel like this is dark and sinister. Like I want Thor to be like, oh my gosh, Surtor. You know, how did I get here? Like, oh my gosh, I thought Odin killed you.   And that just kind of takes the emphasis away from Surtor or whatever from what like makes him so, you know, badass from, you know, what I know myself in the comics and whatnot. And like in the trailers for this movie, when I saw Hulk like leaping in the air and coming down about to smash Surtor's head, I was like, man, I know that's going to like, you know, land a nasty blow on Surtor, but it's going to take way more than a Hulk to be Surtor if he's that big. We're going to need a Hulk, we're going to need Loki, we're going to need Thor and we're going to need Odin.  And Thor just kind of like, you know, whipping through all the guys just with ease. He's not sweating at all. It's just like, you know, there just really was no threat there. So I'm just like, if there was just no threat and you were able to escape so easily with your hammer, it's like, how did you get caught in the first place? And these are all the things that are like going on in my mind, like when I was watching the movie. And so like the first five minutes, I hated it. I've seen the movie twice now. And it did stuff in the movie didn't bother me as much the second time as it did the first time.  But luckily, you know, the rest of the movie did come through. And it wasn't that bad.   He did send Odin down to earth and put him on the spell.  And you know, but disguising himself and all that. And like the first time I didn't notice it by the second time, like the person that was playing Loki in the plot was like, is that Matt Damon? I was like, wait, that looks like Matt Damon. And then you know, like later on, I looked it up or whatever and saw other reviews and yeah, that was Matt Damon or whatever. You know, that that was funny. You know, I like that a lot. You know, I don't know where he came from or why, you know, they decided to put him in the movie or whatever.   And so then like the next scene where we get were hella, I mean, they go and we get to see Doctor Strange and you know, that was great. That was fine. I do like all of that when Loki was like, I've been falling for 30 minutes. You know, I was laughing right there. I did appreciate that something in that scene that I did not like is Doctor Strange, Doctor Stephen Strange, Bitterday Cumberbatch, when he kept teleporting, Thor or whatever, he kept shaking those bookshelves and stuff like that. A few people in the theater were laughing. I was not, you know, and this was still kind of the point where I was a little worried just like, okay, where is this film going to go?  I forgot what it's called, you know, like, that's when things picked up for me. I love how Loki transformed and Thor hit the umbrella down the ground and he transformed, you know, to his warrior self. That was badass. I love that shot or whatever. It was just cool. You know, I really liked it. But Odin is dead now. Odin is dead. And I think it's just really because, you know, even after the first Thor movie, what is his name? Anthony Hopkins, he just really didn't enjoy the role and you know, he could have shot this all of his scenes in this movie and just like one day just like guys, I really don't feel like doing the costume anymore.  And that's fine. But at the same time, out of all the three Thor movies, we really never got to see how strong Odin was. We really didn't ever get to see him fight. And that's, that's sad. That's unfortunate because Odin and the Odin force or whatever, I mean, he's like one of the most powerful people in the whole Marvel, not even cinematic universe just because, I mean, that's still growing right now. We're only in phase three.  But we never really got to see him fight other than a flashback kind of in Thor the Dark World, you know, but he's gone and hella played by Kate Blanchett. I mean, she is just lovely. I loved her. Of course, we got to see her stop the hammer stop Mjolnir or whatever. And in the trailers, it was a little like it was in the alley. But in this movie, you know, there was a Norway and I like that that they kind of tricked you right there. That was spoiled for me. Thanks, John Schnep from Collider because he did ruin it and I was kind of pissed off about that. For some reason, he just likes to spoil stuff, you know, but anyway, and like from where the, you know, it makes sense.   He's like, maybe we can make some arrangement.   He's always messing something up.  And then because you're trying to escape or whatever, you should have just had Thor try to fly away. You couldn't fly away because this hammer was well, yeah, it makes sense why he was scared because she just destroyed his hammer. Like you said later in the movie store, she destroys your hammer like it was a piece of glass. So he was like, get us out of here.  And that's exactly what happened. And I like how when there was, you know, in the by-frost or whatever on the something bridge, I forgot what it's called. You know, that made sense that, you know, she was like, you know, she wanted to hop a ride to and those like Loki and she he's throwing knives and stuff.  I mean, she knocks him out first and then Thor later on and she ends up in Asgard. And that's how they end up on the car. And I do like that. And I do like the fact that says just it was just moments before Loki was knocked out of the bridge before Thor that it made him get their weeks before him because it just kind of has to do with like space time and space time continuum. No, that's so that was just kind of cool. And I really did like that. But once hella just showed up on the scene and Asgard or whatever. I mean, she made this grandos interest or whatever, just like, I am hella the first born, you know, right for air to the throne you will bow before your queen and blah, blah, blah. And I'm like, man, woman, who are you? This is Odin's town. Thor got the crown next.  And she just wrecked shop and just keeping them bought most just boss hard all of them. You know what I'm saying? And that was just dope. I loved it. I was just sitting there like, yeah, get it. Yeah. I mean, I loved it all. That was like well choreographed. She even took like a spear through the back and it came out of chest, but she's so powerful and the longer she's on Asgard, the stronger she gets. So I was just like loving all that. You know what I'm saying? And like, even though it was like a hundred soldiers out there with ships and stuff and she was just knocking them all down. Oh, yeah. Let me go back for a second.  I care for them in the comics, but the weather bird portray in these story movies in the MCU. It was somewhat disappointing. But I'm kind of hoping that they could have lasted to like Thor or the next door film or something like that because we really didn't get to send them fight that much, especially Lady Sith. I don't even know where she was or whatever.  I did like all that. That was dope. That was hella. You know, you like that. No, I did like all that. That was that was nice.  He's a snake, man. He's a snake in the grass. He just betrayed all of his people.  But, you know, hella just showing up and wrecking shop on everybody when she was in Norway and when on Asgard or wherever. I do like that a lot. That was nice. Excuse me. But now going back to the car. We get to what happened? What was the first time we saw?  That was pretty brutal of her.  She was great as well.  I'm not going to go through every scene of this movie. I'm just trying to remember all the parts that I really did like and that really just that really just stood out to me. But I was really disappointed with Scourge the executioner just the way how easily he betrayed his people or whatever. Now, let me move forward just a little bit. We got to see the Stan Lee cameo. Of course, you know, Stan Lee, we love you. Thank you for everything that you've done and all these great characters. That's great. That's lovely. Jeff Goldblum. I love him to death.  I mean, it's like he doesn't even know that he's doing wrong or whatever. That's just how warped he is in the mind. Just like, he's just like, oh my God, it's sticky and, you know, all that.  You know what I'm saying?  I like this character. I don't care if it's just Jeff Goldblum, but him as the grand master over the contest champions. They knocked that out of the park. And if you don't know, the grand master is brothers with the collector, Benicio del Toro. That's in the gardens of the galaxy fans or whatever. But we got the grand master, the grand master, you know, with his reign of supremacy officer car. And I liked all that. I like Korg as Taika Waititi, the director. We got Mika or whatever. That was like a perfect adaptation to me. You know, I really did enjoy that a lot. And, you know, the fight in between Hulk and Thor. Thor probably would have won if Jeff Goldblum didn't cheat with the little remote control this thing or whatever, because that was that. I love that fight. It was even for the most part. And Thor was getting his butt.  You know, sorry, sorry, buddy. He got you there. But, you know, it was lovely. It was great and Thor probably would have won. But, you know, he cheated or whatever. Now, something that I just really didn't care for in the film is like it was just so blatantly obvious that Hulk was a CG character and like it just stood out. I mean, it necessarily I mean, it was noticeable, but it didn't like ruin the movie for me. But it was just a horrible contrast, you know, like they could have put more money or time behind that. I know that costs a lot of money, a lot of moulin, but and for some reason, they changed the appearance of Thor not Thor, but Hulk, like he looks different. You know what I'm saying? You know, but that's okay too. But something that I did not like was the explanation of how Hulk got to Sikar because when I was trying to escape Sikar, vacuum was like, yeah, we go through this one portal right here. It's going to take us 18 months. You know, and like in the Planet Hulk series, Sikar is like what is it? It's not even in the same universe. It's in a freaking different dimension or whatever. I don't know in the MCU if there's a difference between realms and dimensions, but it's in a different dimension. So for just to say that he got there, you know, from the Quinn jet, like that could have been fully explained a lot better and I didn't like that. I didn't appreciate it. You know what I'm saying? Like why couldn't they just could have been like, you know, I don't know. They could have came up with something like even said, well, Hulk probably wouldn't have known that he flew through a portal or something like that. I was in the Quinn jet and I flew through a portal. I don't know, but for him just to get there like that. I mean, you know, I just didn't like that. They just could have explained that a lot better. You know, but hey, it is what it is, but now I'm thinking about Valkyrie and I loved her a whole bunch. Yeah, she was lovely.    This is like a family issue. I'm not guys. It's family. What I need to do with this and I kind of completely understand where she's coming from. You know what I'm saying? So I like that too. What else do I want to talk about in this spoiler review? I talked about the whole Hulk versus Thor fight. I talked about Valkyrie, Stan Lee, the beginning. I love hella. I love hella to death. Let me see. What's next? What's next?  So I don't just want to regurgitate the whole movie and just, you know, I mean, there's no point in that. I just want to talk about the stuff that I couldn't talk about that spoil, you know, that I couldn't spoil the first time. Let me see. Wow. I mean, do I want to end it here? Is there anything else that I want to talk about?  That whole shot was not in the movie. I mean, we had Hulk, Thor. No, we had Thor, Loki and Valkyrie there, but Hulk was fighting a famous wolf or whatever. Now, it just seemed in the trailers badass to all four then we're going to face hella one time. I was like, man, this is going to be good. There were Avengers or whatever versus her and I would have loved to see there, but that's like false advertising to me. You know what I'm saying? And I just, I don't like that. You know, saying just don't, don't do that. You know, just, you know, if something is going to be in the trailer, it needs to be in the movie. And if it's not, you know, because I was looking forward to that scene. Like I really was like the whole time I was like, man, okay, we still going to get this final showdown where it's like all four of them versus her or whatever, you know, and we didn't get to see that, you know, and it's just very, it's just very frustrating and, you know, but what was also funny is the devil's anus thing.  Also something that I liked is where Mark Ruffalo showed up the way he transformed, transformed from Hulk to Mark Ruffalo because Hulk was funny and Mark Ruffalo was funny or whatever. You know, he was just like, hey, I'm done. I don't want to fight anymore beings. I don't want to fight your sister. This is a family matter. No, you care. You don't love me.  You know what I'm saying? You know, I do, I do like all that for some reason. Loki just hasn't got his stuff together yet. He still wants to betray everybody and I'm just like, dude, why, like why? Because why, why do just be loyal to your brother? You know what I'm saying? Like, he's just like, look, if I turn you in, they're going to set me up nice.  Just be loyal to the people that are loyal to you and everything will be okay. But, you know, this is something wrong with Loki, you know, product of his environment. He found out that he was a frost giant or whatever. And of course, he's still bitter about it. It's nobody's fault. It's not Odin's fault. It's not Thor's fault. Of course, it's not Valkyrie and the Hulk's fault, you know, but, you know, that's just, uh, that's just who Loki is or whatever. Now, of course, at the end of the movie, we got to see, um, oh, something else that kind of pissed me off was at the very beginning, Skr's executioner had, he was like, yes, I got these two guns right here, um, off of, uh, Midgard from a place called Texas or whatever. And he was able to kill the Asgardian zombies, the Heller Rolls from the dead. I'm just like, these are normal assault rifles from Texas. Like, why are they able to do so much damage? I mean, if he did, if he modified them with some type of Asgardian technology, okay, hey, fair game, I'll give that to you.  Also, the fight, Thor got his eye cut out. You know, that was cool too, because in the trailers, you know, it looked like he had both eyes when he was doing the lightning thing. But of course, they didn't want to ruin it for you and he only has one eye now and I did like that. And all the choreography at the end was quite nice.  I did like that as well. That was pretty cool.  I do like that a lot. It was he wasn't that he didn't have big speak a big speaking part, you know, which is fine. I guess, but you know, his role still was very important or whatever he did have. He did he did play a prominent role, you know, in the in the film. Now, of course, they had to put, uh, Serda's helmet on the eternal flame, which raised them up to beat Hella and excuse me. And of course, all of Asgard was destroyed. And you know, because I had no other choice, you know, because Hella was going more powerful with Asgard being there and she was going to hunt him down. So it's like, look, we can rebuild somewhere else. So I kind of understand that or whatever. But as you know, when Loki was down there, he got the he got the Tesseract and he put it, uh, you know, I know he stole it. Of course he did because in the last credit scene, that was Thanos ship. That was obvious or whatever.  And that's probably how Thor is going to end up on the windshield of the gardens of the galaxy in that Avengers affinity war trailer that leaked a few months ago. Because of the very beginning of the trailer. That's where. So I wonder, like, did everybody else in the ship die or there were other Asgardians and stuff like that?  You know, I don't know. I hope they got away, you know, that because there would be a lot of death.   Now at the very, the last credit scene at the end with Jeff Goldblum, that was just kind of a throwaway. We could have done without that or they could have gave us more. But you know, I was a little bit disappointed about that. But you know, guys, that just sums it up. I mean, I still love this movie. It's in my, well, that's next video where I'm going to talk about where this video ranks or whatever. But I really did enjoy the mess out of this movie. Is there anything else that I want to talk about before I cut this video off as far as spoilers is concerned? Man, if I was doing this live, I can like read comments and stuff, but you know, maybe that'll come at a different time. Let me see. Is there anything else that I want to talk about in the Thor Ragnarok spoiler review? Spoiler reviews, spoiler review. I can't think of anything else. I'm thinking about certain scenes. I don't know. I mean, because all I'm going to do is talk about things that I couldn't talk about before we're spoiling it. But I think I've covered everything that's worth covering spoiler wise that I liked and I did not like because I didn't like the beginning. I didn't like the explanation of how Hulk got there to secar and yeah. So just like I gave this movie a 9 out of 10 and my normal review, I'm going to do that now. 9 out of 10. But guys, that is just my opinion of the Thor Ragnarok. This is my spoiler review. Have you seen it?  So go ahead and give me that thumbs up subscribe to my YouTube channel becoming my subscriber so you can get all the content that I have to provide. You can click the bills to be notified.  Do all of that. Go to my website. Check me out there bookmark it. I do write and read reviews guys and look me up on social media, Facebook, Instagram and Twitter. All that good stuff. Also, I see our problems for the get. So usually I get mad about, you know, committing moments in serious times, but it was just so funny when Hulk was like, do you really want to know what Mark Warflow Bruce Banner was like, do you really want to know who I am? And he jumped on the bridge. He didn't transform. He just facepalmed himself, face platted himself into the bridge. Well, that was funny.  You know what I'm saying?  I like that. But subscribe to my channel. Do all that. Look me up on social media and guys, I just want to thank you for tuning into my opinion slash spoiler review for Thor Ragnarok before you go. Don't forget that my name is Branny Keith Avery and this is just my pain or that's just my pain. Peace.