├── 13 to 16 ├── index.html ├── script.js └── style.css ├── 17 to 21 ├── index.html ├── script.js └── style.css ├── 22 to 26 ├── index.html ├── script.js └── style.css ├── 27 to 29 ├── index.html ├── script.js └── style.css ├── 30 to 33 ├── index.html ├── script.js └── style.css ├── 34 to 37 ├── index.html ├── script.js └── style.css ├── 5 to 8 ├── index.html ├── script.js └── style.css ├── 9 to 12 ├── index.html ├── script.js └── style.css └── c to c ├── index.html ├── script.js └── style.css /13 to 16/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 13 to 16 7 | 8 | 9 | 10 | 11 | 20 | 21 |
22 |
This Is Child Title
23 | Child Title 24 |

Paragraph Content

25 |
26 |
Section Title
27 |
28 |
Title One
29 |
Title Two With More Words
30 |
title three with many many many words
31 |
title three with many many many words title three with many many many words title three with many many many words title three with many many many words
32 | 33 | 34 | -------------------------------------------------------------------------------- /13 to 16/script.js: -------------------------------------------------------------------------------- 1 | 2 | // link of github 3 | // https://github.com/melsayedahmed 4 | // Dont forget follow 5 | 6 | // link of Youtube Channel 7 | // https://www.youtube.com/channel/UCo92JwtW5CbyN3XO6O0qocA 8 | // Dont forget Subscribe 9 | 10 | -------------------------------------------------------------------------------- /13 to 16/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | link of github 3 | https://github.com/melsayedahmed 4 | Dont forget follow 5 | 6 | link of Youtube Channel 7 | https://www.youtube.com/channel/UCo92JwtW5CbyN3XO6O0qocA 8 | Dont forget Subscribe 9 | */ 10 | .parent .child .title{ 11 | color: red; 12 | } 13 | .parent .title{ 14 | color: blue; 15 | } 16 | .parent p, 17 | .title{ 18 | color: green; 19 | } 20 | 21 | .one, 22 | .two, 23 | .three, 24 | .four{ 25 | text-transform: capitalize; 26 | background-color: #a52a2a; 27 | color: white; 28 | padding: 20px; 29 | margin: 20px; 30 | width: fit-content; 31 | max-width: 400px; 32 | max-height: 20px; 33 | overflow: hidden; 34 | 35 | } -------------------------------------------------------------------------------- /17 to 21/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 17 to 21 7 | 8 | 9 | 10 | 11 | 20 |
elzero web school
21 |
22 |

elzero Web school

23 |

elzero Web school

24 |

elzero Web school

25 |
26 | 32 | 35 |
36 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. 37 | Ea itaque fugit vitae incidunt quis dolores? Id alias 38 | eveniet sequi perspiciatis iusto impedit, 39 | accusamus maxime reprehenderit blanditiis adipisci sapiente hic velit. 40 |
41 |
42 | elzero 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /17 to 21/script.js: -------------------------------------------------------------------------------- 1 | 2 | // link of github 3 | // https://github.com/melsayedahmed 4 | // Dont forget follow 5 | 6 | // link of Youtube Channel 7 | // https://www.youtube.com/channel/UCo92JwtW5CbyN3XO6O0qocA 8 | // Dont forget Subscribe 9 | 10 | -------------------------------------------------------------------------------- /17 to 21/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | link of github 3 | https://github.com/melsayedahmed 4 | Dont forget follow 5 | 6 | link of Youtube Channel 7 | https://www.youtube.com/channel/UCo92JwtW5CbyN3XO6O0qocA 8 | Dont forget Subscribe 9 | */ 10 | .shadow{ 11 | text-transform: capitalize; 12 | text-align: center; 13 | font-size: 50px; 14 | font-family: Arial, Helvetica, sans-serif; 15 | text-shadow: 1px 1px 0 #f24336, 2px 2px 0 #2196f3, 3px 3px 0 #9c27b0; 16 | } 17 | p{ 18 | text-align: center; 19 | font-size: 30px; 20 | } 21 | .one{ 22 | text-transform: uppercase; 23 | } 24 | .two{ 25 | text-transform: capitalize; 26 | } 27 | .three{ 28 | text-transform: lowercase; 29 | } 30 | .assign-3{ 31 | width: 300px; 32 | background-color: #ddd; 33 | margin: 20px auto; 34 | padding: 20px; 35 | white-space: nowrap; 36 | overflow: hidden; 37 | text-overflow: ellipsis; 38 | } 39 | a{ 40 | text-transform: capitalize; 41 | text-align: center; 42 | margin: 20px auto; 43 | display: block; 44 | text-decoration: none; 45 | font-size: 50px; 46 | background-color: #009688; 47 | width: fit-content; 48 | padding: 10px 20px; 49 | font-family: arial; 50 | color: white; 51 | font-weight: bold; 52 | border-bottom: 10px solid #00514a 53 | } -------------------------------------------------------------------------------- /22 to 26/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 22 to 26 7 | 8 | 9 | 10 | 11 | 20 | 21 |
22 |

