├── README.md
├── first.css
├── five.css
├── four.css
├── index4.html
├── index5.html
├── index6.html
├── second.css
├── six.css
├── starting.css
├── style1.css
├── style2.css
├── style3.css
├── style4.css
└── third.css


/README.md:
--------------------------------------------------------------------------------
1 | # CSS
2 | Learn CSS
3 | 


--------------------------------------------------------------------------------
/first.css:
--------------------------------------------------------------------------------
  1 | /* 
  2 |                                                          Element Styling 
  3 | p {
  4 |     color: green;
  5 |   }
  6 |   p {
  7 |     color: red;
  8 |   } 
  9 |   
 10 |                                                  Name Conventions And Rules
 11 | 
 12 | ._test {
 13 |   color: red;
 14 | }
 15 | .user-test {
 16 |   color: red;
 17 | }
 18 | 
 19 |                                               Background - Color, Image, Repeat
 20 | 
 21 | div {
 22 |   background-color: red; 
 23 |   background-color: rgb(0 0 0 / 50%); 
 24 |   background-color: #FF0000; 
 25 |   background-image: url("../imgs/learn-programming.png");
 26 |   background-repeat: no-repeat;
 27 | }
 28 | 
 29 | 
 30 | 
 31 |                                           Background – Attachment, Position, Size
 32 | div {
 33 | 
 34 |   background-color: rgb(0 0 0 / 50%); 
 35 |   background-color: #FF0000; 
 36 |   background-image: url("../imgs/learn-programming.png");
 37 |   background-repeat: no-repeat;
 38 |   background-attachment: fixed;
 39 |   background-position: left top;
 40 |   background-size: auto;
 41 | 
 42 | 
 43 |                                             Padding
 44 | 
 45 | div {
 46 |   background-color: #DDD;
 47 | 
 48 |   /* Top Right Bottom Left */
 49 |   /* 10px 10px 10px 10px */
 50 |   /* padding: 10px; */
 51 | 
 52 |   /* Top Right Bottom Left */
 53 |   /* 10px 20px 10px 20px */
 54 |   /* padding: 10px 20px; */
 55 | 
 56 |   /* Top Right Bottom Left */
 57 |   /* 10px 20px 15px 20px */
 58 |   /* padding: 10px 20px 15px; 
 59 | 
 60 |   padding-bottom: 10px;
 61 |   padding-top: 10px;
 62 | }
 63 | 
 64 |                                                           Margin
 65 |  
 66 | div {
 67 |   background-color: #DDD;
 68 |   padding: 10px;
 69 |   width: 70%;
 70 |   margin: auto;
 71 | }
 72 | 
 73 |                                                         Border
 74 | 
 75 | div {
 76 |   background-color: #DDD;
 77 |   padding: 10px;
 78 |   width: 70%;
 79 |   margin: auto;
 80 |   border-width: 10px;
 81 |   border-color: red;
 82 |   border-style: solid;
 83 |   border: 10px solid red;
 84 | }
 85 | 
 86 |                                                      Outline
 87 | 
 88 | div {
 89 |   background-color: #DDD;
 90 |   width: 300px;
 91 |   padding: 10px;
 92 |   outline: 10px solid red;
 93 |   border: 10px solid blue;
 94 | }
 95 | 
 96 |                                                    Display – Block, Inline-Block, Inline
 97 | 
 98 |  Block
 99 | 
100 |   - Take Full Width If No Width
101 |   - Add Line Break
102 |   - Respect Padding, Margin, Width, Height
103 | 
104 |   Inline
105 | 
106 |   - Do Not Repsepct Width, Height
107 |   - Respect Padding And Margin [ Just Wight + Left ]
108 |   - Do Not Add Line Break
109 |   - Allow Elements Before And After It in The Same Line
110 | 
111 |   Inline-Block
112 | 
113 |   - Allow Elements Before And After It in The Same Line
114 |   - Respect Padding, Margin, Width, Height
115 | 
116 | 
117 | 
118 | span {
119 |     background-color: #EEE;
120 |     display: inline-block;
121 |   }
122 | 
123 |                                                      Element Visibility And Use Cases
124 | 
125 | 
126 | div {
127 |   background-color: red;
128 |   margin: 10px 0;
129 | }
130 | .first {
131 |   visibility: hidden;
132 | }
133 | 
134 | 
135 |                                                        Grouping Multiple Selectors
136 |                                                        
137 | .one {
138 |   border-bottom: 2px solid red;
139 |   color: red;
140 | }
141 | .two {
142 |   border-bottom: 2px solid green;
143 |   color: green;
144 | }
145 | .three {
146 |   border-bottom: 2px solid blue;
147 |   color: blue;
148 | }
149 | .four {
150 |   border-bottom: 2px solid black;
151 |   color: black;
152 | }
153 | .one,
154 | .two,
155 | .three,
156 | .four,
157 | .my-p {
158 |   padding: 15px;
159 |   margin: 12px 0;
160 |   background-color: #ededed;
161 | }
162 | 
163 |                                                             Nesting
164 | 
165 |         div .special {
166 |   color: red;
167 | }                                                            
168 | 
169 |                                                             
170 |                                                     Dimensions - Width And Height
171 | 
172 | div {
173 |   background-color: red;
174 |   padding: 10px;
175 |   display: inline-block;
176 |   max-width: 400px;
177 | }
178 | 
179 | 
180 |                                               Overflow – Overflow-X And Overflow-Y
181 | 
182 | div {
183 |   width: 150px;
184 |   height: 150px;
185 |   background-color: #EEE;
186 |   margin: 20px auto;
187 |   border-radius: 6px;
188 |   overflow: scroll;
189 | }
190 | 
191 |                                                 Text – Color And Shadow
192 |  
193 | div {
194 |   background-color: #f9f9f9;
195 |   color: rebeccapurple;
196 |   text-shadow: 0 0 0 red;
197 | }
198 | 
199 | 
200 |                                                    Text – Alignment
201 | 
202 | div {
203 |   background-color: #f9f9f9;
204 |   text-align: center;
205 |   direction: ltr;
206 | }
207 | img {
208 |   vertical-align: middle;
209 | }
210 | 
211 |                                                     Text – Decoration And Transform
212 | 
213 | div {
214 |   background-color: #f9f9f9;
215 |   text-transform: capitalize;
216 | }
217 | 
218 |                                                        Decoration And Transform
219 | div {
220 |   background-color: #f9f9f9;
221 |   word-spacing: 5px;
222 | }
223 | 
224 |                                                           Text – Spacing
225 | div {
226 |   background-color: #f9f9f9;
227 |   word-spacing: 5px;
228 | }
229 | 
230 |                                                     Overflow And Use Cases
231 | 
232 | div {
233 |   background-color: #ddd;
234 |   padding: 10px;
235 |   width: 200px;
236 |   white-space: nowrap;
237 |   overflow: hidden;
238 |   text-overflow: ellipsis;
239 | }
240 | div:hover {
241 |   overflow: visible;
242 | }
243 | 
244 |                                                        Inheritance
245 | 
246 | div {
247 |   text-align: center;
248 |   padding: 20px;
249 |   background-color: #EEE;
250 |   font-size: 20px;
251 |   border: 2px solid blue;
252 | }
253 | div p {
254 |   border: 2px solid;
255 |   border-color: inherit;
256 |   padding: inherit;
257 | }
258 | 
259 |                                                           Typography – Font Family
260 | 
261 | .with-ser {
262 |   font-family: 'Times New Roman', Times, serif;
263 | }
264 | .san-ser {
265 |   font-family: Arial, Helvetica, sans-serif;
266 | }
267 | .with-ser,
268 | .san-ser {
269 |   background-color: #EEE;
270 |   padding: 10px;
271 | }
272 | 
273 |                                                         Typography – Font Size And CSS Units
274 | 
275 | body {
276 |   font-size: 40px;
277 | }
278 | div {
279 |   font-size: 5vw;
280 | }
281 | div span {
282 |   font-size: 2rem;
283 | }
284 | 
285 |                                                     Typography – Font Style And Variant And Weight
286 | 
287 | div {
288 |   font-variant: small-caps;
289 |   font-weight: bold;
290 | }
291 | p {
292 |   text-transform: uppercase;
293 | }
294 | 
295 | 
296 |                                                                          Mouse Cursor
297 | 
298 | button {
299 |   background: transparent;
300 |   border: none;
301 |   color: red;
302 |   font-weight: bold;
303 |   cursor: pointer;
304 | }
305 | 
306 | 
307 |                                                                      Float And Clear
308 | 
309 | .parent {
310 |   background-color: red;
311 |   padding: 10px;
312 | }
313 | .parent div {
314 |   padding-top: 10px;
315 |   padding-bottom: 10px;
316 |   text-align: center;
317 |   background-color: #eee;
318 |   width: 25%;
319 |   float: left;
320 | }
321 | .clear {
322 |   clear: both;
323 | }
324 | 
325 |                                                         Mastering The CSS Calculation
326 | 
327 | 
328 | body {
329 |   margin: 0;
330 | }
331 | div {
332 |   padding-top: 10px;
333 |   padding-bottom: 10px;
334 |   text-align: center;
335 |   background-color: #eee;
336 |   float: left;
337 |   width: calc((100% - 60px) / 5);
338 |   margin-left: 10px;
339 | }
340 | 
341 |   Content Width Is: 100%
342 |   6 Spaces  10px * 6 => 60px From Content Width
343 |   100% - 60px Available Space
344 |   5 Elements The Width Is: (100% - 60px) / 5
345 | 
346 | 
347 | 
348 | 
349 | */
350 | 
351 | 
352 | 
353 | 
354 | 
355 | 


--------------------------------------------------------------------------------
/five.css:
--------------------------------------------------------------------------------
  1 | /*                                                       3D Transform – Rotate
  2 | 
  3 | div {
  4 |   margin: 200px auto;
  5 |   width: 200px;
  6 |   height: 200px;
  7 |   background-color: rgb(255 0 0 / 39%);
  8 |   color: white;
  9 |   display: flex;
 10 |   justify-content: center;
 11 |   align-items: center;
 12 |   font-weight: bold;
 13 |   font-size: 30px;
 14 |   transform: rotateX(50deg);
 15 |   transform: rotateY(50deg);
 16 |   transform: rotateZ(50deg);
 17 |   transform: rotate3d(0, 1, 1, 65deg);
 18 | }
 19 | 
 20 |                                             3D Transform - Translate, Perspective, Perspective Origin
 21 |  
 22 | .shape {
 23 |   perspective: 300px;
 24 |   perspective-origin: center center;
 25 | }
 26 | .shape div {
 27 |   margin: 200px auto;
 28 |   width: 200px;
 29 |   height: 200px;
 30 |   background-color: rgb(255 0 0 / 39%);
 31 |   color: white;
 32 |   display: flex;
 33 |   justify-content: center;
 34 |   align-items: center;
 35 |   font-weight: bold;
 36 |   font-size: 30px;
 37 |   transform: translate(100px, -100px);
 38 |   transform: translateX(100px);
 39 |   transform: translateZ(100px);
 40 |   transform: translate3d(0, 0, 100px);
 41 | }
 42 | 
 43 |                                            3D Transform – Backface Visibility And Flip Product
 44 | 
 45 | 
 46 | * {
 47 |     box-sizing: border-box;
 48 |     margin: 0;
 49 |   }
 50 |   .container {
 51 |     margin: 40px auto;
 52 |     width: 200px;
 53 |     perspective: 600px;
 54 |   }
 55 |   .box {
 56 |     position: relative;
 57 |     width: 200px;
 58 |     height: 200px;
 59 |      transform-style: preserve-3d;
 60 |     transition: transform 1s;
 61 |     transform-origin: right center;
 62 |   }
 63 |   .box:hover {
 64 |     transform: translateX(-100%) rotateY(-180deg);
 65 |   }
 66 |   .box .face {
 67 |     position: absolute;
 68 |     width: 100%;
 69 |     height: 100%;
 70 |     display: flex;
 71 |     justify-content: center;
 72 |     align-items: center;
 73 |     font-weight: bold;
 74 |     font-size: 30px;
 75 |     color: white;
 76 |     backface-visibility: hidden;
 77 |   }
 78 |   .box .front {
 79 |     background-color: red;
 80 |   }
 81 |   .box .back {
 82 |     background-color: green;
 83 |     transform: rotateY(180deg);
 84 |   }
 85 | 
 86 | 
 87 |                                                                 Animation - KeyFrames, Name, Duration
 88 | 
 89 | /*
 90 |   Animation
 91 |   - KeyFrames
 92 |   - Name
 93 |   - Duration
 94 | 
 95 | 
 96 | * {
 97 |     box-sizing: border-box;
 98 |     margin: 0;
 99 |   }
100 |   body {
101 |     font-family: Arial, Helvetica, sans-serif;
102 |   }
103 |   div {
104 |     width: 100px;
105 |     height: 100px;
106 |     background-color: red;
107 |     position: absolute;
108 |     left: 50%;
109 |     top: 50%;
110 |     display: flex;
111 |     justify-content: center;
112 |     align-items: center;
113 |     color: white;
114 |     transform: translate(-50%, -50%);
115 |     animation-name: change-color;
116 |     animation-duration: 2s;
117 |   }
118 |   /* Code One 
119 |   @keyframes change-color {
120 |     from {
121 |       background-color: red;
122 |     }
123 |     to {
124 |       background-color: blue;
125 |     }
126 |   }
127 |   /* Code Two 
128 |   @keyframes change-color {
129 |     0% {
130 |       background-color: red;
131 |     }
132 |     100% {
133 |       background-color: blue;
134 |     }
135 |   }
136 |   /* Code Three 
137 |   @keyframes change-color {
138 |     0% {
139 |       background-color: red;
140 |     }
141 |     5% {
142 |       background-color: blue;
143 |     }
144 |     80% {
145 |       background-color: black;
146 |     }
147 |     100% {
148 |       background-color: red;
149 |     }
150 |   }
151 | 
152 | 
153 |                                                      Animation – Iteration Count, Timing Function, Spinner Loading
154 | 
155 | /*
156 |   Animation
157 |   - Iteration Count
158 |   - Timing Function
159 |   - Spinner Loading
160 | 
161 | 
162 | * {
163 |     box-sizing: border-box;
164 |     margin: 0;
165 |   }
166 |   body {
167 |     font-family: Arial, Helvetica, sans-serif;
168 |   }
169 |   div {
170 |     width: 100px;
171 |     height: 100px;
172 |     background-color: #e8e3e3;
173 |     position: absolute;
174 |     left: 50%;
175 |     top: 50%;
176 |     margin-left: -50px;
177 |     margin-top: -50px;
178 |     border-radius: 50%;
179 |     border: 5px solid #e91e63;
180 |     transition: transform 0.3s;
181 |     border-left-color: transparent;
182 |     animation-name: spin;
183 |     animation-duration: 1s;
184 |     animation-iteration-count: infinite;
185 |     animation-timing-function: linear;
186 |   }
187 |   @keyframes spin {
188 |     0% {
189 |       transform: rotate(0deg);
190 |     }
191 |     100% {
192 |       transform: rotate(360deg);
193 |     }
194 |   }
195 | 
196 |                                                             Animation - Direction, Fill Mode, Play State, Delay
197 | 
198 | /*
199 |   Animation
200 |   - Iteration Count
201 |   - Timing Function
202 |   - Spinner Loading
203 | 
204 | 
205 | * {
206 |     box-sizing: border-box;
207 |     margin: 0;
208 |   }
209 |   body {
210 |     font-family: Arial, Helvetica, sans-serif;
211 |   }
212 |   div {
213 |     width: 100px;
214 |     height: 100px;
215 |     background-color: #e8e3e3;
216 |     position: absolute;
217 |     left: 50%;
218 |     top: 50%;
219 |     margin-left: -50px;
220 |     margin-top: -50px;
221 |     animation-name: coloring;
222 |     animation-duration: 5s;
223 |     animation-iteration-count: 1;
224 |     animation-timing-function: linear;
225 |     animation-direction: reverse;
226 |     animation-delay: -2s;
227 |     animation-fill-mode: both;
228 |     animation-play-state: running;
229 |     animation: coloring 3s linear 2s infinite reverse;
230 |   }
231 |   div:hover {
232 |     animation-play-state: paused;
233 |   }
234 |   @keyframes coloring {
235 |     0% {
236 |       background-color: red;
237 |     }
238 |     50% {
239 |       background-color: blue;
240 |     }
241 |     100% {
242 |       background-color: black;
243 |     }
244 |   }
245 | 
246 | 
247 |                                                            Up And Down Loading Animation Training
248 | /*
249 |   Loading Animation
250 | 
251 | 
252 | * {
253 |     box-sizing: border-box;
254 |     margin: 0;
255 |   }
256 |   body {
257 |     font-family: Arial, Helvetica, sans-serif;
258 |     background-color: #333;
259 |   }
260 |   .load {
261 |     display: flex;
262 |     justify-content: center;
263 |     margin: 50px auto;
264 |   }
265 |   .load div {
266 |     width: 20px;
267 |     height: 20px;
268 |     background-color: orchid;
269 |     border-radius: 50%;
270 |     margin: 0 5px;
271 |     animation-name: up-and-down;
272 |     animation-duration: 0.9s;
273 |     animation-iteration-count: infinite;
274 |     animation-direction: alternate;
275 |   }
276 |   .load .two {
277 |     animation-delay: 0.3s;
278 |   }
279 |   .load .three {
280 |     animation-delay: 0.6s;
281 |   }
282 |   @keyframes up-and-down {
283 |     to {
284 |       opacity: 0.2;
285 |       transform: translateY(-20px);
286 |     }
287 |   }
288 | 
289 | 
290 |                                                                   Selectors Reference Part 1
291 | 
292 | /*
293 |   CSS Selectors
294 |   - *
295 |   - Element => [p, div, h2]
296 |   - Element OtherElement => div p
297 |   - .class-name
298 |   - #id-name
299 |   - .parent .child
300 |   - .class-one.class-two
301 |   - .class-name div, .class-name p
302 |   - Element.class-name => p.class-name
303 |   - .parent > .child => Direct Child
304 | 
305 | 
306 | * {
307 |     box-sizing: border-box;
308 |     margin: 0;
309 |   }
310 |   body {
311 |     font-family: Arial, Helvetica, sans-serif;
312 |   }
313 | 
314 |                                                                      Selectors Reference Part 2
315 | 
316 | 
317 | 
318 | /*
319 |   CSS Selectors
320 |   - :first-child
321 |   - :last-child
322 |   - :first-of-type
323 |   - :last-of-type
324 |   - :only-child
325 | 
326 |                                                                   CSS Selectors Reference Part 3
327 | 
328 | * {
329 |     box-sizing: border-box;
330 |     margin: 0;
331 |   }
332 |   body {
333 |     font-family: Arial, Helvetica, sans-serif;
334 |   }
335 | 
336 | 
337 | 
338 | 
339 | 
340 | 
341 | */
342 | 


