Bootstrap 4 Project - Build Portfolio Website | John Smilga | Skillshare

Playback Speed


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

Bootstrap 4 Project - Build Portfolio Website

teacher avatar John Smilga

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

11 Lessons (1h 21m)
    • 1. Bootstrap 4 project 1 - Portfolio Intro

      2:03
    • 2. Portfolio setup 1

      6:52
    • 3. Portfolio banner html 2

      5:37
    • 4. Portfolio banner css 3

      11:27
    • 5. Portfolio passion html 4

      13:20
    • 6. Portfolio passion css 5

      12:20
    • 7. Portfolio skill html 6

      4:53
    • 8. Portfolio skills css 7

      5:35
    • 9. Portfolio work 8

      7:28
    • 10. Portfolio footer 9

      5:54
    • 11. Portfolio navbar 10

      5:05
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

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.

143

Students

--

Projects

About This Class

dd040e40

In this class we will build fully responsive website using HTML, CSS, CSS Flex Box and Bootstrap 4.We will build 5 sections. Full viewport banner, passion section, skill section, work section, footer section and Bootstrap 4 navbar. In the process we will also look at how to work with google-fonts, font-awesome icons, images. While working on the project we will cover many css tips and tricks for better user experience.

Meet Your Teacher

Teacher Profile Image

