├── README.md ├── css-background ├── index.html └── style.css ├── css-box-model ├── index.html └── style.css ├── css-combinator ├── README.md ├── index.html └── style.css ├── css-float ├── index.html ├── logo.png └── style.css ├── css-fonts ├── fonts │ └── GistLight.otf ├── index.html ├── readme.md └── style.css ├── css-inheritance ├── index.html ├── inheritance.jpg └── style.css ├── css-links ├── index.html └── style.css ├── css-list ├── index.html ├── list.jpg └── style.css ├── css-positoining ├── index.html └── style.css ├── css-selectors ├── index.html └── style.css ├── css-specificity ├── index.html └── style.css ├── css-table ├── index.html └── style.css ├── css-text ├── index.html └── style.css └── css-unit ├── index.html └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # CSS3 For Beginners 2 | 3 | CSS3 For beginners is a free course by [JS Bangladesh][1]. In this repository you can find all the used codes in the course. Video links are listed bellow. 4 | 5 | - [Introduction to CSS3][2] 6 | - [Mastering CSS Fonts][3] 7 | - [CSS Text Styling][4] 8 | - [Five Important CSS Selectors][5] 9 | - [Understanding CSS Combinator][6] 10 | - [CSS Specificity Explained in Banla][7] 11 | - [Understanding CSS Inheritance][8] 12 | - [CSS Box Model Explained in Bangla][9] 13 | - [CSS Position Explained in 15 Minutes][10] 14 | 15 | [1]: https://youtube.com/jsbangladesh 'YouTube Channel Link' 16 | [2]: https://youtu.be/gDZYIjNPjI8 'Introduction to CSS3' 17 | [3]: https://youtu.be/NInrXvDE8B8 'Mastering CSS Fonts' 18 | [4]: https://youtu.be/u4E9dJQTNCE 'CSS Text Styling' 19 | [5]: https://youtu.be/cjDQOB831qE 'Five Important CSS Selectors' 20 | [6]: https://youtu.be/n2XMicgZYq4 'Understanding CSS Combinator' 21 | [7]: https://youtu.be/Q-nHDnncBjo 'CSS Specificity Explained in Bangla' 22 | [8]: https://youtu.be/R1yU02fpFcQ 'Understanding CSS Inheritance' 23 | [9]: https://youtu.be/hkDQlV6ROYU 'CSS Box Model Explained in Bangla' 24 | [10]: https://youtu.be/ROvf_S2klJs 'CSS Position Explained in 15 Minutes' 25 | -------------------------------------------------------------------------------- /css-background/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Background 8 | 9 | 10 | 11 |
12 |

13 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 14 | Distinctio ut alias cumque! Beatae labore veniam ab! Pariatur, 15 | repellat provident minima laudantium sit earum unde hic minus, 16 | consectetur quas soluta itaque saepe? Sint deleniti nesciunt 17 | dignissimos? 18 |

19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /css-background/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | background-image 3 | background-position 4 | background-size 5 | background-repeat 6 | background-attachment 7 | background-origin 8 | background-clip 9 | background-color 10 | */ 11 | 12 | div { 13 | padding: 50px; 14 | height: 600px; 15 | background-image: repeating-linear-gradient( 16 | 135deg, 17 | rgb(0, 0, 0) 0px, 18 | rgb(0, 0, 0) 10px, 19 | transparent 10px, 20 | transparent 11px 21 | ), 22 | repeating-linear-gradient( 23 | 22.5deg, 24 | rgb(0, 0, 0) 0px, 25 | rgb(0, 0, 0) 10px, 26 | transparent 10px, 27 | transparent 11px 28 | ), 29 | linear-gradient( 30 | 90deg, 31 | hsl(194, 74%, 56%), 32 | hsl(266, 74%, 56%), 33 | hsl(338, 74%, 56%), 34 | hsl(50, 74%, 56%), 35 | hsl(122, 74%, 56%) 36 | ); 37 | border: 5px dashed black; 38 | /* background-image: url(https://image.shutterstock.com/image-photo/cat-medical-mask-protective-antiviral-260nw-1684423789.jpg), 39 | url(https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__480.jpg); */ 40 | /* background-repeat: no-repeat, repeat-y; */ 41 | background-attachment: scroll; 42 | /* background-clip: content-box; */ 43 | background-origin: border-box, content-box; 44 | } 45 | -------------------------------------------------------------------------------- /css-box-model/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Box Model 8 | 9 | 10 | 11 |
12 |

