Creative CSS drawing - make art with CSS - 22 projects included! | Ahmed Sadek | Skillshare

Playback Speed


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

Creative CSS drawing - make art with CSS - 22 projects included!

teacher avatar Ahmed Sadek, full stack web developer, freelancer & t

Watch this class and thousands more

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

Watch this class and thousands more

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

Lessons in This Class

32 Lessons (4h 29m)
    • 1. 1 course introduction

      2:45
    • 2. 2 diamond

      6:49
    • 3. 3 envelope with heart

      9:42
    • 4. 4 pepsi logo

      6:47
    • 5. 5 camera

      11:29
    • 6. 6 coffee mug

      8:45
    • 7. 7 batman

      18:46
    • 8. 8 captain america

      10:44
    • 9. 9 gear

      6:11
    • 10. 10 git logo

      6:49
    • 11. 11 google logo

      6:37
    • 12. 12 instagram logo

      6:05
    • 13. 13 panda drawing

      11:01
    • 14. 14 watermelon drawing

      5:26
    • 15. 15 adidas logo

      5:36
    • 16. 16 Brackets logo

      7:05
    • 17. 17 donut drawing

      11:21
    • 18. 18 figma logo

      6:38
    • 19. 19 react logo

      5:20
    • 20. 20 LG logo

      9:43
    • 21. 21 beaver part 1

      12:54
    • 22. 22 beaver part 2

      10:29
    • 23. 23 beaver part 3

      4:29
    • 24. 24 beaver part 4

      9:12
    • 25. 25 clock, books and cactus on a shielf part 1

      16:32
    • 26. 26 clock, books and cactus on a shielf

      6:25
    • 27. 27 clock, books and cactus on a shielf

      8:15
    • 28. 28 homer drawing part 1

      10:04
    • 29. 29 homer drawing part 2

      7:01
    • 30. 30 homer drawing part 3

      10:01
    • 31. 31 homer drawing part 4

      5:58
    • 32. 32 homer drawing part 5

      4:25
  • --
  • 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.

47

Students

--

Projects

About This Class

If you get bored in those regular CSS courses where the instructor just builds web pages and want to try something new that takes your CSS skills to the next level by using different creative approaches, or, if you just want to push all your CSS skills to their limits and learn how to use them to create shapes, drawings, and logos...then this course is for you!

I’m Ahmed Sadek, a full stack web developer and designer with more than 8 years of experience and I wanna welcome you to my Creative CSS Drawing course. This course will help you get the most out of your CSS skills; you will create more than 20 different shapes, logos and drawings. Some of them are complex in ways that are different from web pages, and the methods we’ll use to solve these creative puzzles are also different. That means this course will help you open your mind to things you never knew you could create with CSS, and hopefully, you’ll learn to see more of the fun, imaginative side of CSS in each lesson.

A very important heads-up, though: before taking this course you should have basic knowledge of CSS—things like positioning elements on the screen or adding borders and backgrounds.

The drawings and logos we will create include some well-known items, like the Batman symbol, Captain America’s shield, Homer Simpson, and logos for Adidas, Brackets (the code editor), Git, Google, Instagram, and Pepsi! We’ll even do some original illustrations, like a camera, a donut, a diamond, a panda, and more!

Don’t worry, though. You don't have to watch the lessons in any specific order to be able to follow along. You can just hop around and enjoy the lessons in the order that works best for you.

Meet Your Teacher

Teacher Profile Image

Ahmed Sadek

full stack web developer, freelancer & t

Teacher

Hi, it's Ahmed, glad you made it here!

i'm a senior web developer working as a freelancer for the last 7 years, i've developed hundreds of web projects and have tens of happy clients!

i've helped companies of all sizes to improve their business.

i can't wait to share all the web development knowledge i have with students here in skillshare so if you're interested in learning modern web development technologies we will see each other inside my courses!

 

See full profile

Class Ratings

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

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

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

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

Transcripts