This Is Paragraph

23 |
24 |
25 |

Elzero Web School

26 |

Elzero Web School

27 |

Elzero Web School

28 |
29 |

Elzero Web School

30 |

Elzero Web School

31 |

Elzero Web School

32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /22 to 26/script.js: -------------------------------------------------------------------------------- 1 | 2 | // link of github 3 | // https://github.com/melsayedahmed 4 | // Dont forget follow 5 | 6 | // link of Youtube Channel 7 | // https://www.youtube.com/channel/UCo92JwtW5CbyN3XO6O0qocA 8 | // Dont forget Subscribe 9 | 10 | -------------------------------------------------------------------------------- /22 to 26/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | link of github 3 | https://github.com/melsayedahmed 4 | Dont forget follow 5 | 6 | link of Youtube Channel 7 | https://www.youtube.com/channel/UCo92JwtW5CbyN3XO6O0qocA 8 | Dont forget Subscribe 9 | */ 10 | 11 | html{ 12 | font-size: 20px; 13 | } 14 | div{ 15 | margin: 20px auto; 16 | padding: 20px; 17 | border: 5px solid #ff5722; 18 | } 19 | div p{ 20 | padding: inherit; 21 | background-color: #ddd; 22 | text-align: center; 23 | font-size: 40px; 24 | font-family: arial; 25 | border: inherit; 26 | } 27 | p{ 28 | text-align: center; 29 | } 30 | .one{ 31 | font-family: 'Open Sans', sans-serif; 32 | } 33 | .two{ 34 | font-family: 'Cairo', sans-serif; 35 | } 36 | .three{ 37 | font-family: 'Jomhuria', cursive; 38 | } 39 | .four{ 40 | font-size: 2.5rem; 41 | } 42 | .five{ 43 | font-size: 2rem; 44 | } 45 | .six{ 46 | font-size: 1.5rem; 47 | } -------------------------------------------------------------------------------- /27 to 29/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 27 to 29 7 | 8 | 9 | 10 | 11 | 20 | 21 |
22 |
Full Width
23 |
1/3
24 |
1/3
25 |
1/3
26 |
1/2
27 |
1/2
28 |
1/4
29 |
1/4
30 |
1/4
31 |
1/4
32 |