Box One

13 | Google 14 |
15 |
16 |

Box Two

17 |
18 | 19 | -------------------------------------------------------------------------------- /css-box-model/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | 1. Inline vs Block 3 | 2. Box Model 4 | 3. Border 5 | 4. Padding 6 | 5. Margin 7 | 6. Box Sizing 8 | */ 9 | 10 | * { 11 | margin: 0; 12 | padding: 0; 13 | box-sizing: border-box; 14 | } 15 | .box-one { 16 | background: orange; 17 | color: #fff; 18 | width: 250px; 19 | height: 250px; 20 | padding: 20px; 21 | border: 10px dashed black; 22 | margin-bottom: 50px; 23 | } 24 | .box-two { 25 | background: rgb(100, 73, 21); 26 | color: #fff; 27 | width: 250px; 28 | height: 250px; 29 | margin-top: 60px; 30 | } 31 | 32 | a { 33 | display: inline-block; 34 | margin-top: 30px; 35 | padding: 20px; 36 | background: brown; 37 | } 38 | -------------------------------------------------------------------------------- /css-combinator/README.md: -------------------------------------------------------------------------------- 1 | # CSS3 For Beginners 2 | 3 | Source code of CSS3 For Beginners course by JS Bangladesh. 4 | -------------------------------------------------------------------------------- /css-combinator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Combinator 8 | 9 | 10 | 11 |
12 |
13 |

This is a sample paragraph

14 |

Only etar color red howar kotha.

15 |

Another Heading with class bhai.

16 |

More Heading with class bhai.

17 |

Aro ekta h1

18 |
19 |

20 |

Heading with class bhai-er-chele.

21 |
22 |
23 |
24 | 25 | -------------------------------------------------------------------------------- /css-combinator/style.css: -------------------------------------------------------------------------------- 1 | /* p ~ h1 { 2 | color: red; 3 | } */ 4 | 5 | /* .myP + h1 { 6 | color: red; 7 | } */ 8 | 9 | /* .baba > h1 { 10 | color: red; 11 | } */ 12 | 13 | .baba h1 { 14 | color: red; 15 | } -------------------------------------------------------------------------------- /css-float/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Float 8 | 9 | 10 | 11 | Logo 12 |

13 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vitae 14 | expedita consequatur aspernatur nulla in itaque laboriosam beatae, 15 | aperiam quos nemo ipsam totam officiis iste veritatis dolorem quas, 16 | quibusdam molestiae, quisquam corrupti minus nobis saepe 17 | repudiandae. Lorem, ipsum dolor sit amet consectetur adipisicing 18 | elit. Vitae expedita consequatur aspernatur nulla in itaque 19 | laboriosam beatae, aperiam quos nemo ipsam totam officiis iste 20 | veritatis dolorem quas, quibusdam molestiae, quisquam corrupti minus 21 | nobis saepe repudiandae.Lorem, ipsum dolor sit amet consectetur 22 | adipisicing elit. Vitae expedita consequatur aspernatur nulla in 23 | itaque laboriosam beatae, aperiam quos nemo ipsam totam officiis 24 | iste veritatis dolorem quas, quibusdam molestiae, quisquam corrupti 25 | minus nobis saepe repudiandae.Lorem, ipsum dolor sit amet 26 | consectetur adipisicing elit. Vitae expedita consequatur aspernatur 27 | nulla in itaque laboriosam beatae, aperiam quos nemo ipsam totam 28 | officiis iste veritatis dolorem quas, quibusdam molestiae, quisquam 29 | corrupti minus nobis saepe repudiandae.Lorem, ipsum dolor sit amet 30 | consectetur adipisicing elit. Vitae expedita consequatur aspernatur 31 | nulla in itaque laboriosam beatae, aperiam quos nemo ipsam totam 32 | officiis iste veritatis dolorem quas, quibusdam molestiae, quisquam 33 | corrupti minus nobis saepe repudiandae.Lorem, ipsum dolor sit amet 34 | consectetur adipisicing elit. Vitae expedita consequatur aspernatur 35 | nulla in itaque laboriosam beatae, aperiam quos nemo ipsam totam 36 | officiis iste veritatis dolorem quas, quibusdam molestiae, quisquam 37 | corrupti minus nobis saepe repudiandae.Lorem, ipsum dolor sit amet 38 | consectetur adipisicing elit. Vitae expedita consequatur aspernatur 39 | nulla in itaque laboriosam beatae, aperiam quos nemo ipsam totam 40 | officiis iste veritatis dolorem quas, quibusdam molestiae, quisquam 41 | corrupti minus nobis saepe repudiandae. 42 |

43 |

Lorem ipsum dolor sit amet

44 |

45 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ullam, 46 | aperiam. 47 |

48 | 49 | 50 | -------------------------------------------------------------------------------- /css-float/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srsetu/css-for-beginners/0a6ebcd2b8f5d725d02ac92e0d3cfab8a68d6498/css-float/logo.png -------------------------------------------------------------------------------- /css-float/style.css: -------------------------------------------------------------------------------- 1 | .clearfix { 2 | clear: both; 3 | } 4 | img { 5 | float: right; 6 | opacity: 1; 7 | width: 15%; 8 | outline: 2px solid green; 9 | } 10 | .first-p { 11 | border: 2px solid red; 12 | height: 150px; 13 | overflow: hidden; 14 | } 15 | .second-p { 16 | background-color: orange; 17 | } 18 | .third-p { 19 | background-color: peru; 20 | } 21 | -------------------------------------------------------------------------------- /css-fonts/fonts/GistLight.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srsetu/css-for-beginners/0a6ebcd2b8f5d725d02ac92e0d3cfab8a68d6498/css-fonts/fonts/GistLight.otf -------------------------------------------------------------------------------- /css-fonts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Mastering CSS Fonts 8 | 9 | 10 | 11 | 12 | 13 |

Lorem ipsum dolor sit amet consectetur adipisicing elit.

14 | 15 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur voluptatem iusto perspiciatis quidem doloribus quibusdam omnis nisi ipsum! Iste alias inventore adipisci delectus! Repellendus, quod illo facere labore alias magni.

16 | 17 | -------------------------------------------------------------------------------- /css-fonts/readme.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srsetu/css-for-beginners/0a6ebcd2b8f5d725d02ac92e0d3cfab8a68d6498/css-fonts/readme.md -------------------------------------------------------------------------------- /css-fonts/style.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: GistLight; 3 | src: url(./fonts/GistLight.otf); 4 | } 5 | 6 | h1 { 7 | font-family: GistLight; 8 | } 9 | 10 | p { 11 | font-family: "Redressed", cursive; 12 | } 13 | -------------------------------------------------------------------------------- /css-inheritance/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Inheritance 8 | 9 | 10 | 11 |
12 |