--------------------------------------------------------------------------------
/four.css:
--------------------------------------------------------------------------------
  1 | /*
  2 |                                                                Grid - Parent - Template Columns
  3 | 
  4 | /*
  5 |   Grid
  6 |   Parent
  7 |   - display: grid | inline-grid
  8 |   - grid-template-columns: [Number Of Columns In] => [Px, %, Auto, Repeat]
  9 | 
 10 | 
 11 | * {
 12 |   box-sizing: border-box;
 13 | }
 14 | .parent {
 15 |   margin: 20px auto;
 16 |   width: 800px;
 17 |   height: 500px;
 18 |   background-color: #ddd;
 19 |   display: grid;
 20 |   grid-template-columns: repeat(2, auto) repeat(2, 1fr);
 21 | }
 22 | .parent div {
 23 |   background-color: red;
 24 |   color: white;
 25 |   padding: 20px;
 26 |   font-size: 30px;
 27 |   font-weight: bold;
 28 |   text-align: center;
 29 | }
 30 | 
 31 | 
 32 |                                                                   Grid - Parent - Template Rows And Gap
 33 | 
 34 | 
 35 | /*
 36 |   Grid
 37 |   Parent
 38 |   - display: grid | inline-grid
 39 |   - grid-template-columns: [Number Of Columns In] => [Px, %, Auto, Fraction, Repeat, Mix]
 40 |   - grid-template-rows: [Number Of Rows In] => [Px, %, Auto, Fraction, Repeat, Mix]
 41 |   - gap: [Row Gap] [Column Gap]
 42 | 
 43 | 
 44 | * {
 45 |   box-sizing: border-box;
 46 | }
 47 | .parent {
 48 |   margin: 20px auto;
 49 |   width: 800px;
 50 |   height: 500px;
 51 |   background-color: #ddd;
 52 |   display: grid;
 53 |   grid-template-columns: repeat(4, 1fr);
 54 |   grid-template-rows: repeat(3, 1fr);
 55 |   /* row-gap: 10px;
 56 |   column-gap: 10px;
 57 |   gap: 10px 10px;
 58 | }
 59 | .parent div {
 60 |   background-color: red;
 61 |   color: white;
 62 |   padding: 20px;
 63 |   font-size: 30px;
 64 |   font-weight: bold;
 65 |   text-align: center;
 66 | }
 67 | 
 68 | 
 69 |                                                             Grid – Parent – Justify And Align Content
 70 | 
 71 | 
 72 | /*
 73 |   Grid
 74 |   Parent
 75 |   - display: grid | inline-grid
 76 |   - grid-template-columns: [Number Of Columns In] => [Px, %, Auto, Fraction, Repeat, Mix]
 77 |   - grid-template-rows: [Number Of Rows In] => [Px, %, Auto, Fraction, Repeat, Mix]
 78 |   - gap: [Row Gap] [Column Gap]
 79 |   - justify-content
 80 |   - align-content
 81 | 
 82 | 
 83 | * {
 84 |   box-sizing: border-box;
 85 | }
 86 | .parent {
 87 |   margin: 20px auto;
 88 |   width: 800px;
 89 |   height: 500px;
 90 |   background-color: #ddd;
 91 |   display: grid;
 92 |   grid-template-columns: repeat(4, auto);
 93 |   grid-template-rows: repeat(3, auto);
 94 |   gap: 10px 10px;
 95 |   justify-content: space-between;
 96 |   align-content: space-between;
 97 | }
 98 | .parent div {
 99 |   background-color: red;
100 |   color: white;
101 |   padding: 20px;
102 |   font-size: 30px;
103 |   font-weight: bold;
104 |   text-align: center;
105 | }
106 | 
107 | 
108 |                                                                 - Grid - Parent - Complete Layout With Template
109 | 
110 | /*
111 |   Grid
112 |   Parent
113 |   - display: grid | inline-grid
114 |   - grid-template-columns: [Number Of Columns In] => [Px, %, Auto, Fraction, Repeat, Mix]
115 |   - grid-template-rows: [Number Of Rows In] => [Px, %, Auto, Fraction, Repeat, Mix]
116 |   - gap: [Row Gap] [Column Gap]
117 |   - justify-content
118 |   - align-content
119 | 
120 | 
121 | * {
122 |   box-sizing: border-box;
123 |   padding: 0;
124 |   margin: 0;
125 | }
126 | ul {
127 |   list-style: none;
128 | }
129 | ul li {
130 |   display: inline-block;
131 | }
132 | .page {
133 |   height: 100vh;
134 |   background-color: #eee;
135 |   display: grid;
136 |   grid-template-columns: repeat(10, 1fr);
137 |   grid-template-rows: 50px auto 50px;
138 |   grid-template-areas:
139 |     "logo logo nav nav nav nav nav nav nav nav"
140 |     "cont cont cont cont cont cont cont . side side"
141 |     "foot foot foot foot foot foot foot foot foot foot";
142 | }
143 | h2 {
144 |   grid-area: logo;
145 |   background-color: red;
146 |   color: white;
147 | }
148 | nav {
149 |   grid-area: nav;
150 |   background-color: blue;
151 |   color: white;
152 | }
153 | section {
154 |   grid-area: cont;
155 |   background-color: yellow;
156 |   color: white;
157 | }
158 | aside {
159 |   grid-area: side;
160 |   background-color: green;
161 |   color: white;
162 | }
163 | footer {
164 |   grid-area: foot;
165 |   background-color: black;
166 |   color: white;
167 | }
168 | 
169 | 
170 |                                                          Grid – Child – Grid Column And Row
171 | 
172 | /*
173 |   Grid
174 |   Parent
175 |   - display: grid | inline-grid
176 |   - grid-template-columns: [Number Of Columns In] => [Px, %, Auto, Fraction, Repeat, Mix]
177 |   - grid-template-rows: [Number Of Rows In] => [Px, %, Auto, Fraction, Repeat, Mix]
178 |   - gap: [Row Gap] [Column Gap]
179 |   - justify-content
180 |   - align-content
181 |   - grid-template-areas
182 |   Child
183 |   - grid-column: [Grid-Column-Start] [Grid-Column-End]
184 |   - grid-row: [Grid-Row-Start] [Grid-Row-End]
185 | 
186 | 
187 | * {
188 |   box-sizing: border-box;
189 | }
190 | .parent {
191 |   margin: 20px auto;
192 |   width: 800px;
193 |   height: 500px;
194 |   background-color: #ddd;
195 |   display: grid;
196 |   grid-template-columns: repeat(6, 1fr);
197 |   grid-template-rows: repeat(3, auto);
198 |   gap: 10px 10px;
199 | }
200 | .parent div {
201 |   background-color: red;
202 |   color: white;
203 |   padding: 20px;
204 |   font-size: 30px;
205 |   font-weight: bold;
206 |   text-align: center;
207 | }
208 | 
209 | 
210 |                                                             Grid – Child – Grid Area And Trainings
211 | 
212 | 
213 | /*
214 |   Grid
215 |   Parent
216 |   - display: grid | inline-grid
217 |   - grid-template-columns: [Number Of Columns In] => [Px, %, Auto, Fraction, Repeat, Mix]
218 |   - grid-template-rows: [Number Of Rows In] => [Px, %, Auto, Fraction, Repeat, Mix]
219 |   - gap: [Row Gap] [Column Gap]
220 |   - justify-content
221 |   - align-content
222 |   - grid-template-areas
223 |   Child
224 |   - grid-column: [Grid-Column-Start] [Grid-Column-End]
225 |   - grid-row: [Grid-Row-Start] [Grid-Row-End]
226 |   - grid-area: [Grid-Row-Start] [Grid-Column-Start] [Grid-Row-End] [Grid-Column-End]
227 | 
228 | 
229 | * {
230 |   box-sizing: border-box;
231 | }
232 | .parent {
233 |   margin: 20px auto;
234 |   width: 800px;
235 |   height: 500px;
236 |   background-color: #ddd;
237 |   display: grid;
238 |   grid-template-columns: repeat(6, 1fr);
239 |   grid-template-rows: repeat(3, auto);
240 |   gap: 10px 10px;
241 | }
242 | .parent div {
243 |   background-color: red;
244 |   color: white;
245 |   padding: 20px;
246 |   font-size: 30px;
247 |   font-weight: bold;
248 |   text-align: center;
249 | }
250 | 
251 | 
252 |                                                                       Min, Max And Auto Fill
253 | 
254 | * {
255 |   box-sizing: border-box;
256 |   margin: 0;
257 | }
258 | .parent {
259 |   margin: 20px auto;
260 |   height: 500px;
261 |   background-color: #ddd;
262 |   display: grid;
263 |   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
264 | }
265 | .parent div {
266 |   background-color: red;
267 |   color: white;
268 |   padding: 20px;
269 |   font-size: 30px;
270 |   font-weight: bold;
271 |   text-align: center;
272 | }
273 | 
274 | 
275 | 
276 |                                                                    2D Transform – Scale
277 | 
278 | 
279 | div {
280 |   margin: 200px auto;
281 |   width: 200px;
282 |   height: 200px;
283 |   background-color: rgb(255 0 0 / 39%);
284 |   color: white;
285 |   display: flex;
286 |   justify-content: center;
287 |   align-items: center;
288 |   font-weight: bold;
289 |   font-size: 30px;
290 |   transform: scaleX(2);
291 |   transform: scaleY(2);
292 |   transform: scale(2, 2);
293 | }
294 | 
295 |                                                                    2D Transform - Rotate
296 | 
297 | 
298 | div {
299 |   margin: 200px auto;
300 |   width: 200px;
301 |   height: 200px;
302 |   background-color: rgb(255 0 0 / 39%);
303 |   color: white;
304 |   display: flex;
305 |   justify-content: center;
306 |   align-items: center;
307 |   font-weight: bold;
308 |   font-size: 30px;
309 |   transform: rotate(45deg);
310 |   transform: rotate(1turn);
311 |   transform: rotate(0.5turn);
312 |   transform: rotate(0.25turn);
313 | }
314 | 
315 |                                                                  2D Transform – Skew
316 | 
317 | h2 {
318 |   position: relative;
319 |   color: white;
320 |   margin: 20px auto;
321 |   width: fit-content;
322 |   padding: 20px;
323 | }
324 | h2::before {
325 |   content: "";
326 |   background-color: red;
327 |   position: absolute;
328 |   left: 0;
329 |   top: 0;
330 |   width: 100%;
331 |   height: 100%;
332 |   z-index: -1;
333 |   transform: skewX(20deg);
334 | }
335 | div {
336 |   margin: 200px auto;
337 |   width: 200px;
338 |   height: 200px;
339 |   background-color: rgb(255 0 0 / 39%);
340 |   color: white;
341 |   display: flex;
342 |   justify-content: center;
343 |   align-items: center;
344 |   font-weight: bold;
345 |   font-size: 30px;
346 |   transform: skewX(10deg);
347 |   transform: skewX(-10deg);
348 |   transform: skewY(10deg);
349 |   transform: skewY(-10deg);
350 |   transform: skew(10deg, 10deg);
351 | }
352 |                                                                       2D Transform – Matrix
353 | 
354 | /*
355 |   matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())
356 | 
357 | div {
358 |   margin: 200px auto;
359 |   width: 200px;
360 |   height: 200px;
361 |   background-color: rgb(255 0 0 / 39%);
362 |   color: white;
363 |   display: flex;
364 |   justify-content: center;
365 |   align-items: center;
366 |   font-weight: bold;
367 |   font-size: 30px;
368 |   transform: matrix(1.2, 0.2679, 0, 1.2, 20, 20);
369 |   transform: translateX(20px) translateY(20px) scaleX(1.2) skewY(15deg) skewX(0deg) scaleY(1.2);
370 | }
371 | 
372 | 
373 |                                                                       Transform – Origin
374 | 
375 | /*
376 |   transform-origin
377 |   Syntax
378 |   Default Values => 50% 50% 0
379 |   2D Transform => transform-origin(X, Y)
380 |   3D Transform => transform-origin(X, Y, Z)
381 |   X-Axis
382 |   - CSS Unit [px, em, rem]
383 |   - %
384 |   - Keyword
385 |   -- Left = 0%
386 |   -- Center = 50%
387 |   -- Right = 100%
388 |   Y-Axis
389 |   - CSS Unit [px, em, rem]
390 |   - %
391 |   - Keyword
392 |   -- Top = 0%
393 |   -- Center = 50%
394 |   -- Bottom = 100%
395 | 
396 | 
397 | div {
398 |   margin: 200px auto;
399 |   width: 200px;
400 |   height: 200px;
401 |   background-color: rgb(255 0 0 / 39%);
402 |   color: white;
403 |   display: flex;
404 |   justify-content: center;
405 |   align-items: center;
406 |   font-weight: bold;
407 |   font-size: 30px;
408 |   transform-origin: 0 50%;
409 |   transform: rotate(100deg);
410 | }
411 | 
412 | 
413 | 
414 | 
415 | 
416 | */