John Smilga

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. Bootstrap 4 project 1 - Portfolio Intro: this bootstrap for project. We're gonna be creating our portfolio when we're gonna be using HTML CSS, bootstrap for and Flags Box on with we're gonna be doing we're going to do first a banner section over here on we're going to do a basic bootstrap nab are really going to create a card that's gonna be actually aligned on a vertically and horizontally in a centre. Right. Then we're going to be creating our passion section over here. If you consider we're gonna be working with a zoom in effect, right, we're gonna be placing this text in the corners, right? Then we're gonna be creating a buttons, and this is actually based in a boo tramp card right now. After that, we're gonna be working with a, uh, skills section. Right. So we're gonna create how obviously we're here, you conceive that we're gonna be doing with a font out some right on. This is gonna be our skills section that we're gonna be working with. Technically, this would be a work section, right? So, again, we're working with zoom in effect right on over here. We're gonna be creating our footer section right with fund awesome icons. right. And obviously, we're gonna be during this project. We're gonna look where we can get nice images where we actually get the font. Awesome. What are we how we're dealing with a Google fonts, Right? So what I'm gonna do over here, I'm just going to show that this is also gonna be responsive. All right, So if we go over here to this screen, right? I mean, just make it more, better, right? So you're like this. If we do it, you can see how it is actually a responsive red. And now we have actually only two columns over here instead of three. Right? And for the skills were gonna be creating this set up, right? And for the work. It's also gonna be over here like this on for the contact is going to say this name. However, if we go to the smaller screen, you can see over here too. This is so it's gonna look. It's gonna be pretty much one, uh, column all the way down. But enough of me talking. Let's start coding 2. Portfolio setup 1: first things first. What is going to be are set up. Right? So over here, you can see in this Stop I created folder on you can see. What is it? Within the fold. All right, so we have a phone tossem on, then we have images. Folder. Right. Then we have index html, main CSS. Right now. I'm gonna be using a brackets text better or hearing this one. This one over here. So the easiest way how to actually get that folder into the brackets is dragged the folder . You're right on. You just placed him within the brackets. Right on. That's where your folder is gonna be. So, one of the things that I like about brackets over here that we can do a live preview, right? So once we're gonna be working, we're going to see everything as it's happening, like right. So I'm just gonna maximize this one, Maximus. So again, this is gonna be Dimension says this is the front awesome. And images some time. Let's go over here and let's check what we actually need, right? So because we're gonna be using bootstrap, I'm gonna be using be the content delivery network. I'm not gonna be downloading anything, right? I'm just going to right away. Get a cdn right away is going to start working. Right. So here, if we go to get started, they offer you the started template. Right? So you just select over here to start a template or here on, just copy this one to your folder, right to the index html. Right. So if we go Mark on or here, we just place that you can see that it works because it says hello, world. Right on over here with we're gonna do is we're gonna send This is gonna be a port folio. All right, on over here, we're gonna have to create some links. Right? So the 1st 1 is gonna be the main seer says Main CSS. Adam, we're going to say that this is gonna be a, uh let's say link right. And we're gonna say, Hey, trip on here, we're going to say this is gonna be a means yes. Is relationship on this is gonna be style sheet. Now that we have this, the next thing that I would want to dio is actually create for a Google Funds, right? So we're gonna go ahead on. We're going to say that this is gonna be a Google fonts. Oh, yeah. On the next one is gonna be fun. Tossem Oh, somewhere. Yeah. Another. We have that. Let's go and see what we can do with a Google Funds. So we could close over here. We can just go to Google. Honestly. Righteous Google fonts on foot over here. You can see that this is what we're gonna have. You can pick anything you want. You just had like this, and then you go over here, right? And then you you need to select. How do you want to add those funds? All right, So what I did already that I went to free hole over here for you. Something like this. So you go here. You had them. You go in the top and you see what you need to add. Right? So this is dealing that we need to paste. All right, so we're gonna select. Uh, I'm gonna copy this one. Right. Copy this one. We're gonna go back over here. I'm gonna say Google funds on over here. This is what we need to write in a fund. Family for the freehold. Right? Because you can see the 1st 1 is coming along too. But we don't want that. Right. So we want only this one. So probably we should delete this one, too. All right. So I'm just gonna leave it the way it is for now. But in general, we don't want the, uh, spectral right we've on this one. The freehold on over here. If we go to Maine CSS, you can see that every edited. Right. So this is gonna be body. This is gonna be fun. Family Freehold on this is gonna Baker's. So now that we're done with a Google fonts, the next thing that we want is a font. Awesome. Right? So again, we just go to Google, We write a fund. Awesome. Right? And then we go to get started. And over here, what we're gonna do is we're actually gonna download, right? And once we download, that's when we need to drag that folder from our Donald's toe. The folder where we're working on our hear, What they're saying is over here, Right? So this is what we need to do. We say copy who are here on? I'm gonna go back to my index html and I'm gonna pace this over here and you can see over here. Be careful in Caesarea path to fund tossem. All right, So what we need to do is just generally just pretty much delete that because bath over here is the same one, right? Is in the same folder, But it would be a different path than obviously we need to change on over here if we want to try out whether we have them. Right? I read class, and over here we're safe are Let's say we're gonna usual. Gonna safe home, right? And well, over here, you consider we have are formed. Awesome. I can write. This is gonna be that home, like so after we're done with font awesome people, we get images, right? And I'm using this site. This is called gratis a graph e because they have free images and they're really good looking and funky and interesting. So if you want to do some kind of interesting project, I definitely suggest getting images from here. Obviously, what you can do over here is you just don't love them over here to your downloads folder and one last thing that I just want to show you about images, right? What I like to do when I'm dealing with bootstrap or anywhere when I need to align them or something like that. What I do right away is as they're in my folder, right? So I just so like them all. All right. And then I go with a double click on. Then you say what say open with and then we do the preview. We're here on again. We still like them all on. We go to tools and we just resize them, right? We just adjust the size open up over here, And let's say I'm gonna say that all of them should be 800 by 600 so we just click, OK? And I would just wait till our computer actually transforms them. And once this is done right, just grab them from downloads on. We just put them in our in our folder. That's all there is to it. Right? So that's why when you go here, we have a images on what I do over here. If I know that I'm gonna be working on certain section, right. So I just name them right away like this. So it's easier. So I need you don't need to go back and forth remembering which is gonna be my image. Right. So 1 to 6 would just save them. And we're ready for work. So in next video going to start coding our bootstrap project 3. Portfolio banner html 2: So now that we're done with our basic set up, All right, then we're still sitting in our code editor. I'm gonna close over here, this head, so you can have a way better of you, right? And I'm going to zoom in a little bit also right as much as I can on the first thing that we need to do is obviously build this header section. Right. This is gonna be our first park on the Naber. We're gonna do it a very end, right? So it is going to start over here with this card and with this background and header, right? So we go back to our HTML on over here. The first thing that I'm gonna do is I'm gonna create a comment on I'm going to say that this is going to be a header section reeling this on. Then what I'm gonna do is I'm just gonna copy this one, and I'm gonna right over here and off header section right now. After that, what we're gonna do his eyes are going to start putting our code over here right on. The first element that we're gonna do is gonna be header right not Heather header over here . And we're going to say that this is gonna have a class off, uh, container fluid. Right? That's gonna be a bootstrap class, right? Create puts everything in the container right after that. We're going to say that this is gonna be div with a class of row over here on day. After that, we're going to create a column right on. We're gonna create two columns, one is going to be empty, and the other one is gonna have the card in. All right, so this one over here is going to be the one that has a card. So I'm gonna say day of class. No, we were going to say column medium and six. Right on. What it means is that starting from the medium size screen, which is 700 I believe 68 or 76 pixels right on this is gonna be have taking the half the screen, right. And here what I'm gonna do is I'm gonna create another one, right? Another call them exactly the same. On this is gonna be the empty one on. This is the one that we're gonna have the carbon right you hear this one? This is gonna be the one that we're gonna have a carnet. So what do we need to do over here? First thing we're gonna create a diva, and we're going to give it a class. I'm going to say that the class is gonna be a box on the reason. What for that is that we're gonna be using this class over here, actually to place, uh, to place our card in the center of the screen. Right. So the next thing that we want to do is create a d of right, and we're going to say class. And over here we're gonna ride that. This is gonna be card is gonna be card body, right? Those are the two classes, right? So you can create a card without card body and just need to have a card class, right? But card body adds a little bit of a nice set up padding, so we're going to use that to and over here. This is gonna be another set of bootstrap class, right? This is gonna be text center right on. After that, the next class than we would want to create is gonna be Div. And over here, we're going to say that this is gonna be class on. This is gonna be a card title, right? So, again, this is gonna be already pre styled, uh, pre styled element, right with this class. Let's say that over here, we're gonna write H one right? This is gonna be are heading one. And we're going to say greetings right on. This is already you can see that they haven't added any styles, but it's already has by default. It's styles right on. The next thing that we wouldn't do is actually had a next class, right? We're going to say that this is gonna be card text, right? So not in the title. Right. But we're going to create a new one on here. I'm going to say that this is gonna be live. This is gonna be class I know. Here, we're gonna say this is gonna be card. This is gonna be text. I know here, we're just gonna place a heading for I want to say heading for and we're going to say that I, um I'm gonna say John Doe, right, That's gonna be our designer. And after that, again this div on just outside his death, but still within our card. Right? What we're gonna do is we're gonna create a div on another class text, right? We're gonna say class Misic card text over here on. What we would want to do is over here. We're gonna place a paragraph, and we're gonna give this paragraph right away. A class of dext muted. Right? So they're gonna be greyish over here. And over here, we're going to say that I'm going to say I love on over here is going to say photography, right. And here, I'm going to say Andi design. So after Dad would we would want to do is still within our card. Right? So let's just check what are Cardin's? We're here. We're gonna place the button. All right. So I'm just going to say that this is gonna be a link and treff on over here. This is gonna be a dummy link, right? Because I don't know where you want to send the link yet. Right. But we would have you need to do is over here. Have this class the bootstrap class button right on over here. We're just gonna write whatever you want. In this case, I'm just gonna say more right on. This is a basic set up for a intersection. So now we're ready to move on to CSS actually to style this intersection so it would look something like this. So let's go ahead and let's move to see, assess and let's start styling. 4. Portfolio banner css 3: So let's go to Main services on or you even remembered that when we styled a France. So here we're gonna create another comment, and we're going to say that this is going to be a header. Right? So here are gonna be styling the header. And over here depends how you want I Usually what I like to do is over here, make a copy. Right. And over here, I'm going to say end off header. So that way, um, after that, when you have a long file, it's a little bit easier to find. Where are your style rules? Right. So where you're going to write a header, right? So we're gonna be targeting the whole header on over here. When you were gonna say the first thing that we're going to say it's gonna be height and we're going to say that this is gonna be 100 you port. And next we're going to say that this is gonna be a background, and over here, we're going to use the image. Okay, on over here, we're going to say that the image is gonna be or here. Let's see the header image. Right. That's that's the one that we want right on after that would weaken right? Either way. Right, So here fixed. Right. So this is gonna be for the scrolling right on over here. What I like to do usually had dot because sometimes if you open from index html and showing over here in a live preview, but it's not images on that showing. If we're opening directly from index html on next thing would want his background position . We're like this on. We're going to say that this is gonna be Sandra. And then after that, we're gonna say background, Repeat, right. Because you can see that we have images repeating right now. My ground only repeat, and we're going to say no. Repeat, we just want one on. Last thing is gonna be background size. We just find it here or type it. And over here, we're gonna say cover, right, because we wanted to cover the whole screen once we open it up. Right? So you conceded we already made a progress right now. The next thing that we would want his place, this box in a middle, right? So it's not on the top. And if you remember over here and we created this box right this class box. So what we're gonna do is we're gonna style that box right now on. We're going to say we're here SE box. All right, so now we're actually selecting that class. We're going to say height, and we're going to say that the head is gonna be 100. Report, right. The same way on display Flex aren't over here, and we're gonna say flicks All right, on the next thing that we want is a line item center, because by defaulted, selecting this play flex And over here, this flex direction, right, it's actually by default on a row, right? And if you have the, um flags direction in a row, if you wanna center items vertically, you need to use the align items and we're going to say center. So now we have this box exactly in the center of our header. So after that, what we would want to do is we would want to start styling the card, so I'm gonna say Header and I was going to say, card on. I'm going to say first thing that I would want a border radius to be zero because I I like usually sharp edges, so I'm gonna go order. All right, here's on over here. And I'm going to say that it's gonna be zero. So now we're creating a, uh, very sharp edges. Then after that booed, Want to say that border is gonna be, um, to gm's? We're gonna be using e ems instead of pixels. Because sometimes if you're working, I would, let's say, a browser, and it kind of display your styles. That goes to a regular styles, right? So then it changes the pixels. But if you're working with the EMS, it stays with the M. So here, we're going to say that this is gonna be six de over here, six on. Then we're gonna have seven. Six e. This is gonna be our border, all right? And you can see that I made a mistake because I didn't write Header. So that's why it's not targeting. And if we right over here, header, we're here on. If we're going to save this now, I can see that what's happening? Right? So it was just lagging a little bit because I made a mistake or here when I was writing the rule the next property that we're gonna change is going to be a background on. We're going to say that we would want a background color, and we're gonna go over here on. We're gonna look for this one, right for this white one. Right? Then while we're still in the top, we can just easily copy this like this. And then we go back over here and we based it on now. Considered. We added this 11 on over here. What is going to change? A little bit of past city, right? This is going to stay how transparent it is. And we're going to say that the capacity is gonna be 1.7 right on. The possible values are from 0 to 10 to one remembered. And the next thing what we would want his header we're here on, we would say card title, right? That's gonna be the next class that we're selecting, writes Every conceded were working over here, and we're going to say that this is gonna have color on over here. We're going to say that this is gonna be a, uh, nine. And we're gonna make the red color right. We can just go up here and see where is a red one. Because we want to make a title red. So it is gonna copy this one on. We're gonna base this on over here, and now we have the greening thread on. After that, What we would want is, um, style the actual header link. Right. So here, we're gonna say Header, and we're going to say card on link over here on. We're gonna say that this is gonna have a different background and said this is gonna be a bag room color on. Let's go appear on. Look for the yellow. We're here. This one on copy on paste over here. So this is gonna be low color and afternoon. We're gonna add the actual color. Right? So this was the background color. I was gonna be the color of the farm on over here. We're gonna write color on. We're going to say that this is gonna be one b one. Be on over here. We're going to say that, uh, one e one, right? And we go back and let just had a hashtag right now we added the black color. And after that, what we want to do is do the with print. How wide is gonna be a our button. I'm going to say six years, all right? And instead of 0.6, actually 16 So it's gonna be like this, but now are what I would want to do is actually place it in the middle, right? So what I'm going to say is, I'm going to say that this is gonna be margin zero on the first. Value is gonna be from the top and the bottom, and the 2nd 1 is to besides, And if we had auto then right away and goes in the center right on, let's just create little bit more space so we can see better on over here. What we're going to say is that this is going to be a border radius and as well also, we're gonna create a border radios that is going to be zero. So this is gonna be sharp edges, right? Border radios. Right. And we're going to say that this is a me zero on over here. We're going to say that last one is fund size was gonna make it a little bit bigger. I'm just going to make it 1.5 e ems, right? So it's a little bit bigger and a little bit better looking right now. After Dad, what I would want to do is style. And when were hovering over right. So I'm just gonna go over here when a copy, I'm gonna base this, and I'm going to say while I'm hovering right on here, What I'm gonna say is I just always What I like to do is just flip them around. So I am just gonna copy this one, then over here and let's say that this is gonna be the color right on. This is over here is gonna be back ground color, right? That is gonna be the colored if anyone, right? So now that we have this over here, if we go and see, you can see that as I'm hovering is gonna be the opposite, right? The background color isn't gonna become the car. Now, the one thing that I don't like when we're going to the bigger screen is actually that it's kind of because it's gonna be on left. 10 side. All right, so now you don't see this over here. because I already moved. But you're gonna see on a full screen that it's kind of, in my opinion, a little bit too close to the edge. Right? So what I'm gonna do over here, I'm just gonna add the padding right to our columns on what I'm going to say is going to be header on here. I'm going to say column over your medium on six. And hero would, we're gonna say, is gonna be patting it was gonna be two PM's right tonight. Concede that I kind of push it, pushed it towards, made it a little bit smaller, right when the thing is for the smaller screens. Right? When we were working here, I actually want to even make it leave and little bit more smaller so we can see more of the image, right? Because the funky image I for some reason I like it, right. So what we're gonna do over here, we were gonna make a rule, and for now, it's gonna be over here, but actually is gonna be sitting all the way in the bottom because the usually media media screens right. I usually play like to place them in the bottom. So I'm going to say media, all right. And this is gonna be have media media. We're here, and we're gonna write screen Andi over here. I'm gonna say Max with right? And I'm going to set the max with two a 7 68 That's the medium height, medium size screen or your pixels. Oh, no, we're here. We're gonna say what? What would be the rule? Right. So we're just going to check it out most of what we'd want to happen right now or you're gonna write Header on over here. We're gonna right column, and we're gonna say medium on over here, we're gonna say six. Right? So the same thing. But we would just want a different rule. All right, so we're gonna say padding, Honoria, we're gonna say the padding is gonna be four e ems. We're here like this on logistic it out that you can see that it made a mistake. It's with over here. All right. So and I can see the for the smaller screen. There's actually going to be a little bit more padding, right? Not a big deal. But it just looks, in my opinion, a little bit better, so let's just check it out with. And we have everything the same, right? The same is over here. Obviously, this is a bigger screen and we're missing in Anbar. But everything else is over here, so I could just save this right? May see, it says go back to index html and we are ready to start working on our next section. 5. Portfolio passion html 4: on the next section we're going to create is going to be called a passion section. Right. So here, we're gonna right, And this is gonna be passion. All right? Passion section. You know this and then we're gonna copy this one right on over here. We're going to say that this is gonna be the handoff passion section right on over here. What we're going to write this is going to be a section on over here. We're gonna say I d you're gonna say passion. All right, Andrea, we're gonna add a class, and this is gonna be on container fluid. All right, then. Afternoon, maybe. Like me just making this a little bit smaller. All right. So you can see better. And maybe this one also I intend maybe let's zoom out a little bit so we can see a little bit better How everything works right on over here. What would want to do is actually create a comment right and say that this is gonna be title right on here. We're going to say that this is gonna be Dan Nothing title. Are you doing this on? I'm going to say that this is gonna be end off title right on. Why? I am writing this if we go back over here and if we check it out, this is the title that I'm talking about right on, because it's gonna be repeating. Right? And we have it here. I'm gonna have it here. Right. So therefore, we're making everything right now. All right? And what? I'm gonna say that with the title, I'm gonna have a div. It's gonna have a class on over here. I'm just gonna write it properly. I'm gonna say Title. I know we're here. That's gonna be my class on over here. We're going to write that. This is gonna be a, uh, title text center, right? Oh, yeah. One more glass. I'm gonna say text want center sent right now. Now that we have this one, let's go ahead and let's place a heading or here on over here, going at a class. We're going to say that this class is going to be a display three we're here on. We're just gonna ride that. This is gonna be passion. All right, on this is gonna change for different for a different sections, right? But for this one this is gonna be passion over here. We're gonna say they've class wanting to say this is gonna be titled underlying right on the line, right? Another class that we're going to stay style a little bit later and see assess. You're not gonna be able to see it right now, but this is gonna be this line, right? That's gonna be the title on their life, right? So pretty much we're done with a without title and over here. But we would want to do is actually start styling the well. I'm sorry, creating elements for this section, right? So I'm gonna say they have class and over here, we're going to say, a row on hold here within the row, we're going to start placing the columns in the way we have set up the columns, right? Gonna have div class over here. We're going to say that for a small screen, right? We're gonna have half the screen, and then we're gonna have a column. And over here, we're gonna say medium, this is gonna be four. So for medium screen, this is gonna be third of the screen and then another class and we're going to create later is gonna be holder on over here. What we would want to do is actually placed something in there. Right? So gonna have a holder or here like this on. Then we're gonna have a, uh, card inside this holder. Right. So we're going to say that this is gonna be a div. All right, this is gonna be a class on over here. We're going to say that this is gonna be a div class also holder. All right, so maybe he was gonna delete this one, right? And we're gonna leave this one over here, right? And within here, we're gonna place our image now before we place our image. Right? Maybe this was actually even even too much. Right? So maybe let's let's do it like this. Let's just really this one, right? What I want to show you is that this is going to be repeating, right? You will gonna be basically setting up every section like this, right? You're gonna be writing the section that is gonna be a D containing flow fluid, right? That is gonna be the title. Then it's going to be their own right. And since you don't want to do it at all over and over again. If you are using the brackets, I'm going to show you. And if you're not using the brackets, I'm gonna also show you how we can Koken. We do this right on. The first thing is, actually, we need to, um, copy this. All right? So I'm just going to say copy I told here on then, let's say, with brackets, we have extension managers. You know that if you're working with a brackets, you know what, His extension manager, if you don't, If you're working with another tech center, you should have something similar, right? That's pretty much extensions. Right? And over yet. I'm using the bracket snippets extension. Right. So if you open up up over here, right, we can just pretty much creating you one. Right on. I already did that. Right. So we go here, we create a new one, we write a trigger key description scope, and then we just passed the cold. Right. So here, if you look at this basic section, right, this is what I did. The trigger is gonna be basic. Their basic section. This is gonna be descriptions, copas, html and This is my code, right? That I placed with the car. Right? So what we can do over here? I'm just gonna exit this one. Right. But this is how you would do it if you don't have brackets, right? And if you don't know how to do or don't know how to find your own one in your text, that right? But you can always do it. Just based it over here. Right? So now you have technically two of them, right? But would you know that within the next section, when you're gonna be working on Lee thing you're gonna have to do is change the i d. Right? So next one is gonna be skills. We're here. We're gonna write also skills, right? And that's it. And also, the set up is gonna be again with some type of column, right? It's much more easier to this way instead of writing and writing and rewriting the code. And you can also use something called Emmett, which speeds up your writing. But I'm not getting into that right now. I just deal with the task. Second hat. All right, so let's let's check it out. So we have skills. We have a passion, right? So let's go ahead and let's keep working on this passion passion section, right? And what we want to do over here with a the off A column right now, we would want to place that card inside that this column or here. Right? So if we have a day of class, All right. Oh, can actually create a div on. We're going to say that this is gonna be div. We're going to say this is gonna have a class on this is actually going to be a car, right? So I'm gonna say class, I know you're open, right card. I want the right that this is gonna have a text underclass also over here. All right. And once we have this Dave text center with a card now, we would want to actually place hey, give class. And over here, I'm gonna say, holder, right? And again, this is going to be our class, and I'm going to show you why we're creating that class. But over here, within this class, we're gonna place a image I'm gonna say class, right and 40 images. If we're working with a with a boots, trump cards, right. If we want our images to the top, we need to have a card image or your top on over here. Obviously, we will need a source, so I'm going to write them. This is gonna be a source. And over here, we need to start picking, right? So I'm gonna go through images, and I'm going to say that this is gonna be passion. One on over heroes is going to say alternative, right? So if the image is not showing what we would want, we would say that we would want I don't know, like fashion one image, right? Something like this Over here on over here. We can just close this one out. And remember Dratel here, this dodge, just in case it's not showing from your index right away. Right? So you can see that it's still have it over here. But now, if you're opening the index social, gonna be showing, all right. So now that we have worked with this holder Dave, right, so the next one we would want to actually add is a text. All right, so we're gonna go over here on we're gonna create a little bit more room, Not in the holder, but in actual card. All right, so we're going to say that this is gonna be div on. We're gonna have a class on over here. I'm going to say corner, and I'm gonna say this is gonna be corner text, all right? And over here, we're actually, um, gonna place it is a fashion. We're here, like this fashion on over here. What we would want to do is we would want a add a div class, uh, card body right on already. Everyone, we can actually place it in the paragraph on me. That's gonna be a little bit better, All right. I was just gonna copy this one on. We're gonna paste it or you know, this passion. So we have two passions, right? But this one is actually sitting in a paragraph and we're here. What we would want to is actually create a div class on over here, and we're gonna say card card body this is gonna be able to trap glass on within that card body were gonna place a couple of things, right? So the first thing we're gonna create is H four and we're going to say that this is going to be a passion. We're here. Then we're gonna say that we're gonna have a div with a class off small text on their line . Text their line right on over here We're going to say, Well, just gonna close this one out, All right? This is gonna be this one. This class hold you like this on? The next thing that we would want to do is we would want to create a card text, and then we're gonna create a button somewhere said, Dave, class card text. And over here, we're going to use a dummy text right now. I'm gonna use this by writing the law. REM pick. So think. But you can get them anywhere online, guys. And if you know how to work with your text editors, you know how to get them. But over here, who is going to use the Khorram right now? I can see that I have a dummy text on. We're just gonna delete this one. So it's not too much on after that. Still within our card body, we would want to place a hatred or here we would want to say that this would be a dummy link again because I don't know where you would want to send it. And over here, we're gonna say button right on over here. I'm going to say that this is gonna be influence. All right, so now we're done with one, right? One passion one. But as you can see, obviously we have a few of them, right to be quite exactly, actually have six. And I know that this guy's was a little bit long. But unfortunately, if we want to create something like this, it has a lot of elements. So that's how we need to work on them. Right? So here, if we have this, uh, let's say column. Right. So it's gonna create a little bit more space so we don't copy something that we don't want . All right, on, we need five more. All right, so here, what I'm gonna do is I'm just gonna copy and paste. One, 2345 Right. And the only thing that we actually need to change from now on, right as we have, if we have one. Right. Then I have saved my next image. Number two. All right, so everything else is done, right? So this is a small, smooth sailing from now on. Right then we have three over here. We have for on over here. We have five, and I know we're here. We're gonna have six. All right, so now we have six images. It was a little bit of a lengthy process, right? Because we did a couple of things we actually created, technically, our next section. Right? So we saved that work like this on, Obviously, because it has multiple multiple elements, Right? It took us a little bit longer time, right? But everything is good. That's good at the end. So now we're actually ready to go to remain CSS and start styling this passion section. 6. Portfolio passion css 5: So let's go to Maine. CSS on over here when we had a header. Right, So here we have end of the header. All right, that's gonna be on comment on over here. We're gonna create to your comments. We're going to say that this is gonna be a I would say I'm going to say that this is gonna be a passion right on over here in the beginning, right? I'm going to say Hend, right? End of fashion. End of passion section on here. We're going to say that this is gonna be a passion section. Right? So now we have two comments, and now we're gonna be placing all our rules or here between these comments. So, uh, later is gonna be easier for us to find, right? So I'm gonna say passion. All right, so now we're actually selecting the whole whole section, and I'm going to say padding, and I'm going to say padding is gonna be three m's, right. And over here is gonna be to hymns. Right? So here, this is gonna be a top and a bottom on left and right. All right, now, after that, we're gonna save, and we're gonna start, actually. Ah, styling the passion card. All right, so here in this class, then we created right each of these cards, and I'm going to say that this is gonna have a position. And then we're going to say that this is gonna be relative. You will see later on why we do that. But for now, just follow along right and border. And we're gonna say Border Radius is gonna be again. Has always zero. I ain't going to say this is gonna be zero. And what we would want to do is bought border. We're going to say the border is gonna be none the same border we're here on. We're going to say that border is gonna be none. You know this. Then what we would want to do is margin mod, um, re air. We're going to say that this is gonna be two years, right? So there's a little bit more spacing between them right now that we're done with a fashion card. Let's deal with part fashion card text. I shouldn't. And we're going to say this is gonna have card text over here on. We would want to select that right on what we would want to do with a passion card text. All right. First we would want a margin, and we would want a to e m. Right. So we just want a vertical on your ear with the horizontally was going to say that this is going to be zero, right? So we don't want any marginal. All right? Next rule would want is a for a passion small text on their line, the glass that were created, and I will see what we're doing over here. We're going to say that this is gonna be a passion right on over here. We're going to say that this is gonna be a small, small text. We're here under line right on here. What we're gonna do as we're going to say that this is gonna have a with for e m on over here. We're going to say that this is gonna have a border on the border is going to be 0.22 e m on we're gonna say is going to be solid. And now we need to have the collar, and we're gonna add a a And over here, 916 All right, So let's check it out before we do that. Let's do margin. Zero photo. So let's see what's up. What's happening? Right. So now we have passion. Now, this is gonna be a ah underline over here right now. The one thing probably would we want to do is for the title, right before we move on any further, remember that we have the same underlying over here. All right, so now that we're done with this underlying what we can Dio is in between the passion section, let's say or all the way to the top, however you would want to choose, right? Maybe before actually header right when we want to do is actually create over here a title , right? Because this is gonna be for just our title. And we're going to say that this is going to be a title on their line, and that's gonna be the class that would actually working on, right. So let's see what it is. Shouldn't be selecting somewhere over here on. We're going to say that this is gonna be a with all right, we're going to say that this is gonna be with 10 10 years. All right? and I have suspicious, actually. Why? We're not selecting this. So let's go over here. Let's check. Where is our title? All right, title on over here. Title on their line went This should be our live. Right? So if we go back on over here, we say title underline on, then we have a with. But the next thing that would want to do is actually select a border on. We're going to say to 105 e m. And then we're gonna say solid and again, we're going to do the same thing. All right, We're gonna say this is gonna be solid on solid yellow. All right, so we're going to say this, and we're gonna say f A. And over here 916 All right, so now that we have this one, let's go ahead. I'm actually at a margin on. We're going to say that this is gonna be a zero, right? And then it's gonna be auto on for Yem to the bottom. All right? And here we're going to say another. All right, so now we have added a title underlined for all of them, right? So I can see this skills. One, the next one that I created actually also has it right. And also the top one hasn't right now that we're done with title Underline, right, What we would want is select over here this text and let's make this happen. Right? So we go back again to our rules. I think this is gonna be a passion and right after special small text on their line when we would want to do his passion, we're here and we're gonna say corner and we're going to say text, right? And then we're gonna start selecting that text, right? And we're gonna say position and we're going to say that this is gonna be absolute once we have a position. Absolute right. We're going to go with a padding on the padding is going to be 0.5. Gm's on over here. We're going to say that position is gonna be top. We're going to say that this is gonna be zero we're here on. We're going to say that this is gonna be right. Right on right is also gonna be zero. So you concede how we moved it all the way to the right, and then we're going to say that this is gonna have a Z. Knicks Z index is gonna be one. Right? And after that, we're gonna have a background color on background color. Let's check it out. What we have, we have the right. So we know worry what to do. We can look for next yellow here on. Just copy this one. Face this one over here, and once we have added the color were almost actually done, right? The only thing is, you can see or hear this margin right in the bottom. So what we would want to do is we would actually want to select. We're gonna save passion. And this is gonna be the name of our I d. And we're going to say corner text, right corner text hold here like this. And then we're gonna say paragraph right, because we place the text in the program. We're gonna say very simple. Margin bottom zero on. Once we do that, actually concede it. Everything is gone over here, right? So again the reason why over here we said for position for the card, right? For the parent element position relative, right? Because we wanted to place this element right over here in the corner. Right? So that was the reasoning for Nana. Didn't cover that when we were writing, because it wouldn't make sense to keep talking about it. Right. But once you see actually what it does, it's actually a lot more easier to understand on the next thing that would one actually style is a link. So we're gonna say passion. We're going to say a link, right? And again here, we can go back. And we can actually look where we had a link over here and really just going to repeat that , right? So this is going to save us some typing. All right, so we're gonna go back on. We're gonna paste this one and see over here. What happens? All right. Do we need to change anything or we don't? Maybe over here. Motor Radius shouldn't be zero. We're gonna do three m's. All right? The font size going to stay the same six years is going to stay the same. And after that, we would want to work with right. Is the images right? We want to have the zoom in effect. So what do we would want to Dio, as we would want to go on select a passion were like this. I'm going to say image. And once we select the image, we're going to say that this is gonna have a transition and we're going to say trend for him. And we're going to say this is going before seconds. I'm gonna be ease. Okay, I know Here in out point. So we're gonna do this one on. Now, what we need to do is for a holder, right? For the class, we will need to have a overflow hidden, right, overflow hidden. And let me show you what I'm doing. All right? So if we go back to index right, remember this class that we created this class holder, right? So this is gonna be holding this image. So when we're zooming in, it's actually not spreading out of where it's it's located, right? And you can check it out by actually not writing this class and what I did right now, and you will see what actually happens. All right, so now that we have a passion holder done when we want his last thing, would we need to do fashion? And over here I'm gonna say image. So once I'm over here, Ridge, when I'm hovering over image, I would want to have a zoom effect. Right? So what I right over here is transform. Yeah, and I'm gonna say scale, right? That's gonna be a value of the property for transformed. And does that right? I'm going to say something like 1.3. All right, so now you can see what happens if we actually hover over it, right? You can see that we're zooming in, right? And again, Like I said, if we wouldn't have this one, right, you can see how we're zooming in its let's say, Let's miss this class up. All right? What you're going to see is that once we refresh it, you can see that the actual images moving right, And that's not what we want, right? We want to image to stay in place, right? So therefore we using this div with the class off holder. So it's holding, actually, this image in a place rights and I can see that we're zooming in the image. We're actually not moving image. So we're done actually, with this passion section on, Let's just check it out isn't exactly the same my as it is, Right? So here we have this title all the way on the top, right? Passion? Oh, here on over here. We have the same thing on here. We have the images and everything. So now that we're done with this section, are actually ready to go on and actually target the skill section over here. So let's go ahead and do that. Let's save this one. Not over here. Let's say we're here on Let's move to HTML and start creating the next section. 7. Portfolio skill html 6: Let's open our HTML. All right? Animal ones were done over here with this passion section, right? You can go all the way to the bottom where we created actually our next section. Right. And here you can see that I created another fashion section, right? But we can very easily change that, obviously. Right, But we don't need to pre type everything. Right, So this is gonna be skills section right on over here. We're going to say that this is also gonna be skills section, right? Not skills off fashion section when this is gonna be end off skills section right here. We have an idea of skills here. This is going to be skills, right? So just with the cup company letter, right. The text underline is right away. Done on. We're actually ready. Ah, the work over here with these columns right now, what we want to do is obviously, since again, we don't want Oh, right. This from the start, right? So it is going again. Copy this one, right? I'm just going to do it like, let's say just like a person who's maybe not using this. Ah, um, extension. Right. So we're just gonna be doing this way. Right? So it was gonna be technically creating our next section. But, um, were in reality, we're still gonna be using. We're gonna be working with this one, right? So now that we have this one like this column, one thing that we would want ad is over here in this text, Sander is gonna be added, and then let's check it out. What we would need Red, we even need a font. Awesome icon or here. So within this Div. I'm just going to say that this is gonna be a I was gonna have a class would have said this is gonna be a far on over here. We're gonna say brief. We're here. Case. Alright. And here, we're gonna close this one out on. Then we're gonna have. Then we're going to say that this is gonna have a heading one. All right, so we're gonna go heading one. We're going to say that this is gonna be a skill skill like this on. Then we're going to say that this is gonna have a paragraph here on We're going to say that this paragraph is gonna be a dummy text all right on. We're going to say that this and somewhere here right again, Guys, you can just copy and paste it or get it from extensions. You will gonna be using a lot of it if you if you're gonna be doing a lot off, uh, feel gonna be doing a lot off, uh, projects like this, you're gonna be using these dummy ticks. Right? So now that we're done with one what we would want to do again, we're just gonna take this one. We're gonna one on, too. Right now. There's a little bit difference with a last one, right? That I could see that I made some kind of mistake. So the best way always. I like to go back just to see what I didn't copy. Right? So the chicken out again, Right? So if we have the role right on, if we just copy this one one two on our conceded everything is fine, right? Because before that, my funds were red. So that means that I made a mistake somewhere. I didn't coffee something properly. Right? So the first thing that we want to do is over here. Change this far. Right on. We're going to say that this is going to be a book. Are you doing this on? Then we're going to say that this is gonna be a this stuff. All right, so this is just gonna be a two different font. Awesome. I can't direct. But also, what we would want to do is you can see that they're not. We're doing with a column. Small right on. Or here, this is gonna be have to screen right on over here for a medium. We want to change it a little bit. Right. So you cannot see over here with this screen. But we would want to do is actually have a little bit different loud so we can check it out . How it looks like. So what we're gonna do over here for a small screen? I'm just gonna delete this one or here. All right, on if we go back, right? You're going to see that? You can see how this one looks like right now, right? So you conceded. Basically, what we've done is for unless it is bigger than a small, we're gonna have a layout like this, right? A little bit different. Just so we can see how it looks like. Right on the one last thing that we need to do for this class. We're gonna have a last glass over here like this. This is going to be in a custom class. They were gonna style later. Right? So now that we're done with html weaken, go to a CSS section and start styling this section. 8. Portfolio skills css 7: Let's go to our main seer says we're here, and then we have the end of fashion session. Right? So here we can just have a two more comments. I don't so so like this on here. I'm going to say this is gonna be skills section over here on this is gonna be the end off skills section. All right, here in this section on, we can start placing the rules over here. All right, so we're gonna start with a very basic one. I just check it out. What we're doing, right, we're going to say that this is gonna be a skills right on over here. We're gonna say a different background. Thanks. On our targeting, this one on, we're gonna say the background Migron color on. We're gonna look for the black one point and the black one was one B one B e, I believe, Right. So that's fine. It is where it is. And we're gonna just gonna copy this one on go all the way from the mod, um, over here on. We're gonna pace this. We're here on day. I can see that. We have it all black. Right? So the next thing that we want is actually white color. It's probably easier if I'm just going to go all the way to the top and find where is our white. All right, so all the funds are gonna be white. So we go back on over here. Where is our skills? Right, so we have a color white. So now we have a fonts, White. And the next thing we want is patting all around is going to be too easy games. Thank now, after died, we want a style, the actual column. Right? And we're going to say that for two column going to say that. Skills here column medium for no. Here. We're going to say this is gonna have a margin on the bottom. Same margin bottom. We're going to say this is gonna be, like, two years. All right, this is going to create some space in between them right on. The last thing that we want to do is actually style over here. This, uh, found awesome. Right? So we're going to say skills on over here. We're going to say this is gonna be fun. Tossem on over here. We're gonna say this is gonna be a font size. We're here. We're gonna say font size. This is gonna be the size. Everything we're going to say this is gonna before you hems, right? Then we're going to say that this is gonna have a margin on the bottom on margin Modem is going to be 2.5. He ems over here on next. We're going to say this is gonna be color. We want a red color, so we're gonna go over here. This is going to meet our red color on over here. We're gonna save it. Color is red on. The last thing that we want is when we're hovering. We just want a different color, right? So we can just copy this one. The skills. Oh, yeah. Copy and paste over here. And we're going to say that this is gonna be hover. Uh, here. We're going to say that the hovering is gonna be color and we're going to use a yellow. So here, if we find where is the yellow? That's not yellow. Have been using a lot about you A lot. So here we copy this. Were placed it over here. Where's our car? So now we have that someone we're gonna be hovering over our front. Awesome. Actually. Gonna be turning yell, right? Says we're looking actually in our life preview. Right. You can see that something is bothering, right? So you can see over here. This one is really nice. Right on. We like it this way. Right? The layout ever. If you would want this text to be actually more like this one, there is actually one media query that we need to do, right? And how do we do that? Right. So here you can see that I have media screen, right? And I'm just gonna copy of this one so I don't have to type in twice on over here. I'm gonna say, media screen on this is gonna be the max with for the medium, and I'm gonna have one more. And I'm going to say this is gonna be for amen with All right. Oh, here. I'm gonna say with and I'm gonna say this is gonna be a 5 76 pixels right on. Let's go down. I just have a look. Where's our skills? Right. So I'm gonna be targeting this paragraph, right? Remember if we created this class. All right, this is how it works, All right? We said that this was the class last, and then we said a program, right, Sargon, see that I'm targeting this power. Right. And what I want is for those screens. I just want a zero horizontal vertical, but I would want, like, 10 e m. Like, uh, I would want a 10 e m. Horizontal Right on. You can see the nothing changed over here, right? Because I purposely made its only in between, right? It's only between or here. When we're sitting over here, you can see that now they look similar. Right on. If we go to the bigger screen, you can see that it's not gonna change, right? I would still want them to look the same. All right, so over here, Onley in this small position, right? I would want them to kind of look similar. That's why we added this room. If you're not really bothered with it, you don't need to do it. And it's really not a big deal. All right, so now that we're done with skill section CSS, we can actually go on to the next section and start styling the next section 9. Portfolio work 8: on the next section is going to be a work section. Right. So here, we're gonna be creating what would be our work. Right out poor for a while. So let's go back to Maine. CSS on, then jumped to indexation. TML on. We just need to scroll all the way from the bottom or here. We're gonna make this one smaller, and you can see that. Now we have this section. So is gonna give you the right away work. Right on. Let's let's maybe do this one. Let's delete this one. Let's delete over here. This one on when we're copying for the next one, right? What was going to delete this one also? All right, so this is gonna be empty on this is gonna be also empty. All right, So what we can do is just gonna do this on was gonna copy and paste it right. So now we have been empty one, right. So that that's not affected by any kind of I d or anything, right on what we would want to right over here is this is gonna be a work, right? So this is gonna be a first cursor second cursor first car, sir, Or here or here and end off. And we'll just going to say that this is gonna be a work section right now. Here, maybe. Let's do a capital letter. Right. And over here, we're going to change a little bit that we were going to say that this is gonna be m d or here on over here. We're gonna have this. Remember this class, this holder class that was holding our images over here, All right. The ones that were holding the images so they don't get out of the place. Now we're adding the same class over here because this is the same that we're gonna be doing. All right. So what we would want to do over here, want the image we're going to say this is gonna be sourced, and we're going to say that this is gonna be again from the images, and we're going to say that this is gonna be the 1st 1 of work on. Then we're going to say that the class we need to add over here the class from bootstrap, that is the image actually fits the actual container. Right? So we're going to say fluid. And over here, which is going to say that this is gonna be alternative, like work image over here. Now we close this one out, and now we have our first image, right? Remember, over here, we can just place this not just in case. And now that we're done with this one, when it would need to do is actually make four of them. Right? So we have this Div on, we just need to make 123 copies here was gonna create a little bit more space so it can see on what we would need to do is obviously select this work on die. Save those images exactly. Purposely So I know where they and Red so have worked one and work one. Right. So what I would do over here, I would delete, I would say to Then over here, I'm going to say and this is gonna be three on this is gonna before. Are you doing this? So now we're going to save this one, and we're gonna go through the main CSS and start styling or all right, so this is gonna be in the skills section or here, over there saying this is gonna be work. Copy and paste hand off work right on down. We just create a little bit more space on we're gonna start styling or right? So the first thing that we wouldn't want to do is we want to target the i d actual work on . We were going to say that this is gonna have a background color on. Let's say that we're going to use the 66 something, right? There's great one. So we just go over here on we copy and paste this one on the way in the bottom where it is over here. So we have copying based. This is gonna be a background color, and then we want to patting. But the thing is, we want patting only on the top. So gonna have 000 So you know that it goes clockwise. So this is the top, right down left, right. So now that we have that one, we would need to select a actual column, right? Because here's an issue, right? If we go to the bigger screen, right, you can see that we have over here this gap right then. That's not what we want. So what we want to do over here, we're going to say, work on. We're going to say this is gonna be call. Um, small six. Right? Like we could have, like, actually made a class. But just for this case, we're just gonna go after them this way, Right? And over here, we're gonna see that padding, and we're gonna say, padding left on. We're gonna say this is gonna be zero just in case we're gonna put important. Right? So we're overriding. Hey, bootstrap rule. We're here for the class on over here. Would We're gonna write is patting, right. And now they should work if we go to the bigger screen. And I could see that this is this is what's happening right Sunday for looking on a bigger screen right over here. This is what we want. We don't want anything in between now. Weaken Makeover here, zoom effect. So we're just gonna mana Mayes this Oh, here. And just so we can see better, Andi, let's create the zoom off. Right? So first we're going to create a work again. One ones were hovering. We would want a work, and we're going to say that this is gonna be Call him or your small We're going to say six on. We're gonna say that once were hovering, we're gonna will want a on a passage. He changed. All right, so this is gonna be 016 on after that. So I could see this was this is what happens, right? Andi, missy, It ended Everything right? Capacity, everything. Yeah. So, yeah, I could see that I have a glass. Right. And after that, let's do a work image. I'm gonna say, Work, image on or here. We're going to say that this is gonna be in transition here. We're going to write his transition transition over here. I'm going to say this is gonna be transformed. And we could have copied this, of course, but transform. We're here. And then again, the same thing we're gonna say he's right in and out in, out over here. And then we're going to say that what happens if we're hovering? All right, so we're gonna copy this one on, and then nothing. Not like that. But over here, we're going to say copy on company and paste on. We're gonna say hover on if we're hovering, Then we would want to scale again. Right? So we're gonna say, transform on. We could say scale. This is gonna be 1.2. This case was going to change a little bit. Let's savor this one. Right on. Once we actually a fresh I should have right over here. You can see that. Maybe with the transition, there was some kind of mistake. And the mistake it input. Four seconds. Right. So it's Avis on now. You can see that. It's kind of slowing, right? You can see that I missed men s story. Right? So now that we're done with the work section, we're actually ready to jump to a footer section on creating an FBI. 10. Portfolio footer 9 : Let's go to index html on over here. We have a and the work section right on over here. We can just right right away. Footer on. This is gonna be our last section. So we're not gonna need to write anything else. All right, so we're going to say Footer on over here. We're going to say that this is gonna be contact, right? Contact Over here. We have already underlined, and we're here. We're gonna do it a little bit differently that this is just gonna be one big column. I'm gonna say 12. We're here, and we're going to say that this is gonna be text center over here, and then we're going to create some links over here. I'm going to say trip. I'm going to say this is gonna be a hash tag right on within the language. I'm gonna create a, uh over here. There. Found us. Am I going? Right? So I'm going to say this is gonna have a class, and this is gonna be a Facebook. We're here on once we have that, you can actually copy them, and I'm going to say 1234 All right. Then again, we're gonna select few of them right away. I am wanna say like this on. We're gonna delete this, and you can see that I created a mistake. But over here, if we so like them all, delete them. Say, over here. I'm gonna write Twitter. Not in all of them. Only in the 2nd 1 or your Twitter. Then we're going to go with a YouTube. Then we're gonna go with a linked in. We're here on. Then the last one is gonna be Google plus Google Plus over here. Right on. Then the very last thing that we're creating in a folder it's gonna be heading three on. I'm sorry, but I pressed something that I didn't want to press at all. So this is gonna be no split. I'm gonna close these ones out on our way. Have this. I'm gonna create a H three. And here we're going to say class, and we're going to say this is gonna be text muted on here. We're going to say that this is gonna be an percent. All right, we're gonna create this copy thing percent, and we're gonna say copy and then once we have a copy We're going to write a copy. Alright? Right on. We're going to say this is gonna be 2017. So now that we're done with HTML, we're ready to go to a 90 SS on actually style before. So we jumped two main CSS again. This is gonna be the end of work. So we need to create a another one. Right? So we're gonna say foot or and then I'm gonna copy this one enormous and of footer. So in between the photo tags Sorry, Not footer tags. But put a comment. We're gonna target Footer. Going to say this is gonna have a padding to him. Then we're going to say this is gonna be background color on over here. We're gonna go straight, shoot for the nice and yellow one. Right? So we're gonna be very, very flashy over here. Copy and paste over here. Macron color on. Then what we're gonna do is we're gonna say that photo title on the line. We're going to do it differently, right? Because obviously you can see that we cannot see on their line. And I'm going to say that for her, and we're gonna say title on it's gonna be underline on what they were going to say. This is gonna be border color on. We're going to just get the black one or all right, so let's check. What is the black one? You know what? Let's do the right one over here. Ah, no, we're here. Where is the background color? Now we have the red one on after Dad, we have three more rules for the footer. We're gonna say over here on. We're going to say that this is gonna be for the link on. What would be for the link? We would say the color. We want a black color. That was the one b one b over here, sir. This one Copy and paste. This one. Then we say, Oh, here be andan after Dad, we say font size. Right? So now we're working with the links. You're saying three e. M. So now that we have links and that we have margin and then we have 0.25 PM's. So now we have margin. Andi, over here we have another rule which would be once we're hovering. We want to change the color. Oh, here. So I go over here. And I would say that this is gonna be a hover on. Once we have our orate, this is gonna be color, and we're going to go for a white car. All right? So I don't think we use that one that much. So where is it? Right over here. Here. Then we go back and find winners Color pasted. Let's check it out. There. We have it. Yes, we have it now considered a were hovering right on. The last thing that I want to do is over here, just create padding. So I'm gonna go here, going to say Footer on. We're going to say that footer is H three. All right? And we're going to say that this is gonna have a margin. Top two e ems. Ah, now we're here with done with a footer. So now we can want and actually create a a knave bar in the bootstrap 11. Portfolio navbar 10: always scroll all the way to the top. I'm gonna create a nab our right. So you're gonna make a comment? This is gonna be a bar right on over here. We're just gonna say that the first thing is gonna be no have. And that's how we want for the boat trip. I'm gonna have class. And over here, we're gonna have a class of nap. That is gonna be a few more classes that we added. But for now, I just want to add this one, because I want to show you what those classes actually do. All right, so here, this is gonna be links. All right, so we're gonna make a comment to say links. This is gonna be the actual links that are in every bar over here. We're going to say you will, and we're gonna have a class, and already you're gonna have 1/2 bar now, right? So now that we have this one, I'm actually gonna create a list items right on over here. We're going to say that this is gonna have a list item class on the list. Item needs to have ain't have item class. I am over here on, then, overhearing a list item. We're gonna have a link. All right, so this is gonna have a a true if, I know here, we're gonna have a hashtag. But this one also needs to have a class, and the class is gonna be a naff link. Right? So you have a nab our nav, nav item unraveling, And over here, we're going to say that this is gonna be a passion. Right? So here you can also write a a. True if it's gonna be a passion, right? This is what it was. Our def. So let's gold here on. Let's just copy this 112 two times. Right. So here, would we need to do is check which one was the next one on? That wasn't was skill. All right, so right. Skill on over here. We're gonna right skill on over here. We're going to write a work. All right, so we're gonna delete this. All right? Work on over here. Right? Right. On the classes that I was talking about, we're adding over here is gonna be 1st 1 What would be the background? Right. So the hark or here if I light light. This is gonna be light. So that is a difference. So here, I'm gonna write dark on the next class that the offering is knave bar expand. Right. And over here, I can simply say at which screen it should expand. Right? So if I wanted small, which is my right, So once the screen is actually small, you can see that this is gonna be going bigger, right? So once it goes past the screen small and so you can see that this is gonna be a zero, right? Once it hits the screen, that is small. You concede that this is gonna be as a column, right? So now that we're done with this, we just need to had ah, rule, right? Few morals about tonight, bar. And this is gonna be about the Lincoln about the hovering. Right. So we go to Maine CSS on let's go all the way to the top because I guess that's what we have it. Right, So here are gonna right that this is gonna be a have on here. I'm going to say that this is gonna be a have link over here on here. I'm just gonna create some rules, right? So I'm going to say that this is gonna have a color on. We're going to choose the yellow. Oh, here. Just copy and paste this one opinion paste over here. Now we have a yellow color on. The next thing that we want to do is fund size on. We're gonna go over here. I'm going to say this is gonna be to Yim's, aren't? So now they're kind of big that we're gonna have a font style style, and then we're going to say that this is gonna be Talic. And then next thing that we want is a a margin Right on. Let's say we're here was gonna say this is gonna be one here, right? We could have placed them in the center on everything. But just for this one, I didn't want to make a basic. So it's actually from the left, right? So we're gonna go back. And the last thing that we would want to do is actual color when we're hovering. All right, so we're gonna have a knave. Have are a right. So we're just gonna use a different one. We're gonna say have bar a link. Other on here. Want to be right over here to build one in different color over here. We're going to say that this is gonna be a white one. Right on. The white one is out here. You hear what is gonna copy this one? Copy this one over here on pasted. And once we had over here, this hover class were actually done with this bootstrap project, right? And this is what we created so we can pat ourselves on the back on. Go on, have a rest.