10 (Amazing) CSS3 UI Design Projects- Part 2 | Rahul Giri | Skillshare

10 (Amazing) CSS3 UI Design Projects- Part 2

Rahul Giri, Web Developer

10 (Amazing) CSS3 UI Design Projects- Part 2

Rahul Giri, Web Developer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
16 Lessons (4h 50m)
    • 1. Course Trailer

      7:10
    • 2. CSSTricks Like Card Carousel Design (Mind Blowing Project) Part 1

      19:10
    • 3. CSSTricks Like Card Carousel Design (Mind Blowing Project) Part 2

      17:37
    • 4. Premium Accordion in Pure CSS

      23:15
    • 5. Sexiest Blog Card (And Layout) Design

      16:16
    • 6. Dead Sexy Material Design Login Form

      21:38
    • 7. Responsive Modal And FullScreen Overlay in Pure CSS

      27:48
    • 8. Luxurious Navbar with Topbar Designing For Large Devices Part 1

      25:13
    • 9. Luxurious Navbar with Topbar Designing For Small Devices Part 2

      18:20
    • 10. Halloween Navbar Sidebar And Bottombar

      22:26
    • 11. Beautiful Tabs in Pure CSS

      21:25
    • 12. Styling Links Of Your Websites With CSS

      19:50
    • 13. BONUS 1 CSS Trick Like Comment Section Avatar (with SVG Half Circle)

      19:25
    • 14. BONUS 2 Amazing Shine Effect For Your Profile Picture

      12:45
    • 15. EXTRA BONUS- Stunning Animated Gradient and Image Text

      15:44
    • 16. Next Step

      1:30
  • --
  • 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.

116

Students

--

Projects

About This Class

This is the unique class where you’re going to learn “how to build real-world” UI design projects in pure CSS and almost little (or no) Javascript.

In this class, we are gonna build 10 (Amazing) CSS3 UI Design projects you can use instantly on your website and also going to deepen your css3 knowledge.

Here are the 10 projects you're gonna build.

  1. CSSTricks Like Card Carousel Design (Mind Blowing Project)
  2. Premium Accordion in Pure CSS
  3. Sexiest Blog Card (And Layout) Design
  4. Dead Sexy Material Design Login Form
  5. Responsive Modal And Full Screen Overlay in Pure CSS
  6. Luxurious Navbar with Top Bar
  7. Halloween Navbar- Sidebar And Bottom Bar
  8. Beautiful Tabs in Pure CSS
  9. Styling Links With CSS
  10. Image Slider in Pure CSS.

+2 Bonus Project

  1. BONUS 1- CSS Trick Like Comment Section Avatar (with SVG Half Circle)
  2. BONUS 2- Amazing Shine Effect For Your Profile Picture

Downloadable Materials

All the exercise files and downloadable material included.

To see the quick preview of the projects, please watch the class trailer.

So if you’re ready to build these 10 amazing UI Design projects then join me in this class and let’s get started with our first project.

Meet Your Teacher

Teacher Profile Image

Rahul Giri

Web Developer

Teacher

After graduating and holding a degree in "information technology," my professional career began, starting web development and graphics design career in 2013, I never stopped learning new programming skills and graphics designing.

I did not learn web development and graphic design skills in college. It's self-taught skills. As a self-taught developer and graphics designer, I had the chance to work with hundreds of online businesses to build their websites and train their employee on front end programming.

And that's where it ticked me to broaden my horizon and record these most up to date training train you with cutting-edge front end programming skills that will put your career on fire.

I can't wait to see you inside my life-changing classes.

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.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

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.

phone

Transcripts