--------------------------------------------------------------------------------
/index4.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 | <link rel="stylesheet" href="second.css">
  7 | 
  8 | <!--
  9 | <style>
 10 |   .special {
 11 |     color: green;
 12 |   }
 13 | </style>
 14 | </head>
 15 | <body>
 16 | <p style="color: purple">This Is Paragraph</p>
 17 | <p>This Is Paragraph</p>
 18 | <p class="special">This Is Paragraph</p>
 19 | <p>This Is Paragraph</p>
 20 | <body>
 21 | 
 22 | 
 23 |                                                        Element Styling
 24 | <p style="color: purple">This Is Paragraph</p>
 25 |     <p>This Is Paragraph</p>
 26 |     <p class="special">This Is Paragraph</p>
 27 |     <p>This Is Paragraph</p>
 28 | 
 29 |                                                      Name Conventions And Rules
 30 | 
 31 | <body>
 32 |   
 33 |   <div>Div</div>
 34 |   <div class="_test">Div</div>
 35 |   <div id="test">Div</div>
 36 | 
 37 | </body>
 38 |                                                   Background - Color, Image, Repeat
 39 | 
 40 | 
 41 | <body>
 42 |    <div>
 43 |       <h2>Product Title</h2>
 44 |       <p>This Is Paragraph</p>
 45 |     </div>
 46 | </body>
 47 | 
 48 | 
 49 |                                                Background – Attachment, Position, Size
 50 | 
 51 | 
 52 | <div>
 53 |       <h2>Product Title</h2>
 54 |       <p>This Is Paragraph</p>
 55 |       <p>This Is Paragraph</p>
 56 |       <p>This Is Paragraph</p>
 57 |       <p>This Is Paragraph</p>
 58 |       <p>This Is Paragraph</p>
 59 |       <p>This Is Paragraph</p>
 60 |       <p>This Is Paragraph</p>
 61 |       <p>This Is Paragraph</p>
 62 |       <p>This Is Paragraph</p>
 63 |       <p>This Is Paragraph</p>
 64 |      
 65 |     </div>
 66 | 
 67 |                                                        Padding
 68 | <div>
 69 |       <h2>Product Title</h2>
 70 |       <p>This Is Paragraph</p>
 71 |     </div>
 72 | 
 73 |                                                         Margin
 74 | 
 75 |  <div>
 76 |       <h2>Product Title</h2>
 77 |       <p>This Is Paragraph</p>
 78 |     </div>
 79 | 
 80 |                                                           Border
 81 | 
 82 |  <div>
 83 |       <h2>Product Title</h2>
 84 |       <p>This Is Paragraph</p>
 85 |     </div>                                                         
 86 | 
 87 |                                                          Outline
 88 | 
 89 | <div>
 90 |       <h2>Product Title</h2>
 91 |       <p>This Is Paragraph</p>
 92 |     </div>    
 93 | 
 94 |                                                     Display – Block, Inline-Block, Inline
 95 |                                                          
 96 | <div>Div => Block</div>
 97 |     <div>Div => Block</div>
 98 |     <div>Div => Block</div>
 99 | 
100 |     <span>Span => Inline</span>
101 |     <span>Span => Inline</span>
102 |     <span>Span => Inline</span>
103 | 
104 | 
105 |                                                      Element Visibility And Use Cases
106 | 
107 | 
108 | <div class="first">First</div>
109 |     <div>Div</div>
110 | 
111 |                                                      Grouping Multiple Selectors
112 | 
113 |   <div class="one">One</div>
114 |     <div class="two">Two</div>
115 |     <div class="three">Three</div>
116 |     <div class="four">Four</div>
117 |     <p class="my-p">This Is P</p>
118 | 
119 | 
120 |                                                              Nesting
121 | 
122 |      <div>
123 |       <h2>Title</h2>
124 |       <p>Paragraph Inside Div</p>
125 |       <p class="special">Paragraph Inside Div With Class</p>
126 |     </div>
127 |     <p class="special">Paragraph Outside Div</p>
128 | 
129 |                                                         Dimensions - Width And Height
130 | 
131 | <div>Osama Mohamed</div>
132 |     <hr>
133 |     <div>Osama Mohamed Ahmed</div>
134 |     <hr>
135 |     <div>Osama Mohamed Ahmed Sayed</div>
136 | 
137 |                                                 Overflow – Overflow-X And Overflow-Y
138 | 
139 |   <div>
140 |       Lorem ipsum dolor sit amet consectetur adipisicing elit.
141 |       Inventore sit molestiae, corrupti at quae debitis dicta
142 |       adipisci unde, nemo, veritatis error. Cupiditate,
143 |       deserunt maiores assumenda ut quod voluptate adipisci repellat.
144 |     </div>
145 | 
146 |                                                     Text – Color And Shadow
147 | 
148 | <div>Elzero Web School</div>
149 | 
150 |                                                     Text – Alignment
151 | 
152 |  <div>Elzero Web <img src="https://via.placeholder.com/60" alt=""> School</div>
153 | 
154 | 
155 |                                                  Text – Decoration And Transform
156 |  <div>elzero web school</div>
157 |     <a href="#">Google</a>
158 | 
159 |                                                    Decoration And Transform
160 | 
161 |  <div>Elzero Web School Elzero Web School Elzero Web School Elzero Web School</div>
162 | 
163 |                                                     Text – Spacing
164 | 
165 |  <div>Elzero Web School Elzero Web School Elzero Web School Elzero Web School</div>
166 |  
167 |                                                      Overflow And Use Cases
168 | 
169 |  <div title="Welcome To Elzero Web School, Hello">
170 |       Welcome To Elzero Web School, Hello
171 |     </div>
172 | 
173 |                                                      Inheritance
174 | 
175 |      <div>
176 |       <h3>Elzero Web School</h3>
177 |       <p>Welcome To The Website</p>
178 |     </div>
179 | 
180 |                                                      Typography – Font Family
181 | 
182 |   <div class="with-ser">Welcome To Elzero Web School, Hello F</div>
183 |     <div class="san-ser">Welcome To Elzero Web School, Hello F</div>
184 | 
185 | 
186 |                                                     Typography – Font Size And CSS Units
187 | 
188 |    <div>
189 |       Elzero Web School
190 |       <span>Test</span>
191 |     </div>
192 | 
193 | 
194 | 
195 |                                                   Typography – Font Style And Variant And Weight
196 | 
197 | 
198 | <div>elzero web school</div>
199 |     <p>Elzero Web School</p>
200 | 
201 |                                                                Mouse Cursor
202 | 
203 | 
204 |   <a href="#">Google</a>
205 |     <span>Test</span>
206 |     <button>Click</button>
207 |     <hr>
208 |     <p>This Is P</p>
209 |     <p>This Is P</p>
210 |     <p>This Is P</p>
211 | 
212 | 
213 |                                                                Float And Clear
214 | 
215 | 
216 |     <div class="parent">
217 |       <div>Product One</div>
218 |       <div>Product Two</div>
219 |       <div>Product Three</div>
220 |       <div>Product Four</div>
221 |     </div>
222 |     <div class="clear"></div>
223 |     <p>This Is P For Testing Float</p>
224 | 
225 | 
226 |                                                                     Mastering The CSS Calculation
227 | 
228 |  <div>Product One</div>
229 |     <div>Product Two</div>
230 |     <div>Product Three</div>
231 |     <div>Product Four</div>
232 | 
233 | 
234 |                                                                             Opacity
235 | 
236 | <div class="one">Element</div>
237 | <div class="two">Element</div>
238 | 
239 | 
240 |                                                                            Position
241 | 
242 |    <div class="one">One</div>
243 |     <div class="two">Two</div>
244 | 
245 |                                                                           Z-Index
246 | 
247 | <div class="one">One</div>
248 |     <div class="two">Two</div>
249 |     <div class="three">Three</div>
250 | 
251 |                                                                      List Styling
252 | 
253 | <h3>Title</h3>
254 |     <ul>
255 |       <li>HTML</li>
256 |       <li>CSS</li>
257 |       <li>
258 |         JS
259 |         <ul>
260 |           <li>Reactjs</li>
261 |           <li>Vuejs</li>
262 |           <li>Angular</li>
263 |         </ul>
264 |       </li>
265 |     </ul>
266 | 
267 |                                                                      Table Styling
268 | 
269 | <table>
270 |       <thead>
271 |         <tr>
272 |           <td>Name</td>
273 |           <td>Age</td>
274 |           <td>Email</td>
275 |         </tr>
276 |       </thead>
277 |       <tbody>
278 |         <tr>
279 |           <td>Osama</td>
280 |           <td>38</td>
281 |           <td>o@nn.sa</td>
282 |         </tr>
283 |         <tr>
284 |           <td>Ahmed</td>
285 |           <td>38</td>
286 |           <td>o@nn.sa</td>
287 |         </tr>
288 |         <tr>
289 |           <td>Sayed</td>
290 |           <td>38</td>
291 |           <td>o@nn.sa</td>
292 |         </tr>
293 |         <tr>
294 |           <td>Ali</td>
295 |           <td>38</td>
296 |           <td>o@nn.sa</td>
297 |         </tr>
298 |       </tbody>
299 |     </table>
300 | 
301 |  
302 |                                                                Pseudo Classes
303 | 
304 | 
305 |  <div class="one">Normal Element</div>
306 |     <hr />
307 |     <div class="two"></div>
308 |     <p></p>
309 |     <hr />
310 |     <a href="https://google.com">Link 1</a>
311 |     <a href="https://twitter.com">Link 2</a>
312 |     <a href="https://youtube.com">Link 3</a>
313 |     <a href="https://linkedin.com">Link 4</a>
314 |     <hr />
315 |     <form action="">
316 |       <div>
317 |         <input class="in" type="text" />
318 |       </div>
319 |       <div>
320 |         <input class="ch" type="checkbox" />
321 |         <label for="">Testing Check</label>
322 |       </div>
323 |     </form>
324 | 
325 | 
326 |                                                             Pseudo Elements - First Letter, First Line,
327 | 
328 | <div class="one">
329 |       <span>L</span>orem ipsum dolor sit amet consectetur, adipisicing elit.
330 |       Laudantium accusantium ipsa veniam officiis
331 |       blanditiis numquam rerum! Eligendi perspiciatis atque ut adipisci quam,
332 |       temporibus eveniet nisi assumendaconsequatur, maiores ad veritatis.
333 |     </div>
334 |     <hr />
335 |     <div class="two">
336 |       Lorem ipsum dolor sit amet consectetur, adipisicing elit.
337 |       Laudantium accusantium ipsa veniam officiis
338 |       blanditiis numquam rerum! Eligendi perspiciatis atque ut adipisci quam,
339 |       temporibus eveniet nisi assumendaconsequatur, maiores ad veritatis.
340 |     </div>
341 |     <hr />
342 |     <p class="three">
343 |       Lorem ipsum dolor sit amet consectetur, adipisicing elit.
344 |       Laudantium accusantium ipsa veniam officiis
345 |       blanditiis numquam rerum! Eligendi perspiciatis atque ut adipisci quam,
346 |       temporibus eveniet nisi assumendaconsequatur, maiores ad veritatis.
347 |     </p>
348 | 
349 | 
350 | -->
351 | 
352 | 
353 | 
354 | 
355 | 
356 | 
357 | 
358 | 
359 | 
360 | 
361 | 
362 | 
363 | 
364 | 
365 | 
366 | 
367 | </html>


--------------------------------------------------------------------------------
/index5.html:
--------------------------------------------------------------------------------
  1 | <html lang="en">
  2 | <head>
  3 |     <meta charset="UTF-8">
  4 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>Document</title>
  7 |     <link rel="stylesheet" href="five.css">
  8 | </head>
  9 | <body>
 10 |     
 11 |     <!--
 12 |                                   Pseudo Elements - Before, After, Content
 13 |         
 14 |         <div class="parent">
 15 |       <div class="user">O</div>
 16 |       <div class="one">
 17 |         Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum labore culpa dolores, autem voluptatum atque,
 18 |         in dolore asperiores facilis libero dolorum magni iure doloribus quae pariatur! Similique ipsum nobis quos.
 19 |       </div>
 20 |     </div>
 21 |     <div class="parent">
 22 |       <div class="user">A</div>
 23 |       <div class="one">
 24 |         Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum labore culpa dolores, autem voluptatum atque,
 25 |         in dolore asperiores facilis libero dolorum magni iure doloribus quae pariatur! Similique ipsum nobis quos.
 26 |       </div>
 27 |     </div>
 28 |     <div class="parent">
 29 |       <div class="user">E</div>
 30 |       <div class="one">
 31 |         Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum labore culpa dolores, autem voluptatum atque,
 32 |         in dolore asperiores facilis libero dolorum magni iure doloribus quae pariatur! Similique ipsum nobis quos.
 33 |       </div>
 34 |     </div>
 35 |         
 36 |         
 37 |                                                                        The Margin Collapse
 38 |          <div class="parent">
 39 |       <div class="one"></div>
 40 |       <div class="two">
 41 |         <div class="up"></div>
 42 |         <div class="down"></div>
 43 |       </div>
 44 |     </div>
 45 |         
 46 |         
 47 |                                                                  CSS Variables And Trainings
 48 | 
 49 |  <div class="main">Main Div</div>
 50 |     <h2>Main Title</h2>
 51 |     <p>My Paragraph</p>
 52 |     <a href="#">My Link</a>
 53 |     <div class="local">Local</div>
 54 | 
 55 |                                                           - Flex Box Parent - Direction, Wrap, Flow
 56 |         
 57 | 
 58 |             <h3>Flex</h3>
 59 |     <div class="flex">
 60 |       <div>One</div>
 61 |       <div>Two</div>
 62 |       <div>Three</div>
 63 |       <div>Four</div>
 64 |     </div>
 65 |     <hr />
 66 |     <h3>Float</h3>
 67 |     <div class="float">
 68 |       <div>One</div>
 69 |       <div>Two</div>
 70 |       <div>Three</div>
 71 |       <div>Four</div>
 72 |     </div>
 73 |         
 74 |         
 75 |                                                            Flex Box – Parent – Justify Content
 76 |         
 77 |         <h3>Flex</h3>
 78 |     <div class="flex">
 79 |       <div>One</div>
 80 |       <div>Two</div>
 81 |       <div>Three</div>
 82 |       <div>Four</div>
 83 |       <div>Five</div>
 84 |     </div>
 85 |     <hr />
 86 |     <h3>Float</h3>
 87 |     <div class="float">
 88 |       <div>One</div>
 89 |       <div>Two</div>
 90 |       <div>Three</div>
 91 |       <div>Four</div>
 92 |       <div>Five</div>
 93 |     </div>
 94 |                                                                   Flex Box Parent - Align Items
 95 | 
 96 |  <h3>Flex</h3>
 97 |     <div class="flex">
 98 |       <div class="one">One</div>
 99 |       <div class="two">Two</div>
