Web Development: Create Real-world Website (Bootstrap 4, HTML 5, CSS 3) | Lukas Vyhnalek | Skillshare

Playback Speed


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

Web Development: Create Real-world Website (Bootstrap 4, HTML 5, CSS 3)

teacher avatar Lukas Vyhnalek, Microsoft Employee, Programming Teacher

Watch this class and thousands more

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

Watch this class and thousands more

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

Lessons in This Class

15 Lessons (1h 35m)
    • 1. What we will create?

      2:47
    • 2. 01 Navbar

      2:30
    • 3. 02 Home page and Navbar fix

      5:03
    • 4. 03 About us

      5:37
    • 5. 04 Pricing

      8:47
    • 6. 05 Services

      2:50
    • 7. 06 Team

      4:51
    • 8. 07 Call to action and Contact Section

      12:10
    • 9. 08 Footer

      4:19
    • 10. 09 CSS Navbar

      7:37
    • 11. 10 CSS Pricing

      8:42
    • 12. 11 CSS Services

      9:53
    • 13. 12 CSS Team & Call to action

      6:35
    • 14. 13 CSS Contact us and Footer

      5:10
    • 15. 14 Responsive website

      7:46
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

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

150

Students

1

Project

About This Class

Web Development: Create Real-world Website (Bootstrap 4, HTML 5, CSS 3). Developing a responsive website has not been easier. Using technologies like Bootstrap 4 you can create beautiful websites within few hours. In this class I prove it. 

We will create fully responsive HTML 5 & CSS 3 website. If you are a experienced web developer and you want to create websites this course is for you. But even if you don't have any experience this course is a good match and can provide huge amount of information!

Meet Your Teacher

Teacher Profile Image

Lukas Vyhnalek

Microsoft Employee, Programming Teacher

Teacher

Class Ratings

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

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

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

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

Transcripts

