Code Your Portfolio Website: HTML + SCSS + JavaScript + Bootstrap 5 Grid System | Yossef Ayman Zedan | Skillshare

Playback Speed


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

Code Your Portfolio Website: HTML + SCSS + JavaScript + Bootstrap 5 Grid System

teacher avatar Yossef Ayman Zedan, Web developer

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

17 Lessons (3h 33m)
    • 1. Introduction | The website that we will create in the class

      2:36
    • 2. Installing sass

      5:01
    • 3. How to use Sass and Scss

      7:15
    • 4. Adding index page | Video background and flex box

      29:26
    • 5. Making the index page responsive

      5:56
    • 6. Home section | Animated white button

      12:18
    • 7. About us | Card that changes background color with time

      17:15
    • 8. Rotating card and text-about effects

      39:07
    • 9. Success stories and Packages

      10:57
    • 10. Contact form

      12:49
    • 11. Footer

      11:05
    • 12. Adding Navbar icon

      17:04
    • 13. Adding the black back background color to the Navbar

      5:26
    • 14. Adding the design for the Navbar items

      12:40
    • 15. Let's make the Navbar work with the checkbox hack and make it responsive

      7:50
    • 16. Preloader part 1

      13:06
    • 17. Preloader part 2

      2:52
  • --
  • 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.

14

Students

--

Projects

About This Class

Did you learn web designing but still struggling to build professional websites and don't know how to use CSS, Sass, Scss and Javascript to add features to the website? 

In this class, we will build an amazing project from scratch, explaining to you why we used this code line instead of any other one.. We will teach you how to build amazing websites from scratch

The only class you need on Skillshare to build amazing websites.. Here's why:

  1. This course is taught by Yossef Ayman Zedan, a web developer certified from University of Michigan and University of London which have two of the best programming program in the world
  2. Every single code is well explained to reach the maximum creativity point
  3. You will build a project that worth more than $700
  4. You will know how to add effects to your own website and start your web design business

The idea of the website came from: https://sharqawyjunior.github.io/shjr/

The website that we will build together in the class: https://yossefzedan.github.io/draftt/

What we will do..

  1. Creat a fancy navbar
  2. Rotating card on hover
  3. Animated buttons with infinite moves
  4. Amazing Preloader
  5. Contact form that indicates and changes the border whether the input is valid or invalid
  6. Card background that changes with time
  7. after and before psuedo elements
  8. Checkbox hack
  9. Adding video background video and the purpose of object fit
  10. How to use Sass, Scss and add media query inside Scss
  11. What is the adjacent and how Scss code is compiled in CSS

Percentage of every language in the source code:

86ff3148.png

Meet Your Teacher

Teacher Profile Image

Yossef Ayman Zedan

Web developer

Teacher

I am Yossef Zedan. A web developer certified from university of Michigan and University of London. I am also an author of a web designing future book in Netherlands. I worked more than 15+ international professional, 30+ personal and 50+ other projects. I've been teaching for 2500+ to gain the experience and know what the students can easily learn.

 

 