100 |       <div>Three</div>
101 |     </div>
102 |     <hr />
103 |     <h3>Float</h3>
104 |     <div class="float">
105 |       <div class="one">One</div>
106 |       <div class="two">Two</div>
107 |       <div>Three</div>
108 |     </div>
109 |     <div class="center">Center</div>
110 | 
111 |                                                                   Flex Box – Parent – Align Content
112 |    <h3>Flex</h3>
113 |     <div class="flex">
114 |       <div>One</div>
115 |       <div>Two</div>
116 |       <div>Three</div>
117 |       <div>Four</div>
118 |       <div>Five</div>
119 |     </div>
120 | 
121 | 
122 |                                                                   Flex Box – Child – Grow, Shrink, Order
123 | 
124 |   <h3>Flex</h3>
125 |     <div class="flex">
126 |       <div>1</div>
127 |       <div>2</div>
128 |       <div>3</div>
129 |       <div>4</div>
130 |       <div>5</div>
131 |       <div>6</div>
132 |     </div>
133 | 
134 |                                                               Flex Box – Child – Flex Basis, Flex Shorthand
135 | 
136 | 
137 | <div class="flex">
138 |       <div>1</div>
139 |       <div>2</div>
140 |       <div>3</div>
141 |       <div>4</div>
142 |       <div>5</div>
143 |       <div>6</div>
144 |     </div>
145 |     <div class="in">In</div>
146 | 
147 | 
148 | 
149 |                                                                  Flex Box Child - Align Self, Games, Task
150 | 
151 |  <div class="flex">
152 |       <div>1</div>
153 |       <div>2</div>
154 |       <div>3</div>
155 |       <div>4</div>
156 |       <div>5</div>
157 |       <div>6</div>
158 |     </div>
159 |          
160 |                                                                         Filters
161 | 
162 |   <img src="imgs/learn-programming.png" alt="" />
163 | 
164 | 
165 |                                                                       Gradients
166 | <div>Gradients</div>
167 | 
168 |                                                               Pointer Events And Caret Color
169 | 
170 |   <input type="text" />
171 |     <a href="https://google.com">Google</a>
172 |     <p>
173 |       Lorem ipsum, dolor sit amet consectetur adipisicing elit.
174 |       Laudantium, culpa dicta vitae quas temporibus nemo
175 |       ducimus odio animi? Blanditiis voluptas suscipit id et ea
176 |       eveniet doloribus libero labore commodi eligendi!
177 |     </p>
178 | 
179 | 
180 | 
181 | 
182 | 
183 |                                                               Grid - Parent - Template Columns
184 | 
185 | 
186 |  <div class="parent">
187 |       <div>1</div>
188 |       <div>2</div>
189 |       <div>3</div>
190 |       <div>4</div>
191 |       <div>5</div>
192 |       <div>6</div>
193 |       <div>7</div>
194 |       <div>8</div>
195 |       <div>9</div>
196 |     </div>
197 | 
198 |                                                          Grid - Parent - Template Rows And Gap
199 | 
200 |  <div class="parent">
201 |       <div>1</div>
202 |       <div>2</div>
203 |       <div>3</div>
204 |       <div>4</div>
205 |       <div>5</div>
206 |       <div>6</div>
207 |       <div>7</div>
208 |       <div>8</div>
209 |       <div>9</div>
210 |     </div>
211 | 
212 |                                                                  Grid – Parent – Justify And Align Content
213 | 
214 | <div class="parent">
215 |       <div>1</div>
216 |       <div>2</div>
217 |       <div>3</div>
218 |       <div>4</div>
219 |       <div>5</div>
220 |       <div>6</div>
221 |       <div>7</div>
222 |       <div>8</div>
223 |       <div>9</div>
224 |     </div>
225 | 
226 |                                                                 Grid - Parent - Complete Layout With Template
227 | 
228 |  <div class="page">
229 |       <h2>Elzero</h2>
230 |       <nav>
231 |         <ul>
232 |           <li>Home</li>
233 |           <li>About</li>
234 |           <li>Services</li>
235 |           <li>Contact</li>
236 |         </ul>
237 |       </nav>
238 |       <section>Content</section>
239 |       <aside>Sidebar</aside>
240 |       <footer>Footer</footer>
241 |     </div>
242 | 
243 |                                                         Grid – Child – Grid Column And Row
244 | 
245 | 
246 | 
247 | <div class="parent">
248 |       <div style="grid-row: 1 / 5">1</div>
249 |       <div>2</div>
250 |       <div>3</div>
251 |       <div>4</div>
252 |       <div>5</div>
253 |       <div>6</div>
254 |       <div>7</div>
255 |       <div style="grid-row: span 2">8</div>
256 |       <div>9</div>
257 |       <div>1</div>
258 |       <div>2</div>
259 |       <div>3</div>
260 |       <div style="grid-column: span 3">4</div>
261 |       <div>5</div>
262 |       <div>6</div>
263 |       <div>7</div>
264 |       <div>8</div>
265 |       <div>9</div>
266 |     </div>
267 | 
268 | 
269 |                                                         Grid – Child – Grid Area And Trainings
270 | 
271 | 
272 | <div class="parent">
273 |       <div>1</div>
274 |       <div>2</div>
275 |       <div>3</div>
276 |       <div>4</div>
277 |       <div>5</div>
278 |       <div>6</div>
279 |       <div>7</div>
280 |       <div>8</div>
281 |       <div
282 |         style="
283 |           background-color: green;
284 |           grid-row-start: 2;
285 |           grid-column-start: 2;
286 |           grid-row-end: 5;
287 |           grid-column-end: 6;
288 |           grid-area: 2 / 2 / 5 / 6;
289 |         "
290 |       >
291 |         9
292 |       </div>
293 |       <div>1</div>
294 |       <div>2</div>
295 |       <div>3</div>
296 |       <div>4</div>
297 |       <div>5</div>
298 |       <div>6</div>
299 |       <div>7</div>
300 |       <div>8</div>
301 |       <div>9</div>
302 |     </div>
303 | 
304 |                                                                      Min, Max And Auto Fill
305 | 
306 |   <div class="parent">
307 |       <div>1</div>
308 |       <div>2</div>
309 |       <div>3</div>
310 |       <div>4</div>
311 |       <div>5</div>
312 |       <div>6</div>
313 |       <div>7</div>
314 |       <div>8</div>
315 |       <div>9</div>
316 |     </div>
317 | 
318 | 
319 |                                                                         2D Transform – Scale
320 | 
321 |     <div>Transform</div>
322 | 
323 |                                                                         2D Transform – Rotate
324 |     
325 |       <div>Transform</div>
326 | 
327 |                                                                         2D Transform – Skew
328 | 
329 |   <h2>Test Title</h2>
330 |     <div>Transform</div>
331 |   
332 |                                                                         
333 |                                                                         2D Transform – Matrix
334 | 
335 |  <div>Transform</div>
336 | 
337 |                                                                        Transform – Origin
338 |  
339 |  <div>Transform</div>
340 | 
341 |                                               
342 |     
343 |     
344 | 
345 | 
346 | 
347 | 
348 | 
349 | 
350 | 
351 | 
352 | 
353 | 
354 | 
355 | 
356 | 
357 | 
358 | 
359 | 
360 | 
361 | 
362 | 
363 | 
364 | 
365 | 
366 | 
367 |         -->
368 |   


--------------------------------------------------------------------------------
/index6.html:
--------------------------------------------------------------------------------
  1 | <html lang="en">
  2 | <head>
  3 |     <meta charset="UTF-8">
  4 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>Document</title>
  7 |     <link rel="stylesheet" href="six.css">
  8 | </head>
  9 | <body>
 10 |     
 11 |     <!--
 12 |                                                              3D Transform - Rotate
 13 | 
 14 |  <div>Transform</div>
 15 | 
 16 | 
 17 |                                             3D Transform - Translate, Perspective, Perspective Origin
 18 | 
 19 | 
 20 | <div class="shape">
 21 |       <div>Transform</div>
 22 |     </div>
 23 |  
 24 |                                               3D Transform – Backface Visibility And Flip Product
 25 | 
 26 |  <div class="container">
 27 |       <div class="box">
 28 |         <div class="face front">Front</div>
 29 |         <div class="face back">Back</div>
 30 |       </div>
 31 |     </div>
 32 | 
 33 |       
 34 |                                                        Animation - KeyFrames, Name, Duration
 35 | 
 36 |  <div>Animation</div>
 37 | 
 38 |                                                Animation – Iteration Count, Timing Function, Spinner Loading
 39 | 
 40 | 
 41 | <div></div>
 42 | 
 43 |                                                       Animation - Direction, Fill Mode, Play State, Delay
 44 |  
 45 | 
 46 | <div></div>
 47 | 
 48 | 
 49 |                                                             Up And Down Loading Animation Training
 50 | 
 51 | <div class="load">
 52 |       <div class="one"></div>
 53 |       <div class="two"></div>
 54 |       <div class="three"></div>
 55 |     </div>
 56 | 
 57 |                                                                    Selectors Reference Part 1
 58 | 
 59 | 
 60 |                                                                    Selectors Reference Part 2
 61 | 
 62 | 
 63 |                                                                    CSS Selectors Reference Part 3
 64 | 
 65 | 
 66 | 
 67 |                                                                     Selectors Reference Part 4
 68 | 
 69 | 
 70 |                                                                    Selectors Reference Part 5
 71 | 
 72 | 
 73 |                                    
 74 |                                                                Media Queries And Responsive Design – Intro
 75 | 
 76 |  <div class="parent">
 77 |       <div>1</div>
 78 |       <div>2</div>
 79 |       <div>3</div>
 80 |       <div>4</div>
 81 |     </div>
 82 | 
 83 | 
 84 |                                                               Media Queries And Responsive Design – Standards
 85 | 
 86 |  <style media="print">
 87 |       .parent > div {
 88 |         font-size: 100px;
 89 |       }
 90 |     </style>
 91 |   </head>
 92 |   <body>
 93 |     <div class="parent">
 94 |       <div>1</div>
 95 |       <div>2</div>
 96 |       <div>3</div>
 97 |       <div>4</div>
 98 |     </div>
 99 | 
100 |                                                           Media Queries And Responsive Design – Practice
101 | <div class="parent">
102 |       <div>1</div>
103 |       <div>2</div>
104 |       <div>3</div>
105 |       <div>4</div>
106 |     </div>
107 | 
108 |                                                                      Create Your Framework
109 | 
110 | 
111 |     <div class="parent">
112 |       <div class="center-position circle-100 center-flex">Child</div>
113 |     </div>
114 |     <div class="product center-position circle-200 center-flex">Product</div>
115 | 
116 |                                                                      CSS Global Values
117 | 
118 |     <div>
119 |       <span>Span</span>
120 |       <strong>Strong</strong>
121 |       <span>Span</span>
122 |       <p>Paragraph</p>
123 |       <button>Button</button>
124 |     </div>
125 | 
126 | 
127 | 
128 | 
129 | 
130 | 
131 | 
132 | 
133 | 
134 | 
135 | 
136 |         -->
137 |        


--------------------------------------------------------------------------------
/second.css:
--------------------------------------------------------------------------------
  1 |      /*                                                                   Opacity
  2 |      
  3 |      
  4 |      .one {
  5 |   background-color: red;
  6 |   opacity: 0.1;
  7 | }
  8 | .two {
  9 |   background-color: rgb(255 0 0 / 0.1)
 10 | }
 11 | 
 12 | 
 13 |                                                                          Position
 14 | 
 15 | div {
 16 |   color: white;
 17 |   width: 100px;
 18 |   padding: 10px;
 19 | }
 20 | .one {
 21 |   background-color: red;
 22 |   position: absolute;
 23 | }
 24 | .two {
 25 |   background-color: green;
 26 | }
 27 | 
 28 |                                                                            Z-Index
 29 |      
 30 |      div {
 31 |   color: white;
 32 |   width: 100px;
 33 |   padding: 10px;
 34 |   text-align: center;
 35 |   position: absolute;
 36 | }
 37 | .one {
 38 |   background-color: red;
 39 |   left: 20px;
 40 |   top: 20px;
 41 |   z-index: 3;
 42 | }
 43 | .two {
 44 |   background-color: green;
 45 |   left: 15px;
 46 |   top: 15px;
 47 |   z-index: 2;
 48 | }
 49 | .three {
 50 |   background-color: blue;
 51 |   z-index: 1;
 52 | }
 53 |       
 54 |      
 55 |                                                                          List Styling
 56 |  
 57 |      ul {
 58 |   list-style-type: lower-armenian;
 59 | }
 60 | li {
 61 |   background-color: #EEE;
 62 |   margin-bottom: 20px;
 63 | }
 64 | 
 65 |                                                                          Table Styling
 66 | 
 67 | body {
 68 |   font-family: Arial, Helvetica, sans-serif;
 69 | }
 70 | table {
 71 |   width: 100%;
 72 |   border: 1px solid #CCC;
 73 |   border-spacing: 0;
 74 | }
 75 | table td {
 76 |   padding: 15px;
 77 |   background-color: #EEE;
 78 |   border: 1px solid #CCC;
 79 | }
 80 | table thead td {
 81 |   background-color: #f44336;
 82 |   color: #FFF;
 83 |   font-weight: bold;
 84 |   text-align: center;
 85 |   border-color: #F35246;
 86 | }
 87 | 
 88 |                                                                 Pseudo Classes
 89 | 
 90 | .one {
 91 |   background-color: red;
 92 |   color: white;
 93 | }
 94 | .two {
 95 |   background-color: #EEE;
 96 |   width: 100px;
 97 |   height: 100px;
 98 | }
 99 | a {
100 |   color: green;
101 |   text-decoration: none;
102 | }
103 | a:hover {
104 |   color: red;
105 | }
106 | a:visited {
107 |   color: blue;
108 | }
109 | :empty {
110 |   border: 10px solid red;
111 | }
112 | .ch:checked {
113 |   display: none;
114 | }
115 | .in:focus {
116 |   border-color: red;
117 |   outline: none
118 | }
119 | 
120 | 
121 |                                                           Pseudo Elements - First Letter, First Line,
122 | 
123 | 
124 | .one span {
125 |   display: inline-block;
126 |   background-color: red;
127 |   color: white;
128 |   font-size: 60px;
129 |   font-weight: bold;
130 | }
131 | .two::first-letter {
132 |   display: inline-block;
133 |   background-color: red;
134 |   color: white;
135 |   font-size: 60px;
136 |   font-weight: bold;
137 | }
138 | .three::first-line {
139 |   font-weight: bold;
140 |   color: green;
141 | }
142 | ::selection {
143 |   background-color: black;
144 |   color: yellow;
145 | }
146 | 
147 |                                                                       The Margin Collapse
148 | 
149 | .parent {
150 |   overflow: hidden;
151 |   margin: auto;
152 |   width: 400px;
153 |   height: 200px;
154 |   padding: 10px;
155 |   background-color: #eee;
156 | }
157 | .parent .one,
158 | .parent .two {
159 |   float: left;
160 |   width: 50%;
161 |   height: 100%;
162 | }
163 | .one {
164 |   background-color: #ddd;
165 | }
166 | .two {
167 |   background-color: #aaa;
168 | }
169 | .up {
170 |   background-color: red;
171 |   color: white;
172 |   height: 80px;
173 |   margin-bottom: 40px;
174 | }
175 | .down {
176 |   background-color: green;
177 |   color: white;
178 |   height: 80px;
179 |   margin-top: 40px;
180 | }
181 | 
182 | 
183 | 
184 |                                                                   CSS Variables And Trainings
185 | 
186 | 
187 | :root {
188 |   --mainColor: blue;
189 |   --mainPadding: 10px;
190 | }
191 | .main {
192 |   background-color: var(--mainColor, black);
193 |   color: white;
194 |   padding: calc(20px + var(--mainPadding));
195 | }
196 | h2 {
197 |   color: var(--mainColor);
198 |   background-color: #eee;
199 |   padding: var(--mainPadding);
200 | }
201 | p {
202 |   color: var(--mainColor);
203 |   border: 2px solid var(--mainColor);
204 |   padding: var(--mainPadding);
205 | }
206 | a:hover {
207 |   color: var(--mainColor);
208 | }
209 | .local {
210 |   --mainColor: black;
211 |   background-color: var(--mainColor);
212 |   color: white;
213 | }
214 | 
215 |                                                              Flex Box Parent - Direction, Wrap, Flow
216 | 
217 | 
218 | 
219 | * {
220 |   -webkit-box-sizing: border-box;
221 |   -moz-box-sizing: border-box;
222 |   box-sizing: border-box;
223 | }
224 | .flex {
225 |   background-color: #eee;
226 |   width: 600px;
227 |   padding: 20px;
228 |   margin: 20px auto;
229 |   display: flex;
230 |   flex-direction: column;
231 | }
232 | .flex div {
233 |   background-color: #f00;
234 |   color: white;
235 |   width: 25%;
236 |   text-align: center;
237 |   padding: 20px;
238 | }
239 | .float {
240 |   overflow: hidden;
241 |   background-color: #eee;
242 |   width: 600px;
243 |   padding: 20px;
244 |   margin: 20px auto;
245 | }
246 | .float div {
247 |   background-color: #f00;
248 |   color: white;
249 |   float: right;
250 |   width: 25%;
251 |   text-align: center;
252 |   padding: 20px;
253 | }
254 | 
255 | 
256 |                                                   
257 | 
258 | 
259 |      
260 |      
261 |      */
262 |      
263 | 