Don’t be afraid to give up the good to go for the great.

13 |

14 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo inventore architecto incidunt culpa numquam totam neque sunt eveniet libero repudiandae! 15 |

16 |
17 |
18 | 19 |
20 |
21 | 22 |
23 | 24 | -------------------------------------------------------------------------------- /css-inheritance/inheritance.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srsetu/css-for-beginners/0a6ebcd2b8f5d725d02ac92e0d3cfab8a68d6498/css-inheritance/inheritance.jpg -------------------------------------------------------------------------------- /css-inheritance/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | color: orange; 3 | } 4 | body { 5 | color: red; 6 | } 7 | div { 8 | color: green; 9 | } 10 | button { 11 | color: inherit; 12 | } 13 | -------------------------------------------------------------------------------- /css-links/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Links 8 | 9 | 10 | 11 | JS Bangladesh 14 | Success 15 | Danger 16 | Test 17 |
18 | Button 19 | 20 | 21 | -------------------------------------------------------------------------------- /css-links/style.css: -------------------------------------------------------------------------------- 1 | a.jsbd { 2 | text-decoration: none; 3 | background-color: orange; 4 | display: inline-block; 5 | text-align: center; 6 | padding: 30px 40px; 7 | } 8 | 9 | a.btn-success { 10 | background-color: rgb(112, 204, 112); 11 | color: #fff; 12 | padding: 10px 20px; 13 | border-radius: 15px; 14 | text-decoration: none; 15 | transition: 0.3s all; 16 | text-transform: uppercase; 17 | font-weight: 900; 18 | } 19 | 20 | a.btn-success:hover { 21 | background-color: rgb(49, 104, 49); 22 | } 23 | 24 | .danger { 25 | padding: 10px 15px; 26 | border: 1px solid red; 27 | text-decoration: none; 28 | color: red; 29 | transition: 0.5s all; 30 | } 31 | 32 | .danger:hover { 33 | cursor: wait; 34 | background-color: red; 35 | color: #fff; 36 | } 37 | 38 | /* 39 | a:link 40 | a:active 41 | a:hover 42 | a:visited 43 | */ 44 | 45 | .button { 46 | background-image: linear-gradient(to right, #7f00ff, #e100ff); 47 | padding: 10px 45px; 48 | display: inline-block; 49 | margin-top: 100px; 50 | margin-top: 100px; 51 | color: #fff; 52 | border-radius: 35px; 53 | text-decoration: none; 54 | transition: 0.5s all; 55 | position: relative; 56 | z-index: 1; 57 | } 58 | .button::before { 59 | position: absolute; 60 | content: ''; 61 | top: 0; 62 | right: 0; 63 | left: 0; 64 | bottom: 0; 65 | background-image: linear-gradient(to left, #7f00ff, #e100ff); 66 | z-index: -1; 67 | transition: opacity 0.5s linear; 68 | opacity: 0; 69 | border-radius: 35px; 70 | } 71 | .button:hover::before { 72 | opacity: 1; 73 | } 74 | -------------------------------------------------------------------------------- /css-list/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS List 8 | 9 | 10 | 11 | 17 |
    18 |
  1. Item One
    2. 19 |
  2. Item Two
    3. 20 |
  3. Item Three
    4. 21 |
22 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /css-list/list.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srsetu/css-for-beginners/0a6ebcd2b8f5d725d02ac92e0d3cfab8a68d6498/css-list/list.jpg -------------------------------------------------------------------------------- /css-list/style.css: -------------------------------------------------------------------------------- 1 | ul { 2 | /* list-style-type: hiragana; 3 | list-style-position: outside; 4 | list-style-image: url(./list.jpg); */ 5 | list-style: square inside url(./list.jpg); 6 | } 7 | 8 | ul.nav { 9 | list-style: none; 10 | margin: 0; 11 | padding: 0; 12 | display: flex; 13 | justify-content: center; 14 | } 15 | ul.nav li { 16 | background-color: darkcyan; 17 | position: relative; 18 | } 19 | ul.nav li a { 20 | color: #fff; 21 | text-decoration: none; 22 | text-transform: uppercase; 23 | display: inline-block; 24 | padding: 0.9375rem 1.25rem; 25 | } 26 | 27 | ul.nav li:hover { 28 | background-color: rgb(12, 65, 65); 29 | } 30 | 31 | ul.dropdown { 32 | margin: 0; 33 | padding: 0; 34 | list-style: none; 35 | } 36 | 37 | ul.dropdown { 38 | display: none; 39 | position: absolute; 40 | top: 100%; 41 | } 42 | ul.nav li:hover ul.dropdown { 43 | display: block; 44 | } 45 | -------------------------------------------------------------------------------- /css-positoining/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Positioning 8 | 9 | 10 | 11 |
12 |
13 | Child 1 14 |
15 |
16 | Child 2 17 |
18 |
19 | 20 | -------------------------------------------------------------------------------- /css-positoining/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | We will learn: 3 | 0. Document Flow 4 | 1. Absolute 5 | 2. Fixed 6 | 3. Relative 7 | 4. Sticky 8 | */ 9 | * { 10 | box-sizing: border-box; 11 | } 12 | body { 13 | background: gray; 14 | padding: 50px; 15 | height: 2000px; 16 | } 17 | .parent { 18 | border: 2px solid black; 19 | width: 500px; 20 | height: 500px; 21 | background: ivory; 22 | } 23 | 24 | .child-1 { 25 | background-color: gold; 26 | width: 100px; 27 | height: 100px; 28 | position: sticky; 29 | top: 0; 30 | } 31 | 32 | .child-2 { 33 | background-color: indianred; 34 | width: 100px; 35 | height: 100px; 36 | } 37 | -------------------------------------------------------------------------------- /css-selectors/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Selectors 8 | 9 | 10 | 11 |
12 |

Don't give up on your dream.

13 |

Don't give up on your dream.

14 |

Don't give up on your dream.

15 |

Don't give up on your dream.

16 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab vitae cupiditate quidem dolorem esse aliquam. Sed at incidunt nesciunt amet.

17 | 18 |
19 | 20 | -------------------------------------------------------------------------------- /css-selectors/style.css: -------------------------------------------------------------------------------- 1 | /* ======== CSS SELECTOR ========*/ 2 | 3 | .main { 4 | color: red; 5 | } 6 | h1 { 7 | color:purple; 8 | } -------------------------------------------------------------------------------- /css-specificity/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Specificity 8 | 9 | 10 | 11 |

We are learning CSS Specificity

12 |
13 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, officia? Tempore architecto ratione dignissimos voluptatibus ipsum at eligendi, ducimus hic?

14 |
15 | 16 |
17 |
18 |
19 |
20 |
21 |

Hello World

22 |
23 |
24 |
25 |
26 |
27 | 28 | -------------------------------------------------------------------------------- /css-specificity/style.css: -------------------------------------------------------------------------------- 1 | /* 0, 0, 1, 0 */ 2 | .para { 3 | color: black; 4 | } 5 | 6 | /*0, 0, 1, 2*/ 7 | div > p.para { 8 | color: red; 9 | } 10 | 11 | /*0, 1, 0, 0*/ 12 | #heading { 13 | color: purple; 14 | } 15 | 16 | /*0, 0, 0, 1*/ 17 | h1 { 18 | color: cyan; 19 | } 20 | /*0, 0, 1, 0*/ 21 | .hello { 22 | color: yellow; 23 | } 24 | /*0, 0, 0, 6*/ 25 | div > div > div > div > div > p { 26 | color: red; 27 | } 28 | -------------------------------------------------------------------------------- /css-table/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Table 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 |
Provider NameEmail
Saidur Rahman Setusrsetu@gmail.com
Saidur Rahman Setusrsetu@gmail.com
Saidur Rahman Setusrsetu@gmail.com
Saidur Rahman Setusrsetu@gmail.com
Year 2021
46 |
47 | 48 | 49 | -------------------------------------------------------------------------------- /css-table/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: #5bb9b8; 9 | } 10 | 11 | section { 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | height: 100vh; 16 | } 17 | 18 | table { 19 | background-color: #2c3845; 20 | color: #fff; 21 | border-collapse: separate; 22 | border-spacing: 3px; 23 | } 24 | 25 | thead th, 26 | tbody td { 27 | border: 1px solid #28333f; 28 | padding: 1rem; 29 | padding-right: 25px; 30 | } 31 | 32 | thead th { 33 | background-color: #202932; 34 | text-align: left; 35 | } 36 | 37 | tbody tr:nth-of-type(even) { 38 | background-color: #242e39; 39 | } 40 | 41 | tbody td:last-child { 42 | text-align: center; 43 | color: #b8c4d2; 44 | } 45 | 46 | button { 47 | background-color: #4b908f; 48 | color: #fff; 49 | border-radius: 5px; 50 | padding: 8px; 51 | border: none; 52 | } 53 | 54 | td:not(td:last-child) { 55 | width: 22.5rem; 56 | } 57 | -------------------------------------------------------------------------------- /css-text/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Styling Text 8 | 9 | 10 | 11 | 12 | 13 |

It is never too late to be what you might have been.

14 | 15 |

today I choose life. every morning when I wake up I can choose joy, happiness, negativity, pain... to feel the freedom that comes from being able to continue to make mistakes and choices - today I choose to feel life, not to deny my humanity but embrace it.

16 | 17 |

When you get into a tight place and everything goes against you, till it seems as though you could not hang on a minute longer, never give up then, for that is just the place and time that the tide will turn.

18 | 19 | -------------------------------------------------------------------------------- /css-text/style.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | font-family: "Merriweather", serif; 3 | font-weight: 900; 4 | font-style: normal; 5 | text-decoration: none; 6 | text-transform: capitalize; 7 | letter-spacing: 1px; 8 | word-spacing: 5px; 9 | /* direction: rtl; 10 | unicode-bidi: bidi-override; */ 11 | } 12 | 13 | p { 14 | font-size: 30px; 15 | font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", 16 | "Lucida Sans Unicode", Geneva, Verdana, sans-serif; 17 | color: #c0392b; 18 | text-align: left; 19 | text-indent: 30px; 20 | line-height: 150%; 21 | text-shadow: -10px -10px 10px #28c55d; 22 | } 23 | -------------------------------------------------------------------------------- /css-unit/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Unit 8 | 9 | 10 | 11 |
12 |

Top Section

13 |
14 |
15 |
16 |

17 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. 18 | Saepe sapiente enim ullam laboriosam doloremque nesciunt est 19 | delectus, quia ducimus omnis neque molestiae cum explicabo 20 | eum aliquam reiciendis maxime ut et? Like Me 21 |

22 | 46 |
47 |
48 |
49 |
Inner
50 |
51 | 52 | 53 | -------------------------------------------------------------------------------- /css-unit/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | Absolute Unit: px, mm, pt, pc, in, Q 3 | Relative Unit: em, rem, vh, vw, % 4 | */ 5 | /* main { 6 | font-size: 20px; 7 | } 8 | .main { 9 | font-size: 24px; 10 | } */ 11 | .main { 12 | font-size: 45px; 13 | } 14 | .main__paragraph { 15 | font-size: 50%; 16 | } 17 | 18 | body, 19 | p { 20 | margin: 0; 21 | padding: 0; 22 | } 23 | .main__list { 24 | font-size: 16px; 25 | } 26 | 27 | .main__list li { 28 | font-size: 2em; 29 | } 30 | section { 31 | background: orchid; 32 | height: 50vh; 33 | width: 30vw; 34 | } 35 | .percentage { 36 | width: 300px; 37 | height: 350px; 38 | background: palegreen; 39 | } 40 | .parcentage__inner { 41 | background: purple; 42 | width: 50%; 43 | height: 150px; 44 | } 45 | span { 46 | background-color: purple; 47 | color: #fff; 48 | font-size: 1em; 49 | } 50 | --------------------------------------------------------------------------------