├── README.md ├── desktop.ini ├── images ├── 133206542_2845855155690510_8647155874637805181_o.jpg ├── Eren Jaeger.jfif ├── Eren-Yeager-wallpaper-by-Mizumaru-0432-Free-on-ZEDGE™.jpg ├── Halemo4.png ├── css-assignment-5-8.png ├── download-_1_.jpg ├── download.jpg ├── e5acb2e2b80771f8151f476b7b098220.jpg └── file-circle-check-solid.svg ├── index.html ├── main.css ├── week1 ├── Assignment1 │ ├── index.html │ └── main.css ├── Assignment2 │ ├── index.html │ └── main.css ├── Assignment3 │ ├── index.html │ └── main.css ├── Assignment4 │ ├── index.html │ └── main.css ├── Assignment5 │ ├── index.html │ └── main.css └── Assignment6 │ ├── index.html │ └── main.css ├── week10 ├── Assignment1 │ ├── index.html │ └── main.css ├── Assignment2 │ ├── index.html │ └── main.css └── Assignment3 │ ├── index.html │ └── main.css ├── week11 ├── Assignment1 │ ├── index.html │ └── main.css ├── Assignment2 │ ├── index.html │ └── main.css └── Assignment3 │ ├── index.html │ └── main.css ├── week12 ├── Assignment1 │ ├── index.html │ └── main.css ├── Assignment2 │ ├── index.html │ └── main.css ├── Assignment3 │ ├── index.html │ └── main.css ├── Assignment4 │ ├── index.html │ └── main.css ├── Assignment5 │ ├── index.html │ └── main.css └── Assignment6 │ ├── index.html │ └── main.css ├── week13 ├── Assignment1 │ ├── index.html │ └── main.css └── Assignment2 │ ├── index.html │ └── main.css ├── week14 ├── Assignment1 │ ├── index.html │ └── main.css ├── Assignment2 │ ├── index.html │ └── main.css ├── Assignment3 │ ├── index.html │ └── main.css ├── Assignment4 │ ├── index.html │ └── main.css ├── Assignment5 │ ├── index.html │ └── main.css └── Assignment6 │ ├── index.html │ ├── main.css │ └── vector.svg ├── week15 ├── Assignment1 │ ├── index.html │ └── main.css ├── Assignment2 │ ├── index.html │ └── main.css └── Assignment3 │ ├── index.html │ └── main.css ├── week16 ├── Assignment1 │ ├── index.html │ └── main.css ├── Assignment2 │ ├── index.html │ └── main.css ├── Assignment3 │ ├── index.html │ └── main.css ├── Assignment4 │ ├── index.html │ └── main.css └── Assignment5 │ ├── FirstCase.css │ ├── SecondCase.css │ └── index.html ├── week17 ├── Assignment1 │ ├── index.html │ └── main.css ├── Assignment2 │ ├── index.html │ └── main.css ├── Assignment3 │ ├── index.html │ └── main.css └── Assignment4 │ ├── index.html │ └── main.css ├── week18 ├── Assignment1 │ ├── index.html │ └── main.css ├── Assignment2 │ ├── index.html │ └── main.css ├── Assignment3 │ ├── index.html │ └── main.css ├── Assignment4 │ ├── index.html │ └── main.css ├── Assignment5 │ ├── index.html │ └── main.css ├── Assignment6 │ ├── index.html │ └── main.css ├── Assignment7 │ ├── index.html │ └── main.css └── Assignment8 │ ├── index.html │ └── main.css ├── week19 ├── Assignment1 │ ├── index.html │ └── main.css ├── Assignment2 │ ├── index.html │ └── main.css └── Assignment3 │ ├── index.html │ └── main.css ├── week2 ├── Assignment1 │ ├── index.html │ └── main.css ├── Assignment2 │ ├── index.html │ └── main.css ├── Assignment3 │ ├── index.html │ └── main.css └── Assignment4 │ ├── index.html │ └── main.css ├── week20 ├── Assignment1 │ ├── index.html │ └── main.css └── Assignment2 │ ├── index.html │ └── main.css ├── week3 ├── Assignment1 │ ├── index.html │ └── main.css └── Assignment2 │ ├── index.html │ └── main.css ├── week4 ├── Assignment1 │ ├── index.html │ └── main.css └── Assignment2 │ ├── index.html │ └── main.css ├── week5 ├── Assignment1 │ ├── index.html │ └── main.css ├── Assignment2 │ ├── index.html │ └── main.css ├── Assignment3 │ ├── index.html │ └── main.css └── Assignment4 │ ├── index.html │ └── main.css ├── week6 ├── Assignment1 │ ├── index.html │ └── main.css ├── Assignment2 │ ├── index.html │ └── main.css └── Assignment3 │ ├── index.html │ └── main.css ├── week7 ├── Assignment1 │ ├── index.html │ └── main.css └── Assignment2 │ ├── index.html │ └── main.css ├── week8 ├── Assignment1 │ ├── index.html │ └── main.css ├── Assignment2 │ ├── index.html │ └── main.css ├── Assignment3 │ ├── index.html │ └── main.css └── Assignment4 │ ├── index.html │ └── main.css └── week9 ├── Assignment1 ├── index.html └── main.css ├── Assignment2 ├── index.html └── main.css ├── Assignment3 ├── index.html └── main.css └── Assignment4 ├── index.html └── main.css /README.md: -------------------------------------------------------------------------------- 1 | HalemoGPA 2 | 3 |
4 | HTML

CSS Course