--------------------------------------------------------------------------------
/six.css:
--------------------------------------------------------------------------------
  1 |  /*                                                             Selectors Reference Part 4 
  2 |                                                                
  3 |                                                                
  4 |    /*
  5 |   CSS Selectors
  6 |   - :not(Selectors)
  7 |   - :nth-child(n)
  8 |   - :nth-last-child(n)
  9 |   - :nth-of-type(n)
 10 |   - :nth-last-of-type(n)
 11 | 
 12 | 
 13 | * {
 14 |   box-sizing: border-box;
 15 |   margin: 0;
 16 | }
 17 | body {
 18 |   font-family: Arial, Helvetica, sans-serif;
 19 | }                                                            
 20 |                                                                
 21 |                                                                    Selectors Reference Part 5                            
 22 |                                                                
 23 |      /*
 24 |   CSS Selectors
 25 |   - :root
 26 |   - :checked
 27 |   - :empty
 28 |   - :disabled
 29 |   - :required
 30 |   - :focus
 31 |   - ::selection
 32 |   - ::placeholder
 33 | 
 34 | 
 35 | * {
 36 |   box-sizing: border-box;
 37 |   margin: 0;
 38 | }
 39 | body {
 40 |   font-family: Arial, Helvetica, sans-serif;
 41 | }                                                          
 42 |                                                                
 43 |                                                                 Media Queries And Responsive Design – Intro                                            
 44 |                                                                
 45 |      /*
 46 |   Media Queries
 47 |   Responsive Design
 48 | 
 49 | 
 50 | * {
 51 |   box-sizing: border-box;
 52 |   margin: 0;
 53 | }
 54 | .parent {
 55 |   display: flex;
 56 |   width: 1200px;
 57 |   justify-content: space-between;
 58 |   flex-wrap: wrap;
 59 |   margin: 20px auto;
 60 | }
 61 | .parent > div {
 62 |   background-color: red;
 63 |   color: white;
 64 |   text-align: center;
 65 |   font-size: 20px;
 66 |   width: 290px;
 67 | }
 68 | 
 69 | @media print {
 70 |   .parent > div {
 71 |     font-size: 100px;
 72 |   }
 73 | }
 74 | 
 75 | @media print {
 76 |   .parent > div:first-child {
 77 |     display: none;
 78 |   }
 79 | }
 80 | 
 81 | @media (min-width: 1400px) {
 82 |   .parent > div {
 83 |     background-color: blue;
 84 |   }
 85 | }
 86 | 
 87 | @media (min-width: 1000px) and (max-width: 1400px) {
 88 |   .parent > div {
 89 |     background-color: blue;
 90 |   }
 91 | }                                                          
 92 |                                                                
 93 |                                                          Media Queries And Responsive Design – Standards                                         
 94 |                                                                
 95 |         /*
 96 |   Media Queries
 97 |   Responsive Design
 98 |   - Concept Of Width
 99 |   - Mobile
100 |   - Small Screens
101 |   - Medium Screens
102 |   - Large Screens
103 |   - Future Updates
104 | 
105 | 
106 | * {
107 |   box-sizing: border-box;
108 |   margin: 0;
109 | }
110 | .parent {
111 |   display: flex;
112 |   width: 1200px;
113 |   justify-content: space-between;
114 |   flex-wrap: wrap;
115 |   margin: 20px auto;
116 | }
117 | .parent > div {
118 |   background-color: red;
119 |   color: white;
120 |   text-align: center;
121 |   font-size: 20px;
122 |   width: 290px;
123 | }
124 | 
125 | /* Mobile 
126 | 
127 | @media (max-width: 767px) {
128 | }
129 | 
130 | /* Small Screens 
131 | 
132 | @media (min-width: 768px) and (max-width: 991px) {
133 | }
134 | 
135 | /* Medium Screens 
136 | 
137 | @media (min-width: 992px) {
138 | }
139 | 
140 | /* Large Screens 
141 | 
142 | @media (min-width: 1200px) {
143 | }
144 | 
145 | /* Custom 
146 | 
147 | @media (max-width: 1199px) {
148 | }                                                       
149 |                                                                
150 |                                                                
151 |                                                                Media Queries And Responsive Design – Practice
152 |                                                                
153 |                                                                
154 | /*
155 |   Media Queries
156 |   Responsive Design
157 |   - Mobile First
158 |   - Test Devices
159 | 
160 | 
161 | * {
162 |   box-sizing: border-box;
163 |   margin: 0;
164 | }
165 | .parent {
166 |   display: flex;
167 |   flex-wrap: wrap;
168 |   justify-content: space-evenly;
169 | }
170 | .parent > div {
171 |   padding: 20px;
172 |   background-color: red;
173 |   color: white;
174 |   font-size: 20px;
175 |   text-align: center;
176 |   font-weight: bold;
177 |   width: 100%;
178 |   margin-bottom: 5px;
179 | }
180 | 
181 | /* Mobile 
182 | 
183 | @media (max-width: 767px) {
184 | }
185 | 
186 | /* Small Screens 
187 | 
188 | @media (min-width: 768px) {
189 |   .parent > div {
190 |     width: calc(50% - 10px);
191 |   }
192 | }
193 | 
194 | /* Medium Screens 
195 | 
196 | @media (min-width: 992px) {
197 |   .parent > div {
198 |     width: calc(25% - 10px);
199 |   }
200 | }
201 | 
202 | /* Large Screens 
203 | 
204 | @media (min-width: 1200px) {
205 | }
206 | 
207 | /* Custom 
208 | 
209 | @media (max-width: 1199px) {
210 | }
211 | 
212 | 
213 | 
214 | 
215 | 
216 | 
217 |               /*
218 |                                                                          Create Your Framework
219 | 
220 | 
221 | * {
222 |   box-sizing: border-box;
223 |   margin: 0;
224 | }
225 | .parent {
226 |   position: relative;
227 |   background-color: #eee;
228 |   margin: 20px auto;
229 |   width: 1200px;
230 |   height: 200px;
231 | }
232 | .parent div {
233 |   background-color: green;
234 |   color: white;
235 | }
236 | .product {
237 |   background-color: red;
238 |   color: white;
239 | }
240 | .center-position {
241 |   position: absolute;
242 |   left: 50%;
243 |   top: 50%;
244 |   transform: translate(-50%, -50%);
245 | }
246 | .circle-100 {
247 |   width: 100px;
248 |   height: 100px;
249 |   border-radius: 50%;
250 | }
251 | .circle-200 {
252 |   width: 200px;
253 |   height: 200px;
254 |   border-radius: 50%;
255 | }
256 | .center-flex {
257 |   display: flex;
258 |   justify-content: center;
259 |   align-items: center;
260 | }
261 | .border-r {
262 |   border-radius: 4px;
263 | }                                                 
264 |                                                                     CSS Global Values                  
265 |    
266 | /*
267 |   CSS Global Values
268 |   - inherit
269 |   - initial
270 |   - unset
271 |   --- If Inherit => inherit
272 |   --- If Not => initial
273 |   - revert CSS Level [4]
274 |   - all
275 | 
276 | 
277 | * {
278 |   box-sizing: border-box;
279 |   margin: 0;
280 | }
281 | div {
282 |   color: red;
283 |   font-size: 40px;
284 |   font-weight: bold;
285 |   background-color: #eee;
286 |   padding: 20px;
287 |   margin: 5px;
288 |   border: 2px solid black;
289 | }
290 | 
291 | 
292 |                                                                
293 |   */


--------------------------------------------------------------------------------
/starting.css:
--------------------------------------------------------------------------------
  1 | *,
  2 | *::after,
  3 | *::before {
  4 |     box-sizing: inherit
  5 | }
  6 | 
  7 | * {
  8 |     font: inherit
  9 | }
 10 | 
 11 | html,
 12 | body,
 13 | div,
 14 | span,
 15 | applet,
 16 | object,
 17 | iframe,
 18 | h1,
 19 | h2,
 20 | h3,
 21 | h4,
 22 | h5,
 23 | h6,
 24 | p,
 25 | blockquote,
 26 | pre,
 27 | a,
 28 | abbr,
 29 | acronym,
 30 | address,
 31 | big,
 32 | cite,
 33 | code,
 34 | del,
 35 | dfn,
 36 | em,
 37 | img,
 38 | ins,
 39 | kbd,
 40 | q,
 41 | s,
 42 | samp,
 43 | small,
 44 | strike,
 45 | strong,
 46 | sub,
 47 | sup,
 48 | tt,
 49 | var,
 50 | b,
 51 | u,
 52 | i,
 53 | center,
 54 | dl,
 55 | dt,
 56 | dd,
 57 | ol,
 58 | ul,
 59 | li,
 60 | fieldset,
 61 | form,
 62 | label,
 63 | legend,
 64 | table,
 65 | caption,
 66 | tbody,
 67 | tfoot,
 68 | thead,
 69 | tr,
 70 | th,
 71 | td,
 72 | article,
 73 | aside,
 74 | canvas,
 75 | details,
 76 | embed,
 77 | figure,
 78 | figcaption,
 79 | footer,
 80 | header,
 81 | hgroup,
 82 | menu,
 83 | nav,
 84 | output,
 85 | ruby,
 86 | section,
 87 | summary,
 88 | time,
 89 | mark,
 90 | audio,
 91 | video,
 92 | hr {
 93 |     margin: 0;
 94 |     padding: 0;
 95 |     border: 0
 96 | }
 97 | 
 98 | html {
 99 |     box-sizing: border-box
100 | }
101 | 
102 | body {
103 |     background-color: hsl(0, 0%, 100%);
104 |     background-color: var(--color-bg, white)
105 | }
106 | 
107 | article,
108 | aside,
109 | details,
110 | figcaption,
111 | figure,
112 | footer,
113 | header,
114 | hgroup,
115 | menu,
116 | nav,
117 | section,
118 | main,
119 | form legend {
120 |     display: block
121 | }
122 | 
123 | ol,
124 | ul {
125 |     list-style: none
126 | }
127 | 
128 | blockquote,
129 | q {
130 |     quotes: none
131 | }
132 | 
133 | button,
134 | input,
135 | textarea,
136 | select {
137 |     margin: 0
138 | }
139 | 
140 | .btn,
141 | .form-control,
142 | .link,
143 | .reset {
144 |     background-color: transparent;
145 |     padding: 0;
146 |     border: 0;
147 |     border-radius: 0;
148 |     color: inherit;
149 |     line-height: inherit;
150 |     -webkit-appearance: none;
151 |     -moz-appearance: none;
152 |     appearance: none
153 | }
154 | 


--------------------------------------------------------------------------------
/style1.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | 
  3 | First assignment css Elzero webschool
  4 | 
  5 | 
  6 | Any Element With Class Title 
  7 | .title {
  8 | }
  9 | 
 10 | /* Any Element With id nav 
 11 | #nav {
 12 | }
 13 | 
 14 | /* Any Element With tag div 
 15 | div {
 16 | }
 17 | 
 18 | /* Any Element With tag h2 
 19 | h2 {
 20 | }
 21 | 
 22 | second assignment css Elzero webschool
 23 | 
 24 | <!-- external style -->
 25 | <link rel="stylesheet" href="css/file.css" />
 26 | 
 27 | <!-- internal style -->
 28 | <style>
 29 | p {
 30 |   color: red;
 31 | }
 32 | </style>
 33 | 
 34 | <!-- inline style -->
 35 | <p style="color: blue;">This Is Our Paragraph</p>
 36 | 
 37 | third assignment css Elzero webschool
 38 | <link rel="stylesheet" href="master.css" />
 39 | 
 40 | fourth assignment css Elzero webschool
 41 | 
 42 | <link rel="stylesheet" href="main/master.css" />
 43 | 
 44 | fifth assignment css Elzero webschool
 45 | 
 46 | 
 47 | /* valid 
 48 | ._user-name {
 49 | }
 50 | 
 51 | /* valid 
 52 | .-user-name {
 53 | }
 54 | 
 55 | /* valid 
 56 | .-user-name {
 57 | }
 58 | 
 59 | /* not valid 
 60 | .1user-name {
 61 | }
 62 | 
 63 | /* not valid 
 64 | .@user-name {
 65 | }
 66 | 
 67 | /* not valid 
 68 | .user@name {
 69 | }
 70 | 
 71 | /* valid 
 72 | ._user10name {
 73 | }
 74 | 
 75 | /* valid 
 76 | .u {
 77 | }
 78 | 
 79 | sixth assignment css Elzero webschool
 80 | 
 81 | /* bad 
 82 | .USERNAME {
 83 | }
 84 | 
 85 | /* bad 
 86 | .UserName {
 87 | }
 88 | 
 89 | /* good 
 90 | .user-name {
 91 | }
 92 | 
 93 | /* bad 
 94 | .userName {
 95 | }
 96 | 
 97 | /* good
 98 | .usernameprofile {
 99 | }
100 | 
101 | ------------------------------------------
102 | 
103 | first assignment css Elzero webschool
104 | 
105 | 
106 | .assign-1-shape-1 {
107 |     width: 500px;
108 |     background-color: blueviolet;
109 |     padding: 20px;
110 |     margin-left: auto;
111 |     margin-right: auto;
112 | }
113 | 
114 | .assign-1-shape-2 {
115 |     width: 500px;
116 |     background-color: rgb(138, 43, 226, 50%);
117 |     padding: 20px;
118 |     margin-left: auto;
119 |     margin-right: auto;
120 | }
121 | 
122 | .assign-1-shape-3 {
123 |     width: 500px;
124 |     background-color: rgb(138, 43, 226, 10%);
125 |     padding: 20px;
126 |     margin-left: auto;
127 |     margin-right: auto;
128 | }
129 | 
130 | 
131 | second assignment css Elzero webschool
132 | 
133 | 
134 | .assign-2-shape-1 {
135 |     width: 400px;
136 |     height: 400px;
137 |     background-image: url('css-assignment-5-8.png');
138 |     background-repeat: no-repeat;
139 | }
140 | 
141 | .assign-2-shape-2 {
142 |     width: 400px;
143 |     height: 400px;
144 |     background-image: url('css-assignment-5-8.png');
145 |     background-repeat: repeat-y;
146 | }
147 | 
148 | .assign-2-shape-3 {
149 |     width: 400px;
150 |     height: 400px;
151 |     background-image: url('css-assignment-5-8.png');
152 |     background-repeat: repeat-x;
153 | 
154 | }
155 | 
156 | .assign-2-shape-4 {
157 |     width: 400px;
158 |     height: 400px;
159 |     background-image: url('css-assignment-5-8.png');
160 |     background-repeat: repeat;
161 | 
162 | }
163 | 
164 | third assignment css Elzero webschool
165 | 
166 | .assign-3-shape-1 {
167 |     width: 400px;
168 |     height: 400px;
169 |     background-image: url('css-assignment-5-8.png');
170 |     background-repeat: no-repeat;
171 | }
172 | 
173 | .assign-3-shape-2 {
174 |     width: 400px;
175 |     height: 400px;
176 |     background-image: url('css-assignment-5-8.png');
177 |     background-repeat: repeat-y;
178 |     background-position: right;
179 | }
180 | 
181 | .assign-3-shape-3 {
182 |     width: 400px;
183 |     height: 400px;
184 |     background-image: url('css-assignment-5-8.png');
185 |     background-repeat: repeat-x;
186 |     background-position: bottom;
187 | }
188 | 
189 | .assign-3-shape-4 {
190 |     width: 400px;
191 |     height: 400px;
192 |     background-image: url('css-assignment-5-8.png');
193 |     background-repeat: repeat;
194 | }
195 | 
196 | fourth assignment css Elzero webschool
197 | 
198 | .assign-4-shape-1 {
199 |     width: 400px;
200 |     height: 400px;
201 |     background-image: url('css-assignment-5-8.png');
202 |     background-repeat: no-repeat;
203 |     background-size: 80% 80%;
204 | }
205 | 
206 | .assign-4-shape-2 {
207 |     width: 400px;
208 |     height: 400px;
209 |     background-image: url('css-assignment-5-8.png');
210 |     background-repeat: repeat-y;
211 |     background-position: right;
212 |     background-size: 80% 100%;
213 | }
214 | 
215 | .assign-4-shape-3 {
216 |     width: 400px;
217 |     height: 400px;
218 |     background-image: url('css-assignment-5-8.png');
219 |     background-repeat: repeat-x;
220 |     background-position: bottom;
221 |     background-size: 100% 80%;
222 | }
223 | 
224 | .assign-4-shape-4 {
225 |     width: 400px;
226 |     height: 400px;
227 |     background-image: url('css-assignment-5-8.png');
228 |     background-repeat: no-repeat;
229 |     background-size: 50% 50%;
230 |     background-position: bottom right;
231 | }
232 | 
233 | 
234 | first assignment css Elzero webschool
235 | 
236 | .Shape-1 {
237 |     display: inline-block;
238 |     border: 5px solid red;
239 |     outline: 5px solid black;
240 | }
241 | 
242 | .Shape-2 {
243 |     display: inline-block;
244 |     border-width: 5px;
245 |     border-style: solid;
246 |     border-color: blue green blue green;
247 |     outline: 5px solid black;
248 | }
249 | 
250 | .Shape-3 {
251 |     display: inline-block;
252 |     border-width: 5px;
253 |     border-style: dashed;
254 |     border-color: red green blue yellow;
255 |     outline: 5px solid black;
256 | }
257 | 
258 | 
259 | second assignment css Elzero webschool
260 | 
261 | div {
262 |     margin-top: 20px;
263 | }
264 | 
265 | .Shape-1 {
266 |     width: 400px;
267 |     background-color: #EEE;
268 |     border-left: 5px;
269 |     border-left-color: crimson;
270 |     border-style: solid;
271 |     border-top-color: #EEE;
272 |     outline: #EEE solid 5px;
273 |     border-bottom-color: #EEE;
274 |     border-right-color: #EEE;
275 |     padding: 0px 5px;
276 | 
277 | }
278 | 
279 | .Shape-2 {
280 |     width: 400px;
281 |     background-color: #EEE;
282 |     border-left: 5px;
283 |     border-left-color: crimson;
284 |     border-style: solid;
285 |     border-top-color: #EEE;
286 |     outline: #EEE solid 5px;
287 |     border-bottom-color: #EEE;
288 |     border-right-color: #EEE;
289 |     padding: 0px 5px;
290 |     visibility: hidden;
291 | }
292 | 
293 | .Shape-3 {
294 |     width: 400px;
295 |     background-color: #EEE;
296 |     border-left: 5px;
297 |     border-left-color: aqua;
298 |     border-style: solid;
299 |     border-top-color: #EEE;
300 |     outline: #EEE solid 5px;
301 |     border-bottom-color: #EEE;
302 |     border-right-color: #EEE;
303 |     padding: 0px 5px;
304 | }
305 | 
306 | first assignment css Elzero webschool
307 | 
308 | .parent div.child span {
309 |     color: red;
310 | }
311 | 
312 | .parent .title {
313 |     color: blue;
314 | }
315 | 
316 | div p,
317 | div.title {
318 |     color: green;
319 | }
320 | 
321 | second assignment css Elzero webschool
322 | 
323 | div {
324 |     background-color: brown;
325 |     max-width: 400px;
326 |     margin-top: 5px;
327 |     height: 30px;
328 |     width: fit-content;
329 |     color: white;
330 |     overflow: hidden;
331 | 
332 | }
333 | 
334 | */
335 | 