1. 1 course introduction: If you get bored in those regular CSS courses where the instructor just builds webpages and want to try something new that takes your CSS skills to the next level by using different creative approaches. Or if you just want to push all your CSS skills to their limits and learn how to use them to create shapes, drawings, and logos. Then this course is for you. I'm Ahmed Sidak, a full-stack web developer and designer with more than eight years of experience. And I want to welcome you to my creative CSS drawing course. This course will help you get the most out of your CSS skills. You'll create more than 20 different shapes, logos, and drawings. Some of them are complex in ways that are different from webpages. And the methods will use to solve these creative puzzles are also different. That means this course will help you open your mind to things you never knew you can create with CSS. And hopefully, you'll learn to see more of the fun, imaginative side of CSS in each lesson. A very important heads up though, before taking this course, you should have basic knowledge of css, things like positioning elements on the screen or adding borders and backgrounds. Okay? Okay, With that, let's take a look at the examples we'll be creating throughout this course. So you'll know exactly what we're going to be doing. Enjoy. Yes. Yes. 2. 2 diamond: Hello everyone, welcome to this new lesson in the course. In this lesson we're going to create this nice looking diamond using only HTML and CSS. So let's see how we can do that. I will start here in my HTML by adding a div and giving it a class of diamond. Then inside that div, I will add four spans, and each span will be a part of the diamond shape. So before we begin creating this diamond, Let's look at some demos to help us figure out how this diamond shape was created. I will go to our first demo and you can see we just have four squares and each square has a width and height of 0. There are four thick borders around each one with a different color for each border. You can see that the first square in the top left corner has four borders. A top yellow border, a right red border, a blue bottom border, and a green left border. The four squares will be the four spans we added inside our diamond div. And we will set the height and width of each span to 0. Then we will add four borders to each one with four different colors. And that will give us the four triangles we are seeing right now. Okay, Very cool so far. Now after doing that, What's next? Well, let's take a look at the next demo to see what we're gonna do next. Here you can see we have the same four squares as before, but now the first square has a transparent top and left borders. We just change the border color to transparent instead of the solid colors. All right, I think we're getting closer to our diamond shape. We just need to rotate the diamond div to the right by 45 degrees. So we will have the diamond shape we want. And that's what we did in our next demo. You can see the diamond div is now rotated by 45 degrees, giving us the diamond shape. And finally, one thing left, which is changing these border colors that we use to just clarify what we were doing and adding the colors of the diamond like we see in this demo. So now you can understand the idea behind our nice little diamond is fairly simple. We created it using only CSS Borders. Cool. Now it's time to see it all in action. I will go to my CSS targeted div with a class of diamond. And position, relative width, 200 pixels. Height 200 pixels as well. Okay, Now I will target just the first of the four span sitting inside our diamond div. Then I will say span nth child one. Then inside that I will add position absolute, top 0, left 0 as well. Width 0 and height 0. Then let's add our borders. I will add border top 50 pixels, solid yellow. Then border rate. Pixels, solid, red, border bottom. 50 pixels, solid, blue. And finally border left. 50 pixels, solid, dark green. So now you can see the first square in the top left corner now has these four borders around it. Now let's add these borders to the next square and position it next to this one. I will go back to my CSS, copy this code, paste it again, change one to two to target the second span. And in order to make this square sit next to the first one, we need to change the left value here to 50 percent instead of 0, so that the second span will be shifted by 50% of the container width and sit next to the first one. So you can see now the second span is sitting next to the first one. All right. Now let's add the third enforced spans and we'll go back to my CSS again, copy the first span, paste it again, and change 123, and change tab to 50 percent so that this third square will sit below the first one. Then I will paste the first span again and change one to four to target the fourth square. Then change both left and top to 50 percent so that it will sit in the bottom right corner. Then I will go back to the browser and reload. And now you can see we have the four squares sitting in the positions we want them to be in. And each square has four borders around it that are triangles. Awesome. Now it's time to make the top and left borders of the first square transparent so that we can get the diamond shape we want. I will go right here inside the first square. And I will change the top border color from yellow to transparent. Then I will do the same for the left border. I will change it from dark green to transparent as well. And now you can see we have the diamond shape, but we just need to rotate it 45 degrees to the right so that it will look like a diamond. So I will go here inside the div with the class of diamond that contains all four of the spans inside it. And I will add transform, rotate 45 degrees. Awesome. So here we have the diamond we want, and there's only one thing left to do to finish it. And that is changing the colors of the borders to make it look like a realistic illustration of a diamond. I will just pause the video and add the different colors of the borders. Then I will come back and reload to see the diamond we created. Okay, I've added all the border colors, and now I will go and reload the browser page. And here we have it. The diamond is now finished and it looks amazing. And we created it using only CSS. That was a lot of fun. 3. 3 envelope with heart: Hello everyone, welcome to this new lesson in the course. In this lesson, we are going to create this nice envelope illustration with a heart drawing that's beating on it. We will only use HTML and CSS to create both the envelope and the heart. So before going into our code editor, let's take a look at the envelope. You can see the envelope shape is just for borders. The left and right borders are a little bigger than the top and bottom wounds. Also, the left and bottom borders have the same color, which is the darkest gray tone of the envelope, while the top border has the lightest gray tone, and the right one has a mid-tone. So creating the envelope will be very easy. Then after that, we will see how to create the heart. All right, Now let's start. I will go here in my HTML, add a div, give it a class of card. Then inside it, I will add another div and give it a class of heart. And this is it for the HTML. Then I will go to my CSS to start drawing our shape. I will start by targeting the div with the class of card. And I will add width 0, height 0 because it doesn't have any width or height, It's just borders. Then I will add border top, 100 pixels. Solid. And this light gray color. Then border rate 170, solid. And this darker gray. Then border bottom, 100 pixels solid. And this gray color, which is the darkest of them all. And finally, border left. 170 pixels solid and the same darker gray color. All right, so now you can see we have these four borders. And with these colors and widths, they're giving us the exact shape of the card we're looking for. Now, let's learn how we can create the heart-shaped using CSS. I will target the div with the class of heart. And I will add width, 32 pixels. Height 32 pixels as well, to get a square shape. Then I will add background color. This nice red color. So you can see we have just a red square sitting in our div and is growing from the center point right here, horizontally to the right, and vertically to the bottom. So in order to center it, I will go back here and transform. Translate minus 50 percent and minus 50%. Cool. So now you can see the red square is now perfectly centered. Now we will see step-by-step how we can create the heart shape. We will use both the before and after pseudo elements for doing that. So I will go right here and add heart colon before. And I will just make the content empty. Then I will add position, absolute, top 0, left 0 as well. Then width 100%, and height 100%. Then I will add background color. Let's add blue for now. Good. Now you can see we just have the before pseudo element with the blue background color sitting on top of our div with the class of heart. So what we need to do now is we need to make the blue div moved to the top by half of its height. So I will go back to my CSS and inside the before pseudo element, I will add transform, translate y minus 50%. Now you can see the blue div moves to the top, a distance equal to half of its height. Great. Now I will copy all of that. Paste it again. And I will just change before to after. And I will change the blue background to let see green. Now, this time we want to move the after pseudo element to the left, not to the top. So I will just go right here and change Translate Y to translate x. Now you can see it move to the left, a distance equal to half of its height. Good. I will go right here inside the div with the class of heart. And inside the transform declaration, I will add rotate. And I will rotate it by 45 degrees. So now you can see the div is rotated by 45 degrees and both the before and after pseudo elements rotated with it. And thank you. We're telling yourself that we are getting pretty close to the finished product here. And that is right. All we need to do now to get the heart shape is to go right here to the before pseudo element and add border-radius. The percent. Then I will do the same for the after. And now you can see we got the heart shape we want. Let's go back and change the background color for both of them to read as well. Okay, now we've got it and we need to work on the animation to make this heart beat. Here is a slow demo of our animation so that we can see it better. I will reload the page and you can see the heart stays in its place for awhile. Then it scales up, then scales down a little, then scales up again, then scales down to its original size, stays that way for a while, and then repeats the same process infinitely. So let's see how we can create that. I will go to my CSS, create a new animation and name it heartbeat. When at the beginning of the animation at 0%. I will copy the transform property from the top and paste it here so that nothing would change. The heart will still be centered and rotate it. Then I will add scale. One because we want it to start at its original size. Then I will copy all of that and paste it again five times. And I will add some percent intervals. So I will add 25 percent, 3050, 7100%. Good. So at 25 percent, I will keep the scale the same. Because remember, the heart doesn't change for awhile before the movement starts. From 0% to 25 percent of the animation duration. 12 hard to stay static. Then at 30 percent of the animation duration, I will increase the scale to 1.4 times its original size so that the heart gets really big. Then at 50 percent, I will scale it down a little bit. So I will make it 1.2. And at 70 percent, I will scale it up again to 1.4. Then at 100%, I want to scale it down to its original size, of course, so I will leave it like that. Now, we need to add this animation to our div. So I will go up here and add animation, heartbeat. And the animation duration, 1.4 seconds. Linear and infinite, of course, because we want the animation to be repeated forever. And now you can see our heart is beating. It stays still for awhile, then gets bigger, then a little smaller than bigger again, then returns to its original size, and so on and so forth. And that is exactly the effect we want. And that's it, everyone. We've created this nice envelope or card with a nice hard on it. 4. 4 pepsi logo: Hello everyone, welcome to this new lesson in the course. In this lesson, we're going to create the Pepsi logo using only HTML and CSS. It's going to be an easy and fun lesson. So let's see how we can create it. I will start here in my HTML by adding a div and giving it a class of Pepsi. And that's all we need for our HTML. Then I will go to my CSS and I will target the Pepsi class. Give it height, 300 pixels, width 300 pixels. Background color, this blue color. So the Pepsi div will be the blue part of the Pepsi logo, and we will be adding the white and red parts to it to form the logo shape. And because the logo is a circle, I will add border-radius, 50 percent. Then border, 10 pixels, solid. White. Finally, position relative. So now you can see we just have a blue circle with a white border around it. Cool. Now let's work on the white part of the logo. We will use the before pseudo element to create this white part. So I will go to my CSS and say Pepsi colon before. And inside that I will add content empty strings because we don't want any text in their position. Absolute height, 400 pixels, width, 500 pixels. Now, if we go to our demo and we take a look at the white part, you can see it's curved right here. Then it's a straight line, but it's not a circle. In other words, it has a curve or a radius that is less than 50 percent. Unlike the red part, you can see the red one is part of a big circle. Alright, let's go back. In order to add this curve to the white part, I will add border-radius, 25 percent. Then background color. White, of course. So now you can see the white background is completely covering up the blue circle because it has much more width and height. So now we need to position it properly in order to make the blue part appear again. We need to shift it to the left and to the top. And maybe rotate it a little so that we can get the shape of the blue part to look how we want. Let's actually do that in the browser with a little trial and error. So we can see clearly what is happening. I will right-click and inspect the white part. And I will go here inside its declaration, and I will add top. We want to shift it to the top, so we will use a negative value. Let's say minus 50 pixels to start. So as you can see, the white background was shifted toward the top by 50 pixels. In order to change the value in real time, I will press on it and increase or decrease it using the arrows on my keyboard that will change the values and affect the element immediately as you can see. So I will keep shifting the white part toward the top until I think it's in a good position. I think mine is 160 pixels is good. Then I will hit Enter and add left. And I will also play with the values to shift the white part to the left until it's in a good position. So I think minus 240 pixels is a good position. Then we want to rotate it a little. So I will add transform, rotate, and I will rotate it by minus 18 degrees. Cool. So now you can see the white part looks exactly the way we want. It's curved from here, then it becomes a straight line. Okay? Let's just copy those values and paste them in our CSS. Okay, Now we want to work on the red part of the Pepsi logo. We will use the after pseudo element to create it. I will go right here and say Pepsi colon. After. Then, inside that, I will add position, absolute content. Empty strings, height 500 pixels, width 550 pixels, border-radius, 50 percent, because it was a circular shape when we looked at our demo and background color, our red color. So here is the big red part sitting on top of our blue circle again. We just need to move it around until it's positioned properly. So I will target it inside my inspector. And I will add tab. And I will start shifting it upward. Then I will add left, and started shifting it to the left. Here we go. I think those values are very good. So let's copy them and paste them into our code. Then finally, let's remove all the parts that are visible outside our circle so that we can get our logo. I will go inside the Pepsi selector and I will add overflow. Hidden. In just like that, you can see we now have our Pepsi logo. It looks great and we did it all using simple CSS. 5. 5 camera: Hello everyone, welcome to this new lesson in the course. In this lesson, we will learn how to create this camera illustration using CSS. You can see we have the camera body, the flash, the camera button, and the lens, which contains three circles inside each other. The outer white circle, then a dark green one inside it. Then another circle consists of those four green colors. So let's build that camera together. I will start here in my HTML by adding a div and giving it a class of camera. Then inside that, I will add another div, give it a class of lens. And this will be the white circle. And inside of it, I will add another div and give it a class of inner lens. And that will be the dark green lens. Then inside of that, I will add another third div and give it a class of inner lens to which will become the core lens that is made up of four colors. Now, after adding the three lenses, I will go below the lens div. And I will add a new div, give it a class of flash. And then finally the last div, and give it a class of button. All right, now let's go to our CSS to start working on those divs. I will start by targeting the div with the class of camera, which represents the camera body. And I will set its width to 205 pixels and its height to 155 pixels. Then I will add background color. This nice gray color. Good. Onto the next step, I will add border radius 15 pixels to get some curves on the corners. Then box shadow, 0, 10 pixels, 15 pixels minus 13 pixels and black. So everyone, if you're wondering what those values I just added for the box shadow property are. Well, the first value here is the horizontal distance of the shadow from the element. We want it to be exactly below the element. So we added 0. But for example, if we wanted it to be five pixels to the right of the element, we could just add five pixels. Then the next value is the vertical distance, and we set it to 10 pixels. Now this will make the distance or length of the shadow 10 pixels. Next, the third value is how blurry the shadow is. So if it's a high value, the shadow will be very blurry. And the fourth value, It's called the spread, and basically tells the browser over what distance do we want the shadow to be blurred out? If we add a high value, it will be blurred out over a large distance. And if you're wondering how I know these values are what we want, I usually use a generator for box-shadow values that I add so I can play around and see the effect I want. And then just copy the code that was generated for me. I usually use a site called CC asthmatic.com slash box hyphen shadow. All right, let's get back to work. I will finally add position relative. And now you can see we have the camera body sitting in the browser. Okay, now that that's done, we will work on the lenses. But before working on them, I want you to take a look at this demo. Those are our lenses, but I've removed their border radius values so that you can see that they're just three squares centered in the camera body. First is the outer white square, and then centered inside it is a smaller green square. Then in that green square is another smaller square that is formed from four identical triangles with different green colors. We will use borders to create those triangles. The way we learned in the Batman logo lesson, those four triangles are just for borders to an element which doesn't have any width or height. I just wanted to let you see this demo so you can get a good idea of what we're going to do. Okay, Now let's go back and start working on the outer white square. Remember, is the one with a class of lens. So I will target it and add width, 125 pixels. Height 125 pixels as well. Background color. This nice white color. So now you can see it sits in the top left corner. By default, we want to center it horizontally and vertically inside the camera body. And we can do that no problem. By going back to the camera body and adding display, flex, justify-content, center to center it horizontally and align items center to center it vertically. Cool. Now you can see it's centered inside the camera body. So remember, every time you want to center an element inside the container, you can do that very easily using Flexbox. You just go to the container and add those three values. If that sounds intriguing or if you want to learn more and master Flexbox, I have a course covering it in depth here on Udemy. Anyway, we want to add some shadow to the white square. I will go back inside the lens selector, and I will add box-shadow, 08 pixels, 0, 0, and this gray color. Awesome. Next, let's work on the inner green square. I will go to my CSS and target the div with the class Enter lens. Then inside it, I will add width, 105 pixels. Height, 105 pixels. Background color. This dark green color. And you can see it sits in the top-left corner of the white square. So in order to center it, we will copy the Flexbox code and paste it inside its container, which is the white square that has the class of lens. Cool. Now we have one lens left, which has the class of inner lens too. So I will target it. And as we said, the four triangles will be created using borders. So I will add border top, 31 pixels. Solid. Green. Border rate. 31 pixels solid. And another tone of green. Border, bottom. 31 pixels, solid. A third tone of green. And border left solid. A fourth tone of green. And of course, in order to center it, we will add the Flexbox code to its container. Awesome. So now you can see the three squares are looking exactly the way we want. Now, let's turn them into circles. I will go inside each one of them and add border-radius 50 percent so that they will become circles. Perfect. Now, let's work on the flash and button parts of the camera. Let's start with the flash. If you remember, the flash was placed in the top right corner of the camera body. So let's target it first. Then add position, absolute width, 20 pixels. Height, 20 pixels as well. Background color. Our white color, border radius, 50 percent. And box-shadow, 04 pixels, 0, 0, and gray. So now you can see it's centered inside the camera body due to the Flexbox code that we added inside the code for the camera body, which is actually the container of our flash. So we can override this position by going back here and adding rate 15 pixels and top 15 pixels as well. And now you can see the flash is positioned on the top right corner and looking good. Now let's work on the camera button. It was positioned on top of the camera body on the left side. Let's target it and add position. Absolute width, 30 pixels, height, five pixels. Background color. Our green color. And border radius, 60 pixels. Okay, Here we have it. Let's just position it right. I will go back and add left 16 pixels and top minus five pixels to make it sit on top of the camera body. Awesome. So you can see it properly sits in its position. And with that, we finished our camera and it looks great. 6. 6 coffee mug: Hello everyone, welcome to this new lesson in the course. In this lesson we are going to create this nice coffee mug illustration using of course, only HTML and CSS. And we will learn how to use the box shadow property in creating this illustration. So if you take a look at it, you can see it's just a brown circle here. Surrounded by another lighter brown circle, then surrounded by a darker one. And that makes up the coffee part inside the mug. Then this coffee inside the mug is surrounded by two yellow circles that create the mug shape. A dark yellow circle. Then a lighter yellow. We will learn how to create all of these circles using the box shadow property. Then we have the hand of the mug which will be created using the before pseudo element. This'll be a fun lesson. So let's go to our HTML to start creating it. I will add a div and give it a class of coffee mug. Then I will go to my CSS to start styling this div. I will target it here and add position. Relative width, 150 pixels, height, 150 pixels. Background color, this brown color, and border-radius, 50 percent. So here you can see this is the core inner circle that will be surrounded by the other circles. All right? We said that all other surrounding circles will be created using the box shadow property. So how are we going to do that? Well, let's just add the code of the first circle, then explain how it works. I will go here and add box-shadow, 0, 0, 0, 10 Texas and read. So here we can see we have a red circle surrounding the brown one. So let's go to our code and see why that was the result. The box shadow property accepts five values. The first value is the horizontal distance between the element and its shadow. We set it to 0 because we don't want any horizontal distance between them. So for example, if I go here and add 10 pixels instead of 0, you can see the red circle is now shifted to the right by ten pixels. Cool. The second value is the vertical distance between the element and the shadow. So I will change it here to 10 pixels. And you can see it move ten pixels towards the bottom. Then the third value is how blurry the shadow should be. So because I've set it to 0 here, it's very sharp and not blurry at all. But let's say I want it to be blurry. I can change it to 10 pixels. And now you can see the circle is blurry. Finally, the fourth value is the density of the shadow, or over what distance the shadow will be distributed. So it's density now is ten pixels. Let's say I want it to be distributed over a larger distance. Let's say 40 pixels. You can see it's now more dense and is distributed over a larger distance. Now, right? Now let's go back and reset all of this. I will make the horizontal distance 0 and the vertical 0 as well. I don't want it to be blurry, so I will set this to 0 as well. And I want the surrounding circle to be just 10 pixels. And I will change this red color to the lighter brown one. And here you can see the surrounding circle looks the way we want. Now, after understanding the box shadow property, I will pause the video and the other values that make the other surrounding circles, and then we will explain each one of them. So you can see that when you want to add another value for the box-shadow to your element, you just add commas between each one. So here you can see I've added several box shadows and they gave us this shape, which is exactly what we're going for. So the second box shadow here is this surrounding darker brown circle. You can see I just changed the density of the shadow to 25 pixels and also change the color to a darker brown. The next shadow is the inner yellow circle. Again, I just changed the density to 42 pixels and the color to this dark yellow and also did the same for the next shadow, which represents the outer yellow circle. I said it's density to 65 pixels and its color to this lighter color. And those are the shadows that represent these other circles outside the mug that look like someone's spilled some coffee. So let's take a look at them one by one and explain them. I will go here in this box shadow property, and I will change the color to red. So we can see where this circle is located. And you can see it's this circle that sits underneath the mug. So how is it located in this position, and why does it look like this? Well, let's go back and see the values that it has. You can see the first value, which is the horizontal distance, is 0. So it won't move to the right or to the left. And this is true because it moved downward. Then the second value, which is the vertical distance, is 120 pixels. So you can see the circle is moved by 120 pixels vertically, downward. Then the third value is how blurry it will be. And because we don't want it to be blurry, it's set to 0. And finally, the fourth value is over what distance should it be distributed or the density of the shadow. And because it's smaller than the original circle, we set this value to minus 25 pixels. Understand if we set this value to 0, the size of this shadow circle will be identical to the original circle, which is our element. But this minus 25 pixel value will make the shadows smaller. And in the previous shadows, this value is always positive because the shadows were always bigger than our original element and actually they were surrounding it. And finally, the last value is the color, and we will change it back to our brown color. Cool. Now, after understanding the box shadow property, I want you to do the same for other box shadow values that created those coffee drops. I want you to change the color to see which one is which. Then look at the values to try to figure out why they look like this and why they are located in their position. All right, now let's move to the hand of the mug. We will create it using the before pseudo element. So I will go right here and say coffee mug. Colon before. And inside that I will add content. Empty strings. Position, absolute, 75 pixels, width, 60 pixels. Background color, this yellow color. And here you can see we have this yellow background sitting on the top left corner of our div. Remember, our div is the inner brown circle. Cool. Let's now position it in the right position. I will go back and add top 85 pixels and write 75 pixels. Then we want to have some borders around it. I will add border-radius 50 pixels. Now, you can see it's sitting in this new position, but it just needs to be rotated so that it will be attached to the mug body. Let's go back really quick and do that. I will go right here and add transform, rotate 45 degrees. And just like that, you can see it's now attached to the mug body and looking exactly the way we want. And here it is, everybody. We have just finished this coffee mug illustration. It looks nice and we made it using only HTML and CSS. 7. 7 batman: Hello everyone, welcome to this new lesson in the course. In this lesson, we will learn how to draw the Batman logo using only HTML and CSS. So let's get to it. I will start here in my HTML by adding a div and giving it a class of oval. This will be the outer yellow oval that contains the logo inside it. Then inside it, I will add another div and give it a class of logo. And this will be the class that contains all of the logo pieces that we will create. Inside that we will add the divs that we will use to create our logo. We will use nine divs to create it. Six of them will be ovals, two will be squares, and one will be another shape that we will use to create the ears of the logo. We will learn how to use all of them in order to finish the logo. But first, let's add them here. I will add a new div and give it a class of 0, 1, meaning this will be the first oval. Then I will copy that div and paste it again five times. And I will change the number for each time. Okay? So those six deals will be the ovals that we will use in creating our logo. Then below that, I will add two divs, that will be squares. So I will add the first div and give it a class of S Q one. Then the second div, give it a class is as q2. Then finally, we want to add the div that will be used to create the logo or the mask ears. So I will add a div and we'll give it a class of years in our array. Now we have all the pieces ready in our HTML. Let's go to our CSS to see how we can use them to create our logo. First of all, we will start with the easy part, which is the outer yellow oval. I will target the div with the class of oval, and I will set a width and height value for it. I will add width 230 pixels and height 130 pixels. Then background color, this yellow color. Then I will add border-radius, 50 percent. And finally, position relative. And now you can see we have our yellow oval shape and we get this oval shape because we set the border radius value to 50 percent. This value would give us a circle if the width and height are equal. But because the width is bigger than the height here, it's giving us this oval-shaped. Let me show you what I mean. If I go back and make the height equal to the width, it would give us a circle, right? So if I change the height here to 230 pixels, you can see it's now a circle. And of course, if the height is bigger than the width, it will give us an oval which is bigger along its y-axis, then along its X axis. Anyway, let's change that height back to 130 pixels. All right, now we want to work on the logo inside this yellow background. If we take a look at our demo and if we think a little about how we can create this sheet, we can do this pretty easily. The idea is very simple. We will create another smaller black oval inside the yellow one. Then we will create the other smaller yellow shapes that we'll cover specific parts of the black oval. And since they're color will be yellow, the same as the outer oval, then it will appear as if we drew the black logo, but we didn't. We just created an oval shape and a lot of other shapes that covered specific parts of this black oval and make it look like the Batman logo. To demonstrate this better, let's take a look at another demo. Here we go. I just changed the colors of all the parts from yellow to these different colors to help you better understand how we'll create this logo. So if we look at these shapes, you can clearly see that the four shapes at the bottom are just for ovals that are positioned and rotated in a way that will cover the black background and give it the shape of the logo along the bottom. Also, on the top left and top right corners of the logo, there is a circle that will give us this rounded shape and a square above it, because we want this part that shifts the ears to be Street and sharp. So we'll add this little square in this position. And we also have the ears of the mask will see how to create those. So what I want you to understand is that it's all about visualizing the idea. I looked at the Batman logo image in trying to think of how to create it. I got this idea. And then the size and positioning of these shapes comes from some trial and error in the browser. All right, let's get back to the yellow oval and let's go and target the black oval that is actually the logo. I will target the div with the class of logo. And inside it, I will add position. Absolute width, 212 pixels, height, 112 pixels. Background color, black, and border-radius, 50 percent. So now you can see the black oval sits on top of the yellow, and now let's position it to make it sit in the center of the alone. I will go back inside the outer yellow oval and I will add display, flex, justify content center, and align items center. So now you can see it's centered horizontally and vertically inside the yellow oval. This is a very handy way of centering elements using Flexbox. You can also just center it by positioning it using the top and left properties. So because its height is 112 pixels smaller than the outer Oval by 18 pixels, you can just set its top property to 9, which will push it to the bottom by nine pixels and leave a space of nine pixels above and below it. This in turn, will center it vertically. You can then also do the same using the left property to center it horizontally. Either way will work fine. Cool. Now that we have the black oval inside the yellow one, we're ready to work on the sheets inside it. If we take another quick look at the multicolored demo, you can see that the four parts that create the bottom of the logo are all rotated ovals. Can you see them? Good. Let's go back and create them. I will target the div with the class of 0, 1, which is the first oval. And I will add position, absolute background color, blue for now. Width 33 pixels, height, 70 pixels, border-radius, 50 percent. So now you can see we have the blue oval and it's positioned in the top left corner of the black oval. So let's just change its position to make it cover up the black oval the way we want. I will go back and add top 67 pixels, left, 44 pixels. Now you can see the blue background is set here in this new position at the bottom of the black oval. Now we need to rotate it a little to the left or counterclockwise. So I will go back and add transform, rotate minus 41 degrees. All right, We've got it rotated to the left. And as I told you earlier, I tried different values for positioning and rotating these shapes until I came to a result that look like the logo. So I'm just adding those results here. Seems good. Now, if you notice, you can see the blue background is extending below the black oval, which we don't want. So in order to get rid of that, I will go back inside the oval selector and I will add overflow hidden. Cool. Now let's change the color of the blue oval to yellow so that it will blend in with the yellow oval and form the first shape of our logo. So I will go right here and change this blue color to our yellow color. And you can see it's now looking much nicer. All right, Now that we've created the one on the left side, let's create the one on the right side. I will copy all of this. Paste it again and change 0, 1, 2, 0, 2. And because we wanted on the right side, I will change left to right. Awesome. So here it is on the right side, but it's rotated to the left. We want to rotate it to the right. So I will go back and remove this minus to make it 41 degrees instead of minus 41. And now it's rotated to the right or clockwise. Awesome. Now we have the other two ovals left at the bottom. Let's create them. I will go here and target the third oval. And I will add position. Absolute width. 38 pixels, height, 70 pixels, background, green for now, and border-radius, 50 percent. Again, you can see the green oval is set in the top right corner of the black one. So let's go back to position it. I will add top 73 pixels, left, 68 pixels. And also let's rotate it. I will add transform, rotate. And we will rotate it by minus 15 degrees this time. So it's now positioned next to the first oval, as you can see. Now, right now let's change its color to yellow. I will go back and change this green color to yellow. Awesome. Now let's create the other one. To finish the bottom of the logo. I will copy all of this, paste it again, and target the fourth oval. And I will change left to right and remove the minus. Cool. So now you can see the bottom part of the logo is finished and looking exactly the way we want. Now we need to work on the top part. Let's take another look at our demo. You can see here in the top right corner, there is an orange oval that makes the rounded part and a square on top of it to make the straight edges of the ears. So let's go back and create those. I will go right here and target the fifth oval. And I will add position, absolute width, 37 pixels, height, 40 pixels, border-radius, 50 percent. And background color. Our yellow color. So here is the yellow oval that appears in the top-left corner. Let's go back and position it properly in the place we want. I will go back and add tab 0 and left 57 pixels. So it will move to the right by 57 pixels. Great. Now let's create the square that will sit on top of it and make the edge appear as a straight line. I will target the div with the class of SQ one. And I will add position. Absolute height, 20 pixels. Width, 20 pixels. Background color, green. Top 0 and left 74 pixels. So here you can see the green background is covering up the black oval and making the edge a straight line instead of a circular one. Okay, To finish, let's just change its color to yellow. Now. Right? Now let's do the same thing for the right side. I will copy these two blocks of code, paste them again and target the sixth oval. And just change left to right. Then I will target the second square and also change left to right. In just like that, we now have those two shapes on the top of the logo, and we're getting really close to the final result. The only thing left is the ears of the mask. Let's take a look at our demo and see how they were created. You can see that the shape we have on the right here is the sheet that forms the ears. We have two black triangles, which are the ears. And between them we have this yellow background that will blend in with the outer yellow oval and give us the final shape of the ear. So let's go back and see how we can create that. I will go to my HTML and I will add a div with a class of test. Then I will go to my CSS. So if I target this div with the class of test and add border bottom 20 pixels, solid, green. Then if I do the same for all three of the outer sides and add a border of 20 pixels each time that change the colors. You can see we end up with the four borders and they're represented by four triangles because we didn't add any width or height to the element with the class of tests, we just added the four borders. So if I go back and add a width of 40 pixels, for example. Now the top and bottom borders aren't triangles anymore. The width increased and they became equilateral trapezoids. So I will go ahead and remove the top border. Then I will increase the bottom border to 40 pixels. And finally, I will rotate the div along its X axis by 180 degrees. In other words, I will flip it vertically. And this gives us the shape we want for the ears. So let's do that and position it properly for the div with the class of ears. I will go right here and target to do with the glass of years. Then I will add position absolute. Top 0, left, 95 pixels. Border bottom. 12 pixels, solid. Green. Border left. Six pixels. Solid. Red. Border rate. Six pixels, solid red as well. Width 11 pixels. And finally, transform, rotate 180 degrees. So now we have the red ears with the green background and they're sitting in this position thanks to the left value we added to them. Now, let's just change the colors to make the logo look exactly the way we want. I will go back and change the color of the left and right borders to black, so those become the ears. And I will also change the color of the border bottom to yellow to make it blend in with the yellow background. I will also remove this test code because we don't need it anymore. And now you can see our Batman logo is looking exactly the way we want, which of course is very nice. 8. 8 captain america: Hello everyone. Welcome to this new lesson in the course. In this lesson, we're going to create Captain America's shield logo. You can see here we have an outer red circle than inside it. We have a white circle, then another red circle, then a blue one, which contains the star shape. So let's see how we can create that. I will start here in my HTML by adding a div and giving it a class of S3 for circle three. So this will be the outer red circle that will contain all the other circles inside it. Then inside of that, I will create another div and give it a class of C2. This will be the white circle that's inside the red one, then another div. And give it a class of C1. And this will be the red circle inside the white one. Then inside that, I will add another div with the class of center. This will be the smallest blue circle that sits in the center. It has the star shape inside it. And in order to create the star shape, we will use three divs. So I will add the first one, give it a class of Arrow and top. Then I will, can't be that div. Paste it again two times. And I will change the top class to left, then two right? So all of the three classes that will create the star shape have a similar class of arrow for general styles. Then they have different classes for positioning, which are top, left, and right. All right, Now let's go to our CSS and start creating our logo. I will target the div with the class of C3, which is the outer red circle. And I will add width 260 pixels. Height 260 pixels as well, because it's a circle. So the width and height must be identical. And background color, our red color and border radius, 50 percent. So now you can see we just have a red circle that's sitting in the center of a browser page. This is the outer circle of the logo. Let's continue working on the circle that's inside it, which has the class of C2. I will go to my CSS and target this circle. And I will add width 210 pixels. Height 210 pixels. Background color, white, and border-radius, 50 percent. And now you can see the white circle is sitting inside the red one, but it's in the top-left corner, not in the center. In order to center it, we can use several methods, like positioning it properly. Or we can just use Flexbox. I will go with Flexbox and we'll go back to its container, meaning the outer red circle that has the class of C3. And I will add display flex, justify content center to center it horizontally and align items center to center it vertically. And now you can see the white circle is properly centered inside the red one. All right, let's work on the inner red circle that's inside the white. When I will just copy all of that, paste it again, and change C2 to C1. Then I will change width to 150 pixels and height to 150 pixels as well. I will also change the background color to our red color instead of white. And now we have the red circle and it's sitting on the top-left corner too. So in order to center it, we will go to its container, which is the white circle that has the class of C2. And we use flexbox to center it. So I will just copy these three lines of code and paste it in here. And now the red circle is centered properly. Alright, now let's work on the blue circle that sits inside the smaller red circle and has the star shape inside it. Remember, this blue circle has a class of center. So I will target this div and add width, 100 pixels. Height, 100 pixels. Background color, our blue color, and border-radius, 50 percent. And of course, in order to center it, we will go up here inside its container and we will paste those three lines of Flexbox from earlier responsible for sintering. Now, right now the logo is almost finished. We just need to create the star shape. So let's learn how to do that. I will go to the blue circle that has the class of center. And I will just add position relative. Then I will target the div with the class of error. Now, remember all three of the divs inside this div with the class of center have this arrow class. So the styling we will add here will be applied to all three divs. Now, all right, I will start by adding position. Absolute. Then border, top 35 pixels, solid white. Then border left. 48 pixels, solid. Green. Then border rate, 48 pixels, solid pink. And border bottom. 48 pixels, solid brown. And finally, I will set the width and height of those three divs to 0. So I will add width 0 and height 0. I want to let you know that what this will do is it will give us four triangles that are the borders we added here. We did this in previous lessons. So here you can see we have four triangles that make up the borders. So the border top is white and the border bottom is brown, and so on and so forth. Notice that the Border tab is slightly smaller than the other borders as it has a width of 35 pixels, while the others have a width of 48 pixels. This will make our star look good. And of course we're seeing only one of the devs because they're stacked on top of each other due to the fact that we set their position property to absolute, that will make all of them sit in the top-left corner of their container and wait for us to position them where we want. That's why they're stacked on top of each other. So just to show you, if I go back here and remove this position absolute code. You can see they now sit one above another because they're divs and devs are block elements. So let's add position absolute again. All right, now, in order to create our star-shaped, we will only need the top border. We won't need any of these other three borders. So I will change all of their colors too, transparent. Okay, so now you can see all three of the other borders are transparent and they disappeared. They're there, but they just have no color anymore. Cool. Now, in order to create the star shape, we will just need to play around with these three top borders and position them differently to get our star shade. So I will target the first one, which has a class of tab. And I will add top 35 pixels and left two pixels. So now you can see it moved to the bottom and a little to the left. So it appears underneath our arrows. Okay, now let's target the second arrow that has a class of left. I will add top 16 pixels and left minus 24 pixels. So now it's been moved to the bottom and to the left. Let's try something. Let's go and inspect it and try to rotate it a little. Here it is. I will add transform, rotate, and I will start to rotate it. As I do that, you can see it's getting closer to the top arrow and together they're forming the star shape. I think 72 degrees is a good value. So I will copy that line of code and paste it inside the div that has the class of left. Cool. Now all that's left is the right arrow. So I will targeted ad tap 16 pixels, left, 24 pixels, and Transform, Rotate minus 72 degrees this time. And now you can see we have the star shape. It's sitting inside the blue circle. And our logo is finally finished and looking awesome. 9. 9 gear: Hello everyone, welcome to this new lesson in the course. In this lesson we're going to create this nice GPU drawing using HTML and CSS. So let's dive right in and see how we can do that. I will start right here in my HTML by adding a div and give it a class of year. Then inside that, I will add three divs and give them a class of bar. These bars will become the teeth of the gear. Then I will add another div and give it a class of gear Enter. Then I will go to my CSS to style those divs. I will start by targeting the div with the class of gear. And inside it, I will add width 110 pixels. Height 110 pixels as well. Then background color, this green color. And finally, border-radius, 50 percent. So now you can see we just have a green circle sitting on the page. Since we set the border radius to 50 percent, then I will go back to my CSS and target the div with the class of gear Enter. And I will add width 55 pixels. Height 55 pixels as well. Background color, white, border-radius, 50 percent. So now you can see there's a white circle sitting on the top left corner of the green circle because we didn't specify any position for it. So it's sitting in the top left corner. So let's go back and center it inside the green circle. I will go inside the gear inner div, and I will add position, absolute, top 50 percent and left 50 percent. Now you can see that the white circle has been shifted toward the bottom and to the left by 50 percent so that its width and height start at 50 percent. In order to center it properly, we need to shift it back towards the top and to the left by half of its width. So I will go back to its selector. And I will add transform translate minus 50% to sift it back to the left on the x-axis and minus 50% to shift it back toward the top by 50 percent. And now you can see the white circle is perfectly centered inside the green one. And it gives us this ring shape because the background of the page is white as well. Okay, now it's time to work on the three bars that will become the teeth of the gear. I will target them by selecting the divs that have the class of bar. And I will add width, 170 pixels, height, 40 pixels. Background color. Our green color, and border radius, just seven pixels. So now you can see that we have the three bar sitting on top of each other and they look a little weird. You see layers starting from the top left corner of the green circle and they have a bigger width, so they are going beyond its border. So what we will do is we will center all of them using the same method we did with the white circle. Then we will rotate two of them, one by 60 degrees and another by minus 60 degrees. So we will have the teeth of the gear looking the way we want. So let's first center all three of them. I'll go back here and add top 50 percent. Left, 50 percent and transform. Translate minus 50 percent and minus 50%. So now you can see the three bars are sitting on top of each other, so they appear as one bar. And there are actually underneath the white circle because the white circle comes after them in our HTML. So the white circle gets layered on top of the bars. Cool. Now we just need to rotate two of our three bars. I will go back to my CSS target the second bar by adding Br nth child to. Then inside that I will add transform, translate minus 50 percent and minus 50%, so that the bar will still be centered. If we don't add this code, the bar will go back to the top-left corner again. Every time we add a transform property to our elements, we need to check the transform properties we added to them earlier and add them in the new declaration of the transform property. Because if we don't, everything we added before will be reset once we add a new transform, That's just how the transform property works. Okay, now after that, I will add rotate 60 degrees. And here you can see the second bar is now rotated by 60 degrees, and now we can see two bars. Let's go back and rotate the third one. I will copy this, paste it again, and change two to three to target the third bar, then 60 degrees to minus 60 degrees. In. Here we go. We now have the three bars and R6 gear teeth are gear is finished and it looks exactly the way we want. 10. 10 git logo: Hello everyone, welcome to this new lesson in the course. In this lesson, we're going to learn how to create this NetLogo. You can see it on the browser page now and maybe you're thinking, that's way too hard. How am I going to do this? Well, don't worry. And as always, we're going to take it step-by-step. Let's take a look at another demo of the logo. And you might notice this is the same NetLogo. The only difference is that the first logo was rotated by 45 degrees. So if we can create the sheep in front of us right now using HTML and CSS. We can then just rotated by 45 degrees to get the get logo we're aiming for here. All right, but how are we going to create this shape? Let's take it piece by piece. You can see we have an orange background with some border radius around the corners. And inside it we have two lines. The first line is just a horizontal line that is placed around 20 pixels from the top of the orange background, and it has two circles placed on it. We will use the before and after pseudo elements to create these two circles. Then we have the second line, which is attached to the first circle of the first line. It sits at a 45 degree angle, and it also has a circle at the end of it. So that is how we're going to create this shape. And after creating it, we will just rotate it by 45 degrees to give us the NetLogo we want. Let's start doing that. I will go here in my HTML, and I will start by adding a div and giving it a class of good. This will be the orange background that contains the two lines inside it. Then inside it, I will add another div and give it a class of line 1. And below that, I will add another div and give it a class of line 2. These two divs will be the two lines inside the orange background. All right, now I will go to my CSS to start adding some styles. I will start by targeting the div with the class of good. And I will add width, 150 pixels, height 150 pixels as well. Then background-color, our orange color, then border-radius, 15 pixels to give it some curves on the corners. And finally, position relative. And now you can see we have the orange background sitting in the center of the page. Cool. Now let's work on the lines inside this orange background. I will target the first line. And I will add width, 110 pixels. Height 12 pixels. Background color, white. So now you can see the first line appears in the top left corner of the orange background. We need to move it a little bit to the bottom. So let's go back and do that. I will add position, absolute and top 40 pixels. So now you can see it moved toward the bottom by 40 pixels. All right. Let's create the two small circles that are located on this line. As we said at the beginning of the lesson, we will use the before and after pseudo elements to create those. So I will go right here and say line one before. And I will add content. Empty strings with 30 pixels, height, 30 pixels, background color, white. And in order to make it a circle, we will add border-radius, 50 percent. Then position absolute. And here you can see the white circle is located on the top left corner of our white line. Now, all right, let's go back and position it the right way. I will go here and add left 30 pixels and top minus eight pixels. And here it is. The circle is now located in the position we want it to be. All right, let's quickly add the second circle, which is attached to the end of our line. I will go back, copy all of this, paste it again, and change before to after. And I will also change the left value to 90 pixels instead of 30. And there we go. The second circle is now attached to the end of the line. Now, all right, let's create the other line. I will copy the first line, paste the code again, and target the second line instead of the first. Then I will change the width to 90 pixels. Instead of 110 pixels. The height will stay the same. But I will change top to 70 pixels instead of 40. Then I will add left 30 pixels. So now we've got the second line sitting in the position we specified here. Let's go ahead and add the last circle that will be attached to the end of this line. We will use that before pseudo element. So I will copy the before pseudo element from the first line, pasted and target the before pseudo element of the second line, not the first one. And I will leave everything as it is and just change left to 70 pixels. In just like that, you can see there is a new circle added to the second line and it's attached to the end of it. All right, now, let's go back and try something. I will go inside the second line and add transform, rotate 45 degrees. And here you can see the start of the second line is now attached to the end of the first line. And the logo looks exactly the way we want. And we have only one thing left to do. And that is rotating the whole logo. So I will go back to the GET div selector. And I will add transform, rotate 45 degrees. And we've got it. The whole logo is now rotated by 45 degrees and everything is looking exactly the way we want, which is very nice. 11. 11 google logo: Hello everyone, welcome to this new lesson in the course. In this lesson, we are going to create the logo for Google that's represented by this multicolored letter G. So if you take a look at the logo, you can see we can create most of it with very simple steps. The red, yellow, and green parts are just borders with different colors. The top border is red, and the last one is yellow, and the bottom one is green. Then we have this blue part that connects the green border and the horizontal blue line. We'll see how we can create it. And finally, we have that horizontal blue line. All right, Now let's go to our HTML and start doing that. I will start here by adding a div and give it a class of wrapper. Then inside it, I will add another div and give it a class of top. This will be the part that has the three borders. Then below that, I will add another div, give it a class of half. And this will be the blue part that attaches the green border to the horizontal blue line. Then I will add a third div and give it a class of line. And of course this will be the blue line and the logo. All right, now let's go to our CSS to start creating our logo. First, I will target the container div that has the class of wrapper. And inside it, I will add width, 150 pixels, height 150 pixels as well. Then position relative. Then below that, I will target the div with the class of top. And I will add position absolute with 150 pixels, height, 150 pixels as well. Then we will start adding the borders. I will add border top 30 pixels solid. And this red color. Then border right? 30 pixels, solid, transparent. Then border bottom, 30 pixels solid. This green color. And finally border left, 30 pixels solid. And this yellow color. So you can see now we have these three borders with these different colors, but we don't have a right border because we set its color to transparent. Now. All right, let's make these borders circular. I will go back and add border-radius 50 percent. And now we've got the first part finished. Let's work on the second part, which has a class of half. So I will target it, give it a width and height of 150 pixels. Then position absolute. And we only need a border on the right. So I will add border, 30 pixels solid, transparent. Then after that, I will add border right? Then 30 pixels solid. And our blue color. Cool. So now we've just got a blue border on the right. Well, let's go back here and try something. Let's rotate it by 45 degrees. I will add transform, rotate 45 degrees. So now you can see that because the div rotated its border is now placed in this new position, which is the position we want it to be in. Let's just go back and make this border circular as well. I will add border-radius 50 percent. And just like that, and the blue border is now rounded like the other borders. But there is a problem. Now it's hiding the green border underneath it. We can fix that. No sweat by going back again and adding Z index minus one. Amazing. Now the green border is covering the blue and now we only have one part left, which is the blue line. I will target the div with the class of line. And I will add width 80 pixels and height 30 pixels. Then background-color, our blue color. Then we need to position it properly. So I will add position absolute. We want it to be on the right side. So we will add right 0. Then we want it to be centered vertically. So we will add two lines of code. In the first one, we will set its top property to 50 percent. Then we will add transform, translate y minus 50% to pull it back by 50% of its height. Great. So here is the line sitting on the right and center it vertically like we wanted. And the logo is almost finished. I say that because if you take a closer look at the bottom right corner of the line here, you can see it's going out of the boundaries of the logo. And this is because it has no curves on this corner. While the part attached to it is curved. We can easily solve that by adding some curves on this corner. So I will go back here and add border, bottom right radius to target the bottom right corner of the border. And I will add 15 pixels. And just like that, the line is now curved and the logo looks very smooth and amazing. And that everyone is how you create the Google logo using HTML and CSS. 12. 12 instagram logo: Hello everyone, welcome to this new lesson in the course. In this lesson, we are going to learn how to create an Instagram logo using HTML and CSS. Here is the finished logo we're going to create. So when we look at it, we can see it consists of four parts. First, the background, which is a square with some border radius on the corners. Then inside it we have another smaller square, this time with a transparent background and it has four white borders around it. Then inside that is a small circle with a transparent background and white borders as well. Then finally, there's little circle over here between the circle and the square. All right, let's start creating that. I will start here in my HTML by adding a div and giving it a class of logo. So this will be the colorful background. Then inside it, I will add another div, give it a class of square. And inside this square root div, I will add another one with a class of circle big. And below it, I will add our final div with a class of circle small. All right, so now that we have everything in place, I will go to my CSS to start working on these divs. I will target the first div with the class of logo. And I will set its height to 200 pixels and its width to 200 pixels as well, because we want it to be square. Of course. Then I will add border-radius 60 pixels. And finally, I will add background radial gradient. And I will add this value. So this becomes the gradient color of the Instagram logo. All right, so here you can see we have our background on the page with some curves on the corners. Now, let's work on the inner parts. I will target the div with the class of square. And I will add width 140 pixels and height 140 pixels as well. The background color transparent. Because we don't want any background color, we just want borders. So I will add border, two pixels, solid white. And in order to have some curves, I will add border-radius, 45 pixels. And finally, position relative. So now you can see we have our square and it's sitting in the top left corner of our background. So let's go and center it quickly using Flexbox. I will go back to its container, which has a class of logo. And I will add display, flex, justify content, center, and align items center as well. So now you can see the rounded square is now centered inside the background horizontally and vertically. Cool. Let's create the inner circle. I will target the div with the class of circle big. And I will add height, 60 pixels. Width 60 pixels as well. Then background-color, transparent, and border 12 pixels, solid white. And finally, to make it a circle, we will add border-radius. 50 percent. Amazing. So now we have our circle, but it's also located in the top left corner of its container. So let's center it quickly. I will go back here, copy this code, and paste it inside the container of this circle, which is the rounded square. Awesome. So now we're almost finished. The only thing we have left is the little circle that's in the top right corner between the square and the circle. If you remember, we gave it a class of circles small. Let's target that class. Then inside it at height 15 pixels, width 15 pixels as well. Then background color, white, border-radius, 50 percent. And finally, in order to position it, we will add position absolute, top 15 pixels and rate 15 pixels. It will be positioned relative to the square div because it's a div that has the position value of relative. So here's the little circle we want, and that's it, everybody. We now learned how to create the Instagram logo very easily using only HTML and CSS. I hope you liked this lesson and found it very useful. And I will see you in the next one. 13. 13 panda drawing: Hello everyone, welcome to this new lesson in the course. In this lesson we are going to create this nice angry panda drawing. You can see it's just a simple drawing of a face that consists of five parts. The face itself, which is just a white circle with a black border around it. Then the ears on both sides of the face. The nose, which is a tiny circle, the mouth, which is just a horizontal line, and finally, the eyes. And if we take a look at the left eye, for example, you can see it's just a black semi-circle which is rotated and contains a smaller black semicircle with a white border around it. So let's see how we can create this nice panda face. I will go right here in my HTML and I will add a div, give it a class of panda. So this will be the circle that creates the face of the panda. Then inside it, I will add another div, give it a class of I left. So obviously this will be the left eye of the panda drawing. Then it, I will add one more div with a class of left ball. So the div with the class of I will be the outer black semicircle. And the inner one with a class of ball will be the enter small semicircle, then has a white border around it. All right, now I will copy those two divs. Paste in again. And I will change I left to right and left ball to write ball. And below that, I will add a div and give it a class of no's. So this will be the tiny circle that is the nose of the panda. Then I will add another div for the mouth as well. And I will give it a class of mouth. And finally, I will add two divs, one for the left ear, and it has a class of ear left and the other for the right ear. And it will have a class of IRR rate. Cool. Now let's go to our CSS to start creating the panda face we want I will target the div with the class of panda. And I will add width 300 pixels and height 300 pixels as well. Then background color, white and border, 12 pixels, solid black. And in order to make it a circle, I will add border-radius 50 percent. Then finally, I will add position relative. So now you can see we have a white circle with a black border around it that creates dependence head. All right, now let's move to the eyes of the panda. I will target the div with the class of I left. And I will add position. Absolute width, 115 pixels, height 58 pixels. And background color black. Remember, the div with the class of I left is the outer bigger semicircle. So now you can see we just have a black square that is sitting on the top left corner of our circle. So I will go back to position it right. I will add left 10 pixels and top 45%. Then in order to make it a semicircle, I will add border-radius 0 from the top left corner, 0 from the top right corner as well. And 115 pixels from the bottom left and bottom right corners. So now you can see the rectangle became a semicircle and move to this new position. Now right. Now, I will target the div with the class of left more. That creates the ener black semi-circle. And I will add position. Absolute width, 30 pixels. Height 30 pixels as well. Background color, black border, 12 pixels, solid white. So here you can see we have a black square with a white border around it, sitting in the top left corner of the outer black semi-circle. Now, let's go back and position it right and make it a circle. I will go here and add top minus 50 percent and left 32 percent. Then I will add border-radius 50 percent. So now you can see this black square is now a circle and it's positioned in its new position. Now, only one thing left, which is rotating the eye and removing the part of the ball that goes outside of the eye. So let's take care of this really quick. I will go back here and add transform, rotate 30 degrees and overflow. Hidden. And just like that, you can see the left IS finished and it's looking exactly the way we want. The right eye will be identical to the left one. We will just change a few things. So let's make it really quick. I will copy the div with the class of I left, paste it and change I left to right. Then inside the div, I will change left to right to position it on the right side of the face. And I will also change the rotation degree to minus 30 degrees instead of 30 to make it rotate in the opposite direction. Then I will copy the div with the class of left ball. And I will change it to write ball. And I will just change left to right. And just like that, you can see we now have the right guy that looks identical to the left one. Now, right. Now, let's move to the nose, which is very simple. It will just be a tiny circle. So I will create the div with the class of no's. And I will add position, absolute width, 16 pixels, height, 16 pixels. Background color, black, and border-radius. 50 percent. And in order to position it right, I will add top 60 percent. And I want to center it horizontally. So I will add left 50 percent and transform, translate x minus 50%. So here you can see we had this tiny little circle in this position creating the nose for us. Now, let's move on to the mouth, which if you remember, was just a horizontal line. So I will target the div with the class of mouth. And I will add position. Absolute width, 50 pixels, height, 10 pixels, background color, black. Then we want some border radius around the corners. So I will add border-radius 10 pixels. And in order to position it below the nose, I will add top 75 percent and left 50 percent. Then transform, translate x minus 50%. And just like that, you can see the mouth is now created and it sits below the nose. Now, one thing left to finish the panda drawing, which is the ears of the panda. If you remember, they were just too black circles that sit on the top left and top right corners of the panda face. So let's create them. I will target the div with the class of year left. And I will add position. Absolute width, 130 pixels. Height 130 pixels as well. Background color, black. So here you can see we have a big black square sitting on the top left corner of the panda face. So let's keep working on it. I will go back here and add border-radius, 50 percent. Then to position it, I will add top minus 30 pixels and left minus 35 pixels. And finally, in order to make it appear underneath the phase, we will add z-index minus1. And just like that, you can see the left ear is now a circle and it's positioned properly, and it appears tucked underneath the face, just the way we want. Now, let's create the right ear. I will copy this code, paste it again and change ear, left ear, right to target the right ear. Then inside it, I will just change left to right. And just like that, you can see the right ear is now created as well. And that's it, guys. We have finished our ARE faced panda drawing. I hope you enjoy creating this drawing as much as I did, and I will see you in the next lesson. 14. 14 watermelon drawing: Hello everyone, welcome to this new lesson in the course. In this lesson, we're going to create this watermelon illustration using HTML and CSS. It looks nice and has a flat design. So let's see how we can create it. I will start here in my HTML by adding a div and give it a class of watermelon. So this will be the watermelon part. Then inside that, I will add 16 spans. And these 16 spans will be the black watermelon seeds inside the watermelon. All right, now I will go to my CSS to style the div and the spans inside it to give us the shape we want. I will start by targeting the watermelon div and add width 320 pixels. Height, 160 pixels. Background color. This reddish color. Then border left, 20 pixels solid. And this green color. And I will do the same for the border bottom and border right? So I will copy that. Paste it and change left to bottom. Paste it again, and change it to right this time. All right, so now you can see we have the red background and it's surrounded by these green borders from left, bottom, and right. Now we need to add some border radius in the bottom left and bottom right corners so that we can get the rounded shape of the watermelon. So I will go back inside the watermelon div and I will add border left radius, 200 pixels, and border right radius to 100 pixels as well. So now you can see the watermelon is now curved from the left bottom and right bottom corners. Okay, now we're getting closer. We just need to add the black seeds of the watermelon and we will use the spans to do that. I will target all the spans and add width. 10 pixels, height, 10 pixels as well. And background color. This gray color. Then, because we want them to be circles, we will add border radius 50%. So now you can see nothing happened. The spans didn't appear because they are inline elements. And inline elements can't have width or height. We need to change them to block elements so that they can take the width and height and appear for us. So I will go back and add display block. So now you can see the 16th spans appear for us. But there's one problem. Because we set the display property to block. We are sitting below each other because that's what block elements we'll do. They just sit below each other. But we want them to sit next to each other as long as they have free space. And when they have no more space, they dropped to the next line. And keep doing that. We can set the display property to inline-block instead of block. And that will make them have some properties of the black elements like width, height, and background color. So they will appear for us, and they will also appear next to each other, not below each other. So we'll get the best of both worlds. So I'll go back in chains block to inline block. And now you can see the seeds are sitting side-by-side next to each other. Now, Let's just add some margins between them so we can get some space and they will drop to the next line. So I will go back and add margin 20 pixels. So now you can see the seed of the watermelon are now separated and distributed around the freespace, but some of them aren't located properly. We make the watermelon look ugly. So we want to get rid of them. They are actually the seventh, 12th, 13th, and 14th spans. So let's target them. I will say span nth child seven to target the seventh one. Then I will copy that. Paste it again three times. And I will change the number every time to target the span I want. So I will add 12, 13, and 14. Then inside that, I will just add opacity 0. And now you can see the seeds that weren't located properly are now hidden, leaving the other seeds visible and giving us this nice watermelon drawing. It's very nice and was easy to create at the same time. 15. 15 adidas logo: Hello everyone, welcome to this new lesson in the course. In this lesson, we are going to create the famous logo of Adidas. You can see it consists of just three rotated lines that have different sizes. So the left one is the shortest and the right one is the longest. This would be an easy lesson. So let's see how we can do it. I will go right here in my HTML and I will add a div, give it a class of Adidas. So this will be the div that contains all three lines. Then inside that, I will add another div, give it a class of shape, and also another class of S one. Then I will copy this div, paste it again two times. And I will change S1 to S2 in the second div and to S3 in the third div. So the shape class here will be responsible for the styles that we will apply to the three lines. And we will target the other classes here, S1, S2, and S3 to add unique styles to any of the three dips. Okay, now I will go to my CSS to start creating the logo. First, I will target the container div that has the class of Adidas. And inside that, I will add width 206 pixels, height 120 pixels. And we will add a temporary background of red. Then we will add position relative. So here you can see we just have a red background sitting in the browser. All right, let's keep going. I will target the div with the class of shape. And inside that, I will add width 46 pixels, height 150 pixels. And background color, this black color. So here you can see we have this long rectangle, which is actually the three divs sitting on top of each other. So let's go back and keep going. I will go here and add position absolute. And now you can see the three divs are sitting on top of each other and appearing as one div and they're ready to be positioned the way we want. So let's do that. Let's target each div individually and position it the way we want. I will go here and target the div with the class of s1. And I will add top 86 pixels, left, 36 pixels, and background color blue for now. So now you can see the first div now has a blue background and it moved to its new position. Let's also move the other two divs. I will go back and target the div with the class of S2. And I will add top 45 pixels, left, 82 pixels, and background color yellow. Then I will copy this code, paste it again, and target the third shape. And I will change top here to four pixels and left to 129 pixels. So now you can see the three divs are sitting side-by-side in different positions. Let's now rotate them to the left to get the logo shape we want. I will go right here inside the div with the class of shape. And I will add transform eight minus 31 degrees. Cool. Now the three divs are rotated and looking like the three lines of our logo. But they're kind of flowing out of our container. And that can be easily fixed by going right here inside the container div and add in overflow hidden. And now you can see the three lines are staying inside the container div, and they look exactly like the logo. Only two things left. The first is removing the red background of the container. So I will quickly do that. Then the second thing is removing the colors of the second, third div so that all three divs will have the same black color that we added to the class shape. So here you can see the three lines now have the same black color and the logo is looking exactly the way we want. And that's it for this lesson, everyone. And I will see you in the next one. 16. 16 Brackets logo: Hello everyone, welcome to this new lesson in the course. In this lesson we are going to create the logo of the Adobe text editor Brackets. So you can see it's just a white background with a blue border around it and a darker one at the bottom. We will create those two blue borders using the box shadow property. And inside the white background it has these dark gray bracket and we will learn how we can create them. So let's start doing that. I will go here in my HTML and I will add a div, give it a class of brackets. Then I will go to my CSS target the div with the class of brackets. And I will add width, 200 pixels. Height 175 pixels, background color, white, and border-radius, 31 pixels. So you can see we just have a white background with some border radius around it. Now, let's create the light blue border that surrounds the logo. We will create it using the box shadow property. So I will go right here and add box shadow. And I will add a horizontal distance of 0, then a vertical distance of 0 as well, because I don't want it to be shifted horizontally or vertically from the white background, then I will add 0 blur as well, because I want it to be sharp, not blurry. Then I will add a shadow thickness of 28 pixels. And finally, I will add this light blue color of the shadow. So now you can see the white background has a box shadow all around it with 28 pixels thickness or density, and a light blue color. Cool. Now let's create the other box shadow with the dark blue color that is shifted to the bottom. I will go right here, add a comma, and I will add 0 because we don't want to shift it horizontally, then 28 pixels. So it will be moved to the bottom by 28 pixels. And 0 as well to be sharp, not blurry, then the thickness of the shadow will be 28 pixels as well. And finally, we will add this dark blue color for the shadow. So what will happen here is that the second shadow will be identical to the first one. But because we moved it to the bottom by 28 pixels, it will appear below the first shadow. If this 28 pixels was just 0, like the first shadow, then they would be identical and covering each other up. All right, now I will go and reload. And now you can see the second shadow appears below the first one. And we're getting closer to the logo shape we want. Now, let's work on the two brackets inside the logo. We will create them using the before and after pseudo elements. I will go here and target the before pseudo element of the brackets div. And I will add content empty strings, width, 50 percent, height, 44%. And I will add a temporary background of red. Then in order to position it in the center of the white background, I will add position absolute, top left, 50 percent and transform translate minus 50 percent and minus 50%. Then finally, I will go up here and add position relative. So now you can see we have a red background centered perfectly inside the white background. Okay, let's now add the dark gray border around the white background. I will go right here and add border. 28 pixels, solid. And this gray color. So now the dark gray border is surrounding the red background. Now, in order to get the shape of the two brackets, we will use the after pseudo element to create a white background that splits the red background into two halves, giving us the shape of the two brackets we want. So I will go right here and say brackets, colon after. And inside that, I will add content. Empty strings, width, 10 percent, height, 100%. Background color, green for now, and position absolute. So now you can see we have a green background that sits in the top left corner and has the same height of the white background because we said it's height 100%. So what we will do is we will move it to the center and we will change its color to white so that it will split the red background and the gray border into two halves. So I will go right here and add left 50 percent. Then transform, translate x minus 50%. And I will also change the background color to white. So now the white background moved to the center and we now have the two brackets shape we want. The only thing left is to remove this red background here. So I will go back inside that before pseudo element. And I will remove this line responsible for adding the red background. And now you can see the logo is perfect and it looks exactly the way we want. 17. 17 donut drawing: Doughnut. Hello everyone, welcome to this new lesson in the course. In this lesson, we are going to learn how to create this nice doughnut drawing. You can see it looks very nice enqueue. It consists of a big pink circle, which is the doughnut body, and a smaller circle at the center with the background color is similar to the background color of the body. And a simple Smiley face at the top of the doughnut. And finally, a simple highlight here to make the drawing look a little bit better. You may also have noticed that the pink background consists of two tones of the pink color, a dark tone, and a lighter one. And this gives it a 3D effect. It makes it look better. We will see how to create all of them. So let's get started. I will start here in my HTML by adding a div and giving it a class of doughnut. Then inside it, we will add three classes. One for the donut body itself, the second for the Smiley face, and the third for the highlight. So I will add div, give it a class of doughnut body. And below that, I will add another div with a class of face. So this will be the Smiley face, then the final div with the class of highlight. Now let's go to our CSS to start creating our drawing. I will. 18. 18 figma logo: Hello everyone, welcome to this new lesson in the course. In this lesson, we are going to create this nice Figma logo. You can see it's just as simple, colorful logo and it consists of five parts. Two at the top, two in the middle, and one at the bottom. The five parts have the same width and height. The only difference is the curves that they have. For example, the first part on the top left corner has some curves around the top left and bottom left corners. While the second part has those curves around the top right and bottom right corners. The light blue part here is just a circle, so it has curves all around the corners and so on. So let's see how we will create that logo. I will go here in my HTML and I will add a div, give it a class of logo. So this will be the outer container that holds all the five parts inside it. Then inside that, I will add another div, give it a class of part and also a class of part one. So obviously, this will be the first part of our logo. Then I will copy this div, paste it again four times, then change the number right here for each div to target each div individually. Alright, now I will go to my CSS to start creating our logo. First of all, I will target the container div that has the class of logo. And I will add width 180 pixels, height 270 pixels. Then I will add a temporary background of blue. So now you can see we just have a blue background sitting in our browser. All right, let's work on the five parts of the logo. I will target the div with the class of part. Then I will add width 90 pixels and height 90 pixels as well. Then in order to see all the parts clearly, we will target each part and add a different background to them. So what I will do is I will target the first part that has the class of Part 1. And I will add background color, this nice reddish color. Then I will pause the video and just do the same for all four of the other devs. All right, so now you can see that the five parts are sitting below each other because they are divs and devs are block elements. So they sit below each other by default. Now in order to make their layout look the way we want. If you remember, we had two parts at the first line and then two parts below that, and then one part on the last line. We can easily achieve this layout using Flexbox. So I will just go here inside the container div that has the class of logo. And I will add display flex. So now you can see the five divs are now sitting side-by-side and they shrink to fit into the container div. But we don't want them to do that. We want each div to have its default width, which is 90 pixels, half of the container width. So that the first line will have only two divs because together they're width will be 180 pixels, which is the container width. And then the second two parts, we'll have no space left and they will sit in the next line. Then the last part will sit on the last line. So how can we tell the browser not to shrink the five devs and instead make them sit side-by-side until there is no free space. And there is no free space. The remaining part should move to the next line. Well, we can do that easily by going in right here inside the container div and adding flex, wrap, wrap. And just like that, you can see the five parts are now sitting exactly the way we want. And the only thing left is add different curves to each one of them. So I will go here inside the first div that has the class of Part 1. And I will add border top left radius 50 percent and border bottom-left radius 50% as well. Then below that, inside the second part, I will add border top right radius 50 percent and border bottom right radius 50 percent as well. Then for the third part, it will have curves similar to the first part. So I will copy the code from the first part and paste it inside the third part. Then the fourth part will be a circle. So I will just add border-radius 50 percent. And finally, for the fifth part, I will add border top left radius 50 percent, and border bottom lateral radius 50 percent. Then finally, border bottom-right radius, 50 percent as well. And just like that, everyone, you can see all five parts are looking exactly the way we want. And together they create the logo. And the only thing left is this blue background here. We want to remove it. So I will go inside the div with the class of logo and I will remove this background. And just like Dad, everybody, we have finished creating this nice colorful flat logo that looks really good. 19. 19 react logo: Hello everyone, welcome to this new lesson in the course, we are going to learn how to create the React logo. For those of you who don't know what React is, it's a popular JavaScript framework. So you can see it consists of three identical ovals. One of them is horizontal and the other two are rotated by 60 degrees in different directions. And it also has this solid circle in the center. It should be an easy lesson. So let's see how we can do that. I will go right here in my HTML and I will add a div, a class of React. Then inside that, I will add another div and give it a class of circle. Then I will go to my CSS to start creating the logo. I will target the div with the class of React. And I will add width, 300 pixels. Height 100 pixels, border, three pixels, solid. And this light blue color, then border-radius 50 percent to get the oval-shaped. And finally, I will add position relative. And now you can see we have this oval shape because the width is larger than the height and it has this blue border around it. Cool. Now let's create the other two ovals. I will create them using the before and after pseudo elements. So I will go right here and say React colon before. And inside that, I will add content. Empty strings. Position, absolute, top, 0 pixels, left, 0 pixels as well. Width, 100%, height, 100% as well. Then I will add border, three pixels, solid, and the light blue color. Then finally, border-radius, 50 percent. And now you can see nothing changes. This is because the before pseudo element is sitting on top of the div with the class of React. So let's go back and rotate it. I will go right here and add transform, rotate 60 degrees. And now you can see the before pseudo element is now rotated and we have two ovals out of R3. Let's quickly create the third oval. We will use the after pseudo element to create that. I will copy the before pseudo element, paste it again, and change before to after. Then. I will also change the rotation degrees to negative 60 degrees instead of 60, so that it will rotate in the other direction. And here you can see the three ovals are now looking exactly the way we want. And the only thing left to finish the logo is the inner circle centered inside the logo. So let's quickly create that. I will target the div with the class of circle. And I will add position. Absolute width, 60 pixels. Height, 60 pixels. Background color. Our light blue color, border-radius, 50 percent. And now you can see the circle is now located in the top left corner of the React div because we didn't position it. So let's do that. I will go back here and add tab the percent, left, 50 percent and transform. Translate negative 50 percent and negative 50 percent. And just like that, you can see the circle is now exactly centered inside the three ovals and the logo is finished, and it looks exactly the way we want. 20. 20 LG logo: Hello everyone, welcome to this new lesson in the course. In this lesson, we will learn how to create this LG logo. You can see the logo has a red background and it consists of the letter L and the letter G around it with a small circle between them. You can see the letter G consists of two lines, one curved line and another horizontal one. The letter L consists of two lines as well. One is vertical and the other is horizontal. So let's see how we can put these lines or parts together in order to create this logo. Let's start doing that. I will go here in my HTML and I will add a div, give it a class of logo. So this will be the red background that contains all the parts of the logo. Then inside it, I will add another div, give it a class of line 1. This will be the curved line in the letter G. Then below it, I will add another one with the class of line 2. And this will be the horizontal part of the letter G. Then below that, I will add a third div, give it a class of circle. Then another div with the class of line 3, and a final div with the class of line four. So line 3 and line 4 are the two parts that create the L letter. All right, I will go to my CSS to start creating our logo. We will first start by creating the red background. So I will target the div with the class of logo. Then I will add width, 500 pixels, height, 500 pixels, background color, our red color. Then, since it's a circle, I will add border-radius 50 percent. Then finally, position relative. And now you can see we have a red circle sitting in the browser. Let's start working on the letter G. First, we will create the curved part, which has a class of line 1. So I will target this class. Then add position, absolute width, 400 pixels, height 400 pixels. Then we will add a temporary green background color. And now you can see we have a green background that is sitting in the top left corner of the logo div. So let's go back and center it horizontally and vertically. I will go back here and add top 50 percent. Then left 50 percent and transform. Translate negative 50 percent and negative 50 percent. And because it's a curved line, we will add border-radius 50 percent. And now you can see we have a green circle that is centered inside the red one. And we'll add a border to it to create the curved line. So let's go back here and add border. 20 pixels, solid white. And you can see we now have a white border around the green circle. Our curve isn't a full circle, so we should have only three borders, not four. So I will go back here and add border, right color. Transparent. And now you can see the color of the right border becomes invisible. Alright, now we don't want this green background anymore, so I will go back and remove it. And we also want to rotate the white border so that it looks like the letter G part in our logo. So I will go here and add rotate negative 45 degrees. And just like that, you can see we now created the curved part of the letter G in the logo. Now, let's create the horizontal part which has the class of line 2. So we will target it. And then I will add position. Absolute width, 150 pixels, height, 20 pixels. Background color, white. So now you can see we have this horizontal white line sitting in the top-left corner of the red circle. So let's go back and position it properly. I will go here and add top 50 percent, right? 30 pixels and Transform Translate Y negative 50 percent. And now you can see this line is positioned properly and along with the curved line, they form the letter G. All right, now let's create the circle. I will go here and target the div with the class of circle. Then I will add with 50 pixels, height, 50 pixels, background color, white, and border-radius, 50 percent. So now you can see we have a white circle that sits in the top left corner of the red background. So let's go back to position it in the correct place. I will add position absolute, top 120 pixels and left 130 pixels. And just like that, the circle is now positioned in the place we want it to be. All right, Let's now create the letter L. We will create the first part, which is the vertical one. It has a class of line 3. So I will target that and add position. Absolute width, 20 pixels, height, 250 pixels, and background color, white. So now you can see we have a vertical line sitting in the top left corner of the circle. So let's quickly position it in the center. I will go back here and add top 50 percent. Left. 50 percent as well. Then transform, translate negative 50 percent and negative 50%. And you can see it's now positioned properly in the center of the red circle. Alright, let's create the final horizontal part that is attached to the vertical part. To create the letter, I will target the div with the class of line four. And I will add position. Absolute width, 70 pixels, height, 20 pixels. Background color, white. And let's also position it. I will add top 370 pixels and left 240 pixels. And as you can see, we now have a horizontal part attached to the vertical one, and they both create the letter L. And by doing that, we have now finished our LG logo. 21. 21 beaver part 1: Hello everyone, welcome to this new lesson in the course. In this lesson, we will start creating this nice beaver drawing using HTML and CSS. You can see this drawing is a little advanced, which means it will be a great example to learn and practice drawing with CSS. We will start creating it in this lesson, and we'll continue in the next few lessons until we finish it. All right, In this lesson we will create the frame, the body of the beaver, the bow on its head, the arms, and the heart that it's holding. We will work on the other parts in the next lessons. So what we'll start here in my HTML by adding a div and giving it a class of frame. This will be the frame of our drawing that contains everything inside it. Then inside of that div, I will add another div and give it a class of body weight inside that body div, we will add four divs for our four parts. So the first is we'll have a class of row. Then the second one will have a class of heart. Then we will add two more divs. One will have a class of arm left, and the second will have a class of arm right? Cool. Now let's go to our CSS to start creating our drawing. I will target the div with the class of frame. And I will add width, 350 pixels. Height, 420 pixels, background color. This nice pink color. Then we will add border, solid, white. And finally, position relative. Alright, now let's work on the body of the Beaver. I will target the div with the class of body. And I will add position. Absolute width, 70% of the frame width, height, 90 percent. Background color, this brown color. So you can see we now just have a brown background that sits in the top-left corner of our frame. All ready, Let's position it the way we want. I will go back here and add bottom 0, left 50 percent. And in order to center it horizontally, I will add transform, translate X 50 percent. Cool. So now, as you can see, the brown square is centered horizontally and position the way we want. Let's do one more thing. If we take a look at our demo, you can see the body of the beaver is rounded on the top left and top right corners, giving us the shape of the head. So let's go back and do that really quick. I will go right here and add border-radius, 50 percent on the top left corner and 50 percent on the top right one as well. Then 00 on the bottom corners. All right. So now we have the same shape in the body we want for our beaver. Okay, next step, we will start working on the arms of the Beaver. I will target the div with the class of arm left. And I will add position. Absolute width, 45 percent of the body width. Height, 20%. Background color, this darker brown color. So now we have this dark brown background sitting on the upper left of the beaver body. Let's go back and position it right. I will add left, 0, and bottom 10%. So now you can see it's positioned in the right place. Let's add some border radius to the top and bottom right corners to give it the shape of the arm, I will add border-radius, 050 pixels, 50 pixels, and 0. So here you can see it now has these rounded corners, which look good. Now, if we take another look at our demo, you can see the arms are not exactly horizontal. There are actually skewed a little. So let's go back and do that for the left arm, I will add Transform skew. Why? Five degrees? So here you can see the left arm is now skewed a little and looks cool. Let's go ahead and quickly create the right arm the same way. I will copy all of that. Paste it again and change left to right. Then to position it on the right, I will change left here to write. And to adjust the border-radius, I will change it to 50 pixels, 0050 pixels. And finally, I will change the skew to minus five degrees instead of five. And just like that, the right arm is now created as well. Alright, now let's work on the PBO that's in the upper right area of the beaver head and figure out how we can create it. I will target the div with the class of bow. And now we'll add position, absolute width, 30 pixels, height, 25 pixels. Background color. This nice pink color. Then in order to position it near the top rate, I will add rate 25 percent and top 8%. And here you can see we just have a small pink background sitting in the top-right corner. Not done yet. I will go right here and add border-radius 50 percent from the top left corner. 15% on the top right corner, 15 percent as well on the bottom right corner, and finally, 50 percent on the bottom left corner. So now you can see the bot has rounded corners, which looks much better. So this is actually just the first part of the bow. We will create another identical part using the before pseudo element. I will go right here and target that before pseudo element of the bot div. And I will add content, empty strings, position, absolute, width 100%, and height 100%. Then I will add a background color. The same pink color, then border-radius, 15 percent, 50, 50% percent, 15 percent. And finally, to make it sit on the left side of the first part, we will add left minus 30 pixels. There we go. We now have the two parts of the bow, and together they look exactly the way we want. Let's do one last thing. Let's just rotate the bow a little to make it look cuter. And we'll go up here and add transform. Rotate, just 10 degrees. And there it is. The bone now looks exactly how we want. Now we have one thing left to do and that is creating the heart shape. So let's learn how we can do that. And we'll target our div with the class of heart. And I will add some styles to it. I'll start by adding position, absolute. Then width, 85 pixels. Height, 85 pixels as well. Background-color. Our pink color. Good. Now you can see this is just a normal div with a pink background sitting in the top left area of the beaver body. So let's first go ahead and position it in the right place. I will go back here and add top 70 percent. Then in order to center it horizontally, I will add left 50 percent and transform. Translate x minus 50%. Cool. So now you can see the pink square is now in the position we want it to be. All right, so we just have a pink square. Now, let's see how we can turn this into the heart shape. I will go right here and we're going to use both the before and the after pseudo elements to make the heart. So I will start with the before pseudo element right here. And I will just make the content empty. Then I will add position, absolute, top 0, left 0 as well. Then width 100%, and height 100%. Then I will add a background color. And let's add white for now. Good. Now you can see we just have our before pseudo element with the white background colors sitting on top of our div with the class of heart. So what we need to do now is we need to make the white div moved toward the top by half of its height. I will go back to my CSS and inside the before pseudo element, I will add transform translate y minus 50%. And now you can see that the white div moved toward the top by a distance equal to half of its height. Great. Now I will copy all of that. Paste it again. And I will just change before to after. And I will change the white background to, let's say green. Now this time we want to move the after pseudo element to the left, not to the top. So I will just go right here and change Translate Y to translate x. And you can now see a move to the left, a distance equal to half of its width. Now I will go right here in the div with the class of heart. And in the transform declaration, I will add rotate, and I will rotate it by 45 degrees. So now you can see the div has been rotated by 45 degrees and both the before and after pseudo elements were rotated with it. Maybe now you're thinking that we're getting pretty close to perfect and you'd be right. All we need to do now to get the heart shape is to go right here to the before pseudo element and add border-radius 50 percent. Then I will do the same for the after. And now you can see we've got the heart shape we want. Let's go back and change the background color for both of them to pink as well. And here it is, folks, we have our heart-shaped and with that, we have finished the first lesson. We will continue working on this illustration in the next one. See you there. 22. 22 beaver part 2: Hello everyone, welcome to this new lesson in the course. In this lesson, we will continue working on the beaver illustration we started in the last lesson. If you remember, we created the body, the arms, the bow, and the hard parts. And in this lesson, we will start where we left off. So let's do that. First of all, we will start by adding the eyes of the beaver. So I will go right here and add a new div. Give it a class of I left. And inside it, I will add another div and give it a class of lashes. Then I will copy that. Paste it again, and change left to right to add the HTML markup for the rain. I cool. Now let's go to our CSS to start creating the eyes. Let's first quickly take a look at our demo so that we can remember how the eyes look. You can see the eyes or just a curved line from the bottom left and bottom right corners with three lashes attached to them. This will be easy to do. So let's go back and start doing that. I will target the div with the class of I left. And I will add position, absolute width, 20 pixels, height, 10 pixels. Then border three pixels, solid. And this dark gray color. So here you can see we just have a small transparent rectangle with a dark gray border around it. In order to get the eyes shape, we will need to remove the top border and add some curves to the bottom left and bottom right corners. So I will go back inside the eye left selector, and I will add border top 0. Then border bottom-left radius 100 pixels, and border bottom right radius 100 pixels as well. Then in order to position it right, we will add tab 35 percent and left. 32 percent. Nice. So here you can see the top border is now removed and the border is now curve from the bottom, giving us the eye shape we want. And it's positioned in exactly the right place. All right, let's now quickly create the eye. I will just copy the left eye code, paste it, and change I left to irate. Then the only thing we need to change is the position. We want to position this I on the right side, of course. So we will just change left to right. And now we have the second I sitting on the right side of the face. Now let's create the three latches attached to the eyes. We will use the div with the class of lashes, and we will use the before and after pseudo elements to create the three lashes. So I will target the div with the class of lashes. And I will add position, absolute width, just two pixels, height, eight pixels, and background color. The dark gray color. Then in order to attach it to the bottom of the eye curve, we will add bottom minus eight pixels. And this will be the one in the center. So we will add left 48%. So now we have the first latch and it's centered on the IS curve. Let's create the second one using the before pseudo element. I will go right here and say lashes colon before. And inside that I will add content. Empty strings, position, absolute. And because we want it to be identical to the one we just created, we will add with 100% and height, 100%. Then background color, the same dark gray color. And you can see nothing changed because the before pseudo element is sitting on top of the first latch and it's centered on the IS curve. So let's go back and position it on the left. I will add left minus 10 pixels. And in order to attach it to the left side of the eye curve, we will need to shifted a little to the top. So I will add tab just minus2 pixels. And let's also rotated a little to make it look nicer, I will go back and add transform, rotate, just 20 degrees. Cool. So now you can see the left lash is now attached to the eye curve and rotate it. And it looks nice. Let's quickly do the same for the right lash. And we'll copy all of this code. Paste it again, change before to after. And inside. After pseudo element, I will just change two things. I will change left here to write, to position it on the right side. And I will also change the rotation angle to minus 20 degrees instead of 20 to rotate it in the other direction. And just like that, you can see the right lash is now created and looking nice. And by creating it, we have now finished the eyes of the beaver, which is awesome. Let's go to our demo to see what we're going to do next. Well, let's work on the mouth part. We will start by working on this beige muzzle part right here. You can see it consists of two parts. We will create the first part using a div with a class of muscle. We're going to add to our HTML. And we will create the second part using the before pseudo element of this muzzle div. So let's get to it. I will go right here in my HTML and I will add a div and give it a class of muscle. Then I will go to my CSS and targeted div with the class of muscle. Then I will add position, absolute width, 87 pixels, height, 55 pixels. Background color. This beige color. So you can see here, we just have a beige background sitting on the top left corner of the frame. So let's go back and position it right. I will go here and add top 45%, left, 27 percent. And now you can see it moved to this new position. And we just need to add some border radius on the top and bottom left corners and rotated a little to get the exact shape of our first part. So let's do that really quick and we'll go back here and add border-radius, 50 pixels on the top left corner, then 0 on the top right corner, and 0 on the bottom right corner as well. And finally, 50 pixels on the bottom left corner. Then I will add transform, rotate, and 10 degrees just to rotate it a little. So now you can see the left part is now curved and rotate it the exact way we want. Now let's create the second part using the before pseudo element. I will add muzzle colon before. And I will add content. Empty strings. Position, absolute, width, 100%. Height, 100%, of course, because we want it to be identical to the left part. So it must have the same width and height, then background-color, our beige color. And in order to position it on the right side, we will add left 100%. And we need the curves this time to be on the top right and bottom right corners. So we will add border-radius. 0 pixels, 50 pixels, 50 pixels, 0 pixels. And just like that, you can see the right part is now created and it's rotated by minus ten degrees along with the left part because it's the before pseudo element of it. So it's considered a part of it. And in order to get the shape we want, we will need to rotate the right part by 20 degrees, not 10 this time. So I will go here and add Transform, Rotate 20 degrees. And now you can see it's rotated by 20 degrees. But because it's rotated on its center point, it's giving us this shape. In order to make sure it will be attached to the first part, we will rotate it on its top left corner, and we can do that using the transform origin property. So I will add transform origin left top. And just like that, you can see that the right part is now attached to the left one and the overall shape of the muzzle is looking exactly the way we want. All right folks, We did a great job in this lesson, creating the eyes and the muzzle of the beaver, but we aren't done yet. We will continue in the next lesson. See you there. 23. 23 beaver part 3: Hello everyone, welcome to this new lesson in the course. In this lesson, we will continue working on the beaver drawing. We will create the nose and the teeth of the Beaver. You can see the nose is just a dark brown rectangle with just some curves around the corners. And the teeth, or a white rectangle with the brown line in its center. This will be an easy lesson, so let's start creating them. Let's start with the nose. I will go right here in my HTML, and I will add a div, give it a class of news. Then I will go to my CSS to target the div with the class of nodes. And inside it, I will add position. Absolute width, 56 pixels, height, 42 pixels. And background color. This dark brown color. So now you can see we have this dark brown background sitting on the top left corner of the frame. So let's go back and center it above the muzzle. And to do that, I will add left 42% and top 42% as well. So now the nose is located in the position we want it to be in. Next, we need to add some curves on the corner to get the rounded shape of the nose. So I will go back here and add border-radius. 100% from the top left corner and 100% from the top right corner as well. Then 40 percent and 40 percent at the bottom right and bottom left corners. So here you can see the nose is now curved and looks exactly the way we want. Now. All right, Now let's move to the teeth. If you remember the teeth or just a white background with a thin brown line in the middle. So let's go again to our HTML. Add a div with the class of teeth. Then let's go to our CSS to target this div with the class of teeth. Add position. Absolute width, 44 pixels, height, 40 pixels. Background color, white. So here you can see we have a white background sitting in the top left corner. And to position it, I will go back here and add left 44% and top 53 percent. And we need to add some small curves on the corners. So I will just add border-radius, just five pixels. All right, So now the teeth are located in the center of the face, under the muzzle and the nose. Now, we only thing left to finish the teeth is the thin brown line in the center. So let's create it. I will go right here and say colon before. And inside that, I will add content. Empty strings, position, absolute width, just two pixels because it's a thin line. Height. 100% of course, because it takes up the whole length of the teeth. Then background color, our brown color. And in order to center this line in the white tea, we will add left 50 percent. Then transform, translate x minus 50%. And just like that folks, you can see we now have this thin brown line in the center of the teeth and it's dividing it into two teeth instead of one, which looks a lot nicer. That's it for this lesson, everybody, and we will continue in the next lesson. See you there. 24. 24 beaver part 4: Hello everyone, welcome to this new lesson in the course. And in this lesson we will continue working on that Beaver drawing. We only have two things we didn't finish yet, the whiskers and the ears. Let's start with the whiskers. If we take a look here, we can see that the whiskers consist of three lines. The first line is rotated clockwise, the second line is horizontal, and the third line is rotated counterclockwise. We will create the first line using a div with the class of whiskers left. And we will use the before and after pseudo elements to create the second and the third lines. So let's get to it. We'll go right here in my HTML and I will add a div, give it a class of whiskers left. Then below that I will add another div. Give it a class of whiskers, right? When I will go to my CSS to start creating those whiskers, I will target the div with the class of whiskers left. And I will add position. Absolute width, 105 pixels. Height to pixels. Background color, this dark brown color. So you can see we have a thin brown line that's sitting on the top left corner of the frame. So let's go back and position it in the place we want it. I will go here and add left, 10 percent and top 48%. So here you can see the first line of the whiskers is positioned in the place we want. It just needs to be rotated a little. So let's do that. I will go back here and add transform. Rotate just ten degrees. And now you can see the first line is now rotated clockwise by 10 degrees. Cool. Now it's time to create the second horizontal line. We will use the before pseudo element to create that. I will go here below the whiskers left selector, and I will say whiskers left colon before. And inside that I will add position, absolute, content, empty strings. And because we want it to be identical to the first line, we will add width 100% and height 100%. And of course we will add background color, our dark brown color. So now you can see nothing changed because the before pseudo element is appearing on top of the first line. And because they are identical, they appear as one line. So let's go back and change its position to make it appear under the first line. I will go here and add tab just 15 pixels. And I want to push it a little bit to the left. So I will add left two pixels. And here you can see it's now appearing beneath the first line. And because it's rotated by 10 degrees along with the first line, it appears like this, but we want it to be a horizontal line. So I will go back here and add transform, rotate, and I will rotate it back by minus ten degrees. And now you can see the second line is now horizontal. All right, let's work on the third one. I will copy the before pseudo element, paste it again and change before to after. And inside that, I will change top to 30 pixels instead of 15 because we want it to sit under the second line. And I will also change left to five pixels to push it a little inward. And now you can see the third line is sitting in the place we want, but we want to rotate it by 10 degrees counterclockwise is not rotated by 10 degrees, but in the other direction. So to make that happen, I will go here and add minus 20 degrees. And now you can see the third line is now rotated and looking exactly the way we want. So we finished the left whiskers. Let's quickly work on the right one. So I will go up here and copy the div with the class of whiskers left. And I will change left to right. Then inside that, I will just change left to right because we want it to be positioned on the right side, of course. Then I will also change the rotation direction. So I will make this minus 10 degrees instead of 10. So here you can see the first line of the right whiskers is now rotated and looking good. Now let's move to the other two lines. I will copy them before pseudo element of the left whiskers and tasted here and change whiskers left to whisk is right. And inside it, I will change left to right and change this minus 10 degrees to ten degrees. Then I will also copy the after pseudo element of the left whiskers. Paste it and change left to right. Then inside it I will change left to right as well. And the rotation degrees to 20 degrees. And just like that, the other two whiskers are now created and sitting in their position. And by creating them, well, we've finished the whiskers. Now let's move to the ears. Let's go to our HTML to add the markup for the years. And we'll go right here below the body div. And I will add a div, give it a class of ear left. And below that, I will add another div and give it a class of year rate. Then I will go to my CSS to start creating those two years. I will start by targeting the div with the class of year left. And I will add position, absolute width, 38 pixels, height, 46 pixels. And background color. This light brown color. Then I will add border eight pixels, solid. And this darker brown color. So now you can see we have a rectangle with a border around it, sitting on the top left corner. So let's go back and position it right. I will go here and add tab 15% and left 18%. So here you can see the rectangle is now located in the position we want. Now we have two things left to finish the left ear. First, we need to add border-radius to make it circular. Then we need to rotate it to make it look the way we want. So I will go back here and add border-radius 50 percent and Transform, Rotate minus 45 degrees. So now you can see the ear is looking exactly the way we want. But there is one problem, because the ER comes after the body in the HTML markup, it's appearing on top of it. We can fix that easily by going into our HTML and adding the ears devs above the body div. And just like that, the left ear now appears underneath the body and looks the way we want. So let's quickly create the right ear. I will just copy the left ear code. Paste it again, change eerie left to right. And inside the code, I will change left to right. And the rotation degree I will make is 45 degrees instead of minus 45. And just like that, you can see the right ear is now created and looks amazing. And here it is everybody. We have now finished the B redrawing that we started a few lessons ago. And it was a little bit advanced, but I hope you enjoyed creating it as much as I did. 25. 25 clock, books and cactus on a shielf part 1: Hello everyone, welcome to this new lesson in the course. In this lesson, we will learn how to create this illustration using only HTML and CSS. You can see we have a shelf here. And on this shelf we have o'clock, three books and a plant all sitting next to each other, giving us this nice illustration. So let's see how we can create this using only HTML and CSS. In this lesson, we will create only the shelf and the clock. Then in the next lessons, we will create the books and the plant. So before we go to our HTML, Let's take a close look at the shelf and the clock. You can see the shelf is just a brown rectangle that has a lot of width and a small height. So it will be easy to create. And when we look at the clock, you can see it consists of several parts. First, the clock face itself, which is just a white circle with a green border. Then we have the hands of the clock, the hours, the minutes, and the seconds hand. And we also have this little not that holds the hands of the clump together, which is just a little circle centered on the clock face. Then on the top left and right corners of o'clock, we have the alarm bells, which I like to call clock ears, which are just curved rectangles. And finally, we have the clock feet sitting in the bottom left and bottom right corners. So after taking a brief look at the clock parts, Let's go to our HTML and start adding those parts. I will go right here and start by adding our shelf. So I will add a div, give it a class of shelf. Then inside it, I will add another div, give it a class of clock. Then inside that we will add all the parts of the clock. So I will add a div with the class of not. This will be the little circle that holds all the hands together. Now, let's add the hands. I will add a div, give it two classes, a class named hand and a class named our hand. Then I will copy this div, paste it again two times, and change our hand to minute hand and second hand. So the hand class will be responsible for all the general styles that are applied to all three of the hands. Then we will differentiate them by applying different styles to the other classes. So for example, we will make their height difference because like you've seen in a real clock, the hour hand is shorter than the minute hand, which in turn is shorter than the second one. Then after that, we want to add the clock left and right ears. So I will add a div, give it a class of clock ear left. Then another div with the class of clock rate. And finally, for the clock feet, we will add two divs with a class of clock foot left, and one with a class of clock full rate. Awesome. Now let's go to our CSS to start working on these divs and create our shapes. I will start by targeting the div with the class of shelf. And I will add width, 520 pixels, height, 20 pixels, background color, this dark brown color. And finally, position relative. So here you can see we have our shelf sitting in the center of the page. Now, right now, let's work on the clock. I will target the div with the class of clock. And I will add width, 110 pixels. Height 110 pixels as well. Background color, this white color, border, 10 pixels, solid. This green color. Then in order to make it a circle, we will add border-radius 50 percent. So now you can see we have a white circle with a green border around it. And it's positioned on the top left corner of our shelf. But we want it to be sitting on the shelf. So we need to shift it to the top and to the right. Let's go back and do that. I will add position absolute, left, 30 pixels to shift it to the right by 30 pixels, and top minus 135 pixels to shift it towards the top. So now you can see it's positioned properly on the left side of the shelf. All right, let's start working on its parts. Let's start with the nut that holds the hands. I would target it and add width. Ten pixels, height, 10 pixels. Background color. This dark red color, border-radius, 50 percent. And in order to center it, we will add position, absolute, left, 50 percent, Top, 50 percent. Then transform, translate minus 50% and minus 50%. Cool. So now you can see we have this little not sitting inside our clock. Let's now work on the hands of the clock. I will target the div with the class of hand to add general styles for the three hands. And I will add with four pixels, height, 50 pixels, background color, this brown color. Then in order to send to them, we will add position, absolute, left, 50%, Top 50 percent, and transform. Translate minus 50 percent and minus 50%. So now you can see we have the three hands, but they're stacked on top of each other, so they're appearing as one hand. And you probably noticed that they're centered inside the clock, but we don't want them to be centered like that. Instead, we want them to reach outward from the NADH. In other words, we want them to be shifted toward the top and they're starting point to be attached to the NADH. We can do that by shifting them towards the top by 100% of their height, not 50%. So I will go back and change this minus 50% to minus 100%. And you can see the three hands now are shifted toward the top and attach to the NADH. Now, let's target each hand individually to differentiate their properties. I will target the hour hand, which has a class of our hand. And I will set the height to 30 pixels to override the 50 pixel height we added up here, because the hour hand is usually the shortest. Then we want to rotate it a little so that we can see all three hands. So I will add transform. And in order to keep its position as it is, I will copy it from here and paste it. Then I will add, rotate 45 degrees. And you can see the hour hand has now rotated by 45 degrees to the right, but it's been rotated on its center point so that it appears like this, but we want it to rotate on its bottom most point so that it will still be attached to the NADH. So I'll go here inside the hand selector. And I will add transform origin bottom, so it will override the default center point. Cool. Now the hour hand is rotated while remaining attached to the point. Let's do the same for the other two hands. I will target the div with the class of minute hand. And I will add height, 40 pixels, width three pixels instead of four, because we want it to be a little thinner. Then we will copy the transform properties from the our hand. And we will just change the number of degrees is rotated by two, let's say 160 degrees. Cool. Let's finally do the same for the second hand. I will target it. Add height 47 pixels, width two pixels. And just paste the transform values and change the rotation to, let say, minus 40 degrees. Awesome. Now the hands are looking just like a real clock. But if you take a closer look, you can see they're covering up the NADH. We want them not to appear on top of them. So I will go to the div and I will add z-index nine to make sure it appears on top of the hands. Like so. All right, now, after finishing the clock hands, we will start working on the ears. Let's create the left ear first, then work on the right one. After that, I will target the div with the class of clock ear left. And I will add height 30 pixels, width, 60 pixels. Background color. Our green color. So you can see we've just got a green div with a width of 60 pixels and a height of 30 pixels, sitting on the top left corner of the clock. Let's go back and change its position to put it where we want, I will add position, absolute, left minus 38 pixels, top minus 12 pixels. These values will shift the ear to the left and to the top, like so. All right, Before finishing it, Let's add another little rounded triangle above it. To make it look better. We will use the after pseudo element to do that. So I will add clark ear left colon after. And I will add content. Empty strings with 15 pixels. Height, just eight pixels. Background color. This dark red color. Then I will add position, absolute, top minus nine pixels and left 23 pixels. So now you can see this small red background sits above the left ear due to the positioning values we added right here. All right, now let's go back to the left ear itself and continue working on it. We want some border-radius on the top-left and top-right corners. So I will add border radius, 90 pixels on the top left corner, 90 pixels as well on the top right corner. Then 00 at the bottom right and bottom left corners. And let's also do the same for the after pseudo element that sits above it. So I will copy that and paste it here. So now you can see they both got these rounded corners. Now, we only need to rotate the ear to the left to get the shape we want. I will go back here inside the left ear selector and add transform, rotate minus 50 degrees. So now you can see they're both rotated and looking exactly the way we want. Let's quickly do the same for the right ear. I will copy all of that. Paste it again and just change left to right. Then inside it, I will change left to right as well to position it on the right side nonetheless. And I will change the rotation to 50 degrees instead of minus 50. Then I will copy the after pseudo element, paste it, and change left to right, of course. And just like that, you can see we have the right year in the position we want. Cool. Now we only have one thing left to do to finish the clock, which is creating the clock legs. Let's target the left leg first, and we'll go right here and say clock foot left. And I will add height, 50 pixels, width, just 12 pixels. Then background color, this dark brown color. So you can see we have the brown background sitting on the top left corner. Let's go back and position it properly. I will go back and add position. Absolute, left, 20 pixels, bottom minus 25 pixels. So now it's positioned near the bottom left corner of the clock. We just need to rotate it and make it appear underneath the clock layer. So I will go back and add transform, rotate 30 degrees and Z index minus one. So now you can see it rotated. The clock is appearing on top of it, and it looks exactly the way we want. So let's do the same for the right foot. I will copy all of that. Paste it again, and change left to right to target the right foot. And I will change left to right. And I will rotate it in the other direction. Cool. So we've got the right foot done, and here it is everyone. We created the shelf and the clock, and we will continue working on this illustration in the next lesson. 26. 26 clock, books and cactus on a shielf: Hello everyone and welcome back. In this lesson, we will continue working on our illustration. We will create the box. So you can see here we've got three books sitting beside each other with different colors and different sizes. And you can see they have these white ribbons, knew their tops, and also have two different tones of the same color, a light tone and a darker tone to give the feeling that the light is hitting it from an angle. So let's create that. I will go here in my HTML and below the clunk div, I will add a div, give it a class of book 1. And I will copy that. Paste it again. And say Book 2 for the second book and book three for the third book. Then I will go to my CSS target, this div with the class of book 1. And I will add width, 40 pixels, height 170 pixels. Background color, this dark red color. So you can see now the div is starting from the top-left corner of the shelf. Let's go back and position it to make it sit on the shelf next to the clock. I will go back here and add position absolute. Left, 210 pixels, top minus 170 pixels. And now you can see the first book is now positioned next to the clock. Next, let's work on the white ribbon that is placed near the top of the book. We will use the before pseudo element to create that. I will go back here and say book one, colon the four. And I will add content empty strings because we don't want any string or characters here. Then I will add width, 100%. So it will take up the full width of the book, then height, just 20 pixels. And background color. This off-white color. Then in order to place it near the top of the book, I will add position absolute, top 20 pixels, left, 0. So now you can see the white ribbon is now visible and placed near the top of the book. Alright, now let's work on the shadow on the book that has the full height and 50 percent of the width of the book. The color is just a darker tone of the main book cover. We will use the after pseudo element this time. So I will go right here and say book one, colon after. And inside that I will add content, empty strings. Width, 50 percent height, 100% background color. This black. Then we wanted to have some transparency. So I will add opacity 0.15. Then to position it, I will add position absolute top 0. And because we want it to be on the right side of the book, we will add right 0. So here it is. We have this darker tone that gives the appearance of a shadow on the book and makes it look more realistic. With that, we have finished the first book. The other two will be the same as the first one. We will just change the positioning, the height, and the color of each book. So let's do that really quick. I will just go here and copy the first book selector, paste it, and change one to two. Then I will change the height to 195 pixels and top to minus 195 pixels as well. And I will seems left to 250 pixels to position it next to the first book. And of course, I will change the background color to this orange color. So now you can see the orange book sits next to the red one. Let's add the third book. I will copy the first book again. Paste it, and change one to three. And change the background color to this green color. Then change left to 290 pixels and height to 180 pixels. And finally top to minus 180 pixels. And now you can see the third book sits next to the second one. We now only need to create the white ribbons and the shadows for the second, third books. In order to make the white ribbon, I will just go here next to the first White Ribbon, and I will add a comma. Then I will say Book 2 colon before. Then another comma and Book 3 colon before. So now you can see the white ribbon is also on the other two bucks. Then I will just do the same for the after pseudo element. I will add the second, third after pseudo elements. And now you can see we have the three books sitting next to each other and looking exactly the way we want, which is great. 27. 27 clock, books and cactus on a shielf: Hello everyone, welcome to this new lesson in the course. In this lesson, we're going to finish our illustration. If you remember, we've created the clot and the three books in the last two videos. And in this lesson, we will continue where we left off. We will create this little cactus plant. So if you look at this plant, you can see it consists of a part with two plants inside it. The part has a bottom part and the top part. So let's start creating that. I will go here in my HTML. I will add the markup for this cactus plant. I will add a div and give it a class of cactus. That will be the div that contains all the parts of the plant. And inside it, I will add another div, give it a class of part. And inside that part div, we will add two divs, one for the top part of the part and the other for the bottom part. So I will add a div, give it a class of part top. And below that, I will add another div and give it a class of part bottom. Then below the part div, I will add a div with the class of plant left, and another one with a class of plant rate. Now, after adding all the parts, I will go to my CSS target the div with the class of cactus that contains all the parts. Add width, 100 pixels, height 180 pixels. Then we will add a temporary background so that we can just see where our characters is located. We will make it red. Then to position it next to the books at the end of the shelf, we will add position absolute, left, 380 pixels and top minus 180 pixels to make it sit on top of the shelf. So you can see we've just got a red background that sits next to the books. Alright, let's keep going. And we'll go back and target the div with the class of part that contains the top and bottom parts of the pot. And I will set its width to 100%. So it will take up the whole width of the cactus. And I will set its height to 50 percent, so it will take up half of the height of the cactus. Then we want it to be located at the bottom of the cactus. So we will add position, absolute and bottom 0. Then in order to help us visualize it, we will also add a temporary blue background. All right, so you can see the blue background takes up 50 percent of the height of the red background and sits at the bottom. So this will be the part, meaning it will contain the top and bottom parts of the part. So let's go back and style those parts. I will target the div with the class of part bottom. And I will add width 100% and height 70 percent. Then background color, this brown color. Then as this is the bottom part of the part, we want to center it in the bottom of the part, of course. So I will add position, absolute and bottom 0. Cool. So now you can see we have the brown background and it's taking up 70 percent of the part height and leaving the other 30 percent at the top here. You can see the blue part here is the 30 percent that's leftover and this 30 percent will be the top part of the part. So let's go back and target this top part. I will say part tab. And I will add width 140% because its width is bigger than the parts width. Then height. As we just said, 30 percent background color. This darker brown color. And in order to position it on the top of the part, we will add position absolute top 0. So you can see the top part is now visible and it's kind of exceeding the part because its width is bigger by 40 percent. So in order to center it in the part, we need to shift it back by 20 percent. So I will go back to do that. I will add left minus 20 percent. Cool. So now the top part is positioned properly at the center and our part is now finished. Now we only thing left to do to finish our illustration is the plant itself, meaning the left plant and the right plane. Let's start with the last one. I will go back to my CSS and target the div with the class of plant left. And I will add width, 45 percent. Height. Let's plant is a little shorter than the right one, so we will make it take 35 percent of the cactus height, then background color, this green color. So here you can see we have this green background sitting in the top-left corner of the cactus div. It has a width of 45% and a height of 35 percent. Now, right now we want to position it properly. So I will go back here and add position, absolute, then bottom, 50%. This will make the plants start growing from 50% of the cactus height from the bottom, which is where we want it to start growing from. Then we want to shift the plant a little inward so we will add left 5%. So here you can see the green plant is positioned properly and it's pushed a little inward to the left. We only thing left is adding some border-radius to the top-left and top-right corners. So it will look nicer. We can do that really quick by going here and adding border-radius, 50 pixels from the top left corner, and 50 pixels from the top right corner. Then 00 at the bottom right and bottom left corners. All right, so here you can see the plant now has curves that look much nicer than before. Cool. Let's also create the right plant so that we can finish this cactus. I will just go back here, copy this plant left code, paste it, and change left to right. Then I will change the height to 50 percent because we want it to be a little taller than the left one. And we will also change left here to right because we want to position it on the right, of course. And now you can see the right plant sits next to the left one. Cactus plant is now finished. The only thing left is just removing this red background, which I will do now. So everyone, after three lessons, here it is. The plant is finished. And by finishing that, we have also finished our illustration of the clock books and their cactus plant. It was a very interesting CSS drawing in my opinion. And I hope you've enjoyed creating this as much as I did. 28. 28 homer drawing part 1: Hello everyone, welcome to this new lesson in the course. In this lesson we are going to create Homer from the symptom series. You can see we have his face with his big eyes and big mouth. We will create this drawing over the next few lessons starting with this one. So in this one we will create the forehead, these two hairs, and the two eyes. Then we will continue working in the next lessons. So I will start here in my HTML by adding a div and giving it a class of head. Then inside that div I will add another one, give it a class of forehead. And below it we will add two divs for the two hairs. So I will add the first div, give it a class of hair one. Then I will add another div, give it a class of Her2. Then we need to add the divs for the eyes. So I will start with the right eye. I will add div, give it a class of our eye. And inside it I will add another div and give it a class of Pupil, Right? So this will be the pupil inside the eye. Then I will copy these two divs, paste them again, and change this to l for the left eye and pupil left for the left pupil. And now that we've finished the HTML markup for this lesson, Let's go to our CSS and start creating our drawing. I will start by targeting the div with the class of head. And inside it I will add position, relative width, 215 pixels, height, 405 pixels. And in order to see where we will place things in this div, we will add a temporary green background. So I will add a background color, green. And here you can see we have a green background that will contain our drawing. Let's keep going. I will go back and target the div with the class of forehead. And I will add position, absolute width, 170 pixels, height, 200 pixels. Background color. Our yellow color, and border. One pixel, solid black. So you can see here we have a yellow rectangle that sits in the top left corner of our green background. So let's go back and keep on going. I want to move the forehead down a little, so I will add top 10 pixels. Then we want to add some curves around the corners. So I will add border-radius. 60 percent, 50 percent. So here you can see the forehead is now more of a circle and looking exactly the way we want. Now, we just need to rotate it a little to the left. So I will go back here and add transform, rotate minus 18 degrees. And just like that, you can see the head is looking exactly the way we want. Cool. Now, let's create Homer's two hairs. I will target the div with the class of pair one. Inside it, I will add position, absolute width, 80 pixels, height 70 pixels. And I will add a temporary red background. So I will add background color red. So here you can see we just have a red background that sits in the top left corner of the green background. Now in order to create this first here we will use the border property. So it will be a border of this red background. So I will go back here and add border top two, a solid black. Then I want to move it down a little. So I will add top 15 pixels. And in order to make it curve like a hair, I will add border-radius 50 percent. So here you can see the red background is now a circle and the top border, which is the hair, is curving along with it. Now, we just need to rotate the hair a little because it's not quite looking the way we want. So I will go back here and rotate minus 40 degrees. Then I will remove this red background because we don't want it anymore. So now you can see the first head is rotated and looking just the way we want it to. Cool. Now, let's quickly go and create the second hair. I will copy this code, paste it again, and change here 1, 2, HER2. Then inside the code, I will change top here to left in order to move it to the right instead of the bottom. And I will change the value to 10 pixels instead of 15. Then I will change the rotation degree to minus 30 instead of minus 40. And here you can see the second here is now sitting on top of the first one. And by creating it, we have finished the hares. All right, now let's create the eyes and I will start with the right eye. I will target the div with the class of our eye. And inside it I will add position. Absolute. Width, 75 pixels, height 75 pixels, background color, white. Then I will add border, one pixel, solid, black. And border-radius 50 percent because it's a circle, of course. And you can see we now have this white circle sitting in the top left corner of the head. So let's go back and position it in the right place. I will go here and add left 120 pixels and top 110 pixels. And now you can see the right eye is sitting in its new position. Cool. Now let's create the pupil, which is just a small black circle. I will go right here in my CSS and target to div with the class of pupil rate. And add position. Absolute width, just nine pixels. Height. Nine pixels as well. When background color, black and border-radius, 50 percent. So here it is. The right pupil now sits in the top left corner of the eye. So let's go back and position it properly. I will go here and add left 35 pixels, top 40 pixels. And just like that, you can see the pupil is now sitting in its new position. And I think it looks really nice. Now let's create the left eye really quick. I will copy this code, paste it again, and change our eye to L. And inside it, I will change top 2115 pixels and left to 60 pixels. Then I will copy the div with the class of pupil right. Paste it and change it to Pupil Left. Then inside it, I will just change left to 25 pixels instead of 35. And just like that, you can see the left eye is now created and sitting next to the right one. And by creating the right II, we now have finished this lesson and we will continue working in the next one. 29. 29 homer drawing part 2: Hello everyone and welcome to yet another new lesson in the course. In this lesson, we will continue working on Homer from the symptoms drawing. You can see in the last lesson, we created the head shape, the two hairs and the eyes of the drawing. And in this one we will continue working. So we will continue working on the face and we will create the nose. So if we change the colors of the face parts, we add it. You can see we've added two different part to create this face shape. So I will be adding two divs to create these two parts. And of course we will add another div that creates the nose shape. So let's get started. I will go here in my HTML and I will add a div, give it a class of F side one. So this will be the first part or side of the face. Then I will add another div, give it a class of F side two. And for the nose shape, I will add a third div with the class of nose, of course. Alright, now, adding the HTML markup, I will go to my CSS and target the div with the class of F side one. Then I will add position, absolute width, 140 pixels, height 60 pixels. Then background color, red for now. So here you can see we have a red rectangle that sits in the top-left corner of the drawing. So let's go back and position it correctly. I will go here and add top 185 pixels, left, 30 pixels. And just like that, you can see the red rectangle is now positioned in exactly the place we want it to be. All right, now let's target the second part that creates the face shape. I will go below the first part and I will target the div with the class of f side2. And inside it, I will add position, absolute width, 40 pixels, height 60 pixels. And background color, blue for now. So you can see we just have a blue background that sits in the top-left corner and we need to position it in the place we want. So I will go back here and add top 165 pixels and left 22 pixels. So now you can see the blue backgrounds sits in this new position, and we just need to rotate it a little counterclockwise, so it forms the next sheet. So I will go back here and add transform, rotate just minus 11 degrees. And I will also add a border left. One pixel, solid black. And just like that, you can see the blue background is now rotated and looks pretty good. And now we just need to change the color of the two parts too, yellow. So I will go back here and change this red to yellow. And I will also change this blue to yellow. And now you can see the two parts are now yellow and they form the face shape together. But if you take a closer look, you can see that the first part is covering a little part of the left eye. So in order to fix this problem, we can simply move this part above the eyes and our HTML so that the eyes will cover it. So I will go to my HTML, copy this part, and move it to the top above the eye selector. And now you can see the eyes are just sitting on top of the first part and our shape is looking amazing. Now let's move to the nose and see how we can create it. I will go back to my CSS target, the div with the class of no's. And inside that, I will add position. Absolute width, 60 pixels, height, 32 pixels. Background color, red for now. And in order to position it, I will add top 175 pixels, left, 130 pixels. And now you can see we have this small red rectangle positioned in the nose position. But in order to look exactly like the nose, it needs some more work. We need to add some curves to the top right and bottom right corners. And we will also need to add some thin borders to the top right and bottom sides in order to make it look exactly like the nose. So I will go back here and add border, top right radius 20 pixels. And border bottom rate radius 20 pixels as well. Then I will add border top, one pixel, solid black. Border bottom, one pixel, solid black as well. And finally, border right? One pixel, solid black. And let's also change the color of our nose to our yellow color. I will go up here and change this red to yellow. And just like that, you can see the nose is now looking exactly the way we want. It has curves on the top and bottom right corners. And it also has a nice borders. And this is it everybody for this lesson. And we will continue working on our drawing in the next one. 30. 30 homer drawing part 3: Hello everyone, welcome to this new lesson in the course. In this lesson, we will continue working on our Homer drawing after creating the nose and the face parts last lesson. In this lesson we will create the mouth. You can see it looks like this, but how are we going to create that? Well, let's take it step-by-step. If we take a look at this demo, you can see that these are parts that when put together, form the mouth shape. So if we change the colors of each part to the mouth color, they will give us the shape of the mouth. So let's do that really quick and see, take a closer look at the blue part here. And if I move to the next demo, you can see it now has the mouth color. Do the same for the other parts. So look and notice how all these parts form the mouth shape we want. Alright, now let's see how we can create these parts in action. I will go here in my HTML and above the F side2 div, I will add a div, give it a class of mouth. And inside it, I will add another div, give it a class of mouth, part one. And below it, I will add a second div, give it a class of mouth part two. Then below the div with the class of mouth, I will add a third div, give it a class of mouth part 3. Then I will also add mouth part 4 and mouth part five below these divs. So these would be the five parts that together will create the mouth shape. So let's go to our CSS and see how we can do that. I will start by targeting the div with the class of mouth. And inside that, I will add position, absolute width, 115 pixels, height, 120 pixels. Background color, blue for now. Then, in order to position it, I will add top 207 pixels, left, 60 pixels. So here you can see we just have a blue background that sits in this position. Let's keep going. I will go back here to my CSS and I will add border-radius. And the percent and border, one pixel, solid black. And now the blue background change to a circle with a thin black border around it. Cool. Now let's move to the second part. I will target the div with the class of mouth part one. And inside it I will add position, absolute width, 20 pixels, height, 30 pixels, background color, beige. And in order to position it, I will add top 62 pixels and left 98 pixels. And here you can see a small beige background sitting in this position. Alright, let's keep going. I will go back here and add border-radius, 50 percent border, right? One pixel, solid, black. And transform. Rotate 15 degrees. And now it looks exactly the way we want. Now, let's work on the third part. I will target the div with the class of mouth part two. Then I will add position, absolute width, 120 pixels. Height, 60 pixels. Background color, white. Top 20 pixels, left, 30 pixels. All right, here you can see we have a white background sitting in this place. I will go back here and add border-radius 60 percent and border bottom. One pixel, solid, black. And finally transform, rotate minus six degrees. You can see the white background is now curved, rotated and has a thin black border. Cool. Let's move to the fourth part. I will target the div with the class of mouth part 3. And I will add position. Absolute Width, 35 pixels, height, 48 pixels. Background color. Pink. Top, 230 pixels, left, 165 pixels. And here is a pink background sitting in this position. I will go back here and add border-radius, 10 percent border top. One pixel, solid, black. And Transform Rotate 40 degrees. And just like that, we got the shape we want. All right, let's move to the fifth shape. I will target the div with the class of mouth part four. And I will add position, absolute width, 60 pixels. Height, 30 pixels. Background color, red. Top. 200 pixels, left, 130 pixels. And you can see here the red background is sitting in this position and it looks pretty good. Cool. Now, let's go back and add border, right? One pixel, solid, black, border, top right radius, 70 percent. Right? Now it's looking exactly the way we want. Cool. Let's move to the sixth and final part of the mouth. I will target the div with the class of mouth part five. And I will add position. Absolute width, 30 pixels. Height, 30 pixels. Background color, brown. Top. 260 pixels, left. 80 pixels. Cool. Just like that, you can see the brown background is sitting in this position and this is where we want it to be. Now that we have created all six parts, Let's quickly change their color to the mouth color. I will pause the video and change the background color for all the six parts. And just like that, and you can see the mouth is now created and looking exactly the way we want. And we created it by combining all of the six parts together. And that's it for this lesson, everybody. And we will continue working in the next one. 31. 31 homer drawing part 4: Hello everyone, welcome to this new lesson in the course. In this lesson we will continue working on our Homer drawing. So in the last lesson, we created the mouth, which was a challenging lesson. And in this one, we will create the neck and the color of our drawing. So let's see how we can do that. I will start here in my HTML by adding a div and give it a class of neck. So this will be the neck of our drawing. Then below that, I will add another one. Give it a class of color left, then another one, and give it a class of color, right? Cool. Now let's move to our CSS and start making these divs look the way we want. I will start by targeting the div with the class of neck. And I will add position. Absolute width, 125 pixels, height, 150 pixels. Background color, our yellow color. And in order to position it, I will add top 200 pixels, left, 28 pixels. And just like that, you can see we have a big yellow background that sits in this position and is covering the mouth and parts of the nodes. So in order to make sure it doesn't cover them, we can go back to our HTML and move the div with the class of neck, above the div with the class of mouth. And just like that you can see the neck is now sitting underneath the mouth and nose. Go. Let's keep on going. Let's add some borders around the neck to make it fit nicely with the rest of the face. I will add border left, one pixel solid black. Border rate. One pixel, solid black as well. Then I want to rotate it just a little bit to the right. So I will add transform. Rotate two degrees. Cool. Now the neck is finished in looking good. Let's move to creating the color. I will target the div with the class of color left. And I will add position. Absolute width, 110 pixels, height, 60 pixels. Background color, white. And in order to position it, I will add top 330 pixels, left, 10 pixels. And here you can see this is just a white background sitting in this position. All right, let's keep it going. I will go right here and add transform. Rotate 15 degrees, border-radius, 10 percent and border, one pixel, solid. Black. Cool. So now you can see the color is rotated and curved with some thin border around it, and it looks exactly the way we want. Good. Now, let's move to the right color. I will target the div with the class of color rate. And I will add position, absolute width, 20 pixels, height, 50 pixels. Background color, white. Top. 340 pixels, left. 150 pixels. Cool. As expected, there's just a white background sitting in this place. I will go back here and add transform, rotate minus 20 degrees, then border one pixel, solid black. And just like that, everyone, the right color is now finished and we have almost finished the whole drawing. The only thing left is the ear, and we will create that in the next lesson. So, see you then. 32. 32 homer drawing part 5: Hello everyone, welcome to this new lesson in the course. In this lesson, we will finish our Homer drawing. If you remember, we've created everything in the last few lessons. The only thing left to create is just this ear right here. So let's see how we can do that. I will go here in my HTML and I will add a div, give it a class of ear. And inside it I will add another div, give it a class of IR one. And also inside the div with the class of IR one, I will add a third div, give it a class of year 2. Then I will go to my CSS to start creating the ear shape we want. I will target the div with the class of year. And I will add position, absolute width, 32 pixels, height, 37 pixels. Background, red for now. And in order to position it, I will add top 200 pixels, left, 10 pixels. So here you can see we just have a red background sitting in this position and this will be the ear. So let's go back here and add border-radius 50 percent. Then Transform 8, 10 degrees and border. One pixel, solid black. Then I will just change the background color to our yellow color. And just like that, you can see the ear is now circle shaped and rotated a little, which makes it look nice. Then in order to make it look more realistic, we will need to add thin black lines inside it, like these here in our demo. All right, we will do that using the two divs we added inside the ear. I will target the div with the class of year one. And I will add position. Absolute width, 15 pixels. Height 15 pixels. Top eight pixels. Left. Eight pixels. Border left. One pixel. Solid. Black. Border, top left radius 50 percent, and border bottom-left radius 50 percent. So here you can see we have this thin black line. So let's also add another one. I will target the div with the class of year 2. And I will add position, absolute width, eight pixels. Height eight pixels. Top minus three pixels. Border bottom. One pixel, solid black. And just like that, everyone, the ear is now finished. And by doing that, we've just finished the whole drawing, which I think looks really cool. I really enjoyed these lessons and I hope you did too.