1. What we will create?: okay. So debated we will actually create. Is this one? As you can see, there's like some enter with a simple Neff navigation. Right? There is a button inside it. Then we have, like, this huge picture with a some text, and then we go to the about aspect section. Okay, Another picture and another text, and then we have the pricing section. Okay, This one looks, in my opinion, quite cool. Okay. We have, like, the order now buttons and the batch at the top. Then we have the services with a CSS animations. Okay, So that when we have our over the over the element and actually create, like, bridge pretty animation, in my opinion, OK? And yeah, then we have the our team section where we basically have, like, photos. And when we have over eight once again, it will basically display the information about a person, okay? And what it does in the company, So yeah, that looks quite cool. And then we have the call to action and the contact us page. Okay. Inside here we have just, like, simple form. Okay, I just click on something I shouldn't have you had, and then we have, like, name, manage and stuff like that. And then we have the photo. This is like extremely simple footer, right? We have only some navigation inside here. Some text and the name. Okay, Debate on a tablet on an iPad looks actually like this. So we have the drop down menu, just classic. Then we have everything aligned to center and there's the pricing. OK, so we have pricing. It keeps the same size and the services gets a bit smaller body. It just fits these 50 page quite nicely. In my opinion, we also have the culture action. Everything is lined to center and the form also looks in my pin and quite good. So yeah, let's look also at the Mobile Movil version. As you can see, I'm displaying this on an iPhone X. And once again, the menu looks like this. And yet basically, the content will get aligned to center. Now, of those will become just a day with off 100. So all of those packages that you can buy and the EDI services looks great and underneath we should have the team. Okay, so once again, one person and every person have the with 100%. And then we have the call to action. And the ones again, the button and the contact us. It looks quite similar to the to the actually to the tablet size. But here it was great, in my opinion. So yeah, that's what we will create. 2. 01 Navbar: Okay, so I have my visual studio coat opened. I have the boots drop extension installed, so let's get into it. I already created the index dot html and the main dot c assess and I also have the image folder. Well, where I have all the images that we will need. Okay, so let me start with the index dot html So I will use the bootstrap four extension in order to start with the bootstrap free template. Okay, so inside here, the title will be just starter. And I will just close this explore so that we have more space. Cool. So as again noticed, there is the bootstrap and the link to the bootstrap CSS. I will also linked to the to our main that CSS So right underneath that I'll just writing comments for just main CSS and also the link back. The Eurasian will be star sheet like this, and the reference to it would be inside CSS and dandy main CSS. Cool. So it just goes the stack and save this and nothing that we want is the font. So the fund, in order to get the found, we will use something called Google fonts. It's a free tool that you can use, and you can basically use any phone from this. So, Al, just use this one D Roberto for font. And in order to use it, you can just click on this salad. This fund right. As you can see, there is the phone that you just select it and if you want to, you can customize it. You can select what weights do you want. So allergies is the vault and extra bald for the headings. And yet now all you need to do is just copy and paste this thing and you have your phoned ready to go so like this and save the file. Cool. So right now, let's get into the actual theme. So as against he up here, we have a navigation. So in order to create that, I can once again use the bootstrap for extension. And I want a enough bar and let me just use the default for now. OK, so before not bar default and hit Enter and Dina Bar 3. 02 Home page and Navbar fix: Actually, we are not done with the navigation. So one thing that I forget to do this at a comment which says that this is a navigation and this is really important if you want to later on managed the goat. Okay, so you know where each section off the page ISS and nothing that I forgot is too added this nuff glasses. So as you can see, there's enough bar light and the background light classes. So you want to get rid of that? Because when I take a look at this theme, as you can see, there is no background. And when we start squirreling, there is a background. Okay, you may not be able to notice that because it's like still white body. It doesn't matter. Okay, so there's one thing and another thing that I forgot to do is make de Navarre fixed. Okay, So in order to do that, I can just write fixed and top, And that means the enough bar will stay at the top of the page no matter what. Okay, so let's move on to the home page. So first of all, I will write a comment, and inside here we'll have the home page. So let's take a look at how it actually looks like. So we have a screen. So basically a image and then some heading next and button. So let's get into it. So first of all, we will write a section. Okay, so this will be the section. And let's add it, a class off the home. So class, home. And also, as you can notice, it reaches even to the end. Right? So even behind it, I'm not sure whether you can see the right now. Bad. Yeah, that's so inside here. I would just write container fru it. So that's the difference between container and container. Fluid container basically means that you will have at the edges. You will have some space, right? And container. Freud basically means that you will take the whole page. Okay. Cool. And yes. So let's then move on and create a role. And inside of the world, we want to add Deco large six, right Sodi call large and six. So basically it will take half off the page, okay. And inside here, which is want to add the image so there will be just some out. Yeah, we don't really care about it right now. And also some classes and the glass will be just image fluid. So that basically means that the image will take all these base it can. Okay, and then we obviously want to define the source so the source will be in the image folder and then it should be the sea screen if I'm not mistaken and let's close the deck. So let's see whether that actually works. So if I were loaded page, there should be a Michie, a terrorist. And also you can notice that the image is a bit moved to the to the bottom of the page. So let's actually do that right now. So inside here we will just add a margin top 25 and betting on why to five and yeah, we also want to move it from the left, so that would be a batting to the left. And then we also five. So, yeah, let's save it. And let's move on to the second part, which is detest. So once again, we will create a diff with declasse cool, large and then six. Okay, so they will have the same size and We will also add the margin on why and we'll set it to auto. So that basically means it will be at the center on the Y axis. Okay, And let's also add a betting to it on the X axis. And let's say that will be five. So that means it's because the text would go to the edges off the deaf. And we don't want that. If there would be no batting on the X axis. Cool. So right now all we have to do is just defined heading, and this one will be just the H one. We can add some class to it if we want to style later on. So this would be like home content heading like this. And it says just this is just a beginning like this. And then we have a paragraph and the paragraph is quite simple. I will just grab it because it's just some alarm. Epsom. Okay, Gabi based that set, and then we have the button and the button is just a button check and we'll add some class to it, and the class would be button. This one button is quite large, so it will be a button large, and it will also be the primary buttons button primary. And it says, Learn more. I think Seoul is right. Learn more. Okay, so that's this home page and let's see what we just created. So if I were load it as you can see, it looks quite similar, actually. Right, so that's quite cool. So that's the home page. 4. 03 About us: Okay, so let's move on to the about US section. So as you can see, it's still a container through it and there some text. And then there is the image. So is write it down. Okay, so where my hope Age Okay. And underneath I will write a new comment and this one will say about us and all right, there shouldn't be a space And let's write section and this section will have the glass off about us or just about it doesn't matter and it will be a container fluid. So basically the same thing as before. And let's go sit down and inside here will write d diff with the Class Ro same thing as before. And once again, you can notice that there's 1/2 of debate its text and then the second half, which is a some some image. Okay, so what we can do is maybe couple basted by the Al, just write it from scratch so the first death will be once again call large six. It will also have the text align to write so text right, and it will also have the betting on, except to five and margin on y set to auto. So basically, there will be a space on the X axis and there will be it will be aligned to the center on the Y axis cruel And inside here we want to ready text, so there will be an h do. And this one will have the class off a section heading. We will later on silent in these Yes s. And it will just say about us like this. And then we will have some paragraph. Okay, Same stuff as before. I will just be based. It that will be simply are copy and based. Cool Oda's long text. Cool. And the last thing is the social menu actions. So what is that? Well, that's an on order list. And inside here we would like to style. It basically is enough. So that means it will be aligned next to each other like it is right here. And we also want to justify content to the end. So justify content and so basically move it to the right. And let's also add their a class off social media in case we we want to style it later on in the CSS. Cool. Then let me also define d actual items solar sytem, and we also need to add some padding to it because otherwise that they would be just next to each other. So patting on the X axis and let's say just two, that means quite small padding. Then we will have the actual link. So obviously inside here, you want to boo dealing to your to your page or something like that. I would just leave it empty, and then we will have the I can. Andy Aiken will be just in f A. And so that means phoned. Awesome. I can. And this will be just Facebook, for example. So all right, that shouldn't be done. So let's keep it on the one line and say this thing and let's see how it looks. So if I were low debates, there's the about US section, and I can't see any Aiken. So that's probably because we didn't import the the fund. Awesome, Aikens, Right? Okay, So in order to fix that, we can simply just type into our browser a phone Awesome CSS link, and it will basically search for some link that we can use in order to load it inside our HTML. So the Odyssey links, so simply copy, paste it into your code. So inside here I will create a new link with the relation being a style sheet. So style sheet like this Andy a traf will be equal to whatever. We just got beat and let's goes this thing and let's see whether that actually works. So if I are loaded, Page Darren is There's the Facebook Aiken down there. Cool. So let's write down all the other. So as you can see around here, I will just copy paste the whole list item, okay? And the list item is just basically one item inside the lists, right? Makes kind of sense. And inside here, let's just change. Does to YouTube, Twitter and Google. You can obviously add whatever you want. I will just keep it this way. Analyzer. Low debate. And yet there There they are. Okay, So I made a type of cool. And then what do you want to do? Is basically add the second part. So basically the image. So the image we'll have the will still be like a call. Large end den six, sicko, large and six. And let's close this thing and let's at actual image. So the image will have the glass image fluid so once again and will basically take all the space it can. And then the old will be something and the source will be the image. And there, I think, is the iPad cool. So if I save it and reload the page, there should be a image. Daryl s cool. 5. 04 Pricing: All right, so let's move on to the pricing section. So underneath this section, I will create a new comment and this one will just say Bryce Inc Okay, and let's start it. So we will have a section with the glass pricing in order to style it later on if we need to. And let's add some batting to it. OK, then we will have the container. So right now we want the contents to have the edge is right. This is the image we don't want it to have. The edge is bad with the content. We want it. So inside here, I'll just write and container not containing through it. And then what we have, it's a row. So there, with the glass off a row and inside euro, we have some comes right and inside. So we will create each article and each article have, like, free. So that means go large free. Oh, sorry, Free like this. And it has also some styling. So it have the boots rep card styling and also D card pricing in case we need to styled later on, and the next will be aligned to center and what we also need We will add some batting on the X axis. That means on this access and we will have some margin to the bottom of it. So something like four. Cool. Okay, I need Teoh. Close the text, and yet that's it. So then what we have is up here. If I take a look at the pricing, obviously the background and the colors will be taken care of by the CSS. But then we have some span around here, so let's actually create it. So this will be a span and there will be a few classes. So obviously the text iss somehow Boulder, right? So it's just Addy Class H six. So that means the text will be bald. Let's also add the glass with around 60 I would say so. That means the with off the element will be 60%. We will also add the emergent on the X axis to also so that means it will be aligned in the centre off the X axis off the element. And let's also add some batting on the X axis. Let's say four and also batting on the y axis that smaller. So let's say one And also, as you can notice around here, it is surrounded at the bottom. Right? So let's add the around it bottom class like this. And let's also add the background primary. Okay, we can edit it later in our CSS, and the text will be white. And also, we have some shadow around it. If I'm not mistaken, so shadow and this one will be probably large. Okay, so I'm not sure whether you can see it. You should probably see the right now, and yeah, and it says just enterprise. So enterprise like this. Cool. Okay, so does thes span taken care off? Oh, all right. So I'll just start a new line and then on the new line, what we want to do. Well, we would like to actually take care off. This price sinks, so that's great. A new def. With the class background transparent. We will need it like this. OK, And then also de guard header. So, yeah, that means basically header off this whole card. Okay? And then we have the batting and eats up. Let's see, for Andy, there's no border, so border will be just equal to zero. Well set to zero and yeah, inside dead. We will have some, like H free headings heading and inside. Here we will have some classes, so the glass would be like age one. So that means it will be a bigger one. And let's also add deformed waits. Let's say normal. Okay, so we will add it. Even the fund. Wait. We can also add it like the data pricing value and stuff like that. But I will take care of it, probably later or somehow later. So inside here we will have the dollar sign, then the price. So inside here, I'll just write the span with the glass price like this and inside here is $12 and then we have another def with another spin. So there's a span and it's 40 40 per month. Okay, so spend with the classes age six. So this one will be quite smaller. And also, as you can notice, the text is somehow muted. The color is muted, so let's make it takes muted. And let's also add the margin to the left. Okay, so that it is not directly next to each other. And inside here we'll just write slash and burn month. Okay, so that should be the pricing. Taking care off. If I'm not mistaken, it's a bit larger, right? And yeah. Then we need to take care of the actual body. So inside here we will have the death off the glass, one of the glass card body. So we will still creating the card, and there will be a batting. A detail will be equal to see you. Oh, okay. We need to get rid of that. And then we have the UN ordered list, and that basically means all of those items. So the UN ordered list will have also some classes. One of these will be a list on styled. So basically, there's no like dot in front of other or or something like that. And we will also need some margin at bottom and also some padding at the bottom because we will have the disappearing at the bottom will be equal because we have. There's deep adding. Then there is the border. And then there's the margin. Okay, cool. And yeah, inside it. We actually want to have the all of those items, so there will be like, a list items times five and you can just copy based it. And oh, sorry times for and I'll just cover based those things inside here. Okay, so that's this swan, and that's this one. Obviously, he can move the video if you are. If you don't like me writing the code or just simply copy basting some text and yeah, but there's just two more to go. So obviously, if you want, you can write your own prices and Dior your own text. If you want it pretty much doesn't make sense to have all of those prices be equal, right? Robot Anyway, right now, let's also add the buttons so this will be underneath. No, actually, this will be just underneath E UN ordered list, but inside the body and inside here will be just a button. You can also add a type to it, so this will be off type button, obviously, And then we will have a glass and the castle beaches, button and button primary. And let's also add some marching and D bottom and let's set it to free. And it says order no. So order. Now let's save it and let's actually see how it looks like. Okay, so if I were loaded. Page. Okay. It looks quite good, right? It's almost style properly, as you can see. Cool. And they're So let's also Cup based does. And we need to take care of the second. Well, because as you can notice in the theme, the 2nd 1 is a bit larger, but we will take it. We'll take care of it in the CSS. But only thing that I need to do is just somehow markets. So inside here I will just write something like promote offer or something like that. Cool. And yet and otherwise does are all the same. So if I just based them multiple times dared there should be. Yeah, Yeah. Look cool, Okay. 6. 05 Services: So let's move on to the next part. And that is these services. So let's get into it. Obviously I once again want to write a comment. So did we know What is this section about? So services. And yes, it was started. So inside here, a new section with the glass services. Okay, um, we can also you can also notice that the background is somehow lighter. As you can see, there is white and this is somehow lighter. Sodi background will be just lied. And they're so so some batting and eats up. If I'm not mistaken and it's like five, Okay. And then inside here, we will also do the container things. So inside here will be a new diff with the glass container and inside it we will have a new age too deck with the class section heading so we'll just style it later on in D. C. Assess And inside here we just ride these services or yeah, obviously you can write whatever you want. And then we have the death with the actual class rose because inside here we have all of those articles and those articles are just a elements. So another def. Right. That's the article. Actual and inside here will have a few classes. So at the large screen, this one have a four size and at the middle screen. I think this should have the six. So basically, when we are on tabloid, there will be, like two articles at one row. Cool and then for each article we have, like some American soldiers like I can with the glass off funds. Awesome! And there's like laptop, I think. Okay, so there's the laptop and then we have some heading, so this one is just like heading for it, says Design. And then we have a paragraph with some large subsume. I'll just copy based it. It's a copy and then based like this. So this one is quite simple. We will just style it a lot more later on inside the CSS. So if I just reload the page and actually take a look at how it looks like yet it looks terrible body, I will just go. We based it several times. I think there's six of them, the other or six of them. Obviously, the Aiken and de Text has changed, but I will just keep them, give them the same just to safe sometime. Okay, cool 7. 06 Team: all right. I just realized that I forget to put a this into a card. So inside here will be a diff that will basically put all of those things together. And let's also call it like something like a single service so that we can style it later on. And also there's a shadow as against see so shadow like this. And yes, so let's put everything inside it. So all the content just control X and control we and save it. And yes, so right now, let's just GOP based all of those, OK, I'll just put it like this and then six times based want to free for five and let's save it . And when we were low, the theme there should be, like six services. Okay, right now, there. You look quite silly, but it will get better, I promise you. Okay, so let's move on to the our team part. So inside here we have basically the team members, and when we have over it, there's some like I know, some text. Okay, so the name and one D person does. Okay, so let's start with the common for this section, so this will be deem commend. And, yeah, let's also start with the actual sections. So this will be a section on a page with a glass of a team. So in order to style it, and let's also add some margin to it at the Y axis. Cool. Then we have a diff with the glass container. So container like this and inside here we have heading. So h two I forgot about glass. So class will be just a section heading right, so section heading. And there's also some margin at the bottom at say so this, like five and inside here, I'll just write our team. Okay, let's save this thing course. So let's actually move to those images. Okay, this will be a Class ro once again, and then we once again at those comes. So the glass a column on the Let's actually write it on the middle so it will be It will be same on a tablet and yeah, let's also at a margin on view vie access like free. Cool, then also, let's add deed. If so, this is actually a card, so let's style it. This will be a card. It's half the text lined to center, right? As you can see when we hover over it, it's aligned to center. And it also has some shadow shadow like this. And inside here we have actual image. So image with the glass card image top. Okay. And then also some cult like this and I made a typo, OK, this should be image. The alternative text will be just empty for now. And also you can probably the find the source which will go to images. And then there's the team won. Cool. So let's just close this and let's move on to the card body so deaf with the glass off card body. We need that in order to start it in CSS. And then we have just like some heading. This will be off heading off the five level, right? It's not that important, and there will be a class off cards title inside here. We'll just write your name here and then write some paragraph for the position that you actually have. And there's like, see Oh, I had no sales department. It doesn't matter like this cool. So that's actually the one team member taking care off. So they're six of them. I would just copy paste this 12 free for five, I think. And the Yeah, let's change. There was so team, remember to you probably want to change also the names and the position that they do body at 40 time purposes. I will just keep it simple. I change only the images. Cool. And let's actually take a look at how it looks like if I were loaded page, there should be a new section. Okay, those images doesn't look quite good. Yeah, there's the name and what D person does. As you can see, the card styling is not that bad, so you can keep it this way if you want. 8. 07 Call to action and Contact Section: Okay, so let's move on and let's move on to know. Okay. The base doesn't want to lower the right now. They're it. It's so culture. The action. Okay, so that's quite simple. Okay, let's write a comment inside here that says call to action. And this is just a section we need to define a class to it, right? Because we will stand it later on in D c ss. So the class will be something like Call to action. And it's also at a betting on the Y axis, and this one will be five. Cool, Dan, let's move on and start with the container and was right, those dips. So there will be a different the glass call large eight. Okay, so that's 40 text, and it will be just ah, line to the right like this. And there we have some heading, so heading free and this one we can style it may be so l just at a glass to it, and this one will be call to action heading like this. And it just says something like a call to action. Okay, that's out of the box, called to action, and then so save this thing, and there's also a paragraph underneath it. I will just go free base. Disl, arm if something okay, copy and based. Cool. And okay, so let's move on to hear out to save it. Okay, here I am. And what do we want to add next? We want at the death 40 button. Right. So there will be a diff with the glass column large and then four. And there will be margin on the Y axis will be auto. So that means the button will be in the middle off the element, basically. And inside here, I'll just add the button. So there will be a class off button, and it will be a large buttons. So button large. And yet it's a primary button. So button primary like this. And inside here, we will have just the learned more and save it. So that's basically it. If I were a low debate and see how it looks like Okay. Yeah, there it is. Okay. I made somehow a mistake. Go large. I forget about hero. So inside here will be a diff with the glass throw cool and all of the content will come inside. It So if I just control X and control we and save it and reload the page, there should be a button. Okay, there it is. Cool. So that's the call to action. Taking care off. Let's move. Wanted he contact us. Okay, so around here I will start writing the contact us like this. And when we take a look at the actual theme, you will see that there is, say, heading There's a map and there's a form. Okay, so let's do that inside here will write a new section with the class contact. You can call it obviously, however you want. As you can see when I go down with the menu, there's white. This is light, so D background. ISS light. Cool. And there's a batting on the Y axis, I would say about five Cool. It's closest thing, and let's start righting the actual content of distinct. So inside a container deaf, we'll start writing a hero. Well, actually, not a row. We need to, right first of all, the contact as heading right. So instead of nude, if I was is right and heading off the level two and this will have a class section heading like this. And we will also add a margin to the bottom to it. Cool. And let's go. This one contact us like this. Cool. Right now, let's also create the okay. This should be there. All right. Likeness. And yes. So this will be a new diff with the glass. Ah, Ro. Okay. And inside hero, we will have the Google maps. Right? So there will be a diff with the glass call large six and margin on the why. Exes will be auto so that it means it's aligned to center. And I'll just based a Google map coat that I just generated. You probably also want to generate some, and you can just do it with the Google Maps. A p I. And you probably want to add it. The place where you you will show the map. Yeah. I'll just choose the Manhattan. Yeah, anyway, And the second part is actually a form, right, so you can define the action to it. I'll just skip it. The fund have the is, like, the same size, right? So that's like the large six, I think. And yes. So let's close the deck and let's actually start writing the controls. So there's a diff with the glass form group if I'm not mistaken. So there should be a form a group like this, Okay. And yeah, then we have What do we have? Actually, I forgot. So we have a heading. You have the actual input, and then we have some some note, so Yeah, let's do that. Well, that's not not actually a heading. That's just a label. And this field before the email control. And this one just says email, I think or email address yet that doesn't matter. And then we have a input and that there would be a type of it to it will be set to email. Okay. And the glass of it will be just a form control Still form control. Cool. And the idea will obviously be the email. So you can also define the name and stuff like that in order for this to actually work. We also need the area described by that means Oh, not details described by Okay, I'll just write it described by and this will be described by something like email help. Okay, I'm not sure where you can actually see the right now it should be able to see it, right? Cool. And yeah, let's also add the placeholder plays older and then it would be like enter email. Okay, analyst closed the attack, and then we have the small tech 40 hint, and there will be the i d off email health. So basically, this one right inside here we have d placeholder. Okay, Sorry the area described by and they should be equal to the I d. And I'm not sure what is wrong with the editor. There's something wrong. Okay? Yeah, it should work now. And yes. So let's add the classes to it. There will be a form text and the text. It's also muted, right? So muted. And there, there, some text. And I'll just be based. It off course will never share it. That's what they always say. And then I can just complete base this one and do basically the same 40 male. And for the sorry for the name. So there will be a name. Deliver will be 40. Name me type will be text three idea will be name and we will not be describing the name. Okay, so I will just get rid of this thing, Andy Placeholder will be just enter name. Yeah, I will get rid off this small tack. Okay, Because it's it's not in the final product. And then we have the message and the message as actually described like this. So inside here will have a message. And let's also change this one message the i d will be message. And instead of input, we will have something called text area like this and I'm not sure whether it will. It added, No, it didn't add it right now there it s So that's that's the ending tack and the acidity placeholder will be enter message, something like that. We will not be describing it anyhow or any under any in any other way. And yes, So let's also get rid of this one. And yes, so let's actually take a look at how it looks like. So if I reload this thing and take a look at the form, so there's the map, that looks quite cool. Then we have the email, yet it's fine and the message, but the message is quite small, right? We would like to add the euros to it. So inside here. We were, for example, inside here. I'll just right Rose. And there's, like, five of them. I would say so if I just writing down there and save it and they're loaded. Page Darren iss Cool. And last thing there there is a subscribe to our newsletter and a button, so yeah, let's actually write that down also. So underneath the message, we will start writing the subscribe to our newsletter. So don't be a different glass. Well, it will still be a foreign group, but this time it will be a form check. And inside here, we also want to write the cheque books. Right? So the input and the type off the in food will be a check box. So, like this and they're so so a class. And the glass is formed chick and yeah, phone check input. Okay. And yet and the i d could be something, but yeah, I'll just keep it like this. And lastly, we override the label. Yeah, we also need to define the late the i d. Because I'm writing the label for something. So for any check box and there is the I d books like this cool and There also are few classes, so there's a glass gold form chick label, right? So then basically takes care off the styling, and it's a subscribe to our newsletter. I would just gov based it so that it is faster, cool, and let's also ready buttons. Saudi Button is actually the most simplest part inside here. I just right button and add a few glasses to it. The glasses should be button. It's a large button, I think, and it's also the primary. Buttons are buttoned primary cool, and it's just just submit So Summit and let's save this thing. Yeah, and also the type could be like some It's type and submit like this and let's save this thing schools. So let's take a look at how it looks like if I were low debate, subscribe to our newsletter Summit. Yeah, that looks quite good. 9. 08 Footer: all right, so it's also create E Footer. Andy Footer is actually the simplest part. I would say so, yeah, under need this section. I will start writing the comment and this is just a footer and there will be a a team of 50 meant Gold Footer and yeah, let's also add a few glasses to it. So it ever be a class off a footer in order to style it later on. And there will be like batting a Dietz up. And this will be just five. Let's say so. Let's actually take a look at how it actually looks like. And yet so there's the the name of it. So the name will be just like Well, first of all, we need to add it into a container and then we need toe. Have a row. Okay, so there's glass row. Well, not necessarily, but it doesn't matter. And then inside here we will have the Let's say it is like the size of an eight. I would say so. Call large aid and it have also a offset off to so off said large, too cool, and then also detects this line to center. So text center like this. And then what we have. Well, we have a link, and it's basically the enough vibrant. So enough, bar brand. Okay, so that's just the nef de logo in the foot are okay, And we have the reference to something I'll just write in like this. And, yeah, also the starter like this Cool. And then what do we have next? We have some text, so some be okay, and I would just copy paste this one Cool. It's a copy and and based it inside here based it Cool. And let's move on to D last part, which is the the UN ordered list. And it's like the menu Saudi never menu. So it's also at the glass off a naff so navigation. And yet inside here, let's start writing the list items. Each list item will have the glass off a no Vicodin. So nerve item, and then we have a actual link. And then we also have a glass off a knave ling like this and obviously some rough to something. Once again, I will just keep it plain and inside here our just right d about us about us like this and Let's actually save it. And let's face it a few times, you can obviously change it, change whatever excess, and let's actually reload the page and see how it looks like. Okay, that's at the center. Okay, We need to align this to center. So Eddie Naff will just right justify content to center. So, like this, let's save this Endless were loaded page. And then there it is. It's at the center and what we have in there. Well, lastly, we have the copyright, so yeah, Underneath this, we can just write a new paragraph with declasse copyright and probably a text mutes it. Okay. And let's also add a batting off free to it. And inside here is just made by me. You can obviously write your own name. It doesn't matter. And the others also like the copy. Copy Sinje. So inside here, let's write down like this. So does the copy. Oh, sorry. A This one that's need coffee. And then we have flagged the year. Cool. So it's saved this thing endless, actually were loaded and there should be the others. There it is. Cool. So, yeah, that's about it. That's the html taken. Care off. Let's move on to the CSS 10. 09 CSS Navbar: Okay, I get these. Yes, is ready. And here we go. So first of all, I defined the color theme and there are few colors. And yet I just put it in there just to keep a track. And then I also couple based some some stuff, some selectors 40 text area because it would take me forever to write those. And yes. So let's start with basically the overall stuff. And inside here we will style everything for the body and 40 body. We want the front family to be the Euro boto. Right? So from family and inside here, let's just write risotto. And yes, since Sheriff so sends sheriff like this and let's see what ordered it actually works. So if I were loaded page, the phone should be different. Yeah, I think it is. I think it is. If I'm not mistaken. Okay, so let's also ready on Wait for it. So fund wait and like this and let's make it 400. And let's also right the line. Hate and let's make it like 1.6 And yes, so was Reloaded Page. And there should be Yeah, that's there's a more space between those lines. It looks definitely better. Cool. So let's also Raidi basically overall for styling 40 Aikens, it should be like a blue Sodi the list of finding color and let's make it d this one this primary color. So if I just copy and face it's right right here and right the semicolon underneath, okay. And then we also need to write a phone size for it. So let's just make the phone size. I know, like wine 1.2 relative. Okay, so let's were low D page and see how it looks like. So if we were load OK, there, this school. And that's so right now let's also change the you wait So the foreign to wait 40 headings The heading one heading to and heading free will have the fund wait off 900. Okay, so this will be like, really bold. And then we have the h four and teach five and h six and those will have just deformed wave off off 700. So, like this and let's save it and reload debate and see what it looks like. Those headings should have yet. Yeah, As you can see, they are quite bigger cool. So another thing that we want to do is basically take care off those headings. So inside here, I'll just write a new comment. And OK, so like this Calmund and inside hero just write something like headings. And inside here goes the code 40 headings. So if you remember, we call them section heading so section headings or heading I'm not sure. And yes, so for all of those who want to align them to center so takes the line center and what we also want we also want I think the first letter should be blue. Okay, the first letter is blue. So in order to target dead, I can just write section heading and then first letter and let's make the color off it. And let's set it sooty blue. So the primary color cool. And let's reload the page and see how it looks like it should look quite good yet, as you can see there, this but it basically those are the important ones inside. Here we will just make it to the right, back to the right. Okay? And yes, so let's move on to the buttons. So our once again copy and paste this command and inside here instead of heading will be just buttons. And let's start well, actually, let me also add their buttons and fix. And because I think we used like D. Yeah, and the pricing we have those those badges kind of and they are black with the white text and inside here we have the color blue. So yeah, we also need to change that. And if I'm not mistaken, we used the background, primary class, dark background and in slash primary. And inside here we can just change the background color so background color and let's make it the black one. So let's guilty. It's up. Here it is. Here is the Black Juan. Let's base it and let's make it important so that it cannot be overridden. And let's reload the page and it should be black yet effortless. Cool. And let's also change the text primary. I think we also use that somewhere, and this should also have the color black so color and this will be also black. And let's also make it important. I think we used it, and but I'm not sure anymore, okay? And yes, so then we can actually style the buttons, so the primary button will be a bit different. Right? So let me actually take a look at them, OK? So when you hover over it, yeah, they go transparent. Cool. So the button primary. Okay, that that's wrong. One button primary like this. And so what do we want? The background color. We want that to be blue. Right? So the blue like this one, And let's also make it important so that we can we can't override it and then devote a color is also the primary one Saudi border color will be also blue. And let's also make it important like this. And the color will be just the ah wide one. So f a f f f and this one will also be important. So let's actually reload debate and see what it looks like. Those buttons should look a lot better. Okay, they do cool. And yes, So then we also need to change the hover effect. So when we actually have her over the primary button, we want the background color to go transparent. Right? So the background color Well, guilt transparent. Um not sure what it is has to be important right now, but I will just put it there and the color will go blue. And yes, so also that and that's it. So let's reload the page and see how it looks like. So there it is. Okay. And those Lukes, those look exactly the same, I think as does CIA. There is cool. Cool, cool. Cool. And I also forget to put the button bill inside this button if I'm not mistaken. So let's go back to the index and a Dietz up off debate. So there's the navigation. Okay, that should be around it as a bill. So if I were loaded Page okay, there in its core. 11. 10 CSS Pricing: all right, so the styling of the navigation is quite simple. So I'll just copy paste this comment and inside here, start writing the navigation and all that we want to do is basically make the logo bigger and the text make the color black. So yeah, let's do that. Sowed enough bar Brende Brende Like this. And this one will have just the phone size equal to, like, sue relative. So like this. And yeah, let's also change the color. So d a knave ling and also do enough. Our brand should have the color off a black. So this one and let's actually save it and reload this thing. And the header should start looking exactly like dose, right? So, yeah, it's half the bigger size yet, and let's actually take a look at the and this thing and they look exactly the same If I'm not mistaken. Yeah, it looks exactly the same. Cool. And also as a can notice the header is or the home page home section. It's also exactly the same, so we can just move on to the about us and in the about US section. What do we want to do this or all only change the alignment of the headings. So let's actually do that. So in I'll just guilty based this navigation put it inside here and instead of the navigation this will say about us and inside here we just want to target the section heading that is inside the about So section heading and we won't see your I d text align. And this one should go to write like this. And let's reload eep agency How it looks like it should be aligned yet area this court. So let's move on to the hardest thing. And that's the pricing. And as I can see, I forget to put the heading. Okay, so let's go back to the HTML home about us section. There's the pricing. So inside container I will have a H two heading, which will say, just pricing and it will have some classes so there will be a glass that will say, section heading section heading, and it will also like at some batting on. Why access? Let's say about five. So if I were low debate, there should be a heading somewhere in the middle. Yeah, there is cool. So yeah, let's move on to the bracing. I'll just copy based this comment and inside here, start writing deep pricing. And what do we want? Well, we would like to target deep pricing and change the background. So pricing. And inside here, I'll just change the background color two D blue one. So this one and let's actually save it and see how it looks like. So if I reload debate, it should be blue. Yeah, Terrace. And I should probably change this one to betting at the bottom on the because the padding of the top is quite large right now. So if I were loaded page, there should be less space. Yeah, there it is. Cool. So, yeah, let's also type target D section headings So pricing and, uh, section headings bracing that section heading and let's make this one off a color white. So f a f f f and let's sexually loaded Basie of it looks like And yet we also need to target the furs leather. So allergists copy faced this thing and put it inside here and inside here, right, the first leather and it should be even with the Beav right now. So if I reload the page. There's the pricing. Cool. So yes, nothing that we need to do is basically style. D card. There's a border, right, the border radius. We want to get rid of that. So inside pricing, I want to target D card. And I would like the border greatest to be zero. So burn radius zero and yeah, there's also a border and eat up right now. I think so. If I were loaded page, that should be no border Raiders fairness. And but they're still a space between the batch and the top. So inside here we want to just write Border Varda topped and let's set it to known like this and there. Let's reload the page and see how it looks like. Yeah, there were this cool and also in the theme you can notice that this is around it. A DIY bottom. So no, I probably went wrong in the HTML. So let's take a look. Yeah, instead of router bottom, it should say around it. So control h and let's just change it to round it bottom and let's replace all of them cool . Let's save this thing. Let's goes this thing endless were low distinct and it should be rounded a D bottoms. I'm not sure whether it is. It's not OK. Where did I go wrong? Round it off course. I made a typo while I fixed type of. That's like cool. So rounded. Sorry about it. And they had. Right now it should work. If I'm not mistaken, I hope it works. It doesn't because I didn't save it. And let's reload this thing now and yeah, there it It's cool. So, yeah, that's the around it. And let's also take care of the promote. So I think we added class promote to the one element that we want to make bigger right? And in order to do that, the weekends used the transform and the scale function. And let's scale it by, for example, 1.7 So basically by 0% story by 7%. And when I reloaded, as you can see, it's quite bigger, but it is still behind this third elements, so we want to also changed Easy index. So Z index and let's make it one. And let's see how it looks like right now. If I were loaded, page yeah, it's a buff. It and it looks quite cool. So let's also target delist. I think if I go back to the stinging me idealist, ISS has much more space and there's a border at the end. So I'll just started the list, Um styled, um, styled like this and what we want to do. Well, we would like to add the bottom border so border bottom like this and it will be just one pick so solid and the blue. So the primary color cool. And yet And also let's start at the Liston styled and the every L i o mint inside it, and it's also add some batting to it. So there is a batting on the why access the X axis zero and the your I accessed, Let's say just six pixels and zero pixels on the Y access. So let's actually reload this thing and see how it looks like it should look exactly the same yet us Here we go. And yet so that's about it. 40 pricing section, I would say. And yet also also there is a secondary button. So I forget also made a typo in D. C in the html, and whenever we don't have the promote class instead of primary. There should be like Ah, button outlined secondary. I think so, if I just save it and they're low, distinct and see how it looks like there should be. Yeah, that's it. So button outlines secondary instead of button primary. And let's change the other two also. So this one. And let's change also this one and there is this cool. So does the pricing. Taking care off. Let's move on to these services. 12. 11 CSS Services: Okay, so the services is probably the section that needs the most work. And as you can see, there is the animation right. There is the dose, two lines at the top and a deep bottom. So yet let's let's actually create that The animation is been harder to create and, yeah, but we will get We will make it anyway. And yes, so this will be a services like this. And let's actually start with the single service targeting. So we will target every single service and the position Nisa beer like for this one. And we also need to align the text to center so text align center like this. And let's also add some margin. Let's say at the bottom and let's say, like depicts sauce. Let's also add the transition duration to it. So transition and the duration would be like 0.3 seconds or something like Dad. And let's also add some batting still batting and at the X and Y axis at the X. Sorry, any Y X is this will be like, yeah, if he's probably too much solidity like 40 pixels and on the X axis, this will be like 20 pixels cool. And let's also said the background color, Saudi background color and this one will be the primary right? So the f f f f f f f this one and yeah, and it's about it. So does the services. Because, as you can see, the background light and and our white color is a different color and it looks quite good. So yeah, let's keep it this way and let's actually see what have we done? Yeah, it's starting to look like it, right? So, yeah, let's start to create the animation, actually, and the animation, If I will just play it once again right there is the one line and there's the second line underneath. So yeah, let's create deuce. So this will be just a single service and we will use the before and the after elements. So the before and this will be just basically the vine. A D top Sodi position will be absolute like this, and the top will be equal to zero and the left will be equal to see Roe and the we also need to define the content and this will be equal to nothing. So like this and no sorry like this and then also the transition. So the transition like this and this should be also like zero point free seconds and OK, so d left and right Or do we also need We also need the with and it should be zero And we also need the height. And this would be also zero cool and yahoo also the color also de color. So the background color and this one should be our primary colors. So the blue one like this and okay and let's just copy base this one. So copy and based it and this one will be the after after and basically the bottom will be zero. So bottom and ride will be zero right? Because the second element basically starts from the bottom, right corner and ghosts to the middle. And the 1st 1 starts at the top left corner. Ok, so that's why those and those cool. So right now, it's actually, uh, Hendel the hover effect. So when I hover over the single service, I would like to target D after Element and also did before elements. So single service hover Andy for l meant and what I would like to do it, said the with to 50% and the high to like know few pixels like I know free pixels and then let's actually see how it looks like. So if I go to this team, her low debate and however over one of those services, as you can see there it ISS, it looks quite cool. And, yeah, it's probably just like to pick sauce. This is big. And if it's just two pixels, let's reload this thing and see how it looks like. Yeah, that looks, that looks great. Cool, in my opinion. And yeah, cool, cool. So also, D I can change us. So let's also take care of the Eiken. So, yeah, let's keep it on this for a while. And yes, so let's target the Eiken single service and every Aiken inside it. And what we want to do are we would like to change the font size and we would like to make it like one point free one point sue relative and let's also ready with and the life and let's make it like 60 pixels and the same will go for height like this and oh, sorry inside here and let's also at a border to it, and the border have, like some lights, gray color. So it's like one pixel, solid and gray. Let's say just DVD, Okay, that's the border. And let's also define the line Hate. So that's 40 circle. Let's make it like 60 pixels. Cool. And okay, we also need to add some margin to it. So margin at the bottom and this one will be like 30 pixels. And let's also add de border radius, border radius and this thing will be 50%. So it looks like a circle. And, uh, yeah, it's also at the transition duration if or we maybe don't have to. So, yeah, let's actually reload this thing and see how it looks like it's a yeah, it looks exactly as does thing. Cool, cool, cool, cool, cool. So right now, let's actually take care of. Do you have a effect? So when we have our over the a single service single service hover and we would like to target d I, we would like to make the background color back around color. We would like to make it blue, right? So deep primary color and the color of the ICANN will be just white. So this one and yes, So let's actually take a look. So if I move this thing, save it and reload the page when we have our word, there should be the animation there less It looks quite cool. Yeah. We probably want to add the transition duration to its transition. Ah, duration. And let's make it like 0.3 seconds so that it is actually the same s as those other animations Analysts were Lotus thing, and let's have her over it. Okay, that looks quite cool. That looks great. Cool. And maybe even the border changes to Yeah, even the border changes to brew. So let's also do that. So inside here we would like to target de border color, and we would like to make it blew. So the primary color and let's save it, okay. And let's right now, move on to D heading. So the single service and it's like age four inside there. So what we want Well, we would like to change the front size and the font size would be like one point free relative. Okay. And also the fund weight is not that big. So he phoned Wave. It's just normal. So let's make it 400 cool. And yeah, there's also a margin at the bottom. So margin bottom and let's make it like 15 pixels school. And yet it's about it. So if I reload the page, let's see how it looks. And if I reloaded, Yeah, it looks pretty much exactly the same as dose. So yeah, it is basically this this thing taking care off we can also change the B if it looks. Yeah, maybe looks a bit different to be? I think so. Let's target debt. All soldiers a line. Hey, different. So, uh, single services and d the paragraph inside it and the phone size. I think it's like zero for nine Ram and And, yeah, like this And also D line Haith is a bit bigger. So line eight and let's make it like 1.8 or something like that. So let's see how that looks like now. Yeah, it looks like this. I think it looks Yeah, maybe the I probably make it too small. Yeah, about anyway, let's make it. Let's keep it this way. If you want to play with that, you obviously can. Bad. I think it's better if we just move on to the culture. The action 13. 12 CSS Team & Call to action: So the team section is quite simple. As you can notice, the there is a problem with the images that have a different size. So let's actually handle it. So principal ologists copy paste some comments, this one copy and paste underneath and inside here I will just change it to text. Uh, or the team. Yeah, that's better. So, team and yet inside here, let's target the team and the image inside it. So that's this, Like a card image. Stop if I'm not mistaken, So cart image stop. And yes. So what started this? And what we want is to say, said the hate to some I know some some size basically, and then change the property object to cover. Okay. And when we reload this thing, the images should be the same. Okay, so let's go back and we load this thing and there should be exactly the same size and yeah , and also I noticed that there is a border, right? So why would loads Ira fix de border? So there was a border, a tous, and we would like it to be none. So I'll just said it zero were a load this thing and There should be no borders anymore. Cool. So let's actually handled the card. So in order to do the animation, we need to handle the card. So I'll just said the Oh, also, I need to target only d card inside the team. So team card, because we have other cards inside the website. Right? So we don't want to have only those, and we don't want to only target d cards inside the team, okay. And yes, So we will set it hides to 300 pick sauce. And we also need to add the position to relative, and we also need the overflow to be hidden. Okay. So hidden like this. And yeah, that's about it. I think so. Let's actually reload this thing. And the those things should not be despite I think so. Those Adams, But maybe they will now know they are not okay. And yes, So let's also basically handled the the animation. So first of all, we would like to Okay, so let's start Indeed card body directly. So, team, and because we want to any maybe could card body. Okay, So, card body and inside here, we need to add the position and we need to set it to absolute. So in the beginning, it will not be seen. So let's make it like bottom, I know minus 106%. So, like this and yeah, let's also make the with equal to 100%. Okay, let's make the background color. So the background color is blue. If I'm not mistaken. So this one like this, let's save this thing. There's also a transition duration, so transition and this one should be like 0.5 seconds. It's OK. There should be an S transition, and they're also the color we need to change the color to the white one. So the FAA veiled this one and yes, so right now, let's handle the hover and animation. So when we have over the card, we would like to target the card body, city card body and the card body. We would like to set the bottom to 0%. Okay, so like this So basically it will appear ready. Bottom off the of the I'm the thing off the whole whole card. So let's actually see how that looks like. If I were low debate and hover over some item Okay, The pitch takes a while to load because the all of those images are quite large and I didn't compress them in any way. I just directly download download them from the UN Splash page body. As you can see, there is the animation. It looks quite cool. Another thing that we probably want to do is change the the size of the heading, right. So let's actually do that. So inside here should be like the team, and then it's or a team and then the cards title like this. And this should have, like, the phone size of, like to, let's say to relative Okay. And let's reload this thing and see how it looks like It should look exactly the same as the animation in the Indy template that we use. And yes, so if I have or over it yeah, yeah, it looks quite good. So if I take a look at those animations, they should be exactly the same. So if I have an overdose, okay, it takes a while, and I think those are quite bigger, right? So I made probably a mistake. Okay, so I foe. So let's save this thing and Let's see how it looks like now, and it should look a bit better. And they're so then when we have this thing down, we will probably move on to the call to action. So if I just keep hovering, okay? I'll just copy and paste the come and while it loads. Okay? Okay. Okay. Okay. Okay. Okay. That looks better. Cool. So, yeah, if you can see the animation yet, it looks better. So, yeah, let's move on to the culture. The action call to action. And this one is extremely simple inside here. All we want to do is the Stargate d call to action element. So call to action like this. And inside here we have deep background color, and we would like to change it to deep like one. I think that's this one. And the color should be the white one. So if they f a f f And if I were loaded page, that should be all that we need to take care in the call to action section. Yeah, Yeah. When I have already. Button. Yeah. Everything works 14. 13 CSS Contact us and Footer: okay. As I went from the bait, I noticed that the our team is not line properly. And it's just because I made a typo inside here. So instead of section, it should say just section heading. And when I reloaded Spain reload this page, it should look exactly as it should be. And yes, so let's see. Yeah, that looks quite good. And OK, so let's move on to the contact us and he contact us already. Looks quite good. The only problem is when we click on those inputs, they just don't look as good. So yeah was handled that. So first of all, let me just go inside here and take a look at how the actual actual form should look like. And yes, he can see the border is the different so yellow starting it. So these selector is basically for every input and they're so forever input. We would like to change the vertical so border color. And in my opinion, that was like some light grey. So some really light. So let's make it e. And this has to be important, in my opinion, because we don't want it to be overrated, and that's also JD Border eight ISS. So the border radius and this one should be zero. And let's also make the batting. And the batting should be like 20 pixels or something like that. And let's also make those importance. So I'll just go repays this one and put it inside here and inside here and let's see how it actually looks. So if I were low debate, yeah, it will take a while yet, but it looks and better cool on, Let's move on to the focus. So when we click on that there, see a border around it. But it's just some blue color. It doesn't look as bad as you think, but yeah, let's just change it. So we need to change the yearbooks shadow. And yes, so obviously you probably want to use something. 44 40 shadow some some generator write because writing it as a as a beginner Yeah, you want that you don't want to do that right. You want to learn first of all, what every property means, and then you probably want to move on to start writing and like I do Badia In the beginning , I definitely recommend some books yet again generator because it can be definitely useful. And yes, so I'll just finish the shadow. This will be 004 picks us and a black color. Okay? And let's make it important. And let's see how that actually looks like. So if I were low debate and click on some input, okay, there's the black box. Yeah, that looks better. Cool. Okay, so does the. And there's the contact has taken care off. Let's move on to the footer and the footer is actually quite simple, So I will just copy based some. I forget to put a common inside here, so there should be like contact. And let's also put one inside here, and this should be like footer cool and let's get to it. So the footer, I think we added a food or class to it and the background color. We'll be just the black wants so background color. And I think this one and the color will be the white one by default, right? So D F A f A f f. And let's make it important. I'm not sure whether this has to be. It probably doesn't, so let's just get rid of this, Okay? And and then let's also target dose elements. So we have Cem ace inside there. So some links and we want their d color to be wide one. So f a f a f f. And let's make this one important. And we also need to change enough Barbara and so footer and the lumbar Brent. And right now this one should have the color. Let's make it the brew one. I think I think it was the blue one was make it important and literal OD page and see how it actually looks like. I think we need to add some merge into it or some padding at least. Yeah, the starter looks good. Okay, okay about us. Yeah. You obviously want to write the those things body. In my opinion, it looks quite good. There's a bit of batting, I think, Yeah, there's definitely batting body. You probably want to add it in the HTML. So what's actually do that? So much guilt sooty footer and inside here is the brand. Let's add like the betting on the Y access and let's say like free. So if I save it and we're low debate, there is the batting, and yet it's about it for this section. I think it looks maybe there's a bit of difference between the batting spot. Yeah, I don't really care about it. 15. 14 Responsive website: Okay, So another thing that I notice is that the adding or D header just doesn't have a background. So yeah, let's also style. It's so let's go to duty. Not far. So navigation like gear and let's start good enough bar. So De Navarre will have the background, and this one will be just the white one. So the FAA, f a f f and it's also add their a border at the bottom. So bottom border and this one will be Oh, sorry. Border at the bottom border and bottom. I think this and this one will be just one pixel and solid. And let's make it some light color. So something like a light gray. Okay. And let's actually reload this thing and see how it looks like. Yeah, it looks great. Cool. Okay. About the background color doesn't work. Okay, The ground color like this, and yeah, Okay. I made a typo in their strollers, actually overload anything and see how it looks like right now. Yet it looks great. Cool. So right now, let's take care off the responsiveness off off this page. So let's open up our developer tools. So simply press F 12 on your keyboard, and this window should pop up. And when you click on this device toolbar, it will basically changed the view to some. A more iPhone. I have an iphone X, so Yeah, we can check how it looks, actually. So Okay, there is a problem with the I can and also with enough bar. So let's actually fix that right away. So at the bottom, I was just rights and the media query so many a And inside here, I'll just write any marks with off the device. Ah, media case. Me, the like this and the Mex with will be like I know some 70 700 pixels. Okay. And inside here, what do we want to do? Well, we would like to change the nut bar, and we want to change enough item. Okay. So every night I'm every item in the Nachbar should be displayed as a block. So display block like this, Andy, with should be a 100 pixels. 100% sorry. And then also the batting. We can add some batting to it, and it's like 10 pixels on the Y axis and zero pixels on the X axis. Okay, Let's put a semi coin, okay? And let's also aligned the text. So text align to D center. Okay, cool. So a let's actually see how it looks like right now, Gay when I click on that. Okay, that's That's good. That's good. That's good. We need to take care off the I can. That's not being shown. And yes, So let's actually create e. I can. And I'm not sure about how the ICANN is name. So if I just go to the front arson bait and type in here, the I can I think it's like some no menu, um, many. Somehow something like menu. If I dive in here, just the menu, I will see the ICANN. So I'll just go to the top of the page. And inside here I opened a new I with the glass of a father. I can and five I can slash and let's see what they have. Okay, so we can maybe is this one probably the bars, the bars will be the best. Okay, so where was I in here and the bars like this? And let's goes this thing Analysts actually see how it looks like right now. so if I were low debate, they're already bar school Sodi head or is basically taken care off And yet? Yeah. Okay, so let's move on, Sudi. Next thing, as you can see, the text around here is just not lying to center. So what's actually try to change everything? So, in the body we would like to align the texture the center. Okay, So text align and then center it was make it importance like this and lets you enter. That actually works. So if I were load this thing, we can also change it in they yet it will be better. That will be better. But we still need it for the 40 out of parts like call to action and stuff like that bar. Yeah, we definitely need to change the about section headings. So inside here I was just writing about and the section heading and inside here we need to align its center so fix the line and center like this. And let's also add some marriage into it a d top. So margins off And let's make it, like 20 pixels or something like that. Cool. So if I just for a long dispatch He added this better And yes, so let's also change the styling inside the HTML. So we have lined de Text Sudi, right? Okay. Where we are about. Okay, so there's the text, right? But we wanted to be aligned to the right on Lee at the large screen. Okay, so inside here, just dive the large. And yet here we had. Cool. So let's move on. Okay. The pricing with good and services looks good. Okay. What do we have next Thursday team yet? It's also look good. The call to action? Yeah, also, let's do the same trick in there. So where do we have call to action? There's the team or case culture action is right here. And let's also make it only on the large screen aligned to Right. Okay, so if I reload this thing yeah, they're witness. It's at the center and the contact as looks great. And yet areas. Yeah, that's that's what That looks good. So let's take a look at the iPad. So the iPad version off the of decide houses Rowley Page and the Yeah. Okay, so let's start a d whole beginning. Okay, So the image Okay, that that's That's good. It's good. But the pricing I think it would be better if we just change it and keep it. Even a d had the medium display. Keep it at the same size. So instead of large at the medium, we will still keep it at free. And it should look, in my opinion, better than this. Andi s. So let's make it like this. And let's save this thing and let's see how it looks like. Okay, there's look dead. Looks definitely better. That looks definitely better, in my opinion. Cool. Okay, so let's move on. There's the services. Of course. That's good. Yeah, Dean, that's also good. Contraction was actually good. And yes, so that's does about it. I think this looks good. So how will just keep it this way? If you have any questions, if you want to change something you differently, can Yeah, you probably want to change this. So actually, let me change that inside the CSS. And let's make it even from the 900 pixels. Okay, so let's real notice thing, you know? Let's see. Yet it looks better, okay? And yet, but that's about it. So if you have any questions, feel free to ask in the I'll see you next time