--------------------------------------------------------------------------------
/style2.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | 
  3 | First assignment css Elzero webschool
  4 | 
  5 | 
  6 | Any Element With Class Title 
  7 | .title {
  8 | }
  9 | 
 10 | /* Any Element With id nav 
 11 | #nav {
 12 | }
 13 | 
 14 | /* Any Element With tag div 
 15 | div {
 16 | }
 17 | 
 18 | /* Any Element With tag h2 
 19 | h2 {
 20 | }
 21 | 
 22 | second assignment css Elzero webschool
 23 | 
 24 | <!-- external style -->
 25 | <link rel="stylesheet" href="css/file.css" />
 26 | 
 27 | <!-- internal style -->
 28 | <style>
 29 | p {
 30 |   color: red;
 31 | }
 32 | </style>
 33 | 
 34 | <!-- inline style -->
 35 | <p style="color: blue;">This Is Our Paragraph</p>
 36 | 
 37 | third assignment css Elzero webschool
 38 | <link rel="stylesheet" href="master.css" />
 39 | 
 40 | fourth assignment css Elzero webschool
 41 | 
 42 | <link rel="stylesheet" href="main/master.css" />
 43 | 
 44 | fifth assignment css Elzero webschool
 45 | 
 46 | 
 47 | /* valid 
 48 | ._user-name {
 49 | }
 50 | 
 51 | /* valid 
 52 | .-user-name {
 53 | }
 54 | 
 55 | /* valid 
 56 | .-user-name {
 57 | }
 58 | 
 59 | /* not valid 
 60 | .1user-name {
 61 | }
 62 | 
 63 | /* not valid 
 64 | .@user-name {
 65 | }
 66 | 
 67 | /* not valid 
 68 | .user@name {
 69 | }
 70 | 
 71 | /* valid 
 72 | ._user10name {
 73 | }
 74 | 
 75 | /* valid 
 76 | .u {
 77 | }
 78 | 
 79 | sixth assignment css Elzero webschool
 80 | 
 81 | /* bad 
 82 | .USERNAME {
 83 | }
 84 | 
 85 | /* bad 
 86 | .UserName {
 87 | }
 88 | 
 89 | /* good 
 90 | .user-name {
 91 | }
 92 | 
 93 | /* bad 
 94 | .userName {
 95 | }
 96 | 
 97 | /* good
 98 | .usernameprofile {
 99 | }
100 | 
101 | ------------------------------------------
102 | 
103 | first assignment css Elzero webschool
104 | 
105 | 
106 | .assign-1-shape-1 {
107 |     width: 500px;
108 |     background-color: blueviolet;
109 |     padding: 20px;
110 |     margin-left: auto;
111 |     margin-right: auto;
112 | }
113 | 
114 | .assign-1-shape-2 {
115 |     width: 500px;
116 |     background-color: rgb(138, 43, 226, 50%);
117 |     padding: 20px;
118 |     margin-left: auto;
119 |     margin-right: auto;
120 | }
121 | 
122 | .assign-1-shape-3 {
123 |     width: 500px;
124 |     background-color: rgb(138, 43, 226, 10%);
125 |     padding: 20px;
126 |     margin-left: auto;
127 |     margin-right: auto;
128 | }
129 | 
130 | 
131 | second assignment css Elzero webschool
132 | 
133 | 
134 | .assign-2-shape-1 {
135 |     width: 400px;
136 |     height: 400px;
137 |     background-image: url('css-assignment-5-8.png');
138 |     background-repeat: no-repeat;
139 | }
140 | 
141 | .assign-2-shape-2 {
142 |     width: 400px;
143 |     height: 400px;
144 |     background-image: url('css-assignment-5-8.png');
145 |     background-repeat: repeat-y;
146 | }
147 | 
148 | .assign-2-shape-3 {
149 |     width: 400px;
150 |     height: 400px;
151 |     background-image: url('css-assignment-5-8.png');
152 |     background-repeat: repeat-x;
153 | 
154 | }
155 | 
156 | .assign-2-shape-4 {
157 |     width: 400px;
158 |     height: 400px;
159 |     background-image: url('css-assignment-5-8.png');
160 |     background-repeat: repeat;
161 | 
162 | }
163 | 
164 | third assignment css Elzero webschool
165 | 
166 | .assign-3-shape-1 {
167 |     width: 400px;
168 |     height: 400px;
169 |     background-image: url('css-assignment-5-8.png');
170 |     background-repeat: no-repeat;
171 | }
172 | 
173 | .assign-3-shape-2 {
174 |     width: 400px;
175 |     height: 400px;
176 |     background-image: url('css-assignment-5-8.png');
177 |     background-repeat: repeat-y;
178 |     background-position: right;
179 | }
180 | 
181 | .assign-3-shape-3 {
182 |     width: 400px;
183 |     height: 400px;
184 |     background-image: url('css-assignment-5-8.png');
185 |     background-repeat: repeat-x;
186 |     background-position: bottom;
187 | }
188 | 
189 | .assign-3-shape-4 {
190 |     width: 400px;
191 |     height: 400px;
192 |     background-image: url('css-assignment-5-8.png');
193 |     background-repeat: repeat;
194 | }
195 | 
196 | fourth assignment css Elzero webschool
197 | 
198 | .assign-4-shape-1 {
199 |     width: 400px;
200 |     height: 400px;
201 |     background-image: url('css-assignment-5-8.png');
202 |     background-repeat: no-repeat;
203 |     background-size: 80% 80%;
204 | }
205 | 
206 | .assign-4-shape-2 {
207 |     width: 400px;
208 |     height: 400px;
209 |     background-image: url('css-assignment-5-8.png');
210 |     background-repeat: repeat-y;
211 |     background-position: right;
212 |     background-size: 80% 100%;
213 | }
214 | 
215 | .assign-4-shape-3 {
216 |     width: 400px;
217 |     height: 400px;
218 |     background-image: url('css-assignment-5-8.png');
219 |     background-repeat: repeat-x;
220 |     background-position: bottom;
221 |     background-size: 100% 80%;
222 | }
223 | 
224 | .assign-4-shape-4 {
225 |     width: 400px;
226 |     height: 400px;
227 |     background-image: url('css-assignment-5-8.png');
228 |     background-repeat: no-repeat;
229 |     background-size: 50% 50%;
230 |     background-position: bottom right;
231 | }
232 | 
233 | 
234 | first assignment css Elzero webschool
235 | 
236 | .Shape-1 {
237 |     display: inline-block;
238 |     border: 5px solid red;
239 |     outline: 5px solid black;
240 | }
241 | 
242 | .Shape-2 {
243 |     display: inline-block;
244 |     border-width: 5px;
245 |     border-style: solid;
246 |     border-color: blue green blue green;
247 |     outline: 5px solid black;
248 | }
249 | 
250 | .Shape-3 {
251 |     display: inline-block;
252 |     border-width: 5px;
253 |     border-style: dashed;
254 |     border-color: red green blue yellow;
255 |     outline: 5px solid black;
256 | }
257 | 
258 | 
259 | second assignment css Elzero webschool
260 | 
261 | div {
262 |     margin-top: 20px;
263 | }
264 | 
265 | .Shape-1 {
266 |     width: 400px;
267 |     background-color: #EEE;
268 |     border-left: 5px;
269 |     border-left-color: crimson;
270 |     border-style: solid;
271 |     border-top-color: #EEE;
272 |     outline: #EEE solid 5px;
273 |     border-bottom-color: #EEE;
274 |     border-right-color: #EEE;
275 |     padding: 0px 5px;
276 | 
277 | }
278 | 
279 | .Shape-2 {
280 |     width: 400px;
281 |     background-color: #EEE;
282 |     border-left: 5px;
283 |     border-left-color: crimson;
284 |     border-style: solid;
285 |     border-top-color: #EEE;
286 |     outline: #EEE solid 5px;
287 |     border-bottom-color: #EEE;
288 |     border-right-color: #EEE;
289 |     padding: 0px 5px;
290 |     visibility: hidden;
291 | }
292 | 
293 | .Shape-3 {
294 |     width: 400px;
295 |     background-color: #EEE;
296 |     border-left: 5px;
297 |     border-left-color: aqua;
298 |     border-style: solid;
299 |     border-top-color: #EEE;
300 |     outline: #EEE solid 5px;
301 |     border-bottom-color: #EEE;
302 |     border-right-color: #EEE;
303 |     padding: 0px 5px;
304 | }
305 | 
306 | first assignment css Elzero webschool
307 | 
308 | .parent div.child span {
309 |     color: red;
310 | }
311 | 
312 | .parent .title {
313 |     color: blue;
314 | }
315 | 
316 | div p,
317 | div.title {
318 |     color: green;
319 | }
320 | 
321 | second assignment css Elzero webschool
322 | 
323 | div {
324 |     background-color: brown;
325 |     max-width: 400px;
326 |     margin-top: 5px;
327 |     height: 30px;
328 |     width: fit-content;
329 |     color: white;
330 |     overflow: hidden;
331 | 
332 | }
333 | 
334 | first assignment css Elzero webschool
335 | 
336 | div {
337 |     text-shadow: 1px 0.5px red, 2px 1px blue, 3px 1.5px purple;
338 |     font-family: sans-serif;
339 |     letter-spacing: 1px;
340 | }
341 | 
342 | second assignment css Elzero webschool
343 | 
344 | .one {
345 |     text-transform: uppercase;
346 | }
347 | 
348 | .two {
349 |     text-transform: capitalize;
350 | }
351 | 
352 | .three {
353 |     text-transform: lowercase;
354 | }
355 | 
356 | .one, .two, .three {
357 |     text-align: center;
358 | }
359 | 
360 | third assignment css Elzero webschool
361 | 
362 | div {
363 |     width: 400px;
364 |     margin: auto;
365 |     background-color: #EEE;
366 |     word-break: break-all;
367 |     padding: 20px;
368 | }
369 | 
370 | .........................
371 | 
372 | div {
373 |     width: 400px;
374 |     background-color: #EEE;
375 |     padding: 20px;
376 |     white-space: nowrap;
377 |     overflow: hidden;
378 | }
379 | 
380 | .........................
381 | 
382 | div {
383 |     width: 400px;
384 |     background-color: #EEE;
385 |     padding: 20px;
386 |     white-space: nowrap;
387 |     overflow: hidden;
388 |     text-overflow: ellipsis;
389 | }
390 | 
391 | ..........................
392 | 
393 | fourth assignment css Elzero webschool
394 | 
395 | a {
396 |     display: block;
397 |     margin: auto;
398 |     width: fit-content;
399 |     text-transform: capitalize;
400 |     font-family: sans-serif;
401 |     text-decoration: none;
402 |     background-color: #318f8f;
403 |     padding: 5px 10px;
404 |     color: white;
405 |     border-bottom: 5px solid #114949;
406 | }
407 | 
408 | 
409 | First assignment css Elzero webschool
410 | 
411 | 
412 | div {
413 |     border: 3px solid orangered;
414 |     text-align: center;
415 |     padding: 20px 25px;
416 | }
417 | 
418 | p {
419 |     border: inherit;
420 |     padding: inherit;
421 |     background-color: #EEE;
422 |     font-size: 20px;
423 | }
424 | 
425 | 
426 | 
427 | Second assignment css Elzero webschool
428 | 
429 | 
430 |     <link rel="preconnect" href="https://fonts.googleapis.com" />
431 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
432 |     <link
433 |       href="https://fonts.googleapis.com/css2?family=Cairo:wght@700&display=swap"
434 |       rel="stylesheet"
435 |     />
436 | 
437 |     <link
438 |       href="https://fonts.googleapis.com/css2?family=Jomhuria&display=swap"
439 |       rel="stylesheet"
440 |     />
441 | 
442 | 
443 | 
444 | .first {
445 |     font-family: 'Open Sans';
446 |     font-weight: 300;
447 |     font-style: italic;
448 | }
449 | 
450 | .second {
451 |     font-family: 'Cairo', sans-serif;
452 | }
453 | 
454 | .third {
455 |     font-family: 'Jomhuria';
456 | }
457 | 
458 | Third assignment css Elzero webschool
459 | 
460 | html {
461 |     font-size: 20px;
462 | }
463 | 
464 | .first {
465 |     font-size: 2.5rem;
466 | }
467 | 
468 | .second {
469 |     font-size: 2rem;
470 | }
471 | 
472 | .third {
473 |     font-size: 1.5rem;
474 | }
475 | 
476 | 
477 | first assignment css Elzero webschool
478 | 
479 |   <div class="parent">
480 |       <div class="full">Full Width</div>
481 | 
482 |       <div class="one">
483 |         <div>1/3</div>
484 |         <div>1/3</div>
485 |         <div>1/3</div>
486 |       </div>
487 | 
488 |       <div class="two">
489 |         <div>1/2</div>
490 |         <div>1/2</div>
491 |       </div>
492 |       <div class="three">
493 |         <div>1/4</div>
494 |         <div>1/4</div>
495 |         <div>1/4</div>
496 |         <div>1/4</div>
497 |       </div>
498 |       <p class="clear"></p>
499 |     </div>
500 | 
501 | 
502 | 
503 | 
504 | body {
505 |     margin: 0;
506 | }
507 | 
508 | 
509 | .parent {
510 |     background-color: #eeeeee28;
511 |     width: 800px;
512 |     text-align: center;
513 |     font-weight: bold;
514 |     border: 3px solid #eeeeee28;
515 | 
516 | }
517 | 
518 | .full {
519 |     padding-top: 20px;
520 |     padding-bottom: 20px;
521 |     width: calc((100% - 30px) / 1);
522 |     margin-bottom: 15px;
523 |     background-color: #eeeeee;
524 |     margin-left: auto;
525 |     margin-right: auto;
526 |     margin-top: 15px;
527 | 
528 | 
529 | }
530 | 
531 | .one div {
532 |     margin-bottom: 15px;
533 |     padding-top: 20px;
534 |     padding-bottom: 20px;
535 |     float: left;
536 |     margin-left: 15px;
537 |     background-color: #eeeeee;
538 |     width: calc((100% - 60px) / 3);
539 | }
540 | 
541 | 
542 | .two div {
543 |     margin-bottom: 15px;
544 |     padding-top: 20px;
545 |     padding-bottom: 20px;
546 |     float: left;
547 |     margin-left: 15px;
548 |     background-color: #eeeeee;
549 |     width: calc((100% - 45px) / 2);
550 | }
551 | 
552 | .three div {
553 |     margin-bottom: 15px;
554 |     padding-top: 20px;
555 |     padding-bottom: 20px;
556 |     float: left;
557 |     margin-left: 15px;
558 |     background-color: #eeeeee;
559 |     width: calc((100% - 75px) / 4);
560 | }
561 | 
562 | 
563 | .clear {
564 |     clear: both;
565 | }
566 | 
567 | 
568 | 
569 | second assignment css Elzero webschool
570 | 
571 | div {
572 |     margin: 20px auto;
573 |     width: 300px;
574 |     font-weight: bold;
575 |     font-size: 1rem;
576 |     padding: 20px;
577 |     background-color: #eee;
578 |     color: black;
579 | }
580 | 
581 | .normal {
582 |     opacity: 1;
583 | }
584 | 
585 | .one {
586 |     opacity: 0.1;
587 | 
588 | }
589 | 
590 | .two {
591 |     opacity: 0.1;
592 | }
593 | 
594 | 
595 | */
596 | 