5 | 6 | 7 | 8 | ![](https://i.imgur.com/waxVImv.png) 9 | 10 | # Learn CSS 11 | 12 |
13 | 14 |

15 |

Elzero Web School CSS Course Assignments Solution

16 |
17 | 18 | ## 1️⃣ Elements And Naming 19 | #### [codes for lessons from [01] to [04]](https://github.com/HalemoGPA/Learn-CSS/tree/main/week1) 20 | [     • Assignment 1](https://github.com/HalemoGPA/Learn-CSS/tree/main/week1/Assignment1) 21 | [     • Assignment 2](https://github.com/HalemoGPA/Learn-CSS/tree/main/week1/Assignment2) 22 | [     • Assignment 3](https://github.com/HalemoGPA/Learn-CSS/tree/main/week1/Assignment3) 23 | [     • Assignment 4](https://github.com/HalemoGPA/Learn-CSS/tree/main/week1/Assignment4) 24 | [     • Assignment 5](https://github.com/HalemoGPA/Learn-CSS/tree/main/week1/Assignment5) 25 | [     • Assignment 6](https://github.com/HalemoGPA/Learn-CSS/tree/main/week1/Assignment6) 26 | ## 2️⃣ Background, Margin, Padding 27 | #### [codes for lessons from [05] to [08]](https://github.com/HalemoGPA/Learn-CSS/tree/main/week2) 28 | [     • Assignment 1](https://github.com/HalemoGPA/Learn-CSS/tree/main/week2/Assignment1) 29 | [     • Assignment 2](https://github.com/HalemoGPA/Learn-CSS/tree/main/week2/Assignment2) 30 | [     • Assignment 3](https://github.com/HalemoGPA/Learn-CSS/tree/main/week2/Assignment3) 31 | [     • Assignment 4](https://github.com/HalemoGPA/Learn-CSS/tree/main/week2/Assignment4) 32 | 33 | ## 3️⃣ Border, Outline, Display 34 | #### [codes for lessons from [09] to [12]](https://github.com/HalemoGPA/Learn-CSS/tree/main/week3) 35 | [     • Assignment 1](https://github.com/HalemoGPA/Learn-CSS/tree/main/week3/Assignment1) 36 | [     • Assignment 2](https://github.com/HalemoGPA/Learn-CSS/tree/main/week3/Assignment2) 37 | 38 | ## 4️⃣ Nesting, Dimensions, Overflow 39 | #### [codes for lessons from [13] to [16]](https://github.com/HalemoGPA/Learn-CSS/tree/main/week4) 40 | [     • Assignment 1](https://github.com/HalemoGPA/Learn-CSS/tree/main/week4/Assignment1) 41 | [     • Assignment 2](https://github.com/HalemoGPA/Learn-CSS/tree/main/week4/Assignment2) 42 | 43 | 44 | ## 5️⃣ Text Formatting 45 | #### [codes for lessons from [17] to [21]](https://github.com/HalemoGPA/Learn-CSS/tree/main/week5) 46 | [     • Assignment 1](https://github.com/HalemoGPA/Learn-CSS/tree/main/week5/Assignment1) 47 | [     • Assignment 2](https://github.com/HalemoGPA/Learn-CSS/tree/main/week5/Assignment2) 48 | [     • Assignment 3](https://github.com/HalemoGPA/Learn-CSS/tree/main/week5/Assignment3) 49 | [     • Assignment 4](https://github.com/HalemoGPA/Learn-CSS/tree/main/week5/Assignment4) 50 | 51 | 52 | 53 | 54 | ## 6️⃣ Inheritance, Typography 55 | #### [codes for lessons from [22] to [26]](https://github.com/HalemoGPA/Learn-CSS/tree/main/week6) 56 | [     • Assignment 1](https://github.com/HalemoGPA/Learn-CSS/tree/main/week6/Assignment1) 57 | [     • Assignment 2](https://github.com/HalemoGPA/Learn-CSS/tree/main/week6/Assignment2) 58 | [     • Assignment 3](https://github.com/HalemoGPA/Learn-CSS/tree/main/week6/Assignment3) 59 | 60 | 61 | 62 | 63 | ## 7️⃣ Float, Opacity 64 | #### [codes for lessons from [27] to [29]](https://github.com/HalemoGPA/Learn-CSS/tree/main/week7) 65 | [     • Assignment 1](https://github.com/HalemoGPA/Learn-CSS/tree/main/week7/Assignment1) 66 | [     • Assignment 2](https://github.com/HalemoGPA/Learn-CSS/tree/main/week7/Assignment2) 67 | 68 | 69 | 70 | ## 8️⃣ Position, List, Table 71 | #### [codes for lessons from [30] to [33]](https://github.com/HalemoGPA/Learn-CSS/tree/main/week8) 72 | [     • Assignment 1](https://github.com/HalemoGPA/Learn-CSS/tree/main/week8/Assignment1) 73 | [     • Assignment 2](https://github.com/HalemoGPA/Learn-CSS/tree/main/week8/Assignment2) 74 | [     • Assignment 3](https://github.com/HalemoGPA/Learn-CSS/tree/main/week8/Assignment3) 75 | [     • Assignment 4](https://github.com/HalemoGPA/Learn-CSS/tree/main/week8/Assignment4) 76 | 77 | ## 9️⃣ Pseudo Classes, Pseudo Elements 78 | #### [codes for lessons from [34] to [37]](https://github.com/HalemoGPA/Learn-CSS/tree/main/week9) 79 | [     • Assignment 1](https://github.com/HalemoGPA/Learn-CSS/tree/main/week9/Assignment1) 80 | [     • Assignment 2](https://github.com/HalemoGPA/Learn-CSS/tree/main/week9/Assignment2) 81 | [     • Assignment 3](https://github.com/HalemoGPA/Learn-CSS/tree/main/week9/Assignment3) 82 | [     • Assignment 4](https://github.com/HalemoGPA/Learn-CSS/tree/main/week9/Assignment4) 83 | 84 | ## 🔟 Border Radius, Box Shadow 85 | #### [codes for lessons from [38] to [41]](https://github.com/HalemoGPA/Learn-CSS/tree/main/week10) 86 | [     • Assignment 1](https://github.com/HalemoGPA/Learn-CSS/tree/main/week10/Assignment1) 87 | [     • Assignment 2](https://github.com/HalemoGPA/Learn-CSS/tree/main/week10/Assignment2) 88 | [     • Assignment 3](https://github.com/HalemoGPA/Learn-CSS/tree/main/week10/Assignment3) 89 | 90 | 91 | 92 | 93 | ## 1️⃣1️⃣ Transitions, Variables 94 | #### [codes for lessons from [42] to [45]](https://github.com/HalemoGPA/Learn-CSS/tree/main/week11) 95 | [     • Assignment 1](https://github.com/HalemoGPA/Learn-CSS/tree/main/week11/Assignment1) 96 | [     • Assignment 2](https://github.com/HalemoGPA/Learn-CSS/tree/main/week11/Assignment2) 97 | [     • Assignment 3](https://github.com/HalemoGPA/Learn-CSS/tree/main/week11/Assignment3) 98 | 99 | 100 | ## 1️⃣2️⃣ Flex Box 101 | #### [codes for lessons from [46] to [53]](https://github.com/HalemoGPA/Learn-CSS/tree/main/week12) 102 | [     • Assignment 1](https://github.com/HalemoGPA/Learn-CSS/tree/main/week12/Assignment1) 103 | [     • Assignment 2](https://github.com/HalemoGPA/Learn-CSS/tree/main/week12/Assignment2) 104 | [     • Assignment 3](https://github.com/HalemoGPA/Learn-CSS/tree/main/week12/Assignment3) 105 | [     • Assignment 4](https://github.com/HalemoGPA/Learn-CSS/tree/main/week12/Assignment4) 106 | [     • Assignment 5](https://github.com/HalemoGPA/Learn-CSS/tree/main/week12/Assignment5) 107 | [     • Assignment 6](https://github.com/HalemoGPA/Learn-CSS/tree/main/week12/Assignment6) 108 | 109 | 110 | 111 | ## 1️⃣3️⃣ Filters, Gradient 112 | #### [codes for lessons from [54] to [56]](https://github.com/HalemoGPA/Learn-CSS/tree/main/week13) 113 | [     • Assignment 1](https://github.com/HalemoGPA/Learn-CSS/tree/main/week13/Assignment1) 114 | [     • Assignment 2](https://github.com/HalemoGPA/Learn-CSS/tree/main/week13/Assignment2) 115 | 116 | 117 | ## 1️⃣4️⃣ Grid 118 | #### [codes for lessons from [57] to [64]](https://github.com/HalemoGPA/Learn-CSS/tree/main/week14) 119 | [     • Assignment 1](https://github.com/HalemoGPA/Learn-CSS/tree/main/week14/Assignment1) 120 | [     • Assignment 2](https://github.com/HalemoGPA/Learn-CSS/tree/main/week14/Assignment2) 121 | [     • Assignment 3](https://github.com/HalemoGPA/Learn-CSS/tree/main/week14/Assignment3) 122 | [     • Assignment 4](https://github.com/HalemoGPA/Learn-CSS/tree/main/week14/Assignment4) 123 | [     • Assignment 5](https://github.com/HalemoGPA/Learn-CSS/tree/main/week14/Assignment5) 124 | [     • Assignment 6](https://github.com/HalemoGPA/Learn-CSS/tree/main/week14/Assignment6) 125 | 126 | 127 | 128 | ## 1️⃣5️⃣ Scale, Rotate, Translate 129 | #### [codes for lessons from [65] to [67]](https://github.com/HalemoGPA/Learn-CSS/tree/main/week15) 130 | [     • Assignment 1](https://github.com/HalemoGPA/Learn-CSS/tree/main/week15/Assignment1) 131 | [     • Assignment 2](https://github.com/HalemoGPA/Learn-CSS/tree/main/week15/Assignment2) 132 | [     • Assignment 3](https://github.com/HalemoGPA/Learn-CSS/tree/main/week15/Assignment3) 133 | 134 | 135 | ## 1️⃣6️⃣ Skew, Matrix, 3D Transform 136 | #### [codes for lessons from [68] to [73]](https://github.com/HalemoGPA/Learn-CSS/tree/main/week16) 137 | [     • Assignment 1](https://github.com/HalemoGPA/Learn-CSS/tree/main/week16/Assignment1) 138 | [     • Assignment 2](https://github.com/HalemoGPA/Learn-CSS/tree/main/week16/Assignment2) 139 | [     • Assignment 3](https://github.com/HalemoGPA/Learn-CSS/tree/main/week16/Assignment3) 140 | [     • Assignment 4](https://github.com/HalemoGPA/Learn-CSS/tree/main/week16/Assignment4) 141 | [     • Assignment 5](https://github.com/HalemoGPA/Learn-CSS/tree/main/week16/Assignment5) 142 | 143 | 144 | 145 | ## 1️⃣7️⃣ Animation 146 | #### [codes for lessons from [74] to [77]](https://github.com/HalemoGPA/Learn-CSS/tree/main/week17) 147 | [     • Assignment 1](https://github.com/HalemoGPA/Learn-CSS/tree/main/week17/Assignment1) 148 | [     • Assignment 2](https://github.com/HalemoGPA/Learn-CSS/tree/main/week17/Assignment2) 149 | [     • Assignment 3](https://github.com/HalemoGPA/Learn-CSS/tree/main/week17/Assignment3) 150 | [     • Assignment 4](https://github.com/HalemoGPA/Learn-CSS/tree/main/week17/Assignment4) 151 | 152 | 153 | ## 1️⃣8️⃣ Selectors 154 | #### [codes for lessons from [78] to [82]](https://github.com/HalemoGPA/Learn-CSS/tree/main/week18) 155 | [     • Assignment 1](https://github.com/HalemoGPA/Learn-CSS/tree/main/week18/Assignment1) 156 | [     • Assignment 2](https://github.com/HalemoGPA/Learn-CSS/tree/main/week18/Assignment2) 157 | [     • Assignment 3](https://github.com/HalemoGPA/Learn-CSS/tree/main/week18/Assignment3) 158 | [     • Assignment 4](https://github.com/HalemoGPA/Learn-CSS/tree/main/week18/Assignment4) 159 | [     • Assignment 5](https://github.com/HalemoGPA/Learn-CSS/tree/main/week18/Assignment5) 160 | [     • Assignment 6](https://github.com/HalemoGPA/Learn-CSS/tree/main/week18/Assignment6) 161 | [     • Assignment 7](https://github.com/HalemoGPA/Learn-CSS/tree/main/week18/Assignment7) 162 | [     • Assignment 8](https://github.com/HalemoGPA/Learn-CSS/tree/main/week18/Assignment8) 163 | 164 | 165 | ## 1️⃣9️⃣ Media Queries 166 | #### [codes for lessons from [83] to [85]](https://github.com/HalemoGPA/Learn-CSS/tree/main/week19) 167 | [     • Assignment 1](https://github.com/HalemoGPA/Learn-CSS/tree/main/week19/Assignment1) 168 | [     • Assignment 2](https://github.com/HalemoGPA/Learn-CSS/tree/main/week19/Assignment2) 169 | [     • Assignment 3](https://github.com/HalemoGPA/Learn-CSS/tree/main/week19/Assignment3) 170 | 171 | 172 | 173 | ## 2️⃣0️⃣ Global Values 174 | #### [codes for lessons from [86] to [88]](https://github.com/HalemoGPA/Learn-CSS/tree/main/week20) 175 | [     • Assignment 1](https://github.com/HalemoGPA/Learn-CSS/tree/main/week20/Assignment1) 176 | [     • Assignment 2](https://github.com/HalemoGPA/Learn-CSS/tree/main/week20/Assignment2) 177 | 178 | 179 | 180 | 181 |
182 | 183 | HalemoGPA buy me a coffee 184 | 185 | 186 |
187 | -------------------------------------------------------------------------------- /desktop.ini: -------------------------------------------------------------------------------- 1 | [.ShellClassInfo] 2 | IconResource=D:\Google Downloads\css.ico,0 3 | [ViewState] 4 | Mode= 5 | Vid= 6 | FolderType=Generic 7 | -------------------------------------------------------------------------------- /images/133206542_2845855155690510_8647155874637805181_o.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HalemoGPA/Learn-CSS/6b432df38e3a6c4c902263b3096e182b945e866c/images/133206542_2845855155690510_8647155874637805181_o.jpg -------------------------------------------------------------------------------- /images/Eren Jaeger.jfif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HalemoGPA/Learn-CSS/6b432df38e3a6c4c902263b3096e182b945e866c/images/Eren Jaeger.jfif -------------------------------------------------------------------------------- /images/Eren-Yeager-wallpaper-by-Mizumaru-0432-Free-on-ZEDGE™.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HalemoGPA/Learn-CSS/6b432df38e3a6c4c902263b3096e182b945e866c/images/Eren-Yeager-wallpaper-by-Mizumaru-0432-Free-on-ZEDGE™.jpg -------------------------------------------------------------------------------- /images/Halemo4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HalemoGPA/Learn-CSS/6b432df38e3a6c4c902263b3096e182b945e866c/images/Halemo4.png -------------------------------------------------------------------------------- /images/css-assignment-5-8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HalemoGPA/Learn-CSS/6b432df38e3a6c4c902263b3096e182b945e866c/images/css-assignment-5-8.png -------------------------------------------------------------------------------- /images/download-_1_.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HalemoGPA/Learn-CSS/6b432df38e3a6c4c902263b3096e182b945e866c/images/download-_1_.jpg -------------------------------------------------------------------------------- /images/download.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HalemoGPA/Learn-CSS/6b432df38e3a6c4c902263b3096e182b945e866c/images/download.jpg -------------------------------------------------------------------------------- /images/e5acb2e2b80771f8151f476b7b098220.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HalemoGPA/Learn-CSS/6b432df38e3a6c4c902263b3096e182b945e866c/images/e5acb2e2b80771f8151f476b7b098220.jpg -------------------------------------------------------------------------------- /images/file-circle-check-solid.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 |
15 | Span Strong Span 16 |

Paragraph

17 | 18 |
19 |
20 | Span Strong Span 21 |

Paragraph

22 | 23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /main.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | div { 8 | color: red; 9 | font-size: 40px; 10 | font-weight: bold; 11 | background-color: #EEE; 12 | margin: 5px; 13 | padding: 20px; 14 | border: 2px solid black; 15 | } -------------------------------------------------------------------------------- /week1/Assignment1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /week1/Assignment1/main.css: -------------------------------------------------------------------------------- 1 | .title{ 2 | /* class */ 3 | } 4 | #nav{ 5 | /* id */ 6 | } 7 | div{ 8 | /* tag */ 9 | } 10 | h2{ 11 | /* tag */ 12 | } -------------------------------------------------------------------------------- /week1/Assignment2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 10 | 11 | 12 |

This Is Our Paragraph

-------------------------------------------------------------------------------- /week1/Assignment2/main.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HalemoGPA/Learn-CSS/6b432df38e3a6c4c902263b3096e182b945e866c/week1/Assignment2/main.css -------------------------------------------------------------------------------- /week1/Assignment3/index.html: -------------------------------------------------------------------------------- 1 | Not important -------------------------------------------------------------------------------- /week1/Assignment3/main.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HalemoGPA/Learn-CSS/6b432df38e3a6c4c902263b3096e182b945e866c/week1/Assignment3/main.css -------------------------------------------------------------------------------- /week1/Assignment4/index.html: -------------------------------------------------------------------------------- 1 | Not Important -------------------------------------------------------------------------------- /week1/Assignment4/main.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HalemoGPA/Learn-CSS/6b432df38e3a6c4c902263b3096e182b945e866c/week1/Assignment4/main.css -------------------------------------------------------------------------------- /week1/Assignment5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /week1/Assignment5/main.css: -------------------------------------------------------------------------------- 1 | /* valid */ 2 | ._user-name { 3 | } 4 | 5 | /* valid */ 6 | .-user-name { 7 | } 8 | 9 | /* valid */ 10 | .-user-name { 11 | } 12 | 13 | /* not valid */ 14 | .1user-name { 15 | } 16 | 17 | /* not valid */ 18 | .@user-name { 19 | } 20 | 21 | /* not valid */ 22 | .user@name { 23 | } 24 | 25 | /* valid */ 26 | ._user10name { 27 | } 28 | 29 | /* valid */ 30 | .u { 31 | } -------------------------------------------------------------------------------- /week1/Assignment6/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /week1/Assignment6/main.css: -------------------------------------------------------------------------------- 1 | /* Bad */ 2 | .USERNAME { 3 | } 4 | 5 | /* Bad */ 6 | .UserName { 7 | } 8 | 9 | /* Good */ 10 | .user-name { 11 | } 12 | 13 | /* Bad */ 14 | .userName { 15 | } 16 | 17 | /* Bad */ 18 | .usernameprofile { 19 | } -------------------------------------------------------------------------------- /week10/Assignment1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 |
13 |
14 | 15 | -------------------------------------------------------------------------------- /week10/Assignment1/main.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin-left: 25%; 3 | } 4 | div{ 5 | width: 100px; 6 | height: 100px; 7 | background-color: #EEE; 8 | margin:20px 5%; 9 | 10 | position: relative; 11 | float: left; 12 | padding: 10px; 13 | border-radius: 50%; 14 | border: 2px solid black; 15 | box-shadow:-7px -5px 0 0 #e91e63, 7px 5px 0 0 #2196f3; 16 | counter-increment: counterpp; 17 | } 18 | div::after{ 19 | content: counter(counterpp); 20 | position: absolute; 21 | top: -16px; 22 | left: 42px; 23 | width: 30px; 24 | height: 30px; 25 | color: rgb(255, 255, 255); 26 | background-color: black; 27 | border-radius: 50%; 28 | font-size: 25px; 29 | text-align: center; 30 | } 31 | 32 | div::before{ 33 | 34 | content:"Element"; 35 | position: absolute; 36 | top: 49px; 37 | left: 32px; 38 | } 39 | 40 | -------------------------------------------------------------------------------- /week10/Assignment2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 | 13 | -------------------------------------------------------------------------------- /week10/Assignment2/main.css: -------------------------------------------------------------------------------- 1 | div{ 2 | width: 100px; 3 | height: 100px; 4 | position: absolute; 5 | top: calc(50% - 50px); 6 | left: calc(50% - 50px); 7 | background-color: #EEE; 8 | border-radius: 10px 50px 10px 50px; 9 | box-shadow: inset 0 0 16px 4px #000000a1; 10 | } -------------------------------------------------------------------------------- /week10/Assignment3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 |
13 | 14 |
Free
15 |
Basic
16 |
17 |
18 |
Pro
19 |
$30
20 |
21 |
22 | 23 | -------------------------------------------------------------------------------- /week10/Assignment3/main.css: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family: Arial, Helvetica, sans-serif; 3 | } 4 | .parent { 5 | width: 550px; 6 | height: 300px; 7 | background-color: #ffffff; 8 | margin: auto; 9 | text-align: center; 10 | position: relative; 11 | } 12 | .one,.two{ 13 | background-color: #EEE; 14 | width:calc(50% - 50px); 15 | height: 280px; 16 | position: absolute; 17 | } 18 | .one{ 19 | top: 10px; 20 | left: 16px; 21 | } 22 | .two{ 23 | top: 10px; 24 | right: 16px; 25 | } 26 | .basic{ 27 | position: absolute; 28 | border-radius: 11px; 29 | width: calc(80% ); 30 | height:45px; 31 | background-color: #03a9f4; 32 | font-weight: bold; 33 | font-size: 20px; 34 | top: 13px; 35 | left: 22px; 36 | text-align: center; 37 | color: white; 38 | line-height: 45px; 39 | } 40 | .free{ 41 | border-radius: 50%; 42 | width: 185px; 43 | height: 185px; 44 | background-color: #DDD; 45 | position: absolute; 46 | top: 78px; 47 | left: 21px; 48 | line-height: 185px; 49 | font-size: 30px; 50 | } 51 | .pro{ 52 | position: absolute; 53 | border-radius: 11px; 54 | width: calc(80% ); 55 | height:45px; 56 | background-color: #03a9f4; 57 | font-weight: bold; 58 | font-size: 20px; 59 | top: 13px; 60 | left: 22px; 61 | text-align: center; 62 | color: white; 63 | line-height: 45px; 64 | } 65 | .dollar{ 66 | border-radius: 50%; 67 | width: 185px; 68 | height: 185px; 69 | background-color: #DDD; 70 | position: absolute; 71 | top: 78px; 72 | left: 21px; 73 | line-height: 185px; 74 | font-size: 30px; 75 | } 76 | .one::after{ 77 | content: ""; 78 | position: absolute; 79 | width: 1px; 80 | height: 280px; 81 | background-color: #03a9f4; 82 | top: 0px; 83 | left: 115%; 84 | } 85 | .two::before{ 86 | content: "Or"; 87 | position: absolute; 88 | width: 30px; 89 | height: 30px; 90 | background-color: #03a9f4; 91 | top: calc(50% - 20px); 92 | left: -22%; 93 | color: white; 94 | line-height: 30px; 95 | border-radius: 50%; 96 | } -------------------------------------------------------------------------------- /week11/Assignment1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 | will Go Up On Hover In Half Second 13 |
14 | will Go Down On Hover In Half Second 15 |
16 |
17 | 18 | -------------------------------------------------------------------------------- /week11/Assignment1/main.css: -------------------------------------------------------------------------------- 1 | .up{ 2 | background-color: #EEE; 3 | width: 400px; 4 | height: 280px; 5 | margin: 30px auto; 6 | padding: 10px; 7 | text-align: center; 8 | line-height: 50px; 9 | transition: all .5s ease ; 10 | 11 | } 12 | .up:hover{ 13 | margin-top: 0px; 14 | transition: all .5s ease ; 15 | } 16 | 17 | .down{ 18 | background-color:#DDD; 19 | padding : 10px; 20 | width:380px; 21 | margin :20px auto; 22 | height:70px; 23 | line-height: 70px; 24 | text-align: center; 25 | transition: all .5s ease .5s; 26 | } 27 | .up:hover .down{ 28 | margin-top: 50px; 29 | transition: all .5s ease .5s; 30 | } -------------------------------------------------------------------------------- /week11/Assignment2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
17 | Hello Div 18 |
19 | 20 | -------------------------------------------------------------------------------- /week11/Assignment2/main.css: -------------------------------------------------------------------------------- 1 | div{ 2 | z-index: -1; 3 | width: 400px !important; 4 | text-align: center; 5 | font-size: 20px !important; 6 | color: black !important; 7 | background-color: #EEE !important; 8 | margin: auto; 9 | border: none !important; 10 | position: relative; 11 | } 12 | div::after{ 13 | content:"Elzero"; 14 | position: absolute; 15 | top: 0; 16 | left: 0; 17 | color: black ; 18 | width: 400px; 19 | padding: 10px; 20 | height: fit-content; 21 | line-height: calc(100% + 20px); 22 | z-index: 5; 23 | font-size: 20px; 24 | font-weight: bold; 25 | background-color: #EEE; 26 | font-family: Arial, Helvetica, sans-serif; 27 | } -------------------------------------------------------------------------------- /week11/Assignment3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
Element
12 |
Element
13 |
Element
14 | 15 | -------------------------------------------------------------------------------- /week11/Assignment3/main.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --mainColor: #009688; 3 | --mainPadding: 10px; 4 | } 5 | 6 | div { 7 | width: 500px; 8 | text-align:left; 9 | font-size: 20px; 10 | color: var(--mainColor,red); 11 | border:3px solid var(--mainColor,black); 12 | padding: var(--mainPadding,10px); 13 | margin:10px auto ; 14 | font-family: Arial, Helvetica, sans-serif; 15 | } -------------------------------------------------------------------------------- /week12/Assignment1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
Elzero
14 | 15 | 16 | -------------------------------------------------------------------------------- /week12/Assignment1/main.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | height: calc(100vh - 50px); 10 | } 11 | 12 | div { 13 | 14 | width: 100px; 15 | display: flex; 16 | align-items: center; 17 | justify-content: center; 18 | height: 100px; 19 | background-color: #EEE; 20 | color: #FF5722; 21 | border-radius: 50%; 22 | font-size: 20px; 23 | font-weight: bold; 24 | font-family: Arial, Helvetica, sans-serif; 25 | position: relative; 26 | 27 | } 28 | 29 | 30 | div::before { 31 | content: ""; 32 | position: absolute; 33 | z-index: -1; 34 | top: -.5%; 35 | left: 5px; 36 | width: 101%; 37 | height: 101%; 38 | background-color: #FF5722; 39 | border-radius: 50%; 40 | 41 | } 42 | 43 | div::after { 44 | content: ""; 45 | position: absolute; 46 | z-index: -1; 47 | top: -.5%; 48 | right: 5px; 49 | width: 101%; 50 | height: 101%; 51 | background-color: #03A9F4; 52 | border-radius: 50%; 53 | 54 | } -------------------------------------------------------------------------------- /week12/Assignment2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 |
1
15 |
2
16 |
3
17 |
4
18 |
5
19 |
6
20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /week12/Assignment2/main.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | .parent { 6 | margin: 0 auto; 7 | width: 600px; 8 | height: 300px; 9 | background-color: #EEE; 10 | display: flex; 11 | justify-content: space-around; 12 | align-items: space-between; 13 | padding: 10px 0 10px 0; 14 | flex-wrap: wrap; 15 | align-content: space-between; 16 | } 17 | 18 | .parent div { 19 | background-color: #F44336; 20 | width: 180px; 21 | height: 40px; 22 | display: flex; 23 | justify-content: center; 24 | align-items: center; 25 | color: white; 26 | 27 | } -------------------------------------------------------------------------------- /week12/Assignment3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 |
1
15 |
2
16 |
3
17 |
4
18 |
5
19 |
6
20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /week12/Assignment3/main.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | .parent { 6 | margin: 0 auto; 7 | width: 600px; 8 | height: 300px; 9 | background-color: #EEE; 10 | display: flex; 11 | justify-content: space-between; 12 | flex-direction: column; 13 | padding: 10px 0 10px 0; 14 | flex-wrap: wrap; 15 | align-content: space-around; 16 | } 17 | 18 | .parent div { 19 | font-family: Arial, Helvetica, sans-serif; 20 | background-color: #607D8B; 21 | width: 180px; 22 | height: 40px; 23 | display: flex; 24 | justify-content: center; 25 | align-items: center; 26 | color: white; 27 | } 28 | 29 | .one { 30 | order: 6; 31 | margin-top: 100px; 32 | } 33 | 34 | .two { 35 | order: 4; 36 | align-self: flex-end; 37 | flex: 140px; 38 | 39 | } 40 | 41 | .three { 42 | order: 3; 43 | flex: 40px; 44 | margin-bottom: 100px; 45 | 46 | } 47 | 48 | .four { 49 | order: 5; 50 | flex: 140px; 51 | } 52 | 53 | .five { 54 | order: 2; 55 | flex: 150px; 56 | } 57 | 58 | .six { 59 | order: 1; 60 | flex: 100px; 61 | } -------------------------------------------------------------------------------- /week12/Assignment4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 |
1
15 |
2
16 |
3
17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /week12/Assignment4/main.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | .parent { 6 | margin: 0 auto; 7 | width: 600px; 8 | height: 300px; 9 | background-color: #EEE; 10 | display: flex; 11 | justify-content: space-between; 12 | flex-direction: column; 13 | padding: 10px 10px 10px 10px; 14 | flex-wrap: wrap; 15 | align-items: flex-end; 16 | } 17 | 18 | .parent div { 19 | font-family: Arial, Helvetica, sans-serif; 20 | background-color: #009688; 21 | width: 30px; 22 | height: 90px; 23 | display: flex; 24 | justify-content: center; 25 | align-items: center; 26 | color: white; 27 | } 28 | 29 | .parent .two { 30 | align-self: flex-start; 31 | width: 300px; 32 | } -------------------------------------------------------------------------------- /week12/Assignment5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 |
1
15 |
2
16 |
3
17 |
4
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /week12/Assignment5/main.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | .parent { 6 | width: 600px; 7 | height: 300px; 8 | background-color: #EEE; 9 | display: flex; 10 | justify-content: space-between; 11 | margin: auto; 12 | padding: 10px; 13 | } 14 | 15 | .parent div { 16 | color: white; 17 | font-family: Arial, Helvetica, sans-serif; 18 | width: 90px; 19 | height: 140px; 20 | display: flex; 21 | justify-content: center; 22 | align-items: center; 23 | 24 | } 25 | 26 | .one { 27 | background-color: #FF9800; 28 | order: 2; 29 | } 30 | 31 | .two { 32 | order: 3; 33 | background-color: #8BC34A; 34 | align-self: flex-end; 35 | } 36 | 37 | .three { 38 | order: 4; 39 | background-color: #795548; 40 | } 41 | 42 | .four { 43 | order: 1; 44 | background-color: #673AB7; 45 | align-self: flex-end; 46 | } -------------------------------------------------------------------------------- /week12/Assignment6/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 |
15 | 16 | 22 |
23 |
24 |
Content
25 |
Sidebar
26 |
27 |
28 |
Copyright 2021
29 |
Designed By Elzero
30 |
31 |
32 | 33 | 34 | -------------------------------------------------------------------------------- /week12/Assignment6/main.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --backColor: #EEE; 3 | --forebackColor: #DDD; 4 | } 5 | 6 | * { 7 | box-sizing: border-box; 8 | font-family: Arial, Helvetica, sans-serif; 9 | } 10 | 11 | .page { 12 | display: flex; 13 | width: 100%; 14 | height: calc(100vh - 50px); 15 | background-color: var(--backColor); 16 | flex-flow: column wrap; 17 | 18 | } 19 | 20 | .logo, 21 | .links, 22 | .content, 23 | .sidebar, 24 | .footer { 25 | background-color: var(--forebackColor); 26 | } 27 | 28 | .header { 29 | padding: 0 10px; 30 | display: flex; 31 | width: 100%; 32 | height: 15%; 33 | justify-content: space-between; 34 | flex-flow: row; 35 | align-items: center; 36 | 37 | } 38 | 39 | .links { 40 | display: flex; 41 | flex-flow: row; 42 | justify-content: flex-end; 43 | width: 90%; 44 | align-items: center; 45 | list-style: none; 46 | padding: 15px; 47 | } 48 | 49 | li { 50 | width: 80px; 51 | } 52 | 53 | 54 | .logo { 55 | display: flex; 56 | flex-flow: row; 57 | justify-content: center; 58 | width: 8%; 59 | align-items: center; 60 | list-style: none; 61 | padding: 15px; 62 | } 63 | 64 | .main-area { 65 | padding: 0 10px; 66 | display: flex; 67 | width: 100%; 68 | height: 70%; 69 | justify-content: space-between; 70 | flex-flow: row; 71 | align-items: center; 72 | margin-bottom: 10px; 73 | } 74 | 75 | .content { 76 | display: flex; 77 | flex-flow: column; 78 | width: 60%; 79 | height: 100%; 80 | margin-right: 20px; 81 | text-indent: 20px; 82 | line-height: 50px; 83 | } 84 | 85 | .sidebar { 86 | display: flex; 87 | flex-flow: column; 88 | width: 38.5%; 89 | height: 100%; 90 | text-indent: 20px; 91 | line-height: 50px; 92 | } 93 | 94 | .footer { 95 | display: flex; 96 | flex-flow: row; 97 | width: calc(100% - 20px); 98 | height: 10%; 99 | justify-content: space-between; 100 | flex-flow: row; 101 | align-items: center; 102 | margin: 0 10px 0 10px; 103 | } 104 | 105 | .copyright { 106 | text-indent: 10px; 107 | } 108 | 109 | .design { 110 | text-indent: -150px; 111 | } -------------------------------------------------------------------------------- /week13/Assignment1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
Elzero
14 | 15 | 16 | -------------------------------------------------------------------------------- /week13/Assignment1/main.css: -------------------------------------------------------------------------------- 1 | div { 2 | margin: 50px auto; 3 | width: 600px; 4 | height: 200px; 5 | background-color: #EEE; 6 | text-align: center; 7 | line-height: 200px; 8 | font-size: 3em; 9 | font-weight: bold; 10 | letter-spacing: .3em; 11 | position: relative; 12 | 13 | } 14 | 15 | div::before { 16 | content: ""; 17 | width: calc(100% + (10% / 3)); 18 | height: 110%; 19 | background: linear-gradient(to right, 20 | #F44336 0%, 21 | #F44336 20%, 22 | #2196F3 20%, 23 | #2196F3 40%, 24 | #4CAF50 40%, 25 | #4CAF50 60%, 26 | #E91E63 60%, 27 | #E91E63 80%, 28 | #673AB7 80%, 29 | #673AB7 100%); 30 | position: absolute; 31 | top: -5%; 32 | left: calc((-10% / 3) / 2); 33 | z-index: -1; 34 | } 35 | 36 | ::first-letter { 37 | color: #F44336; 38 | } -------------------------------------------------------------------------------- /week13/Assignment2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /week13/Assignment2/main.css: -------------------------------------------------------------------------------- 1 | input { 2 | display: block; 3 | width: 600px; 4 | height: 30px; 5 | background-color: #EEE; 6 | margin: 50px auto; 7 | caret-color: red; 8 | font-size: 1.4em; 9 | font-family: Arial, Helvetica, sans-serif; 10 | border: none; 11 | outline: none; 12 | padding: 20px 25px; 13 | position: relative; 14 | } 15 | 16 | div { 17 | position: relative; 18 | } 19 | 20 | div::before { 21 | content: ""; 22 | width: 650px; 23 | height: 10%; 24 | background-image: linear-gradient(to right, 25 | #F44336 0%, 26 | #F44336 50%, 27 | #009688 50%, 28 | #009688 100%); 29 | 30 | position: absolute; 31 | bottom: -2px; 32 | left: 50px; 33 | z-index: -1; 34 | } -------------------------------------------------------------------------------- /week14/Assignment1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /week14/Assignment1/main.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | body { 8 | counter-reset: div; 9 | } 10 | 11 | .grid { 12 | background-color: #ddd; 13 | padding: 20px; 14 | width: 800px; 15 | height: 400px; 16 | margin: 0 auto; 17 | text-align: center; 18 | display: grid; 19 | grid-template-columns: repeat(3, 1fr); 20 | grid-template-rows: 1fr 10fr; 21 | gap: 15px; 22 | } 23 | 24 | .grid div { 25 | padding: 10px; 26 | display: flex; 27 | align-items: center; 28 | justify-content: center; 29 | background-color: #607D8B; 30 | } 31 | 32 | .grid div::after { 33 | color: white; 34 | font-family: Arial, Helvetica, sans-serif; 35 | font-size: 1.5em; 36 | 37 | counter-increment: div; 38 | content: "ELement " counter(div); 39 | display: block; 40 | clear: both; 41 | 42 | } -------------------------------------------------------------------------------- /week14/Assignment2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 | 17 | 18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /week14/Assignment2/main.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | padding: 0; 4 | margin: 0; 5 | } 6 | 7 | 8 | 9 | .layout { 10 | display: grid; 11 | width: 100vw; 12 | height: 100vh; 13 | grid-template-columns: repeat(10, 1fr); 14 | grid-template-rows: repeat(10, 1fr); 15 | } 16 | 17 | .layout header { 18 | background-color: #03A9F4; 19 | grid-column: 1 / -1; 20 | grid-row: 1 / 2; 21 | } 22 | 23 | .layout section { 24 | background-color: #FF5722; 25 | grid-column: 1/ 8; 26 | grid-row: 2/10 27 | } 28 | 29 | .layout aside { 30 | background-color: #607D8B; 31 | grid-column: span 3; 32 | grid-row: 2/10 33 | } 34 | 35 | .layout footer { 36 | background-color: #009688; 37 | grid-column: 1 / -1; 38 | grid-row: 10 / -1; 39 | } 40 | 41 | .layout section, 42 | .layout header, 43 | .layout footer, 44 | .layout aside { 45 | display: flex; 46 | align-items: flex-start; 47 | justify-content: flex-start; 48 | } 49 | 50 | .layout header::before, 51 | .layout section::before, 52 | .layout footer::before, 53 | .layout aside::before, 54 | .layout section::before { 55 | display: block; 56 | color: white; 57 | font-size: 1.2em; 58 | font-family: Arial, Helvetica, sans-serif; 59 | padding: 20px; 60 | } 61 | 62 | .layout header::before { 63 | content: "Header"; 64 | } 65 | 66 | .layout section::before { 67 | content: "Section"; 68 | } 69 | 70 | .layout footer::before { 71 | content: "Footer"; 72 | } 73 | 74 | .layout aside::before { 75 | content: "Aside"; 76 | } -------------------------------------------------------------------------------- /week14/Assignment3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 |
1
15 |
2
16 |
3
17 |
4
18 |
5
19 |
6
20 |
7
21 |
8
22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /week14/Assignment3/main.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | .grid { 8 | background-color: #ddd; 9 | padding: 20px; 10 | width: 800px; 11 | height: 400px; 12 | display: grid; 13 | margin: 0 auto; 14 | grid-template-columns: 1fr 20fr 20fr 1fr; 15 | grid-template-rows: 25fr 2fr; 16 | gap: 15px; 17 | } 18 | 19 | .grid div { 20 | background-color: #403F3F; 21 | color: white; 22 | font-size: 1.2em; 23 | font-family: Arial, Helvetica, sans-serif; 24 | display: flex; 25 | align-items: center; 26 | justify-content: center; 27 | } -------------------------------------------------------------------------------- /week14/Assignment4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 |
1
15 |
2
16 |
3
17 |
4
18 |
5
19 |
6
20 |
7
21 |
8
22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /week14/Assignment4/main.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | padding: 0; 4 | margin: 0; 5 | } 6 | 7 | .grid { 8 | background-color: #ddd; 9 | padding: 20px; 10 | width: 800px; 11 | height: 400px; 12 | display: grid; 13 | margin: 0 auto; 14 | grid-template-columns: repeat(3, 1fr); 15 | grid-template-rows: repeat(6, 1fr); 16 | gap: 15px; 17 | } 18 | 19 | .grid div { 20 | background-color: #2196F3; 21 | display: flex; 22 | justify-content: center; 23 | align-items: center; 24 | color: white; 25 | font-size: 1.3em; 26 | font-family: Arial, Helvetica, sans-serif; 27 | } 28 | 29 | .eight { 30 | grid-row: 1 /2; 31 | grid-column: 1 /-1; 32 | } 33 | 34 | .two { 35 | grid-row: 2/3; 36 | grid-column: 1/span 2; 37 | } 38 | 39 | .three { 40 | grid-area: 2/3/3/4; 41 | } 42 | 43 | .four { 44 | grid-area: 3/1/4/span 1; 45 | } 46 | 47 | .five { 48 | grid-area: 3/2/span 3/span 2; 49 | } 50 | 51 | .six { 52 | grid-area: 4/1/5/2; 53 | } 54 | 55 | .seven { 56 | grid-area: 5/1/6/2; 57 | } 58 | 59 | .one { 60 | grid-area: 6/1/7/-1; 61 | } -------------------------------------------------------------------------------- /week14/Assignment5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 |
1
15 |
2
16 |
3
17 |
4
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /week14/Assignment5/main.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | padding: 0; 4 | margin: 0; 5 | } 6 | 7 | .grid { 8 | background-color: #ddd; 9 | padding: 20px; 10 | width: 800px; 11 | height: 400px; 12 | margin: 0 auto; 13 | display: grid; 14 | grid-template-columns: repeat(2, 1fr); 15 | grid-template-rows: 1fr 1fr; 16 | gap: 310px 15px; 17 | } 18 | 19 | .grid div { 20 | background-color: #E91E63; 21 | display: flex; 22 | align-items: center; 23 | justify-content: center; 24 | color: white; 25 | font-size: 1.3em; 26 | font-family: Arial, Helvetica, sans-serif; 27 | font-weight: bold; 28 | } -------------------------------------------------------------------------------- /week14/Assignment6/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 |
15 |
Osama Mohmaed
16 |
Full stack developer
17 |
18 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate dicta debitis iusto nesciunt in sit obcaecati 19 | harum eum? Enim a beatae ut doloremque tempore pariatur reiciendis veniam cupiditate praesentium repellendus. 20 | 21 |
22 |
23 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem itaque sed harum quam sit consectetur cum quo 24 | nisi. Odit, praesentium! Doloremque maiores sunt, saepe similique fugit dolor laborum minima eos. 25 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci labore ullam dolores et accusamus ipsa 26 | reprehenderit illum eligendi corporis sed. Sunt corporis cupiditate inventore ipsum rerum blanditiis 27 | voluptatibus saepe quisquam! 28 | 29 |
30 |
31 | 32 |
33 |
34 |
35 |
Osama Mohmaed
36 |
Full stack developer
37 |
38 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate dicta debitis iusto nesciunt in sit obcaecati 39 | 40 | 41 |
42 |
43 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem itaque sed harum quam sit consectetur cum quo 44 | nisi. Odit, praesentium! Doloremque maiores sunt, saepe similique fugit dolor laborum minima eos. 45 | 46 | 47 |
48 |
49 | 50 |
51 |
52 |
53 |
Osama Mohmaed
54 |
Full stack developer
55 |
56 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate dicta debitis iusto nesciunt in sit obcaecati 57 | harum eum? Enim a beatae ut doloremque tempore pariatur reiciendis veniam cupiditate praesentium repellendus. 58 | 59 |
60 |
61 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem itaque sed harum quam sit consectetur cum quo 62 | nisi. Odit, praesentium! Doloremque maiores sunt, saepe similique fugit dolor laborum minima eos. 63 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci labore ullam dolores et accusamus ipsa 64 | reprehenderit illum eligendi corporis sed. Sunt corporis cupiditate inventore ipsum rerum blanditiis 65 | voluptatibus saepe quisquam! 66 | 67 |
68 |
69 | 70 |
71 |
72 |
73 |
Osama Mohmaed
74 |
Full stack developer
75 |
76 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate dicta debitis iusto nesciunt in sit obcaecati 77 | harum eum? Enim a beatae ut doloremque tempore pariatur reiciendis veniam cupiditate praesentium repellendus. 78 | 79 |
80 |
81 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem itaque sed harum quam sit consectetur cum quo 82 | nisi. Odit, praesentium! Doloremque maiores sunt, saepe similique fugit dolor laborum minima eos. 83 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci labore ullam dolores et accusamus ipsa 84 | reprehenderit illum eligendi corporis sed. Sunt corporis cupiditate inventore ipsum rerum blanditiis 85 | voluptatibus saepe quisquam! 86 | 87 |
88 |
89 | 90 |
91 |
92 |
93 |
Osama Mohmaed
94 |
Full stack developer
95 |
96 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate dicta debitis iusto nesciunt in sit obcaecati 97 | harum eum? Enim a beatae ut doloremque tempore pariatur reiciendis veniam cupiditate praesentium repellendus. 98 | 99 |
100 |
101 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem itaque sed harum quam sit consectetur cum quo 102 | nisi. Odit, praesentium! Doloremque maiores sunt, saepe similique fugit dolor laborum minima eos. 103 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci labore ullam dolores et accusamus ipsa 104 | reprehenderit illum eligendi corporis sed. Sunt corporis cupiditate inventore ipsum rerum blanditiis 105 | voluptatibus saepe quisquam! 106 | 107 |
108 |
109 | 110 |
111 |
112 |
113 |
Osama Mohmaed
114 |
Full stack developer
115 |
116 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate dicta debitis iusto nesciunt in sit obcaecati 117 | harum eum? Enim a beatae ut doloremque tempore pariatur reiciendis veniam cupiditate praesentium repellendus. 118 | 119 |
120 |
121 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem itaque sed harum quam sit consectetur cum quo 122 | nisi. Odit, praesentium! Doloremque maiores sunt, saepe similique fugit dolor laborum minima eos. 123 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci labore ullam dolores et accusamus ipsa 124 | reprehenderit illum eligendi corporis sed. Sunt corporis cupiditate inventore ipsum rerum blanditiis 125 | voluptatibus saepe quisquam! 126 | 127 |
128 |
129 | 130 |
131 |
132 |
133 |
Osama Mohmaed
134 |
Full stack developer
135 |
136 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 137 |
138 |
139 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem itaque sed harum quam sit consectetur cum quo 140 | nisi. Odit, praesentium! Doloremque maiores sunt, saepe similique fugit dolor laborum minima eos. 141 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci labore ullam dolores et accusamus ipsa 142 | reprehenderit illum eligendi corporis sed. Sunt corporis cupiditate inventore ipsum rerum blanditiis 143 | voluptatibus saepe quisquam! 144 | 145 |
146 |
147 | 148 |
149 |
150 |
151 |
Osama Mohmaed
152 |
Full stack developer
153 |
154 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 155 |
156 |
157 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem itaque sed harum quam sit consectetur cum quo 158 | nisi. Odit, praesentium! Doloremque maiores sunt, saepe similique fugit dolor laborum minima eos. 159 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci labore ullam dolores et accusamus ipsa 160 | reprehenderit illum eligendi corporis sed. Sunt corporis cupiditate inventore ipsum rerum blanditiis 161 | voluptatibus saepe quisquam! 162 | 163 |
164 |
165 | 166 |
167 |
168 |
169 |
Osama Mohmaed
170 |
Full stack developer
171 |
172 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 173 |
174 |
175 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem itaque sed harum quam sit consectetur cum quo 176 | nisi. Odit, praesentium! Doloremque maiores sunt, saepe similique fugit dolor laborum minima eos. 177 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci labore ullam dolores et accusamus ipsa 178 | reprehenderit illum eligendi corporis sed. Sunt corporis cupiditate inventore ipsum rerum blanditiis 179 | voluptatibus saepe quisquam! 180 | 181 |
182 |
183 | 184 |
185 |
186 |
187 |
Osama Mohmaed
188 |
Full stack developer
189 |
190 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 191 | 192 |
193 |
194 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem itaque sed harum quam sit consectetur cum quo 195 | nisi. 196 | 197 |
198 |
199 | 200 |
201 |
202 |
203 | 204 | 205 | -------------------------------------------------------------------------------- /week14/Assignment6/main.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | padding: 0; 4 | margin: 0; 5 | font-family: Arial, Helvetica, sans-serif; 6 | font-weight: bold; 7 | font-size: 1em; 8 | line-height: 1.6em; 9 | 10 | } 11 | 12 | 13 | body { 14 | display: grid; 15 | grid-template-columns: 1fr 15fr 1fr; 16 | grid-template-areas: ". content ."; 17 | } 18 | 19 | .page { 20 | grid-area: content; 21 | display: grid; 22 | background-color: #EEE; 23 | padding: 60px; 24 | grid-template-columns: repeat(4, 1fr); 25 | grid-template-rows: repeat(15, 120px); 26 | gap: 10px; 27 | overflow: hidden; 28 | } 29 | 30 | .member-subhead { 31 | font-size: .8em; 32 | font-family: Arial, Helvetica, sans-serif; 33 | color: gray; 34 | overflow: hidden; 35 | } 36 | 37 | 38 | 39 | .member { 40 | border-bottom: 3px solid orangered; 41 | overflow: hidden; 42 | display: grid; 43 | gap: 15px; 44 | grid-template-columns: 1fr; 45 | grid-template-rows: 25px 20px 38% auto 20px; 46 | padding: 10px 20px 20px 20px; 47 | } 48 | 49 | 50 | .member .member-head { 51 | grid-area: 1 / 1 / span 1 / span 1; 52 | 53 | } 54 | 55 | .member .member-subhead { 56 | grid-area: 2 / 1 / span 1 / span 1; 57 | 58 | 59 | } 60 | 61 | .member .svg { 62 | grid-area: 5 / 1 / span 1 / span 1; 63 | justify-self: flex-end; 64 | align-self: center; 65 | transform: scale(.5); 66 | opacity: 1; 67 | 68 | } 69 | 70 | .member .content { 71 | grid-area: 3 / 1 / span 1 / span 1; 72 | overflow: hidden; 73 | align-self: center; 74 | line-height: 2em; 75 | 76 | } 77 | 78 | .member .content2 { 79 | grid-area: 4 / 1 / span 1 / span 1; 80 | overflow: hidden; 81 | line-height: 2.8em; 82 | align-self: flex-start; 83 | 84 | } 85 | 86 | .member-head { 87 | font-size: 1.2em; 88 | } 89 | 90 | .content2 { 91 | font-weight: normal; 92 | font-size: .9em; 93 | padding: 10px; 94 | 95 | } 96 | 97 | .member1, 98 | .member2, 99 | .member4, 100 | .member6, 101 | .member7, 102 | .member9, 103 | .member10 { 104 | background-color: white; 105 | 106 | } 107 | 108 | .member3, 109 | .member5, 110 | .member8 { 111 | background-color: black; 112 | color: white; 113 | 114 | } 115 | 116 | .member1 { 117 | grid-area: 1/1/span 3 / span 2; 118 | } 119 | 120 | .member2 { 121 | grid-area: 1/3/span 3/ span 1; 122 | } 123 | 124 | .member3 { 125 | grid-area: 1/4/span 13/span 1; 126 | } 127 | 128 | .member4 { 129 | grid-area: 4/1/span 10/ span 1; 130 | } 131 | 132 | .member5 { 133 | grid-area: 4 /2/span 5/span 2; 134 | } 135 | 136 | .member6 { 137 | grid-area: 9/2/span 5/span 2; 138 | } 139 | 140 | .member7 { 141 | grid-area: 14/1/span 2/span 1; 142 | } 143 | 144 | .member8 { 145 | grid-area: 14/2/span 2/span 1; 146 | } 147 | 148 | .member9 { 149 | grid-area: 14/3/span 2/span 1; 150 | } 151 | 152 | .member10 { 153 | grid-area: 14/4/span 2/span 1; 154 | } 155 | 156 | .member3 .svg, 157 | .member5 .svg, 158 | .member8 .svg { 159 | opacity: .4; 160 | } -------------------------------------------------------------------------------- /week14/Assignment6/vector.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /week15/Assignment1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
Elzero
14 | 15 | 16 | -------------------------------------------------------------------------------- /week15/Assignment1/main.css: -------------------------------------------------------------------------------- 1 | div { 2 | margin: 100px auto; 3 | width: 300px; 4 | height: 200px; 5 | display: flex; 6 | align-items: center; 7 | justify-content: center; 8 | font-weight: bold; 9 | font-size: 2em; 10 | color: #03A9F4; 11 | background-color: #EEE; 12 | border: 1px solid #BEBEBE; 13 | position: relative; 14 | 15 | } 16 | 17 | div::before { 18 | content: ""; 19 | position: absolute; 20 | display: block; 21 | width: 300px; 22 | height: 200px; 23 | background-color: #03A9F4; 24 | transform: rotate(-5deg); 25 | z-index: -1; 26 | } 27 | 28 | div::after { 29 | content: ""; 30 | position: absolute; 31 | display: block; 32 | width: 300px; 33 | height: 200px; 34 | background-color: #E91E63; 35 | transform: rotate(5deg); 36 | z-index: -1; 37 | } -------------------------------------------------------------------------------- /week15/Assignment2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
Elzero
14 | 15 | 16 | -------------------------------------------------------------------------------- /week15/Assignment2/main.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | padding: 0; 4 | margin: 0; 5 | } 6 | 7 | body { 8 | height: 100vh; 9 | } 10 | 11 | div { 12 | width: 200px; 13 | height: 200px; 14 | position: absolute; 15 | top: 50%; 16 | left: 50%; 17 | margin-left: -100px; 18 | margin-top: -100px; 19 | background-color: #EEE; 20 | border: 1px solid #BEBEBE; 21 | line-height: 200px; 22 | text-align: center; 23 | font-size: 2em; 24 | font-weight: bold; 25 | border-radius: 50%; 26 | } 27 | 28 | div::before { 29 | display: block; 30 | content: ""; 31 | position: absolute; 32 | width: calc(100% + 20px); 33 | height: calc(100% + 20px); 34 | border: 10px solid; 35 | border-color: #2196F3 transparent #2196F3 #2196F3; 36 | border-radius: 50%; 37 | top: 50%; 38 | left: 50%; 39 | transform: translate(-50%, -50%); 40 | z-index: -1; 41 | 42 | } 43 | 44 | div::after { 45 | display: block; 46 | content: ""; 47 | position: absolute; 48 | width: 100%; 49 | height: 100%; 50 | border: 10px solid; 51 | border-color: #E91E63 #E91E63 #E91E63 transparent; 52 | border-radius: 50%; 53 | top: 50%; 54 | left: 50%; 55 | transform: translate(-50%, -50%); 56 | z-index: -1; 57 | 58 | } -------------------------------------------------------------------------------- /week15/Assignment3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
Elzero
14 | 15 | 16 | -------------------------------------------------------------------------------- /week15/Assignment3/main.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | padding: 0; 4 | margin: 0; 5 | } 6 | 7 | body { 8 | height: 100vh; 9 | } 10 | 11 | div { 12 | width: 200px; 13 | height: 200px; 14 | position: absolute; 15 | top: 50%; 16 | left: 50%; 17 | margin-left: -100px; 18 | margin-top: -100px; 19 | background-color: #EEE; 20 | border: 1px solid #BEBEBE; 21 | line-height: 200px; 22 | text-align: center; 23 | font-size: 2em; 24 | font-weight: bold; 25 | border-radius: 50%; 26 | transition: .5s 27 | } 28 | 29 | div::before { 30 | display: block; 31 | content: ""; 32 | position: absolute; 33 | width: calc(100% + 20px); 34 | height: calc(100% + 20px); 35 | border: 10px solid; 36 | border-color: #2196F3 transparent #2196F3 #2196F3; 37 | border-radius: 50%; 38 | top: calc(50% - 120px); 39 | left: calc(50% - 120px); 40 | z-index: -1; 41 | transition: .5s transform .5s; 42 | } 43 | 44 | div::after { 45 | display: block; 46 | content: ""; 47 | position: absolute; 48 | width: 100%; 49 | height: 100%; 50 | border: 10px solid; 51 | border-color: #E91E63 #E91E63 #E91E63 transparent; 52 | border-radius: 50%; 53 | top: calc(50% - 110px); 54 | left: calc(50% - 110px); 55 | 56 | z-index: -1; 57 | transition: .5s transform; 58 | } 59 | 60 | div:hover::after, 61 | div:hover::before { 62 | transform: rotate(360deg); 63 | 64 | } -------------------------------------------------------------------------------- /week16/Assignment1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |

Elzero

14 | 15 | 16 | -------------------------------------------------------------------------------- /week16/Assignment1/main.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | :root { 8 | --backColor: #FF5722; 9 | --textColor: white; 10 | } 11 | 12 | h1 { 13 | width: 150px; 14 | margin: 100px auto; 15 | background-color: var(--backColor); 16 | color: var(--textColor); 17 | text-align: center; 18 | padding: 20px 10px; 19 | font-size: 40px; 20 | position: relative; 21 | 22 | 23 | 24 | } 25 | 26 | h1::before { 27 | content: ""; 28 | width: 20px; 29 | height: 20px; 30 | background-color: transparent; 31 | border-top: 100px solid transparent; 32 | border-bottom: 100px solid transparent; 33 | border-left: 20px solid transparent; 34 | border-right: 30px solid rgb(255, 255, 255); 35 | position: absolute; 36 | top: 50%; 37 | transform: translate(-50%, -50%) scaleY(1.3); 38 | right: -55px; 39 | 40 | } 41 | 42 | h1::after { 43 | content: ""; 44 | width: 20px; 45 | height: 20px; 46 | background-color: transparent; 47 | border-top: 100px solid transparent; 48 | border-bottom: 100px solid transparent; 49 | border-right: 20px solid transparent; 50 | border-left: 30px solid rgb(255, 255, 255); 51 | position: absolute; 52 | top: 50%; 53 | transform: translate(-50%, -50%) scaleY(1.3); 54 | left: 15px; 55 | } 56 | 57 | body::before { 58 | content: ""; 59 | width: 20px; 60 | height: 20px; 61 | background-color: transparent; 62 | border-right: 100px solid transparent; 63 | border-left: 100px solid transparent; 64 | border-top: 20px solid transparent; 65 | border-bottom: 18px solid white; 66 | position: absolute; 67 | top: 163px; 68 | transform: translate(-50%, -50%); 69 | left: 50%; 70 | z-index: 2; 71 | } 72 | 73 | body::after { 74 | content: ""; 75 | width: 20px; 76 | height: 20px; 77 | background-color: transparent; 78 | border-right: 100px solid transparent; 79 | border-left: 100px solid transparent; 80 | border-bottom: 20px solid transparent; 81 | border-top: 18px solid #ffffff; 82 | position: absolute; 83 | top: 125px; 84 | transform: translate(-50%, -50%); 85 | left: 50%; 86 | z-index: 2; 87 | } -------------------------------------------------------------------------------- /week16/Assignment2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |

Elzero

14 | 15 | 16 | -------------------------------------------------------------------------------- /week16/Assignment2/main.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | :root { 8 | --backColor: #009688; 9 | --textColor: white; 10 | } 11 | 12 | h1 { 13 | font-size: 2em; 14 | text-align: center; 15 | padding: 15px 15px 15px 25px; 16 | background-color: var(--backColor); 17 | color: var(--textColor); 18 | width: 150px; 19 | margin: 100px auto; 20 | position: relative; 21 | } 22 | 23 | h1::before { 24 | content: ""; 25 | width: 20px; 26 | height: 100%; 27 | background-color: var(--backColor); 28 | position: absolute; 29 | top: 0; 30 | left: -13px; 31 | transform: skewX(20deg); 32 | border-right: 5px solid white; 33 | overflow: hidden; 34 | } -------------------------------------------------------------------------------- /week16/Assignment3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /week16/Assignment3/main.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | 4 | 5 | .class { 6 | transform: matrix(3, 0.2679, 0, 3, 20, 100); 7 | } 8 | 9 | |||| 10 | |||| 11 | ↓↓↓↓ 12 | 13 | .class{ 14 | transform: scaleX(3) skewY(45deg) skewX(0) skaleY(3) translateX(20px) translateY(100px); 15 | } 16 | 17 | 18 | 19 | */ -------------------------------------------------------------------------------- /week16/Assignment4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /week16/Assignment4/main.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | padding: 0; 4 | margin: 0; 5 | } 6 | 7 | body { 8 | transform: rotate(45deg); 9 | } 10 | 11 | div { 12 | width: 200px; 13 | height: 200px; 14 | margin: 100px auto; 15 | background-color: black; 16 | border-right: 5px solid white; 17 | border-bottom: 5px solid white; 18 | position: relative; 19 | 20 | } 21 | 22 | div::before { 23 | content: "Elzero"; 24 | position: absolute; 25 | font-size: 22px; 26 | font-family: Arial, Helvetica, sans-serif; 27 | color: white; 28 | background-color: #607D8B; 29 | width: 265px; 30 | height: 260px; 31 | display: flex; 32 | justify-content: flex-start; 33 | align-items: flex-end; 34 | padding: 10px; 35 | border-bottom: 10px solid black; 36 | transform: rotate(-45deg) translate(2px, 84px); 37 | z-index: -1; 38 | } -------------------------------------------------------------------------------- /week16/Assignment5/FirstCase.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | body { 8 | perspective: 800px; 9 | } 10 | 11 | div { 12 | width: 200px; 13 | height: 200px; 14 | margin: 100px auto; 15 | position: relative; 16 | font-family: Arial, Helvetica, sans-serif; 17 | font-size: 30px; 18 | color: white; 19 | transform-style: preserve-3d; 20 | transition: transform 1s; 21 | 22 | 23 | } 24 | 25 | div:hover { 26 | transform: rotateY(-180deg); 27 | } 28 | 29 | div::before { 30 | 31 | content: "Back"; 32 | position: absolute; 33 | width: 100%; 34 | height: 100%; 35 | background-color: #1692FC; 36 | display: flex; 37 | justify-content: center; 38 | align-items: center; 39 | transform: rotateY(180deg); 40 | color: white; 41 | top: 0; 42 | left: 0; 43 | backface-visibility: hidden; 44 | } 45 | 46 | div::after { 47 | content: "Front"; 48 | position: absolute; 49 | width: 100%; 50 | height: 100%; 51 | background-color: #FA3664; 52 | display: flex; 53 | justify-content: center; 54 | align-items: center; 55 | top: 0; 56 | left: 0; 57 | backface-visibility: hidden; 58 | } -------------------------------------------------------------------------------- /week16/Assignment5/SecondCase.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | body { 8 | perspective: 800px; 9 | } 10 | 11 | div { 12 | width: 200px; 13 | height: 200px; 14 | margin: 100px auto; 15 | position: relative; 16 | font-family: Arial, Helvetica, sans-serif; 17 | font-size: 30px; 18 | color: white; 19 | transform-style: preserve-3d; 20 | transition: transform 1s; 21 | 22 | 23 | } 24 | 25 | div:hover { 26 | transform: rotateX(-180deg); 27 | } 28 | 29 | div::before { 30 | 31 | content: "Back"; 32 | position: absolute; 33 | width: 100%; 34 | height: 100%; 35 | background-color: #1692FC; 36 | display: flex; 37 | justify-content: center; 38 | align-items: center; 39 | transform: rotateX(180deg); 40 | color: white; 41 | top: 0; 42 | left: 0; 43 | backface-visibility: hidden; 44 | } 45 | 46 | div::after { 47 | content: "Front"; 48 | position: absolute; 49 | width: 100%; 50 | height: 100%; 51 | background-color: #FA3664; 52 | display: flex; 53 | justify-content: center; 54 | align-items: center; 55 | top: 0; 56 | left: 0; 57 | backface-visibility: hidden; 58 | } -------------------------------------------------------------------------------- /week16/Assignment5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /week17/Assignment1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /week17/Assignment1/main.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | body { 8 | height: 100vh; 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | 13 | } 14 | 15 | div { 16 | width: 50px; 17 | height: 50px; 18 | border: 12px solid #E9227D; 19 | border-left-color: transparent; 20 | border-radius: 50%; 21 | padding: 50px; 22 | position: relative; 23 | display: flex; 24 | justify-content: center; 25 | align-items: center; 26 | animation: spin 1s linear infinite; 27 | } 28 | 29 | div::before { 30 | content: ""; 31 | position: absolute; 32 | border: 12px solid #1190F6; 33 | border-radius: 50%; 34 | width: 100%; 35 | height: 100%; 36 | padding: 20px; 37 | border-right-color: transparent; 38 | } 39 | 40 | div::after { 41 | content: ""; 42 | position: absolute; 43 | border: 12px solid #F7AF00; 44 | border-radius: 50%; 45 | width: 100%; 46 | height: 100%; 47 | padding: 40px; 48 | border-bottom-color: transparent; 49 | } 50 | 51 | div:hover { 52 | animation-play-state: paused; 53 | } 54 | 55 | @keyframes spin { 56 | 0% { 57 | transform: rotate(0deg); 58 | } 59 | 60 | 100% { 61 | transform: rotate(360deg); 62 | } 63 | 64 | } -------------------------------------------------------------------------------- /week17/Assignment2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /week17/Assignment2/main.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | body { 8 | height: 100vh; 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | 13 | } 14 | 15 | div { 16 | width: 50px; 17 | height: 50px; 18 | border: 12px solid #1190F6; 19 | border-left-color: transparent; 20 | border-radius: 50%; 21 | padding: 50px; 22 | position: relative; 23 | display: flex; 24 | justify-content: center; 25 | align-items: center; 26 | animation: spin 1s linear infinite; 27 | } 28 | 29 | div::before { 30 | content: ""; 31 | position: absolute; 32 | border: 12px solid #F7AF00; 33 | border-radius: 50%; 34 | width: 100%; 35 | height: 100%; 36 | padding: 20px; 37 | border-right-color: transparent; 38 | animation: spin 3s linear infinite reverse; 39 | } 40 | 41 | div::after { 42 | content: ""; 43 | position: absolute; 44 | border: 12px solid black; 45 | border-radius: 50%; 46 | width: 100%; 47 | height: 100%; 48 | padding: 40px; 49 | border-bottom-color: transparent; 50 | animation: spin 2s linear infinite reverse; 51 | 52 | } 53 | 54 | div:hover, 55 | div:hover::before, 56 | div:hover::after { 57 | animation-play-state: paused; 58 | } 59 | 60 | @keyframes spin { 61 | 0% { 62 | transform: rotate(0deg); 63 | } 64 | 65 | 100% { 66 | transform: rotate(360deg); 67 | } 68 | 69 | } -------------------------------------------------------------------------------- /week17/Assignment3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /week17/Assignment3/main.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | body { 8 | height: 100vh; 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | 13 | } 14 | 15 | span { 16 | display: block; 17 | width: 50px; 18 | height: 50px; 19 | background-color: #DFDFF7; 20 | border: 8px solid black; 21 | border-left-color: #DFDFF7; 22 | border-radius: 50%; 23 | padding: 40px; 24 | animation: spin 1s linear infinite reverse; 25 | } 26 | 27 | @keyframes spin { 28 | 0% { 29 | transform: rotate(0deg); 30 | } 31 | 32 | 100% { 33 | transform: rotate(360deg); 34 | } 35 | 36 | } -------------------------------------------------------------------------------- /week17/Assignment4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /week17/Assignment4/main.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | .container { 8 | margin: 20px auto; 9 | display: flex; 10 | justify-content: space-around; 11 | align-items: center; 12 | width: 560px; 13 | height: 600px; 14 | 15 | } 16 | 17 | .parent-e { 18 | width: 250px; 19 | height: 400px; 20 | display: grid; 21 | grid-template-columns: repeat(5, 1fr); 22 | grid-template-rows: repeat(7, 1fr); 23 | position: relative; 24 | } 25 | 26 | 27 | 28 | .parent-e .one { 29 | grid-area: 1/1/2/span 5; 30 | } 31 | 32 | .parent-e .two { 33 | grid-area: 2/1/span 2/2; 34 | } 35 | 36 | .parent-e .three { 37 | grid-area: 4/1/5/span 5; 38 | } 39 | 40 | .parent-e .four { 41 | grid-area: 5/1/span 2/2; 42 | } 43 | 44 | .parent-e .five { 45 | grid-area: 7/1/8/span 5; 46 | } 47 | 48 | 49 | .parent-l { 50 | width: 250px; 51 | height: 400px; 52 | display: grid; 53 | grid-template-columns: repeat(10, 1fr); 54 | grid-template-rows: repeat(15, 1fr); 55 | position: relative; 56 | } 57 | 58 | .parent-l .six { 59 | grid-area: 1/1/span 13/3; 60 | } 61 | 62 | .parent-l .seven { 63 | grid-area: 14/1/16/span 10; 64 | } 65 | 66 | 67 | .one, 68 | .two, 69 | .three, 70 | .four, 71 | .five, 72 | .six, 73 | .seven { 74 | background-color: #323234; 75 | } 76 | 77 | .move-e, 78 | .move-l { 79 | position: absolute; 80 | width: 40px; 81 | height: 40px; 82 | background-color: #FEA604; 83 | } 84 | 85 | 86 | 87 | 88 | .move-e { 89 | right: 0; 90 | top: 0; 91 | transform: translate(-8px, 8px); 92 | animation: 10s linear infinite move-e; 93 | } 94 | 95 | @keyframes move-e { 96 | 0% { 97 | transform: translate(-8px, 8px); 98 | } 99 | 100 | 5% { 101 | transform: translate(-204px, 8px); 102 | } 103 | 104 | 10% { 105 | transform: translate(-204px, 179px); 106 | } 107 | 108 | 15% { 109 | transform: translate(-8px, 179px); 110 | } 111 | 112 | 20% { 113 | transform: translate(-204px, 179px); 114 | } 115 | 116 | 25% { 117 | transform: translate(-204px, 351px); 118 | } 119 | 120 | 30% { 121 | transform: translate(-8px, 351px); 122 | } 123 | 124 | 35% { 125 | transform: translate(-204px, 351px); 126 | } 127 | 128 | 40% { 129 | transform: translate(-204px, 8px); 130 | } 131 | 132 | 45% { 133 | transform: translate(-8px, 8px); 134 | } 135 | 136 | 50% { 137 | transform: translate(-8px, 8px); 138 | } 139 | 140 | } 141 | 142 | .move-l { 143 | right: 0; 144 | bottom: 0; 145 | transform: translate(-8px, -6px); 146 | opacity: 0; 147 | animation: move-l 10s linear infinite; 148 | } 149 | 150 | @keyframes move-l { 151 | 50% { 152 | opacity: 0; 153 | transform: translate(-8px, -6px); 154 | } 155 | 156 | 55% { 157 | opacity: 1; 158 | transform: translate(-8px, -6px); 159 | } 160 | 161 | 60% { 162 | opacity: 1; 163 | transform: translate(-205px, -6px); 164 | } 165 | 166 | 70% { 167 | opacity: 1; 168 | transform: translate(-205px, -351px); 169 | } 170 | 171 | 80% { 172 | opacity: 0; 173 | transform: translate(-205px, -351px); 174 | } 175 | 176 | 90% { 177 | opacity: 0; 178 | transform: translate(-205px, -6px); 179 | } 180 | 181 | 100% { 182 | opacity: 0; 183 | transform: translate(-8px, -6px); 184 | } 185 | 186 | 187 | 188 | } -------------------------------------------------------------------------------- /week18/Assignment1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
Elzero
14 |
Testing
15 |
Testing
16 |
Elzero
17 |

Testing

18 | 19 | 20 | -------------------------------------------------------------------------------- /week18/Assignment1/main.css: -------------------------------------------------------------------------------- 1 | div.main.red { 2 | color: red; 3 | } -------------------------------------------------------------------------------- /week18/Assignment2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 |
Testing
15 |
Elzero
16 |
17 |
18 |
19 |
Testing
20 |
21 |
22 |
Testing
23 | 24 | 25 | -------------------------------------------------------------------------------- /week18/Assignment2/main.css: -------------------------------------------------------------------------------- 1 | .parent>.child:last-child { 2 | color: red; 3 | } -------------------------------------------------------------------------------- /week18/Assignment3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 |
Testing
15 |
Testing
16 |
17 |
18 |
Elzero
19 |
20 |
21 |
22 |
Testing
23 |
24 |
Testing
25 |
26 |
Testing
27 | 28 | 29 | -------------------------------------------------------------------------------- /week18/Assignment3/main.css: -------------------------------------------------------------------------------- 1 | .parent>.baby:only-child { 2 | color: red; 3 | } -------------------------------------------------------------------------------- /week18/Assignment4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |

Testing

14 |
Testing
15 |
Testing
16 |
Elzero
17 |
Elzero
18 |
Elzero
19 |
Testing
20 |
Testing
21 |
22 |
Testing
23 |

Testing

24 |
Testing
25 |
Testing
26 |
Testing
27 |
Testing
28 |
29 | 30 | 31 | -------------------------------------------------------------------------------- /week18/Assignment4/main.css: -------------------------------------------------------------------------------- 1 | div[title]:nth-last-of-type(n+4) { 2 | color: red; 3 | } -------------------------------------------------------------------------------- /week18/Assignment5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 |

Testing

15 |
Testing
16 |

Testing

17 |
18 |
19 |

Testing

20 |
Elzero
21 |
22 |
23 |

Testing

24 |
Testing
25 |
26 |
27 |

Testing

28 |

Testing

29 |
Testing
30 |
31 |
32 |

Testing

33 |

Testing

34 |
Testing
35 |
36 |
37 |

Testing

38 |
Testing
39 |
Testing
40 |
41 | 42 | 43 | -------------------------------------------------------------------------------- /week18/Assignment5/main.css: -------------------------------------------------------------------------------- 1 | div:not(.no-need)>p+div[title="Elzero"]:not(.no-need):last-child { 2 | color: red; 3 | } -------------------------------------------------------------------------------- /week18/Assignment6/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 |
Testing
15 |
Testing
16 |
Elzero
17 |
Testing
18 |
19 |
20 |
Testing
21 |
Testing
22 |
Testing
23 |
Elzero
24 |
Testing
25 |

Testing

26 |
27 |
28 |
Testing
29 |
Testing
30 |
Testing
31 |
Testing
32 |
33 | 34 | 35 | -------------------------------------------------------------------------------- /week18/Assignment6/main.css: -------------------------------------------------------------------------------- 1 | div:not(.no-need) div:nth-last-of-type(2) { 2 | color: red; 3 | } -------------------------------------------------------------------------------- /week18/Assignment7/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 |

Testing

15 |
Testing
16 |

Testing

17 |

Testing

18 |
Elzero
19 |
Testing
20 |
21 |
22 |

Testing

23 |
Testing
24 |

Testing

25 |

Testing

26 |
Testing
27 |
Testing
28 |
29 |
30 |
Testing
31 |

Testing

32 |
Testing
33 |

Testing

34 |
Testing
35 |
Testing
36 |
Testing
37 |
38 |
39 |

Testing

40 |
Testing
41 |

Testing

42 |
Testing
43 |
Testing
44 |
45 |
46 |

Testing

47 |
Testing
48 |

Testing

49 |
Testing
50 |
Testing
51 |
52 | 53 | 54 | -------------------------------------------------------------------------------- /week18/Assignment7/main.css: -------------------------------------------------------------------------------- 1 | div:first-of-type div:nth-last-of-type(2) { 2 | color: red; 3 | } -------------------------------------------------------------------------------- /week18/Assignment8/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 |
Testing
15 |
Elzero
16 |
Elzero
17 |

Testing

18 |

Elzero

19 |

Testing

20 |
Testing
21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /week18/Assignment8/main.css: -------------------------------------------------------------------------------- 1 | div *:not(:nth-child(1)):not(:nth-child(4)):not(:nth-child(6)):not(:nth-child(7)) { 2 | color: red; 3 | } -------------------------------------------------------------------------------- /week19/Assignment1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
Elzero Web School
14 | 15 | 16 | -------------------------------------------------------------------------------- /week19/Assignment1/main.css: -------------------------------------------------------------------------------- 1 | @media print { 2 | .assign-one { 3 | font-size: 40px; 4 | } 5 | } -------------------------------------------------------------------------------- /week19/Assignment2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 |
15 |
Product One
16 |

This is product

17 |
18 |
19 |
Product Two
20 |

This is product

21 |
22 |
23 |
Product Three
24 |

This is product

25 |
26 |
27 |
Product Four
28 |

This is product

29 |
30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /week19/Assignment2/main.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | .parent { 8 | display: flex; 9 | flex-wrap: wrap; 10 | justify-content: space-evenly; 11 | align-items: center; 12 | width: 100%; 13 | text-align: center; 14 | 15 | } 16 | 17 | .container { 18 | width: 100%; 19 | background-color: #EEEEEE; 20 | margin: 20px; 21 | font-family: Arial, Helvetica, sans-serif; 22 | padding: 15px; 23 | line-height: 26px; 24 | } 25 | 26 | .header { 27 | font-weight: bold; 28 | } 29 | 30 | @media (min-width: 768px) { 31 | .container { 32 | width: calc(50% - 40px); 33 | } 34 | 35 | .header { 36 | color: #FF0000; 37 | } 38 | } 39 | 40 | @media (min-width: 992px) { 41 | .container { 42 | width: calc(25% - 40px); 43 | } 44 | 45 | .header { 46 | color: #1A9F93; 47 | } 48 | } -------------------------------------------------------------------------------- /week19/Assignment3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
14 |
15 |
Product One
16 |

This is product

17 |
18 |
19 |
Product Two
20 |

This is product

21 |
22 |
23 |
Product Three
24 |

This is product

25 |
26 |
27 |
Product Four
28 |

This is product

29 |
30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /week19/Assignment3/main.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | .parent { 8 | display: flex; 9 | flex-wrap: wrap; 10 | justify-content: space-evenly; 11 | align-items: center; 12 | width: 100%; 13 | text-align: center; 14 | 15 | } 16 | 17 | .container { 18 | width: 100%; 19 | background-color: #EEEEEE; 20 | margin: 20px; 21 | font-family: Arial, Helvetica, sans-serif; 22 | padding: 15px; 23 | line-height: 26px; 24 | } 25 | 26 | .header { 27 | font-weight: bold; 28 | } 29 | 30 | @media (min-width: 768px) { 31 | .parent { 32 | display: grid; 33 | grid-template-columns: 10px 1fr 1fr 1fr 10px; 34 | grid-gap: 20px; 35 | grid-template-rows: 1fr 1fr; 36 | margin-top: 20px; 37 | 38 | } 39 | 40 | .container { 41 | margin: 0; 42 | padding: 10px; 43 | } 44 | 45 | .container:nth-child(1) { 46 | grid-area: 1/2/2/span 3; 47 | } 48 | 49 | .container:nth-child(2) { 50 | grid-area: 2/2/3/3; 51 | } 52 | 53 | .container:nth-child(3) { 54 | grid-area: 2/3/3/4; 55 | } 56 | 57 | .container:nth-child(4) { 58 | grid-area: 2/4/3/5; 59 | } 60 | 61 | .header { 62 | color: #FF0000; 63 | } 64 | } 65 | 66 | @media (min-width: 992px) { 67 | .parent { 68 | grid-template-columns: 10px 1fr 1fr 1fr 1fr 10px; 69 | grid-template-rows: 1fr 1fr 1fr; 70 | 71 | 72 | } 73 | 74 | .container:nth-child(1) { 75 | grid-area: 1/2/2/span 4; 76 | } 77 | 78 | .container:nth-child(2) { 79 | grid-area: 2/2/3/span 2; 80 | } 81 | 82 | .container:nth-child(3) { 83 | grid-area: 2/4/3/span 2; 84 | } 85 | 86 | .container:nth-child(4) { 87 | grid-area: 3/2/4/span 4; 88 | } 89 | 90 | .header { 91 | color: #009688; 92 | } 93 | } -------------------------------------------------------------------------------- /week2/Assignment1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
Normal Div
12 |
Normal Div
13 |
Normal Div
14 | 15 | -------------------------------------------------------------------------------- /week2/Assignment1/main.css: -------------------------------------------------------------------------------- 1 | div{ 2 | width: 500px; 3 | margin : 20px auto; 4 | padding: 20px; 5 | background-color:rgb(138, 44, 226); 6 | background-color:#8a2ce2; 7 | background-color:hsl(271, 76%, 53%); 8 | } 9 | .assign-1-shape-2{ 10 | background-color: rgb(138 43 226 /50%); 11 | } 12 | .assign-1-shape-3{ 13 | background-color: rgb(138 43 226 /10%); 14 | } 15 | -------------------------------------------------------------------------------- /week2/Assignment2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
Shape 1
12 |
Shape 2
13 |
Shape 3
14 |
Shape 4
15 | 16 | -------------------------------------------------------------------------------- /week2/Assignment2/main.css: -------------------------------------------------------------------------------- 1 | div{ 2 | width: 400px; 3 | height: 400px; 4 | background-image: url(../../images/css-assignment-5-8.png); 5 | color: white; 6 | margin: 50px; 7 | } 8 | .assign-2-shape-1{ 9 | background-repeat: no-repeat; 10 | } 11 | .assign-2-shape-2{ 12 | background-repeat: repeat-y; 13 | } 14 | .assign-2-shape-3{ 15 | background-repeat: repeat-x; 16 | } 17 | -------------------------------------------------------------------------------- /week2/Assignment3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
Shape 1
12 |
Shape 2
13 |
Shape 3
14 |
Shape 4
15 | 16 | -------------------------------------------------------------------------------- /week2/Assignment3/main.css: -------------------------------------------------------------------------------- 1 | div{ 2 | width: 400px; 3 | height: 400px; 4 | background-image: url(../../images/css-assignment-5-8.png); 5 | 6 | margin: 50px; 7 | } 8 | .assign-3-shape-1{ 9 | background-repeat: no-repeat; 10 | } 11 | .assign-3-shape-2{ 12 | background-repeat: repeat-y; 13 | background-position: right; 14 | } 15 | .assign-3-shape-3{ 16 | background-repeat: repeat-x; 17 | background-position: bottom; 18 | } 19 | -------------------------------------------------------------------------------- /week2/Assignment4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
Shape 1
12 |
Shape 2
13 |
Shape 3
14 |
Shape 4
15 | 16 | -------------------------------------------------------------------------------- /week2/Assignment4/main.css: -------------------------------------------------------------------------------- 1 | div{ 2 | width: 400px; 3 | height: 400px; 4 | background-image: url(../../images/css-assignment-5-8.png); 5 | margin: 50px; 6 | } 7 | .assign-4-shape-1{ 8 | background-repeat: no-repeat; 9 | background-size: 80%; 10 | } 11 | .assign-4-shape-2{ 12 | background-repeat: no-repeat; 13 | background-size: 80% 100%; 14 | background-position: right; 15 | } 16 | .assign-4-shape-3{ 17 | background-repeat: no-repeat; 18 | background-size: 100% 80%; 19 | background-position: bottom; 20 | } 21 | .assign-4-shape-4{ 22 | background-repeat: no-repeat; 23 | background-size: 50%; 24 | background-position: right bottom; 25 | } -------------------------------------------------------------------------------- /week20/Assignment1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /week20/Assignment1/main.css: -------------------------------------------------------------------------------- 1 | .center-flex { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | } 6 | 7 | .center-position { 8 | position: absolute; 9 | top: 50%; 10 | left: 50%; 11 | transform: translate(-50%, -50%); 12 | } 13 | 14 | .circle-100 { 15 | width: 100px; 16 | height: 100px; 17 | border-radius: 50%; 18 | } 19 | 20 | .circle-200 { 21 | width: 200px; 22 | height: 200px; 23 | border-radius: 50%; 24 | } -------------------------------------------------------------------------------- /week20/Assignment2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 |
Elzero
14 |
Elzero
15 |
Elzero
16 |
Elzero
17 | 18 | 19 | -------------------------------------------------------------------------------- /week20/Assignment2/main.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | .arrow { 8 | background-color: #DDD; 9 | padding: 20px; 10 | margin: 30px auto; 11 | width: 400px; 12 | height: 60px; 13 | position: relative; 14 | } 15 | 16 | .arrow::after { 17 | content: ""; 18 | display: block; 19 | width: 0; 20 | height: 0; 21 | border-left: 20px solid transparent; 22 | border-right: 20px solid transparent; 23 | border-bottom: 20px solid #DDD; 24 | position: absolute; 25 | } 26 | 27 | .top::after { 28 | top: -20px; 29 | left: 50%; 30 | transform: translateX(-50%); 31 | } 32 | 33 | .right::after { 34 | top: 50%; 35 | right: -30px; 36 | transform: translateY(-50%) rotate(90deg); 37 | } 38 | 39 | .bottom::after { 40 | bottom: -20px; 41 | left: 50%; 42 | transform: translateX(-50%)rotate(180deg); 43 | } 44 | 45 | .left::after { 46 | top: 50%; 47 | left: -30px; 48 | transform: translateY(-50%) rotate(-90deg); 49 | } -------------------------------------------------------------------------------- /week3/Assignment1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
Shape1
12 |
Shape2
13 |
Shape3
14 | 15 | -------------------------------------------------------------------------------- /week3/Assignment1/main.css: -------------------------------------------------------------------------------- 1 | div{ 2 | display: inline-block; 3 | border-width: 5px; 4 | background-color: #EEE; 5 | outline: 5px solid black; 6 | margin : 10px; 7 | padding: 10px; 8 | } 9 | .shape1{ 10 | border-style: solid; 11 | border-color: red; 12 | } 13 | .shape2{ 14 | border-style: solid; 15 | border-color: blue green; 16 | } 17 | .shape3{ 18 | border-style: dashed; 19 | border-color: red green blue yellow; 20 | } -------------------------------------------------------------------------------- /week3/Assignment2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
This Is Important Note
12 |
This Is Important Note
13 |
This Is Important Note
14 | 15 | -------------------------------------------------------------------------------- /week3/Assignment2/main.css: -------------------------------------------------------------------------------- 1 | div{ 2 | background-color: #EEE; 3 | width: 400px; 4 | border-width: 5px; 5 | outline: 10px solid #EEE; 6 | margin: 30px; 7 | padding: 10px; 8 | } 9 | .s1{ 10 | border-left: 5px solid red; 11 | } 12 | .s2{ 13 | visibility: hidden; 14 | } 15 | .s3{ 16 | border-left: 5px solid #1ab088; 17 | } -------------------------------------------------------------------------------- /week4/Assignment1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 |
This Is Child Title
13 | Child Title 14 |

Paragraph Content

15 |
16 |
Section Title
17 | 18 | -------------------------------------------------------------------------------- /week4/Assignment1/main.css: -------------------------------------------------------------------------------- 1 | .parent .child .title { 2 | color: red; 3 | } 4 | .parent .title { 5 | color: blue; 6 | } 7 | p, 8 | .title{ 9 | color: green; 10 | } 11 | -------------------------------------------------------------------------------- /week4/Assignment2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
Title One
12 |
Title Two With More Words
13 |
Title Three With Many Many Words
14 |
Title Three With Many Many Words Title Three With Many Many Words Title Three With Many Many Words Title Three With Many Many Words Title Three With Many Many Words
15 | 16 | -------------------------------------------------------------------------------- /week4/Assignment2/main.css: -------------------------------------------------------------------------------- 1 | div{ 2 | width:fit-content; 3 | margin :10px 5px; 4 | padding:10px; 5 | max-width: 400px; 6 | background-color: brown; 7 | color: white; 8 | overflow: hidden; 9 | } -------------------------------------------------------------------------------- /week5/Assignment1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
Elzero Web School
12 | 13 | -------------------------------------------------------------------------------- /week5/Assignment1/main.css: -------------------------------------------------------------------------------- 1 | div{ 2 | font-size: 100px; 3 | text-shadow:3px 2px 0px orangered, 6px 3px 0px rgb(0 122 244), 9px 4px 0px rebeccapurple; 4 | } -------------------------------------------------------------------------------- /week5/Assignment2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |

elzero Web school

12 |

elzero Web school

13 |

elzero Web school

14 | 15 | -------------------------------------------------------------------------------- /week5/Assignment2/main.css: -------------------------------------------------------------------------------- 1 | p{ 2 | text-align: center; 3 | font-size: 50px; 4 | } 5 | .one{ 6 | text-transform: uppercase; 7 | } 8 | .two{ 9 | text-transform: capitalize; 10 | } 11 | .three{ 12 | text-transform: lowercase; 13 | } -------------------------------------------------------------------------------- /week5/Assignment3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. 13 | Ea itaque fugit vitae incidunt quis dolores? Id alias 14 | eveniet sequi perspiciatis iusto impedit, 15 | accusamus maxime reprehenderit blanditiis adipisci sapiente hic velit. 16 |
17 |
18 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. 19 | Ea itaque fugit vitae incidunt quis dolores? Id alias 20 | eveniet sequi perspiciatis iusto impedit, 21 | accusamus maxime reprehenderit blanditiis adipisci sapiente hic velit. 22 |
23 |
24 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. 25 | Ea itaque fugit vitae incidunt quis dolores? Id alias 26 | eveniet sequi perspiciatis iusto impedit, 27 | accusamus maxime reprehenderit blanditiis adipisci sapiente hic velit. 28 |
29 | 30 | -------------------------------------------------------------------------------- /week5/Assignment3/main.css: -------------------------------------------------------------------------------- 1 | div{ 2 | background-color: #EEE; 3 | padding: 20px; 4 | margin :20px auto; 5 | font-size: 20px; 6 | width: 400px; 7 | 8 | } 9 | .modify-1{ 10 | overflow: hidden; 11 | white-space: nowrap; 12 | border-right: 100px solid #EEE; 13 | width:298px; 14 | 15 | } 16 | .modify-2{ 17 | 18 | overflow: hidden; 19 | text-overflow: ellipsis; 20 | white-space: nowrap; 21 | 22 | } -------------------------------------------------------------------------------- /week5/Assignment4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | elzero 12 | 13 | -------------------------------------------------------------------------------- /week5/Assignment4/main.css: -------------------------------------------------------------------------------- 1 | a{ 2 | display: block; 3 | background-color:darkcyan; 4 | border-bottom:15px solid darkslategray; 5 | color: white; 6 | text-transform: capitalize; 7 | font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 8 | width: fit-content; 9 | text-decoration: none; 10 | font-size: 80px; 11 | padding : 30px 50px; 12 | margin: auto; 13 | 14 | } -------------------------------------------------------------------------------- /week6/Assignment1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 |

This Is Paragraph

13 |
14 | 15 | -------------------------------------------------------------------------------- /week6/Assignment1/main.css: -------------------------------------------------------------------------------- 1 | div{ 2 | background-color: white; 3 | padding: 30px; 4 | border:3.5px solid rgb(255, 132, 0); 5 | font-size: 30px; 6 | text-align: center; 7 | } 8 | p{ 9 | background-color: #DDD; 10 | border: inherit; 11 | padding: inherit; 12 | } -------------------------------------------------------------------------------- /week6/Assignment2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 |
Elzero Web School
15 |
Elzero Web School
16 |
Elzero Web School
17 | 18 | -------------------------------------------------------------------------------- /week6/Assignment2/main.css: -------------------------------------------------------------------------------- 1 | div{ 2 | font-size: 50px; 3 | text-align: center; 4 | line-height: 1.6; 5 | } 6 | .one{ 7 | font-family: "Open Sans", sans-serif; 8 | font-weight: 300; 9 | font-style: italic; 10 | } 11 | .two{ 12 | font-family: 'Cairo', sans-serif; 13 | } 14 | .three{ 15 | font-family: 'Jomhuria', cursive; 16 | } -------------------------------------------------------------------------------- /week6/Assignment3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
Elzero Web School
12 |
Elzero Web School
13 |
Elzero Web School
14 | 15 | -------------------------------------------------------------------------------- /week6/Assignment3/main.css: -------------------------------------------------------------------------------- 1 | html{ 2 | font-size: 20px; 3 | } 4 | div{ 5 | text-align: center; 6 | line-height: 2; 7 | } 8 | .one{ 9 | font-size: 2.5rem; 10 | } 11 | .two{ 12 | font-size: 2rem; 13 | } 14 | .three{ 15 | font-size: 1.5rem; 16 | } -------------------------------------------------------------------------------- /week7/Assignment1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 |
Full Width
13 |
1/3
14 |
1/3
15 |
1/3
16 |
1/2
17 |
1/2
18 |
1/4
19 |
1/4
20 |
1/4
21 |
1/4
22 | 23 |
24 | 25 | -------------------------------------------------------------------------------- /week7/Assignment1/main.css: -------------------------------------------------------------------------------- 1 | .parent{ 2 | width: 800px; 3 | padding: 0px; 4 | background-color: #EEE; 5 | text-align: center; 6 | } 7 | .parent div{ 8 | background-color: #DDD; 9 | float: left; 10 | padding: 10px 0px; 11 | margin:15px 0px 15px 15px; 12 | } 13 | .full-width{ 14 | width: calc(100% - 2*15px) ; 15 | } 16 | .one-third{ 17 | width:calc(((100%) - (15px * 4))/3); 18 | } 19 | .one-half{ 20 | width: calc(((100%) - (15px * 3))/2); 21 | } 22 | .one-forth{ 23 | width:calc((100% - 15px *5)/4); 24 | } 25 | .clear{ 26 | display: block; 27 | clear: both; 28 | } -------------------------------------------------------------------------------- /week7/Assignment2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
Normal
12 |
One
13 |
Two
14 | 15 | -------------------------------------------------------------------------------- /week7/Assignment2/main.css: -------------------------------------------------------------------------------- 1 | div { 2 | margin: 20px auto; 3 | width: 300px; 4 | font-weight: bold; 5 | font-size: 1rem; 6 | padding: 20px; 7 | background-color: #CCC; /* Get The Background From Image */ 8 | color: black; 9 | } 10 | .one{ 11 | background-color: rgb(0 0 0 / .1); 12 | } 13 | .two{ 14 | opacity: .1; 15 | } -------------------------------------------------------------------------------- /week8/Assignment1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 | 16 | -------------------------------------------------------------------------------- /week8/Assignment1/main.css: -------------------------------------------------------------------------------- 1 | div{ 2 | width:100px; 3 | height:100px; 4 | position: absolute; 5 | } 6 | .red{ 7 | background-color:#f44336; 8 | top: 40px; 9 | left: 40px; 10 | z-index: 3; 11 | } 12 | .green{ 13 | background-color:#009688; 14 | top:30px; 15 | left: 30px; 16 | z-index: 2; 17 | } 18 | 19 | .blue{ 20 | background-color:#03a9f4; 21 | top: 20px; 22 | left: 20px; 23 | z-index: 1; 24 | } 25 | .black{ 26 | background-color:#333333; 27 | top: 30px; 28 | left: 20px; 29 | z-index: 0; 30 | } -------------------------------------------------------------------------------- /week8/Assignment2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod, sed. Ea ipsum 13 | similique quasi rem, fugiat voluptatibus reiciendis nam debitis earum quo veniam 14 | laudantium mollitia atque! Laborum ea nam doloribus. 15 | 1 16 | 2 17 | 3 18 | 4 19 |
20 | 21 | -------------------------------------------------------------------------------- /week8/Assignment2/main.css: -------------------------------------------------------------------------------- 1 | div{ 2 | width:400px; 3 | margin: auto; 4 | padding :20px; 5 | margin-top: 20px; 6 | background-color:#eeeeee; 7 | border-top: 3px solid #f3554a; 8 | border-right: 3px solid #319ef4; 9 | border-bottom: 3px solid #f3554a; 10 | border-left: 3px solid #319ef4; 11 | position: relative; 12 | 13 | } 14 | span{ 15 | background-color: #319ef4; 16 | position: absolute; 17 | padding:5px 15px; 18 | color: white; 19 | } 20 | .top-left{ 21 | top:-15%; 22 | left:-5%; 23 | border-right: 3px solid #f3554a; 24 | } 25 | .top-right{ 26 | top: -15%; 27 | right: -5%; 28 | border-left:3px solid #f3554a; 29 | } 30 | .bottom-left{ 31 | bottom: -14%; 32 | left: -5%; 33 | border-right: 3px solid #f3554a; 34 | } 35 | .bottom-right{ 36 | bottom: -14%; 37 | right: -5%; 38 | border-left:3px solid #f3554a; 39 | } -------------------------------------------------------------------------------- /week8/Assignment3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 36 | 37 | -------------------------------------------------------------------------------- /week8/Assignment3/main.css: -------------------------------------------------------------------------------- 1 | .list-container{ 2 | width: 400px; 3 | margin: auto; 4 | background-color: white; 5 | list-style: none; 6 | padding :20px; 7 | } 8 | 9 | .ul-circle{ 10 | list-style-type: circle; 11 | list-style-position: inside; 12 | } 13 | li .ol-roman{ 14 | list-style-type:upper-roman; 15 | } 16 | li .ol-decimal{ 17 | list-style-type:decimal; 18 | } 19 | ul li{ 20 | margin: 10px; 21 | padding: 10px; 22 | background-color: #EEE; 23 | } 24 | ul li ul, 25 | ul li ol { 26 | margin:5px; 27 | padding:5px 20px; 28 | background-color: #EEE; 29 | } 30 | ul li ol li, 31 | ul li ul li{ 32 | margin:5px; 33 | padding:5px; 34 | background-color: white; 35 | } 36 | 37 | 38 | -------------------------------------------------------------------------------- /week8/Assignment4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 42 | 43 | 44 | 45 | 46 | 47 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 61 | 62 | 63 | 64 | 65 | 66 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 80 | 81 | 82 |
Developers Rating
AvatarGroupNamePointsControl
NinjaAhmed Mohamed120 29 | View 30 | Delete 31 |
ShadesShady Nabil180 39 | View 40 | Delete 41 |
Eman Mohamed160 48 | View 49 | Delete 50 |
ValhalaMohamed Ibrahim110 58 | View 59 | Delete 60 |
Noor Atef110 67 | View 68 | Delete 69 |
UnionMahmoud Adel90 77 | View 78 | Delete 79 |
83 | 84 | -------------------------------------------------------------------------------- /week8/Assignment4/main.css: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family: Arial, Helvetica, sans-serif; 3 | 4 | } 5 | table{ 6 | width:700px ; 7 | background-color: white; 8 | border-bottom: 3px solid #2ba89c; 9 | margin: auto; 10 | 11 | } 12 | table thead{ 13 | font-weight: bold; 14 | background-color: #404040; 15 | 16 | } 17 | 18 | th{ 19 | padding :10px; 20 | color: white; 21 | } 22 | td{ 23 | 24 | padding :30px; 25 | background-color: #EEE; 26 | position: relative; 27 | } 28 | caption{ 29 | font-weight: bold; 30 | padding: 10px; 31 | } 32 | img{ 33 | width: 80px; 34 | position: absolute; 35 | left:0px; 36 | top:15px 37 | } 38 | .view{ 39 | background-color: #03a9f4; 40 | margin-left: 16px; 41 | } 42 | .delete{ 43 | background-color: #e91e63; 44 | } 45 | a{ 46 | font-weight: bold; 47 | text-decoration: none; 48 | padding: 5px 10px; 49 | font-size: 12px; 50 | color:white; 51 | } 52 | /*view : #03a9f4 delete : #e91e63 */ -------------------------------------------------------------------------------- /week9/Assignment1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
One
12 |
13 |
Three
14 | 15 | -------------------------------------------------------------------------------- /week9/Assignment1/main.css: -------------------------------------------------------------------------------- 1 | div{ 2 | margin: 20px auto; 3 | width: 300px; 4 | height: 60px; 5 | background-color: #eeeeee; 6 | text-align: center; 7 | line-height: 60px; 8 | } 9 | div:empty{ 10 | background-color: #ff0000; 11 | } -------------------------------------------------------------------------------- /week9/Assignment2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
1 Hello, Welcome To Elzero Web School
12 | 13 | -------------------------------------------------------------------------------- /week9/Assignment2/main.css: -------------------------------------------------------------------------------- 1 | div{ 2 | margin: auto; 3 | background-color: #DDD; 4 | width: fit-content; 5 | padding: 20px; 6 | counter-increment: count; 7 | position: relative; 8 | } 9 | div::before{ 10 | content:counter(count); 11 | position: absolute; 12 | left: -15px; 13 | top: 10px; 14 | background-color: red; 15 | padding: 10px; 16 | color: white; 17 | 18 | } 19 | -------------------------------------------------------------------------------- /week9/Assignment3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |

This Is Very Very Long Comment Number One

12 |

This Is Very Very Long Comment Number Two

13 |

This Is Very Very Long Comment Number Three

14 | 15 | -------------------------------------------------------------------------------- /week9/Assignment3/main.css: -------------------------------------------------------------------------------- 1 | p{ 2 | background-color: #EEE; 3 | border-left: 5px solid #e91e63; 4 | padding :20px; 5 | margin: 20px auto; 6 | text-align: center; 7 | width: 400px; 8 | position: relative; 9 | } 10 | p::before{ 11 | content: attr(data-person); 12 | position: absolute; 13 | width: 80px; 14 | height: 40px; 15 | background-color:#EEE; 16 | top: calc(50% - 20px); 17 | left: -107px; 18 | text-align: center; 19 | line-height: 40px; 20 | 21 | } 22 | p::after{ 23 | content: ""; 24 | position: absolute; 25 | width: 0; 26 | height: 0; 27 | border-color: transparent #e91e63 transparent transparent; 28 | border-style: solid; 29 | border-width: 13px; 30 | top: calc(50% - 13px); 31 | left: -27px; 32 | } -------------------------------------------------------------------------------- /week9/Assignment4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |

This Is Very Very Long Product Title

12 |

This Is Very Very Long Product Title

13 |

This Is Very Very Long Product Title

14 |

This Is Very Very Long Product Title

15 |

This Is Very Very Long Product Title

16 |

This Is Very Very Long Product Title

17 | 18 | -------------------------------------------------------------------------------- /week9/Assignment4/main.css: -------------------------------------------------------------------------------- 1 | p{ 2 | background-color: #EEE; 3 | padding: 20px; 4 | width: fit-content; 5 | margin: 20px auto; 6 | text-align: center; 7 | position: relative; 8 | border-right: 4px solid #f44336; 9 | counter-increment: countp; 10 | } 11 | p::before{ 12 | content: counter(countp); 13 | position: absolute; 14 | width: 58px; 15 | height: 58px; 16 | background-color: #f44336; 17 | color: white; 18 | line-height: 58px; 19 | top: calc(50% - 29px); 20 | left: -52px; 21 | } --------------------------------------------------------------------------------