See full profile

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. Introduction | The website that we will create in the class: Welcome to the class. In this class we will build an amazing website with at stem L sees as science and JavaScript. The first thing we have here is an F bar. This amazing, they have power. It's also responsive. And then right here, we have the Home section with animated put in. When we scroll down, when we hover this card, we have this rotating. And also here we have an animation that changes background-color with time, as you can see here. And then here we have this ipad OS with this effect. When we scroll down, we have success stories packages. And here we have Q and a. They usually will put his question and here we'll get the answer. And then here we have a contact form when I collect on email. And now we want to put something inside like email address. So here we have this valid and also we have this aim for that password and also for the address. And here we have a sine and, and the footer. And also here when we reload the page, we have an amazing preload Twitter. Let's try it again. This web page, it's also completely responsive so we can make the screen smaller here. And let's start with an a F par. Scroll down. We have the Apache us, we have the holder card. We have success stories. And here we have the packages Q and a, which is also, give me the answer here. And when I click on the first one, it will give me please select a question. And here we have the contact form. I can't type an email here again. Okay. And like that. Okay. This is working great. So this isn't a website that we will read in this class. And good luck and see you in the class. 2. Installing sass: In this video, we will know how became install SAS to use it inside our projects. So the first thing to do right here is to go to the nude day as.org. And then we can use download, download for Mac OS here, you can download for your Windows, Linux, or Mac. We can download this one right here. Download Node.js is the best way for us to use SAS once we download it. Okay, Just waiting. Okay, that's good. We can click here to install it for sure. Okay. Okay. Continue. Okay, Thank you. He's told user passwords. Okay. That's good. Preparing outdated packages, writing files. Okay, That's good. We're just waiting to move on. Okay. Okay. We came this close because they already have long. And then we can keep the I have one already so I can keep it to K. And then we can go back to the Google Chrome and go to a website, science Lang.com Flash installed. This website will let us make aimed or installed the SAS. We can scroll down here. This could how we can use this code. We can make the screen smaller right here. Okay? If you are on a Windows, Windows or Linux, or you can just search for command line. Now we are using a Mac, so I will search for terminal. We can search here for terminal, and then we can click Enter. Okay, that's good. To uninstall says global inside any project for us, we can just type here. And p, m, which is 4 node, they asked. And then we can just type installed G, which is global SAS. I want to install Sass, and then we can click enter. And now that's good. We have SAS. And now what we gotta do right here is to go to, okay, we have the live version here. We need to open it inside our command line or terminal. So we can just drag this to be here. Okay, That's good. So the first thing we gotta do right here is to get NP and the M N it to be under the command of the node JS. So we can just go here or under the command of command line npm enact. So we have read the package name, enter version, enter description. We can just type here gem project. Okay, That's good. Entry point. Index.js task command is k Git repository key words, author, and you can just type your name right here. I can type y, z license, okay, Is this okay? We can click Enter. Okay, that's good. And as you can see from here, we have a package dot day some very soon we will know how we can run SAS inside our CSS file. And now This is good right here. We can just type here and P M installed. It means child node Sass. And now we need to save it. So we can just type save dev. Now we're saving it inside our project. We can click Enter. Okay, That's good. Okay. Just waiting. It's being downloaded. Ok. Again. Okay. We came up in this folder right here. So here we have a folder which is called node modules and automobiles right here we have everything we really need to use, the npm or SAS. In the next video, we will start coding our project and we will also know how again looked at SAS and compile it with the CSS. So good luck and have fun. 3. How to use Sass and Scss: Ours charging, putting our projects. The first thing to know our ICU or to do right here is to make sure that SAS is already working. So we need to check this out. To check this out, we need to run a compiler, compiler that size. I want to include that it's tied function inside the SAS to be inside the CSS. The first thing to do right here is to go to the package dot and adjacent file, which is lawn right here. And we don't need this one. It's useless for us here. And we can just type here, come pile, compile. Okay, that's good. You can type in an AMD instead of compiler can type anything you want here, and it's Chad off compile. And then we can open this two dots right here. And then we can type to practice or depth locations. Node Sass. This is for the Node.JS and SAS, which is the connected between them. And I want to include the sas dot main dot SCSS, which is the path to the CNS. We have here folder of SAS and main dot SCSS. And then we can just type here CSS, style dot css. Okay? What does that mean? That means that I want to include or compile that see as, as CSS styling function to peace inside their CSS, to pick conferred that converted to C, S and two P included inside the CSS file. And now we don't need this anymore. Okay, Let's go now to the main dot css. We need to make sure that this is rarely work in. So we can make dust here for this 1 first, we can make HTML. Let's connect between everything right here. We can make here link with HREF, css, flash style.css. And for this CREB, we can just make link or sorry, script, source, correct? Slash script.js. Ok, and now we want to test it. So we can just go here, save first. We can make here Potti to be having the background color, background color of red. Red is a k, a height of 100 vh, and width of 100%. Okay, that's good. And now we can go to Google Chrome. We got to the final here. We got adopted because as I told you, we need to run a code inside the terminal or command line. So here we have the command. The command here or the name of the compiler will chosen the way to type this code. So instead of just typing here, let me close this one. And instead of typing npm, run node Sass, sass, sass main.out, SCSS to the Seek is S flash styled Cs s. We can just type npm run compile and the compiled means this line right here. So we will, we will not need to type this line here. Npm run. Okay, this is good. Compiled column pile, okay? And f tells me that wrote CSS file right here. We can take how our CSS right here. So here we have the body. We can go and reload the page right here. Okay, I think we got a problem here. We can open this folder again or or anything. We're getting cleaned up between them. So good. Okay. What's the problem here? We can check it out, okay? I think we get a small problem here. So what's the problem here? Height of 100 feet high, of Yea, yeah, the class of Potty is how to classify the party. We can just save and get back here. Sorry about that. We can now run this compiler right here to run it again without typing the same code, we can just click on that top arrow. Okay, now we can go and reload the page. So here we have the Red Peg ground color. Now the task is already working. Let's go now and get the Bootstrap 5 to include it inside our project. Okay, We can just type here V5 and getbootstrap.com. Click enter, and then we can click on documents. We can copy the CSS NGA pack Java project right here to the index.html basic here before this pile. And then for the script, we can go here. Okay, copy this one. Go APAC. Based it here. Okay, that's good. And now we are ready to cook our project. The first page we will put right here, let me open it from here, from the demo version. This one right here. Let me give you an introduction to this page and then we can put it inside or in the next video. And here we have two columns. For this one, we will use pure CSS. What would just need from the bootstrap right here is the header to make it responsive and not waste time. So for this one right here, we will add a class which is saying I have display to flex and flex direction into rho, which is the basic flex direction inside CSS or sas. And then here we put the right two columns, columns off 50% of the page and on another column of the same width and height will be the same, which is 100 V-tach. But I want you to notice something, something right here. When I make the screen smaller. Let's draw it from here. Okay, we have here two columns, right? But when I make it smaller again, now we have two rows instead of one column. So then it's all about this page. In the next video, we will build it. So good luck and have fun. 4. Adding index page | Video background and flex box: Okay, and now this is a time to build the first page in this course or this class new way. The thing that you'll do in this video is to make the page design. And for the responsive design, we will make it in the next video. So the first thing to do right here, we will add a class which is staying, I have display to flex. So we can add here class I'll flex. And inside at, we can just make for the column one and column two as he saw before, column one. And then we get a mic for the colon, colon two. Okay, now we can go to the S, CSS right here. We don't need this one. Okay. It will be automatically deleted from the seats asked when we compile the code. And then we can just take old here. This one also to make sure everything is working. Okay. We can add here as first flexing in this one to be having margin of 0 to leave all the margins and padding from the left, right, top and put em padding 0. And we can give it here, height off on a 100 vh width of 100% all the pages. And now we will give it display. Display of flex, a nail desk, good. And then we can set for the the column, but for the colon here, we can, I'm going to show you a trick inside the SAS. We can give it flexing, call them one. And flex column 2 because we will use something inside the SCSS, which is, and here we have flex, the class off flakes, but we want to use here the class of flex column one, so we can just use, and what is the usage of n Here? It will copy this one and replace the pie. And if similar to I, we can add a comment right here. It's similar to adduct flex with some styling function. And then I go and to add here the flex column 1 with some styling function. This is the purpose of the end inside the CSS code. It will get me this code. So we can keep this. You can take it as a reference. And now we have and the limit just click this one. Okay? So here we have and which will paste dot flex right here. And then we can tie the rest, which is underscore column 1. Now we can open the bracket and I'm going to show you while this is doping inside the css. Okay, so we can give it here and call them to. So if I make here and column 2, we have an underscore here because we had the same height and the width. So we can give it position of relative. Why are we using position of relative right here? Because the text will be having position of absolute top 50 percent left, 50% with transform of translate. We can get them the same width, 50 percent height of 100 vh. Okay, that's good. Okay. Now we want to make sure that this is rarely work in, but I want to give you something that I want you to think about. Well, what if I wanted my type here and content? And up and the bracket? Will it take content or flex on one content? This is the trick. Now in scientists he is as I will be having flex column one. So if I type and inside the end of the column one, it will take flex column 1 and desk text. It will take its parent. So every time I type and we need to make sure our p.sit careful because it takes the parent of it. Okay, that's good. We can make here called one, which is outside this bracket. Let's give it peg brown color off arrived. And for the colon, two, colon two, I want us to be having PEG ground color of green. And now we can open the terminal or command line to run this code right here. We can click Enter. Okay, that's good. Now we can go back to our Google Chrome and now we can just reload the page. So this is work and let me show you inside. This is as much going on. We can go here. Okay. That's good. Inside this pile of dust, CSS, as I told you, it will create a new a new line right here, flex, close the bracket and then it will, it will copy dot flex and added to the column 1. I hope this is clear to you. And now we don't need this dining so we can just delegate inside the main dot SCSS. We can delete it from here. Okay, that's good. And now for this one, we can go and type content inside. But first, we're going to start with the PVGO. We can go to the index.html and scientists flips all alone one. So we can just make here for the video, for the v to u, we can make a video with a source of videos. And this one. Now you can see the type here and before. So we can just make type to be equal to M before. And now we want it to be muted so no sound is here. Rhinovirus, a little play to Non, we are using this cued to make sure this is rarely work in, are on Safari or iOS. So here, muted, the same. It will have p, None for the iOS devices. So this code is working for all devices. So loop and plays, play in line to be equal to none. Okay, this good. And we can make also for preload to be equals naught. Okay, that's good. Let's take the video right here. We can reload. So here we have the video, right? But the first thing we need to add for the video a is the width off 100% of its pollen, which is 50 percent of the whole page, and the height off 100%. So we can just go to our S. C is asked from here. Okay, that's good. Let's run it here, but we just need to give it a class. We can go to the index.html, give it a class off flex column. We can copy this bond right here and paste this one to be VDO. Now we can copy just the video. We don't need all of that. Copy. We can go now to this page, save surest. Now became paste it here. And this one, as I've told you before, it will change that parent one, which is this one which is the parent ducts like Skolem Nuan. And the video will take the its parent, which is dot flex, call them one and it will add the video. Okay, that's good for the video right here. We're going to give it a height of 100 vx. And also for the width of 100 saint, it will take 100% of its column, which is 50 percent of the page it goes, it's already inside the column one. It will be considered as a content. And then we can just make objects. Let's see what we have here first, because I want to show you what the object, well, do. We can now save and go back to compile this code. Okay, that's good. We can now go back to Google Chrome reload. So here we have 100%, right? But if this axial or chicken 100% of the colon, no, that's why we are using here object FET, object it to cover. So updateFeed to cover is controlling the size of the image or the video to cover all of that with. This can be used for if I find something which gives not covering the whole, the whole space I need. And here we need to make sure this is working on Safari webkit. Object. Fifth, this one to be equal to cover. Now we can save and go back here, run the code, go back here, reload. Okay, so here we have this working perfect. And this is really good. And now, what do we get a duo answer, this one right here. We can just add for the content. For the content, we can go back to our code and then get the index.html after the video. Okay, that's good. We can add here the flex. Paul them. One content. We can now type inside here the flex column 1 content text. Let's call them 1 content text. And then we can go with side at, sorry, inside it right here. And we will type this content right here, which is dyed and fakeness planes. We can make here a wave, HREF, nothing. Or let's make it to the package. Yes. Jot at DML, we can give it a class of stretch shaped link. And I'm going to show you what the stretched length will do and that, but do you make this Trichet length word we will meet at position of relative. I think we have it inside our CSS. This is for the Bootstrap and text decoration. And to none inside the Bootstrap, that's decoration into None. And length like this. For the color off white for the link. Okay, length liked. And then we can type here at one with display off one, display it off One is for the phone size and font-weight for this text text center, which is text align the center. And also we can make here F, W folder, which is fallen to white. I'll folder and puts a shadow for the books shadow we will add it inside our custom CSS, died and PR fitness plans. We can put the line also meet our planes. Okay. Let's take outlet we have right here. We can save and go back to Google Chrome reload. Would you have the content here? Because what ever is the n Next we are adding here. The content will be behind the video, so we will just need to give it a position of absolute. Okay, that's good. We can go here. Okay, for this bond right here, where it says best CSS, right here. For this one, we can give it. Yay. Yeah, it's for where we are, where we can make it inside here. I think for the content. For the content right here. The yes here, content. Content. And for the content that we will give it a position of absolute top 50 percent, left of 50 percent. And for this one we're gonna give it for V transform, translate negative 50 percent and negative 50 per cent. Now we can't just, we can't add a background image for linear gradient. Linear gradient. And we can set it to write our GPA. 0, 0 is 0, 0, 1, 7, 1. And then we can just copy this color. To add it again. Copy man would came paste. Okay, let's run this compiler. I just want to make sure this is the best flex colon one content. Okay, I think we got something here. Okay, inside this SCSS content, okay? This is not for that. We can make inside here the colon one content. And then we can run this compiler right here. And we can go here, reload. So here we have the content right here, which is really, really powerful, right? Okay, that's good. We can add some padding for this code right here. So we can just add here padding of 30 pixels. And now we can add for the books, shadow. For the shadow, we can add it here. Folks. Shadow for the books is shadow. We can just give it for V. Yeah. Yeah, yeah. Background color. Background color of our DPA. This one to be for the 0.3 to two. And then we can give it padding. There was a big 20 pixels is perfect, so we don't need this one anymore. And then we can make here padding right there, two pixels, padding left of 30 pixels. And then we get an ad for the shadow folks, shadow for this 10 for the x direction, five REM for the y direction, and for the bluer, for REM RGBA 0. And for this one we get a good fit for the, yeah, we can 65. And then we can just save and run this compiler. Did go back to Google Chrome reload. So here we have this work and get out the same as here, right? Okay, that's good. Now, the next thing we will do right here is to act for the second row. So let's do that. We can go back to our code right here, and then we can go to the index.html. Let's goal and two, for the flex column 2, we can just add for the flex column to content selects k. This is perfect. Flanks colon to content nude. And now we can add for the text flex colon to content text. I hope everything is clear to you. And then became make inside here. A, we have HREF, nothing desktop for now. Class. Friendship linked. Oh, I didn't show you this trip to the link. For this turgid link, I can click here anywhere inside it, so I don't need to click on the tax. Okay, that's good. I think we've got a problem right here with this position of app osha relative. We can go here right now. Okay? Okay, okay. Causation or for relative, okay. What can we give here? Position, offer relatives. And also here, we'll position of relative. And then we came Save and go back here. So I can click anywhere here. Okay, There's good. And now what we're going to do next is to add the content right here. So let's do that. We can make, they can go back to the good editor right here. And then we came here. Okay, right here. We can add here for Z. We can get a text, sorry, tax declaration into non link light. So we can just type inside here for the shop. In the sewers. Good. You're going to find the icon. We don't need to ask the time right here. And we can just gave it for the H1 or we can just copy this one right here. Base debt here. Justice wanted to be shopped. And now we get a go here, reload. So here we have a shop right here. Okay, That's good. It's taken me to not been. And when I click here, it takes me to the back. Yes. Okay. Good. This is working here, a here. Okay, we can make the screen smaller again. And what we're going to do answer this one. We will add some styling whites. Here. We can go to the CSS. We can save S thirst. Go back here. We will pay for the colon. This is the parent of this one. Here we have a column, one. Okay, and now what do we get a D for the content of the colon to? We can copy this one right here. Copy, paste it. Here. We're going to now run the compiler and z what we have inside our web-page. We load, so we have it here, That's good. And also we have the shadow. We can now go to the where we are. Yeah, this one right here. For this been any way we can just edit peg ground for this one. We can now add for the poll and to peg round, imagine URL and this one to be four images, which is this image right here. We'd get a give it peg round size and discover and also peg from position center from the x axis and standard terror from the y axis, I hope is clear to you. It's really cute. So here we get an image. This is where the perfect. Okay, This is very good. And what we adjust need to add here. We can click anywhere here or anywhere here. This is good. And now what we need to add here is the hover effect. So Lakes either hover effect. Okay. We can where, where? Where? Yeah. I'm sorry. Yeah, yeah. Where was it? Colon, long poem Bon. Yes. We can make it after colon, whereas the Closure. Yes. And now we can ask for the holder. For the Holober right here. We have the content, right? So we can just make for the end content because it's the parent or the type here holder. And then I type inside and content which would be considered asset via content over and sorry, the pull them over. And then the content. I'm going to show you this one right here. If I type here like that. And then I dive this heater a make that color off white for our plank for an example. And then it go to there to run the compiler right here. And then I go back to the style.css. Let's girl where we are. Yes, here. It will give me call him on over and it will add the content, which is not true. So to do that, which is the content here is a child off the column, the one. So we can just add a key here beside do the hover and inside at and contents. And then we can give here for the hover effect, if you will, of what we're effect right here, we can just make it for the the bag deflects contents, sorry, flex colon. Because if I type in here, it's really starting to over. So I cannot do that, call them 1 content. Then we can open the packet, make it peg ground color of dark red. Transition. I will plug in two seconds. And then we can make transform. All we dani, transform origin at the center. Now we can run this compiler. And then we can just go reload. Now, I think we, what's the problem right here? We get a check it out. Inside the CSS. Yeah. Yeah. Yeah. I think we got something wrong. What's the problem right here? Johnny, this one. Now we can run the compiler again. We've got a pack. So here we have this hover effect. We just need to add transition to the main class. So we can just go back to the compiler, copy this code and copy not cut, and then add it here. Okay, now we get to add for the Holober are the colon two we can make here. After this one, actually. And over and content. And then we can up into practice right here. We just need to give it here the same transition. And now we came based this transition right here. We can give it peg round pillar. Teller of Dar can, okay, This color is good now. And then we can just save and go back to the terminal, run the compiler, go back to our food or reload. So I think we get a problem here, boston, probably again, I hate this problem, but we need to work with it. Okay, in Homer and content, we can go to the style.css and take out the problem rights near yeah, flakes goal and to constantly get a problem here, right? So this one, we get up, copy it. This is taken for the colon. Colon. It's ending here. I'm sorry. And we can now copy this one and just make it inside here. And then we can site. Now, it will take for the poem to just, I told you before, the PI tangent vet for that to avoid making mistakes. And now this is same side that the column two and not inside dust deflects. Now we can run the compiler. Reload the page. Now when we hover. Okay, what's the probably that again, I think we get the problem. What's the problem here? Does this end with a problem which you probably knew that? Okay? And then we can derive the compiler reload. So I think we'd get a mistake right here. This is for that one. Okay, so what's the prop here? Let's go back to the style.css we have here for the column to hovers. So I want something to change inside the content. We get a search for this class to make sure it's already exist right here. Yeah, we got it. So it's a problem. Okay. We can go and reload again. Yeah, it's working. You're deaf for, I think four, they're refreshing or the Internet connection. So now this is working really good. What is the next step? It's making? Taking me to the packages, and this one is taking me to nothing. Now, the next step to do so, but in the next video is to make it responsive. In the next video we will make it responsive by adding for the media query flex direction and to call them. And we will also change the width and height. So good luck and have fun. 5. Making the index page responsive: To make the spade responsive. So the first thing we're gonna do here is to learn how we can add media inside our, our SAS side. So let me make the screen smaller right here. We don't need to make it larger, right? So let's close this one right here. Oven the Visual Studio Code. We can make the screen also here smaller. Ok, and make this smaller again. And now this is good. Okay? And now we can go to our SAS right here we are The SAS, this one or we asked CSS. Let's add a media inside this. We need them to get here major query for this play flights, but the flux direction would be to call them. So have to do that inside the SCSS to do it. We can just go inside, deflects it with the acting as inside. And then we can make media media, and then we can make only screen. And we will send the width here and max width, this one to be 4. Let's set it to 800 pixels. And then we can up into practice right here. And once we will type inside here, selects direction and to call them. Okay, that's good. And now we want to add the media query for these columns to be having the height and width of 100 or sudden. So let's do that right here. The media only screen. And then next week send this one to be for the same 800 pixels. Okay? And then we can type here width of 100%. And for the height, we can just make it for the 50 vh. And then we can just make for the video. Let's make for the video right here. Media. We can make here only screen. And then we can stand here and max width to be for a tundra pixels. And then we can go inside here and make the height is for the video because it's taking at a child or inside the bracket of the video hive off 50 V h and width will be 100, right? So let's just save. And then we can run this compiler right here, R1. Okay, That's good. Just waiting for this compiler. What's the problem here? It's loading, Okay, I think it's taking time this time, the k. Now we can go reload. As you can see from here. Now we have two Rho is eight instead of two columns. And when we make it larger, okay, when we reach the 800th, now we have two columns instead of two rows. And now this is good. In the next video, we're going to start coding our packages page. We're going to start with the Home section. Let me show it to you. Okay. Let's have an introduction to this page. Just waiting. Yes. What we have here is that what the section off 100 to be at. And then we have next stop achieve. Next up is having the class of container row, the hive off on a 100 vh align items center. And then assigned were built at Golem medium of four. Just to make this width happen right here. And then we will make for the rest, which is called limb off height, just to occupy the space right here. And leave this space to give us this width and not to be like the span element. And then we have hear that click, putting the click button, we will add it after the section and then we can give it the o. We can make it inside pot after the class, a furrow which is having the height off 100 etch. And then we can give it position absolute to make it here, the tub of 80 percent aimed left of 50 percent. And then for sure, we will add, transform and translate negative 52 percent and negative 15 per cent. And what we will do next is to give for this effect, this effect for the keyframes, keyframes of the time, lights make it for 2.5 seconds, and then we can give it, the count should be infinite. Some people call it in finite, some people call it infinity. But I'll prefer to call it in finite. Okay, there's good. In the next video, we will do that. So good luck and have fun. 6. Home section | Animated white button: Okay, and now let's add this page. I just want to show you here what I get before we start coding. I come at the same starter template for the index. I will just change this one to be package. Yes. Okay, and now let's edit content. We can give here section. And for this section we get a given class off the home. And then we can go to our main dot S and Z is S, or we can just add the content S first. Okay? For this one right here, we can get con container. And then we can add here row. And also align items. Center and also text start, which is text aligned to start. Okay, row has display a flakes inside the Bootstrap. And then we can give it a style. I'll hide 100 vf because it's not going to change for any screen. We don't need me to query right here. And then we can add the column and the U4. I've told you a pound coelom MD of four. And then we can add here, display one. And that also taxed white font weight of polar. We used it inside the video peg round page. And here we can just type or we can just copy that same content as here. Sorry, now this one, we can close respond. Okay, we can now copy the content and paste it here. Paste. And then we can make for the other column, which is colon, MD 12 over. Don't need this. Just leave it like that. Now we can just go to the main and dot SCSS to type the code for the home page. We can meet here, home. This one feet here for the home to be having the width it off 100% because we already have the one and the height. We can give it here peg round. Imagine linear ingredient to write because I bought the book Shadow of the navbar to be visible to the user and RGBA, the books shadow will affect their peer when solving a apolar. So it can be visible to the user and click on it. Okay? And now we just get a meat for 0, 0, 0 and 0 pond six 64. And then what became just do, okay, let's make it five. We can just copy this one here. Copy comma and the same with other what's prevalent. Okay, that's good. And then we can just meet for the image and lakes me here. You are. Your L of images. This one right here. A dot. Yeah, this one. And then we can make peg round size into tavern and all sorts of bag from position to be center and center. And then we can just save and go back to compiler, run the compiler. I'm going to close this one. I think this is working right now. We can go to this page. So yeah, this is working. And here we have this image with PAD ground color, which is rarely, rarely, rarely work in perfect. We just get a small difference with the linear gradient, but it's okay. All right, no problem with that. Okay, that's good. And now we're going to add for the, for the proton right here. Laced make the screen larger. We can go back to our source code right here, two packages, and now let's add for that, put in for the printer right here. We can just go after this row or actually this container. Anyway. We can just go to the route which will be great. We can make here or row, and then we can make a with HREF app out of nothing. Let's make chap out because we will add a section with an ID of a pound. And then we can give it here for the class. And also for the light, which is the color and the peg round pillar. And also we can make for home. Put in. And then we can make for the fs are five, which is font. I have a phone size of five inside the bootstrap. It will give a different font size for this footer. And then we can just make for the tile off with it, for this with, we can give it for 16 pixels. And then we can just type inside here the, the content, we can just make click here. So here we can just type click here. And so we've got, let's pick up, sorry, spots we have here. So here we have the pueden. What we need to know or what we need to do right here is to make this here. So let's do that. Okay? I just wanted just something where here, I got it. I have inside the row. Right. Okay. That's good. And then we can go to the CSS after the home right here. We're going to give it to them. And then we can open the bracket right here and type position of absolute job of 80 per cent. We wanted to make a center for the page. So we can just give it here, justify content to center. Instead of making left of 50 percent. And now we can go here. We just need now transform translate for the y direction, translate Y for negative 50 percent. And then we can make for animation, animation, the name we can give it move the loop. And then we can make it AES, alternate and aim finite. And then we get a mic for the webkit. We can cover this one. Wet cat and paste. And now time to add for the animation, we can make it after the home key frames and move loop. So I want you to think about it, or we want to think about it together. As you can see from the demo version, we have the burden moving up and down. So the keyframes, It's talking about how to move it up and down, to move it up and town inside the chief, the keyframe we are known to you is that transform translate. So either 0%, I wanted translate, transform translate. Why did before the 0 pixels and chance form translate x to be 0 pixels also. And then for the 25 percent, for the 25 percent, BY want, we can start with this font to avoid wasting time. And then we can just edit for the 25 percent BY won't transform translate y to be negative 10 pixels and transform translate X to P 0. And then we can make another one right here. This one to be for the 50 percent Transform, Translate Y to be 10 pixels. And then we can just make for the 75 percent 75, this one to be for the negative 10 pixels and for the 100 per cent as it will be for the 10 pixels. And then we can make for three seconds. And the same a is near three seconds for Safari or iOS device. And then we can paste for big wept, get to the keyframes and then we can just copy the content of this one. Copy and paste. So it tells me you've got a problem. Yeah, the Nova loop, move the loop. So as you can see from here from the demo version, Let's reload the page. Discharging to moving from chop them and null moron. So let's run the compiler right here. Okay, that's good. We can get a pack to our page and reload. So as you can see from here, it was taught with moving at the top. And then it will move at the, put him with the pixels which we, hi. So I think this is good and we get no problem with it. What we can just add here is books, shadow. We can add here folks shadow by did it adding inside our demo version potlatch just edit here 0 for v, x axis. If we are at AMD for the y-axis, for RAM, for the fluor. And this one will be for the y two. Let's just increase that agree. Otherwise, I think this will be good. Now we can run the compiler right here, reload. So I think we can increase it, this will be better. What about that? Now we can save, run the compiler again, reload. I think this is good. Okay, so now we get no problem with this page. And this will be amazing if you can see from here, this is the responsive. Yeah, this is completely responsive and we have no problem with that. Where ever we go. Okay, so now that's good. In the next video, we will add the About Us section. I'm going to give you an introduction at the beginning of the video. So good luck and have fun. 7. About us | Card that changes background color with time: And now we're going to add a path, sex GIN path. We will NADH at, if all. We will just add here for the this, this card, this card. And in the next video we will do this one and this rotating card. So what is this special thing here? The special thing here, if I zoom in, you can see this peg ground color changing its color. We will know how we can use bad by controlling the after element. So the first thing we gotta do right here is to go to the index.html or the package dot HTML from here. Okay, after this section, we can just add here for section and give it a class of account. And also we can give it to em y of five, which is margin top and margin put them off maximum number insights Bootstrap, which is five. Sorry, section is right here. And now we can add here at one class of display one or for the better. And also text center. F, W bolder. And also became make MY O4 and text about that, that's a pound load before the seeds asked people to add in the next video. And then we can add here, I've pout us. Okay, So now we can just make here container for the content of the cards container. And inside the container, we can make row with just t phi content. Let's make it evenly, evenly. Okay, that's good. And then after this one, what became just do, We can make coelom for the first card X of three, band for the rest it will be 11. And then we can add margin, put them off three, padding y of 4 over, sorry, padding. Why not margin for and px a four. We could make bedding before, but it's again. And we can make here, we'd gone into the shadow. We can make here, or we can just add shadow large class from the police chief 5 and PG Y2. And that guards bag ground, the card pack ground. We will use a consigned our custom CSS tech ground. Okay, and now we can just add four Next, center, text, center. Okay, that's good. And now for this icon right here, we can just copy it from the demo version. We can copy this from here to avoid wasting time on the internet. Okay, That's good. It's from Bootstrap website. Just go to the Bootstrap website inside the nav bar and click on icon that they can search for an icon you want and get it for free. Okay, and now we can just meet for the who is the owner. We can make with class are found monospaced set. Okay, this one here, who is the owner. And then we can add here paragraph with class a fleet. This, if I wanted to make the paragraph leap a and give it larger font size, lighter font-weight. And here we can just type little Artin. Let's check out what we have inside our right page here. So when we scroll down, just a problem because of The answering that I've been said. And I hope so. Okay. So this is good right here. What we just need to do right here is to add on another one. So we don't need to create a new one with a different content. We can copy and paste this one again. Oh, okay. Okay, this is good. We can go reload the page. So here we have to, I don't know what's the problem here. Tonic believe we got something me I can say up myself. I'm sure we have no problem aside to the webpage. And then now this is enough. For this class is our cards. For the next video, we will add the middle one and this one, Let's now add the effect for this peg ground color. We can go to the CSS right here. You will have something there. No. It's okay right now. Okay. Let's just go here to make certain we can just make four, where is the home? To make sure we're really work? We can just give it a height of 100 days yet, maybe the midsection affected X. Okay, now for the bass, see as S, Let's just make for this bond to be having the garden, sorry, card pack ground. Okay, The after the element, we will use position of absolute. But I wanted to make a position of absolute, the relativity, the peg round. And I'm going to show you why the after As. So we can just make position of relative. And then now we can go inside and then we can make after, up into bracket. It will take their parent. And then now to make it work, we need to set something which is called content. So if I make it here, content and then a type anything in signed, and then I go here and reload. So here we got nothing. But let's just give it a position of absolute. Absolute. And let's give it left off negative 2.5 because we will give it a width off on a 100 percent. So it will occupy the negative 2.5 and an another 2.5 on the right side. The same for the Chapter 2.5. Okay, so we don't need this content anymore. But we need to set it and leave it empty without this content line, it will not work. And then we can give it a background color or first, this to be negative. Okay, Good. The height of 105 per cent and width, also one of 5%. And then we can give it peg round color of red. Then the problem is we didn't from pilot. So let's compile it, the pack reload. So here we had this background color, but it's over the part. What's the best way to do so is to change the Z index. But what if I delete all that right here and just add some content here? Let's compile it. Go back to Google Chrome, reload. So here we have the content after, at, what if we make it before? Let's try before compile, reload. So yeah, now it stopped before my content. That's the difference with people for it after I wanted something before or after. But when I use position of absolute or relative to the cart, this little lumpy, no difference because you have position of absolute to be the top of negative 2.5 or anything else. And I'm going to show you the two ways to do so. If I use to P4 or IU is the after. So let's give here Z index, the z-index of negative one. And then we can just compile the back here to make sure it's working. So now we have that the index of negative one and it's really, really, really work in great. Now let us know how we get add des effect. We can go here and this listing we get a do is to add filter with Fluor. This a if I want to lower the after runaway or this class or any class here, I can floor, Let's give it a floor off one. Eat em. I think money MOP, good. Let's check out what we have here. So here we have some fluor, and now this is good. Okay, after the bluer, we can add peg round to linear gradient. Let's make it with 60-degree. The first one here will be for the F 79533. And then we can just make for the F 7, all 55. Then we can make for E. If F four. E7 p. And then we can just make for V1, A1, 66 API. Okay, five, O 738. And then we can just make four, or we can just go extinct. This is placed in time. We can just copy it from here. Okay. Let's promptly copy. And then we came visit inside this one. Okay. This says good. And then what became due right here? We can give it peg round position of 00 by wanted to start from 00 because we will animate the position. And then we can give it the peg round size into 300%. So it's like I'm stretching the linear gradient to be size of 300 percent in his TED off the 100 per cent, then we can make transition. Oh, 1 second is enough, right? I think so. And then we can just make for the animation. And this one could be for animated. The reagent, Let's just call it adding made it a gradient. And then we can give it for our three seconds is I'll turn that in finite. And then we can just copy this one right here to add for the webkit. Okay? Webcasts and paste. This is good. And now let's add for this animation. For this animation anyway, what became due the first thing to do right here, as you know, we will as something which is called key frames. We can edit after this one. Key frames. Let's first see what we have here. Let's compile your back here, reload. So here we have this one. What I want to do right here is to change the background position. This because we have 300 percent. So or the size will not matter right here. I will just change the position. For the position, I will change from the 0 to the 100% for the y-axis, aimed for the x-axis. So we can just go here and make keyframes. Name for the name Arnie made it gradient. We can make it inside, but I always prefer to make it outside. Cut, paste it here. And then act if a 0% by wanted bag ground position to be 0% and 50 percent. And then we can just make for 50 percent, the ground position, 50 percent and 50 percent. And then for the last one, we can just meet for 100%, sorry, Peg Round position 100%. Let's try 100% also. And if it's not, okay, we can set it back to the 50 percent wet cat keyframes and then we can paste. We just got a problem because than this one. Okay, Now, this is good. Let's now compile to see what we have inside the page it okay. I hope everything is working fine. So as you can see from here, we have this changing. This is by playing with the foods to change the bag brown position of the because we have here peg round position of 50 percent and we have also the background size of 300. So I can chain position until I reach 300. You can do with yourselves point I prefer now just now to make it for 100%. Once you can just do is to edit the colors, change to peg round size if you want. So we have a 100 percent. I am attuned to the position of the peg round. On. Inside the 300%, I just use 100. We can use anything you want. And now I hope everything is clear to you. In the next video, we will add four, the hover effect, which is this one right here. When I hover, it's a rotating. And also we will add for this effect right here. We will add four after or before. Anyway, I've just want to show you how we use P4 for this one. If I go to the main dot SCSS, let's make it smaller, it responsive. We don't need to make anything different. What if I add here this one to be before? Well, we see anything different. Let's check it out. Okay. Now we can't, not yet, Okay, now we can reload the same, right? Because we have position of absolute, but absolute will not differentiate between after and before. Now we know that after aid before. Well, okay, we want a marriage between them. We will merge between them inside where free lawyer, you'll know how we can merge between the after and P4. As I told you in the next video, we will add this over effect. And also we will add this one right here. So good luck and have fun. 8. Rotating card and text-about effects: I became make this card right here, which is when I hover, I had the second visit, King Duncan. So we do think about it. What can we do in order to achieve this card? The first thing we need to know right here, or we need to do, is to make, is to make two layers for this card will join me in pi, two layers, similar as here. The layer one will be having the original content, which is the image, and click for more, click-through more is for the mobile devices. I can not take the mouse and hover, so I have to click here on click for more on this small screen. So here let's consider that I have two layers, layer 1 for the original content for image, then click More and layer 2 for the second content. So what we'll be having here, first, the first thing we will be having here, the original card. And then below it right here, we will be having the second card. And what we need here is to rotate the second card which will be added, put him right here by a 180 degrees. And then I need to give it position of absolute to P over or below a SART glue the original card. And then when I hover the part, I want to rotate the original card by a certain degrees and the second card to be rotated pi for negative degraded. So I can see the second content clear. Let us know how we can do that. We can go here to Visual Studio Code and the packages. The first thing we're going to add here is for the Edge HTML. So let's go after this colon right here. Here we can add for colon x log of four. Let's make, okay. I'll 4. And after the XOR of four, we can give it, call them 11 for the small screen. And margin put them off we and also PY for the 0 would just be can make P four. Okay? And then we'd get a give its shadow, large for the books shadow VG, white, which is background color to white. And we can just gave it for z. Yeah, we can get it for the text center. And also for the card original, we're going to use it inside our SAS were a Gmail. I hope that is right. Okay, so here we call them left. We don't actually need that PGI, so we can just delete it. Okay, we don't need the shuttle large and also became a little bit bad and I don't think we need a batting, say we are adding PEG ground image. So inside here we can make for the card side. We can add a class for the car, the side did. And also it can give it a class of card, the side, front, this look before the front side which is having the image and click for more. I can go inside here, or we can go inside here. We can add a DevOps or a tag, I'm sorry, a tag with HREF of none. And then we can give it class, put in and put in light with a 50 percent inside that Bootstrap 5. And we can also give it PY F2, rounded hill. And also fs are four hooks shadow. So I don't believe we needed up books to do, but let's just leave it here. Okay, and then we can give it a click for more. Let's recap what we have here first, we can go and to our live version reload. So here we have the first one, we have the books shadow here, I believe you can see it. And then we can add for the scholar at the back, we can go add to this bond right here, the carpet here, here. After this one. We can add here, DevOps. So let's give it a class on the same card side. So we can use it inside the card side, in the SaaS. And also we can give it car the side back. And then we can go inside here. And we can make for car the content image to be having the clip path. So with off 100%. And then what became and do AS next is to add for car the content. Back and then assigned, we can make for our chain, which is the content here, I'm going to show you what this content as. This one, the content or the back, our team. Okay. So let's go back. Okay. Then we can just make four. Span is about typing here. Okay, span. This is Pan will be for our and we get to make a seconds panic or team. Okay, that's good. And then what we can do, we can go after, I believe, yes, after this dance right here, we can add any Java for the card side, card content side pack. Okay? So OK, OK, OK. We can add here card content side pack. Okay, that's good. And then we can go inside here and we can make data matures Dev right here. Let's give it a text. Senator Jackson, the center. Okay, that's good. And then we can give it px plus the weed which is bedding in the x direction to p3. And then we can give it here P. We've class fs five, margin y of 4. And also we can make it for V, F dot pull you off holder. And then we can give a style for but color color variable. We can check our class for Bootstrap 5 could be fi mutant where the variables pulls off. That puts job or join up to you. Right now, we can just make a hash D 63384. Okay, Now think that's perfect. Let's first check what we have here. When we go to our life version. Reload. Okay, That's good. Yeah, we just need to tie some content right here. Let's type HE or four days left. And then add to this paragraph we can go after right here. And three, and an innovative p with a class of text, me of this class is also for the boots job. And then we can make Lauren. Okay, that's good. Let's check out what we have right here. So here we have Dev, Dev, Dev gap, okay, forward deaths. I think this is perfect. Let's first check like we have inside our life version. Okay, That's good. Just bidding to edit content of the SAS. Okay? We can though pillow below, below, right here. Okay, let's just do this one. We can add here. Sure. The card, original card. Let's just copy the class who are here. I don't want to make a mistake. Okay? That's good. And paste. And then we can open the brackets right here. We're going give it position. Or first, we're gonna do make respective off 15 z. Well REM, what is perspective? Perspective is controlling the size or the distance. I want this content to be far away from me. So a fine musings. We in G, like transform or what we will do for transform off rotate. So we are using perspective to control distance. I want the color to be far away from me. And I'm going to show you very soon what will happen if I didn't use it. We can also add for the most perspective. It makes sure that it's working on all browsers. And then add to this one, we can just give it height, I think 32 or a perfect 32. Okay, and now we can give it position, offer relatives. So after this part right here, what we can do, we can add for the card side, That's why, why it was a composition of threads. We if here because we will add position of absolute for the two carts sides, we have two carts on its right for the firm aimed for the pack. And we will add position of absolute Slave Act. With that position of absolute. We can find them here, the first one and the second one. So the blue each others. We can go pack and then we can make card side. Let's just copy that class from here. I don't want to make any mistake. Copy. We can't paste it right here. And then we can open the brackets. And then we'd get a gated position of absolute chop of 0. And also left 0 width of 100% of the card. And height also of 100% of the cards. And then we can give it a color of white. And also we can make for transition off all. And also we can give it 0.8 seconds. And then we can get back face to his ability to hit it. I'm going to show you what the PECC pace disability is. Very similar, but let's just edit and I'm going to show you what this as okay? Hidden. And also web cat back face visibility to hit. Okay? So and also became give it some for the radius of the pixels. And also books shadow, I think we have both shadow, so we don't need to add. Okay, Let's desk save in your back here. We'll compile. Okay, Thank you. I love you. So here we had the first one and the second wall. Let's just go and move on. The first thing we will do right here, sorry, not here. Okay, here. We can add here. We want to transform fault shortchanged for the back. So we can add here our side and back. Sorry, I type something wrong here and pack up in the bracket. We can add four john's former rotate to 180 degree. And then when I hover over this, I wanted to pick translate it to 0 degree because it will translate in the negative direction. So let's just add for the content image. I believe I have it here. Alright. Okay, content image card we don't have here. We can just add here side content image. And now we can just copy this one right here. Copy. Okay? And then we can paste it here. Let's see what we have inside our page. We'll create, compiled. Thank you. So here we have this, translate it, right? So what after that, we have here transform, rotate off what eight is. Agree, so we have this translated. Let's give it a background color off or add the background color off, right? Okay. We can't compile again just to check out what's going on here. Reload. So here we have the first one. Okay, And what we're gonna do add to this one, we can make for the content image, for the content image. And we can give it a position of absolute. And also we can give it. Let's just make your case for why we don't need to protect tax position of absolute or let's make it positioning of four, let Jeff relative. Because we build with absolute for the content inside it, is this one right here. Let me show it to you. This our chain, okay. Let's go back through this one. We can make height above 40 percent of the card. And then peg round dimension, linear gradient to right to withdraw at bottom. Let's make it two arrived proton. And then we can't make cash. 08, F six, F E to a, and then another hash, F, 53, P a 42. And then for the URL, we can just use the same as the peg round image off the home sectioned image S eight. Okay, this one, Let's take out, but we have right here around the compiler. Know this one reload. So here we have the baggers ability to head in so we can now say anything right here. Let's just okay. Okay, okay, that's because we have rotated y here for rotate off put of them, we will see it clear. Let's take it out. So we had this clear, but we're just rotating the y. So the begging visibility here is working for desk the y and on the x-axis, or we'll treat x. So let's just make it for the click back. As you can see from here, we have a clip path off 0 is 0 at the top, and then we have here 1000% and then here one hundred percent, eighty and one hundred percent, oh sorry, 0%, 100 Let's just move on and see how we can do that. Okay. We can give it clip, path, pulley, good. 00 one hundred one hundred percent, 0, 0, sorry. And then we can make war where a 100 percent, 80%. And for the last 10100 per cent, we cannot see anything right now because we're just make it four it back. So let's just leave it empty and then we can go back to this k, or we can just get it. And we can just leave it empty right now. And once we are playing the animation, we can just move on and just swap, okay? Okay, that's good. After this one right here, we can make for the V for, okay, we can make for the front, right. We have here card, side and front. I think it says right, let's check it out. Yay, yay, yay cart back. We don't have two desks. We just have one card pack on the front. I think. I hope so. Okay. Card Front. We have to know we have to for the public that I'm sorry. Oh, okay. And then what we can do right here is to add for the, okay, okay. For peg round image, background, image, shore, you are L and images, this one. And then we can make for peg round size to cover. And then we can control peg round position. Because bank and ground position, center and center. And then we can control position of relative because we believe you would say transform translate for the click for more position off for relatives. And then after this one, we can make for V and inside at and you can find, okay, and then we can give it position absolute. Left, 50%, chop off 50 percent. Chance former John slate. Sorry, we've got something wrong here. Transform, translate negative 50 percent. And also again negative 50 per cent. Let's take it out to make sure that's really working. We can go to our life version reload. So here we have position of absolute. I'm going to write that. Very good. And so let's try to give it some dn, dx to make sure expanding. But with John needed here. Legs gave it. Do we have here put him white. Co-twin where where I put it in light. So why it's not working? We can delete this one right here for books said, Oh, okay, We can save reload. So here we have this perfect death because off the books shadow. Okay, that's very good. Lives. We'll pack. While people do here. Add to this one is for the whole verb when a hobo the front or you want it to be rotating pi negative 180 degree. And when I hover over the part, I want to patch, we'll rotate it to 0. So it will rotate in the negative direction off their part original or for the card fraud. And I can see the second card. So here we can just make four or do we have card original here? Yeah, so we can make it US scientists. Cards and original. Sorry, we have something wrong here. Cards, original. When I hover apart, overshadow, I want something to happen to the card that side. For OT. And I wanted to rotate, transform, rotate to negative 100 a degree. And I want some transition right here, 0.8 seconds and also x. Okay? So let's also add for VIP back for their pack. What I wanna do here is to transform, rotate y to z or y, and I'll just all, okay, So we can just copy this one. Child, avoid wasting time. Thanks to this one to be PAC, workday to why off 0. So let's see what we have right here. We can't tells me we'll get a problem here. What's the problem with it? Okay. Tells me bitly we have a problem here. Tells me the problem is here. What's the problem? Let's add to its try to add in another one here. So the problem-solve it. Okay, That's good. I think the problem with here, yes, for this one. And then we can run the compiler. Jasmine, you will get a problem for the line 19 eight. What's the problem here? 19 a to yea, I think this to be here. I believe so. So lifes and get a pack, everything is broken, get a load when I'm over this one. Now we have this rotating, right? And this is really work. I hope this is clear to you. And so we had this one. The next step here is to add for the back styling. We can hear the code. And the first thing we'd get a tube was to delete this one. And then after the clip path right here, what we will do, we can add a ground side divert tag around position, center and center. And then we can make for the object to fit to cover, to make sure it's covering or less delay you have. And then we will see if we're really need it. Okay? And we're doing save widget one. The compiler will go back to this content right here, reload when I hover. So we have this one right here. We don't need the object fat. And now the next step is to edit our chain. We don't need the peg round off thread anymore, right? Okay. Then we once again just do here. I'm going to show you later while the burst backed his desk and also while the back visibility is, okay, we can after this bond right here for this patterns. So here inside that content image, I believe we have spent or the back. Whereas the pack right here, Let's take it out. For the pack. Yeah, this one. So we can just create a new one right here. You can copy or we can just add side. John sent back to the side Content Pack. We can just give to our SAS file. Okay, right here. Where we get a chai pen side. Where is the x for the cart site content image? So we can just copy this one and paste it inside the card side right here. Guard side is editing here, here, okay? So we can add here and, and this one right here. And then we can up into practice right here. The first thing we'd get a Give it for vision of absolute. We have position of relative for that before. So we can just put absolute value signs. And then we can make chop the fetch pixels right off 32 pixels. And also we can make the line height, height of 0.7. Okay, that's good. And then we can give it color off plaque. And after this one here, let me check out what we have right here. Okay. Card side, Content Pack. Card side. Okay. Okay. Okay. Card content, limit, shake it out. God side content back. I think so. Okay, this one. So let's desktop be this one right here and then copy it. Let's turn is still up. We'd have inside of our page, we can compile this code and go back to our page, reload. So here we have this here. Why we have it here? I think there's something wrong with it. Let's prompting, we were using this position of absolute for the content image to forget about the content here, become ten and Back. We can copy this one, and then we can go here and paste it here. Now we can save, reload. Okay, so here we got this year. The next step right here is to add for VR content off or the positioning for the spans. So let's just do it. We have here for content side back, side content back. Okay, so for this one we can add display flex and also flex direction to call them. Let's check it out. Run compiler reload. So here we've got this here. I think we got a problem here. What's the problem? Yeah, yeah, dust chosen the reload. Let's add some styling to it here. We can add here a child of fat, which can't be for this pan, pan up into bracket. And then here we can make adding arr Dang, champ pixels for the x-axis, thirds pixels for the y-axis. And then we can give it a border radius. I think two pixels is enough. In the demo version we have five. But here this is enough. And then we can add books shadow for 0 at the next direction, Atari and for the y and 12 REF for the bluer. And then we can give it to white. And then we can me poor there for the width, two pixels, solid of plaque. Okay, this is good. And then we can control the peg ground color. Let's just make it white right now. Okay? I think this is good. We can just give it a display of flux, but we don't need really display if plump since we have flex direction into column, Let's reload. Okay, So this is good right here. We just need to control that transform of translate to be the same as here, as you can see from ER, to be very similar to this one. So let's do it. We can go to this one right here. And then we can make for Z Pan. And for this pan to be just for the last child, last child. And then we can just open the track hit. Okay, and now transformer. And then we can make translate X negative 10 pixels. And also we can make for Translate Y negative five pixels. And then we can just go run the compiler again and go back to our live version. Not this one. We can reload here. Yeah, so now we have this perfect one-point just need to add here is that folks shadow for the content right here to be able to see it as a part. So we can just add here for the car, the side. Folks, shadow, 08, RAM 12, our m, our GPA. Let's just add this one right here. Let's now run the compiler again. I hope it's clear to you. And now we can just hold for this one. We don't have it yet. We're about now. So here we have the box-shadow and we can see the card player late. So now we have, everything is really working Perfect. I hope everything is clear to you in this lecture, what we did an ad yet is for the text. What if I told you about before, which I want to add here that the light, this one right here, like this. So let's do it. The first thing we get a D, you know, to, to add it is to add a class with text. I think we have it here, right? Let's check it out. Okay, packages for the account, yes, we have it. So let's just copy this class and then we can place it inside the main.js, CSS we're going to use many times. So let's just add text and then we can open the bracket. And then, and At PayPal. Now we can open the bracket. And what we can do here is to give a position of relative, because we will use position absolute and after element in order to make it. And then we can give it taxed at pound sorry, this puppy out. Or we can just make it inside here. And asked her, I told you that habit after before. What if I edit the content like here, and what will happen? So next time here at pout, AS now we can add a content inside. Or CSS started function like the color, font size and all of that. Let's give it a color bar and GPA, 192192192067. And then we can make for z-index off negative one. Let's leave it and then I'm going to show you why. What are you would think that's the index. And then we can give it, chop off negative 40%, but we just need to give it a position of absolute, position of absolute and also the width since 100% phoned size off want to Lear percent. And then we can give it text shadow. The shadow is similar to the books shadow part, leaving the shadow just for the alphabets, not for the old rectangle. So we can make text shadow 0, 20 pixels, pixels barge. And then we can make 0, 0, 0, 0. And let's take this one here. Okay, this is good. And then we can make for the left of 50 percent. Why are we using the left of 50 percent? Because we just type at one and then we can't give it text center. So it's taking all of this width. And without the left of 50 percent, this will be here, not here. So we need to give it left off 50 percent and also transform, translate x negative 50%. Okay, Let's check out what we have right here. And that's the run the compiler. Three load. So here we got this here. That's why we need the Z index in order to make it Behind Act likes to make here the index of negative one. Okay? If I just run the compiler, reload, Okay, this isn't good. And now what we need to learn right here, what will happen if I delete a perspective. So we can go here and tried to leave the perspective from here. Cut, save, reload that the compiler reload. So here, this is weird, right? So it's not taking the far away enough to give it the way the animation, it looks like it's really in front of me so I can not say that we need so much. The far, the Manchus far I get the content from me as much I came say, a 3D animations. That's why we are using the perspective. I hope this is clear to you. And now we're going to talk about the PAG phase, the visibility one, if you delete the back face visibility. And then we run the compiler, then we load it. The first thing we have here, we have this here, but I have mine, right? What if I decided to give it a Z index of one for the front? So let's try to make it z-index of one. And now it can save and go back here, run this compiler. Yes, we have this butt. Whenever I, whenever I rotated, it will be always having the index of one. So this is not will be good. That's why we are using here PAG visibility to heading that good knows that it's the back face. So when it gets back to his disability hidden in the original, it would be above. But this is the pack because we have the front if the first div element inside the HTML, and then we have the second one which is farther back. So when I add the first one here and below it, the second one that could will understand item on the peg phase was ability, which is a second one to be hidden behind. The first one. I hope this is clear to you. So we can run the compiler again, reload. So this Burkean perfect, and we've got no problem with it. I know this might be more wider vein, the first one. So now we are done from the start. What we will do in the next video, we will add for the success stories section right here. This section would not take too large or too much, just because here we have success stories. The same concept as the actor element. So that's why we are using dot text dash inside of a main dot SCSS. Here we have three images. And so we have here the packages will put which would be the same. So we can add them all in the next video. I think because they will not take too much time. So good luck and have fun. 9. Success stories and Packages: Ad for the success stories and also for the package, yes. So the first thing to do right here, let me get to the HTML file. Sorry, this is the demo version that's been right here. So let's until after this section, where right here, okay, This is good. And then we can add a section and give it a class of tourists. And then we can give it also MY, which is margin, put him up to be five. Okay? And now we can add an H bond and give it this plate of four or we can just copy it from here. Yes, this one. We can now copy and paste it right here. But in its tariff up out, we can make it suck. And then we can write here success stories. Okay, this is good. And then actually this part, Let's go to the SAS to add to this one to the SAS. Okay, Scroll down. What we can do here is to copy this one. Copy. And then we can add some space right here. Paste. Okay, like that. That's to be success. Select sas. Worries. Now we can save Back to run this compiler. It tells me we have a problem here, but prop limb the Or rule, okay, is this type of side. Note, this is times inside the spawn. So we can just take this one out. Okay, So there's never that out. We can add on another practice for the text. And then we came pay us to even year one here. Now we can save, but we didn't say the packages know what jet. And then we can run the compiler and go back to our life version. Okay, reload. So here we had the success stories, perfect. And then what we will do next to write here is to add some content to this one. So let's do it. We can go back to a good editor backup just to look at to ML. And then actually that one. And we can add going painter and also margin y of five. Okay? And then add to this one, we can add for the row margin, put them off five, and also desk t phi content to center. Okay, that's good. And then we can make for colon large of four margin why alpha 3 and Paul and for the medium screen to be 67. And also call them 11 for the rest. And then we can make it for the PG neurons. And then inside here, we can just make a car that with the VGG trans pay rent. And then we can make poor there of 0 because the card inside the Bootstrap have a poor there. And it now. And also we can get a text center. We don't need the center. We don't have tax inside shadow large. We have problem here where the shadow. Okay? And now we can go inside this content and try to add image. We have the source here inside the demo version. You can get it from the source code, or you can just got any image from the Internet, okay? Now we can copy and then we can place it here. And we will also give it a class of card, a man's job. This is also for the Bootstrap. Let's take out, but you have inside the web page right here, reload. Here we have the first one. Okay, that's good. To answer the rest. We can just copy the same. We don't need to add new ones where we can copy this one. Paste and paste. And then we can go a little bit page. This is good, right? So after this one, Let's add for the package. Yes. Why don't we will do for the packages, we will just copy the same as that power does text. And then we'll add this paragraph and card pack ground right here. So let's do that. We can go to the package. Yes, after this section, we can add here section with class. We have a problem here with class off can't chest. And then inside here we can make for the also MY of five. My of five. Okay. And then you can make an aside, the etch one with plants display all four over, then just copy it from here. Where is that? This one? Copy and paste it inside this here. This to be pat. Again. Copy this to be for PAG. Can't just know, okay, this is good. Now we can go to our SAS file right here. We will copy this one, add some spacing, paste, this one to be back. And then we will type here packages. Okay, we can now save and run the compiler. Good. Let's go to this one right here, reload. So this is perfect here, right? And what we will do as an accident, we will add some content inside. We will add first the paragraph with class deflated and text muted, which you've seen after the packages title, lead and also taxed muted. Let's also give it checks. Center. And here we can add Lauren. And after the lorem, what became do here? We can add and change. And also we can add for the row margin top of four. And also just to phi. Let's make it here. And justify content of, let's make it evenly. And then we can go inside, we are and we can make call them MD or F5 should call them off 11. Large and chop or let's make Martin job okay. For padding off, for shadow, which only the shadow here. And BAG white. And also text, center cards. And keeping ground, which is for the animation. And then we can just add inside here leaved Lorem and learn. Okay, that's good. Let's take out what we have right here. This is good. So, and then after the Spartan, we can just create for the other one. We can copy this colon because we just have two here. So we can now go reload. So this is perfect. We get no problem with that, right? And so now we're done from this part. What we will do in the next video is for the Q and a. What we will exactly do here is I want to set a selected area and then it will select values I have for the value of flawed for Robinson lect video, we will just try four to this one. This one. This one. And I think this one, would it be for what one? Yes, this one to show you how we can add CSS files inside the content of a JavaScript. So let's give an introduction to what we are going to do here. We will do here and select area, and then the value one for up and select here up in this select menu, when I click on Submit, I have a question. So inside the HTML, we will be having a header here or paragraph with collectively it anyway, It's okay. And then the JavaScript, if the value is one, I want to change the enter XHTML to be this content. And if it too, I want this to be changed, it to be discontent. And this will happen only when I click on the Submission Putin, which is this spot right here. In the next video, we will know how we can do that. And good luck with JavaScript. So good luck and have fun. 10. Contact form: We will start quitting the contact form and then we'll move to SAS. So the first thing we're gonna do here is to add the HTML of the contact form. Rican go here section and give it a class off contact. And then after the spot, we can go inside or we can just first copy this one. Paste it here, this one to be contacts, contact the k and then instead of QA, and we can just type Contact. Okay, This is very good. And then we can just take this one here. And basically it for the SAS, for this one right here, likes basic chairs first. So k basis, visit, copy, paste, the contract, basically it here and also here, this to be uppercase. Okay, do we have here the same? Yeah, so let's run this compiler. I'm going to click this one here. So, okay, now we can just run compiler. This is good. And then we can go back to our version right here, which is this one. Reload the page. So here we have for the contact. And then I can go to the main content at which a is the form. We can go from here. Okay, after the header 1, the surest can do right here is to add four container and we can add here depth with class container. And then we will add depth with class a furrow. We can just add here margin y of five. Okay, that's good. And then inside the row, we can just make for the cold. And 11 here called them 11. And we want here justify content to center, justify content to the center, and select this column. We will add a card guarded with a poor order 0, order 0 and set the bootstrap is poor there a set to 0 for the border, not for the poor the radius. Okay? And then we can make for PG, Y2 and also for shadow. So we don't need the shadow. We will make hard peg round here. So here are the back ground. And also we can make P of 5 and also m y of five. Okay, that's good. And then we can add a div with class off laden. And also f of 3, which is phone to size. And then we can make and make a new row inside it. This is called by the nesting method. We will not talk about the gutters right now. It's none of our business inside this project. We don't need to be that tech complicated form. So here we can meet colon md 6 and also call them 11 for the small screen. And then add the dispersion would just need to make to label and input. And we need to connect between the label and the input right here. I'm going to show you how to connect between them. So label. Yes, here, there is something which is called for the four is the idea that I will type for the input. Let's dive here. E mail one assigned building it to not have to pick the same name. So here we're going to give it a class of form label, which is from the Bootstrap 5. And here we can just type e-mail. And then we can set for the input, input with a type of e-mail. And then we can make a glass former gone troll visits for the Bootstrap. And also we will add former input for our styling. Okay? And then we need to give it an ID to connect between them. Email one. And now let me go to the website and see what we have right here. So here we have this one. And then what is the purpose of connected, connected between the label and the input? That when I click here by saying click on the input. So when I click on label, that will owe to play on the input. So they are connected in between each others. We can go pack, okay, and after this one right here, we can just meet for the passport. We came copy this one. Paste. Okay, that's good. This one to be for passwords, sorry, password one. And then we can make this font to P4. Good passwords. We can copy this for basic for the ID. And then the last one that we will add here is for the address. We can add here, or we can just copy the same a is here. We will just change this one to be always 1212, okay? This one to be for the address. The state may ends here and rest. And this to be taxed. The Save As here, we can copy this for, so we can base it forward this spot. And so we can go nail out and check out what we have right here. So here we have it. And I had this one. We just can't add here some margin chop. Let's add margin chop off three. I think that we will be perfect. We can take it out. Okay, that's good. And now let's add this, the submission put in for that. So we can go after this one right here, and we can add pull them off to welder. And then we can add debt. I'll text center to make it centered text center. Okay, and now we can make put in with typeof Septimus. And now we can give it a class, put in, put in dark, and we want to give it with a 50 percent. And now we can type sine n. Okay, and now that's good. Let's check out what we have here before we go in and the SAS, we just need to add some margin top. Let's add margin chop off five, and we don't need to take a look at it. Let's go now and add the SAS. Ok, now our mission to add The satisfied here. Okay, We can go after this one. The first thing we will add here is for the form inputs. And then we can open the bracket. The first thing we will add here is to have this font size, often 1.5 REM. And then we can give it V, the padding, 1.5, 4M for the y and two REM for the x direction. And then we can give it some portable radius, sorry, for the radius, by three pixels will be enough. And then we can give it a ground color off our GPA. And for this RGBA, we can give it to FFS, which is the color white. And I wanted to degree two p 0.5. Okay, There's really did. And then we can give it a border of none. But for the broader, put them CO2, I1 here to be having three pixels, solid off light gray. And then we can give it the display. Float. And then can give it transition to 0.3 seconds to add some timing function to the animation. And then here we can make and a felt this case if you join either focus, while the focus is, we can go back to our here. The focus is, when I click on this one, we have here the outline of blue for this focus. This is the focus when it's active or clicked on, then we'd want our clients to be non. The outline is for the color here. So now client to none. So now we have no clue color. And then we need to give it a shadow or we want, we don't need it actually. 0 for the x axis, 1 REM for the y-axis, to REM for the fluor, our GPA 000. And for this one to be 0.1, I would just get approximately, okay, this is good. And then we can make it for border radius to put them were just on a chain that for the premium. In Jane's any order, you want. Two or three pixels solid. Let's make it too. So okay. Whereas the printIn 55 see 57. And then for the valid, for the invalid input, we can make it inside. And then for the invalid focus. And when the focus is invalid, invalid is something like I have clicked on the input, but I don't have anything inside. So till being valid, until I type anything in here or you wanted to further push them to be. So we pixels solid F, F 7730. And then what we would do activist one is to add for the other, we can add here the color of 99 nine. This will be good. Now became going to run the compiler and go back to our version right here, reload. So here we've got this. When I click here, yeah. I have the green color. It's not good. Why that, why this is happening? Because we didn't add required to the inputs. When I, John and the required at the code will read, I have no problem via the website, doesn't really need it to fill the form. So why why should I make it invalid? And that's why we will add required right here. I just wanted to show you the reason of required. I was just change this one to a password and then we can add required. Then we can just copy this one, paste it here, and also here. And now we can go here and reload. So here we have this invalid. When I type anything here, it's not valid yet because we don't have email here. We got the type e-mail thoughtfully this fun. I can type anything aside and at filled a valid. Now that I've done from this part, what we will do next, we will add the contact form to this website. So here we have a copyright, the icons and quotes, links. We will do this part in the next video. Good luck and epsilon. 11. Footer: Okay, and in this video, we will add the footer to our project. So the first thing that gets charged with is add the tag of the footer. Let's do it here, footer, and let's give it a class by padding top of four or even all of the padding or for margin top of 50, display flex, which I'll need accident. It's a flexor. So PEG dark and also text white. This is for the background, color of white for the PG Darth. And further texts, white icon that color inside to be white. So the first thing we gotta do here is add a container flight, which is taking 100% off fifth quarter while the container and just taking some, I think if my P 90 percent or something like that, I think setup. So here, I think you can see from here, let me go back to the demo version. We have two rows, one for the gem and y for the quick links for the gem project. As you can see from here, we have text shadow. So let's do that. We will give it a fancy color, instead, white. So here we will add a row. And then we can add here colon, larger or coelom and geophysics. And further west it will be or medically dwell. And then we can give it to margin, put them off for such four decimals, queen, okay? And then we can make it for X1 plus L display six. And also we can make for f of w, f dot u off holder. And I'll serve margin. I'll F5. And then we can give it a style for the text shadow. And here, 0 and 10 pixels, 20 pixels. So let's try to give you a pink. And if it's not okay, we can just leave. It's okay. And I'm gonna move it to this color degrees that agree, I think this is enough. And then inside here, we can just tie for Jam, Project, Portfolio, project look, just call it word Sali you per object. Okay, That's really good. Then after this part, we can add further list. As you can see from here, we have a list and for this left, we have list-style none. So let's do it here. You will. To do it into Bootstrap. We can just give it a class of list unstyled. And this will be having less style to none. And then we can make for L with, okay. We can just make here for a F sharp, E, F, F and nothing unless we give it a class of image, flight or not here actually, we can get this one. Font size of five, length, light text decoration into non and became go inside here. Image with the source, the source. We will get it from the demo version AND can get it from the source code. So let's get it from here. Okay, that's good. And now we can go pack, paste it here. And regarding the height, we can give it 40 pixels. 40 pixels will be enough and good also. And then let's type a span here with class margin starts off three, which is margin-left. That started with Bootstrap is gem. I am one and we don't need to check the same. We can just get it from the demo version later. We don't need a time. So here we have Jim item one. We will just get to this one here. Copy, paste, this one to be two, this one to be three. That's good. Let's take it out here. This is perfect. We just need some margin, right? So let's give for the L here. Class margin, put them off three. Let's check out. This three is good. So we can just copy this one here, paste it here, and also here. Okay, What about now? So this is good. And now what we will do, we will add for the second column, which is for that quick links and we will just make it in the form of a tag. So whereas the Geoff, this one here, so we can make here, call them md 6 and throw the rest. It will be automatically 12. And now at one with class of SFS a 55 and Evan gaba lieu of folder quick lengths. Okay. And then we can make a LI sorry, u, O o you with a flipped on tiled. And then we can make L here. And then we can make a chart f else nothing. Let's give this one class of margin but above to ask nothing and give it a class of link light. And also checks decoration in to none. And this one will be for the home. Then we can copy this spawn and make for the pout success stories Q&A, opec it is first Q&A and contact us. This will be for at PAL bus. This one will be for the success. To raise. This one for that S, Q and a and the last one for v, contact us. So let's check out what we have here. This is good. And then after this part, we will add for the copyright. Let's go add to this row. So I think this is the closure for the row. Yes. Here we can add the row. And for this row, we can type inside here, checks to center. Center. We can add a horizontal line here. This will be good. And then we can just make margin job of four or margin y of four. Okay? And now we can make p with a class of fluid and also taxed mutate this one to P4, the end copy. Copy, right? You can just type your name. I'll type my name here. You can type any name you want. 2021. It's July and now, but it's okay. So now let's reload. So here we have everything perfect right here. We got no problem with that. And now what we wanna do next, and he was like the nav bar. Let me give you an introduction about the nav bar. This is the navbar. I wanted to be focused because when I click here, you will find a dark background will scroll from here to here, okay, One, 23. So as you can see from here, we've got a plague, plague colored background starting from the job to put them. And then we have here this course. This is a, this is in the form other cards, when I click, it's being rotated from the first thing that transform of Rotate Y 180 degrees and then from 0 to one. This is the trick. Now, what do you think the perfect way for that? So the first thing we will do for the nav bar is making sure bat this, this is called the checkbooks hack. So the first thing we will do is to make sure that the checkbooks hack is working. So when the tick box is checked, I want an F part to be on. And when it's not checked i1, the nav bar to be packed. And then if in the next video we will know how we can make this labeled right here and connected to the, to this labeled right here to this icon. So this icon will be considered as the labeled. And for the input, it will be checkbooks and it will be having display none in order to not appear inside. I will page it. And then we're having something that I'll talk to you about it. Next video. We just gave it introduction about what we will do in the next video. And also there was something what we will do also in the next video is to make sure that it will be turned into x direction. As you can see from here, I think. Yeah, Here. Let's look again. So it will be go to the alphabet when we go to make it checked what it will do that in the next video. So we will do anything about the label in the next video. Good luck and have fun. 12. Adding Navbar icon: We will add the label for the navbar. So the first thing to do here is to go to the top of the page it in here. Yes. And then we can give it nasa sorry, not here. Nav. And then we can just give it a class of navbar new. And then we can go inside it. Let's add the input S first input with a type of checkbooks. And we can give it a class of nav bar, new check ups, better Don me it down, but I don't think we will need the class, but just to keep it right now. And then we need to connect between the nav bar, sorry, the input a and it's labeled. So let's give it navbar, new Les Paul. And then we can go here to tie the label Leopold for nav bar, new Leopold. And then we can give it the class. We can give the same as the four copy and paste. Then we will sit inside the content. The label will be for the icon. So let's give it here, DevOps. And then we can give it a class of nav bar, the new icon. And also we can give it text dark, but I don't think me the text dark because we will not type content. We will just asked tasks. So let me first go to the CSS. Let's make it at the top of the page. So here we will add for this one, we have here first the navbar new, nav bar, new. I just want to make sure it's the same so we can just copy this and paste it inside our SAS. Okay, perfect. And then we can make for the people. But first, let's give it position affects it because it will be fixed it so I can open it where ever we are on either page. Chop of 0, left 0. Okay, good. And then after this part, Let's make for the label. We came copy it from here. I don't like making mistakes too much. Ok, a copy. And then we came paste it right here. And we can open the bracket. Let's give it a position of fixed it because as you can see from here and the demo version, I can take it anywhere. Okay, let us go back. And then after this part and we can give it to top of China pixels and right to where the pixels, okay, Let's give it a height of 100 pixels, and also with 100 pixels. And then pour the radius of 50 percent peg round color. Let's just give it pet ground color, a threat to make sure it's really working. And then books, shadow, 0, 13, 20 pixels, sorry, 32 pixels, 20 pixels. Let's give it for our GPA. Let's give it this color here. Okay, this is good. And then we can give it z-index off 1909. So it will be over any text we have on the page. We can now too, on this compiler. Okay? And now we can go to the live version, reload the page. So here we have this. It's over any text we have on the page. And this is actually good. Let's turn it back to white. Fff. Okay, This is really good. Let's now as some media query for this icon. And we can make media max width. Let's make it 4767898 pixels. The same as the medium screen for the Bootstrap or I think the small, the small. Yeah. So right here, we can make the chop to be 10 pixels, right to 10 pixels. We can also give it the margin, left, sorry, margin right, of negative 10 pixels. And the margin chop off negative 10 pixels, driving this healthy good. Let's just make this one to be five. Okay, so we will change also the height and the width, 72 pixels and also 70 pixels. Okay, Let's check out what we have right here. We didn't compile yet. So here, okay. So we had this here. When we may get a smaller. This is very good. And then we can make this clean larger. And as you can see from here, we have the tick books. So when I click here, we have the chick books on and off this work. So this is a really good. And then we can go and ask for the icon. For the icon, the third one or the middle one will be having the original bought for that job, will be having that p4. And father was B having the after and we're going to use position. I'll fix it, sorry, relative and absolute to make it. So now we can go enter the label. I think we can check it inside the package. Yes. Yea, the Les Paul icon and copy this one. Where is the label? And this is for believable and best one. Okay, Let's make sure. I, yeah, I think so. So here we can give it a position of real attack. It goes according to the icon, the original one which is eight the middle, we will change position of absolute for the after anthro that before. Here, we can make text align to center because we wanted, we want to make it centered at for the x-axis, for the circle. And then we gave me here margin chopped off 50 pixels, just hit from the y-axis. And then we can give it domains. Sure, it's centered. We can add to, let's first see what we have right here. We can give a tide of three pixels, width of 50 pixels, and peg round color off plaque. And then we can just go here, run the compiler. Okay, reload. So here we have this one. It's not actually centered. It will be centered on leave for the text. So the best way to do so, it's not controlling the margin left is making the margin left and margins right to be over 0. So here we can make here margin left off O2. And also margin, you're right, right to 0, to 0. So here you will just want to make for media query. For the media. We can make here max width of 767 points, nine pixels of the packet. And here we can set margin chop of 35 pixels to be from the center of its height and the width. And within. Now this is good. Let's just see what we have here. Okay, This isn't good. Now, it's the time to act for the the P450 for the after. Let's first start with the after. We can do here. After. The after here will be having position of absolute, which is relative to the original content here, because we have position of relative for an icon, which is this one here. Okay? Here, we can give it position absolute and don't forget content of none. Because without it, it will not work content. Or we can add any content you want, as we did for a pal task and the text. So here we can make it the chop to 15 pixels and left of 0 because the F2, which is at the bottom left of 0 relative to the original one margin left of a row to make sure it's centered. Margin, right? Auto. I always prefer to do that. And then we can make for the, okay, for the height and the width, yak, hide three pixels with pixels. And then we can make that transition. All three seconds. And then we can make for the P4. Let's first do what we have here for the after reload. What's the problem here? I believe we get a problem year. What's the problem? Okay, We're just need to check it. Ride here, waiting for the icon. So what's the problem here? Okay, Let's find the compiler again, I think because yea, yeah, the background color, background color of flag. Run. Reload. So here we have for the after, Let's now do for the P4 further before we can just copy this one. And Amos check out the chop off 15. We will make it to negative 15. Before negative 15. Okay? We can now run the compiler reload, Okay, and this is very good. And now we can add for the input, we want the input. Now we know that they are connected to each others. What would just need to do right here to add display of none for this input. So I can not see it on this screen. Let's give it here. After this old or inside it. Yeah. Because it's it's a child input this play off. None. I don't think we need that class here of the input. And now we want something here to input when it's checked 51 that label and inside at the icon to be having the background color of transparent for the, for the middle one. So here, input in case if checked. And then right here, where, where the label, the label is not a child of the input, but it's adjacent j, which is next to it. So we can use this mark right here, this one. Or if it's very adjusting to it, we can use the plus. But I always preferred to use this mark because it can be considered as the next very next to it or not. I always preferred to you if the mark I told you account. So here we came. Here. It's this one right here. And then we can make for the label and laypeople and insight the label. And we can make for lay people, I come, we cannot just type the light bulb icon. The very next because it will be considered that the label icon is the adjacent or the next one to weight or the one I bond, which is at the roof. 13. Adding the black back background color to the Navbar: We will build upon which you use for the big round. So when I click on this label, I own the plague black cat peg round to dump from here to here. So the first thing to said here is the width of 100% bond, the height of 0. But when I click on the label, I want the height to be 100 v action. So let's do that right here in the code, right here, after the label. So after the label here, we can just type Java with class of nav bar, new ground. Okay, and then what we just made here is that the background because we have the nav bar in the SAS. So here, where is the mass bar? We'd get assertion right? Nav bar. So we don't need this anymore. So you hear, we can meet and, and this one. And up in the bracket right here, what we will type here as first as height of 0 pixels at the beginning, and what's 100%. And then background color to black. And let's make position. I'll fix it. And then we want to make sure that it's really where it can sell it to. This one T of v. And for position and shake cent, we can give it chop of 0, left of 0 and transform it will donate transform and Z index ofs 70 or sorry, not seven. So the background will be having 97, content will be having 98, and icon will be having 1909. So the peg round will be there and overwrite I have the list of the Nath bar. And finally we had icon over them all. So let's run the compiler to see what we have inside the screen. I hope that is clear to you. So here I'm saying we gotta yeah, So the live version, no, this is relatively life versions. So what's the problem here? I think we get a problem with this code. We can check it out. May have par new for the packages. So what's the problem here? Okay? I think here an extra one. Okay, let's run it again. Reload. So here we got this word can. And now let's go back to our code. Let's make this with 0 pixels. And then we can make for the input right here. Input. When the input is checked and I bought something to happen to the big round, which can be considered as an adjacent. So here, because it's live at chemistry, it's on the most outer shell for the input. So if I want to input that most outer shell can be considered a, the labeled a. And if I want something signed that label, I can make late adjacent or the outermost shell, as I say. And then inside I have data and the same way off the CSS. And then here input checked, and this can be considered as the outermost shell. So here we can make here that mark. And then we can make for v a back ground. And then we can up into practice right here to make it where the height of 100 vh transition to all. And let's make it 3.5 seconds. And then we can copy this one and make it here. So also I can see it when it's closing. Left one, the compiler reload when I click here. So here we've got this perfect, right? We're just wanted to decrease that transition so we can't be able to see what's going on here. Like that. Run the compiler again. You know, pack reload when I click here. So this is Burkean, right? And also when I click here, it will go back. So everything here is working perfect ellipse at it back to bind. So we will chain. So now we are done from this part. What we will do in the next video, we will design the basic of the nav bar, which is the items. And I'm going to give you an introduction in the next video for that. So good luck and have fun. 14. Adding the design for the Navbar items: Now let's do it for the nav items. The first thing to do here is to add the HTML for the nav bar so we can go here. Where in the packages? Yes, after this bag ground, what we will do here is to add depth and width class cufflinks too, because it will have some link that query. And then inside here, we can set for the colon are just flakes, two, colon, one. So you'll be able to use the SAS professionally. And then with class content. And okay, we can just make it flex to content. Then. Now inside here, we can just make it four flex colon in one content, all limb, one content. Okay, that's good. And so we can also give it a class afflicts to content because there are just some common styling inside it. In here. We can make a with HREF of nothing and less inside here, Debit at one, and then we can give it a class, display, five and text. Uppercase older. Let's just make it from the SAS. And then inside here we can type home. Well, let's meet for the second colon. We can copy this one. Paste this one to be two, sorry, two. And this one here to P4 out us. Now we can create for the third colon. Theoretical in here for the success stories. Let's make this year sucks SAS to raise. Okay, that's good. For the fourth 14. For this one to be for the packages. We can type here, bank CAD chess, and then forward the fifth one, 55. And this one here to be for Q and a. Okay, that's good. And then we had the last one for the Contact Us. 6. 6 contact bus. Okay. Now we can go and check out what we have right here where you load. So here we've got this here. We're just waiting to good in the SAS. Okay? So here we can go to the SAS. After the SAS right here we have the navbar new man inside the nav bar and you, we'd get a type display flex, sorry, the class, I'll flex two. And then I want this one to be having the Z injects us 98 because this is for the content other than half power, as I told you in here. I bond also display off Lipson selects direction into row. And also I won't flex wrap to wrap. So if I exceed, that won a 100 percent out of the page, I wonder wrote to be procaine and create a new row having the same display, flex and flex direction wrap. And also less Meg visibility to visible right now and then we will join it to hidden. In here. We can make for the top of the row position and fix it first. Physician off fixed sent, job 0, left 0. And also we can make the height 100% of the nabla and also of 100%, which is one hundred and one hundred percent of the screen. Okay, that's good. And then we can add for the colon. We can go here, add to the swamp, or we can make something different right here. Where is that colon? From the colon one, we can just sit here, selects two colon. Okay? And then we can copy this one to base. Here, here, here, here. I hope this is clear to you because here we will add the x terms for my job and all of that. Okay, This is enough. And then we can go here and make and cold and here we can make color or first text align, center. And also for forwarder pixels, solid off F, F, F. And then we get to me for z-index off nine to eight also to make sure it's rarely work in Paris, right? And position of relative. And because we are going to use position of absolute 4D, the content height of 50 vh for each one because we have 66 divided by two is 3 in each row. So here we will make for the width. We will make 100 divided by per week, which is the weeds that we've read like that percentage. This is good. And then we can make for the color, color to be white. And let's not let, made of tons from or 48 right now. Visibility to visible, just right now, transition to all one seconds. And also we can make a capacity of one. Right now we're gonna make it to 0 for the transitioning or for the animation. We can now, okay, and so here we've got this here. So I could just need to add it here if the spiral inside it, and we can go here. The first thing we will do is for the A-Check for the a tag. And we will make four color white text decoration into non text transform uppercase M. And here we can give it with one hundred percent and one hundred percent. Let's take it out. Okay. This is good. Now let's continue with position of absolute position. Absolute job. 50 percent. Left, 50%. Transformer. Chance slight negative 50 percent and negative effects per seconds. Now let's run the compiler. Just say what do we have inside our screen? So I think we got something wrong here. What's the prompt? I think we got something wrong. Okay, so we've got to make a difference by here. What's when the Content Flex 2 content. So here we can make for Flex 2. I doing here, likes to content and forget about the end here. And we'll keg. And then we can just up into practice and paste this code right here. And then we can run the compiler reload. So here this is work in perfect, right? What would just need to do right here is to edit peg one color for each of them. So let's do it. To avoid wasting time. We can just get the colors from here just to avoid wasting time. But we don't want to waste of time on adding the colors. Copy. And then we can just paste it here. And then I think we got different places right here. Selects colon. Yeah. So here we can make for Flex 2 colon, right? Selects too. Yeah. And like that. So here we can just copy this one. Okay, again, again, again and finally. So let's run the compiler to see what we have inside our screen. This is really working perfect and we have a Z index isn't working Good Other side. So here, now we are done from this plot. In the next video, we will make the animation work. We will know how we can make this animation work using the inputs checkbooks hack and also limits surest go to the back, good, So we can be ready to V, the nav bar, as you can see from here, when I click here, it will place as first, right? So let's make it rotate it at the beginning. So when I click on the label, it will pee or medically were traded by the period. So here, once again, just do and we can go to the where the SAS, the Sanskrit here. We didn't just make four where this one is ability to head in the same ad here, whose ability to heaven? Ok, and here we're positing to be 0. Okay, that's really good. And then after this part, what we're going to do, we're going to add four Transform, Rotate Y for the columns. Here we have the colon. So we can add here, Transform, Rotate to y, a negative 180 degree. Let us just set this back to visible and opacity of one. So I can show you what's going on here. Okay, let's run the compiler. So, sorry, not this one, this one. So here we've got this rotating and then we will give it an opacity of 0 batch. When I make a basket of 0, I will also be able to fit on the screen so it will not be hidden from the user. And when he clicks on the screen, it can take him to either page. So to do that, we will add visibility to head and so it will be hidden from this cream. It exists, but it will be getting, so here, hidden, hidden in this to be 0. Okay, That's really good. I mean, I just don't think we need to add anything right here. Right now. Let's first check. Do we have here? Good. So now I can, I not click on it. Okay, and that's very good. In the next video, we will add the animation for the navbar. So good luck and have fun. 15. Let's make the Navbar work with the checkbox hack and make it responsive: Now let's do it for the nafta car. The thing that we wanna do here is when I click on the chat posts, I want this to be having with the ability to visible and also the opacity of one. And also I forgot about it, that transform rotate to be 0. Go to the occluding day, this one. Let's first start with deflects. What we're gonna do for the flakes right here. We have to do this flex Etruria. Let's make it here. And input. When the input is checked, I want something to happen. Oh, this is not inside the flex input. When the input is checked. I want something to happen to the flex. So let's make it here. Okay, and then do the flex. Selects two and i1 here, visibility to be visible. Okay, I always prefer to make this at the end of acute. So let's got to discipline and make it right here. Okay, here. So this is for the Flex 2 and then we can make for the input checked in for the columns. So here we have the column flex two colon. So let's do that. Here. What we're gonna do, we're going to go to the SAS. Where is the first one at here? Yes. So for this one right here, we want input. Let's delete some place input when the input is checked. And then I want something to happen to the Flex 2. And inside that, they flex golden, which is this one right here. Let's just copy it from here. Okay. Taste a class here, okay, and then we get up into practice. And what we will do right here, I want the Z index to p 928 and transform rotate pi 0 degrees opacity to P1. And also visibility off. Visit the fold. Let's add some transition. All one seconds. Let's took out that we have inside our page when we run the compiler. Okay, reload when we click here. So I think just we've got a problem with the content right here. So that's super opsin. So let's take it out. Okay. So F is one right here. I think that probably might be well, yeah, yeah. Yeah. Visibility of visible. Okay. What's the problem here? Where is the pole limbs? Okay. I think that, I mean, let's die. Okay? So let's take it out again. I, I hope this will solve the problem. Now. What's the problem with that? Yup. Oh, this because of the I, the I wills to prop him. And now this is working perfect, right? Okay, now we are done from the nav bar, and this is rarely, rarely, rarely work in perfect, man would just need to adjust the responsive design selects, make the screen smaller here, where we got for the nav bar. Let me up in the source code here, make this querying is smaller. Okay? This is good like that. Okay, For the colon right here, when we can open the media, media, let's set the maximum width, width to P4, 7.9867 cells. And then we came up into practice right here. Here, let's make the height to be the same as this width right here. Or it doesn't it's copy. This one. Yeah, yeah, I am right. Okay. Yeast. And for the width for the width right here, it will be for the 50 percent. Settle for that, I must be having two columns in each row where the height of this height. Let's run the compiler. Okay. Work in, not yet. Working good. Spring reloaded when Eclipse here. So here we've got this responsive and rarely work in perfect and we've got no problem with that. And when we make this clean, larger than 7.968 age, you can the zest for three columns as you can see from here, and transition off one. So this is the early work in perfect. And we got no problem with that. The nav bar is a really work and then management. Okay? And now we're done from this part. And the next video, we will add a pretty low altar do the website. So let's give an introduction to the freeloader right here. What we want to do for the freeloader, living down to the demo version reload. So here we have the main content. Let me reload again. We have the main content is charging, and then we have the element which we can't set to before or after any way. Let's say it's after right now. If it's after, I want to after us fairest to be having the width of 100% of the same color as the background color. I just have a problem with a laptop. The same as the background color of this. And I want the width of it to be 100%. But when I reload the page, one I wanted to do to decrease the width from the left side until it go to the right side and it will be 0. And this will be done with the keyframes. And then we can set the, let's say this one is before the B4 element. The B4 element, the same concept as we did for the card back ground. About the difference here is that I want the width to start with 0. I have a left aside and end with 100% at the right side. I hope this is clear to you. This isn't wildly well do in the next video, good luck and have fun. 16. Preloader part 1: Now to build the pre loader. So the first thing that we will do here is to add the HTML for this preload. Or we can go at the top here, at before the nav bar and ID of pre loader. And then inside here, we're going to give it a class of text. And then inside that taxed, we will add one class of display for this play for. And also we can give it checks to White found of molecule spice. And then we can go inside here, create a new span and front this pen. We can give it a class of time, J, S. And here we can just type charge and 123. Okay, and now we can go to the SAS. Let's start here. Okay, that is really working to get in here, we can make for the child JS. So let's first do what we have inside our page. That spot. So here we've got the charging. Okay, so let's keep going. The first thing we're gonna do here is to give it a position to further. So we can edit for that before and the after. We can go back here. For a position of relative padding of 10 pixels, 13 pixels. Let's just make this one 2015. Okay? And now we can give it back ground color RDP 252531. And then we can make for the pre loader right here. Free loader, height 100 vh, width off 100%. And with the pink brown color, we're just going to take this one here and made this one right here. So let's check out what we have here. We didn't run the compiler. Again. So here we've got this here, we just need to edit the Z index. So here we didn't give a Z index of 100, so it will be covering everything inside. And then it has to be a Spartan. We can just make for the text. For the text. I won't position of absolute left 50, 50% percent. Transformer. Translate, negative 50 percent and negative effect for sex. Okay, let's run the compiler and see what we have now. Reload. Okay, this is working very good. We just need to set here the Z index to this number. For an example. I think we've got a problem with this one. So what's the problem here? Okay, We can check it out later. Let's just make the animation work and then see what's gone on here. Okay? So after this part, we can is also here and here. And then we can check it out. Okay? So after this one right here, we'd get ad for the, after. The after will be for the background image or PEG brown color that will come from the 0% to a 100 percent. And also we have an emission that changes its background color. So here we can make for the after. And then we can make content nun named Ben, position of absolute jump, negative 0.75%, the same as the left, negative 0.75%. And then we can make for height 0, 1, 0, 1, 0.5% with 1, 0, 5, 1, 0, 1, 0.5%. And then we can make for the peg round image, for the background image to avoid wasting time, we can just copy paste from here. Copy and paste. Okay, this is good. And then peg round sizes. If we 100 percent, and then we can just make for the books the shadow 0, 2 REM phi, phi m For look bluer our GPA to 55 to 55 to 55. And let's make that agree to all points a week. Okay, and now we can give it an animation name to pack. And then animation duration to 2.5 seconds, and then the animation count to be just one. Okay? Now within rehab this good, but we just need to fix for the Z index, but it's okay right now. Okay. So after this part, what we're going to do, we're going to ask for the animation. We can add here keyframes and let's first do we have inside the page when we're on the compiler? Okay, this is good. We just need to give it to Z, index negative one. I think this will be good. Within the run the compiler. Yes and good. And, so I think we just, we got a problem with the height. Let's make it too like that. Let's run it again. I think this is good right now. The final one, let's make it take a week. Okay, now we can add for the keyframes, che, frames and for the identifier if both the pack at 0%, I want the width to be for the 0 and peg brown position to be 00. And then for the 25 percent, I won't peg round position to be 75 and 75. And then we can make for the 50 percent, the peg round position, one hundred and fifty and one hundred and fifty. And then for the 75 percent Dyke brown position, 25 percent to 25 percent, 100%, the width will be 100%. And that bag bomb position to be for 300 percent and 3%. I just want to change something here, 1.501. Okay, let's run the compiler. So there isn't working good here. And now let's make for the B4 element. Here we have for the after, Let's make for the P4 before. And then we can open the bracket right here. I want this one to be having content of none. And then position, position of absolute. When we were as time, I wanted to be having width of a V rho and activate gaining enthalpy at the wipe. And then it will stretch to be 100%. I want the width. And then when you go pack that when it shrinks, it will be 0 at the right. So here we can give it or write 0 and also chop of 0. And then let's give it the z-index off one because it would be over the text height of 100% with Johnny to make it to 10, 5, or something like that, width of 0. And then we can give it peg brown color off RDP, this one right here. And then animation name for before. And then an animation in duration 2.5, and then animation count to one. And then we can do for the keyframes, keyframes item to fire for the identifier, it will be before. And then inside here, it's very easy what we will do, we can set a 0%. I want the width to be 100% and adds 100%. I want the width to be 0. And last one, the compiler and see what we haven't. Ma'am, I hope this is clear to you. Okay. We just got a problem with it. So what's the problem here? This is not to work and so good. Okay, Okay, let's make this one to be 99. And the height likes me equate the same height, or this is good. Okay, So what's the problem here? Let's delete the width and emission Napier for a. Let's make the same here or before. Yeah, like that. And then again, this is for the child gs. Let's run the compiler again. I believe we have a problem here, so what's the problem with it? Ok, OK, OK, OK. When we check this problem out, animation name. So what's the problem here? 0 per cent. Let's run the compiler again. So do we have here same problem? No. So we get a problem here. I don't know why this is happening. Let's set the width here to 0 with 0%. Let's look for the problem. And if it's not there, we can see it in the next video. Okay? So here we have the C index, we have everything working fine. Let's make this one to be 100 or just 999. And now we can make for this keyframes. Let's run the compiler again and see what we have inside our painting. We have a problem with this part. Okay, I will check it out and get back to you in the next video. The same adds a z-index off the icon and the putin. So good luck and have fun. 17. Preloader part 2: Okay guys, now we get the prompts him for the first bond. The problem here as the position I want this position of fixed set because we do not cover the plugin, which is having the higher z-index saying that position affects it. And then the height, let's set it to 100%. And then we can make the chop 0 and also the left 500. And then we can just go there down, down. I got the problem with the cells. So yes here, 2.5 seconds, we didn't stop that time. Now we can run the compiler. Go back here. So this is working good. What we just need to add here is the jQuery for this spot that will make this fade out with time. We can go to this credit to get the jQuery from here. This script is for the jQuery k, So we can just copy it. Choppy. Let's paste it inside the package, yes. Right here. And then we can go to the script. Okay, after this one, what we will do for this crypt right here. The first thing that table edge here is a function of window. So I want something here to appear when the screen is loading, but for the rest, I want it to fade out. So here we want to make for the window, the window on, on what I just bombed on load. So when I reload the page, I hope this is clear to you. And here I want the function to be inhabited. Lives give it the empty parameters. We don't need something inside it. And then we can make the predicate here, V0, the class over the freeloader. Pre. V is sorry, for a loader. For delay. I want d ln asked to read completes three 500 milliseconds. I'll fade out. So now we can run the compiler. Okay? Now this is fading out when the 5, 0, 0 milliseconds come. Okay, This is really good. I'm going to deletions on what you have achieved and I hope to see you in other classes and good luck.