--------------------------------------------------------------------------------
/style3.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | first assignment css Elzero webschool
  3 | 
  4 | div {
  5 |     width: 100px;
  6 |     height: 100px;
  7 |     position: absolute;
  8 | }
  9 | 
 10 | .green {
 11 |     background-color: green;
 12 |     z-index: 3;
 13 |     left: 25px;
 14 |     top: 25px;
 15 | }
 16 | 
 17 | .blue {
 18 |     background-color: blue;
 19 |     z-index: 2;
 20 |     left: 20px;
 21 |     top: 20px;
 22 | 
 23 | }
 24 | 
 25 | .red {
 26 |     background-color: red;
 27 |     z-index: 4;
 28 |     left: 30px;
 29 |     top: 30px;
 30 | }
 31 | 
 32 | .black {
 33 |     background-color: black;
 34 |     z-index: 1;
 35 |     top: 25px;
 36 |     left: 20px;
 37 | }
 38 | 
 39 | second assignment css Elzero webschool
 40 | 
 41 | div {
 42 |     width: 400px;
 43 |     padding: 30px;
 44 |     margin: auto;
 45 |     margin-top: 50px;
 46 |     border-top: 2px solid red;
 47 |     border-bottom: 2px solid red;
 48 |     border-left: 2px solid #2aa5cf;
 49 |     border-right: 2px solid #2aa5cf;
 50 |     position: relative;
 51 | 
 52 | }
 53 | 
 54 | span {
 55 |     position: absolute;
 56 |     color: white;
 57 | }
 58 | 
 59 | .top-left {
 60 |     padding: 3px 7px;
 61 |     background-color: rgb(0, 183, 255);
 62 |     border-right: 2px solid red;
 63 |     left: -12px;
 64 |     top: -12px;
 65 | }
 66 | 
 67 | .bottom-left {
 68 |     padding: 3px 7px;
 69 |     background-color: #2aa5cf;
 70 |     border-right: 2px solid red;
 71 |     left: -12px;
 72 |     bottom: -12px;
 73 | }
 74 | 
 75 | .top-right {
 76 |     padding: 3px 7px;
 77 |     background-color: #2aa5cf;
 78 |     border-left: 2px solid red;
 79 |     top: -12px;
 80 |     right: -12px;
 81 | }
 82 | 
 83 | .bottom-right {
 84 |     padding: 3px 7px;
 85 |     background-color: #2aa5cf;
 86 |     border-left: 2px solid red;
 87 |     bottom: -12px;
 88 |     right: -12px;
 89 | }
 90 | 
 91 | third assignment css Elzero webschool
 92 | 
 93 |   <ul class="parent">
 94 |       <li class="html">
 95 |         HTML
 96 |         <ol>
 97 |           <li>Slim</li>
 98 |           <li>Pugjs</li>
 99 |           <li>HAML</li>
100 |         </ol>
101 |       </li>
102 | 
103 |       <li class="css">
104 |         CSS
105 |         <ol>
106 |           <li>SASS</li>
107 |           <li>LESS</li>
108 |           <li>PostCSS</li>
109 |         </ol>
110 |       </li>
111 | 
112 |       <li class="js">
113 |         JavaScript
114 |         <ul>
115 |           <li>Vuejs</li>
116 |           <li>Sveltejs</li>
117 |         </ul>
118 |       </li>
119 |     </ul>
120 | 
121 | 
122 |     .parent {
123 |     width: 400px;
124 |     margin: auto;
125 |     list-style: none;
126 | }
127 | 
128 | .html, .css, .js {
129 |     background-color: #eee;
130 |     padding-bottom: 7px;
131 |     padding-top: 10px;
132 |     padding-left: 7px;
133 |     margin-bottom: 20px;
134 | }
135 | 
136 | .css ol {
137 |     list-style-type: upper-roman;
138 | }
139 | 
140 | ol {
141 |     padding-left: 25px;
142 | 
143 | }
144 | 
145 | .html li, .css li, .js li {
146 |     background-color: white;
147 |     margin: 5px 10px;
148 |     padding: 5px 10px;
149 | }
150 | 
151 | fourth assignment css Elzero webschool
152 | 
153 |     <p>Developers Rating</p>
154 |     <table>
155 |       <thead>
156 |         <tr>
157 |           <th>Avatar</th>
158 |           <th>Group</th>
159 |           <th>Name</th>
160 |           <th>Points</th>
161 |           <th>Control</th>
162 |         </tr>
163 |       </thead>
164 |       <tbody>
165 |         <tr>
166 |           <td><img src="https://picsum.photos/50" alt="" /></td>
167 |           <td>Ninja</td>
168 |           <td>ahmed mohamed</td>
169 |           <td>120</td>
170 |           <td>
171 |             <span class="view">View</span><span class="delete">Delete</span>
172 |           </td>
173 |         </tr>
174 |         <tr>
175 |           <td><img src="https://picsum.photos/50" alt="" /></td>
176 |           <td rowspan="2">Shades</td>
177 |           <td>shady nabil</td>
178 |           <td>180</td>
179 |           <td>
180 |             <span class="view">View</span><span class="delete">Delete</span>
181 |           </td>
182 |         </tr>
183 | 
184 |         <tr>
185 |           <td><img src="https://picsum.photos/50" alt="" /></td>
186 |           <td>eman mohamed</td>
187 |           <td>160</td>
188 | 
189 |           <td>
190 |             <span class="view">View</span><span class="delete">Delete</span>
191 |           </td>
192 |         </tr>
193 | 
194 |         <tr>
195 |           <td><img src="https://picsum.photos/50" alt="" /></td>
196 |           <td rowspan="2">Valhala</td>
197 |           <td>mohamed ibrahim</td>
198 |           <td>190</td>
199 |           <td>
200 |             <span class="view">View</span><span class="delete">Delete</span>
201 |           </td>
202 |         </tr>
203 | 
204 |         <tr>
205 |           <td><img src="https://picsum.photos/50" alt="" /></td>
206 |           <td>nour atef</td>
207 |           <td>110</td>
208 |           <td>
209 |             <span class="view">View</span><span class="delete">Delete</span>
210 |           </td>
211 |         </tr>
212 | 
213 |         <tr>
214 |           <td><img src="https://picsum.photos/50" alt="" /></td>
215 |           <td>Union</td>
216 |           <td>mahmoud adel</td>
217 |           <td>90</td>
218 |           <td>
219 |             <span class="view">View</span><span class="delete">Delete</span>
220 |           </td>
221 |         </tr>
222 |       </tbody>
223 |     </table>
224 | 
225 | p {
226 |     text-align: center;
227 |     font-weight: bold;
228 | }
229 | 
230 | table {
231 |     margin: auto;
232 |     border-spacing: 1px;
233 |     font-family: sans-serif;
234 |     font-size: small;
235 |     width: 600px;
236 |     text-align: center;
237 | }
238 | 
239 | 
240 | tbody {
241 |     background-color: #eee;
242 | }
243 | 
244 | tbody tr {
245 |     height: 76px;
246 | }
247 | 
248 | th {
249 |     background-color: #282a35bd;
250 |     color: white;
251 |     padding: 10px;
252 | 
253 | }
254 | 
255 | .view {
256 |     padding: 2px 5px;
257 |     background-color: #2aa5cf;
258 |     margin-right: 5px;
259 | }
260 | 
261 | .view, .delete {
262 |     color: white;
263 |     cursor: pointer;
264 | }
265 | 
266 | .delete {
267 |     padding: 2px 5px;
268 |     background-color: #e91e63;
269 | }
270 | 
271 | 
272 | first assignment css Elzero webschool
273 | 
274 | 
275 | div {
276 |     margin: auto;
277 |     width: 300px;
278 |     height: 60px;
279 |     text-align: center;
280 | 
281 | }
282 | 
283 | div:first-child {
284 |     background-color: #eee;
285 |     line-height: 60px;
286 | }
287 | 
288 | div:last-child {
289 |     background-color: #eee;
290 |     line-height: 60px;
291 | }
292 | 
293 | div:not(:first-child, :last-child) {
294 |     background-color: red;
295 |     margin-top: 20px;
296 |     margin-bottom: 20px;
297 | }
298 | 
299 | second assignment css Elzero webschool
300 | 
301 | div {
302 |     margin: auto;
303 |     width: 300px;
304 |     height: 50px;
305 |     line-height: 50px;
306 |     text-align: center;
307 |     background-color: #eee;
308 |     position: relative;
309 | }
310 | 
311 | div::first-letter {
312 |     position: absolute;
313 |     background-color: red;
314 |     padding: 5px;
315 |     color: white;
316 |     display: inline-block;
317 |     margin-left: -42px;
318 | 
319 | 
320 | }
321 | 
322 | third assignment css Elzero webschool
323 | 
324 | p {
325 |     background-color: #eee;
326 |     padding: 17px;
327 |     border-left: 3px solid #ff00bf;
328 |     font-family: sans-serif;
329 |     width: 400px;
330 |     margin-left: 200px;
331 |     position: relative;
332 | }
333 | 
334 | p:first-child::before {
335 |     content: attr(data-person);
336 |     display: inline-block;
337 |     background-color: #eee;
338 |     position: absolute;
339 |     left: -100px;
340 |     top: 0px;
341 |     padding: 10px;
342 |     margin-top: 7px;
343 | 
344 | 
345 | }
346 | 
347 | p:first-child::after {
348 |     content: "";
349 |     width: 0;
350 |     height: 0;
351 |     position: absolute;
352 |     left: -30px;
353 |     top: 40%;
354 |     margin-top: -10px;
355 |     border-width: 15px;
356 |     border-style: solid;
357 |     border-color: transparent #ff00bf transparent transparent;
358 | 
359 | }
360 | 
361 | 
362 | 
363 | 
364 | 
365 | p:not(:first-child, :last-child)::before {
366 |     content: attr(data-person);
367 |     display: inline-block;
368 |     background-color: #eee;
369 |     position: absolute;
370 |     left: -100px;
371 |     top: 0px;
372 |     padding: 10px;
373 |     margin-top: 7px;
374 | 
375 | }
376 | 
377 | p:not(:first-child, :last-child)::after {
378 |     content: "";
379 |     width: 0;
380 |     height: 0;
381 |     position: absolute;
382 |     left: -30px;
383 |     top: 40%;
384 |     margin-top: -10px;
385 |     border-width: 15px;
386 |     border-style: solid;
387 |     border-color: transparent #ff00bf transparent transparent;
388 | }
389 | 
390 | 
391 | 
392 | p:last-child::before {
393 |     content: attr(data-person);
394 |     display: inline-block;
395 |     background-color: #eee;
396 |     position: absolute;
397 |     left: -100px;
398 |     top: 0px;
399 |     padding: 10px;
400 |     margin-top: 7px;
401 | 
402 | 
403 | }
404 | 
405 | p:last-child:after {
406 |     content: "";
407 |     width: 0;
408 |     height: 0;
409 |     position: absolute;
410 |     left: -30px;
411 |     top: 40%;
412 |     margin-top: -10px;
413 |     border-width: 15px;
414 |     border-style: solid;
415 |     border-color: transparent #ff00bf transparent transparent;
416 | }
417 | 
418 | fourth assignment css Elzero webschool
419 | 
420 | p {
421 |   background-color: #eee;
422 |   width: 300px;
423 |   margin: auto;
424 |   margin-bottom: 5px;
425 |   padding: 10px;
426 |   border-right: 3px solid red;
427 |   counter-increment: members-counter;
428 | }
429 | 
430 | p::before {
431 |   content: counter(members-counter);
432 |   position: absolute;
433 |   background-color: red;
434 |   color: white;
435 |   padding: 10px;
436 |   text-align: center;
437 |   font-weight: bold;
438 |   margin-top: -10px;
439 |   margin-left: -35px;
440 | }
441 | 
442 | 
443 | 
444 | first assignment css Elzero webschool
445 | 
446 | 
447 | 
448 | * {
449 |   box-sizing: border-box;
450 | 
451 | }
452 | 
453 | div {
454 |   width: 100px;
455 |   height: 100px;
456 |   background-color: #eee;
457 |   border: 3px solid black;
458 |   float: left;
459 |   margin-top: 100px;
460 |   margin-left: calc((100% - 300px) / 4);
461 |   counter-increment: members-counter;
462 |   position: relative;
463 |   border-radius: 50%;
464 |   -webkit-border-radius: 50%;
465 |   -moz-border-radius: 50%;
466 |   -ms-border-radius: 50%;
467 |   -o-border-radius: 50%;
468 |   box-shadow: 4px 3px 0 2px #03a9f4, -4px -3px 0 2px #e91e63;
469 | }
470 | 
471 | div::before {
472 |   content: counter(members-counter);
473 |   position: absolute;
474 |   background-color: black;
475 |   color: white;
476 |   line-height: 25px;
477 |   width: 25px;
478 |   height: 25px;
479 |   text-align: center;
480 |   font-weight: bold;
481 |   border-radius: 50%;
482 |   -webkit-border-radius: 50%;
483 |   -moz-border-radius: 50%;
484 |   -ms-border-radius: 50%;
485 |   -o-border-radius: 50%;
486 |   left: 35px;
487 |   top: -15px;
488 | 
489 | }
490 | 
491 | div::after {
492 |   content: 'Element';
493 |   position: absolute;
494 |   left: 20px;
495 |   top: 35px
496 | }
497 | 
498 | second assignment css Elzero webschool
499 | 
500 | div {
501 |   box-sizing: border-box;
502 |   width: 100px;
503 |   height: 100px;
504 |   position: absolute;
505 |   top: 50%;
506 |   left: 50%;
507 |   transform: translate(-50%, -50%);
508 |   border-radius: 50%;
509 |   -webkit-border-radius: 50%;
510 |   -moz-border-radius: 50%;
511 |   -ms-border-radius: 50%;
512 |   -o-border-radius: 50%;
513 |   border-top-left-radius: 10px 20px;
514 |   border-bottom-right-radius: 10px 20px;
515 |   border: 1px solid transparent;
516 |   box-shadow: 4px 15px 35px 2px #4c4747 inset;
517 |   border: 1px solid rgba(0, 0, 0, 0.185);
518 | 
519 | }
520 | 
521 | third assignment css Elzero webschool
522 | 
523 | 
524 |     <div class="parent">
525 |       <div class="basic">
526 |         <h4>Basic</h4>
527 |         <div class="free">Free</div>
528 |       </div>
529 |       <div class="seperator"></div>
530 |       <div class="pro">
531 |         <h4>Pro</h4>
532 |         <div class="notfree">$30</div>
533 |       </div>
534 |       <p class="fix"></p>
535 |     </div>
536 | 
537 | 
538 | * {
539 |   box-sizing: border-box;
540 |   font-family: sans-serif;
541 | }
542 | 
543 | .parent {
544 |   width: 550px;
545 |   height: 250px;
546 |   margin: auto;
547 | }
548 | 
549 | .basic, .pro {
550 |   width: 200px;
551 |   height: 220px;
552 |   background-color: #eee;
553 |   float: left;
554 |   margin-left: calc((100% - 400px) / 3);
555 |   margin-top: 25px;
556 | }
557 | 
558 | .basic h4, .pro h4 {
559 |   width: fit-content;
560 |   background-color: #03a9f4;
561 |   color: white;
562 |   padding: 5px 60px;
563 |   margin: 0px auto;
564 |   margin-top: 15px;
565 |   border-radius: 7px;
566 |   -webkit-border-radius: 7px;
567 |   -moz-border-radius: 7px;
568 |   -ms-border-radius: 7px;
569 |   -o-border-radius: 7px;
570 | 
571 | }
572 | 
573 | .free, .notfree {
574 |   width: 132px;
575 |   height: 132px;
576 |   background-color: #d5d0d0;
577 |   border-radius: 50%;
578 |   line-height: 132px;
579 |   text-align: center;
580 |   font-size: 30px;
581 |   margin: 20px auto;
582 |   -webkit-border-radius: 50%;
583 |   -moz-border-radius: 50%;
584 |   -ms-border-radius: 50%;
585 |   -o-border-radius: 50%;
586 | 
587 | }
588 | 
589 | .seperator {
590 |   font-size: 10px;
591 |   height: 220px;
592 |   width: 1px;
593 |   background-color: #03a9f4;
594 |   position: absolute;
595 |   left: 49.75%;
596 |   top: 33px;
597 | }
598 | 
599 | 
600 | .seperator::before {
601 |   content: "Or";
602 |   position: relative;
603 |   top: 45%;
604 |   left: -10px;
605 |   background-color: #03a9f4;
606 |   padding: 5px;
607 |   color: white;
608 |   border-radius: 50%;
609 |   -webkit-border-radius: 50%;
610 |   -moz-border-radius: 50%;
611 |   -ms-border-radius: 50%;
612 |   -o-border-radius: 50%;
613 | }
614 | 
615 | p {
616 |   clear: both;
617 | }
618 | 
619 | 
620 | first assignment css Elzero webschool
621 | 
622 |  <div class="first">Will Go Up On Hover in Half Second</div>
623 |     <div class="second">Will Go Down After Half Second</div>
624 | 
625 | .first {
626 |   background-color: #eee;
627 |   width: fit-content;
628 |   margin: auto;
629 |   margin-top: 80px;
630 |   padding: 30px 60px 280px 60px;
631 |   font-family: sans-serif;
632 |   transition: margin-top 0.5s cubic-bezier(0.4, 0, 1, 1) 0s;
633 |   -webkit-transition: margin-top 0.5s cubic-bezier(0.4, 0, 1, 1) 0s;
634 |   -moz-transition: margin-top 0.5s cubic-bezier(0.4, 0, 1, 1) 0s;
635 |   -ms-transition: margin-top 0.5s cubic-bezier(0.4, 0, 1, 1) 0s;
636 |   -o-transition: margin-top 0.5s cubic-bezier(0.4, 0, 1, 1) 0s;
637 | }
638 | 
639 | .second {
640 |   background-color: #bbafaf;
641 |   width: fit-content;
642 |   margin: auto;
643 |   padding: 15px 20px;
644 |   margin-top: -180px;
645 |   transition: margin-top 0.5s cubic-bezier(0.4, 0, 1, 1) 0.5s;
646 |   -webkit-transition: margin-top 0.5s cubic-bezier(0.4, 0, 1, 1) 0.5s;
647 |   -moz-transition: margin-top 0.5s cubic-bezier(0.4, 0, 1, 1) 0.5s;
648 |   -ms-transition: margin-top 0.5s cubic-bezier(0.4, 0, 1, 1) 0.5s;
649 |   -o-transition: margin-top 0.5s cubic-bezier(0.4, 0, 1, 1) 0.5s;
650 | }
651 | 
652 | 
653 | .first:hover {
654 |   margin-top: -5px;
655 | }
656 | 
657 | .first:hover+.second {
658 |   margin-top: -100px;
659 | }
660 | 
661 | 
662 | second assignment css Elzero webschool
663 | 
664 | div {
665 |   width: 400px;
666 |   margin: auto;
667 |   font-size: 20px !important;
668 |   background-color: #eee !important;
669 |   border: 1px solid #eee !important;
670 |   color: black !important;
671 |   font-family: sans-serif;
672 |   text-align: center;
673 | }
674 | 
675 | div::first-line {
676 |   visibility: hidden;
677 | }
678 | 
679 | div::before {
680 |   content: 'Elzero';
681 |   font-weight: bold;
682 |   display: inline-block;
683 | 
684 | }
685 | 
686 | 
687 | Third assignment css Elzero webschool
688 | 
689 | :root {
690 |   --mainColor: #009688;
691 |   --mainPadding: 10px;
692 | }
693 | 
694 | div {
695 |   border: 3px solid var(--mainColor, black);
696 |   color: var(--mainColor, red);
697 |   padding: var(--mainPadding, 10px);
698 |   margin-bottom: 10px;
699 | }
700 | 
701 | */
702 | 