33 |
34 |
35 |
36 |
Normal
37 |
One
38 |
Two
39 |
40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /27 to 29/script.js: -------------------------------------------------------------------------------- 1 | 2 | // link of github 3 | // https://github.com/melsayedahmed 4 | // Dont forget follow 5 | 6 | // link of Youtube Channel 7 | // https://www.youtube.com/channel/UCo92JwtW5CbyN3XO6O0qocA 8 | // Dont forget Subscribe 9 | 10 | -------------------------------------------------------------------------------- /27 to 29/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | link of github 3 | https://github.com/melsayedahmed 4 | Dont forget follow 5 | 6 | link of Youtube Channel 7 | https://www.youtube.com/channel/UCo92JwtW5CbyN3XO6O0qocA 8 | Dont forget Subscribe 9 | */ 10 | 11 | .parent{ 12 | width: 800px; 13 | background-color: #eee; 14 | margin: 20px auto; 15 | } 16 | .parent div{ 17 | background-color: #ddd; 18 | float: left; 19 | font-weight: bold; 20 | padding: 20px 0; 21 | margin-left: 15px; 22 | margin-top: 15px; 23 | text-align: center; 24 | } 25 | .clear{ 26 | clear: both; 27 | } 28 | .row-one{ 29 | width: calc(100% - 30px); 30 | } 31 | .row-two{ 32 | width: calc((100% - 60px) / 3); 33 | } 34 | .row-three{ 35 | width: calc((100% - 45px) / 2); 36 | } 37 | .row-four{ 38 | width: calc((100% - 75px) / 4); 39 | margin-bottom: 15px; 40 | } 41 | 42 | .child div { 43 | margin: 20px auto; 44 | width: 300px; 45 | font-weight: bold; 46 | font-size: 1rem; 47 | padding: 20px; 48 | background-color: #ddd; /* Get The Background From Image */ 49 | color: black; 50 | } 51 | .child .one{ 52 | background-color: rgb(221 221 221 / .5); 53 | } 54 | .two{ 55 | opacity: .5; 56 | } -------------------------------------------------------------------------------- /30 to 33/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 30 to 33 7 | 8 | 9 | 10 | 11 | 20 | 21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod, sed. Ea ipsum 29 | similique quasi rem, fugiat voluptatibus reiciendis nam debitis earum quo veniam 30 | laudantium mollitia atque! Laborum ea nam doloribus. 31 | 1 32 | 2 33 | 3 34 | 4 35 |
36 |
37 |
38 | 63 |
64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 95 | 96 | 97 | 98 | 99 | 100 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 114 | 115 | 116 | 117 | 118 | 119 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 133 | 134 | 135 |
Developers Rating
AvatarGroupNamePointsControl
NinjaMohab Mohamed120 82 | 83 | 84 |
Shadeskamel Tamer180 92 | 93 | 94 |
Anorin Mohamed160 101 | 102 | 103 |
ValhalaSaleh Ibrahim190 111 | 112 | 113 |
Noor Ahmed110 120 | 121 | 122 |
UnionAhmed Adel90 130 | 131 | 132 |
136 | 137 | 138 | 139 | -------------------------------------------------------------------------------- /30 to 33/script.js: -------------------------------------------------------------------------------- 1 | 2 | // link of github 3 | // https://github.com/melsayedahmed 4 | // Dont forget follow 5 | 6 | // link of Youtube Channel 7 | // https://www.youtube.com/channel/UCo92JwtW5CbyN3XO6O0qocA 8 | // Dont forget Subscribe 9 | 10 | -------------------------------------------------------------------------------- /30 to 33/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | link of github 3 | https://github.com/melsayedahmed 4 | Dont forget follow 5 | 6 | link of Youtube Channel 7 | https://www.youtube.com/channel/UCo92JwtW5CbyN3XO6O0qocA 8 | Dont forget Subscribe 9 | */ 10 | .green, 11 | .red, 12 | .blue, 13 | .black{ 14 | width: 100px; 15 | height: 100px; 16 | position: absolute; 17 | } 18 | .green{ 19 | background-color: #009688; 20 | z-index: 2; 21 | left: 30px; 22 | top: 30px; 23 | } 24 | .red{ 25 | background-color: #f44336; 26 | z-index: 3; 27 | top: 40px; 28 | left: 40px; 29 | } 30 | .blue{ 31 | background-color: #03a9f4; 32 | top: 20px; 33 | left: 20px; 34 | z-index: 1; 35 | } 36 | .black{ 37 | background-color: black; 38 | z-index: -1; 39 | left: 20px; 40 | top: 30px; 41 | } 42 | hr{ 43 | margin-top: 160px; 44 | } 45 | .assign-2 div{ 46 | width: 400px; 47 | margin: 50px auto; 48 | background-color: #eee; 49 | padding: 20px; 50 | border: 3px solid; 51 | border-color: #f44336 #2196f3; 52 | position: relative; 53 | } 54 | .top-left, 55 | .bottom-left, 56 | .top-right, 57 | .bottom-right{ 58 | position: absolute; 59 | background-color: #2196f3; 60 | padding: 5px 10px; 61 | color: white; 62 | font-weight: bold; 63 | } 64 | .top-left{ 65 | top: -15px; 66 | left: -15px; 67 | border-right: 3px solid #f44336; 68 | } 69 | .bottom-left{ 70 | bottom: -15px; 71 | left: -15px; 72 | border-right: 3px solid #f44336; 73 | } 74 | .top-right{ 75 | top: -15px; 76 | right: -15px; 77 | border-left: 3px solid #f44336; 78 | } 79 | .bottom-right{ 80 | bottom: -15px; 81 | right: -15px; 82 | border-left: 3px solid #f44336; 83 | } 84 | .assign-3{ 85 | width: 400px; 86 | margin: 50px auto; 87 | } 88 | .html, 89 | .css, 90 | .js{ 91 | background-color: #ddd; 92 | margin-bottom: 20px; 93 | padding: 10px; 94 | list-style: none; 95 | } 96 | .html ol, 97 | .css ol{ 98 | margin: 10px; 99 | padding-left: 10px; 100 | } 101 | .html ol li, 102 | .css ol li{ 103 | margin: 10px; 104 | background-color: white; 105 | padding: 5px; 106 | } 107 | .css ol li{ 108 | list-style-type: upper-roman; 109 | } 110 | .js ul{ 111 | padding-left: 0; 112 | } 113 | .js ul li{ 114 | margin: 10px 0; 115 | background-color: white; 116 | padding: 5px; 117 | list-style-position: inside; 118 | } 119 | table{ 120 | width: 700px; 121 | margin: 50px auto; 122 | font-family: Arial, Helvetica, sans-serif; 123 | border-bottom: 5px solid #009688; 124 | } 125 | caption{ 126 | font-weight: bold; 127 | margin-bottom: 20px; 128 | } 129 | table thead td{ 130 | background-color: #404040; 131 | color: white; 132 | font-weight: bold; 133 | text-align: center; 134 | padding: 20px; 135 | } 136 | img{ 137 | width: 70px; 138 | } 139 | table tbody td{ 140 | background-color: #eee; 141 | padding: 20px; 142 | text-align: center; 143 | } 144 | .view{ 145 | background-color: #03a9f4; 146 | border: none; 147 | padding: 5px 10px; 148 | color: white; 149 | font-weight: bold; 150 | } 151 | .del{ 152 | background-color: #e91e63; 153 | border: none; 154 | padding: 5px 10px; 155 | color: white; 156 | font-weight: bold; 157 | } -------------------------------------------------------------------------------- /34 to 37/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 34 to 37 7 | 8 | 9 | 10 | 11 | 20 |
21 |
One
22 |
23 |
Three
24 |
25 |
26 |
27 |
1 Hello, Welcome To Elzero Web School
28 |
29 |
30 |
31 |