1. Course Trailer: Welcome to ten Amazing CSS3. You are design projects b2. So as you might have already guessed by its name, that this is the second part of a series name ten Amazing CSS3 UI design project. And this is the first part. So without any further ado, let me quickly show you what you're going to build in this second part of ten Amazing CSS3 UI design projects. So this is going to be your first project, RED, you're going to learn that how to build this amazing, fascinating CSS treat like a car carousel. And you can see this UI in action on CSS TREC website. You see this assisted website and here we go. This is the card. I'm going to show you how to build in pure CSS. So here you see that we have this smooth stacked card animation and also this is completely responsive. So if I go to smaller devices, this is how it's gonna look in small devices, you see even this content creation genes. But the best part is that it totally terrible if you want to change the color and the theme of this car, well, you can easily do so. Lets say, I want to use this gradient color here. You see that now theme is completely change and now see you totally have a different gradient color. So in the second project, you're going to learn how to build is a fascinating accordion in pure CSS. Yes, in pure CSS. And also it's fully responsive to. So if I go in I, for next simulation, how it's going to look any smaller devices you see, but let me show you the best part of this accordion. Well, this is highly accessible, means you can use your keyboard to navigate to the stamps. And also you can see that once I opened, went up, the rest of the tabs automatically close. But if you want to open all the tabs at the same time behind this and I made some changes. So all the tabs you can open at the same time or closing event. This is completely terrible. So if you were to change the theme of it, just one click away, just change it and click here. And let's say you want blue. There we go. Now we have this blue according. So in this third project, you're going to learn that how to build a smoother transitioning Brock card in pure CSS. And yes, they're completely respond to you. So if I go into nano devices, you see that ambiguous. Does it look like a three-column layout? But in iPad or medium devices, it will be a two column layout. And small devices it will be a one column layout. And if I go inspect element here, this is how it's gonna look in iPhone acts. And also these last three block are, are terrible. So for example, if you want to change the background color of this tab contains, well, you can do so right here, for example. You can just change it anyone and I can make it right here. And this is how you want to look at, right? And the full project, you're going to learn that how to create this material login font in pure CSS, little bit JavaScript help, and also these have default validity. For example, if I add this invalid email address, it will turn into red. But if I add the variant one, that's gonna make it green and simple password, if I type less than six character, it will be red, but it's going to be green and valence. And also you can just hover over on this i, it will go to show you the password. And if you live the castle, it will again hide the password. And this is also totally responsive. So forget it. Smart devices, this is how it is going to leak in iPhone acts. And again, you can just clarify it. So for example, I want to change it to like let's make it blue, pink, red. It's totally changing. And in the script project, you're going to learn how to build models and screen globally in pure CSS. So here's a model. If I click here and you say this is the model. And you can see this input and submit button in one row. But if I go in smaller devices, you see that they are in now in column or in separate row, and this is your skin Overlay. Click here and see the skin overlay appears. And again, it's totally responsive. This is how we're going to look at smaller devices, say, and again, it's totally terrible. So again, you can just go ahead and change. It seemed completely, it's gonna walk C. So this next project, you're going to learn how to build amazing high converting nav bar. You said this is husband look in big devices and also this phone number have at this gradient takes effect. And if I go in small devices, it will turn into screen overlay. So I click here, this is how it's going to look in the screen overlay with smooth sliding transition from the bottom. And again, they are completely terrible. So you can use either a gradient color like this, only going to use the solid color like this, blue. You say that this is a complete solid color, and again, you're free to change it in a color. Dervish, for example, it can make it pink, green, and it's totally up to you. So in this step of the project, you're going to learn how to build this nav bar with the sidebar and bottom bar in small devices. So if I just simulate in iPhone X, this is how it is going to look in iPhone X. And this is by the way, the hollowing project. You say it looked really amazing because it's up at the smooth transition effect. Now this eight project, you're going to learn how to build this amazing tabs in pure CSS. Yes, in pure CSS. And it is completely responses figures, more devices. This is how it is going to look. And even if I go in iPhone acceleration, this is how it's going to look in iPhone X. And also just like my other project, this is completely terrible. So I can just change it in one click and you see it's right here. And in the slide project, you're going to learn that how to build this amazing slider in pure CSS? Yes, in pure CSS, this label is indicating that a which tab is active right now. And this is all happening in pure CSS. Again, it's totally respond to you. So I can go right here. And 618 high acts. And now in our tenth and last project, you're going to learn how to style the link of your website here to be habitable nine kind of styling. So the first one is underlined links. And here we have total four type of underlying link styling. So cities affiliate underlying as it the failure underlying. Then we have this underlined from rep. And line from right and underlined from center. And then we have another one which is the background link styling. And here we have total five kind of styling. So fading background, slide from website, from light's light from top and slide from bottom. And I can just change it here. So let's say I want this pink, I have this pink Sadia. You say. So, yeah, you can use the style sheet from this project in your website directly. And apart from those ten amazing Eurozone projects, I have a two special bonus projects for you. So in our first ones, you're going to learn that how to create the CSS treat like a comment section. So here you see that I have this avatar and here we have this half gradient circle, and this is basically SVG. I'll show you how to create these SVG in AI. And I'm also making use of CSS image filter to make these images appear in gray on the fly. And also when I designed this cool right section of the coming. And in our second and last bonus, you're going to learn that how to create this awesome, shiny effect on your profile image. You see this is the shine effect. And again, you can change its color as your wish. For example, if I want to use the same background gradient color as a shiny effect, I can just interchange. You see that now it has synced automatically. And inside this class, you can also request a specific URI Jan projects you want to learn or build for your next website and the most requested you urgent project, We get added into the next part of my this series. So Hi there, my name is rapidly and I have a hard good experience in CSS for more than eight years. And I have also recorded more than 60 hours of video only on CSS. So if I did need to build that ten Amazing CSS3, you are design project for your next website. Then obviously firefighter. Let's get started with ten Amazing CSS3. You original project B2. 2. CSSTricks Like Card Carousel Design (Mind Blowing Project) Part 1: Welcome to this movie where you're going to learn how to create this fascinating sss straight like a card carousel. And you say that this card is tacked together. And when I hope on this one, we have this smooth transition effect, which is looks really nice. See you in a Howard is a cardiac AC. This card is going up while the same time the siblings a moving to the right, you see on How about this title had this gradient text, even we have this half circle at the bottom of Avatar and on how this text is also changing its color to adopt this gradient text here, which is very powerful. We also have this custom scrollbar. And again, this is totally respond to you. So if I inspect element here, you see that now in small devices, this is how it's going to look. So it's very responsive. And you can also notice that in smart devices, that text of this card is now placing themselves vertically. Now in his big devices, it's a normal car, but in small devices, this actually turn into this vertical. Really perfect. And even see this UI design project in action on CSS TREC website, you say it's right here. Yep. This is what exactly we have designed right here. Now let me just tell you that this is even a more powerful let me show you I can easily change its theme color. Yep, let me just go to the extra cellular and say that I can easily change its color. For example, I can just apply this greedy up. And I can apply this one, right? This color here enough to change the color of the circle. So save it. And then we have this color right here, rabbit. And I'm just gonna paste it right here. There we go. So now in just one go, we have changed the field of this entire project. It's incredibly powerful and incredibly customizable. You can supply anything wish. So let me just do one more thing. I'm going to use this guy over here and this guy over here. And then I can just simply grab it from there. And again, we can change its color, its a hop circled right here, different column for example. And as examined, this surprise to cheer. And then, um, I grab this guy over here and I paste it. Now we have again switch. It's a thin color completely within a few seconds and say, yeah, this is what exactly you are going to learn how to build in this project. I excited, I bet you do. So let me just go to my goiter and let me show you how to build this amazing project. So here we go. I'm on my VS Code Editor and we have the simple STL file to walk with. Well, there's another file in app.js is where you're going to write our main CSS code. And finally, we have this default OCS is where are we going to write some default code for our project? And as of right now, we only have the single line of code, which is basically, I'm importing these Laura font from Google font website. So let me quickly explain you the HTML structure of this project. So here you see that I have this section which have a class of popular, which is basically saying that popular articles for this month, and I took it from, this is a slick website. You see right here. This is actually we are creating, so that's why I just name it popular section. And into this progress section, we have to separate section. So this is the first section which is popular card, which is basically I took it from here. So I am talking about this card right here. So this cut is going to have its own section. And then finally, we have the second section which have a class of cards, which is basically our cart list. I'm talking about this section here. So this is the current list we are talking about. An inside these card list, we have protons pen costs. So you see this, the card one cartoon R3. And you see finally we have this cartoon. We totally have ten caught anonymous go head and explain the extreme structure of a first card because every other card is going to have the same structure. So I see that I wrap this card into this article tag because technically every single card is representing an article. So Article Tag is totally semantic. It's, I've a class of Car. And inside discount, we have two section, the header part and this card body part. Let me show you. So if I go here, you see that now inside this card, we have this header part and then we have this God body. So this was exactly I'm referring here and I see that in header part, we have this date published and car title, which you see right here. So this is a database and then we have this car title. Then next in COD body, we have this guard author. You see, this is the car auto and discard author. We have God on our radar author name. And this is the half circle which you see, this is the obstacle I'm talking about. And next we have this car tax, which you see right here. God acts inside. We have this anchor link, so you can just click on there and you can just find all the articles related to that particular tag. And that's it. This is our simple Codd structure. Now let's go ahead and start styling our project. Let me just go right here and let me show you the project preview. And you see it's a very simply say, we have this unstyled project which look really ugly, but we're going to study it soon. This is the hop circle. Well, because this is the SVG, that's why it's taking its full place. But already we're going to style it soon. So let me just go right here. And first of all, I just want to target my body and I want to apply some default setting. For example, I want to say here margin to be 0 and padding is also going to be 0 next time. And I said this background to be discoloured right here. Then I want to give it a color of complete, right? And finally, I just want to give into font-family off ADH, which is a sans serif font. Let me just what ikea and you see that now we have it. So this is it for our body. Let's go to app.js and let's start styling our popular section. So let me just grab this section here. And here. What I will do, he's C that I want this first section and the second section in one horizontal row. For that, I can make use of flexbox because by default is going to put in one single line. You see that this is the populists month. And then we have discard the section which is in one rule. Now let me add some margin and padding. So unless again, margin top, Let's sit here 5-gram. And also say a margin left, which is going to be five m. So you say, now, this is how it's looking. So this is perfect for now. Let me just go right here. And now let's go ahead and style our this popular Card section. And here let's start with its width. I'm going to set it to 400 pixel. And then I'm going to set its height to be, let's say 380 pixel. I'm going to just give it a padding of 1.5 m, And let's get a border-radius of 600 pixels. And finally, let's give it a background of this linear gradient right here. If I go here, you see this is how it's looking and it is good for now. Now, I want to put this text at the bottom left. Well, for that, I can make use of flexbox. Yep. I can see your despair flux. And if I go here, you see that now there in one row. So obviously we don't want it. So I need to set this flex direction to be in column. So let's say a column. And then we can say had justify contains, and let's make it on flex end. And now it's going to put it bottom-left. It, it's right here. Now let's go ahead and work on this, a Heading one and it's paragraph. So let me go here. You see I'm talking about is heading one and then we have this bag enough. So let's go right here and let's dilate song either scrap this one. And here he's gonna popular. Let's talk with H1 here. Now at one, I want to say this font size to be 1.8 RAM and answer can margin-bottom to be 0. Let me just write here as this is house looked like. And for the subparagraph which is sponsored by let me just go right here. And I'm going to grab it wasted. And then it's going to be paragraph. Now, let me just go right here. You see, that is peg it up. Have a different font. Well, you know that we have importantly Laura font, so we can make use of it. Let me go right here. And here's gonna be font-family. And let's say here, lot of now I just want to decrease this capacity to be 0.4 here. Save it. Let me just go right here. And they say, this is house looking very good and I decrease its opacity. The reason is because doesn't matter which background we're going to use, it is automatically going to adopt that background and look nice. So that's why as a CRC and they'll go, This is our popular, this non-car. Obviously start looking that would yet, but it will look good later. But for now if you want, you can just go right here and it can decrease its width to be thin and Nixon, and now say, look like this. So let's keep it, this one for now. Let's go ahead and style our gods for that. And we just go right here. And let me just grab our Garcia, entire section coherent and pasting. Now we want all these card in one row. So for that, we're gonna make use of the split next. And I'll see that every single card in now in one row, which is perfect. So let me just go ahead and here I'm add some padding. Let's make a trainer. Goya. And now we have some padding. Well, this is it for our cards section. We obviously need one motive property there, but we'll get back to it later. Once we needed. First, let's go ahead and start styling our individual. So I'm going to sit here width, and let's make it 400 pixel. And then I just must say minimum height. Let's make it 350 pixels. And this is how it currently look like, perfect for now. But lemme just do one more thing, that disability for the pixel. But let's sit here also minimum weight. So it's a minimum is going to be 250 pixel. So I'm gonna just grab exactly the bygone I just used here. And then let me just go ahead and give it a border radius of 16 pixel, which is you see right here. Seven kilometers go right here. And he said, This is how it look like. Let me just go right here and here I have this box shadow coplanar clipboard I pasted. You see that on box shadow, that on x-axis, I just set it to minus one ramp, which is basically going to push it to the left. And on y-axis, I haven't placed anything, it's 0. And then on blurred eye CD3 them and this is going to be complete black. Save it. If I go here you see, now this is how this box should look like. Obviously it's not looking good, but we'll get back to later. Now let me go ahead and add some padding. Padding is going to be 1.5 m. If I go here to see that now, this is how it's looking, let's start styling our discarded contained. So let's start from the top. Let's work with this date published for that. Let me just scroll right here. So you see that here we have the state published. Grab it. I'm going to go right here and paste it. So for that purpose, I want this color to be this one. And then I want this a lot of font. So let me just go right here. Craftsman, I'm going, I guess paste it right here. And then I want this font size to 14 pixels, seven go here. And you see that now we have this a lot of font. And obviously you can see right here it's a lot of fun to write and as it, this article prefix is complete, Right? So for that, we can just go right here. Let me just grab this database prefix. Prefix. Lets make it color to be complete white. That's it. Save it. Go ahead and say that now we have perfect. Let's go ahead and work on this heading two for that guy. And you see this is the Heading two. So I can just grab it. And because we only have this one heading two, It's fine. I can just do the style on animate. So I want this font-size to be 20 pixel, and I won't this line height to be 1.5 m. Save it, go way up and say, this is how our cut at a look likes. It's pretty awesome. Now, let's go ahead and start working on this avatar for that. Let me just go down. Go here. And there we go. It's God body. There's a god author. And then we had this author, our tab. So let's go ahead and start with this card, author festival. So we want it. Let me just paste it right here. And here you see that in car author, you see we have these two columns. The first column have this author Avatar, and the second column have the author information. So we need to column hale. Well, for that, we can make use of, great, just because in green we're controlling, right? So can see a display. Let's make it read here. And then I went here, two columns is going to be GTC grid template columns. And here the first column, I want to be 75. And the second column is going to be one fraction. So it's going to be, the remaining space is not taking it right. So let me just go right here and now we'll get back to it in a bit. But first let's go ahead and style our guard author, our image. So C author your order. And then we're gonna style this image, so does climate image. And here I want this image to wait to be 40 pixel and same height is going to be 40 pixel. Next, I want this border radius to be a 100%. Now let me just add some margin. So here it's going to be margin. And I want a smart thing to be 16 pixel, top and bottom and tape Excel left-hand line and make our author our target to be Greece, Qi Zai. You see that now we have it and our outer is now have this grayscale. See. Now you see this author outer and author name is not appearing in the middle. So we need to just do something here. So for that, I can go right here. I can say have a line items and let's make it the incentives go right here, and there you go. Now our author avatar, and this author name is alanine compete center, exactly what we're looking for. But you see that this author router is sticking to this a header part. Yep. So we need to separate the sacar body and card header. Let me show you, say there's a big gap between the body and card header. How will do that? Super-easy. Let me just go right here. And for that, we need to go to our on single card. So I'm I say a discipline flux. And then I can see a flex direction column because I want everything in column. Well, if I don't save it, you see that house looking, we don't want to just put it in column. There we go. Now they're in column. And what we can do here, we can use these justify contained, you see, just to pick a date and let's make it yet space. Between savings. And you see that now we're going to have that big space between all discard. Now let us go ahead and add some margin, bottom and top. So what I can do here, I can see him margin and let's make it three them top and bottom and 0, I'm left and right. That's it. Now we have some margin between these tax and this one. Perfect. Now let's go ahead and work on this hop circle. For that, let me just go right here. Grab this half circle, go here and here. And here. Let's start starting. So first, I want this portion to be absolute because we're using absolute, we need to go to our god author and interstate is portion to be related to u because you see that here we have the Scott author and I wanted this half circle inside discard author. There we go. So we done it. Let me just go ahead and just sit here bottom to be, let's see here two pixel and this left to be 0. So we go here and I see that now we have it. But again, this is quite big. So let's set width and height. And the width is going to be, let say 60 pixel. And the height is going to be 48, mixer, seven, go way up and say, this is how it's looking. Perfect, but we don't want that fill. So we can just go right here. Just sit here, fill to be none. So see, now file's gone. So we need to give it a stroke here. And then I can give inequality waste, for example, like Just give it here blue. And if I go here to see that now it is in blue, but again, we want more stroke, we tip. So let's say a stroke width and let's make it eight mixing, save it. And then we go, this is how it's looking. But again, we want the stroke width to be round cap. So I can just say him stroke. And let's use your line cap, which is basically going to make it round, save it. You see that now we have this around half cycle in the bottom of our Avatar. Let me just actually put it here. Read seven. Go tearing up. This sounds okay. And let me tell you that I have grabbed this a half a circle. Svg are from internet, so we just need to know, just copy and paste it. And if you want to know more about how to create this offset with SVG, then I have entire project on how to create a siesta strict like a comments section in this class. So go ahead and take a look of that bonus project in this class where I'll go in depth on how to create these using Adobe Illustrator. Notice go right here, and now let's go ahead and start working on this author name for that, just go right here. And here is going to be dot author name. And you see that I'm talking about this guy over here, autonomy, right, right here. And here is going to be font-family of Laura again. So let me just grab this guy over here, paste it right here. And I want this font size to 14 pixels. And here I want this line height to be 1.5 mm seven glare. And you say, this is how it's looking. But again, this author prefix is going to have different styling. So for that, I'm just going to grab this right here. And I'm going to alternate the prefix. And here I'm going to give this color right here. And then it's going to be font family. And this is going to be area. Now, here isn't a font weight. Let's make it bold. Say go here. And I say this is house looking. So there we go. Now let's go ahead and start styling our tax. Well, it's going to be super easy. And for that, let me just go right here and grab this tax. And I go right here and paste it to x. And then I can say here display to be flex because I want every single tag in one row. You see now they are in one row. Then I want this flex rep to be rapidly so it can easily wrap. Now let's go ahead and start styling our individual links for tax. So here on top of the stack. And then here is going to be color. I'm gonna give you this color here. You see right here is going to receive that color. Here is gonna be takes transform because I want to make it uppercase. So it's going to be uppercase. Next, we need this font size and I want to make it 0.6 m. I do not want any underlying on our text is gonna be text decoration. Let's make it none. And you see, it's looking great. But I want some margin right here that you eat. X is going to be MR. And let's make it 0.3. them. Now, I want that bordered. Let's make it three pixels solid. And I'm gonna get into this column right here. And then I want to give it a border radius of three. Then if I go here you see this is how it's looking. But we need some padding. And so for the padding, let's sit here 0.1 RAM from top and bottom and 0.5. ramp from left and right. Say, yep, not looking good. Now let me just also say tear margin, bottom right here, so we can have some space between two lines. So I'm going to imagine bottom, that's maybe 0.3. them. Save it. Go ahead and see, now we have our style tags, which is looking really nice. And now this is it for this movie. Let's go to the next movie v. It will start working on this transition, this gradient text effect, this gradient half cycle, also on this gradient texts, on these attacks and the scroll and so on. So let's go to the next movie via will take deep into the main styling for a project. 3. CSSTricks Like Card Carousel Design (Mind Blowing Project) Part 2: So let's pick up where we left in the last movie. So the very fast you see that this card, and this card is not completely Center. You see that they're sticking at the bottom but not at the top. So let's put them in complete centered horizontally. Well for that, I can just go to this popular here and I can see a line items. And let's make it here center. If I go here to see that now they're incomplete, horizontally centered. Now the next thing, we just go ahead and let's make this gradient texts effect. Well for that, let me just go right here. And here, it's going to be on haha. So let me just go to heading two here. So say this is right here. I'm gonna just grab this heading to another space shit right here. And this is going to be on how so on hover. Now in order to make that gradient takes effect, we need to do something special. Let me just go right here and let me just grab this linear gradient or let me just do one thing. Let me just go up at the very top. And let's create a root variable so we can easily access our stuff from there. And here I'm going to just give this a name to our variable which is gradient. And let's say have top to bottom. So TI, DSP. And I'm just going to this right here and see its going to bottom. So as I said, your top to bottom, not we need another one here. And this is going to be from left to right. And you say, I can just say here too, right? So let me just go grab this variable. And I'm going to go right here. Let me just get rid of it. And I can use this value here. And then I can just yet, and this will be top to bottom. So let's set db. Let go here, see that not still working. Now let me just write here. And now I can use this variable right here. So we are basically teaming it. So here I can say this background and this time I want to just make it from left to right. And now you see that or how it is when you see that now we have that background going from left, right? But again, we want this background as a text color. Well, for that, we're gonna make use of this webkit properties is going to be that good background clip and we just want to keep it to a text. If I go here to see that now, when our this one you see, you can't see because now that background is clipped to behind this text. And in order to see that background, we need to make this text color to be transparent. Yep. So what we can do here, we can again just go right here. I can say a text field color. And this is going to be transparent. Seven, go ahead. And now it's even had this fantasy that now we got that gradient text here. And I'm going to tell you that this is not going to walk on every project. This is only going to work on a webkit browsers, for example, Chrome, NO para, and maybe in Safari, but not in Firefox. This is a streak is also have the same problem. It's gonna only gonna walk on mapping process. There you go. So this is a very simple, let me just go ahead and say this comes out to be 0. So we got this gradient x for our heading too. But we also want on a half circle and this text. So we'll come to this hop circle shortly. But first, let's go ahead and work on this tag here, which is very simple. I can just go right here and here. I know this, this is actually half a glass and I guess a day on hover. And that's a simple Yep, How does want to say that? Now, we got this grading text. I want this first tag of every car is going to receive these gradient texts by default. Well, it's super simple. I can again, just to go right here and I can use this text here. And then I can say either foster child Yep. I can just say this one here. And now, the very first NCA child is going to receive these texts by default. You see that now we have it. The Silicon, really nice to me. But now the question is that how we can apply this gradient to this half circle? Well, this is a little bit tricky, but let me just go here and let me tell you that is a no way right now to style this half circle stroke as a premium. So I cannot apply this gradient color to this stroke here. Say I can't do it. Let me show you if I see her variable gradient and let say let right? You say it's not going to work because the stroke property doesn't take any gradient value. Well, there's a one-way can just go right here and we need to just work inside here. So I don't know, paste this code here, you see it's actually a depth score, which is a linear gradient, is linear gradient which have an ID gradient. So what do you do? I can simply just grab this one id. I can just go here. I can say you are, They'll, and here because this is going to be our ID and I use this hash shine and I'm just gonna paste it right here. And if I go here to see that now it's going to save it, but D doesn't. That's because if you haven't saved it, let me save it. And there we go. Now, it's the city. That's perfect. Because let me just tell you that if you want to change this gradient color, that you just need to do it right here. So see, this is the first column and this is the second color. For example, I can say here this school to be red and this going to be blue. Save it, go here and say that now we have this red and blue C. So now we need to change the color from here. It's very important, so we have done it. And now you see that it is working. Now I want to tell you that you don't have to apply these adapts to every single SVG. For example, I applied to the first one, but not in the second one is a, I haven't applied here, but still see that green color everywhere because you need to just apply this in one single place, which is right here. And then if we are using this gradient right here, so now it's going to apply on every 2.5th class. That's very powerful. So there we go. This is how we get this gradient in this half circle. Let's go ahead and walk on that scroll back because right, noisy. If I scroll, entire document is cooling, we don't want it. We only want to scroll discard section for that. Let me just go right here. And you see this carnage section. It is right here on cots. So what I can do, I can just go to these cards right here. And I'm going to add here when property name Overflow X, and let's make it scroll. Save it, go ahead and see that now our card, a scroll wheel on this x axis, CC. And now we need to style this scroll bar because you see it's looking really at Lazy. It's ugly. So we need to fix it, right for that, let me just go right here and let me just go down. So obviously we're going to tie this gossip, right? Because we want to style the scrollbar inside the scars. So metal scrap this concept. And here I'm gonna make use of this webkit scrollbar. And what I can do here is that I can see distribute to be, let's say ten pixels in height to be ten pixels. That's it. Go ahead and there you go. You can't deceit properly because right now we need to set its background. So let me just grab this guy over here. And I said here, this is going to be track. And I'm gonna give it a background off this right here. Teller decks semicolon is going on here and see that now we have this track is c. And again, because I'm controlling this week to week right here. So if I say here, let's say 50 pixel, you go here and see that now we have this quite big. We didn't want it right, so we just get rid of it. So let's go ahead and walk on our pump, which is the let me show you. Let me just say here. So it's gonna have this background and then I'm gonna give it a border radius of let say, ten pixels. So we go here and there we go. Now, it's actually if I scroll here, you see this right here. You say it's working. But let me just go right here and let me add here a box shadow I already have in my keyboard. And this is basically instead bach shadow. I just copied it from success rate. And there we go. If I save it, you see that now we have this amazing Tom skull. And let me tell you that even if you want, you can just go right here. And you can just change this background to be something like a variable one so I can see how this is going to be a gradient backgrounds and let's say that gradient, and then let's say left to right, save it, go here and see that now we have this gradient communality, this looking really nice, but again, it's really depend on u. We're going to basically use this guy up here because this is what exactly CSS recuses. You see right here. There we go. So this is our scrollbar. Now let's go ahead and walk on that transition. So for that, let me just go right here. And you see that whenever this card is, see that now this card is moving a little bit up while the costs next to it, which is the siblings, is moving to the right. You see how this one and this siblings is moved to the right and this is moving to top. So now let me go right here and let's do it. So for that, let me just go on card hover. And here we obviously want to style individual card CRM as a stack, a discard on Hubble. Now what I want to do, I want to move it up. So for that, we're gonna because of this transform property. And then I'm going to use this translate function, which is going to be the y-axis. Now we ought to move it up. We need to give it a negative value, for example, and I say it minus1 RAM, which is going to move it up by 16 pixel. Herbalists will see that now it's moving it up. So now this is working. And again, once it is moving it up, then you see here that the other siblings is moving to the right. Well, for that, we need to bring this sibling on the half of the above, right? For that, let me just go right here. And then what I'm gonna do here is that I'm not grab the symptom or the space to write here and here what I want to do is that I will say here, if God is not the first child, and then if card is not the first child, then do something. Well, what I wanna do here is that nothing ML, which is margin a lab. Let's make it 130 pixels. So it's gonna be minus 1 third of pixel, which is going to bring them together to see that now they have gone together. Now for How about this one, I want these other siblings to just move it to the light 130 pixels. You get it right? Well, it's very easy. I can just grab the same thing here, basically to here. And then what I'm gonna do here is that I'm a C right here on hover on any card, I want to target its siblings. That inner target siblings need to use this TDI operator. And then I can see here.com. So basically I'm saying here on guard. Haha, so if somebody has it on the card, go ahead and target is siblings, which is comes after that card and apply the styling. Well, I'm just going to grab this transform property. And now obviously we want it to go right? Mix is going to be on x axis. This is gonna be x, and then you see the mass of one pixel. Let's make it one of which is going to be the positive way. And that's it. So here we are just bringing minus1 30 pixels together. And then here we are pushing away again the same quantity pixel Savi, let me just go right here. And it's even how does one you see that it is pushing it. But again, we don't have that transition effect. So for that, we can just go to our cut and let's add these transition effect is going to be 0.22 and that's it. Go, Yeah, and it's even a How does one see? Wow, now it's super-smart. See the now it's IS working fantasy. So we got this transition. We have our scroll, which is working perfectly fine. Now again, you see the problem is that you see the third card is, Is it the name is quite big. Zeff RAM, which is coming on the top of this fourth, which obviously we don't want. The first card is going to be the bottom card, then the second and this last card is going to be the top of everyone. Well, how can do that? Well, by using jet index. Yep, super-easy. So let me just go right here and here what I'm gonna do, I'm just loving says we're done right on this transition property. And here I'm just going to target every single card and it's gonna be nth-child. And also if it is a first child, go ahead and apply the study. What I want here, what I want to set index to be one, right? And I'm gonna do same thing for others, will limit this. Go grab it from there. Lemon just scoop, paste it right here, right? And I'm gonna paste it ten times. So 234910, because we have ten cards. So do it ten times. And now I can easily depress it, likes it and say, yeah, do, and ten, there you go. So now I've applied behind the scene. So Debbie go anatomies, great hit and see that now they are on the top of LOINC. Now it is working perfectly fine. I say num is go ahead and make this a first section stability with big here. So for that element is go up here. And let's make this 500 pixel. Here we go. Now, there you go. This is looking nice because we have this quite big. So now this is how it's working, is looking really nice. Now let's go ahead and make it response you so on inspect element, if I just go to this mobile devices or let me just go to iPad, I want this to be terminally like this. Say, so, see, this is actually vertical. So I want this condition to be vertical. Not like normally, right? We can just go right here. And let me tell you that the Vienna need their second stuff, which is going to be the alternate. Just go grab it, paste it right here. And this is going to be on small devices. So this is basically going to hide and show these card on relevant devices. So here I just do not want this rake tak, so let me just get rid of it. And then you go, we have this popular cart and let's make it all which is alternative. And there you go, we have another one. So let me just do one thing. Let me just go grab the sky over here and we'll just go right here. And I'm gonna set up light where if I go here, I see that now we have this two car I want to hide discard on big devices and discard in small devices for that, let me just go right here and let me just grab this guy over here, this alternate one because we want to hide it in bigger devices. And let's set your dispute to be this way. Now, if I go here, I see that now that has actually gone perfect. What do we exactly looking for? Knowledge is go down right here, and let's add some media query. So here I'm gonna say here at media. And if you find the max weight, and let's set your 992 pixel, go ahead and apply the styling. So what I want here is that I want to get rid of discard here, right? So let me just go down right here and paste it. And let's see here display to none. And now I want this popular cartoon reappear. So it's going to be a halt. Let's say here displayed to B block. You see if I go here, now this is appearing, but on inspect element, if I go to smaller, you see now this is appearing. And first of all, let's go ahead and get it of this padding from here. So what I know, I can go up here to see this in popular limiting. Describe it. Let me just go down here. Let me just paste it. And if there's a margin left here, but I want to make it one dam, let me get rid of it. We don't want it here. And you have to get rid of it, save it, go here. And I see that have margin, little bit margin, that's perfect. And it's right here. And now what I'll do here is basically, let me just go to this alternative. And here in order to make these look like a vertical, you'll need to set your writing mode. So let's say writing more. And I just want to set it here to be vertical, right to left. So we go here and there we go. Now it is vertically here, see, it's looking good. But again, we want it at the bottom. So let's go ahead and rotate it. So it's very easy they can use this transform property and I want to rotate it 180 degree seven Goya and see that it's rotated. And notice right here, let me actually just give it a width. Let's make it 110 pixels and height is going to be seen. But let me just padding here is going to be two, top and bottom and warn them left to right, save it, cohere as it now is looking good, but I need to get rid of that margin so we can just pull them together. So for that, let me just go ahead and grab this guy over here. Let me just go right here. And then I guess you find H1 in this dagger. And then I want to find this paragraph and let's say this margin seal. So there we go. Now produce CDA now is looking at, again, if you want to make it a little bit bigger, for example, I want to make this to be a little bit bigger than everything wells. I will do that. I can see here font-size to be, let's make it something like a 20 pixel value here. See that now we have this quite big. There we go. So now it's looking good. So if I go in smaller devices are, let's say I have an x. This is how it's gonna look. And if I go to your devices, now this is how it's gonna look. Now let me show you that how easy it is to change its color C. I can just go to this green. I'm gonna grab this guy over here. And let me just grab this linear gradient from their radiant limit, just go up here. And now we can easily change its color. For example, I pasted and I want only this part here, right? And let me get rid of this entire line of code, paste it, or let me just go ahead and make a copy of it. So I'm just copying. And here, let me just paste it. There we go. Now we have another color. Let me just go ahead and paste it right here. And it's, it is going to to bottom. So let's make it here to bottom. Save it. Go ahead. And now you see that now we have changed this entire thing completely. Again in order to change this guy over here, this half cycle, it's super-easy where I grab this false color. Let me just go right here. And let's go to the first card. You see that half circle color right here? Yep, we can just get rid of this one. And then we're going to paste this exact same one right here. Go ahead and see that now we have changed the theme of our stuff completely within few seconds. And yep, this is how you create this one and see that again, this gradient text is also changed on how well, you say, it's incredibly powerful. This is totally responsive. So yeah, this is how we can create this amazing, a fascinating ceases card. So yeah, this is it for this movie. I hope you enjoyed it. And if you have any query or just want to say thanks for this UA project, go head and comment on the forum. Thanks for watching. 4. Premium Accordion in Pure CSS: Welcome to this project when you're going to build this amazing, fascinating accordion with pure CSS. Yes, with the pure CSS. So you see it's very smooth transition here. And once when you click on any tabs than that tape is only going to be open and other tabs is going to be closed automatically. And even see that you have clear indication that which tabs open and selected right now, even this arrow is pointing down, but in close state is pointing left. So say it's really fascinating and this is totally responses. If you go to Inspect Element here, you see this is how it's gonna look in this iPhone acts. You say it's a really responsive and even this accordion is highly accessible. It means that you're going to use your keyboard arrow to navigate to other tabs, you see it's super powerful. And again, just like my most other UI design projects, it's highly customizable and Timmy will just, you can just change right here. For example, let's say you want to pick this green color, you see just one click. And now you have changed the entire team and feel of this accordion. You see that now it turned into gray. You want to blow and just select your blue color, and there you go. Now, this occurred in color, is blue. This is very powerful and premium accordion. So are you excited to learn? I bet you do. So let me go to my co-editor. Let's get started. So heavy go Amun-Ra vi is greater and we have this simplest html file to walk when well does another phylum at doses is where you're going to write our main CSS score. And finally, we have this default CSS where we're going to write the default code for a project. And here you see that I have imported is Poppins font from Google font. Now let me quickly explain the structure of this project. So here we have the main title of the project, which is pure CSS Acadia. And then we have this section, whichever class of tab group, where our individual tabs are located, I use this article tag to define our individual tab. That's because I found it more semantic. However, if you want to use another tax, you're totally free to do that. Now, inside this tab, we have this input radio button, and obviously I am using this radio input to create our tabs. That's because that one time only one tab we will be open and other tabs will be closed. So that's very powerful. That's I used this radio button for this. Then we have this label and you see this input at this level are connected. So say this is Id tab one and this a label for tab1. So these both are connected. So either click on radio buttons or label, it is going to work. So this is the quick preview of our project and you see, it's look really ugly. The reason is because we don't have a style for this project yet. But the thing I want to show you is that you see, this is the radio button. I click here and see its core selected. But you know what powerful is that this label is connected to this input. So if I click on label here, you see, now this got selected. So that's why I feel this input and label Boolean combination. And then we have this div, which are a class of tab content where your tab contained kinda go. This is a very simple tap. Now again, every single tap Have the same estimate structure. And we total have four tabs. So say this is the first one, then you have second one, then you have third one, and this is the fourth one. And you can see right here. So this is a first, second, third, and fold. And that's it. This is the essential structure of our project. Now let's go ahead and start working on our project. So for that, I go to default or CSS and we'll start designing our project by creating custom variables, root selector. Now, inside this one, I'm going to paste these some custom variable. And you say it's basically primary current, which is completely black. Then we have secondary colour, which is colored tomato. And then we have labeled bg color, which is completely wide. This contained musical is also wide, and this contain color is little bit darkish green. This is basically for theming purpose. So for example, if you want to change the team or color of this project, you can simply just change here and it will ultimately go to change everywhere. So that's gonna be really powerful. This is the static font and I want send Serif font. And you see, I've already imported from Google right here, opens. So why don't you just go ahead and just talk it out body. And let's say a font family. And then I'm gonna say here puppets. And because this essentially form, I can see him sans serif, save it, go here. And I see that now we have this popping fault, which looks really nice to me. And now let me just quickly Style. These are our heading one. So it's very easy. You see that I have this heading one right here. And it's either to span, we have accordion while in a targeted to. So for example, I can say I taught here and then I can see a color. And what I want here is that I want to be a primary color, which is right here. Yep, I can just paste it here and then let me just put it centers text-align as going to be centered. Save it, go ahead and see that now it isn't complete Center and it's also a black. So later if you want to change this color, we can easily do it by just interchanging the Scala. Now obviously, I want to style this span two. So what I can do, I can go right here and I can see him at one and then spent so find any span tag which is a child of one, and I'm gonna give it a secondary color. So let's actually not look really good. So I'm gonna say color and let's say a web. And then secondly, color, save it, go here and see that now we have it. Now let's go ahead and start working on our actual tabs. For that, we're going to go in this app dot CSS. So here we basically started with this Adapt groups on a scrap it, paste it right here. And what I want to see that the stack is quite big, so let me make it small. So I'ma sit here max weight, and let's set it here, 40 then this is gonna be max width, but the width is going to be actually had a percent. And then we're going to do, I can say care margin 0 auto, and it's basically putting in center. So see, it is right here in Santa. And then what I can do, I can sit her MD margin top. Let's make it five rem. What it means is that I want to push it a little bit down here, save it, go ahead and see that it pushed it over down. So this is it for our tab group. Now let's go ahead and move on to the next step. So let's start with this tab. So let's target our dam. And here, let's make this week to be 100%. So that's very important. And then let me also to margin bottom, which is gonna be the margin between these individual tabs. I want to just make it two rounds, so it's going to be quite big. You see, it? It's actually quite vain. And here, what I will do this use this box shadow. Yep. This is the box shadow will see this x axis is 0, this Y axis is 0, but the blood is 30 pixel. And we have this RGB colour, right? Which is a kind of a blackish water, which an athlete awesome shutter effect. You see this the shadow effect and talking about yeah, exactly. And let me just tell you that if I just get into this margin-bottom to ram here, you see there actually sticking together. So that's why I'm just putting in margin-bottom to them to get some margin or breathing room between our tabs. Now let's go ahead and style our tab input. You see quite Yeah, so let me just talk at this tab and we're going to use this input right here. So we basically style this radio button, right? And it's going to be position absolute. Let's say your position. And because there's going to be absolute, that means that we need to state here potion to be related, so perishability. So what I can do here, I can say top to be 0, left to be 0. And if I save it, I go here to see that we have this radio button right here so we can hide it. And it's really easy. I can use this zed index and the rising sea or minus 9099. That's a now it's actually going to get behind this label. And once we give it a background TO label, this radio button will disappear. It's a trick. So let's go down right here and let's start styling our tab limited. So it's gonna be really fun. So I don't say a tab as going to be labeled. First of all, I want to display to block. So I want the full weight, which is a 100% as in R. It's actually going to be display block. Perfect. If you want to get rid of this DATA_INPUT super-easy. I can sit here background and offer background. I'm going to make is this VAB, the label bg color blind. So I can paste it here. And you see that now that radio to his current, you see that input is gone. And that's because of this third index. If I just uncommented ESA is going to appear. So we're just putting it behind anything. It's, so that's why it's actually disappear. So now let me just also detect color, and this is going to be the primary color. So I'm gonna go right here. Let's grab primary color. I'm gonna just go here and pasted. There we go. So this is a simple non. Next, let's go ahead. So let me just make this a font weight to be bold. Let's also set here the line height. I want this line height to be 1.3, and then I want this text transform capitalize, right? So that's going to be capitalised. Effect is a nice-looking quite goes. Not to see that we need to add some padding here. So let's go down here. And I must say to have padding to be 1.5 phlegm. Save it, go here, and I see that now, it's good. Now let me add this border radius here. So here I must say this border radius, let's make it four pixels. And let me also add some letter spacing. So now this is eight for this tab label for now, let's go ahead and start designing our tab contained. So for that, you see this, the wrap content, let me just grab it from there. I'm going to go down right here that contains, so for background, I'm gonna make use of variable here, and it's going to be contained bg color, which you see right here. And now what I can do here, they see that now initially we want to hide out tap contained. And once somebody click on the label. Then it will say we need, so that's going to be easy. I can initially set here a max height and let's make it 0. If I go here, see that now the Haggis gone, but he said, this is overflowing. Well, we can just hide it. So I can say hey, overflow, and let's make it hidden. And if a cemetery go here to see that now there are contained is completely gone. So there we go. Our tab contains is now hidden. But now what do we want is that once we click on individual level, then we won't do so with respect to tap contained for that label. And how can do that in CSS? Well, let me show you. So let me just go right here and let me go to index.html. And you see that this is our tap contained. And now once somebody's select this input or this label, then we want to solve this tab contained and know how to do that by using general sibling selector. Yep, you sit the stack contains is a sibling of this input and label. So what do you do? We can say once this input got check, then go ahead. And so the next sibling, whichever class of tab contained. Yep. Let me show you how to do that. So let me just go down here. And here. I'm going to talk at the stamp and the inset is tab. We have our input. And you say this input is basically this radio button, right? So now I can use this checked pseudo-selector. So once the inputted check, then I want to show the next sibling which have a tab content. Yep, so for soil, the general sibling, we're gonna use this penalty operator. And then here, which sibling we want to show tab contained? Yep, we're gonna grab the tab content and paste it here. So what I want here, well, I can sit here max height, and let's make it 30 RAM. And then here I just also want to some padding. And then let's make it 0.5 ramp for top and bottom and 1.5 m for the left. And I save it and you see that now we haven't see amazing. So when I click here and say this got checked. Now this is showing this one, say this object. Now this is the only sewing and rest of them is actually closed. Very powerful. So I can just initially go to this tab one. And here in this input, I can just use this attribute which is checked if I go here to see that the first one is going to be by default open, you see? But as soon as I select the second one, does phosphorus gets closed and the secondary is going to be C. So now this is working fine, but instead there's a no transition happening here. So why don't we just go ahead and make it a little bit smoother? Well, it's going to be super easy. Let me go to app.js and it's a tab content. Let me add a transition, 0.3 seconds, and it's gonna be all. So all 0.3 seconds, if I go here, see that now, you know, smoothly appearing, but we also want transition on this label. So I'm gonna grab the exactly same thing. Yeah. And I say this is the label that requested, save it, go here. Now it's quite smooth, C. Now the next thing what we want here is that once somebody focus on this one or this one, I want to display the secondary color, which is this one right here. How can do that? Super-easy. Let me just go right at the very bottom here. Find the tab and find the input. And if, if input is checked, then go ahead and use this label, right? So this is basically the very next sibling. This is a general pseudo-selector, means in a sibling which comes afterward, it could be very next, or the tenth sibling doesn't matter. It is going to just use this one and then use that semi sector. But this means that the very next one, right? So that's, So I see that this is the input and this is the very next one. And that's why selecting here. So if input a check or if input is a focus. So because when I make use of this focus, or if label hover and then I mean I say hell labeled Bon howard, then go ahead and apply the static. So we'll explain in a bit. First, let me just go ahead and use this secondary color. And I'm gonna just go right here and I say add color. And let's say here. And then go. Now if I go here to see that now this is selected and this is focused and distorted checked, you say, so that's why we have this color, right? Great. And you say that this is actually showing this cursor limited pointer. So on table here, and I say cursor to be pointer, save it, go here. And now we have this smooth pointer. You see, perfect, nice. So there we go. This is how you do it. Let me just do one thing here. What happens if I just get it up was checked here. Yep. So see if focus hover, right. So now I'll see that if I just go ahead and reload and you see this is indeed checked, but it's not receiving in that secondary color. Y is because it's not focus or not hover. You say, I'm using here focus and hover the c. So when I just forgot this, a nice focused. So you have it. If I click outside, you see the focus is gone. How it is also one. So that's why it's actually the word back to its original position. But once we just go up here and restyled these checked also because this is it really going to receive the secondary color. So even if I click outside, it's taken a receive the second speaker, which is very powerful. But what about that arrow? But an indication that this is closed and this is opened. How will do that? Well, it's really tricky, but I figured it out how to eat in CSS. So let me just go right here and you see that we want to show that arrow button into very light of this label, right? So what I can do, I can just go right here and I want to just, you know, make it specific and may use tabular and then it's going to be labeled. And I want to dynamically attach that arrow to this label. So for that, we're gonna make use of this after pseudo-selector. Yep. And here we're gonna make use of this content. And I had that Arab automatically put on a paste it right here. And if I go here to see that now we have that arrow next to it. You see that we have it? Yeah. But will want it at the VAD, right? It's very easy to actually do. So I can just go here and I guess we have position and let's make it absolutely. Now what I can do, I can sit here, right 0. Yep. I can sit here, right. Seal. Save it, go here and see that now at the very right, again, we need some space here, not 0 exactly. So I can say here, one gram, save it, go ahead and see that now we have this arrow right here and we can actually make it big. So what I can do, I can just say font size. And let's make it something like 1.3, which is quite bigger, right? That now it's quite big. So there we go. This is good. But the problem is that once I select this one or it is check this arrows not pointing down. How can do that? Well, it's very easy. Basically target in edu button which check and then we can simply just rotated. Yep, let me show you what I can do. I can again just grab this tablet with after we needed, let me paste it right here and here I can simply say input and checked. So once if input checked, then the very next sibling, which is labeled after, do something. What do you want to do? Well, I want to go to read. I can use these transform property to rotate it. So let's see here, rotate and I want to rotate it 90 degrees. Jump, save it, go here and see that now it is rotated. You see, this is a pretty clever isn't it? Yeah, activists took me almost, let say, three hour to figure this out. So this was really clever. They know this is how you create it. And by the way, this is totally response you, yep, let me show you. So if I go to Inspect Element here, you see this is how it is going to look on iPad. Yep. And if I go to iPhone X simulation, this is house or looking iPhone acts, they say, it's pretty darn cool and it's very responsive. But let me tell you one important thing. And he said this a second tab which have a lender contain then every other tab. Let me go right here. And what happens if I add here mood paragraphs? Yep, let me just make it even more bigger like this. You see, now I have four paragraph instead of two. Now let's go here and you see if I click heresy, now I'm having here trouble. So there is a problem. So let me just go right here. And you see, you know, commanded out this overflow hidden. You see that our contained is flowing outside this tab you see, so which is not good. So how you can actually fix it? Well, let me tell you this is very important to understand. So here you see that we are standing here to have containment. Now let me tell you that we need to give any specific height. Yeah. You simply can't say this is going to be a 100% of the height. Yep, you can actually say, but it's not going to work that good. I'm sure you see that. Now it say this housing a look. This is a very odd behavior. So you need to give it a proper fixed height. So for that, what you can do, you can try with, let's say 70 RAM, right? Just increase the max height. And I see that now it is fitting right here. So yeah, it's fitting here. But what about in small devices? So let me just go to small devices and you see, if I click on this second here, you see it's also fitting here. So I think it's 70 MB is good. So yeah, you just need to make sure that you give a proper height in both big, small devices. So that's the one part. Now the next thing what I want to show you is that let me just go ahead and actually get rid of it because we did not flee these paragraph anymore. I just wanted to give example. So what I want to show you is that you see that if I click on one tab, the remaining tabs get closed. You see? And the reason because we are making use of these radio buttons. And radio buttons can be selected only one at a time. But what happened if you want to allow your user to open multiple tabs at the same time? Well, for that reason, you can use checkboxes. Incidence of radio. Yep. You sit this type is radio. What he can do, we can simply just go right here and say there's a radio, finite all the radio and replaced with checkbox. Now, check box have a feature to get selected as much we want at the same time. So now I'm using here checkboxes. You see the type of check boxes and you will see everywhere because I have replaced all of em with a checkbox. Now I can go here, and if I click here, I see that now I can open all the tab at the same time. You see when I just didn't double-click this one, it will open and close. You see? So this is very powerful. Again, if you want that feature to open all the tabs at the same time, just go ahead, use checkboxes. And if you want to allow your user to only open a single tap at the time, go ahead and use radios. So let me just get back to radio. Where Don and there you go. If I go here and you see that now we are back to radio. Radio. Now let me just tell you one awesome feature about it. I can use my keyboard to interact it. Yep. You say that I am using the up-down arrow to infected with it. You see, it's super accessible. And yeah, this is very, very powerful. So yeah, this is amazing. Now let's go ahead and talk about taming it. So you see here that I'm using it's tomato color. So let me just go right here and default as it is dramatically. But now you can change it anything you wished. For example, I can say here purple. And if I go here, see that now everything is changes to pople. You see? And what happens if I want their green? Yep. You guessed it. Just say, hey, go ahead and see that now, it's turned into green. So there's a one click away and let me just go right on inspect element. And let's TIMIT from here, jump, you see there's our root custom variables. So let's say you want to change the pink and you see that now we have everything pink. You see, it's really powerful. Or even you can go beyond it, right? You can do something like, let's say, I want this a label background color to be pink. So let's say I just change to pink. And then what I want here is that I want to set these primary color to be completely right. So it's, it is actually right. And you can do a ton of talk. For example, let's say, I want this secondary color, which is this a focused or selected color to something different. This yellow here or this yellow. It's up to you. Just go ahead and get started. And then you go in just a couple of clicks. You have changed the look and feel of this accordion completely. So yeah, this is how you team your accordion to match your website, collating and say, it's incredibly powerful, and this is how you do it. So this is how you can build these fascinating accordion in pure CSS if you have any query or do you simply want to thank for this lecture, head over to the forum and write a command there. I will read and respond to it. Thanks for watching. 5. Sexiest Blog Card (And Layout) Design: So this will be, you're going to learn that how to create this amazing block card layout in pure CSS, you see they have a cool, smoother transition effect. And again, these are these fancy cars. So see that enlarge x top, it will look like a three-column layout. In the medium, it's going to have two column layout and it's more devices like a mobile is going to have one column layout. And also this car is completely permeable. So I can just go right here. And let's say I want to just think disclosure has a pink. I can change this color to be completely white. And there we go. And just freak lakes. And we have entirely changed the theme of our block RDC. You can just change anything you wish, super, super cool. And even you can just make it yellow. And it says start with good. Well, you can just change this color to be completely black. And there we go. Now, it is looking good. And there you go. So yeah, this is what exactly you're going to learn how to build in this movie. I have cited the lingo to my quota and let's get started. So here we go among my VSCO eater and we have this estimate file to work with. Well, there's another fan app.js is we're gonna write our main CSS code. And finally, we have this default or CSA's where we have some default code for a project. So here you see that I'm making use of this custom variables to define the color and transition of a project. That means that these make them easy to edit. So later, if you decided to change the background color, well, you can just change it right here and it will reflect everywhere. After this, I'm just resetting margin and padding to every single element on our project. And here I have some default styling for our body and this H1 tag, well, I'll talk about it in a bit, and this is it for default da, CSS. Now let me quickly explain the HTML structure of this project. So here you see that I have at this section, whichever class off cats, and we basically have two sections. So this is the first section. You said this one, and this is another section. And this section cards are teeny bill. You see this section also have a class of thinkable. We'll get back to it. But first let me just go up here and you see that inside these cars, we basically have our individual card. And I'm using this article tag to define them. And I say this article heavy glass of post. And inside disposed, we basically have our main image and the post contained where we had this post dad, post title, date, publish, and that's it. This is a very simple card. So b total have three of them. So here 123. Then we have three more on this theme habilis section. So here we only have these extra class, and that's it. Every other thing are exactly the same as the previous section. So let me show you the quick preview and you can see right here. So this is our first section. So this is the first, second, third car. So this is our first section. Now here's our permeable courtesy. And again we have three, so 123, c. So yeah, this looks really ugly as of right now because we don't have any styling. So let's go ahead and start designing our cards. So for that, let me just go right here and let me go to app.js is and here you see that I have the scars. So this is a cost container. And again, we have the same card class on the second section two, so this is going to apply to both section. So let me just type here, Gods. And then I'm gonna use your flux box to put it into one row. You see that this is a window and then we have another row here because we have two separate section. Now I want some margin between these cards. So for that, I'm going to make use of your justify contained and I want some space in between. Well, obviously you're not gonna see it right now because we don't have any column defined yet. But we'll get back to later. And let me also add here bad thing to be 20 pixel. So this is it for card. Now let's go ahead and define our three column because we have this three card. So how can do that in flexbox? So let me show you Hearthstone. So you see that now this section is a flux container and every single direct child inside this section is now a flex item. And if you have a flex item, you can use flax property. So let me show you, let me just go right down here and see that we have this post class. Let me just go ahead and grab it. And again, every single car have the same class and we're gonna use one property which is specifically designed for flex items, that is the flex property. This is a basically a shorthand for flex grow, flex shrink, and flex basis. So what are we going to do here? And once it is 0 to flex grow, but I will allow it to shrink it. And here, because we're going to need here three column. So it's going to be 33.33%, that is going to be 99.99%. And then I can simply say her minus1 RAM. So we're going to have this one ramp gutter or a space between those costs and it will still not see that three column. That's because we haven't styled our images because our images are quite big. So let me just go ahead and style our image. Then. You'll be able to see that three column. So you see this image have a class of post image. Let me grab it. Let me just go down right here and here. I just want to give here a bit to be a 100%. And that's it. If I say we to figure where you see that now the three column layout, you say, it's pretty darn good. And we have the space between these costs. Well, this is a one round. You see, we have set here of one round. Again. Let me just go here and you see that this outImage, but let me just add some border radius around me, some say, border-radius. And I'm gonna just make it here five pixels. So we go ahead and see that now we have that phi pixel border radius, which is cool. Now, again, being a need that bach shadow. So I'm going to paste it right here. And this is a simple box shadow. You see there's a 0 pixel on x, epsilon y, but I'm using a particular pixel blur, and this is a simple light black color. Save it, go here and I see this is how our image looks like as of now. Now it is time to style our post contained. Well for that, let me just go right here and let me just grab this post contained here. So there's ice post contained here. I'm gonna grab it. I'm, I won't down right here. Let us say this background to be complete, right. Save it, and then let me add some margin. So it's going to be 0, top and bottom, and 20 pixel left to right. And also, I'm going to add here padding. And I just want, say, 20 pixels all around this one. If I go here, you see that now this is how ADH post contained looks like as of now. Now let me just push it up. So how can we push it up? Well, we're gonna use your transform property and then I can see her Translate Y. Y axis means what ugly. And I just want to push it six suffixes. So I want to push it up, right? So that's I'm missing a minus. If you want to push it down, use positive number. So if we go ahead and see that now, there we go. Now let me just actually adhered border radius. So I'm gonna just go down here and I say border-radius. And I just want to ask pixel, save it, go here and there you go. We have some subtle border-radius, which looks really nice. Now let's go ahead and style oven bag. But you see this tag, have a bag of edge folder. So I'm going to go right down here and I'm heading for, and it's gonna be super simple. So it's going to be font-weight. Let's make it 12 pixels. And because we have a small font, I can simply say or text transform to be uppercase. And then I just want to make it lighter, so font-weight, and let's make it 400. Save it, go here. And this is how it look like as looking really nice. Now, let's go ahead and walk on this heading two. So for that, you see that we have this heading two, right? So I'm gonna go right down here. Let me just grab this post contained first of all, and then let's say or heading two, I just wanted to say color to be something like 424640, and this is a kind of a dark grey color. Now, I also want to include this font size to be 18 pixels, to be exact. And then I just want to say here margin bottom, and let's put it here, ten pixel, save it, go here and a C, This is how it looks like, and this looks really good. But you see that this title is actually, there's a small here. So let me just see here, takes transform to be capitalize. So capitalize and go here and see that now we have a first letter of every word to be capital. Now let's go ahead and style this date published. For that. I can just go down right here. And I say here, date published. And then here you see that I'm dogma distinct published right here. Okay, I just need to see color and let's make it this right here, which is the light gray. And I'll say a font size and it's gonna be 12 pixel. And again, it's gonna be takes transformed to be uppercase. Save it, go here and you see this is how it look likes and this is cool. But here you see that this a tag and this date purpose have a same for size. So why this DAG looks big, athlete is some problem here. So here you see that this is the font size, not the int. Save it. Go ahead and you see that now we haven't. There you go, perfect. So now our image and this post content is ready. Now to go ahead and create that transient effect we're on. How about this image will go little bit down. So for that, let me just go here. And I'm just gonna say here dot post on however, I want to target my image. And what do you want to do here? Well, we want to push it a little bit down. So for that I'm going to see her transform. And again, I want to make use of this translate property. Now this case, I want to make it again y, but because we want to push it down, I'm going to use your positive number. Let's make it 20 pixels. Say we go here and I'm going to have this one. You see that now it's pushing down, but you see this arrow. Let me just turn into gossip. So here I'll say gotta to be Pointer. Say we'd go here as either now on how it is indeed that image is pushing down. So that's cool. Again, if you want to debt transition, I can just go right here on post image and let me just go here. And so there's transition, grab it. And I must say here, transition. And it's going to have that variable based it go here. And you see that now will have the smooth transition frequency. Now let's go ahead and push this post contains a little bit up. For that. Let me just go down quite here. And again, on post hover, I just want to target this post candidate. I want to push it up. So I just want to push it over, let's say minus 2T pixel, because I get it's going to be up. I'm using this negative sign here. If I go here and see that now, see, it's working. There we go. So now again, this is not smooth. So for that, I'm going to go up right here since transition, then grab it and need to use it on what contains. Save it, go here and say that now we have that smooth transition you see, now let's go ahead and make it response you because it is not responsive. So for that, let me just go right here. And here. I'm going to get at media. And here what I want to do, I want to say here max width. If you find the max width of 992 pixel, then just go ahead and apply this styling. And what we want here. Well, what I want here is that on iPad, I want to make it look like in two column layout. So now it's three column index dog. But in iPad, I want to make it to column, and in mobile I want to make it one column layout. So now let me just go here and super easy. You see that here, I use this post. Let me just grab this post trimming cool down right here. And here is it is a flax and I'm using a thirty-three point. Three percent. Yep. Now, I can make it 50%. So 50, 50% is a 100%. So now we're going to have two column layout. And again, let me just get rid of it, saving NAC it that now if I go here and if I tried resize at 92 pixel, you see it will turn into two column layout. You see it's not turning. Why is that? Well, let me show you. If I go up here, you see that now on card, I'm using your flux, but I'm not wrapping it. So let me show you what I mean. So I can see her flax wrap. Now by default, it's properties, no RAB. So it's not gonna wrap. So say this is the bite of our property. But as soon as say here, wrap, now it is going to wrap it. You see, if I just go here to see that now. And 92 pixel, it's wrapping into two column layout. And again, you can wrap reverse means you can push this up. Let me show you. I can see here rap and it's going to be reversed, so it's gonna wrap it on reverse. You see that last push it up. So again, we don't want leave us here, we just want to wrap it. And if I go here, you see that now it is rapid. But again, it's going to stay two column layout because we haven't defined one column layout for mobile. So let's do that here. Suddenly the scrap, the same thing. I'm gonna go down right here. And also if you find the max of a TAF, let's say around 768 pixel. Just do this thing. Well, what we want to do here, well, it's so simple. I just want to make it a 100% And that's it. So then we go, this is a 100%, and now we're going to have one column layout. If I go ahead and see if I try to make it small, you see that now we have this 1% c. So let me just make a swan, and this is how it's gonna look. Actually let me just go ahead and simulate it in iPhone acts. So am I submitted right here? And you see, this is how it's gonna look in iPhone X. It's a one column, awesome layout. So there we go. Now I'm sure you see that now I can just put this s1 to be incomplete centers. So let me just go here and see this is our heading one right here. So let me just go here. Lmic or H1 on heading one, and let's say a text-align center. And also what I can do here is that let me just say their font size and I wish to make it to ram here. Save it, go here. And I see that now it's quite big and compete center. So this is one part. Now let's go ahead and make these cars. So it's gonna be super easy. Let me just go right here. And here you see that we have this teeny bit. So I must use, Timmy will hear dot T-Mobile. And here you see that we're going to only change this post contained, right? So I'm going to grab this post contained. Yeah. And here I'm just gonna say her background and is going to be here, this guy. And it's going to be a vav and theme to BZ and four. And we're also gonna need that color, right? So C colon. And now this is going to be themed color. You see it's right here, pink color. If I go here and if I try to make it look like assay, if I try to team it, I can just change this thing. Bg, Let's say I want to turn into discolored and themed column is going to be completely right. And you see this is actually working but greed to also team that heading to which the title of our card. So for that, I can just grab it. And another spatially right here. And you know, that is actually have this heading to see tag, you see right here. So I'm gonna go heading two. And now I just need to see this color to be again, the themed color, right? And then we also need to change this date published because you see that we have the state published as a gray color. So we need to grab it. I'm gonna go down right here. And again, let me just grab this date published. I'm gonna just go ahead and get rid of it and paste it right here. And now if I go here to see that now if I tried to make the team b-to-b, let's say this color right here, and this tint color, something like a complete white. You see that now it is changing. So it's incredibly powerful and can change its color like you know, like like Lego, right? This is really cool. And even you can change this color as it is, particularly yellow. And then you can just change this singular to be completely black like this. So now this is your T-bill car, which looks really good. C. So there we go. This is how you can create this amazing blog guard in pure CSS. So if you have any query or simply want to thank for this project, then head over to the forum and leave a comment there. I read and respond to every single comment. And as always, thanks for watching. 6. Dead Sexy Material Design Login Form: This will be your going to learn how to create this awesome material design login form in pure CSS and q line of JavaScript. So you see whence I focus on any filled it smoothly appearing and I'm going to type my similarity for example, I say around, you see, this is not a valid email. So that's why it's saying these red. But if I type in a valid e-mail, for example, rowdy.com is there now, this is a valid e-mail, so that's why it's so in the screen. Same as a password. If the password is less than six character, its own displayed. But if I just did not go beyond, it's shown on the screen. So this is also validating our input. And also if I just heard about this eye icon, it is going to show our password. And if I live, it's again going to hide it. And again, this form is completely permeable. So later if you want to change this thing, for example, let's say you want to change it to blue, pink, or maybe you have site have a color of green, value c. You can change it any way. Dubious, it's completely permeable. So this is exactly you're going to learn how to build in this movie, I'm ready. Dilemma. Go to my goiter and let me show you how to build this amazing material design firm in pure CSAs, little bit of JavaScript. So here we go. I'm on Barbies, go into it and we have this festival file to walk with. Well, there's another file in app.js is variable, right? Our main CSS code. And finally, we have this default CSS where we have some default code for a project. So here you see that I'm making use of this customer variable to define the color of our project. That means that later, if we decided to change this color, you can come here and change it in one place and it's going to reflect all the places. So that's very powerful. Next up, I'm mentioning this height to be a 100%. That means that we basically want to center our form both vertically and horizontally. And for that, we are making use of display grade, place item, property. Well placed item is a shortcut for Justify contain an ally contained, which is going to place any targeted element incentive both vertically and horizontally. So that's very powerful. Next up we have some default code for our body and heavy one at that's it for this default CSS. Now let me quickly explain the structure of a project. So here see that I'm have this main tag which have a glass of main phone. And that I have our main form right here where we have these two input field. You see, the first one is actually going to be our email and the second one is going to be the password. And then I have this show past, which you see right here, this TO pass, which is going to be this visible eye icon. And later, once we hovered around this one, it is going to show our password. And once I leave that place, it will go to hide it again. So we'll again design it later. But you see that now we have this forgot password and then this submit button, which right now looks like this. And this is really ugly looking stuff. But we're going to start it right? And yeah, this is a simple estimate file and you also have this app.js. Yep, we are going to write a little bit JavaScript. Now let me just go to app.js is, let's get started with our project. So the very first, I'm gonna grab this form element. And let me just give it to some kind of a weight. So I'm just gonna do it at the top, let's say around 500 pixels. Now is go ahead and grab inputField Elementary School right here. And let's start with this one. And here I just want to make this bit to be a 100%. So every single input field in our form is going to receive width to be a 100% next up MSA and portion to be really do because later we're going to use absolute. And here let me just say this border, bottom as maybe two pixels solid. And this is going to be our primary BG. So let me grab it. I'm going to go right here, and I'm going to use this variable here and paste it. There we go. If I go here and you see that now we have that particle, and let me add some space between these input fields. So for that, I'm, I used this module. And let's say a forum to be top auto is going to be left and right and bottom. That's what you do, want them save it, go here and a C, This is how its look like. So this is it for now. Now let's go ahead and style our label Foster. So for that, I'm gonna go right here and say that we have this label. Lemme grab it. I'm gonna go right here and argued a basic simple styling and we will get back to it later. But first let's give it a basic styling. And as he had color, and I just want to use this text color. So I'm gonna just go right here. And here is going to be VAB and text color. Say we'd go here and see that now we have this text car. Perfect. Let me just increase its font size. So I'm Sierra font size and I just want to make it 1.5 m. Save it, go here and say this is, has looked like. So there we go. This is it. For now. We will again get back to it n style even more. But as of right now, let's keep it simple. Now let's go ahead and style our input field. So for that protagonist input, right? And here, let's make this to be a 100%. Save it, go here and see that now it's going to expand to fit it, which is crazy. Now let me just add some kind of a padding. So it's going to be pairing. Let us because 0.25. top and bottom and 0 is going to be left and right. Also safety background to be null because we do not want any background. Let me just say it discolored to be complete, right? And let me also increases font-size to be around 1.2. So we'd go here. And as of right now, this is how it look likes, but I see it as an outlet and borders there. So let me just go ahead and get rid of it. So I didn't need any hotlines, let's say outline to be numb. And also the border is going to be. And now let me just do one thing. Let me go here and let's add font-weight to be bold. Bold font. If I go here, now you see is looking really good. Let me just go ahead and also get rid of any margin if you have. So let's imagine to be 0. So now this looks good. Profit. So now let me just get back to our label. So for that, let me just go up here. And let's do one thing. Yeah, Others will say here's that index and let's set him to be minus one. And then I just want to set its position to be absolute for our label. So we can easily push it up once somebody focused on it, right? And also, I want to set it to be left to be 0. So it's going to be lambda 0. And then what I want, I own this transform origin. So I won't transform origin from 0, so it will start from left to right. This is very important. So there we go. This is how it looks like as of right now. So now let me just go here and let's do one thing you see. That here, this is the type of email, right? So what happens if I die PNG, please, let's say if I type anti-British, it's really bad because this not writing. So let's add some visual indication that this is not a valid, are valid. So it's very simple actually, we can say have been put. And you can see here, if input is valid, then go ahead and give this color green, yellow. Save it, go here and see that now this is not valid image. So if I set here at NSA at Gmail, you see that now it's a green yellow. It means that now showing that this is a valid e-mail, the reason is because we are using here this email. Now again, because do the same thing for this password. So see the password, you see length is six. So if I go here, you see that if I try to just add in password is see, this is not green. And once I hit that six mock nasa integrant, so now sewing is valid. So why didn't just go ahead and let me also style that invalid state here. So let me just go ahead and sit here invalid. And at this time, I just want to make it red, save it, go here. Now if I try to see that now, it is showing me that same goal. So there we go. Now it is for walking and as soon I hit this valid Gmail, start working, say, so let's leave it for now. Now let's go ahead and start designing our underlying for that. Let me just go right here. And you see it is the input field. Let me just grab it. I'm going to go right here. And as an input field and let's see a doctor, right? So we're going to just denote, dynamically put that underlying, Right? So I see a contained and let's make it none, right. It's empty. And then I guess a portion to be related. And then I guess here display to be Block. Let's also set head height to be four pixel. And then let's sit here. Frankly, the width is going to be the 100% savings go here. And again, you will not see any difference as of right now. So let me just do one thing. Let me just set her background. And this is going to have this primary BG. So let me just grab this guy over here. And I'm going to sit here and read able to be this right here. Now, let me just go ahead and scale it down initially, so is going to be transformed. And I'm gonna say here, scale to be 0 and the transform origin is going to be from g 2%. So task from origin, I'm going to be due to percent. So we can easily switch the direction later and show you how to switch the direction. And then let me add some transition. So it's going to be the smooth transition. So transition is going to be transformed because if you're going to sit here transform and it's gonna be 0.5. second. And let's say I have 0s element water sit here top to be two pixel. Save it. Go ahead and see, this is how it's looked like as a fight. And again, there's no difference because we haven't styled that focus within a class. So for that, we can go right here and let me again grab this guy over here. I'm gonna go down right here. And here. I say, if focus within, then just go ahead and set this border bottom color to be transparent, sacred cohere as he was a father. So I see that now this actually becomes transparent. So this is exactly what I'm looking for because later we get any mated. And now what do we get to here? And we can just grab this guy and I hear, I can save that focus within. And then I can say after state. And what do you want enough to state? Well, you see that I set her transform to be skilled. Yep. Now what I can do, I can make it 100%. Yes, so I'm gonna paste it. And I said it has found to be one. And if I go here, I see that now we have a smooth transition C. So here we're actually just make it 0 and then on how after and the scaling it up, that's it. Isn't it awesome. And initially we had this packet on. So what our focus is one, this becomes transparent and also we're targeting this after state. So fosters become transparent and then immediately it scale up and give that awesome underlined effect. But what happens if I focus to see if a furthest one, this label is not moving up. So how to fix it? Super-easy. Let me just go down right here and let me, I can grab this input field because we're going to need this input field. So I paste it right here. So if I say You're on input to fill and then I again just you can I use this focus within here? So focus within. So if somebody focused on this input field, then go ahead and grab the label off it and apply the styling. So what styling you want to apply? And I say had plus one. And here I simply want to scale it on x-axis, which is horizontally. And I can say is 0.8. And then I can simply translate on y axis. And again, I want to push it up. So I'm Sierra minus2 RAM, which is 32-bits. So if I go here to see that, now, see even how does one see it's appearing, say C. And first you see that there's actually this place holder. So let me just hide this placeholder initially first of all, so let me just put down here, I guess if we see at the input and then I guess daga, daga placeholder. And here I can say color to be transparent. Now you see that placeholder is higher. It will. Let me add this one with Columbia. And if I go to see that now that placeholder is actually gone, which is exactly what I'm looking for. So then we go, this is one fixed. But again, if I type something here and if I just go move away, you see it's come back. We don't want it right? So what we can do here, we can just go right here and you can target the focus team. So here what I'm gonna do, I'm gonna say, okay, go ahead, grab the input. If the input is not, and let's say a place order soon. So here, I'm a safe place would have shown and you can see display shoulder, I'm talking here, this collective aspect. So if this spatial order is not shown, then go ahead and grab the label. And the studied. If I go here and then I have to look to see if I just click here, see, now, it is actually going to work. And if I just click outside, it's still going to work. So that's fine. But again, you see that we do not have that awesome transition of this label. So let me just go up here. And you see that we're going to grab that transition. We have it here. So let me just grab it to the same thing. Let me just go up here on label and then paste it. So here is going to be enough. I go heresy that evasive. And now we have the smooth transition of our labeled C. And as it is formed, it is little low. I think there's a problem. You see actually this is a form element non not formed classes. It's a fun element. Actually I made a mistake and there you go. Now it's looking good. So that's good. So here you see that we have this. I, let me just push it at the very right here. So for that, we can just go here and let me just go right here. Sedna's shoe pass. Let me just grab the shore, but let me just go at the very bottom here. And an attacker dash o, pass him and hear what am I must say this portion to be absolute. And then I just wanted to write such a delight to be 0. And also, let me just say discuss a to B pointer, save it, go here and say that now it's rare and that's go ahead and sign out forgot password button. So for that, a goal right here, and it's gonna forget boss here. Let me grab it. I'm gonna go down right here and paste it in here. It's gonna be simpler, let's say md margin top. Let's make it to LA. And then I'm like going up again that forget bus. And then here I'm a target, the anchor link, you see that I have this anchor link in the fact that boss. And now let's study it. Some city or text decoration to be null. And here is going to be font styling, and let's make it italic. And then I set this opacity to be around, let say, due to 0.8. And also I want the color of this text color right here. So let me just rabbit and Lasseter or valve and based it, save it. Go ahead and see this as lookalikes. And let's go ahead and walk on this submit button. So for that, let me just go grab this button. And here it is button. And let's see an empty margin tablets and get three them. Save it, go here and see that now we had at the margin. But now let me just also add that background. And this background is going to have this primary BG. So let me just go ahead and here's going to be variable. And there we go. So now we have it. Let's set it to be a 100%. And let's say this is a bad thing to be around one RAM. And then here, let's make these color to be complete white. And then I'm gonna say this outline to be numb. And also I don't want any borders of outer is also going to be a nun. And then I just introduce this font size. Let's make it 1.2 RAM. And then finally, limit just secure text transform to be uppercase. Save it. Go ahead and see this is how it's looked like. And you see that first of all, I want discuss it to be pointer. And also let me add some letters missing. So for that, let me just go right here. And you see this font size actually, right there we go, letter spacing. And I want this to be around three pixel. And also I want the cursor to be pointer. So say we'd go here and c. Now, this looks really good. So there we go. So now this is looking really lies and now phi just not right, resize it. You see it is not response you. So let me just go to We can make it look good on small devices. So for that, let me just go right here and let me use this media query. And I will see if you find the maximum width of the viewport is a 550 pixel, then go ahead and apply the styling. What we want here. We're going to grab this form and we're gonna go down right here. And here. I just want to make it 320 pixels. And that's it. Save it, go here. And now I see the Sal's looking, say, so this is cool. Now even if you Quantic and change its color. And it is colliding to us, for example, let me just make it pink. And there we go, decided look like. But again, we're not done yet because we need to work to show that passwords. For example, if I add something here, if I hold this one, it should show the password. Well for that, we need to make use of JavaScript and his teeth that I have this app.js right here. So what do we wanna do here is that we need to first create this variable. So let's see, I lead and I wanted to say here to Google password. And here I just want to go here. And as it does to her password, I want to grab this ID here. I'm gonna go right here. And I must say document dot, get element by ID. And then I want to paste this ID. So now we have that dual password, and now Veena need this input element xs. Well, for that, you see this ID password swinging rabbit. I'm gonna go to app.js. Let me just duplicate it. And I must say it here to be password. And then I can say here password element, that's it. So now we have our password element and this toggled password. Plus, you see this guy over here. So now what we can do here is that we can attach event listener to this toggle password. So what event you want deletion for? Well, when somebody WHO or this one and when somebody leave, I can just say Toggle password dot n is going to be add event listener. So which event you want to listen for? Well, I won't present for a mouse enter. And then which function you want to execute when somebody hovered over on that double password, I'll say hit show us. So this is going to be the function and what happened when somebody leave? Well then just go ahead and execute this function which is height boss. And here is going to be Mouse leaf. So now we have this two function. So let me just grab show past and let me just go down and our create data function show Bosch. So now let me show you something. Let me just go right here and see if I just enter any random GPS password here. And if I just go to Inspect Element, you see that there's a type here, the password. If I change it to text here, you see that now that character is visible, you see it's a reasonable here. Yep. So this is what exactly we're gonna do here. How can we do that? We're going to add this password l. So I'm gonna say a password L and then dot type, and I can set it to be text. This is that easy. Let me show you the figure here. You see there's a type password. If I set it to text. If I go here, see if I enter any Something you see, it's showing up why this is indexed here. So what I'm doing here, I am using this type and I'm sitting into text on hover, that's it. So if I go here and if I just type something here, for example, this one, and if I hold this fuzzy, it's going to show up C. And after Leave, it still showing up because we have dynamic 18, that type to be text. So we need to move back to type password so you know how to do it, right? Yep. I can go down here. I can say here height bus. So height bus. And now this one is going to be possible. Again. Say we go here and say even I just type something here and how this will see showing. And if I live, it's disappearing, appearing, disappearing c. So that is working. But again, we're not troubling this icon. So for that, we can go right here and we can go up. And then you see that this icon I have here on Toggle password. So I'm gonna go right here and I need to grab that password. So now here what I want to do, I want to set its inner HTML to be something like this, right? I just split this. And if I decide because if the password is in, we want to show it, and if it is shown, we want to hide it. So let me just go here and I say it to be password. And then in our HTML, and let's see a height 70. Go ahead. And now let me just add something here and see how this one see. Okay, now showing, and now it is indicating that Heidi is distributed. See that now it is working. So there you go. There is a fully functional material design login form. It's very powerful. And again, let me add my email id here. And you see that now it is not correct celebrity idea Khan and say it's working. And now this is the V0. Now again, you can teammate. So if you want to change the color of it, you know how to do it, right? Yep. They can just go ahead and you can just change it any way you wish to see. Super nice c. So there we go. If you have any query or simply want to thanks for this project, head over to the forum and leave a comment I read and respond to every single commit. And as always, thanks for watching. 7. Responsive Modal And FullScreen Overlay in Pure CSS: And this movie, you're going to learn that how to create this amazing responsive model in pure CSS. And again, it's totally response. You say if I just simulate it in iPhone X, yeah, this is how it's gonna look in iPhone X is this input and button changes into two rho, but in big devices, they are in one single row, but that's not all. I'll also show you data. How can you build this screen overlay? Yes, you will learn how to build a modern pop up and this screen overlay. And again, the screen overlay is also completely responsive. And again, it's terrible. So there we go. So this is what you want to learn in this project. Are you excited? Let me go to my code editor and let's get started. Here we go. I want my Vickery turn and we have this STL file to walk with. Well, there's another failing at dossiers is where we write our main CSS code. And finally, we have this default CSS. We're gonna write some default code for a project. So here you see that I've imported this Poppins fond from Google font. And here I am using this custom variable to define our primary color, which make its T-Mobile. So we can easily change its color entirely in just one place. And that's very powerful. And then we have some default styling for body and image, and that's it. So now let me just quickly explaining the HTML structure of this project. So here see that I have this section class, whichever class off hero. Now inside this a hero section, we have to separate column. This first one is the hero left column and then he drew right column, will inherit lab. We have this a herring than this paragraph. And finally we have this main button. And let me tell you that this is the button we are going to walk in this project? Yes. When we click on this button, as of right now, it's link, but again, we will turn it into button and once somebody click on it, it will going to open that model. And you can see right here, it's have a glass of open model. And next we have this hero right? Where we have this image. Here we go. So this is the structure of our actual model. So you see that this div has an id of info panel. And let me tell you that this info panel, Adi is connected with this info panel and Kelly Yeah. These both are connected with this ID. So once somebody click on this particular link or button, it is going to target this particular model, which is very powerful. And then you say that we have a class of model here, so we can easily styled our model. Next insight is a model. We have this model contained. And inside this moral contained, you see there's a modal image than the modal title model description. And then we have this form input where we're asking for only email ID. And then you can easily hit the button to submit or subscribe to our newsletter. And then finally, we have our close button where once we click it, it's going to close our model. So yeah, this is the estimate structure of our project. But now let me show you the quick preview and you say, it's right here. So this is our hero area. We have this heading, one paragraph and this subscribe link, which we're going to turn into button. You see, it's right here. This is the hero left area. Alright, and then have hero, right, which you see, this is the image we're talking about. Again, it's look really ugly, but we'll get back to it. And then we have modelled itself. So say this is the modern image and let me show you, it's right here, the modal image than we have this model heading you see, stay up to date with our newsletter. And then it's a model description. And then we have our input tag, which is asking for email and Subscribe button. And then finally we have this closed link, which is going to close our title. Yeah, so this is our project. So now let's go ahead and let's start designing our hero area first, because that's going to be super-simple. And here I just need to pitch to the styling because again, I'm not going to explain this hero area because our main goal for this project is to design that model. And I will explain every bit of it in this app.js is. So firstly to default CSS here. And let me just quickly explain. You see, now it's looking quite good and it's basically I'm targeting my hero section and I'm just using this a flexbox to just, you know, the two column. And then I'm styling those hero left and right. Adi, you say, it's pretty simple styling. But the interesting part you see here, the open model. Let me just go up here and you see this button here, say this is the open model. Yep. So previously it was the anchor link. You see this is the anchor leg, but I'm using this styling to turn into a button. And you can see right here, yep, it's look like now a button. And because of the styling, and then again we have some margin-bottom three RAM, which is basically the same margin between this paragraph and this button which is three RAM. And then I'm using this media query to make it look good on smaller devices like this, you say? Yep. So yeah, this is our simple Hebrew area. Now let's go ahead and let's start designing our actual model. So that's gonna be really fun. Well for that, let me just go to app.js and lemon. Just go right here and see this is the model talking about. So let me just grab this model and now what we want here, well, you see that initially our modelling showing up and if you don't want it right, we want to hide it initially. And once somebody click on this button, then, and only then we want to show our model. That's great. So let me just go right here and, you know, to hide it when to sit here, b to be 0 and height to be 0, right? So non-linear Hugo here, you see that it is still there. So the one way we can do is that we can simply just go right here and we can set her overflow to be hidden because that's overflowing here. And now see, it's actually gone. But it's gone at the bottom of a hero section. We don't want it. We want it to disappear in the very center because once they click on this one, it is going to appear at the very center. Well, for that, we can make use of petition. So you can say here, position is going to be absolutely. And then what I do, I can simply say a Top 50%, bottom left and right 50%. And now if we go here, you see that our model is still hidden, but at the very center of our webpage. Now let me just go right here. And now let's go ahead and style the visible part of our model. So how can I do that? Let me show you. Let me just go right here. And you see once I click on this button here, it is going to add this info panel at the URL. Let me show you. This is when I get added in the URL. Once I click on the subscribe button, you see a click here and see that now it's added right here. So now once I take this one, then this is going to be the target. And we can simply just use targets pseudo-selector to style this target part. Let me show you. So what I can do. I can just go right here. And I can say here, if a model is the target, go ahead and apply this styling. So what is that? Well, let me show you. Let me just give it a background. And this is going to be RGB color, which is alpha transparency. And I'm gonna make use of Black. So here is black. And then I'm going to make use of your 0.75 alpha transparency. If I go right here, you will again not seat right now because you see it is a weight and height is 0, so we need to stretch it up. So let me just go right here. Let's make this a 100%, right? So that's going to be really powerful. And there we go. So if I go here, you say it is located right here, which is not good because we want it to fit our page well for that, we can make use of this position absolute property. And then I can set here 0, and let's make it left 0. I think this property is enough for now. If I go here to see that now this property is going to stretch it up. But you can also say it here, bottom a right to be 0, but I think it's totally fine. You don't have to do it right? So now you can see that our model overlay is appearing, but or model look really ugly. So let's go ahead and style our model content. And it's right here. So what I can do, I can go right here. So here we want to make use of that model. And once our model the target, then just go ahead and style our contained. So the very first I want to add here width, let's make it 400 pixels. Also, I want to add some padding. Let's make it two pixels, right? And if I go here and you see that now it is look like let me actually just give it a background. Yes, is going to be background and let's make it white. Save it, go here as a, this is how it's gonna look like. Let me add a border radius and let's make it ten pixel. And if I go here you see this is how it's gonna look like. Now let's go ahead and put it into center. Well for that, we're gonna make use of position to be absolute here. So it's going to be absolute. And let's say here, left and here on I say 50% minus, let's make it 15 RAM. And if I go here to see this is how it look like. It's incentive. But let me just push it a little bit down. So I'm gonna say it had to be 20%. And now if I go here you see this is how it will look like. And now it is in centre, which is, looks really nice. Discern exactly what I'm looking for goat, but let me actually add here shadow. So I'm, I just added a bach shadow. You see this one and this will make it look even nicer. You see will have the shuttle shadow. You not say it right now. But once we change this to be something like a different color, for example, you see this is RGBA. So if I just make it something like a white, for example, you see, let me just do something for you. I'm gonna just make this YK up. Uh, let's see. Yeah. I mean, just go right here and you see that we had the shuttle shadow, which looks really amazing. But again, this is the afterthought. So I mean, I spot it right there. And one more thing I want here is that I just want to not put it in the center. So let me add a text align to the centre. And they will go up. If I go ahead and see that our text and center, which looks really nice to me. Now let's go ahead and style this heading. I'm going to get back into our model. So let's say our target. And then just go ahead and find the content, earnings and contained. Find the heading two. I'm talking about this heading two right here. Say this one. And I'm gonna add some basic stylings, is gonna font size. I want to make it 30 epochs cilia. And then let's make this font weight to be bolder. I want this line height to be around 1.2. And if I go here, you see that now it is little bit big, it, and also the line height is quite good. So that's pretty neat here. Now let me just go right here and see that we have this font control, right? So why don't we just go ahead and grab this form control and let style it. So for that, let me just grab this form control here. And here. Let me actually add a position to be relative. Now let me actually also ideal margin top. Let's make it to Ram. And let me just go right here to see that. Now, this looks pretty good, but let me also add here df display flex mux. So it's going to make it one horizontal row, which obviously I'm not here. And now let's go ahead and style out form input. So for that, let me just grab again foreign control here. Let me just go down right here. And let's place that input. Now here, what am I blue? Just, I'm going to just make a model to be None because I don't want any border around our input. Also, let me just make this border-radius and let's make it 50 pixels. Then I'm going to add this some kind of a box, a shadow. So let's see here box shadow. And I wanna make it four pixel or to be extra four pixel to be, right. And ten pixel is going to be blood. And then I'm going to use this RGB color, which is going to be basically black shadow. So I'll 0.1. Then we go, this is a shared we're looking for. And yeah, this is Adina. Look, it's not that cool yet, but we'll get back to there. Let me actually add here some kind of a padding. Let's make it 15 pixels around the padding. Also, let me save this outline to be null and then width to be a 100%. Save it, go here and you say this is how it's looking. Now let me just make it a little bit of font to be little bit bigger. So he's gonna be font size and let's make it 16 knots, quite big. Now let's go ahead and start styling our button. Well for that, we're gonna go down here and it's a form control. And let's make it dot button here. That's really pretty fast on asset your background, and I'm gonna make use of this primary color. You see right here, yep, this the parameter I'm going to make use of. And then I wanna say this color to be white than on a set her border to be none. Text transform. And I'm gonna make it uppercase here. Then I'ma say this border-radius. And again, I'm going to make the same as this one. So 50 pixel you see right here. Every pixel is gonna be the same. Then I'm going to add some kind of a batting. Let's make it 16 pixel, top and bottom and 20 pixels left or right. And so this is how it's gonna look. Yeah, it's looking good. And also I want to push it back on this input here. Well, for that I'm going to use up position to be absolute here. So position as going to be absolute here. I can say here dot 0 and it's gonna be right 0. So there we go. Now if I go here you see this is house look like and you see it's looking really good. Now let me just do one thing. Let me just make this font size a little bit smaller so I can see your font size. And I'm gonna make it 90%. So it's going a little bit smaller and the same. Yeah, there we go. So if I click Yes, it is outline coming. We don't want that outline so I can set your outline to be none. So there we go. And also let me just say this cause her to be a pointer. So Debbie, go if I go ahead and see that now there's a pointer and it's looking good. There you go. And you say this is an image. Well, let me just do one thing here. Let me just go down right here. Let me just go up here. You see this is a form control before heading two. So I'm going to just use this mortal image. And I will say care max-width. And let's make it 50 pixels. Say we go here and see, now this is a little small. And now this is looking good, isn't it? Now everything is done. Let's go with this close button here, which is going to close our Morrissey, right? Not it's closing. So that's pretty neat here. And you might be wondering how it's actually closing. Well, let me tell you that once I click on this button, it's going to add this info panel in the URL you see. And that's why this model become target and that's why it'll be shown. But once I hit this close button, well, it will remove that info Panel ID from the URL, and that's why this model is not gonna disappear. Let me show you. See, once I click on this link, this link or button here you see it's going to add this info panel in the idea, and that's what exactly we are targeting here. But once I click disclose here, you see it's going to add only this hash shine. And that means that this model is no longer want to be the current target. So that's why it's going to close these modern. Yep, this is a very simple fringe. So again, this is working fine. So let's go ahead and style it and make it look like a Close button in the top right. Well for that, let me just go right here. So now I'm going to grab this guy over here. So since our model is the target, then we can simply just to our close button and then anchor link. You'll see that we have this close button, right? Which is a closed class, and then we have this anchor links. So this is exactly what we're targeting here. Alright? So here what I'm gonna do here is that let's say I wanna see your dispute to be block. And then you see these are actually anchor link. But first, let's time this close as did first of all. So let me just grab this guy over here and let me just place it somewhere and then we'll get back to our anchoring. Right. So let me just do one thing. Let me just set your portion to be absolute here. So it's going to put it in the top right. So and I stayed at top. Let's make it minus one round. You see? I'll put it in the top here. It's, it's right here. And then I also wanted in, right, kinda minus1. And now you see that our close button is right here in the top right. Now let's go ahead and make it like look like a circle button. And that's what we're gonna do right here. So let's say here and I say height, and I'm going to set each year to RAM. And then width is also going to have the same, which is to wrap, which is around 32 pixel. And then I'm gonna sit here text indent and underexposing this takes to be like file further. So it's gonna be to Ram. Then I'm going to sit here overflow to be header. So let's see here, overflow hidden. And then if we go here to see this is actually, you know, you can't see it, but it is still there. I'm visually why this is so important. So I'm going to just use your background. So it's going to background. And here I'm gonna make use a primary color. Let me just grab it to paste it right there. And then here is going to be border radius. And again, I want to look like a subtle right? So it's going to be a 100% and that's actually going to make it look like a soccer scene. There's a cycle. If I get rid of this border-radius here, it's gonna look like it's quieter, so we don't want it right? We want it to look like a circle. And there you go. Now, one more thing I wanted to I just want to give it a border and I want to give it, let's say 0.125. RAM as going to be solid. And then let's make it look like a white here. That's it. And now phi go here to see that now we have this unfinished shuttle border around our tablet. And when I click on it and say, it's still gone and say, yeah, it is a disappearing. And that's good. But what do we know? We will get back to it right here. It will first go ahead and let's create that close button. And also we have a styling left for this one. But we'll tackle that later. First, let me just go the x Eigen. Well for that, we're going to again need these close button. And here I just used the after state here. So we can dynamically put contained after our class and we can simply put this cross. I can, there we go. And then I can set this collective Eve arrived. And then let's sit here position to absolute. And then we have this talk to be, let's sit here. Let's make it left to be pixel. And this is a setting here, basically Michelle, you, you say it's look like right here. So we can basically use these settings to make it like an option. So I just let me just actually put here with to be to ram and height to be tutor. So Debbie, go, save it, go right here. And I said this is how's look like as of right now. So again, we're styling. So let me just add here the line height is going to be to ram. And let's make this text aligned to be incomplete. Center. Say we go right here and you say it is right here. Is it not? It's completely Center board. So is going to be font-weight, bold, save it, go here. See, it's not looking good, limited immediate boulder. So it's going to be even more bullish. And let me set head pointer events to none. So pointer events, and let's make it save it, go here and click heresy that it's disappearing. Answers properly working. Now, it's looking really nice, but you see that this is not looking good. I don't know what we can do here. We can go up on the actual model target content. You see it's right here. And here we can add some padding. You see it is a two pixel padding is likely to RAM. We missed it. They got this a very simple mistake and you say, now it is looking good. And this is how it's gonna look in big devices. But it's not looking good in small devices. If I go to Inspect Element here, and you see this iPhone X, this is how it's gonna look, which is obviously not good. So let's go ahead and make it responsive. Then. For that, let me just go right at the very bottom here. And let me use a media query here. So it's going to be media. And what I want here, I want to set it here if max weight is 600 pixels. So it's basically means if the maximum width of the device is 600 pixel, then go ahead and apply the styling. So what I want here, well first let me just go to content here. So you see this is the content we are looking for. So I'm going to target this guy over here, living just go down right here. Let me just actually make it a little bit low, right? So let me just push it little bit up here. So what I wanna say here, I'm not said here, margin top. And let's make it minus 41st of all. And then I just set it to be 300 pixels. Save it, go here. And you say This is how it is look like. Again, it's not looking that good. So what I can do here, let me just go right here. And I'm gonna say it here, left because you see here we have that property. You see here we have this a left, right. So again, we're going to use the same thing. So let me just grab it and let me just go down right here. Let me just paste it. But this time what I'm gonna do here is that I'm going to make like, you know, in here is going to be 170 pixel. And if I go here you see this is Haas looking. Again, we acted in some mistake here. So let me just do one thing. Let me just decrease it. Let's make it something like up to 70 pixel. And Yup, this is how it's looking. Say, And let me add one thing. You see there's a padding to ram. Here. You see the padding on content is too damn well. We can decrease it in a bit. So let me just go down right here and let me just use padding. Let's make it one round. So it's all devices will have a little padding. And again, if you want to eat now you can actually be expanded. You can see at 300 pixel and say, yep, this is how similar. So there we go. So this is looking good. But let me just go ahead and make this a heading to little bit smaller. So for that, again, let me just grab this guy from there. I'm going to go down right here and here it's going to be H2 heading two. And now it's font size. This time. I just want to make it 25 pixels instead of putting. And there you go. Now this is smaller. And now this looking really good. So that's pretty powerful. Now let me just also walk this particular form control. Well, it's kind of a super-simple. Let me just set here is going to be controlled, right? And let me actually just no Area dot because you're gonna be class. And then here acid reflux. And now what I want this time is that I want this form control to be in color. So this, but what Ann is going to be top and this subscribe button is going to be down. So how will do that, right? So please see, I am using your flexbox. So I can say this fluctuation to be column. Let's say, and I say this input is quite big. We can actually make it look a bit shorter here, so I can just copy this one. I'm going to go down right here. And I'll say input. And let's do something. Let's say her bit to be 90%. If I go here and you see this is how it's actually going to look. Perfect. Now let's go ahead and put that button. We want to put it in the next row. So for that, let me just paste it right here. And unhappiness button here. And here is going to be petition to be related. And then what I can do here, I can set this talk to be 0.5. RAM. And then what I'll do another set distribute to be a 100% because we're setting it to be a 100%. And now you see it's going to push it to the next line, which is very powerful. And then I can set here mb, margin bottom. And let's add some margin-bottom to be one gram here, breathing space at the bottom of this butter. None of it is also adhere box shadow. So I'm, I just paste it right here. There you go. So this is simple box shadow. And there we go. Now this is house look like. So this is how Cinna looking big devices and this is how it is going to look on very small devices. So now it is fully responsive. This is a simple model popup, but what happened if you want screen overlay? Yep, this model in full screen. Well, you can easily do that. Yep. Let me just go right here. And you see that I have this background color to be RGB as well. Because if we just turn this background color to be completely white. And if I go here, you see that now we have it. But again, we have that a shadow, so we can easily remove this box shadow. And that's because of this thing. And if I go and see that now it is gone. And what about this close button? Well, for that I need to get back to right here. And you see there's a close button here. And you see this portion absolute and that top mass one damn, and like minus1 RAM. But let me tell you that if a target disclose From here, you see discloses inside is contained. So basically, it is going to be always relevant to contain or inside the container. You see, that's why it's right here. Even though I have this portion to be absolute top and Aswan Dam and ICT minus1 them. So how can we actually just push it at the very top, right? Well, for that, we need to go right here. And we need to just grab this close button NRI to paste it right here, the above the contained. And now if I go here to see that that's located right here and it's a, it's a half visible. The reason is because I'm using a minus1 RAM. So what we can do, we can sit here positive to RAM or three RAM. It's up to you. Now if I just go right here and you can see there's a close button, you say nothing, you care, and that's gone. So there you go. This is very powerful. And let me tell you that if I just do not click this one, see, it's that transition happening here. You see, well, that's because of this right here. Let me show you. So we will just go up here and it's happening because of this. So I can easily get rid of it if I go here and now if I click here, you see that now we have our full screen overlay or full-screen modal C. So that's very powerful. And now again, it's totally responsive. So this is how soon I'm again, small devices. So there you go. This is incredibly powerful and this is how you can make it as a simple model pop-up or full-scale overlay. So this is it for our model. Now let me show you one more awesome thing. You see this URL, you see that info panel is appended to our URL. So if I copy this URL and I paste it somewhere in that model open, that's because our model is appended in the URL. So that's why this is the target and it will be visible. If I close it, you see that it's actually gone. So it's a very powerful. So if you want to share the open model state of your website where you can simply just copy this URL and let them paste it. There. We'll see these open. That's very powerful. And now one more thing that DES is completely Timmy bill. So if I just go down right am I can easily change its theme. You see that one click, I'm changing its entire team. And again, this image is not going to change because this is raster image and you see that it's incredibly powerful and terrible. So yeah, this is it for this project. If you have any query or simply want to thanks for this lecture, then head over to the forum, right? A command I read and respond to every single of them. Thanks for watching. 8. Luxurious Navbar with Topbar Designing For Large Devices Part 1: And this one we are going to learn that a how to create this amazing, fascinating navigation bar in pure CSS? Yes, in pure CSS without even a single line of JavaScript. So you see that this is how it's going to look in the big devices or large devices like a backstop, you say that is our logo. Then we have this a phone number. Then we have this R link in the right and this call to action button. And then we have this top bar. And when I go in small devices like I bet on mobile, it turned to this bar and I'm gonna click this one, then only appears like you see that we have this navigation bar and I'm gonna click this one. It closes out and a C, this looks really amazing. And again, I'm not using even a single line of task if this is totally in pure CSS. So let me just go ahead and let me show you how it's going to look in iPhone ax. So I have an x and this is how it's going to look. And again, it's totally tenable. Yes, you can. Team ID, for example, if I want to change the color of it, just one click away and see that we have chased the PI and color in just one click. And again, this is the gradient color and also these have fallen, but he is adopting that gradient color. And again, if you don't want to use a gradient color, instead, you want to use that solid color value. Totally welcome. Could do so. I can just click right here and right here. And you see that this is a totally solid color. And say, this also looks really cool. Say, it's pretty neat here. And this is what exactly you are going to learn how to build in this movie. I excited, I bet you do. So let me go to my quota and lemme show you how to build this amazing nearby in pure CSS. So here we go, Amazon reviews go into, and we have this festival file to walkway. And as you know, that our navbar is gonna look completely different in large and small devices. So that's why I have to separate stylesheet for each device is for large devices and for small devices. In large devices, we're going to basically target the desktops. We're going to look like a normal nav bar right here. And you see now this looks like a normal Nirvana. And we're gonna write code for that in large devices, dot CSS, and in small devices or CSS, Veena, right core for iPads and mobile devices, where our nav bar, they're going to look like an overlay. Right here. It's look like overlay. Yeah. This is telling you gonna write on small devices dot CSS. And finally, we have this default or CSS, where we have some default code for a project. And here you see that I'm importing this neutron different from Google font and I'm using right here on our body. And I also have some basic styling for body. And here I am using this custom variable to define the color of our project. So later, if you want to change the color of our project, you can just simply change it to one place and it wasn't going to reflect or other places. Now let me quickly explain you estimate structure of this project. Let me just go right here. And I see that I have this section which have a glass of milk. So basically this section holding our entire menu. And inside this menu we have two parts, the topic and then our mean navigation. And you can see right here, this is our top bar, and then this is our mean navigation. So let's go to the top bar and you see in the top bar, we have this left part. Right part, and in the left part we have this FA analog, which is a font-awesome mail icon. You see I'm importing this Font Awesome right from here, C, D, and G, s. And then there's my email id. And then I have these social Share icon, Facebook, Twitter, and YouTube. And this is the left part is, I have it right here. So there's our EPR, analog harmony melody and then the social icon. And then in right part, I only have these boss, you see right here the bomb. But again, you can just customize it as you wish. But I'm keeping it so simple. So this is our top bought. Next, our main navigational gonna come. And for that, I am using this nav semantic tag because that makes more sense. And now in this main navigation, we also have to part nav left and right. So C in MATLAB, we have our logo and then this phone number where I'm saying call What's up now? And let me show you this. In lab level, we have our logo and then go number and then enact, right. We have our me links to see is the nav right? You see this hour actually mean link Natalie and then our CTE, which is hard to action button, you see lugging. Exactly. So what are these? Well, this is for small devices. You see this a little bit only on a small devices. And this is basically branding. So there's a low and this hour close button. Let me show you just one. If I click him, you see in small devices, there's a logo and then you have this close button. And this is what exactly it is. And then also have these right here. It's gonna be visible only on small devices. So what is it? Well, it is that br yep. I'm making use of this checkbox to detect that if it is checked or not. If it's checked, it clicked. If it is not checked, it is not cleaned. So if this input is checked, then I'm gonna display our overly. If it is not checked, then Venus closing. So that's what exactly I am doing here. And again, you will going to understand every single bit of it once we started working on these separate sections. So yeah, this is the external structure of our project. And again, don't worry, beginner, visit them again one by one. And finally the last one, which is not important. But still I want to show you, you see this section here, which is a hero section. And again, this section has nothing to do with this project. It only here to make it look good and that's it. So here is basically I loved having this heading one, this paragraph MDs call-to-action button which does nothing. And then my image, you see, it's right here. So yeah, this is just a hair to make it more look like a V LOL project, and that's it. So then we go. This is the estuary structure of our project. Now let me show the project preview and see right here. And it looks seriously ugly. And you think that I have this dual away? Well, this is for desktop. Emphasis was small devices and he's also seen that button, this Checkbox. Yeah, that's our menu, but between up here on a small devices, but right now, you're not hiding it in the big devices. So let me just do one thing. And let's first height this menu and this one. Move a low wear for that. Let me just go down right here. And I see that I have this checkbox, right. And as he does have a glass OK. Mobile men. So they both have a glass of mobile menu. So I'm just gonna grab this mobile middle class. And let me hide it. So I'm going to target the small menu. And I also want to hide this branding because we had our logo and close button appears. So let me describe the spreading lemmie just pasted here and say here bn, which is displaying them. Savings, go right here, and z, that's actually gone. So now we'll be left with HTML structure only for large devices. So let's go ahead and start working on our project. So for that, let me just go right here. And let me just close this small devices. Because if we're going to walk on small devices in the next movie, let me go to large devices or CSS. And let me just do one thing first. First of all, limited style, this hue section because that's going to be super easy. So for that, let me just go right into photosynthesis and let me paste this code here. Again, I'm not going to explain it completely because this is not imparting. This is here to only make it look good and that's it. So again, you see that I'm targeting our hero image and this hero section and I'm using this flexbox to make it to column. And then I'm using again flexbox to static properly. And this is a subscriber and button which you see right here is substratum here. I'm just making it look like a button. That's what it is telling does. And this is like, you know, making it look good in small devices and that's it. And let me just go right here and you see that now we do have it. Again, we haven't defined the width of it. You see, this bit is small, but this is quite big. So let me just define it. So let me just go up right here and let me just grab this hero area. So I see here dot hero. And here I'm gonna make use of this maximum property. And AMC is going to be 12 AD. So I'm just basically saying here that go ahead and make it maximum 1280 pixel. And then if you go below 12, Excel and just make it 100%. And let me just said to be no margin 0 as one of the important, not it's going to put incentive. And if I go here that now I have the same width as this one. So that's pretty neat here. And this isn't about this intersection. So now let's go ahead and let's work on this top navbar. And for that, let me just go right here. And let me just go to large devices. And let's start. So first, let me just go to top. Here. I sit as a wrap up top, but let me just grab him, just go right here. And our target discipline. And here I only want one thing. I just want this primary colour here as is going to write here as it background. And here it's going to be variable. And there is our primary color, and that's it. If I go ahead and see that now we have that primary color, which looks really nice. But you see there's our elements. What I want you, I want him everyone in one single row. Right now they are in three row. So how you can put it one row? Well, for that, you see this top bar. So in TopHat, we have two child is this one and this one. So what I can do, I can go right here and a set-top box. And I can say here, discipline. And that's it. If I go here, you see that now we do have these in one row, but this is Social icon is again on the second row. So I need to put that also in single loop. So you see that I'm talking about this icon here. So what I can do here is that I can grab this top left and I can just go not to isis. And I can also say here. Now if I go here and see that now they are one complete loop. So now let me just do one thing. First of all, let me just add that seemed width as this also began to appear right here. So for that, you see there is actually our top, bottom right. Somebody grab it. I'm gonna go to default. You see there's a huge area and pasted and non FastCV Traeger here. You see that now it's, I've seen as this helium. I want this, this hamburger icon to the very right. So what I can do, I can just go to here and here it is going to work. So here I'm gonna say just to find content. And here I'm putting a space between. I can go here to see that now it is right here. But it's not that good. But firstly, you see this is quite big. Let me just make this image to write it out very small. And then we later changed. So I'm going to just say here an image and let's sit here the RET to eat a 100 pixel and we'll change it later. But let's make it smaller. So you can see very clearly, right? So there we go. This is our top bot. And you see it is actually we want some space right here. So let me just do one thing. Let me just quickly hit I care. Any here, let me just add some padding first. So it's going to be padding. That's what gives you the 0.5 grams top and bottom and 1.5 gram. Let them back. And let me just also discovered to be, right. Then I'm asked to do here is font-size. And I want them to get 15 pixels is enough. And then we went to this font-weight to be like a 300 because it's going to be a little bit lighter and they go, This is how it looks. But again, see that if we don't have that space, so we need to put that space. But for that, let me just go right here. And I'm not gonna have this top left from there. And I'm going to go down right here. And here I'm a packet, that email. Let me show you this guy where you see we have this inner yellow sand habitus. And here I'm just gonna say margin-right? And let's make it to Ram. So I won't margin it to them. And I see that now we do. But again, we want that space between icon's. Well, for that, we're going to need the top left-hand top level. And then I'm unpacking this pi. Let me tell you that every single icon you see, they have this tab. So I can easily targeted i. And I can simply say here, margin, right? And let's make it to one wrap. And I'm not gonna say this padding right? Is gonna be also one gram. And if I just go right here, you see this is house look like you see that now would be to have that's cool. But let me just do one thing. Let me add him border to be right. So water, right? I wonder one pixel solid and I want this color, so it's going to be black. So he's gonna be RGBA, that's going to be and it's going to be 0.1. Save it, go right here. And it seemed that we have that mortar, right? But you see that this text Alice icons are not centered vertically. Well for that, I can see here a line. Let's put it in, say, saving a good idea and see did now the on-center. And I've had just, you know, just zoom out. You see these are top body C. And now if you want to just you know, so the costs are to be pointer. Value can go to default CSS here. And I can see here I, and then I say a cluster to be 0.074 right here. And you see that now there's a pointer. So there we go. This is our top bottom. Next, let's go ahead and walk on, on our main navigation. For that. Just go right here. And this is gonna be fun. So here we see that I have this map, right? So let me just grab, you. See that I have this.Net class, right? So I'm targeting that one and I'm just mostly here display flex because I want them in one row. So see that we don't have it, but again, pretty close to have it. So let's do one thing. I'm going to sit here just if I can think, let them get displeased between Again, I want to 11 to be 111 could completely right? And you see that now we have it. We have this light and we have this left. And again, and let me just add that same width. So I'm gonna grab this nav. I'm gonna go right here. And you see that I am adjusted on an urbanistic right here, say, and if I go, if I see that now, we have the same width, which looks very nice. So let me just go on right here, large devices. And here, let me just do one thing. Let me just say a line items and I want them to align vertically incentive and I don't centers. And then I want some padding, Yes, so bad and let's make it 0.8 gram dopant bottom and 1.5 from left to right. If I go ahead, you see that now we have that padding. Cool, and let me just add that shadow here. So that's going to look really nice to see that I have this many, right? So I want to add that shadow on men. So let me just go right here. And let me just use that min and add shadow. Somebody whose these satiate bach shadow savings. If I go here, you see this is, has an illiterate and it really amazing. And let me make sure that background color Opera Mini is completely right. So savings and figure him see that now it is completely right. And this is how it's actually look as of right now. But again, we are going to change. So let me just say go right here and that we have these lab left. So let's start this. Someone grabbed this nav left and I'm going to go down right here and have left. And you see that this is navigational left. And again, I want it in one row. So for that, I can see it a flexbox. Go ahead and see that now the add one row is exactly what I'm looking for. And let me also align them. What again, Center. I can do that. I can say a line items. Let's put it in right here and we have aligned it in completely Center, which is perfect. Now, let me just go right here and let me just grab this nabla. And here I'm a c dot. And what I'm gonna do here is that I wouldn't this border, right? Because you see right here. Let me show you. This is the border, right? We having yep, that's exactly I'm going to add. So what do I wanna say here? One pixel, solid. And then I'm going to have these color, right? Yep, speeded right here is going to be reading and pasted. Say we go right here. And I think that we do have it, but again, we can't see it. So let me just add some margin drag. So for that, I'm going to grab this entire MATLAB. And here it's up logo, I must say it yet. So let's say I have image and lemon sit here margins right to one RAM. So chromosphere margin, right? And it's going to be one of them and see this image is basically our loop. See this image. So via placing their margin died to one room. And I see that now we have that button right there. So that's pretty neat. Yell and again, let me just tell you that's the lowest, quite small. So let me just go ahead and make it a little bit big. So it'll just make this 140 pixels certain quantity, so it is good. You see, now this looks good to me. So let me just go ahead and walk on this phone number. Well, let me just go right here. And again, we are going to need that Knaflic grab this never lived here. And here, I'm gonna just grab this phone number that had this phone number. And this is kind of so here we go. And now again, I want them in one row. So let's say a display flex. And I see that now they are in one room again. But now we can use flexor. I seem to be column to put them into separate row. So I can see that flex direction. That's hard enough. I go in and you see that now the sharing economy, which is going to go ahead and add a margin left. So it's going to be MN. And let's make it a wonder. Save it, go here and see that now we have as modulus. Now let's go ahead and style our text fast. So for that, I'm going to go right here. There's a habit text here. Yep. So we're gonna grab everything from there. You're going to put it in the next line. And then I'll say here dot text. And it's going to be simply say a four size. And I don't have a good calories. And it's one of you that agree color we have used right here. So I'm just grabbing on a patient right here. And then finally, let me just set her font-weight. Yes, metaphor 100, saving core idea and see that now, this is how it's literally go ahead and style our phone number. Well, you see that it's actually half a class number. So again, I'm going to grab everything from there on a product next row here. And here's, it's going to be, and here the font size is going to be 20 pixels. And this color is going to have this primary color. So let me just scroll rabid animal right here and paste it to so blessing right here. And then the font size is going to be the default one. But you see that we do have this color, but again, we want to make it like a gradient color, right? So let me just do one thing. First of all, limits, it's actually make this font weight to be mold. So finally, it is going to be hold. Sacred core idea is that not is quite bold. But now I want to make it look like a gradient text. So it's going to be normal text or it's going to be gradient based on the color. So let me just do one thing. Let me just go right here. And here we're going to do, I say this a background color. And let me just use this primary colon. So background is going to be the primary color. And here I'm just gonna use this webkit. And then it's going to be the background clip. So background Kip and I want to just get me to texture. And then finally am I use, yeah, this webkit has going to be text, color, transparent. 70 go right here. And I see that it's a gradient color. And again. I can just go down retail and I can change the gradient color, for example, I can just choose to be like this one and you see that now it or dots. So that's pretty neat here. Is that now this is our navigation section. Now, let's go ahead and walk on this right section, which looks hot right now. So for that, let me just go right here. And you see that in this nav, right? We have this leveling because this is only for small devices and we are coding for large devices. So let me just grab this navigates from there. I'm alright here and here. And here. I just want them in one row so I can see how this reflects that now, this login and leasing the one room. And again, this is still not perfect. But first, let me just go right here and let me just use this align items to be center, just to make sure that they are vertically center. That's it. Then what did your center now? Now let's go ahead and let me just go right here is in a nav links, we have this links and under are leased. So what are you gonna do? We gonna put them in one row. You see that right now they are in the list, but we can easily put it into one row so that need target, our unordered list. So what I can do here is that I can describe nav link than links and this one. So I can just go copy this one. I'm going to go down right here. And then I'm gonna say here dot length and that unordered list. And now what I want it, I did the same thing. This one, next item center, that idea, we have it. So let me just do one thing. Let me just go down right here. And you see that this list are quite cumbersome together. So let me add some margin right here. So what I can do, I can just grab the same thing. I'm gonna paste it right here. And this time I'm attacking that list item. You see the list here in, in HTML, you see there's a list. So what I do, I have this list here. And here. I'm just gonna do one thing and associated cluster called list-style none. And then let me just sit here, margin, right? There's going to be one of them. Very simple. If I go here, I see that now we have this PR links. Now let me just go right here and we'll just do one thing. You see that these both have the same style. So what I can do, I can simply just copy this guy over here and save my subspace. And I'm gonna just put a comma wasted. Save it. And you see, there's no difference. So that's what you need here. Now let me just go ahead and get into this text decoration. So for that, I'm gonna grab the same thing again. I'm going to paste it right here. And now this dark aren't happy. This anchor legacy that these anchor links, stomatitis anchor link. And then I can set your text. They could actually do. Let say discarded black savings. Go right here and see, now this is how does this look like? Now, this is it for this nav links. Let's go ahead and talk about this call to action button. Well, it's gonna be super simple again. So for that, let me just go to this CTA, right? Yeah. So let me just go here. And I don't have a jacket this lab links I can do if I want just an omegas specific. Yeah. And then here I just need to add that box shadow. The same box shadow. I have placed it. Right here is the VOC shadow and just copied it. And let me just paste a semi criteria as E that now we have this bach shadow, but I get him to style it. So let me just grab this style again. Paste it right here. And this time protagonist anchor link because we have this and can link, you see right here. So we want to turn into buttons. So for that goal right here, get rid off this guy from there. Let me just set the text decoration to be, and then let me just add some padding. And I want you to 0.5 gram from top and bottom and two on the left and right. And for background as a primary color. So I'm gonna grab this primary color from there. I want to go right here and here. It's kind of your variable. And based on that, so this is a primary colour. Next, I just want to say there's got to be, right. And then finally, let me just add some simple border radius. That's going to be two pixel. That's it. Well, right here, and I see that now we have this awesome call-to-action button. And let me tell you that this sort exactly we have designed right now. You see, if I just comment it out now, secondary blue. See, this looks really cool. So yeah, this is our mean styling. It's working really great. So yeah, there we go. So this is the styling for our desktop devices. Now again, it's not responsive yet because we haven't styled yet for small devices are for mobile and I, that's, so that's what we're gonna do in the next movie. So see you there. 9. Luxurious Navbar with Topbar Designing For Small Devices Part 2: So this is where we left in the last movie. Yeah, we have designed our navigation for large devices. And in this movie, we're going to make it response you and make it look like a Overlay navigation in small devices. Well, for that, let me go to here and I say this is small devices or CSS. So let's go ahead and write styling for our small devices. Well, for that, I want to make use of this media. And then I'll say it here is if the maximum width of the report is 996 pixel, go ahead and apply this styling stamped with hiding this enough and his phone number in small devices. I want to go right on this estimate. And let me just go up here and see this is actually top right. We're gonna grab it from there and we just put it right here. And then comma and then I'm also want to hide this phone number stuff, right? So it is right here. So full number. So let me just go right here and see a phone number. And then I can say a DMP display, none. Go ahead and see that if I go small, this is gone, but I say this is not gone. Why is because we haven't been specific enough. So for that, what we can do, we can go right here and I can target this nav Laughter. So I need to be little bit more specific so I can say, and I've left. And then here, I can save it. If I go here and say that's actually now gone. Now you see this border, right? Well, we also need to hide it. So for that, let me just good law devices and let me just find out that logo part you see, it's right here. So let me just grab this local part. Let me just go right here and I'll paste it right here. And so the water light, well, what I can do, I can see here border. And I just say, if I go here, you see that now that what is also one. So now we're making good progress. Next up, I want to show that hamburger icon right here. So how can do that? Well, let me just go right on large devices here, I will let me go to default CSS, and here I have that starting right here, see the mobile manner. So what I can do, I can grab the same thing from there. And I'm gonna go right here and here. And just to see here, let me just go and display them. And instead I say here display to be inlet. And let me just say her cut up to be pointer, right? Saying go right here. And I see that now we have that was button, this logo and also this checkbox. Very cool. So there we go. Now we are making some progress. So let me just go down right here and here. Let me just get into this checkbox. So for that, I can go here. And you see that I have this checkbox. What I can do, I can go to small devices here. And like I said here, input and let's set your diaper and let's make it checkbox. So now if you find that check box, go ahead and get it of it so I can see it. Is there to be none. All I can just simply grab this guy from their element is up here, incidence display none. Yep, I can just say display none. And now I can get rid of it. And here you see that checkbox is gone, but still that man who's there. And let me tell you that you see that this label and this input is connected via this ID check box. You see. So that's why if I click on this level. We're going to get activated too. So this label is actually happy spot. So even though that checkbox is not visible, this bar is visible. So and I kick this one, it will going to check and uncheck. So that's one little trick. So now let me just go ahead and make these bar little bit big. So for that, I can just grab this FAB Garcia and we'll just go small devices and I'll say FFS and let's say the font size. And I want to make it 1.8 RAM, which is quite vague, right? If I go here and see that now it's actually big, which is really nice. Now let's go ahead and let me just do something with the Snapdeal X. Well, for that, I'm gonna go down here and I say a nav. It's going to be length. And here, let me just give it a background of complete white. And then I'm going to give you a bit of a 100% because I want this bit to be a 100%. And also the height is going to be a 100%. And then what I, you know, I, let me just add here zed index. And what I'll do here is that I want to hide it initially. So I just want to say minus to proline not visible element. Just do one thing. Let me just use this position to be absolute here. And then here what I am do that under just sit here top. And let's push it down because I want that slide up. So let's say a 100%. And then I want this to be 0. So I wanted to stretch it right? And you see that this is house look like. So what I've done here is that if I sit this nav list to push into the Absolute, you see, this is the nav list, right? And I sit this narrowing portion to be absolute. So now they are removed from the dom and the rest atop a 100%. Which means if I just scroll here to see that now it is right here. So Tom a 100% is going to push it to the down. And then when I kick this one, I can say 0 and was able to gradually slideUp gap. That's, doesn't it recap, say finds a state here at minus 100%. What's gonna do? Sort of push it up, but you can't see it. You see that now that's gone. So basically that if I set a 100%, it's actually would push it down. And you can see it right here, right? So you will understand it faster. Just just listen to what I'm saying. Yeah. So there we go. The lab isn't present. Now what I want here is that let me just do one thing. Let me just go down credit, right? So let me just dial them perfectly. So what I can do here, I can say here df display flex, or I can set a flex direction column, right? Save it, go right here and now see that now they are in column C. Again, I am telling this dismay anywhere, right? Is that now let me show you an antagonist nav links here, and you see this in lab links. We have two section, the branding links and the City. And now you see that they are three in column, three column. So this is the branding, this is the map links, and this is the city. And because of this display flex column there in column. Great. So now obviously I want to align the center and I'll justify contents center. And this is going to center them. What Lee Center is a center right here. So let me just say we think we see that now. It's there. Why is that? Because you see this reflected from this column. So that's why this justified contained is now going to walk on y-axis. Yep. Let me just add them align item to be center to center them horizontally centered. And you see, yeah, this is how it's gonna let. Now let me just go ahead. Limit style that checked part. What isn't whether Let me show you, if I click on criteria, it should appear from the top. Yep. So for that, what I can do, I can go down right here. And I guess simply target our checkbox. So I'm a, say a input. And let's set your time to be checkbox, right? Because we only have one checkbox. And then if it is checked, so I'm using this check pseudo selector. And then if it checked, then go ahead and use this sibling selector and do something with its sibling. So which sibling you want to do when again, this nav links P1P2 show, and you see this is the sibling of this checkbox. Yep, this checkbox is a sibling of NAB links. So what this is checked, we can just easily target this nav link here. Yeah, so I can go right here and I can say here, go ahead and I get this nav link, right? And then do something with it. What do you want to do? Well, you see there's a spelling mistake edited. So let me just go ahead. Yeah. Well, I want this top to be 0. And because we already heavier petition to be absolute, we have axis of this property. So I can set up 0. And also said to be, see you save it, go right here. And if I click here, it should appear when c is appearing. But let me just add here has set index to be, you know, big sausage it index. And let's make it 99 and citizen minus 99. So I'm just putting it to the very top. If I go here, is it's right here. And why is this? Well, because it's checked. So now if I click here, you see it's appearing. If I click this icon, it disappeared is because this state is also linked to our days checkbox. Yep. Let me show you. If I go here and see this checkbox, right? And it is linked via this ID to this label. Rarely you see that I've done the same thing. It's the same limit and a C labor for checkbox. So this level is also linked to the same Checkbox. Yeah, so this level and this level are exactly the same because they have same for checkbox and they had modelling to this one. So this is going to be visible once our menu overlay is not appear. And this is going to be visible once our overlay will appear. So that's why, because they are both link, they will topple this check box and this is how it's going to work. You see, it's a pretty clever technique. So now if it is appearing and if I click it, it's disappeared. So now again, we need to style these services. Very honorable doing. So let's go ahead and start it. So let me just go right here and let me just go through the small doses. First of all, let me just go down and we'll get back to it later, right, because we have some styling lat. But we'll get back to that first. Let me just go ahead and style the sky here because this really looks ugly to me. So our target is nav links. So you know, I've been nav links and then our target is and then unordered list. Let me show you what I mean here. So tightly with this, to see nav links. Then we have this link and we're targeting this unordered list. And you know what I'm undo here, right? Yes, I'm gonna make his up flexbox instead of flux. And then I was a sector flex direction to be columns backed off. And let's make it a column. Say we'd go right here and see that now they're in column. Just brilliant. Yeah, let me also get rid of this padding. We have this preparing to be a good idea as a padding is totally removed. Now let me just put it in the center. So let me set your text aligned to be complete center just to make sure that everything is incomplete. Center. So there we go. Text-align center. Perfect. Now let me just increase its size. So for that, I can just go right here. And let me just grab again this enough styling. Go down right here. And let me say yes, list, right? And here I'm just gonna say a farm size. And I want them to get to 1.5, which is big, right? Save it, go right here and see they've now they're big. And let me add some space between these links. So it's going to be a margin bottom. And I just want to put it here to wrap civic good idea and see that now we have the same magic. This is pretty neat here. And also I want to make the city wanted to be bigger. So for that, I can go up right here, allows devices. And you see the call to action is the vary by discipline, right? So I need to be, you know, grab the sky from there. And I'm going to go right here. And then I'll do at the very town and paste it. And then I can simply say, or font size less than 2.31. Say we'd go right here and see that now this is Little Big, which looks really nice to me. So yep, this looks really amazing. And also what about this priming? Yep, we need to make it look like a really good because we want them to appear at the very top. So let me just do one thing. Let me just go to Inspect Element and is now this is how it's going to look in mobile devices where I can explicitly. So now we can put it logo at, at the very left and disclose icon to the very rank. Well, for that, let me just go right here. And here. You see that I have this branding right here. So let me just talk. It is branding. Yeah. So here we go. Dot-dot-dot branding. And the linear density equation to be absolute. Because then we can set it NC. Now, they're absolutely. Yeah, again, it's very simple. I can say at top Ellis meter 1.2 RAM. So 1.2 ramp, save it right here and see that now it is at the very top. So stay nice. Now let me just again, I just want to put them in one room so it's going to be DFT is reflux, then one row right now. So that's presented here. Again, I want the space between. So just if I continue, let's make a space between. Let me just good idea is to say align items to be sent, uh, first of all. So I want to just send to that light what ugly. And let me just add this bit to me. It is 7%. So we'd go right here. And now I see that you haven't because of this weight, right? So then you go, they are in the right place and yet some padding. So I'll say you're heading, let me just say 1.2 ramp. And it's gonna be one RAM from the electrolyte and say, yep, this is how it look like. But again, you see disclose I can it's quite small, so I want to make it look like a big so I can see him fn times. What is this c that I have this F attacks. So that's why I'm just no gravity. And here I'm just gonna use font-size to be to them, which is quite big. But I think that's going to be crazy. There you go. Perfect. And let me just do one thing. Let me add this color TV, remedy color. So there we go. There's our primary color. And if I go here to see that now, it is in blue. That's pretty neat here. But again, this is not what you probably see. It is a scrollable. This is not good. You say, oh my God, there's a problem you see, when I just, you know, just open it, it will look really nice. But when I close it, you see it go down, which is not good. And also we don't have that transition. So what I can do here is that let me just go right here, okay? And here we need to do something. So here let me add that smooth transition and it's gonna be bald. And let's make it 0.32, and let's make it easier. Save it, go right here and you see if I click here, it's appearing, see smooth transition. Very good. But when I close it, it instantly disappear. We don't want it, we want to slide it back. So for that, I can just core idea. I'm not going to have the same thing. And I'm going to just copy and paste it right here on the main level. You see. So now it's gonna happen. It's gonna smoothly tension as 0.3 seconds and smoothly go out. If I go here, look here, C, So they are bidding and smoothly going. It just really looks nice. But again, the problem here is that it's appearing right here at the bottom, which is not good. Well, let me tell you something. You see only this portion to be absolute right here. Yeah, that's a problem here. We can use absolute, but we can also use your fixed. Yup, I can just see here fixed. And now what can happen is that it is going to be fixed up at the same place. It's an assay that now it is not squirrely. But if you click here, it's appearing and I get hit is disappearing again, sliding down. But there's no lepton bottom. So now, instead of using that volition to be absolute, just use position fixed. Very cool. And again, you want that an emission from the top. Just add here minus a 100%. Save it, go right here and see it not an up here from the top you see Perfect. Again if you want from left and right. Well, you can do that. We can say here something like a laptop, let's make a 100%. If I go here, is in that now it is appearing from the left. And now again it's happening from the right. But now I can say a minus and that's shown up here from the left. So this is insanely cool. And again, I like that dot and emission, so I'm gonna keep it that one, MR, Keep this electron. And if I go here, you see that now again, we have our animation from the top bar c. So now are mentally vision is completely working. That's pretty neat here. But there's one thing you see, this top bar is not working properly. So let's fix it. It's actually super simple. It's that hard. So let me just go up here and see there's a top left email. Let me just grab it. And there's a two RAM margined items. So let me just go down right here and paste it right here. It's gonna be one of them is going to be like numbers to make it small here. There you go. So now we have one round. Now let me just go right here. And you see that on large devices, as said, this top left multiply out to be one lemon paradigm to be 1M. Lemons, go grab it and let's make it smaller. So I'ma sit here. Let me just get rid of this border right, and align self. We don't want it. But I just would simply say 0.5. them. They spanning right? And also this margin, IT is going to be 0.5 semi Good idea and see that not they are in one row, which is pretty neat here. So yeah, there you go. If I click here, now I see our manual is working properly. Now let's go ahead and test it. So I'm just going to go to iPad. So let's go to I've had here. And he said, I bet it's look like this. Okay. As amazing. And yak goes, this is housing are looking at small devices. It's pretty clear. And it took almost an entire day to just think how to create this effect without JavaScript. And you see, this is how you do it. It's really clever. And you know, what is the best part is that when you just go inspect element here, you can just change the color of it. Yeah, it's super easy. I can just go right here and see that. I can if I want this cup is a discolored. Yep. It's just one click away. Say thicker and see. Now it is really a completely different. And even though if I go right here, you see that now it had that amazing color. So it's completely permeable. So I hope you learn a lot from this movie. So if you have any query or simply want to thank for this lecture, head over to the forum and come in there and eat and respond to it. And as always, thanks for watching. 10. Halloween Navbar Sidebar And Bottombar: Welcome to this project where they went to learn that how to create this amazing smooth nav bar sidebar and in small devices. Bottom bar, in pure CSS? Yes, in pure CSS. So this is our simple project. And once I hovered over on this side, BATNA BC, that is smoothly going to appear. And then once I'm hovered over on this individual link, you see that now we are getting this a darker background and also this icon retaining its original color. See, now it's a little bit gray, but when the hardest one, I see that now it's retaining its original color, which is very powerful. And also I'll show you the trick that how can push last link at the very bottom and say, it's pretty neat here and say, we are having this a smooth transition on this low YZ is looking really good. And again, this is totally response to you. So if you want it smaller devices, yep, this is how it is going to look or let me just create a iPhone simulation. So Inspect Element and see this is how it's going to look in this iPhone exit device is if it's really amazing and powerful. So yeah, this is what exactly you're going to learn that how to build in this project. I excited, I bet you do. So let me go to my code editor and let's get started with this project. So here we go among reviews, could iter and we had this estimate file to walk with. Well, there's another phylum. Agnosia says, Where are we going to write our main CSS code? And finally, we have this default OCS is where the analyte default code for a project. So let me quickly show you the HTML structure of this project. So here I'm using this a nav tag, which have a class of nav bar. That means that this nav section is holding our entire navigation for this project, which is a good thing. So here you see that I'm using this unordered list, whichever class often navbar nav. And inside this we have propelled six navigation link, including this logo. So see this first one is a logo, and rest of them are Navigation link and the v total have six. So this logo is the fast, then second, third, fourth, fifth, sixth. So here you see that inside this individual navigation link, you see I'm using this list tag, which are a class of logo and rest of the list have a class often have items, you say nav items, because logo is going to be a little bit different. And the reason I placed here logo is because logo is going to have a same abominable as this navigation links. So apart from this class logo, everything is same for every single navigation link. For example, you see that I mentioned this anchor link, whichever class often dabbling and see every single of them have a class of nav link. And you see that inside this anchor link, we will have the link text and linked image. And you see right here image, link text, link image, link text, and everything is same. So yeah, this is our navigation. And then finally we have this a main tag where we have some default paragraph n heading one tag, heading one is a happy hollow in CSS Friday. And then we have some paragraph regarding hollering. And here's the preview of a project. And you see, this looks really ugly because we haven't retained even a single line of code yet. So now let me just go right here and let's get started. So the very first what I want here is that I want to reduce the size of these images because these are really big, a really ugly. So you see that here, we have that to restructured. You see this, the image. So let me just grab it and for now, just, I'm gonna use this image tag. And let's just make it to be something like a two RAM. Save it. Go ahead and say, this is how it's looking. Not so good, but now you'll see entire project related. Okay, so now I'm gonna just go right here and this is it for now because we obviously gonna later styling. So let me create some custom variables. So I'm gonna make use of this root and on a pasted and you see that I have this full custom variable, this background dark background Docker takes light and texts lighter. So this a background talk and text light is basically going to use for the default mode. And this darker and lighter is going to use for our mood or how a state. And then here let me add some default stuff for our body tag. So I wanna say to imagine 0 and is going to be padding, seeing this font family to be a real. So it's gonna be Sans Serif font. And there you go. So this is it for body now. Now let me go to a dot CSS and let's start working on our nav bar. So I'm gonna go grab it. I'm gonna go right here and paste it. And now I want this nav bar to be fixed. Somebody use this position and I make sure these are fixed here. Also, I need a background. And for background, I'm going to need this a BEG dark because this is gonna be the default background. So VAB is going to be background Doc, save it, go ahead and see that now we have it. Now let me just make it little bit wider. So I must say here width and let's make it a RAM. And you see that it's not sticking to top. So let me just set here top to be 0 because I've used a portion fixed, so I have excess of this property. Yeah. Go here and there you go. But let me just make it, you know, the height to be 100% of the view port height is going to be height, 100% would be port height. And if I go here to see that now, there you go, it's not looking good. So now I want this text to belittle pushed it to the right for that you see that I'm using here eight RAM await. So we need to push it a to ram. So let me just go right here and you see that I have this main tag, right? So what I do, I can go right here and just after this body and I just use this main tag and let's say or ML and is going to be eight ram. And the reason is because we are using here eight RAM. Well, I can just see hit 8.5 RAM. And let me also add padding one gram, right? So we'll have some kind of a batting which looks really good. Dildo, perfect. So let me just go right here. And now I'm going to add our CSS and let's grab this navbar nav. I'm going to go right here and I'm just gonna paste it. And here I am again going to just say this margin to 0 and padding 0. That's very important. Let me just go right here and you see that it's visited properly or not. I'm going to make use of flexbox sinusitis reflux if I save it, you see that now it's going to be in one row. We don't want it. So I'm gonna go right here and I say this flex direction to be column. And let me also just say this align items to be center, right? Save it, go here, and then go. Now we have these effect. Now let me just go ahead and make this height to be 101% more time. So that's what you'd want to percent V boat hide. They'll go Now I want to remove these dots here for that. I can just go up here. I can say at least time. So let's make it none. Save it, go. Yeah, and that's actually gone. Now, I won't this very last nibbling to appear at the very bottom. Super-easy, let me just go right here. Let me just go right here. And I say this is going to be our last item. So you see this going to be nav item, I'm gonna just grab it and there's gonna be last child. So let me just go right here and just say item dot is going to be last chart. And what I want a drawstring, well, I say have empty talk. Let's make it auto. The reason it's so simple, it's because I'm using your flax. It's going to just push it very bottom. The last child, NSA, it's right here. So say it's super powerful, and this is a one neat trick. And while we're here, let's make sure that our every link have a 100% of the viewport width. So it's very powerful. So let me just go ahead and grab this nav item. Let me just go up here. And here. I just want to make sure that width is 100%. That's, and now let's go ahead and start styling our individual links, right? So let me just go back here and see these are the links. So let me just go right here and I see that they have a class of nav link. So I'm gonna go right here and I'm saying lab link here. And then I want this image and text to be exactly centered horizontally. And then for that, I can say here flexbox, and then I can say I align, it tends to be centered and it's gonna put them horizontally center. You see, it's right here where the powerful and I don't want this text decoration, so I can see here text decoration to be none. And then what I want here is that I also want that color text to be completely white. For example, this guy over here is text lights, so I'm gonna just grab it. I'm going to go right here. And I'm just going to say here, color to be. And let's make it well. And here up where pasted, save it, go ahead and see that now we have it. That's perfect, but we want some space between these nav links. Well, super-easy. I can just see here height and I can just say head of 4.5 ramp, save it. Go ahead and see that now we have that height. Now let's go ahead and build a habit state. So for that, it's actually gonna be super easy. That's grabbed every single thing, they paste it here. And what I want here is that I want to get rid of this thing first of all, and also this thing. I only need this color and the background. So the background is going to be different. So let me just go right here. And first of all, I want this background to be Dhaka. Somehow there's gravity. I'm gonna sit here val as going to be wagon onto me Dhaka. And this text is light, I wanted lighter. And also you see that it's going to be on how civic. Go ahead. And now if I hold this one, you see that now we have that awesome effect. So now let's go ahead and hide the subtext here. So it's gonna be linked text. You see right here on our graph is gonna go down right here, is going to be link text. And let's say her display to be null. But let me just go ahead and commit it for now. Because first of all, let me just add margin left here, so we'll have some space between these icon and text. So that's very important. So I say yes, I am. Let's make it one RAM. Go ahead, save it and say that now we have this awesome space. And I say this not looking good. Now let me go ahead and just uncommitted. And now that is gone. Perfect. So now let me just do one thing. Let me just go up here. And because we only want to display that takes on how let me just make this a bit dreamt to be five rem and there we go, perfect. And because we have this phi from, let me just go right here and also just in disulfiram. So now let's go ahead and style our images and make it in center. Well that's going to be super easy. So we're gonna go right here. And you'll see that our image is located inside is nav link. And I see there's an image. So I'm at this guy right here at nav link. And I'm going to start with this image right here. And now here I want this bit to be true RAM exactly to ram. So let me just go ahead and get rid of this one. Let's go ahead and add some margin. So it's going to be a ramp for top and bottom and 11AM to the left. And I go ahead and there we go. We had and don't worry about this logo builds, tie it later. So now this is looking good, but you see that these links are very colorful. So what I'll do here on default, I'll just reduce the color to be gray scale. And when somebody who hover on any link that it is going to retain its original color. So for that, we can make use of filter property. You have filter and then I can make use of this grayscale. And here I'll set this point 0.7. which means that if I go here and say this is how it's looking. Now when I hover this one, you will not see any changes because we haven't styled how our state yet. But this is house looking and I think it's looking really good. So let me just do one thing. Let me just go right here and let's tie it to how a state. So here I'll just paste it and then I say on how, right on hello. And then I can do something, for example, I can make it this to be 0. I'll get rid of it. So now if I hover over the image, you see that now it's going to retain its original colors. This is really good, but again, this is not what we are looking for. We want to show the original curve of the image once we hover over on entire navigation link. And in this case, you see that when I hover this right here, it's not showing up. The reason is because it's only going to show once I hovered over the actual image. So that is not what I want here, what I want to link or how long. So once when I hovered over in the entire link, then it is going to show up. So let me just say here, Navigation link on hover, then just style this applying on image. And now we just go here and see that now it's retaining its original color once I hold over on that navigation link entirely. So that's pretty powerful. Now again, we want to just increase this weight and we want to show that text. Well, that's gonna be super awesome and fun projects. So for that, let me just go grab this guy over here. And I'll just paste it right here. And I'll say you're never on a hover. And then I can, I can see here that width is going to be 15 or 16 RAM. So now if I go here and see that how this one, I see that now it is indeed increasing its rate. I mean, it's not smooth, but we'll get back to it later. First of all, let me just go down right on the link texture you see right here. So now what I want here is that once I hover over on this entire navbar, then the link is going to appear, well, that's very powerful. So here what I can do, I can say here this nav bar and then on Howard. So what I want on Hubble, well, it's very easy. I want this link text right here, and then I want this a display to be inline. So let's say a display and I might just make it inland. So it Goya. And sort of how does one say that? Now you can see that texture. So that's perfect, but you see that it's getting very faster. So what I can do here, I can just go to this main nav bar and again areas some transition. Yep, I can see as 0.22. And let's make it easier. If I go here, you see that now, how does one say now it's super smooth and it's very powerful to see that now it's working. Say, now let's go ahead and walk on this logo itself. So for level, I think I can just go right here and this is going to be a great place. Tyler logo. So I'm gonna just grab this little clause here. And you see that we're actually using this little glass right here. I want this a font-weight to be bold. And then I went this text transform to be uppercase, right? That's very important if you're going to see that now we have it right. Now, let me just add your font size here. And I just want to make it, let's say 1.2 Ram. I also want this letter spacing. Let's make it a four pixel and also make sure that it is 100%. That's important. Go here, and I see that now we have this amazing logo. That's nice. But what I want here is that they'd want this darker color by default. So this is going to be like, you know, pop out. So I'll say background and this is going to be Dhaka. So unless you use this variable, here is going to be BG Dhaka. Go ahead and see this is how it's looking. It's dark. And also, I wanted this color to be lighter. So color, and again, I'm, I use this variable and it's going to be text lighter. Now what I want here that once somebody hovered over on this navbar, then this Halloween pumpkin icon should rotate 90 degree. So for that, let me just go right here. And here. I'm just going to just say our navbar. And then when somebody hovered over on this lab, but then go ahead and grab this lower-class and find out the image and do something with it. What I want to transform property, and then it's going to rotate. And for a date, I just want to read to minus 90 degree. Go ahead and see that once I have this messy this gonna rotate it. Nasa really sick. It's rating, but again, it's not smooth. But for that, what I can do, I can go grab this guy over here. And I'm just gonna say Transition to be, let's say 1 second. So one sec, let's make it easy again. And I see that it's going to be smooth, DC, very small, sick. So there we go. This is our main menu. But again, if you need to make it responsive, so if I just go right here, it should go at the bottom bar and again on bottom, what I want to hide this guy, well, we'll get back to it later. But first, let's go ahead and let's make it responsive. Well, for that, we need to do some changes right here. What are those? So let me just go down here and we'll just mix here Media. And what I'll see here, I'm a see the minimum width. And let's target 992 pixel. So now I have two pixel is the tablet. And then here we need to just tie for the large desktop because this is the tiling for large devices, right? So first, we just want to style it because we already have here. But again, we need to modify some property which is exclusive to large devices and also exclusive to small devices. So that's why we need some modification right here. And it will start with this Napa. So let me just go ahead and grab this nav bar. You see there's a big fire em Topsy and height, a 100% report height. When we need it, right, we just need to grab everything from there. Let me just go ahead and paste it right there. So this is fine. Now let me just go ahead and grab this guy up from there. Because again, we're only going to need this property on Dec stopped. And then we link text here, like this guy via yep, I'm I grab it because we only are needed on deck stops. So that's why I just place it right here and there you go. Yup, anonymous. Tell you one thing that once I heard us wanna see that takes his instantly appearing, well you want this takes to appear like an transition, valid Nadia transition if you wish. You can say something like transition. And let's make it 0.22 and let's make it easy again, or is in, out, obviously it's goods. Go ahead and just use any different timing function you wish. But I think this looks pretty neat. Here. Is super smooth, perfect. Love it. Yep, this is the extraction for large devices. Now let me just go ahead and grab it. I'm going to just use it for small devices. That's going to be a very powerful. And here is going to be add media. And here we're going to be, so this is going to be max the wit, and this guy is going to be mobile and tablet devices. So here let me just go up here and let me grab this guy. I'm going to just go down here and paste it. And now here what I want, the width, I want to be 100% of the v_ board. With, yup, obviously, we want it to be 1% and then height is going to be five limb. This is gonna be on bottom enough ago here you see that now we have this five Frahm and also the bit is now a 100% that is very perfect. But again, we can't see these icons here. And the reason is because you see on navbar-nav, I said this flight destined to be column and, and we need it now in row. So for that, I'm the spaceship right here, and I say here, flux direction. And let's make it grow, save it, go ahead and see that now they are in row, say it's working properly. And again, you see that not incentive. So let's put it in center for that. Let me just go up here and let me grab this nav link. So it's going to be nav link. And here I'm just gonna say justify contained to a center, justify continued. Let's put it in center. And if you're going to see that now they are in now compete center. Perfect. You see, and again, you see there's actually a margin on the main contains so we can remove it. So because see here mean. And you say that I said this margin to be right here, five RMB. I can just say ML, margin left to B and C you Ram. Go ahead and see that now we have it. So C, Then we go, this is our final product. And again, if you want to hide this very last item, super-easy, I can go up here and I can just say, let me just show you. So see this is like how this nav item, right? So every single of them have an item class is a disc area. What I can do, I can say head.next item, which is the last chai. And I can say you're desperate to be none. Save it, go ahead and see that that is gone. But we have our logo, which is very perfect. And there you go. This is how it's gonna look in small devices. So let us go to Inspect Element. And if I go I can X, this is Asana looking iPhone acts, which looks really creating it here. And you can click anybody wish, that's going to be super awesome. And again, if you also want to style that a scrollbar to match this thing while super-resolution Shewhart, Stan Well, let me just go on default assesses and super-easy. Yep, I can make use of these pseudo selector which is column and then Das Webb, good test scrollbar. And then here I can set the width of the scroll bar. For example, I can sit at 20 pixel. If I go here to see that now it is going to do 20 pixels. But again, you can't see because we need that track styling. So I can just go down here. I can just see here track. And let's make it something like a bid 20 pixel. But let's make discarded with something like a Full Black Boyer. And you see that now it's actually, you know, you can't see, let me just secondary red here. And this is causing a ligand is a 20 pixel is quite big. So you can just make this like maybe five pixel. And let me get rid of this a bit from there because we don't need it. I just want to show you right now this is quite a pain. And I think that's cool, right? We'll change it, but let's keep it black for now because we can change it on Tom. Yep, another pseudo-class selector. So here is gonna be the town, right? And that's gonna be the town. Let me show you what I mean here. I'm just going to paste this color right here, saving Tennessee. Yep, this is gonna look, you see this? Yep. Let me actually just make this border radius to be something like a 5X. And so already is, let's make it five pixels. Say we'd go here and say, yep, this is us looking. So this is a very thin actually. But again, let me just make this 50 pixel and this pixel. And you'll see it right, save it, go ahead and see this is quite big. Yeah. So again, I'm married quite thin, so it's going to match our team. Go ahead and see now it is perfectly matching. So there you go. This is our smoother navbar sidebar and bottom bar. So again, C on small devices dissolves in a look, which looks really nice. And again, let me just go inspect element. Let me go to this icon acts and yeah, this is all going to look. So there we go. This is our final project. If you have any query or simply want to tax for this project, go ahead and write your comment on the forum. I'm gonna read it and reply to you. Thanks for watching. 11. Beautiful Tabs in Pure CSS: This movie, you're going to learn how to create this amazing, fascinating tabs in your CSS. Yes, in your CSS. And you see it's looking really nice and beautiful. And also it's fully responsive. Yep. So if I go to, in smart devices, for example, if I go to iPhone X is say, this is how it's gonna look in iPhone Acts. Say, it's very cool. And if I go right here, you see that now it's actually going to take full-width in small devices. It, in small devices, these tabs is filling to take in full space. And if I go back, is a real sticking at the beginning. And also they are totally tangible. Yup, you can change its team super easily. So for example, if you want like this one, so let's say I want this red. I want this to be like this. You see that I've done it in just a couple clicks. See incredibly powerful. And again, if in case if you don't want to use gradient, go ahead and use any solid colored us, for example, I want to use this screen. Well, that's looking nice to him. And there we go. Tangent, right? So yeah, this is what exactly you are going to learn how to build in this movie. I already let me go to my co-editor. Let's get started. So here we go, and we'll maybe escalator and we have this festival file to work with. Well, there's another file in ab.js IS very relate our mean CSS code. And finally, we have this default CSS where we have some default code for our project. And it's a, it's a very simple CSS. So here you see that I am using this custom variable to define our Tab Color. So later, if you want to switch the color of our tab, Well, it's gonna be super easy to do that. And then I'm using here this border-box, some basic CSS for our body tag, and that's it for this default CSS. So now let me quickly explain the HTML structure of this project. So here you see that I have this wrapper and inside this wrapper we have our taps and INSEAD is taps, our, all the tabs lives. See as of right now we have three tabs. So say this is the first app, second and torta. Now let me just go to the first tab and you say that, that the staff have this article tag, whichever class of tab. So I think it's an article tag makes sense to use here for the tab. So that's why I use it right here. Now inside this tab, we have this input type radio, and I'm using this radio input type it because one time you can only select one radio, means only the one radio will be checked at a time. So see that I am using this radio button right here now and see that I give it a name of scissors tab. And again, this is for the same reason because at a single time the radio button will be checked. Now its idea of tab one, you see this idea of a tab2 and tab three, and this id is connected to this label is the ID for tab1. So say it's for tab1. If adapt to say Sandy for type two. So now this ID is making a connection to this label. So once I click on this level, basically this input radio will get selected. So that's pretty neat here. And then I was in this class to be tabbed switch. So we can easily height this input tag because we're not going to need it. And you're gonna make ISAF label to interact with our tab. And again, you'll understand it better once we start working on it. Says if right now you see that this first input is checked. But the second one is not. So this first tab will be active by default. Next we have this tab content and insert a set grenade. We have our text and this text, I actually took it from filler drama, which is a dummy site, which is better than lorem ipsum. So that's why AES used a tail and yep, this is your tab estimates structure, super simple. So now let me show you the preview of a project and you say, it's right here. So we have three tabs. So this is a first, second, third TDAP. When I clicking on this label, you see this lady but didn't get selected. And that's the reason is because of, you see, the syllable is connected via this.tab one right here, 90. Yep. So now this is very powerful. Now let me just go ahead and let's start working on our project. So let me go to app.js and let's start with our wrap up. So I'm going to scrap our wrapper. You see, it's right here, wrap-up, right? And what I want here is that I want to give it a width. So let's give it a max v tough around 50 RAM. And then let me actually, this is going to be a 100%. So the maximum is going to be 50 them. But if he goes smaller, well, it will take the 100% of the weight. And also I just want to center it. So he's going to imagine judo is going to be AAPL. If I go here to see that now we have that max-width top 50 RAM and it isn't center, which is pretty neat here. This exactly what I need now is to go ahead and work on tabs itself. So this is our tabs container. So let me grab it. Can just go right here and here and has a taps. And then what I want here, I just want to see her position to be related. So I will just take which intimidate you because all the taps, this step is going to have potion of absolute. So that's why I'm using air-pollution related. Now, let me just add here margin. And I want to imagine, probably thought I was going to be twee RAM, but left or right. I just wanted to make it Sura. And then for background, I'm just gonna go right here and let me add this stamp bg color. So it will allow us to team of ADAP. That's going to be pretty powerful. I just want to set some height. Let's make it 14 ramp for now. And I want to add a box shadow. Let me just go right here to see this is how it's looking right now. So let me just add here bach shadow. Well, cognitively books on the paste it right here. And I say this is a tab, suggest this, this input right here. Let me hide that radio socle. So it's gonna be super simple. You see this tab Switch, jump and 108. And I'm going to set it here, dissipative in them. The Vigo. And you see that now that radio circle is gone. So now let me just put to this tab1, tab2, tab three in one row and make this tab contained seat on the top of 100. So for that, what I do, I can just go down right here and a packet out dab contained. You see it's right here. I would tap, tap contain. Here we go, right? And now what I want to do here is that I want to say this portion to be absolutely. The reason is because I want to get rid of from the RAM. And because you see that I've set this portion to be led to, this tab content is going to be relative to tabs. That's very important, right? So now if I go here to see the top has looking really look like a general right? But again, bearded me available fix-it plan. So I'm gonna say it, you're taught to be 2-point, Let's say 75 RAM. So this is going to top, and then I'm just certainly left to be 0 because I wanted to like 0. And then asset here, max height. And I will just want to put it like say 30 RAM. And let's also potential minimum height. Because I want minimum height to be 12. Rahm. Say we go right here and you say this is how it's looking, which is not obviously good. What I can do here, let me just first go to grab this Table, Tab two and type three and put it into one single row. Let me just go right here. And let me just go to these tabs here and here, we need to make use of flexbox. So I say distribute flux. And then I can say here justify contained. Let me just put it in the beginning so it's going to flex start. And let me just see here flax rap. And let's put here ramp. And if I go here, you see that now the Taiwan tab2 and tab three in one row, click here and you see it is not working. Again. We will get back to it because we need to style it's checked state. So for that, let me just go right here. And first, let me just do something here. Let me go to the step contained. And here let's add some festival padding and let's make it to wonder. If I go here. You see that now we had that bedding, which looks really good to me. And let me add this background here. So I'm sin omega o. And let us make it this fff, which is going to be white background. You say that now we had that white background and now it's clearly visible. So now we have a Tweet DAP contained seeded on the top of one another. And now this is the very top tab contains, which is the tab three. But again, we will just get back to it later. But first let me just go right here. And here I'm going to give it a color. And I just want to say 2424648, which will make it a little bit nicer to see. It's not complete black. It's really good to me. So now what I want here is that I want to decrease its opacity. So let me just go right here and here. And I said opacity, let's look at 0. I don't want to like, you know, to be shown because once we click on the tab, for example, type one, type two, or type three, then it will have that opacity to be 100%. And we will also in visited set index. So initially, let's go ahead and give it a default jet index. And let's make it 010 next to me. So this is gonna be the default zed index. So now once we click on any tab, we will make it shared index to be ten and a capacity to be one. And hopefully that will be visible. Did you get it? Awesome, you're getting right now. Okay. So now what I wanna do here is that let me just go right here. And it's it the stop switch. So let me just grab this tab switcher because this exactly looking for. So i'm going to scrap DAP switch. And then what I say here, if tax, which is checked, right? So since the fossil is actually checked, you see, so I'm talking about the first one here. So if it is checked, then just go ahead and find its sibling. And this is general sibling selector. You see. So what I want it, I want to grab this tap contained right, right here. And I saying here, basically, if any taps which is checked or selected, then just go ahead and apply this styling to its tab contained. So you see this tab contains a sibling. So if this is take, this style will apply this one. If this is check, then this tends to be a by two, this one. And now here, it's gonna be really simple. We're going to grab this thing, which it right here. Let's make this jet index to be two and this will passage to be one. So c, this have genetics of one, but this app to, so this will be visible and this is 0, this is a positive one. So doesn't matter. One selected right now, if you select any further, then only that is going to be divisible. And the previous one is going to be not visible. So that's pretty biophilia. Let's go to tab to see selected not Tab1. You'll see the tab1, tab2 and that 3C, It is now what King. So let's go ahead and style our tab, liberal. So for that, let me just go right here. And here. It's going to be a very simple. So I'm going to target this tab label here. So what I can do here is going to be the basic default styling. So understand it patiently. Relative, which is very important. And then what I can do, I can set display to be Block because I want my all-time level to display block. Also unsaid here, line height. And I want to give it to 2.7.3. And then let me actually add some padding. S is going to be padding and I went to 0, and let's make it 1.618 RAM, right? If I go here and you see this is house looking and let me also set here casa to be pointer because I don't have cousin. So I want to point out if I go here, I see that now there's a pointer, profit Diego. So now this is looking good. But let me just go right here. And you see that it's actually black. I want to make this color to be rights. Let's say color is going to be white. Go here and say, not, it is white. That's looking good. Now, let me just go right here. And let's say this top to be 0 because we have pollution and it's going to be stick to the top. And let me actually added water, right, because we want that separation between these daps. Well, it's going to be super simple, build sensitive border. And let's make it right. And I just want to make it a one pixel is going to be solid. You see this? If I go here and you see that now we don't have that border yet. I think there's a problem, I guess. So I think about a right one pixel, is it not make sense and aspects it. There we go. So now we have that body C. So now let me just do one thing. You see that if I select this tab one, there's no indication that Taiwan is select it. And if I select that two, does no indication that that to select it. So let's add that selected state. So for that, let me just go right here. And again, we're going to need that tab switch. So let me just grab this tab switcher. And what did I do here is that when I seem if tasks which is checked, then just go ahead and grab the very next sibling, which is this a label and do something with it. Let's label. And again, I'm using this, this plus symbol. That means that select the very next sibling. In this case, it's a liberal. So a targeting this guy over here, because if this selector sector very next Sibley was the label and then do something with it. So what do you want to do? But I must adhere magnetic white, right? This is the one thing I want her. Now. I just want this color and I just wanted it to be something like, so I can make use of this for 24648, which is a very nice color like this one. You see that now you can see it. Now let me just do one thing. Let me add some transition so it will look really good. Sunset transition. And let's make it all unless we get 0.352. Good idea. As if I click here, it's actually going to be very visible. It's not yet, so let me just score right here. And let me just grab a same thing. I'm going to paste it right here in the main label here. Save it, go here and say that unethically courtesy that now we have the shuttle shadow. It's good. Now let me add one more thing. I just wanted to areas that index. Let's make it one here to make sure it's actually no visible completely. There we go. Perfect. Now let me just do one thing. Yeah. So let's say I'm just going to no small devices and this is all going to look at it's more devices. So we need to first make it respond to. So let me just go down here and see it's looking good. But installed, which is what I want, is that I want these three tabs to take its full wou it. Let me show you what I mean here. So I can just go right here. Let me just go to Inspect Element. And you see that if I go to have an x, you see that we had a little space left here. You see, if I go even bigger iPad here, you see that there's a space left. So what I want to do that in small devices, I want to take you to its full width. So what I could do here is that let me actually just go right here. Let me use this media queries to add media. And here I am, I say max-width. And I just want to take a full week on 600 pixels. So if the width is maximum 600 pixel, then go ahead and apply this styling. So what I want yet, First, let me start with tab label here. So what I want and tab liberal is that I want this padding to be, let's say 0 from the top and bottom, bottom one lamb from the lepton died. And you see, if I go up here, you see that here we have this padding which is 1.618. And now I'm using get one brand only. So now we have little bit less padding on this molecule, isis, which is nice. So let me actually just go to heal a, let me add this iPhone simulation. So let me just make it responsive. And let's not understood one thing you said that to tap to one. So down is looking good. But what happens if I add here more contained? So let me just do one thing. Let me just grab this. Paragraph in the tab2. Let me just add it here. Save it, go here, and instead the tap is not bigger. You see that now this content is overflowing, this tab contained. Yep, that's the problem you see in bigger devices. It will look nice. You see, it's looking good. But it's small devices. It's not. So how can we fix it? Well, again, you need to understand that how big your content is. It's very important. We need to give a specific a bit here. So what I can do, I can just go right here and let me just tell you this is a little bit limitation as of right now. So let me just go to tap contain. I've given the max height of 30 them. So we need to increasing, then you would actually increase it right here. If you, for example, I can set here, flip the lamb and I see it is actually going to walk. You see? So the maximum rate is 50 RAM. So it doesn't matter if it is 40 them. It may just take 40 lamb and tell them who will be left. But if it take, it will take the full of it. So you can just apply simply here. So you don't have to apply this telling on right here. You don't have to do it, but if you don't do it, you can. It's totally up to you. But you need to make sure that you apply a specific height and check your content height in both small and large devices. So now let me just go and make it small here. And what I want here is that again, HIV-1, this data take its full width. So for that, what we can do here, we can just go up here and set the steps. Yep, I'm gonna grab it and especially it here and here, I need to apply one single property and that is justified, contained. And I put it in center. You see in the tabs, it's influx start, but now it is going to be on-center. If I go here, you see if I go even smaller here again, hitting 600 pixels. So see it is not working. It's actually putting in center, but we want to stretch it out, take its entire rate. Well, for that. So you see that because we are using this flexbox on taps now, every single tab is a flex item. So what we can do here is that we can do some cool stuff. We can just use this tab. And because the stack is a flux item, because you are using flex container on taps. We can say here flags and then he can sit here, grow. And then I just don't want to shrink it so it's going to be 0 and then set your auto. Nothing was gonna happen. See, yup, now it's pulling the width. Say exactly what I want. Amazing. But again, you see this is not incentives. So what I can do here, do one thing. I can simply say text-align center. Yeah, the word method, and that's it. If I go here, you see that now it's taking hits full width. And this is pretty neat here. And again, it's not looking good here in radio buttons, right? This text is not looking good on redo button. So we need to just, you know, make sure that it is not a center in this contained. So it's centered on tab here. So for that contained, you can just say Here tab content. And then you can say here like text-align. And you can do whatever, for example, left and right or justify contain. It's totally up to you. So justify, and now again, we are back to normal. So see that this is incredibly powerful. And in iPhone X, this is going to look. So there you go. This is our amazing tap. You say it's pure CSS and you see this Sheryl shadow that's happening this because of this Voc shadow. If I get rid of it, you will not see that shadow. But if I see, there's a very shuttle shadow going on here. And again, this is totally T-Mobile. So if I go to Inspect Element here, and you see that, let me just go to this icon axiom because I love upon x. And then here you can just team it. For example, I just want this like kinda this color, right? It's, it's totally up to you, right? You know, Eddie, you wish, right? So example, I can just go right here. And you see now it's actually changed in just one click. And in case if you don't want to use any given club, go ahead and use this simple, solid color and say, yep. So there we go. This is your amazing, fascinating tab in pure CSS. So this is it for this project. If you have any query or simply want to tanks for this video, head over to the forum and commented there and read it and respond to it. Thanks for watching. 12. Styling Links Of Your Websites With CSS: This will be, you're going to learn that how to style the link of your website in pure CSS. And I see that a V going to have to kind of link standing, the underlined links and the background links. So see in the underlying lakes we have four type of styling. The first one is the fairing and the lines if this messy, it's fading in. And then under-informed left Oozie and then for lead underlined from right, under land from setter. So in underlined, we have this four links tanning. Next up we have this background link styling, and we hurtle 5p link styling. So see the phosphor is a Farrell background. So if Harris Waze, It's a fading in background. And then we have slide from left, slide from right, slide from top, and slide from bottom. So yup, this is really cool. And what is the best part is that this is totally T-Mobile. So if you want to change this link and emission color, you could easily do so. You can say, let's say you want to apply for pink. And now we have this totally pink color. Say it's super permeable. And if you want, let say something like a green color. Well, super-easy. Say there's a green color. It's incredibly powerful and incredibly easy to change. It's color. So yeah, this exactly. You're going to learn how to build in this project. I excited the let me go to my code editor and let's get started. So heavy go Amun-Ra, VSCO eater, and we have this simplest html file to walk with. Well, there's another file in app.js is veiling or write our main CSS code. And finally, we have this default or CSS, where we have some default code for a project. So here you see that I am making use of this custom variable to define the color and transition of a project. So later, if we decided to change its color transition, you can just do it here and it will reflect all the places. And that's very powerful. Then we have some default styling for our body, heading one and anchor links, and that's it. Now let me quickly explain you the estimator structure of our project. Here you see that I have here two sections. The first section is all about underlying link styling, and the second section is all about background link styling. So let's talk about this underlying link styling. So here you see that I have this full paragraph. That means we have four underlying link styling. So we see the first one is a fairing underlying. Then we have underlined from left, right, and center. So let me just go right here. You see that now, here is a project. So this is a fading underlying underlined from left, right, and center. So there we go. Now here you see the mockup that I'm using this anchor link. And then here I am using this class as the animation name. For example, this is going to fade in underlined. So that's I'm using a fairly underline. This is going to have underlined from, let say, a 100 line from left, right, and center. So David, go, Now let's go ahead and talk about background link styling. And here's the that I had total five-paragraph. That means. I have here five background styling. So the first one you see that have a class of fading background. It's a simple and similar like this one, but apart from this first one, the rest of them are not similar. They are little bit different. Y, let me show you. So see they have a class of slide from left, slide from right, slide from top, and slide from bottom. So that's common. But there's one extra thing you see that the data link text, and you see that I'm giving the exact value I have for this anchor. The anchor have a value of slide from left, Sam giving exactly the same thing right here. Again, we'll get back to it once we'll start working this background link styling. But first, let me just go and let's work on this underlined link styling. So let me just show you again. This is our project preview and we have two section underlined links and background links. So in underlying next, we habitable for styling and you back down lists. We took, we'll have five standing. So let's start with this underlined links because they are little simpler. So for that, let me just go to app.js and let me just do one thing. Let me just go here and let me grab this fading underlined because this is gonna be the first one and the most simplest one. So again, I want to make sure that I'm targeting the anchor link and then I'm gonna use that class. Now, it is going to be super simple because here we're going to need that border bottom, say about our bottom. And it's going to be two pixel solid as one of you light. Because I want to make it like no transparent. You see that we have this white background. So that's why we can't seed. But if I just make it red here, you can see to see. So that's why I am using her white. So you can't see it. You can only see it on hover. So that's cool. Now let me just go ahead and design. It's how a state, so I say here. However. And then on how I want is water, water two pixels solid, but color is going to be this Pm color. So let me just grab it. And I wanna get rid of this because we don't need that. And I'll paste it, then you go. And this is it. If I go here to see that now if I dishonesty, that now it's fading in, it's appearing, but it's not fading in and out. The reason is because we need to area transitions. So you see there is a transition function here. Let me just grab it. I'm gonna go right down there. And I say transition. And here is going to be variable, and I'm going to use that variable. And let me just do the same thing for here. So let me describe it and paste it here. Semi glare and even how does one see it smoothly transitioning in and out DC? There you go. So this is our fairy underlying. Now let's go ahead and work on this under-informed left, right, and center. For that, let me just go right here. And you see that this underlined from left, right and center class start with this underlying EC. These three classes start with this underlying. So what I can do, I can go right here, and I must say, go ahead and target the anchor link class start when somebody uses carat sign underlying. Go ahead and target that one. So it's gonna be underlying. Now, let's go ahead and style this one. So it's kind of a super-simple. I just wanted to set a portion to be a lead do because that underlined from left, right, and center is going to have that position to be absolute. So that's why I'm using this portion in the parent container. Now let's go ahead and define its after state. So I'm gonna just go here. And I want to get this up to state here. And here, we're going to simply say contain to be numb because we do not want any content. And let me just add a portion to be absolute, right? And then I just say here top to be 100%. That will push our underlined at the bottom of our anchor link. Let me show you if I sit here top to be 0%, it will push it at the very top. But if I say here a 100%, it will push it at the very bottom. So that's why a habit. And now I can just go up here and I'm not going to have this border bottom. I'm gonna go right down here and I paste it. And this is actually going to have a color of this solid, right? So let me just grab this here and I'll paste it here. Now let's go ahead and define our howard state. So here I'm gonna paste it and then I say here on Howard after. So this is going to be the after state on hover. And this is what I'm super simple. Yep, here we only going to have a simple transition. You see this transition? Yep. Let me describe it. So here, unabated. And also we needed to hear an artist. It's going to smoothly backup. And down. There we go. So we have this simple transition. Now let's go ahead and define our underlying form left. So see that we have this underlined from that. Let me just go ahead and grab this. So under and from left. And let me just go here and paste it and blend overlap. So now let me just go ahead and post that underlined, right, a 100%. And now let's say you're left to be 0. And now if I just go here and grab it and I paste it here. And then if I design here, how would state? Now what we can do, we can set this to be 0. So initially, you see here it's a 100%. So now it pushing it to very inept. And now I'm saying that to 0. So now it's gonna go from left to right. Let me show you. If I go. Is it, how is it underlined from left is a it's left to right because we are using here right at EBI and pushing it a 100%. So here we have our light and there'll be push it a 100% which is right here. And then on hover via just, you know, extending again to 0%. And that's having this effect, very powerful. And now you guessed it right? Yep. So if I just go down right here and z is going to underline from right. And here is also going to be the right. And here we're just gonna make a delight to be 2%. But instead, this loop is going to be a 100%. And then here is going to be left to be 0%. And that's it if I go here to see that now under n from privacy. So under from left and right. So now when a design underlined from center, well, it's going to be simple. So let me just rub it and place it right here as he drank from centre. And this is also going to be from centre. And here, it's super easy. Yep. It's gonna be right 50% and left 50%. And then it's going to be left 0% and right 0%. Say, it's super-easy if I go here to see that. Now, how does one see? It's appearing from the center. So there we go. This is our underlined link styling. We done it. And now what I can do, I can go right here. And let's say if I go here and let me just do things, let me just go ahead and just duplicated. Now we have another one. And you see this is a drain from center. But if I say here and then four lat and to just change this class left. And yep, if I go here, you see that now we're going to have this underlined from left to say, see. So now what we can do is that you're going to use this same style sit and just apply these classes and you will have that effect on your project. You say, it's super awesome. So let me just go ahead here. And again, we have our 41. Now let's go ahead and walk on this background links. So for that, let me just go here. And is it the very first one? Is this fading background. Again, it's a simplest one. So let me just go down right here and let me just come into it. So when I see her background and let's come into it. And here we going to use that fading BC. Now again, let's make sure this actually anchor link. So it's gonna be really important and I need that border bottom. So let me just grab it from there. I'm gonna go down here and paste it. So border bottom and now it's going to be dotted. So let's put it here, dotted. And again, we're going to make use of this some family cholesterol. Let me just grab it from there. I'm gonna do right here and I'll paste it. There we go. So this is our simple border bottom. And if I go here, you will see that for the bottom here, right? So that's it. Let me actually add some padding. Yes, there's gonna be padding. And let me see as 0.250 is going to be left and right. Here you see that now we have a little bit padding around our text links. So this is very nice, not so go ahead and design the hover state. So it's super simple. I can just copy and paste here. And then I say here on how to do this. So what you want to do and how? Well, super-simple, I can just go and get rid of it. I just want to apply this background. And for the background, I'm gonna make use of this BM color. So let me just go ahead and get rid of this padding. We don't need it if I go here, you see that now when I just don't see, it's working. But again, you see this font color is not good. So I can set this collectivist until like a provide, save it coherency that now they have it, but it's not smooth. So let me add some transition here. So let me just go and grab this transition. I am going to go at the very down and I pasted in the state. So let me just save it, go ahead and see that now will have a smooth transition background C. So now let's go ahead and walk on this slide from left, right, top and bottom. And again, it's gonna be just seem like these underlined from left, right, and center. Yeah. So let me just go right here. And you see that this Slate from left, right, top and bottom is started with this slide class, right? So let me just grab this slide. Let me just go down right here. And I will see you can find all the anchor link, which class start to read this slide and then take a discipline. So what you want to do here, well, I simply just stayed here. Line had to be 1.5 m. So we're going to have that awesome line effect. And then I'm also need that padding 0 to be top and bottom and 0.25 ramp from the left and right. And then I need that, this border bottom here. So let me just go ahead and rabbit paste it right here. Save it, go here and see that now we have at the bottom, which is cool. So now again, we're gonna make use of patient to be absolute. So let me just say type which had to be related. And also, and I sit here display to be inline block. And now let's go ahead and define the Harvard state. Some of this go down here. And here is going to be that how a state, Now here, I only want this border bottom, and now this time I want to turn into solid, right? So on what it would look like a solid color instead of dotted, so C, And how does one you see? It's become solid. So that's exactly what I'm looking for. Now let's go ahead and just, well our slide after state, I'm going to go down and I'll paste it right here. And it's going to be after states. So let's say an optimum. And then here we just gonna go and get rid of it. And I would say that contained, and now this time either contained, We want to grab this data link text. So how are we going to grab the value of this attribute? You see this, the value you want to grab IT. Super simple. This is the attribute and CSS allow us to use one attr function. So it's going to be at a function. And then here I can paste the attribute. I want to capture its value, and that'll link text. And there we go. So now what's going to happen if I go here to see that now we have this slide from there again, you see this now upended the same value. So say it is working. But now let me just go here and here it is going to be our primary color. So I just wanted to set its background to be that primary colors. To save it, go right here and see that now we have this color. Say, now let's go ahead and again, I just want to change its color to be completely right. So there we go. Let's go ahead and use this position to be absolute because we have set let u right here. And let me just say this dispute to be bloc enough ago here you see? Now we have it easy. So let me just do one thing. Let me just go right here. And let's tie it up after states. So here it's going to be on and it's going to be after, right. And at this state is going to be 0. And bottom left, right 0 and DV go because on hover, we want to stretch it to feel our entire text. And this is what exactly it is going to do. Let me show you if I go here to see that now it's one. You see that now it's filling up there. Now let's go ahead and define that slide from left. Well, for that We can go down right here and I just, you know, just target a dot. And you see this slide from left. So let me just grab this slide from left. And I'm gonna paste it right here. And then I sit here to be active. And then here I just said Dr. B 0 because again, that background is going to be at the c, does not dare say it stick there, which is really nice what i'm looking for. But we want to push it to the left, right. So for that, I can sit here right to be a 100%. So now it is going to push it to write Hersey. There we go. So now we can simply say a right to be 0 and to walk. So now let me just go here, and now let me just adhere lap to be and I'll sit here minus 100%. Save it, go ahead and see that now if I just want to say it's working and again, you see this dex is not incomplete centered because we have a batting on the right but not inlet. And this is happening, that's because of this text aligned center. Say we go here and see that now we have that text item center. See it's working. So now what we're gonna do here is that let's go ahead and add that transition effect. So for that, let me just go up here and let me grab their attention effect. And we need to place it on the after state here, right here. Say we go here. Then how this will see that now smoothie appearing now can do the same thing for our slide from right, top and bottom. So let me just go right here and let me just target a slide from right. So I'm like this is that the copy and paste it right here as a slight from right after. And now this is going to be the exactly the same but little bit difference. I can see her light to be minus value. And this left w0 plus value or positive value. Yep, that's it. If I go here and say that now if I had this OSA, so Bering sea, when he coded and again for top and bottom, it's going to be almost the same. You can actually guess it, right? Yep. So let me just sit here top and air the not gonna need this light and left value, we only need two value, which is top and bottom. So now top is going to be minus a 100% because we want it from the top. And the bottom is going to have the positive, a 100%. Save it, go here. And I see that now it's an insight from top to the bottom is going to be the same thing, but only the changes in this positive. So top is gonna be positive. And now what am I going to be and limit just turning to bottom here. Save it, go here and see that now, see, okay, so now let me just go ahead and highlight this overflow. So it's very simple. I can go right on this after or slide state here. And I say here, overflow to be hidden. Seven, go here and see that now it, Satan and I find this one C is coming from the same. But the problem is that if you see that this text a little bit up, so we need to push it down so we can use your vertical line. And let's just put it here at the bottom. Save it, go here and see that now the Push it water C. So here we go. This is our tiled link for both underline and background links. Don't forget, this is totally thinkable. So if I want to change it, so let's say I want to turn it into, let's say a total pink. See that now if I just go here, it's starting to compete. Pink is a C. And again, let me just do one more thing you have is really loved it. So let me just do something like this green color. See that now we have this green colour effect. So yeah, this is how you can style the link of your website. So if you have any query or simply want to thank for this project, head over to the comments section and leave a comment. Am I read and respond to every single comment? And as always, thanks for watching. 13. BONUS 1 CSS Trick Like Comment Section Avatar (with SVG Half Circle): So in this movie, you're going to learn how to create this amazing, fascinating CSS tricks like a comment section for your audio client website. You see this is going to be your comment section, and this looks really, really good, especially these profile picture section where we have this half circle in the bottom of a profile picture and you will learn how to do it in this movie. So if you're ready, let me go to my code editor and let's get started. So here we go. I'm gonna reuse code editor and we have the simple estimate phi to walk with. Well, there's another file in app.js is where you're gonna write our CSS code. And finally, we have this default or CSA's, where do we have some latency is cold. And you see that this is a very basic and simple styling for our project. So here is our project and you see it's a very simple and that's because we have this simple styling. So now let me just go right here and let me explain the HTML markup of our commit. So here you see that I'm using this article tag to mock up our coming because that makes sense because a commit is kind of a short article. So that's why I was thinking these article deck which have a glass of comment and our answer does come into, we have no section. The first one is going to be dilettantes. And obviously inside this avatar about that hop circle is gonna go, but we'll get back to it later. Next one we have this coming body and incidents coming to body. We have this coming to auto comment published it and our comment. Now let me just show you right here, you see that we have this avatar. Then this is the comment author coming to date. And we had this actual coming. And obviously we want this avatar to appear in the left and this coming to body to be appear at the right. So before adding that Hobbes or go to the bottom of our profile picture. First, let's go ahead and make our Coming to look good. So for that, let me just go right here and let's design our coming. So here you see that we have this comments. I'm gonna grab this coming class. Let me just go right here. And I'm going to use this coming class. And obviously you see that inset is coming. We have to, but, so this is your first part, which is our town, and this second part of the commit body. So if you make use of flexbox, You see this is going to be the right and this is going to the left, and this is what exactly we want. So let me go right here and let's use flexbox. Save it. If I go here, you see that now our professor, what are in the left and this current body to the right. Now let me just go ahead and give it a simple width. So I'm gonna go right here. And let me just say here max width, and let us make it 800 pixels. So maximum, it could be 800 pixels wide. And there we go. Actually let me just give it a simple background so you can see it. So it's going to be, that's the EFF this if I go here, is that we had that shot back around. So let me just write here, let me actually add here border radius. This is going to be border-radius. Let's maintain mixin. Say we go here, there we go. So we do have it be need some padding. So I can go right here. I can sit here padding to be let's say one and top and bottom and two ramp left and right. Let me just write am Nancy, that having OP had that pairing, we have that bottom, but nothing is go ahead and style our Avatar. And we also need data margin, right? So let me just go here. And I see that we have this avatar right here. So this is about our class, ends at its outer class, we have our image. So now let's go here and I'm attack at this avatar and then image. So I'm targeting all images, which is insight is about our class and we only have one. So that's really good. Now what I need here, I need this width to be, let's say, a 100 pixel. So for the pixel, and then I want this image to be a perfect circle. So for that, I'm going to make use of border-radius. Yep, I can make it a 100%. And it will going to turn this image to be a circle is now we need that margin, right? So we need some margin between our actual Avatar and the coming bodies. So let's say in margin, right? And let's give it to them for now. Which is enough. There you go. We have. Now let's go ahead and walk on this actual comment author. So you see it is right here. And you see it, this is an H2 tag and we only have one heading to in our HTML page. So we're not going to be specific here. So let me just go right here. And that edge to here. And again, if you have more than one edge to tag right here, then you're going to also affect that if you do not make it specific. So if you have more than one S2 tag in your HTML document that just go ahead and use this come into body. Do just put specificity to these particular heading two. But since we only have one, let me just get rid of it because now it's simpler. I will use a font family to be sans serif font, for example, ADL. As of right now you see it's a serif font, but I wouldn't sensitive. So I just see a font family and let's make it 80. So it's going to be a sensory font and then go, the sensory font is only going to for this domain and for this coming publish date and actual commit, we're gonna make use of serif font. So basically serif font is you see that it does actually degradation. You see here that's called serif font. If you see this modern clear structure, which is a Sans Serif font. So let me just go right here and let me actually just make it a little bit big sans-serif font size. And let's make it 1.6 RAM. Save it. Go Here you see, there we go. We have a little bit too big fund, which looks good to me. So I think this is it for now. Let's go ahead and move on to our paragraphs. So for this one, let me just go right here and you see that in default, I have this laura right here. So I can make each of these Laura and low-rise serif font. So I can go right here. I can just tack at this paragraph and you see that we have everything packed up. So all the paragraph is going to have the same font family, which are gonna be not. So font-family. This is gonna be Laura. And then we serif fonts. So because it's kind of a serif fonts to and just give it the font family. For example, if load is not present and some scenario, then go ahead and use any steady font you have by default in the device. And that's what exactly I do. And there you go. We have this laura fun fact. It's looking good, right? And let's make this font size a little bit big. So it's gonna be 1.1 gram. Let me just go right here, and there we go. And now you see that line height is quite good, but I won't exhibit a mood. Line height. That means that space between these two lines. So for that, let me just scroll right here. And I say the line is going to be height. And let's make it do RAM, which is 32 pixel alone. And there we go. We have this more line-height between this two line. So there we go. This is our comment. Obviously it's not looking as we expected, but we'll get back to it later. So let me just go right here. And you see that this particular hash sign have a different current sum has grabbed this publisher. And let me just go right here, is going to be dot publish it as going to be on spam because you see in publisher to be happy spam and this is going to be a different color. So here I'm gonna make use of this color and this is the current talking about. This is kinda pink color. You say it's a pinky color? Yeah. You can see it right here. If I just open any article on she's a strike if I go down here, you see that? Pinky, you see yeah. This is what I'm talking about. This is our pinky color. And also you see that we have some great margin between this and this published date. So let me just go ahead and let me just remove it so I'm as good as coherent. I'm say margin-bottom. Let's make it 0. Let me just go right here. And we see it's a little bit removed, but let me just push it up. So for that, you see that this is a published yet, so I'm gonna grab it. I'm gonna go right here and let me just go up here. And then I got my shit. And let's make it a margin top, and let's make it minus around, let's say five pixel. And he said it's going to push it a little bit up to the top, you see. So that's nice but limited topics. And so I think that will do the trick and then you go, now, it looking good to me. So now we have our comment almost ready. Now let's go ahead and make it look like a CSV string. So for that, let me just go to this body right here. And here, I'm gonna give it a background, was going to be this background criteria. You say that now everything is turning to this color and obviously our coming is also going to have the same background. So here I'm gonna get rid of it or I can separate this carried off completely here, this one and this one. And you see that now we have this transparent background. Obviously it's not good. So let me just write here and let me go to H2. And this is going to have a color of complete, right? Go here, I see that now we have it. Now this paradigm is going to have a current up different stops is going to be color, and this is going to have graph c2, c2. And see to save it, go here, and then you go, we have it. And this is basically I bought it from cis straight, right, just to have the same color. So that's why I put it in color right there. Now what we need that half circle in the bottom of a profile picture. Well, for that, you're going to need a vector drying tool. For example, Adobe Illustrator. Yes, we need to create that shape and use it as an SVG file. So let me show you what I mean here. So how do you create that helps you could eat Adobe Illustrator. Let's super-simple. Grabbed this ellipse tool, hold on your suitcase. So it's going to make perfect circle. You see? Just hold on a sec. Live it. Now we have our circle. We can just go right here. And just in case the stroke, let's make it ten pixel. And let me tell you that we can control this stroke on our CSS so you don't have to worry about it. And now in order to cut it into half, just go grab this tool here is direct selection tool, and then does click on this right here and deleted their ego. You say, once I deleted, now be left with this half circle. Say, it's very easy. And now you see that we have this half circle, but I want this edges to be round and it's very easy to click on stroke. And I see there's a cap which is around cap. You see fig right here and see. Now we have that round cap. There we go. It's very easy. But obviously they didn't need that gradient background. Well, for that, just click right here, select it, and then click on this gradient and we have this gradient color. Yep, just integrating. Glad you wish, there we go. So now I'm gonna choose this up for now. So let me just go ahead and close it out. We have our half didn't circle. Perfect. Now what do we do? I can just hold on Mississippi and I'm going to make it big, right? I can make this big like this. And let me actually make it smaller. So I can make this Malia and let me just increase the stroke size to be like this. And now what I can do, I can grab this article tool. I can just go right here and make this outward to fit right there. Okay? So make it fit here. There we go. We gotta know what I can do here. I can just go to File, Export, Export As. And then here you need to choose this SVG, right? And then here, click on export and you see that there'll be a shocker clicker shoe core. And this actually our SVG grab it because this is exactly what looking for lemon, just go right there. And we need to paste it right in this, our top because we want that shackle right inside his order, right? So I'm going to score right here. And then you go for me this document. And there we go. We have this code here, is it? It is quite big. So basically, you see that we have this SVG and then we have this css, and then we have this path, right? And if it's a linear gradient is right here. So what I can do here is that I can simply just get rid of it. And you'll see that this is on this class one. And you see we have this class on this path. So what I can do, I can go right here and I can see here, right, because we only have one path. And then I can simply paste it and leave it as formative. And there you go. You've got the same thing. But in CSS. In order to do, I can get into this class, well, we don't need it. And I can get rid of this time part. There we go. Now. You see that we do have it. Now if I go here, you'll see this is right here. So there you go, you got it right? So you obviously don't need this failure second go right here. I can see are filled to be null because this is filling light, you see it's white. We don't want it right? So you can say None. That's gone. Now we have this particular circle. So for that, let me just go right, and you can change the stroke from here so I can make it, let's say 50 pixel wide. And there you go. We have that much make. Obviously, we don't want that much we can write. So let's make it ten pixel for now because sampling is only what do we need and definitely we will change it later if you wish. Right now, let me just go right here. And you see that I want this SVG to be at the bottom of this image. So what we can do here, we can make our SVG to lead you to Aadhaar. Yep, we can go to our chart here. So I'm gonna grab it and let us put it right here, our town and here, I guess it to petition to be related. Now I can go to this below here and you see that we, this is the SVG we're talking about, right? So what I can do, I can just go right here. And I can say SVG. And then here I can sit petition to be absolute. Absolute. And then what we can do here, you see that now it's absolute, so it's see, it's actually gone. So what I do here, I can say top to be 0 and bottom to pursue. And if I go here and you see, it's pretty hard to see, right? So what I do, I can just go right here. You can see a width wanted to buy pixel. And if I go ahead and see that now we have right here, now we have decreased its width because previously it's weird to be like it was outside of that area so nicely, it's right here. So let me just put it at the left. So let me just get into this topic because we obviously do not need this top. We need yet lapped. So let's see here left. And let's look and see them. Say, if I go here, see that now it is in lapped ends at the bottom, which is not good. Let me just do one thing. What happens if I just go ahead and just add more comments you see, as soon as I do that, you see that now it's getting even more like at the bottom. It is not right, right. So how am I going to fix it? Well, it's super-easy because we need to make it relative to only this avatar, and we need to give this avatar, let me show you this avatar to be a particular width and height. Yep. So what we can do here, we can go up right here. And we can say here, something like a big, let's make it 200 pixels. And height is going to be 200 pixels. So it's basically a perfect square. Let me just show you here the background. Let's make it red. And you see it is right at this area. Perfect. So now let me just get rid of it. Let me actually add some padding here. It's going to be wondering around our box. So we have these kind of effects. Now, we need to push it up. We can easily do that. We can just go right at the bottom. Here. In SVG, for example, I can say here 90 pixels. They go here to see that now it pushed up, see, hit. It's pretty neat here. And let me actually just give it a even more stroke here. So let's make it around 15 pixel. And then you go, it's looked nice. Actually, let's make it 20 or 22 pixel, right? And you say this is as look, and I think this is good, yeah, puffing. So now it is looking good. Non-linear School right here. What I'm gonna do is that 90, what analytics are fine, but let me, I can push it a little bit up. You see that we have this more space. So what I can do here, let's make it at 90, around seven. And you see that now it pushed up. Yeah. It's looking fine. Light now you say, let me actually just give it a background of blue here. Save it. And I say this is house look like, sorry, I am gives the background to this one. But we instead, let me just do this background to our Avatar. And there we go. Yup. So now you see that we need to push it even up here. So let me just go down here. And you see, let me just push it to be a 100 pixel. Yeah, there we go. Limits actually just decrease it little bit so we can actually just not decrease it. Let me just decrease it when the father, so let's make it a one pixel. And again, you need to play with this value. So now you see that we are looking closer. Yeah, let's make it 2102 pixel. And yeah, there we go. And now what I can do here, I could go to the left here. And let's make it. I don't know, three-pixel. Save it, go here. And you see that now we are almost close to pixel. And they go, You say, it's now working. Let me just increase the stroke. So let me just make it 25 pixels stroke here. And yeah, there we go. Perfect. So now let me just go up here, get rid of it. So if I go ahead, you see that now we have our half circle, but you know what the best part? Let me show you. If I go here and even I can add here more paragraphs. Go ahead and see that it doesn't matter how big you add this, peg it up. It is always going to work. And that's vapour for. So now let me just go ahead and again, get rid of this section from there. And let me just go here. And we have only one paragraph, so let me just add one more right there. And then we go, we have it now because I'll come it is ready. Now let's go ahead and add even more comments right there. So for that, I'm gonna just grab this article. I'm going to just put it right here. So it's going to be 234. Now let's go ahead and add the different immature. So here you see this is second one. I'm going to add my image. So it's going to be grappled giddy, which is the my image. You see, I have this image here. Then the next one is going to be this right here. You see that I have this Krish color. This is your f, go home, this larval giddy, and then these levees. So there you go. We have this four images. So let's go ahead and add this Xin levies and then this job. So for that, let me just go here, type Levis. And then finally we have this last one, save it, go here, and there you go. We have this one. And now if I save it, you'll see that behind-the-scene act in the name of everyone. So this is Chris Coyer. Then we have this algorithm, we have these elements, and then we have this graph. And obviously these profile which I took it from CSS trick dot-com, right? So I can go right here and I just got it from here. You see at the bottom, you see right here. And then we have this one. So there you go. Now we have it. But one thing you see that, that these images are colors so we can make it grayscale. So let me just go right. Am I let me just call this one. Let me just go to town right there. And because we only have one image for our Avatar, you see, we had this one. I can just grab this image here. So I can just go down. I can see here, grab the image and then I can say here, filter, let's make it grayscale. Save it, go here. And I see that now we have all images Don into grey, which is perfect. So there you go. This is your systolic like a comment section. You can take anything you want, but this gradient is pretty hard to change. So you need to make sure that you're getting at is proper right here inside this rector tune. So you need to change this gradient right here. So make sure your gradient is right in the vector tool. And this is how you create this amazing sss straight like a comment section. So if you have any doubt or you simply want to tag me for this lecture, go ahead and comment it out and look forward to hear from you. 14. BONUS 2 Amazing Shine Effect For Your Profile Picture: So in this movie, you're going to learn that how to create this amazing shine effect under profile image. You see this is really amazing. And again, it's totally doable. So for example, if you want to change the color of the side effects, you can do it right here. You see that now I turned off that solid color. Now we're going to have these gradient color as a side effect. You see this one, see this is the gradient color shiny effect, which is totally powerfully. And again, you can change it to solid colors if you wish. For example, I can just make it, let's say pink. So if your website have a pink thin color, well, there you go. This is your pink shiny effect. And of course you can decrease the opacity of it to make it look even more awesome. So lemme decreases capacity. And now if I go here, see that now we have this amazing pinky shite effect. So yep, this is what exactly you're going to learn here in this movie. So let me go to my Twitter and let me show you how it can create this awesome, shiny fact in pure CSS. So here we go. I'm on my VSCO eater and we have this estimate file to work with. When does another file an apt or CSS, we're gonna write our main CSS code. And finally, we have this default or CSA's where we have some default court for a project. So here you see that I am making use of this custom variable to define the color of a project. That means our project is Timmy bill. So for example, if you want to change the color of your project, you just need to change here and it will automatically going to reflect all the places. So that's very powerful. And then you see that I'm setting its height to be a 100% on body and estimator. That means that I'm basically going to center all these profile card, both vertically and horizontally. So that's why I need that height to be a 100%. And I say that I'm resetting this margin and padding. And then I have some default code for our body tag, and that's it for default does CSS. Now let me quickly explain you the HTML structure of our project. So here you see that I have this article tag, whichever class of profile card. So basically this article is holding our profile card. And inside this profile card we have two section, the header and the body. And inside header, we only have this image and then body, we have that profile name and designation of that person. And this is it. This is a very simple profile card, and obviously we have proposed three of them. So that's first, second, third. So let me show you the project preview and you see right here, we have year three profile card. First, second, third. So the first, let's go ahead and put all these card in one horizontal row and incomplete center. For that, we just need to go right on default, CSS and citizen body. Yep, so I can just go down here and here I'm gonna make use of flexbox. So it is going to put everyone in one single row. And now I want to put it into a complete centered horizontally. So here I can say justify contained and is going to be in centre, semi co-writer. And I see this is horizontally incentive. Now I want it vertically incentive. So for that, I can go here. And I use these align items and this is also going to be centered. Go ahead and see that now our profile card, incomplete center, both vertically and horizontally. Now let's go ahead and design our individual profile card for that. Let me just go right here. Let me go to app dot CSS. And here we're gonna design it. But first, let me just grab that profile card class. I'm going to go right here and paste it. And then here I'm going to give it a background of this column which is a lighter gray. And then let me just set some padding here. So two-gram is gonna be top and bottom, and for them is going to be left and right. And then let me just also say text-align center. So the text of our profile card is going to be complete center. And you see, this is how it look likes. So that's pretty neat. But let me add some margin right, to have spins between unprofessional cars. So for that, I can say in margin, right? And let's put it here, foreground. Save it, go here, and there you go. Now we have the space also. Let me add some border-radius here, so it's gonna be certain border-radius. So let's say you're about a radius and it's going to be five pixels, say we'd go here. And then this is how it look likes, and this is looking really nice. But let me add that box shadow. So here I'm at that bach shadow. And if I go here to see that now we have that shuttle awesome box shadow around our profile card that is looking really good. And I say this is simple bach shadow. So on x axis 0, y axis also 0. I'm only using this a blurred to be 30 pixel. And then these RGB color, which is the black alpha transparency, 0.25. capacity. That's it. So simple box shadow. So there we go. This is our profile card. Now let's go ahead and walk on this image. So for that, let me just go down here. And I'm going to use your image. And because we only have images in our profile card, so we don't have to be that specific. So let me just sit here with to be a 100%. And then I just want border-radius to be a 100% means I want our image to be incomplete circle and see, now it is making it look like a circle. Well, let me just do one thing. Let me just add this bach shadow. Say we go here and you see that now our image circle, you can see it right? And now it's looking really good. And again, this box shadow, I took it from here. Yeah, the exact shape box shadow. There we go. So this is our image styling. Now let's go ahead and work on this heading two and this heading five. Well for that, you see that here we have this heading two inherited five, right? So let me go here and here I'm going to hit my heading two. And you see that we have a lot of space under this heading two. So let me just get rid of it. So I'm, I say margin-bottom 0. And also I'm a target, our heading five. So you see that heading five AND assay her margin top to be 0. And if I go here, you see that now they stick together. So that's pretty neat. But you see this designation is bold, but I want it lighter. So I can say here font-weight and let's make it 400. Go here. And you see that now it is little bit lighter. And there we go. So this is our profile card. Now, it's time to create that amazing, shiny effect. So for that, let me just go right here. And you see that we're gonna create that shine effect on header. Yep. They're gonna create Shan effect on this image. And this image is located inside our header. So we need to grab this header class. And let me just go down right here. And I'm a target this header. Now here I want to use this position to be l2 because we're going to create shiny effect object in before state and it's going to be positioned absolute. So that's why we need to use this portion reality on this apparent. So that's why I'm using it right here. Now. I want to give it the width and height to our shiny effect object. So let's make it 150 pixel and height is also going to be same, which is 150 pixel. And now if I go here, you see that now our image a little bit smaller. That's because we have visited the width and height of our header and our image is located inside this header. Now then I'm going to use these same box shadow in our header, Sanders co-head grab it and paste it right here. Let me just go here. And I see this located, this rectangle here. And obviously we don't want it rectangle. So let me just go right here and let me add here border radius to be a 100%. So it's going to be incomplete circle. If I go here to see that now we have that complete sucker. Now let me just do one thing. Let me add a casa to be pointed. So here it's going to be a pointer. If I go here and see how this menisci that now it is a 0. Now let me just go right here and let's create our shiny effect object. So I'm gonna grab this header. I'm going to just go down here. And I'm gonna target this before. Pseudo-selector. Why before? But because I want my shiny object to go from top to bottom. So that's why I'm using before, if you want to go the shiny object from bottom to top, well, you can use the after state. So when I using this before, it is going to put that object before our image. And then when I hold this one, it will go to just cross it on after. So that let us correct here. So let me just go here. And because we are using this before pseudo-selector, we need to make use of this contained, but we're going to set it to empty. And then I can just give it a bit off around, let's say 100 pixel and height is also going to be same, 180 pixels. So this is going to be complete squire. Now for background, we can go up here and I'm gonna grab this bg color. And I can simply say her background and is going to be bad and paste it. So this is for theming Papas. So let me just do one thing. If I just go down here and get rid of this element, just say it here, black. And let me just show you, Let me just add this portion to be absolute so you will be able to see it. And let's say at top 0, if I go here to see that now we have this black sandbox just at the top of our image. We don't want it right. We want to push it at the very left. Well, for that, we can go down. We can say here, left to be around, let's say minus or do 40 pixels. If I go here to see that now it is very far pushed, but you can decrease it. Yep. So let's say, you can also say something like, I don't know, maybe 200 pixel. And if I go here. That now it is only a little bit of a from this image. So now let's keep it And later if you want to change it, we can change it. And now the best part is that this is a perfect square, but we want to skew it, right? Well, how about a squid? Well, we can use this transparent property and I can use this skew function. And how much you want to skew this one? Well, I can say simply here, around 40 degree. If I go here, you see that this is how his skewed, but 40 degree is less. Let me actually just make it more. So let's make it here 50 degree. Save it, go here. And I see that now it is quite skewed. And he said This is coming at the top of image. So that's a big problem. So what we can do, we can increase it, let's say, to 40 pixel, right? And again, you see that now almost close to or this image. So I can even increase this, let say do 45 except it's now at least one pixel away from this image, and this is exactly what I want. Now let's go ahead and design our howard state. So for that, let me just go here. And it's very simple header and before pseudo-selector here. And what I'll do here on Howard dot before, right? And what I can do you see this left is minus 240 pixel. Well, I'm gonna grab this left, and here I'll say positive to 45 soon enough I go here, you see that now for how this one see this image, it's going from left to right. But again, let me just make it smooth as well. For that, we're going to add your transition effect. And it's going to be all 0.06 a second. And let's make it easy. And out. Here we go. And if I see says now it's smoothly transitioning. So that's pretty neat here. And now what we can do here, we can just go right here and it's almost ready. So I can go here and I can simply see an overflow and hearing. And if I save it, if I go here and say that now, if I wanna see, there we go, see our shadow effect is working. That's cool, right? So now I can just go right on default assesses. And you see this is actually our main shiny effect color. So what I can do, I can just comment it out, save it, go here and say that now that, now that shuttle white shiny effect you see, and again, you, it's totally reasonable. So let me just go right here. We have our bg color. Now we activated our gradient. So now if I just hold it, it's going to be a gradient, shiny effect C. Isn't it awesome? I totally love it. And again, you can just do whatever you want. For example, let me just turn up this gradient. Let me just turn on this solid color and then I can choose this around Pinker. And now you see that now we have that Pinker shine effect. But again, we need to add that transparency here. So I can just decrease this opacity a little bit. For example, I can just use it like this. And now we'll have this shuttle pink shine effect. So basically you can imagine this shiny effect with your website, pinto Allah. So see, this is how you can create that shine effect. So if you have any query or simply want to tags for this project, head over to the forum and leave a comment there. I read and respond to every single comment. And as always, thanks for watching. 15. EXTRA BONUS- Stunning Animated Gradient and Image Text: So in this movie, you're going to learn how to create these five different type of gradient texts effect. Yep, you're going to learn how to build this and you see that this is a gradient text. Then we have this gradient over the tax shadow. Then we have this text with background image. Then we have this text with a limited image. And finally, we have this last one which is gradient animation text. It's a gradient animation. You see right here, it's emitting from red to blue. And you will learn in this project how to build it, even I'll show you that how to use these gradient texts in real-world project. For example, this one, you say, yep, this is a simple hero area and you see that there is a title which is businessmen on fire have animated background image on the title you say. And in this movie, you're going to learn how to build it. So if I ready, let me go to my co-writer and let's get started. So here we go. I'm on my Viscoat 8a and we have the simple SQL file to work with. Well, there's another phylum. Apoptosis is where we're going to write our CSS code. And finally, we have this default or CSS, where I have some basic styling for our project. And here we go. This is our simple project. And you can see it's a super simple project because we only have these five text. So let me just go right here. Let me explain the HTML markup. So here you see that I have this section which have a class of texts. And inside this text we have written a five H1 tag. But you see here that class, well, every single of them have a different class. For example, the first one have a class of first, second, third, fourth, fifth, so we can target them individually. So this is a very simplest structure. Now let me go ahead and close the default diseases because we not need it. And now let me just go right here and let's get started. So the very first year target, our first text, which is you see right here. So let me actually just make it big so you can see it clearly. There you go. Now what do we want to do here is that we want to make it look like a gradient color. Well, for that, we can just go right here and you're gonna pick any gradient you wish from here. So for example, I can just go to green and let me just grab something, which looks really nice. So for example, let's look at this one. This is obviously not looking at, that was nice, but it's fine, right? Just go ahead, grab the text. So let's grab this and pasted here. There we go. So now we got this background. If I say, if I go here, you see that we have that background may say, But again, we are not applying that a background as our text color for this hello text. So the next step is to clip this background which goes behind the text. Let me show you, let me just go write a, a L. Let me show you how to do it in CSS. Here, I can just say webkit background. And then I can say I'm clip. Not that mean that you want to keep this background but respected to what? Well, we want to clip it to this text here. So let me just go here. I can say at text. So now what's going to happen? You see that background is gone, but it is not because it's clipped to this texture, that background is still available behind these text. So what do we get to here? We can make this text fill color to be transparent, then we will be able to see that background. So let me show you how to do that. Here I can just drag it again webkit, and that is going to be text field color. In here. I can just sit a transplant. Now if I go here, you will be able to see that gradient Bagram you say regarded. Because first we clip that background to our text, you see right here. And then we have said this text field cannot to be transparent. So the background is now visible that kept banging on AC. Now it is working. So it doesn't matter which background you want to apply, it will work no matter what. So for example, if I just go here, let me just grab any color from this place M. So you see this sublime light. So let me just grab it. I'm gonna just grab it from there. Right here. I'm going to paste it right here. Save it, go up and say, now we have this different gradient color. So now this is how we can create these gradient text effect. Now let's go ahead and move on to our second text for that. Just lemme grab it second. And here we're gonna grab almost everything from this first class. And then we can paste it right here. And now you see that we have the same effect right here. But at this time, let me just actually zone a little bit. So there you go. I want that a shadow above these text. Let me show you. Let me just go right here. And here, we just need one property and that's going to be text a shadow. Yep, this one single property. Now if you're already familiar with tech shadow, then you know that you can apply here this measurment on excesses, then it's gonna be y axis Blair, and I'll just keep it 0. And then finally, the color, in this case, I just want to give it a white color. If I go ahead, you see that now we have that white color right here. Let me just give it a different color so it's going to be visible. This make it green. And if I go here to see that now we have that green, a shadow effect you say. So this is very powerful. So again, we need here white. And then what we can do here in order to get that shadow, well, you can't change another's shadow. Let me show you. I can just go right here. I just put a comma here. And again, I'm going to give it, let's say nine pixel for X axis and Y is going to be eight pixel. And let's make this blood to be five pixel. And the color is going to be, let's say RGBA color, which is red, green, blue and alpha transparency 000. And let's make it 0.157. Goya. And there you go. We got this amazing shadow you say, and this is how you second text is going to look. So this is how you achieved these texts effect him. So yeah, you can chain as much texture you want. You can check another one if you wish, right? For example, I can grab it from there. I'll paste it right here. And let me just, and I'll put another comma. And here what I'm gonna do is that you see that is the full pixel. While let's make this time, I might be like No, let's say five excel, you know, this is going to be like let's say four pixel. And let's make this something like a green is. If I just go ahead and see that we have another one, just print this and say so, yes, you can change it as much you want. But let me just get rid of it because I don't want it. I just wanted to give you the idea that you can do that. Next up. Let's go ahead and work on this third one. Well, for that, let me just go right here. And I'm just gonna say here, dot And here we're gonna make use of image. So I must adhere background, and this is going to be only simple background. And then here we can just say URL, and then we can just grab our image. In this case, I have this o dot PNG. So let me just go here. And again, you can see that image as a background again to keep it so, so simple, you already know how to do it. Grab this one. And again, we want to clip it to the text size, especially save it. Let me just go here and you see that now our image is sitting behind our text. Again, we need to make this color to be transparent. So for that, let me just go right here and here I can say color and let's make it transparent. So let me just go ahead and now you see that we have this image in our text. You see? And let me just do one thing. Let me just go right here. And again, you can just say here's something like a center, center, right? So now this is going to put our image into compete, a centre. And this is how it's looking. Again, it's not looking that good. So let me just get rid of it, save it. And there you go. This is our context with image. Again, we need this tech shadow right here, super-easy. Let me just go here and I describe this texture, shadow or limit, just do one thing. So I'm gonna grab this entirely, paste it right here. Abuse is going to be exactly the same, except this color here and also this one. But let me just go here. And first of all, you see, this is how it is going to look. So this is looking nice. So what I do here, I can also get rid of it. We're not going to need it. Again if you need it, just keep it. But I think this is looking fine for me, right? This is your third effect. So let's go ahead and work on this. A fourth one, which is going to be really fun. So it's gonna be fourth one. So this one is going to be just like this one. Yup. Vena need exactly the same thing. Instead, we're going to use your animated image. Yup. So let us paste it here. Actually let me just get rid of this last two because we'll actually put it here. So we have this background and we need to paste here image. Well for that, let me just go right here. And again, you'll see that we have this image, but this time I'm looking for any mated image. Well, for that you can just go to this goofy here, and you can just search your email. So example, I such a cute dog. And I see that we got this cute dogs. So now what I can do here, I can just grab any image I wish. For example, let me just grab this one, right? So let me just grab it here. I suddenly gets copied my clipboard on ledges. We're right here and I'm gonna paste it, save it. Let me just go right here. And you see that we are going to have that dog is say, we have it right? And again, this frame, it is not good you see, because of, you know, it's quite big image I guess. And magnetic connection is slow as of right now. So that's why you see this lacking. You just get the idea right? And again, we need to clip this unlimited image to our text. You know that, right? Yes. Just grab this one and I'm going to just go right here. Pasted. Yep, super-simple, clipped. They said that background is gone and now you know where it is, right? Yep. So this color to be transparent and you're going to see it. You say, There we go. This is really awesome. But let me just tell you something is that I have another N emitted. Ziff copied my keyboard. Yep, I'm gonna paste it right here. I found it form again, zippy here, you say seven. And this is going to be a different one and say, this is kind of a firewall. So this is looking pretty good. Lets go ahead and work on this final version, which is gonna be the intimated gradient text. Well, that's going to be little bit walk. Sometimes it's good idea. So I'm gonna say here flip. So the very first, we'd obviously going to need the same thing from the first-class. So let me just go right here and paste it, save it, and let me just go here. And now we have this gradient background. But again, we need to be animated background. Well for that, we need that animation. So let me just go right here and let's build it. Animations are gonna be keyframes. And let's say here BG. And here. What I'm gonna do is that on Juno percent, I'm going to do something. So what's going to be that? Well, let me show you here. You see that we have is green in color and this is the left part, and this is the right part. So what I can do basically is that on Juno percent, I can say here background position. So that's a background position. And let's make it left here. And on a 100%, you see on a 100% of what I can do, I can just make it right? Yes. Super-simple, isn't it? Yeah. Right. That's it. This is the image that we're looking for. And what I do, I can just go right here and I can see the animation. And then an image name is going to be busy. And I'm over the course of 2 second. And let's make it in finite and also make it ultimate. So basically it's gonna alternate the stuff. And you see that again, it is not working. And the reason is because we have only a 100% weight. So what do we do here? We can go up here and I need to use your one property, Nim background size, and then I can say here 300%. So now what I did basically is that I have expanded this a background size to be three times more than this actual background size. So this rate is going to feel right here first, then this current is going to take place. And then finally on 300% this is going to take place. So on a 100%, this will going to take place on 200%, this is going to replace on 300. This is going to take place. So let me just go ahead and once a silly it, you see, now it will start animating. You see that it is not working. I think there's a problem. You see, there is a problem is in finite. David go nervous every time I go here to see that now it's not working. You say. So now you see that is the 1-2 percent, then we have 200%, and then finally we have this broadly blue is going to be 300%. So now it's moving pretty fast and that's because of this 2 second duration. Well, you can make it five seconds. And you see that now it will take five seconds to compete that animation and say, now it is quite slow and quite smooth. So yeah, this is how we can create this gradient text animation. So these are our five virgin offer this gate in Texas a. And now you know that how to create each of them. So this is amazing but anonymous where you one more thing. So let us just duplicate it. And here I'm a target is portfolio. So this is just a very simple stuff. You see, this is a portfolio. So this simple portfolio project is just to show you how can you use this gradient text in real world. So there we go. This is a very simple portfolio project. Again, it's not style, and I have styled, copied my keyboard. So let me just go ahead and paste it. So let me just go right here. And let me just grab this default dot CSS, and I'm going to paste it right here, save it. If I go here, you see that now we have this one. It's a very simple limit. Just reset it and there you go. This is how it's looking, right? So see, it's super simple. But again, the point is just to show you that how can we use this amazing gradient text animation in your project? So it was a good idea. And you see that I have this portfolio right here. And I see that I have attached here default CSS and app.js is. So saying default CSS, we have obviously the default styling and amp dot CSS. This is the gradient texts we have just built, and I've also it has this one. So now let me just go right here. And let's say you want that getting texts effect right here. So let's see which one you want. For example, let's say I want this last one which is really good. So it's very easy to say this last one is actually the fifth one. So let me just go right here and say it's the fifth one. So I just grabbed this class from there. I'm gonna go to a portfolio and I want to apply this right here. So when I say glass and it's going to be flipped, when I tap in RSA, it start animating. This is how you use it in real-world project. So again, it's looking really nice. Ta1, this takes to be a gradient super simple. Just go right here and apply this class. And this time I want to apply the first one. So say a good idea as he, now we have this first without animation. Say again, I can just go right here. And for this right here, I can see the first one. But let me just get rid of it. Or let me just add something like let's say if I go here, this one is the second one. So let's apply the second one to our text, right, on this paragraph, right, I can see a second. David. Go ahead. And obviously this is looking horrible because this is not a suitable, so you can just work on, but I just wanted to give you a simple example, right? So let me just get rid of it. Let's keep it by default. Let me just write it up. And then we hope. Now again, let me just turn to the fourth one, so forth, ideally like it, so it's going to be fought. Here we go. Now you see that a businessman is now on fire. Super awesome. And this is how it's going to use this new learning skill in your real world project. So yeah, this is it for this movie. Thanks for watching. 16. Next Step: So now that we have designed those ten amazing you are design projects. The two stunning bonuses, you ready to use it in your own or your client projects. But now let me show you the next step after watching this class. So the step one that I would like to know what you really liked in this course. So go ahead and read this glass and write your detailed review so I can understand what you really liked. And I'll create more of the kind of projects you like most in the next part of ten Amazing CSS3, you had designed projects. So you will find that leave Review button underneath the video you're watching in liberal tab, as you can see here on the screenshot. Step two, I would highly recommend to go ahead and watch these two classes. The first one is CSS selector, The Complete Guide class. Now this is the base and must watch class to learn modern css coding and build amazing UI design projects you have learned to build in this class. And if you haven't already watched the first part of ten Amazing CSS3, you are in the project. I mean, look, I'm going to go ahead and watch the first part of this class where you're going to learn ten different amazing you are design projects. So go ahead and watch this two classes and start with CSS elected, The Complete Guide class. And if you want to learn my other classes, just search my name and a whole tree on Scripture and a sculpture will show you all my classes. I really appreciate you taking time to watch this class, and I hope you enjoyed learning ten Amazing CSS3 you added and Project's Part two. So see you in my next class. Until then, bye and take care.