--------------------------------------------------------------------------------
/style4.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | First assignment ELzero Web school 
  3 | 
  4 | div{
  5 |   width:100px;
  6 |   height:100px;
  7 |  margin:auto; 
  8 | background-color:#eee;
  9 | display:flex;
 10 |   align-items: center;
 11 |   justify-content:center;
 12 |   color:#E76F51;
 13 |   font-family:sans-serif;
 14 |   font-weight:bold;
 15 |   border-radius:50%;
 16 |   box-shadow:5px 0px 0px 0px #E76F51,
 17 |     -5px 0px 0px 0px  #1E90FF
 18 | ;
 19 | }
 20 | 
 21 | 
 22 | 
 23 | second assignment elzero 
 24 | 
 25 | * {
 26 |   -webkit-box-sizing: border-box;
 27 |   -moz-box-sizing: border-box;
 28 |   box-sizing: border-box;
 29 |   margin-top: 0;
 30 | 
 31 | }
 32 | 
 33 | .parent {
 34 |   width: 600px;
 35 |   background-color: #eee;
 36 |   height: 300px;
 37 |   margin: auto;
 38 |   display: flex;
 39 |   flex-wrap: wrap;
 40 |   align-content: space-between;
 41 | }
 42 | 
 43 | .parent div {
 44 |   width: 150px;
 45 |   background-color: red;
 46 |   text-align: center;
 47 |   margin-left: calc((100% - 450px) / 4);
 48 |   padding: 5px 20px;
 49 |   color: white;
 50 |   margin-top: 20px;
 51 |   margin-bottom: 20px;
 52 | }
 53 | 
 54 | 
 55 | 
 56 | third assignment elzero 
 57 | 
 58 | * {
 59 |   -webkit-box-sizing: border-box;
 60 |   -moz-box-sizing: border-box;
 61 |   box-sizing: border-box;
 62 |   margin-top: 0;
 63 | }
 64 | 
 65 | .parent {
 66 |   width: 600px;
 67 |   background-color: #eee;
 68 |   height: 300px;
 69 |   margin: auto;
 70 |   display: flex;
 71 |   flex-wrap: wrap;
 72 |   align-content: space-between;
 73 | }
 74 | 
 75 | .parent div {
 76 |   width: 150px;
 77 |   background-color: red;
 78 |   text-align: center;
 79 |   margin-left: calc((100% - 450px) / 4);
 80 |   padding: 5px 20px;
 81 |   color: white;
 82 |   margin-top: 10px;
 83 |   margin-bottom: 10px;
 84 |   display: flex;
 85 |   justify-content: center;
 86 |   align-items: center;
 87 | }
 88 | 
 89 | .one {
 90 |   order: 6;
 91 |   height: 30px;
 92 |   align-self: flex-end;
 93 | }
 94 | 
 95 | .two {
 96 |   order: 5;
 97 |   height: 130px;
 98 | }
 99 | 
100 | .three {
101 |   order: 2;
102 |   height: 30px;
103 | }
104 | 
105 | .four {
106 |   order: 3;
107 | 
108 | }
109 | 
110 | .five {
111 |   order: 4;
112 |   height: 130px;
113 | }
114 | 
115 | .six {
116 |   order: 1;
117 |   height: 130px;
118 | }
119 | */
120 | 


--------------------------------------------------------------------------------
/third.css:
--------------------------------------------------------------------------------
  1 | 
  2 |    /*                                               Flex Box – Parent – Justify Content 
  3 |    
  4 |    
  5 |   Flexible Box
  6 |   For Parent
  7 |   - display: flex => To Start Flexible Box
  8 |   - flex-direction: row => Default Value
  9 |   - flex-wrap: nowrap => Default Value
 10 |   - flex-flow: [Flex-Direction] + [Flex-Wrap]
 11 |   ---
 12 |   - justify-content: flex-start => Default Value
 13 | 
 14 | 
 15 | * {
 16 |   -webkit-box-sizing: border-box;
 17 |   -moz-box-sizing: border-box;
 18 |   box-sizing: border-box;
 19 | }
 20 | .flex {
 21 |   background-color: #eee;
 22 |   width: 600px;
 23 |   padding: 20px;
 24 |   margin: 20px auto;
 25 |   display: flex;
 26 |   flex-flow: row wrap;
 27 |   justify-content: center;
 28 | }
 29 | .flex div {
 30 |   background-color: #f00;
 31 |   color: white;
 32 |   width: 25%;
 33 |   text-align: center;
 34 |   padding: 20px;
 35 | }
 36 | .float {
 37 |   overflow: hidden;
 38 |   background-color: #eee;
 39 |   width: 600px;
 40 |   padding: 20px;
 41 |   margin: 20px auto;
 42 | }
 43 | .float div {
 44 |   background-color: #f00;
 45 |   color: white;
 46 |   float: right;
 47 |   width: 25%;
 48 |   text-align: center;
 49 |   padding: 20px;
 50 | }
 51 |    
 52 |    
 53 |                                                                       Flex Box Parent - Align Items
 54 |    
 55 |    
 56 | /*
 57 |   Flexible Box
 58 |   For Parent
 59 |   - display: flex => To Start Flexible Box
 60 |   - flex-direction: row => Default Value
 61 |   - flex-wrap: nowrap => Default Value
 62 |   - flex-flow: [Flex-Direction] + [Flex-Wrap]
 63 |   ---
 64 |   - justify-content: flex-start => Default Value
 65 |   - align-items: stretch => Default Value
 66 | 
 67 | 
 68 | * {
 69 |   -webkit-box-sizing: border-box;
 70 |   -moz-box-sizing: border-box;
 71 |   box-sizing: border-box;
 72 | }
 73 | .flex {
 74 |   background-color: #eee;
 75 |   width: 600px;
 76 |   padding: 20px;
 77 |   margin: 20px auto;
 78 |   display: flex;
 79 |   flex-flow: row wrap;
 80 |   justify-content: center;
 81 | }
 82 | .flex div {
 83 |   background-color: #f00;
 84 |   color: white;
 85 |   width: calc(100% / 3);
 86 |   text-align: center;
 87 |   padding: 20px;
 88 | }
 89 | .flex .one,
 90 | .float .one {
 91 |   height: 80px;
 92 | }
 93 | .float {
 94 |   overflow: hidden;
 95 |   background-color: #eee;
 96 |   width: 600px;
 97 |   padding: 20px;
 98 |   margin: 20px auto;
 99 | }
100 | .float div {
101 |   background-color: #f00;
102 |   color: white;
103 |   float: right;
104 |   width: calc(100% / 3);
105 |   text-align: center;
106 |   padding: 20px;
107 | }
108 | .center {
109 |   background-color: blue;
110 |   color: white;
111 |   width: 300px;
112 |   height: 200px;
113 |   display: flex;
114 |   justify-content: center;
115 |   align-items: center;
116 | }
117 | 
118 | 
119 |                                                               Flex Box – Parent – Align Content
120 |        
121 | /*
122 |   Flexible Box
123 |   For Parent
124 |   - display: flex => To Start Flexible Box
125 |   - flex-direction: row => Default Value
126 |   - flex-wrap: nowrap => Default Value
127 |   - flex-flow: [Flex-Direction] + [Flex-Wrap]
128 |   ---
129 |   - justify-content: flex-start => Default Value
130 |   - align-items: stretch => Default Value
131 |   - align-content: stretch => Default Value
132 | 
133 |   
134 | 
135 | * {
136 |   -webkit-box-sizing: border-box;
137 |   -moz-box-sizing: border-box;
138 |   box-sizing: border-box;
139 | }
140 | .flex {
141 |   background-color: #eee;
142 |   width: 600px;
143 |   height: 400px;
144 |   padding: 20px;
145 |   margin: 20px auto;
146 |   display: flex;
147 |   flex-wrap: wrap;
148 |   align-items: flex-start;
149 |   align-content: space-between;
150 | }
151 | .flex div {
152 |   background-color: #f00;
153 |   color: white;
154 |   width: calc(100% / 3);
155 |   text-align: center;
156 |   padding: 20px;
157 | }
158 | 
159 | 
160 |    
161 |                                                             Flex Box – Child – Grow, Shrink, Order
162 |     
163 |    /*
164 |   Flexible Box
165 |   For Parent
166 |   - display: flex => To Start Flexible Box
167 |   - flex-direction: row => Default Value
168 |   - flex-wrap: nowrap => Default Value
169 |   - flex-flow: [Flex-Direction] + [Flex-Wrap]
170 |   - justify-content: flex-start => Default Value
171 |   - align-items: stretch => Default Value
172 |   - align-content: stretch => Default Value
173 |   For Child
174 |   - flex-grow: 0 => Default Value
175 |   - flex-shrink: 1 => Default Value
176 |   - order: 0 => Default Value
177 | 
178 | 
179 | * {
180 |   -webkit-box-sizing: border-box;
181 |   -moz-box-sizing: border-box;
182 |   box-sizing: border-box;
183 | }
184 | .flex {
185 |   background-color: #eee;
186 |   width: 800px;
187 |   padding: 20px;
188 |   margin: 20px auto;
189 |   display: flex;
190 | }
191 | .flex div {
192 |   background-color: #f00;
193 |   color: white;
194 |   width: 80px;
195 |   text-align: center;
196 |   padding: 20px;
197 |   margin-right: 5px;
198 |   flex-grow: 1;
199 | }
200 |    
201 |                                                                   Flex Box – Child – Flex Basis, Flex Shorthand
202 |    
203 |     /*
204 |   Flexible Box
205 |   For Parent
206 |   - display: flex => To Start Flexible Box
207 |   - flex-direction: row => Default Value
208 |   - flex-wrap: nowrap => Default Value
209 |   - flex-flow: [Flex-Direction] + [Flex-Wrap]
210 |   - justify-content: flex-start => Default Value
211 |   - align-items: stretch => Default Value
212 |   - align-content: stretch => Default Value
213 |   For Child
214 |   - flex-grow: 0 => Default Value
215 |   - flex-shrink: 1 => Default Value
216 |   - order: 0 => Default Value
217 |   - flex-basis: auto => Default Value
218 |   - flex: [Flex Grow] [Flex Shrink] [Flex Basis] 0 1 Auto
219 | 
220 | 
221 | * {
222 |   -webkit-box-sizing: border-box;
223 |   -moz-box-sizing: border-box;
224 |   box-sizing: border-box;
225 | }
226 | .flex {
227 |   background-color: #eee;
228 |   width: 800px;
229 |   padding: 20px;
230 |   margin: 20px auto;
231 |   display: inline-flex;
232 | }
233 | .flex div {
234 |   background-color: #f00;
235 |   color: white;
236 |   width: 80px;
237 |   text-align: center;
238 |   padding: 20px;
239 |   margin-right: 5px;
240 |   flex-grow: 1;
241 | }
242 | .in {
243 |   display: inline-block;
244 | }
245 |    
246 |                                                                Flex Box Child - Align Self, Games, Task
247 |    
248 |    /*
249 |   Flexible Box
250 |   For Parent
251 |   - display: flex => To Start Flexible Box
252 |   - flex-direction: row => Default Value
253 |   - flex-wrap: nowrap => Default Value
254 |   - flex-flow: [Flex-Direction] + [Flex-Wrap]
255 |   - justify-content: flex-start => Default Value
256 |   - align-items: stretch => Default Value
257 |   - align-content: stretch => Default Value
258 |   For Child
259 |   - flex-grow: 0 => Default Value
260 |   - flex-shrink: 1 => Default Value
261 |   - order: 0 => Default Value
262 |   - flex-basis: auto => Default Value
263 |   - flex: [Flex Grow] [Flex Shrink] [Flex Basis] 0 1 Auto
264 |   - align-self: auto => Default Value
265 | 
266 | 
267 | * {
268 |   -webkit-box-sizing: border-box;
269 |   -moz-box-sizing: border-box;
270 |   box-sizing: border-box;
271 | }
272 | .flex {
273 |   background-color: #eee;
274 |   width: 800px;
275 |   height: 300px;
276 |   padding: 20px;
277 |   margin: 20px auto;
278 |   display: flex;
279 |   align-items: flex-start;
280 | }
281 | .flex div {
282 |   background-color: #f00;
283 |   color: white;
284 |   width: 80px;
285 |   text-align: center;
286 |   padding: 20px;
287 |   margin-right: 5px;
288 |   flex-grow: 1;
289 | }
290 |    
291 |                                                                      Filters
292 |    
293 | 
294 | * {
295 |   box-sizing: border-box;
296 | }
297 | img {
298 |   transition: 0.3s;
299 |   filter: grayscale(100%);
300 | }
301 | img:hover {
302 |   filter: grayscale(0);
303 | }
304 | 
305 | 
306 |     
307 |                                                                       Gradients
308 | 
309 | 
310 | /*
311 |   Gradients
312 |   linear-gradient(Direction || Angle, Color Stop 1, Color Stop 2, ....)
313 | 
314 | 
315 | div {
316 |   width: 400px;
317 |   height: 200px;
318 |   background-color: #eee;
319 |   margin: 20px auto;
320 |   position: relative;
321 |   padding: 10px;
322 | }
323 | div:before {
324 |   content: "";
325 |   position: absolute;
326 |   top: -10px;
327 |   left: 0;
328 |   width: 100%;
329 |   background-color: red;
330 |   height: 10px;
331 |   background-image: linear-gradient(
332 |     to right,
333 |     #2980b9 20%,
334 |     #27ae60 20%,
335 |     #27ae60 40%,
336 |     #d35400 40%,
337 |     #d35400 60%,
338 |     #8e44ad 60%,
339 |     #8e44ad 80%,
340 |     #c0392b 80%
341 |   );
342 | }
343 |  
344 |                                                                            Pointer Events And Caret Color
345 | input {
346 |   caret-color: red;
347 | }
348 | a {
349 |   pointer-events: none;
350 | }
351 | 
352 | 
353 | 
354 | 
355 |    */
356 |         
357 |         
358 |  


--------------------------------------------------------------------------------