This Is Very Very Long Comment Number One

32 |

This Is Very Very Long Comment Number Two

33 |

This Is Very Very Long Comment Number Three

34 |
35 |
36 |
37 |

This Is Very Very Long Product Title

38 |

This Is Very Very Long Product Title

39 |

This Is Very Very Long Product Title

40 |

This Is Very Very Long Product Title

41 |

This Is Very Very Long Product Title

42 |

This Is Very Very Long Product Title

43 |
44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /34 to 37/script.js: -------------------------------------------------------------------------------- 1 | 2 | // link of github 3 | // https://github.com/melsayedahmed 4 | // Dont forget follow 5 | 6 | // link of Youtube Channel 7 | // https://www.youtube.com/channel/UCo92JwtW5CbyN3XO6O0qocA 8 | // Dont forget Subscribe 9 | 10 | -------------------------------------------------------------------------------- /34 to 37/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | link of github 3 | https://github.com/melsayedahmed 4 | Dont forget follow 5 | 6 | link of Youtube Channel 7 | https://www.youtube.com/channel/UCo92JwtW5CbyN3XO6O0qocA 8 | Dont forget Subscribe 9 | */ 10 | 11 | .assign-1 div{ 12 | width: 300px; 13 | height: 60px; 14 | text-align: center; 15 | background-color: #ddd; 16 | margin: 20px auto; 17 | line-height: 4; 18 | } 19 | div:empty{ 20 | background-color: red; 21 | } 22 | .assign-2 div{ 23 | margin: 20px auto; 24 | padding: 20px; 25 | background-color: #ddd; 26 | width: fit-content; 27 | position: relative; 28 | } 29 | .assign-2 div::first-letter{ 30 | content: ""; 31 | background-color: red; 32 | color: white; 33 | padding: 10px; 34 | position: absolute; 35 | margin-left: -35px; 36 | margin-top: -10px; 37 | margin-right: 10px; 38 | } 39 | 40 | .assign-3 p{ 41 | width: 400px; 42 | padding: 20px; 43 | margin: 20px auto; 44 | background-color: #ddd; 45 | position: relative; 46 | border-left: 5px solid #e91e63; 47 | } 48 | .assign-3 p::before{ 49 | content: attr(data-person); 50 | position: absolute; 51 | margin-left: -150px; 52 | background-color: #ddd; 53 | padding: 20px; 54 | width: 50px; 55 | text-align: center; 56 | top: 0; 57 | } 58 | .assign-3 p::after{ 59 | content: ""; 60 | position: absolute; 61 | border: 15px solid; 62 | border-color: transparent #e91e63 transparent transparent; 63 | left: -35px; 64 | top: 50%; 65 | margin-top: -15px; 66 | } 67 | .assign-4 p{ 68 | width: 400px; 69 | background-color: #ddd; 70 | margin: 20px auto; 71 | padding: 20px; 72 | counter-increment: number; 73 | position: relative; 74 | } 75 | .assign-4 p::before{ 76 | content: counter(number); 77 | background-color: #f44336; 78 | padding: 20px; 79 | color: white; 80 | font-weight: bold; 81 | position: absolute; 82 | top: 0; 83 | left: -48px; 84 | } 85 | .assign-4 p::after{ 86 | content: ""; 87 | height: 100%; 88 | width: 5px; 89 | position: absolute; 90 | background-color: #f44336; 91 | top: 0; 92 | right: 0; 93 | } -------------------------------------------------------------------------------- /5 to 8/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 5 to 8 7 | 8 | 9 | 10 | 11 | 20 |
Normal Div
21 |
Normal Div
22 |
Normal Div
23 |
24 |
Normal Div
25 |
Normal Div
26 |
Normal Div
27 |
Normal Div
28 |
29 |
Normal Div
30 |
Normal Div
31 |
Normal Div
32 |
Normal Div
33 |
34 |
Normal Div
35 |
Normal Div
36 |
Normal Div
37 |
Normal Div
38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /5 to 8/script.js: -------------------------------------------------------------------------------- 1 | 2 | // link of github 3 | // https://github.com/melsayedahmed 4 | // Dont forget follow 5 | 6 | // link of Youtube Channel 7 | // https://www.youtube.com/channel/UCo92JwtW5CbyN3XO6O0qocA 8 | // Dont forget Subscribe 9 | 10 | -------------------------------------------------------------------------------- /5 to 8/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | link of github 3 | https://github.com/melsayedahmed 4 | Dont forget follow 5 | 6 | link of Youtube Channel 7 | https://www.youtube.com/channel/UCo92JwtW5CbyN3XO6O0qocA 8 | Dont forget Subscribe 9 | */ 10 | 11 | div{ 12 | width: 500px; 13 | margin: 20px auto; 14 | padding: 20px; 15 | background-color: blueviolet; 16 | background-color: rgb(138, 43, 226); 17 | background-color: hsl(271, 76%, 53%); 18 | background-color: #8a2be2; 19 | color: white; 20 | } 21 | .assign-1-shape-2{ 22 | background-color: rgb(138, 43, 226, 50%); 23 | } 24 | .assign-1-shape-3{ 25 | background-color: rgb(138, 43, 226, .1); 26 | } 27 | 28 | .assign-2-shape-1, 29 | .assign-2-shape-2, 30 | .assign-2-shape-3, 31 | .assign-2-shape-4{ 32 | height: 400px; 33 | width: 400px; 34 | background-color: #eee; 35 | } 36 | .assign-2-shape-1{ 37 | background-image: url(https://elzero.org/wp-content/uploads/2021/02/css-assignment-5-8.png); 38 | background-repeat: no-repeat; 39 | } 40 | .assign-2-shape-2{ 41 | background-image: url(https://elzero.org/wp-content/uploads/2021/02/css-assignment-5-8.png); 42 | background-repeat: repeat-y; 43 | } 44 | .assign-2-shape-3{ 45 | background-image: url(https://elzero.org/wp-content/uploads/2021/02/css-assignment-5-8.png); 46 | background-repeat: repeat-x; 47 | } 48 | .assign-2-shape-4{ 49 | background-image: url(https://elzero.org/wp-content/uploads/2021/02/css-assignment-5-8.png); 50 | background-repeat: repeat; 51 | } 52 | 53 | .assign-3-shape-1, 54 | .assign-3-shape-2, 55 | .assign-3-shape-3, 56 | .assign-3-shape-4{ 57 | height: 400px; 58 | width: 400px; 59 | background-color: #eee; 60 | } 61 | .assign-3-shape-1{ 62 | background-image: url(https://elzero.org/wp-content/uploads/2021/02/css-assignment-5-8.png); 63 | background-repeat: no-repeat; 64 | } 65 | .assign-3-shape-2{ 66 | background-image: url(https://elzero.org/wp-content/uploads/2021/02/css-assignment-5-8.png); 67 | background-repeat: repeat-y; 68 | background-position: right; 69 | } 70 | .assign-3-shape-3{ 71 | background-image: url(https://elzero.org/wp-content/uploads/2021/02/css-assignment-5-8.png); 72 | background-repeat: repeat-x; 73 | background-position: bottom; 74 | } 75 | .assign-3-shape-4{ 76 | background-image: url(https://elzero.org/wp-content/uploads/2021/02/css-assignment-5-8.png); 77 | background-repeat: repeat; 78 | } 79 | 80 | .assign-4-shape-1, 81 | .assign-4-shape-2, 82 | .assign-4-shape-3, 83 | .assign-4-shape-4{ 84 | height: 400px; 85 | width: 400px; 86 | background-color: #eee; 87 | } 88 | .assign-4-shape-1{ 89 | background-image: url(https://elzero.org/wp-content/uploads/2021/02/css-assignment-5-8.png); 90 | background-repeat: no-repeat; 91 | background-size: 80%; 92 | } 93 | .assign-4-shape-2{ 94 | background-image: url(https://elzero.org/wp-content/uploads/2021/02/css-assignment-5-8.png); 95 | background-repeat: repeat-y; 96 | background-position: right; 97 | background-size: 80%; 98 | } 99 | .assign-4-shape-3{ 100 | background-image: url(https://elzero.org/wp-content/uploads/2021/02/css-assignment-5-8.png); 101 | background-repeat: repeat-x; 102 | background-position: bottom; 103 | background-size: 80%; 104 | } 105 | .assign-4-shape-4{ 106 | background-image: url(https://elzero.org/wp-content/uploads/2021/02/css-assignment-5-8.png); 107 | background-repeat: no-repeat; 108 | background-position: right bottom; 109 | } -------------------------------------------------------------------------------- /9 to 12/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 to 12 7 | 8 | 9 | 10 | 11 | 20 |
21 |
Shape 1
22 |
Shape 2
23 |
Shape 3
24 |
25 |
26 |
27 |
This Is Important Note
28 |
This Is Important Note
29 |
This Is Important Note
30 |
31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /9 to 12/script.js: -------------------------------------------------------------------------------- 1 | 2 | // link of github 3 | // https://github.com/melsayedahmed 4 | // Dont forget follow 5 | 6 | // link of Youtube Channel 7 | // https://www.youtube.com/channel/UCo92JwtW5CbyN3XO6O0qocA 8 | // Dont forget Subscribe 9 | 10 | -------------------------------------------------------------------------------- /9 to 12/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | link of github 3 | https://github.com/melsayedahmed 4 | Dont forget follow 5 | 6 | link of Youtube Channel 7 | https://www.youtube.com/channel/UCo92JwtW5CbyN3XO6O0qocA 8 | Dont forget Subscribe 9 | */ 10 | .parent-1 div{ 11 | background-color: #eee; 12 | display: inline-block; 13 | padding: 50px 80px; 14 | margin: 20px; 15 | } 16 | .one{ 17 | border: 5px solid red; 18 | outline: 5px solid black; 19 | } 20 | .two{ 21 | border: 5px solid; 22 | border-color: blue green; 23 | outline: 5px solid black; 24 | } 25 | .three{ 26 | border: 5px dashed; 27 | border-color: red green blue yellow; 28 | outline: 5px solid black; 29 | } 30 | .parent-2 div{ 31 | width: 400px; 32 | margin: 20px auto; 33 | background-color: #ddd; 34 | padding: 20px; 35 | } 36 | .four{ 37 | border-left: 10px solid #e91e63; 38 | outline: 10px solid #ddd; 39 | } 40 | .five{ 41 | visibility: hidden; 42 | } 43 | .six{ 44 | border-left: 10px solid #009688; 45 | outline: 10px solid #ddd; 46 | } -------------------------------------------------------------------------------- /c to c/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 23 to 26 7 | 8 | 9 | 10 | 11 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /c to c/script.js: -------------------------------------------------------------------------------- 1 | 2 | // link of github 3 | // https://github.com/melsayedahmed 4 | // Dont forget follow 5 | 6 | // link of Youtube Channel 7 | // https://www.youtube.com/channel/UCo92JwtW5CbyN3XO6O0qocA 8 | // Dont forget Subscribe 9 | 10 | -------------------------------------------------------------------------------- /c to c/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | link of github 3 | https://github.com/melsayedahmed 4 | Dont forget follow 5 | 6 | link of Youtube Channel 7 | https://www.youtube.com/channel/UCo92JwtW5CbyN3XO6O0qocA 8 | Dont forget Subscribe 9 | */ 10 | --------------------------------------------------------------------------------