├── .gitignore ├── 404Page ├── index.html ├── script.js └── style.scss ├── Covid-page ├── css │ └── style.css ├── img │ ├── corona-1.svg │ ├── corona-2.svg │ ├── header.png │ ├── vaksin-1.svg │ └── vaksin-2.svg └── index.html ├── DesertInfo ├── imgs │ ├── daniele-colucci-OtXJhYjbKeg-unsplash.jpg │ ├── des.jpg │ └── icon.png ├── index.html └── main.css ├── Documentation page ├── index.html ├── style.css └── style.js ├── Glassweb ├── css │ └── style.css └── glassweb1.html ├── How TO - Portfolio Gallery.html ├── JavaScript └── disable_all.js ├── Landing Page ├── img │ ├── Elon_Musk.png │ └── Logo.png ├── index.html └── style.css ├── Login Page ├── images │ └── logo.png ├── index.html └── styles.css ├── README.md ├── RGBBackground.html ├── RandomCatsGenerator.html ├── Sandi L. Putra ├── Shrijan26_clock.html ├── Sidebar.html ├── Simple Biodata ├── illus.png ├── index.html └── style.css ├── Snake-Game ├── css │ └── style.css ├── img │ └── bg.jpg ├── index.html ├── js │ └── index.js └── music │ ├── food.mp3 │ ├── gameover.mp3 │ ├── move.mp3 │ └── music.mp3 ├── SurveyForm.html ├── TiledInfoPortfolio.html ├── ahmadk-simple-todolist.html ├── alfin ├── ayya2 ├── buttonHrishabh.html ├── calculate_aris.html ├── calculator.html ├── calculator_rifqi.html ├── contact-form.html ├── diamond.html ├── eventpage_tmahato.html ├── form_rifqi.html ├── formulir_aris.html ├── garlek123.html ├── html-emoji.html ├── html-video ├── indexfarrel.html ├── isallkun.html ├── ival.html ├── konversi_aris.html ├── landingPage.html ├── marco2 ├── palindrome ├── portfolio-page_tmahato.html ├── pragya-sharma11(web page) ├── index.html ├── script.js └── style.css ├── project1.html ├── project2.html ├── russss.html ├── timeline.html └── yanuar_dark.html /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /404Page/script.js: -------------------------------------------------------------------------------- 1 | var 2 | yetiTL, chatterTL, 3 | furLightColor = "#FFF", 4 | furDarkColor = "#67b1e0", 5 | skinLightColor = "#ddf1fa", 6 | skinDarkColor = "#88c9f2", 7 | lettersSideLight = "#3A7199", 8 | lettersSideDark = "#051d2c", 9 | lettersFrontLight = "#67B1E0", 10 | lettersFrontDark = "#051d2c", 11 | lettersStrokeLight = "#265D85", 12 | lettersStrokeDark = "#031219", 13 | mouthShape1 = "M149 115.7c-4.6 3.7-6.6 9.8-5 15.6.1.5.3 1.1.5 1.6.6 1.5 2.4 2.3 3.9 1.7l11.2-4.4 11.2-4.4c1.5-.6 2.3-2.4 1.7-3.9-.2-.5-.4-1-.7-1.5-2.8-5.2-8.4-8.3-14.1-7.9-3.7.2-5.9 1.1-8.7 3.2z", 14 | mouthShape2 = "M161.2 118.9c0 2.2-1.8 4-4 4s-4-1.8-4-4c0-1 .4-2 1.1-2.7.7-.8 1.8-1.3 2.9-1.3 2.2 0 4 1.7 4 4z", 15 | mouthShape3 = "M150.2 118.3c-4.6 3.7-7.5 6.4-6.3 12.3.1.5.1.6.3 1.1.6 1.5 2.4 2.3 3.9 1.7 0 0 7.9-4.3 10.7-5.5s11.6-3.3 11.6-3.3c1.5-.6 2.3-2.4 1.7-3.9-.2-.5-.2-.6-.4-1.1-2.8-5.2-7.1-4.9-12.9-4.6-3.7.4-6.3 1.5-8.6 3.3z", 16 | mouthShape4 = "M149.2 116.7c-4.6 3.7-6.7 8.8-5.2 14.6.1.3.1.5.2.8.6 1.5 2.4 2.3 3.9 1.7l11.2-4.4 11.2-4.4c1.5-.6 2.3-2.4 1.7-3.9-.1-.3-.2-.5-.4-.7-2.8-5.2-8.2-7.2-14-6.9-3.6.2-5.9 1.1-8.6 3.2z" 17 | ; 18 | 19 | chatterTL = new TimelineMax({paused: true, repeat: -1, yoyo: true}); 20 | chatterTL 21 | .to(['#mouthBG', '#mouthPath', '#mouthOutline'], .1, {morphSVG: mouthShape4}, "0") 22 | //.to('#armR', .1, {x: 2, ease: Linear.easeNone}, "0") 23 | .to('#chin', .1, {y: 1.5}, "0") 24 | ; 25 | 26 | yetiTL = new TimelineMax({paused: true, repeat: -1, repeatDelay: 0, delay: 0}); 27 | yetiTL 28 | .addCallback(function() { 29 | chatterTL.play(); 30 | }, "0") 31 | 32 | .to(['#armL', '#flashlightFront'], .075, {x: 7}, "2.5") 33 | .to(['#armL', '#flashlightFront'], .075, {x: 0}, "2.575") 34 | .to(['#armL', '#flashlightFront'], .075, {x: 7}, "2.65") 35 | .to(['#armL', '#flashlightFront'], .075, {x: 0}, "2.725") 36 | .to(['#armL', '#flashlightFront'], .075, {x: 7}, "2.8") 37 | .to(['#armL', '#flashlightFront'], .075, {x: 0}, "2.875") 38 | 39 | .addCallback(goLight, "3.2") 40 | .addCallback(goDark, "3.3") 41 | .addCallback(goLight, "3.4") 42 | 43 | .addCallback(function() { 44 | chatterTL.pause(); 45 | TweenMax.to(['#mouthBG', '#mouthPath', '#mouthOutline'], .1, {morphSVG: mouthShape1}, "0"); 46 | }, "3.2") 47 | 48 | .to(['#mouthBG', '#mouthPath', '#mouthOutline'], .25, {morphSVG: mouthShape2}, "5") 49 | .to('#tooth1', .1, {y: -5}, "5") 50 | .to('#armR', .5, {x: 10, y: 30, rotation: 10, transformOrigin: "bottom center", ease: Quad.easeOut}, "4") 51 | .to(['#eyeL', '#eyeR'], .25, {scaleX: 1.4, scaleY: 1.4, transformOrigin: "center center"}, "5") 52 | 53 | .addCallback(goDark, "8") 54 | .addCallback(goLight, "8.1") 55 | .addCallback(goDark, "8.3") 56 | .addCallback(goLight, "8.4") 57 | .addCallback(goDark, "8.6") 58 | 59 | .to(['#mouthBG', '#mouthPath', '#mouthOutline'], .25, {morphSVG: mouthShape1}, "9") 60 | .to('#tooth1', .1, {y: 0}, "9") 61 | .to('#armR', .5, {x: 0, y: 0, rotation: 0, transformOrigin: "bottom center", ease: Quad.easeOut}, "9") 62 | .to(['#eyeL', '#eyeR'], .25, {scaleX: 1, scaleY: 1, transformOrigin: "center center"}, "9") 63 | .addCallback(function() { 64 | chatterTL.play(); 65 | }, "9.25") 66 | 67 | .to(['#armL', '#flashlightFront'], .075, {x: 7}, "11.5") 68 | .to(['#armL', '#flashlightFront'], .075, {x: 0}, "11.575") 69 | .to(['#armL', '#flashlightFront'], .075, {x: 7}, "11.65") 70 | .to(['#armL', '#flashlightFront'], .075, {x: 0}, "11.725") 71 | .to(['#armL', '#flashlightFront'], .075, {x: 7}, "11.8") 72 | .to(['#armL', '#flashlightFront'], .075, {x: 0}, "11.875") 73 | 74 | ; 75 | 76 | function goDark() { 77 | TweenMax.set('#light', {visibility: "hidden"}); 78 | 79 | TweenMax.set('.lettersSide', {fill: lettersSideDark, stroke: lettersStrokeDark}); 80 | TweenMax.set('.lettersFront', {fill: lettersFrontDark, stroke: lettersStrokeDark}); 81 | TweenMax.set('#lettersShadow', {opacity: .05}); 82 | 83 | TweenMax.set('.hlFur', {fill: furDarkColor}); 84 | TweenMax.set('.hlSkin', {fill: skinDarkColor}); 85 | } 86 | 87 | function goLight() { 88 | TweenMax.set('#light', {visibility: "visible"}); 89 | 90 | TweenMax.set('.lettersSide', {fill: lettersSideLight, stroke: lettersStrokeLight}); 91 | TweenMax.set('.lettersFront', {fill: lettersFrontLight, stroke: lettersStrokeLight}); 92 | TweenMax.set('#lettersShadow', {opacity: .2}); 93 | 94 | TweenMax.set('.hlFur', {fill: furLightColor}); 95 | TweenMax.set('.hlSkin', {fill: skinLightColor}); 96 | } 97 | 98 | goDark(); 99 | yetiTL.play(); -------------------------------------------------------------------------------- /404Page/style.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900'); 2 | 3 | body, html { 4 | margin: 0; padding: 0; 5 | font-size: 16px; -webkit-font-smoothing: antialiased; 6 | background-color: #09334f; 7 | position: relative; 8 | } 9 | #yetiSVG { 10 | width: 600px; height: 470px; 11 | position: absolute; top: 0; left: 0; 12 | overflow: hidden; 13 | } 14 | #lightSVG { 15 | width: 600px; height: 470px; 16 | position: absolute; top: 0; left: 0; 17 | overflow: visible; 18 | } 19 | .content { 20 | padding: 5rem 3rem 0 25rem; 21 | position: relative; z-index: 10; 22 | font-family: 'Source Sans Pro', sans-serif; color: #FFF; 23 | h3 { 24 | margin: 0 0 .8rem; 25 | font-size: 2.625rem; font-weight: 900; line-height: 120%; 26 | } 27 | p { 28 | font-size: 1.25rem; font-weight: normal; line-height: 150%; color: #d1e2ed; 29 | span {text-decoration: line-through;} 30 | } 31 | } -------------------------------------------------------------------------------- /Covid-page/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Poppins', sans-serif !important; 3 | } 4 | 5 | .navbar { 6 | position: fixed !important; 7 | width: 100%; 8 | background: black; 9 | } 10 | 11 | .nav-item { 12 | margin-left: 30px; 13 | } 14 | 15 | #header { 16 | /* background-image: url('img/header.png'); */ 17 | height: 100vh; 18 | min-height: 100%; 19 | background-size: cover; 20 | display: flex; 21 | justify-content: center; 22 | } 23 | 24 | .header-item { 25 | align-self: center; 26 | text-align: center; 27 | } 28 | 29 | .header-item-text-title { 30 | color: white; 31 | font-size: 4.25rem; 32 | } 33 | 34 | .header-item-text span { 35 | color: white; 36 | font-size: 1.5rem; 37 | max-width: 800px; 38 | } 39 | 40 | .header-item-count { 41 | margin-top: 5rem; 42 | } 43 | 44 | .header-count { 45 | color: white; 46 | font-weight: 500; 47 | font-size: 3.125rem; 48 | } 49 | 50 | .header-count-desc{ 51 | color: white; 52 | font-weight: 500; 53 | font-size: 0.875rem; 54 | } 55 | 56 | #covid { 57 | padding-top: 4rem; 58 | padding-bottom: 4rem; 59 | } 60 | 61 | .section-title-text { 62 | position: relative; 63 | font-weight: 600; 64 | font-size: 3.125rem; 65 | } 66 | 67 | .section-title-text:after { 68 | content: ''; 69 | height: 3px; 70 | width: 230px; 71 | background: black; 72 | position: absolute; 73 | bottom: 0; 74 | margin: 0 auto; left: 0; right: 0; 75 | } 76 | 77 | .item-corona { 78 | margin-bottom: 75px; 79 | } 80 | 81 | .section-title-desc { 82 | font-size: 0.928rem; 83 | font-weight: 500; 84 | } 85 | 86 | .text-title-item { 87 | font-weight: 500; 88 | font-size: 1.875rem; 89 | } 90 | 91 | .text-desc-item { 92 | font-weight: 300; 93 | font-size: 1.5rem; 94 | } 95 | 96 | .corona-img { 97 | max-width: 420px; 98 | } 99 | 100 | .bor-light:after { 101 | background: white; 102 | } 103 | 104 | #vaksin { 105 | padding-top: 75px; 106 | padding-bottom: 75px; 107 | } 108 | 109 | @media (max-width: 767.98px) { 110 | .corona-img { 111 | display: none; 112 | } 113 | } -------------------------------------------------------------------------------- /Covid-page/img/header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/HTML-Projects-1/c17668e1816266d3978eb4e3eeb606527dfd6b80/Covid-page/img/header.png -------------------------------------------------------------------------------- /Covid-page/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | 18 | 19 | 21 | 22 | Hello, world! 23 | 24 | 25 | 26 | 51 | 77 |
78 |
79 |
80 |
81 | COVID-19 82 |
83 |
Corona Virus Disease
84 |
85 |
86 |
87 |
88 |
89 | Apa itu coronavirus? 90 |
91 |
92 | Coronavirus adalah virus yang menyerang sistem pernapasan. Penyakit karena infeksi virus ini disebut 93 | COVID-19. Virus 94 | corona bisa menyebabkan gangguan ringan pada sistem pernapasan, infeksi paru-paru yang berat, hingga 95 | kematian 96 |
97 |
98 |
99 | 100 |
101 |
102 |
103 |
104 |
105 |
106 | 107 |
108 |
109 |
110 | Apa gejala umum COVID-19? 111 |
112 |
113 |
114 |
115 | Gejala Ringan : 116 |
    117 |
  • Demam
    • 118 |
  • Demam
    • 119 |
  • Demam
    • 120 |
  • Demam
    • 121 |
122 |
123 |
124 | Gejala Ringan : 125 |
    126 |
  • Demam
    • 127 |
  • Demam
    • 128 |
  • Demam
    • 129 |
  • Demam
    • 130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 | Tata cara mencegah virus corona : 142 |
143 |
144 |
    145 |
  • Menggunakan masker saat keluar rumah
    • 146 |
  • Menggunakan masker saat keluar rumah
    • 147 |
  • Menggunakan masker saat keluar rumah
    • 148 |
  • Menggunakan masker saat keluar rumah
    • 149 |
150 |
151 |
152 |
153 | 154 |
155 |
156 |
157 |
158 |
159 |
160 | 161 |
162 |
163 |
164 | Hal yang harus dilakukan jika tertular : 165 |
166 |
167 |
    168 |
  • Menggunakan masker saat keluar rumah
    • 169 |
  • Menggunakan masker saat keluar rumah
    • 170 |
  • Menggunakan masker saat keluar rumah
    • 171 |
  • Menggunakan masker saat keluar rumah
    • 172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 | VAKSIN 184 |
185 |
Vaccine
186 |
187 |
188 |
189 |
190 |
191 | Apa itu Vaksin? 192 |
193 |
194 | Vaksin adalah zat atau senyawa (mengandung bakteri, racun, atau virus penyebab penyakit yang telah dilemahkan atau sudah 195 | dimatikan), yang berfungsi untuk membentuk kekebalan tubuh terhadap suatu penyakit 196 |
197 |
198 |
199 | 200 |
201 |
202 |
203 |
204 |
205 |
206 | 207 |
208 |
209 |
210 | Bagaimana cara kerja vaksin? 211 |
212 |
213 | Vaksin bekerja dengan melatih sistem kekebalan untuk mengenali dan memerangi virus/bakteri. Dengan menyuntikkan antigen 214 | ke dalam tubuh, sistem kekebalan akan menyerang, memproduksi antibodi, serta mengingatnya. Jika di kemudian hari virus 215 | muncul, sistem kekebalan otomatis akan mengenali antigen dan menyerang secara agresif sebelum patogen menyebar yang 216 | menyebabkan penyakit. 217 |
218 |
219 |
220 |
221 |
222 |
223 |
224 |
225 | Apa itu Vaksin? 226 |
227 |
228 | Vaksin adalah zat atau senyawa (mengandung bakteri, racun, atau virus penyebab penyakit yang telah 229 | dilemahkan atau sudah 230 | dimatikan), yang berfungsi untuk membentuk kekebalan tubuh terhadap suatu penyakit 231 |
232 |
233 |
234 | 235 |
236 |
237 |
238 |
239 |
240 |
241 | 242 |
243 |
244 |
245 | Bagaimana cara kerja vaksin? 246 |
247 |
248 | Vaksin bekerja dengan melatih sistem kekebalan untuk mengenali dan memerangi virus/bakteri. Dengan 249 | menyuntikkan antigen 250 | ke dalam tubuh, sistem kekebalan akan menyerang, memproduksi antibodi, serta mengingatnya. Jika di 251 | kemudian hari virus 252 | muncul, sistem kekebalan otomatis akan mengenali antigen dan menyerang secara agresif sebelum patogen 253 | menyebar yang 254 | menyebabkan penyakit. 255 |
256 |
257 |
258 |
259 |
260 |
261 | 262 | 263 | 264 | 265 | 268 | 269 | 270 | 274 | 275 | 276 | -------------------------------------------------------------------------------- /DesertInfo/imgs/daniele-colucci-OtXJhYjbKeg-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/HTML-Projects-1/c17668e1816266d3978eb4e3eeb606527dfd6b80/DesertInfo/imgs/daniele-colucci-OtXJhYjbKeg-unsplash.jpg -------------------------------------------------------------------------------- /DesertInfo/imgs/des.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/HTML-Projects-1/c17668e1816266d3978eb4e3eeb606527dfd6b80/DesertInfo/imgs/des.jpg -------------------------------------------------------------------------------- /DesertInfo/imgs/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/HTML-Projects-1/c17668e1816266d3978eb4e3eeb606527dfd6b80/DesertInfo/imgs/icon.png -------------------------------------------------------------------------------- /DesertInfo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Desert 11 | 12 | 13 | 14 |
15 |
16 | 17 |

DESERT

18 | 19 |
20 |
21 |
22 |
23 |

What are deserts?

24 | Desert 25 |

26 | Desert is a barren area of landscape where little precipitation occurs and, consequently, living 27 | conditions are hostile 28 | for plant and animal life. The lack of vegetation exposes the unprotected surface of the ground to the 29 | processes of 30 | denudation. About one-third of the land surface of the Earth is arid or semi-arid. This includes much of 31 | the polar 32 | regions, where little precipitation occurs, and which are sometimes called polar deserts or "cold 33 | deserts". Deserts can 34 | be classified by the amount of precipitation that falls, by the temperature that prevails, by the causes 35 | of 36 | desertification or by their geographical location. 37 |

38 |
39 |
40 | 41 |
42 |
43 | 44 |

How are they formed?

45 | Desert 46 |

47 | Deserts are formed by weathering processes as large variations in temperature between day and night put 48 | strains on 49 | the 50 | rocks which consequently break in pieces. Although rain seldom occurs in deserts, there are occasional 51 | downpours 52 | that 53 | can result in flash floods. Rain falling on hot rocks can cause them to shatter and the resulting 54 | fragments and 55 | rubble 56 | strewn over the desert floor is further eroded by the wind. This picks up particles of sand and dust and 57 | wafts them 58 | aloft in sand or dust storms. Wind-blown sand grains striking any solid object in their path can abrade 59 | the surface. 60 | Rocks are smoothed down, and the wind sorts sand into uniform deposits. The grains end up as level 61 | sheets of sand or 62 | are 63 | piled high in billowing sand dunes. 64 |

65 |
66 |

Some Fun Facts about Deserts

67 | 68 |

69 |

81 |

82 | 83 |
84 | 85 |
86 | 87 |
88 |
89 |

Other resources

90 |

91 | Wikipedia 92 |
93 | Britannica 94 |

95 | 96 |
97 | 98 |
99 | 100 | 101 | 102 | -------------------------------------------------------------------------------- /DesertInfo/main.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | div{ 8 | margin: auto; 9 | } 10 | header{ 11 | background: #404F61; 12 | padding: 45px 0; 13 | color:#CDAB9D ; 14 | text-align:center; 15 | 16 | } 17 | section{ 18 | padding: 45px 0; 19 | margin: auto; 20 | 21 | } 22 | .cont{ 23 | 24 | margin: 0 auto; 25 | margin: auto; 26 | width: 90%; 27 | max-width: 700px; 28 | 29 | } 30 | .cont-1{ 31 | border:2px solid #404F61; 32 | } 33 | 34 | .sec-2{ 35 | background: #404F61; 36 | color: #CDAB9D; 37 | } 38 | .sec-1{ 39 | background: #CDAB9D; 40 | color: #404F61; 41 | } 42 | img{ 43 | width: 100%; 44 | height: 200px; 45 | } 46 | -------------------------------------------------------------------------------- /Documentation page/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | Documentation Page 9 | 10 | 11 | 12 | 13 | 14 |
15 | 31 |
32 | 33 |
34 | 35 |
Introduction
36 |
37 |

Overview 38 | MkDocs is a fast, simple and downright gorgeous static site generator that's geared towards building project documentation. Documentation source files are written in Markdown, and configured with a single YAML configuration file.

39 |

MkDocs builds completely static HTML sites that you can host on GitHub pages, Amazon S3, or anywhere else you choose.

40 | 41 |
42 | 43 |
44 | 45 | 46 |
47 | 48 |
Overview
49 |
50 |

There's a stack of good looking themes available for MkDocs. Choose between the built in themes: mkdocs and readthedocs, select one of the 3rd party themes in the MkDocs wiki, or build your own. The built-in dev-server allows you to preview your documentation as you're writing it. It will even auto-reload and refresh your browser whenever you save your changes. Get your project documentation looking just the way you want it by customizing the theme.

51 |
52 | 53 |
54 | 55 | 56 |
57 | 58 |
Installation
59 |
60 |

If you have and use a package manager (such as apt-get, dnf, homebrew, yum, chocolatey, etc.) to install packages on your system, then you may want to search for a "MkDocs" package and, if a recent version is available, install it with your package manager (check your system's documentation for details). That's it, you're done! Skip down to Getting Started. 61 | 62 | If your package manager does not have a recent "MkDocs" package, you can still use your package manager to install "Python" and "pip". Then you can use pip to install MkDocs.

63 |

In order to manually install MkDocs you'll need Python installed on your system, as well as the Python package manager, pip. You can check if you have these already installed from the command line:

64 | $ python --version 65 | Python 2.7.2 66 | $ pip --version 67 | pip 1.5.2 68 | 69 |
70 | 71 |
72 | 73 |
74 | 75 |
Getting started
76 |
77 | 78 |

Getting started is super easy.

79 | mkdocs new my-project 80 | cd my-project 81 | 82 |

There's a single configuration file named mkdocs.yml, and a folder named docs that will contain your documentation source files. Right now the docs folder just contains a single documentation page, named index.md. 83 | 84 | MkDocs comes with a built-in dev-server that lets you preview your documentation as you work on it. Make sure you're in the same directory as the mkdocs.yml configuration file, and then start the server by running the mkdocs serve command:

85 | 86 |
87 |
88 | 89 | 90 | 91 |
92 | 93 |
Adding pages
94 |
95 | 96 |

Now add a second page to your documentation:

97 | curl 'https://jaspervdj.be/lorem-markdownum/markdown.txt' > docs/about.md 98 |

As our documentation site will include some navigation headers, you may want to edit the configuration file and add some information about the order, title, and nesting of each page in the navigation header by adding a pages setting:

99 | site_name: MkLorum 100 | nav: 101 | - Home: index.md 102 | - About: about.md 103 | 104 |

Save your changes and you'll now see a navigation bar with Home and About items on the left as well as Search, Previous , and Next items on the right.

105 |

Try the menu items and navigate back and forth between pages. Then click on Search. A search dialog will appear, allowing you to search for any text on any page. Notice that the search results include every occurrence of the search term on the site and links directly to the section of the page in which the search term appears. You get of all that with no effort or configuration on your part!

106 |

How to search for markdown

107 |
108 | 109 |
110 | 111 |
112 | 113 |
Deploying
114 |
115 | 116 |

The documentation site that you just built only uses static files so you'll be able to host it from pretty much anywhere. GitHub project pages and Amazon S3 may be good hosting options, depending upon your needs. Upload the contents of the entire site directory to wherever you're hosting your website from and you're done. For specific instructions on a number of common hosts, see the Deploying your Docs page.

117 |

118 | 119 |
120 | 121 |
122 | 123 | 124 |
125 | 126 |
Other commands and options
127 |
128 | 129 |

There are various other commands and options available. For a complete list of commands, use the --help flag:

130 |

mkdocs --help

131 |

To view a list of options available on a given command, use the --helpflag with that command. For example, to get a list of all options available for the build command run the following:

132 | 133 |
134 | 135 |
136 | 137 |
138 | 139 |
Theming
140 |
141 | 142 |

Now change the configuration file to alter how the documentation is displayed by changing the theme. Edit the mkdocs.ymlfile and add a theme setting:

143 |

site_name: MkLorum 144 | nav: 145 | - Home: index.md 146 | - About: about.md 147 | theme: readthedocs 148 |

149 | 150 |
151 | 152 |
153 | 154 |
155 | 156 |
Get more help
157 |
158 | 159 |

To get help with MkDocs, please use the discussion group, GitHub issues or the MkDocs IRC channel #mkdocs on freenode.

160 | 161 | 162 |
163 | 164 |
165 | 166 | 167 |
168 | 169 |
170 | 171 | 172 | 173 | -------------------------------------------------------------------------------- /Documentation page/style.css: -------------------------------------------------------------------------------- 1 | html, body{ 2 | background-color: #e8e8e8; 3 | /* font-size : 10px; */ 4 | font-family: "Verdana"; 5 | line-height: 1.4; 6 | color: #262525; 7 | margin: 0; 8 | padding: 0; 9 | box-sizing: border-box; 10 | scroll-behavior:smooth; 11 | 12 | } 13 | 14 | #wrapper{ 15 | margin-right: auto; 16 | margin-left: auto; 17 | max-width: 100vw; 18 | } 19 | ul{ 20 | list-style-type: none; 21 | margin: 0 0; 22 | padding: 0; 23 | } 24 | ul li{ 25 | min-height: 3rem; 26 | } 27 | #navbar{ 28 | font-size: 1.5rem; 29 | position: fixed; 30 | min-width: 290px; 31 | top: 0px; 32 | left: 0px; 33 | width: 300px; 34 | height: 100%; 35 | border-right: solid 9px; 36 | border-color: rgba(0, 22, 22, 0.4); 37 | overflow: scroll; 38 | overflow-x: hidden; 39 | } 40 | nav header{ 41 | letter-spacing: 1px; 42 | text-align: center; 43 | } 44 | .nav-link{ 45 | display:block; 46 | text-align:center; 47 | /* vertical-align: middle; */ 48 | line-height: 3rem; 49 | width: 100%; 50 | margin: 0; 51 | border-top: solid; 52 | border-color: rgba(0, 22, 22, 0.4); 53 | font-size: 1rem; 54 | } 55 | a{ 56 | text-decoration: none; 57 | color: inherit; 58 | transition: 0.2s; 59 | will-change: opacity; 60 | display: block; 61 | width: 90%; 62 | } 63 | li{ 64 | display: block; 65 | width: 100%; 66 | margin-left: 0.5rem; 67 | } 68 | a:hover{ 69 | background-color: #e3e3e3; 70 | opacity: 0.7; 71 | } 72 | 73 | main{ 74 | position: absolute; 75 | margin-left: 310px; 76 | padding: 20px; 77 | margin-bottom:0; 78 | margin-left: 310px; 79 | padding: 2rem; 80 | background-color: #fafafa; 81 | font-size: 1.5rem; 82 | text-align: justify; 83 | text-justify: inter-word; 84 | } 85 | article{ 86 | font-size: 1rem; 87 | line-height: 200%; 88 | } 89 | main header{ 90 | font-style: italic; 91 | } 92 | 93 | code{ 94 | display:block; 95 | max-width: 100%; 96 | text-align: left; 97 | white-space: pre-wrap; 98 | position: relative; 99 | word-break: normal; 100 | word-wrap: normal; 101 | line-height: 2; 102 | background-color: white; 103 | margin: 10px; 104 | border-radius: 5px; 105 | text-align: left; 106 | padding-top: 1.5rem; 107 | padding-left: 1rem; 108 | padding-bottom: 1.5rem; 109 | } 110 | .inlineCode{ 111 | display:inline-block; 112 | line-height: 1; 113 | padding: 1px; 114 | } 115 | 116 | ::-webkit-scrollbar { 117 | width: 10px; 118 | } 119 | ::-webkit-scrollbar-track { 120 | box-shadow: 0 0 5px rgba(0, 22, 22, 0.4); 121 | border-radius: 10px; 122 | } 123 | ::-webkit-scrollbar-thumb { 124 | background: rgba(0, 22, 22, 0.4); 125 | border-radius: 5px; 126 | } 127 | 128 | @media only screen and (max-width: 815px) { 129 | /* For mobile phones: */ 130 | #navbar ul { 131 | 132 | height: 207px; 133 | } 134 | #navbar { 135 | background-color: white; 136 | position: absolute; 137 | top: 0; 138 | padding: 0; 139 | margin: 0; 140 | width: 100%; 141 | max-height: 275px; 142 | border: none; 143 | z-index: 1; 144 | } 145 | #main-doc { 146 | position: relative; 147 | margin-left: 0px; 148 | margin-top: 270px; 149 | } 150 | } -------------------------------------------------------------------------------- /Documentation page/style.js: -------------------------------------------------------------------------------- 1 | document.querySelectorAll('a[href^="#"]').forEach(anchor => { 2 | anchor.addEventListener('click', function (e) { 3 | e.preventDefault(); 4 | 5 | document.querySelector(this.getAttribute('href')).scrollIntoView({ 6 | behavior: 'smooth' 7 | }); 8 | }); 9 | }); -------------------------------------------------------------------------------- /Glassweb/css/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap'); 2 | * 3 | { 4 | margin: 0; 5 | padding:0; 6 | box-sizing: border-box; 7 | font-family: 'Poppins',sans-serif; 8 | } 9 | section{ 10 | position:relative; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | min-height: 100vh; 15 | background: url(bg.jpg); 16 | background-position: center; 17 | background-attachment: fixed; 18 | background-size: cover; 19 | overflow: hidden; 20 | } 21 | section h2 22 | { 23 | font-size: 5em; 24 | color: #fff; 25 | pointer-events: none; 26 | text-shadow: 0 10px 20px rgba(0,0,0,0.5); 27 | } 28 | section .glass 29 | { 30 | position: absolute; 31 | transform: translate(-50%,-50%); 32 | pointer-events: none; 33 | width: 300px; 34 | height: 200px; 35 | box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2); 36 | background: transparent; 37 | backdrop-filter: blur(10px); 38 | transition: 0.2%; 39 | } 40 | -------------------------------------------------------------------------------- /Glassweb/glassweb1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 |

Frosted Glass

11 |
12 |
13 |
14 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /How TO - Portfolio Gallery.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 70 | 71 | 72 | 73 | 74 |
75 | 76 |

MYLOGO.COM

77 |
78 | 79 |

PORTFOLIO

80 |

Resize the browser window to see the responsive effect.

81 | 82 | 83 |
84 |
85 |
86 | Mountains 87 |

My Work

88 |

Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodesset eos no.

89 |
90 |
91 |
92 |
93 | Lights 94 |

My Work

95 |

Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodesset eos no.

96 |
97 |
98 |
99 |
100 | Nature 101 |

My Work

102 |

Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodesset eos no.

103 |
104 |
105 |
106 |
107 | Mountains 108 |

My Work

109 |

Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodesset eos no.

110 |
111 |
112 | 113 |
114 | 115 |
116 | Bear 117 |

Some Other Work

118 |

Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodesset eos no.

119 |

Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodesset eos no.

120 |
121 | 122 | 123 |
124 | 125 | 126 | 127 | -------------------------------------------------------------------------------- /JavaScript/disable_all.js: -------------------------------------------------------------------------------- 1 | document.onkeydown = function(e) { 2 | if(event.keyCode == 123) { 3 | return false; 4 | } 5 | if (event.button == 2) { 6 | return false; 7 | } 8 | if(e.ctrlKey && e.shiftKey && e.keyCode == 'I'.charCodeAt(0)) { 9 | return false; 10 | } 11 | if(e.ctrlKey && e.shiftKey && e.keyCode == 'C'.charCodeAt(0)) { 12 | return false; 13 | } 14 | if(e.ctrlKey && e.shiftKey && e.keyCode == 'V'.charCodeAt(0)) { 15 | return false; 16 | } 17 | if(e.ctrlKey && e.shiftKey && e.keyCode == 'J'.charCodeAt(0)) { 18 | return false; 19 | } 20 | if(e.ctrlKey && e.keyCode == 'U'.charCodeAt(0)) { 21 | return false; 22 | } 23 | if(e.ctrlKey && e.keyCode == 'V'.charCodeAt(0)) { 24 | return false; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /Landing Page/img/Elon_Musk.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/HTML-Projects-1/c17668e1816266d3978eb4e3eeb606527dfd6b80/Landing Page/img/Elon_Musk.png -------------------------------------------------------------------------------- /Landing Page/img/Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/HTML-Projects-1/c17668e1816266d3978eb4e3eeb606527dfd6b80/Landing Page/img/Logo.png -------------------------------------------------------------------------------- /Landing Page/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Elon Musk Introduction 7 | 8 | 9 | 10 |
11 |
12 | 13 | 14 | 21 | Hello! :-) 22 |
23 |
24 |
25 |
26 | Elon Musk 27 |
28 |
29 |

Hello, I am
Elon Musk

30 |

I am Elon Reeve Musk (born June 28, 1971) a business magnate, industrial designer, and engineer. I am the founder, CEO, CTO, and chief designer of SpaceX; early stage investor, CEO, and product architect of Tesla Inc.; founder of The Boring Company; co-founder of Neuralink; and co-founder and initial co-chairman of OpenAI. A centibillionaire, I am one of the richest people in the world.

31 |

I Have a many lot BTC

32 | Visit My Website 33 |
34 |
35 | 36 | 37 | -------------------------------------------------------------------------------- /Landing Page/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing : border-box; 3 | } 4 | 5 | a { 6 | text-decoration: none; 7 | } 8 | 9 | body { 10 | margin: 0px; 11 | padding: 0px; 12 | font-family: Helvetica, Arial, sans-serif; 13 | } 14 | 15 | header { 16 | width: 100%; 17 | height: 50vh; 18 | position: relative; 19 | } 20 | 21 | .navbar { 22 | display: flex; 23 | justify-content: space-around; 24 | align-items: center; 25 | position: fixed; 26 | top: 0; 27 | left: 0; 28 | width: 100%; 29 | background-color: white; 30 | box-shadow: 5px 10px 30px rgba(0, 0, 0, 0.1); 31 | z-index: 1; 32 | } 33 | 34 | .logo{ 35 | height: 45px; 36 | } 37 | 38 | .menu-items { 39 | list-style: none; 40 | display: flex; 41 | } 42 | 43 | .menu-items li a { 44 | height: 40px; 45 | line-height: 43px; 46 | margin: 3px; 47 | padding: 0px 22px; 48 | display: flex; 49 | font-size: 0.8em; 50 | text-transform: uppercase; 51 | font-weight: 500; 52 | letter-spacing: 1px; 53 | color: gray; 54 | } 55 | 56 | .greet { 57 | color: #39bfbd; 58 | font-weight: 500; 59 | font-size: 1.2em; 60 | border-bottom: 2px solid #39bfbd; 61 | } 62 | 63 | .img { 64 | width: 500px; 65 | height: 500px; 66 | } 67 | 68 | 69 | .content { 70 | display: flex; 71 | width: 90%; 72 | justify-content: space-around; 73 | align-items: center; 74 | position: absolute; 75 | left: 50%; 76 | right: 50%; 77 | transform: translate(-50%, -50%); 78 | } 79 | 80 | .main-text { 81 | width: 500px; 82 | } 83 | 84 | .main-text * { 85 | margin: 20px 10px; 86 | } 87 | 88 | .main-text h1 { 89 | font-size: 3.5em; 90 | color: #1c3548; 91 | margin: 0px 0px 10px 0px; 92 | line-height: 60px; 93 | } 94 | 95 | .main-text p { 96 | color: gray; 97 | } 98 | 99 | .main-btn { 100 | width: 190px; 101 | height: 44px; 102 | display: flex; 103 | justify-content: center; 104 | align-items: center; 105 | color: white; 106 | background-color: #1db096; 107 | border-radius: 20px; 108 | box-shadow: 5px 10px 30px rgba(24, 139, 119, 0.2); 109 | } 110 | 111 | .main-btn:hover { 112 | background-color: #23cdaf; 113 | transition: all ease 0.3s; 114 | box-shadow: 5px 10px 30px rgba(24, 139, 119, 0.5); 115 | } 116 | 117 | .menu-items li a:hover { 118 | background-color: #23cdaf; 119 | color: white; 120 | transition: all ease 0.25s; 121 | box-shadow: 5px 10px 30px rgba(24, 139, 119, 0.5); 122 | } -------------------------------------------------------------------------------- /Login Page/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/HTML-Projects-1/c17668e1816266d3978eb4e3eeb606527dfd6b80/Login Page/images/logo.png -------------------------------------------------------------------------------- /Login Page/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Login-Page 13 | 14 | 15 |
16 | 19 | 20 |
21 |
22 |
23 | 24 |
25 |
26 |
27 | 28 |
29 |
30 | 31 | 35 | 36 | 37 |
38 |
39 |
40 | Don't have an account? 41 | Sign Up
42 | Forgot your password? 43 |
44 |
45 | 46 |
47 | 48 | 49 | -------------------------------------------------------------------------------- /Login Page/styles.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: rgba(13, 124, 128, 0.993); 3 | text-align: center; 4 | } 5 | .login-page{ 6 | margin: 200px; 7 | } 8 | 9 | img{ 10 | height: 170px; 11 | width: 170px; 12 | position: absolute; 13 | top: 110px; 14 | left: 43.5%; 15 | border: 10px solid rgba(13, 124, 128, 0.993);; 16 | border-radius: 100%; 17 | text-align: center; 18 | z-index: 1; 19 | 20 | } 21 | a{ 22 | text-decoration: none; 23 | } 24 | 25 | form{ 26 | margin: 60px 3px; 27 | } 28 | .page{ 29 | height: 500px; 30 | width: 400px; 31 | background-color: rgb(231, 185, 34); 32 | display: inline-block; 33 | padding: 50px; 34 | border-radius: 10px; 35 | 36 | } 37 | 38 | 39 | .icon{ 40 | background-color: rgb(192, 72, 72); 41 | color: #fff; 42 | } 43 | .details{ 44 | margin: 10px 0; 45 | padding: 0%; 46 | } 47 | .container { 48 | display: block; 49 | position: relative; 50 | padding-left: 35px; 51 | margin-bottom: 12px; 52 | cursor: pointer; 53 | font-size: 15px; 54 | -webkit-user-select: none; 55 | -moz-user-select: none; 56 | -ms-user-select: none; 57 | user-select: none; 58 | text-align: left; 59 | } 60 | 61 | /* Hide the browser's default checkbox */ 62 | .container input { 63 | position: absolute; 64 | opacity: 0; 65 | cursor: pointer; 66 | height: 0; 67 | width: 0; 68 | } 69 | 70 | /* Create a custom checkbox */ 71 | .checkmark { 72 | position: absolute; 73 | top: 0; 74 | left: 0; 75 | height: 18px; 76 | width: 18px; 77 | background-color: #eee; 78 | border-radius: 5px; 79 | } 80 | 81 | /* On mouse-over, add a grey background color */ 82 | .container:hover input ~ .checkmark { 83 | background-color: #ccc; 84 | } 85 | 86 | /* When the checkbox is checked, add a blue background */ 87 | .container input:checked ~ .checkmark { 88 | background-color: #e2453ae7; 89 | } 90 | 91 | /* Create the checkmark/indicator (hidden when not checked) */ 92 | .checkmark:after { 93 | content: ""; 94 | position: absolute; 95 | display: none; 96 | } 97 | 98 | /* Show the checkmark when checked */ 99 | .container input:checked ~ .checkmark:after { 100 | display: block; 101 | } 102 | 103 | /* Style the checkmark/indicator */ 104 | .container .checkmark:after { 105 | left: 6px; 106 | top: 3px; 107 | width: 5px; 108 | height: 10px; 109 | border: solid white; 110 | border-width: 0 3px 3px 0; 111 | -webkit-transform: rotate(45deg); 112 | -ms-transform: rotate(45deg); 113 | transform: rotate(45deg); 114 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # HTML-Projects 2 | # hacktoberfest 3 | irfan hacktoberfest2021 4 | -------------------------------------------------------------------------------- /RGBBackground.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |

Membuat Warna RGB di HTML

6 | 7 |

rgb(255, 0, 0)

8 |

rgb(0, 0, 255)

9 |

rgb(60, 179, 113)

10 |

rgb(238, 130, 238)

11 |

rgb(255, 165, 0)

12 |

rgb(106, 90, 205)

13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /RandomCatsGenerator.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Random Cats Generator 7 | 8 | 9 |
10 | 11 |
12 | 28 | 29 | -------------------------------------------------------------------------------- /Sandi L. Putra: -------------------------------------------------------------------------------- 1 | 2 | 3 | Selamat Datang 4 | 5 | 6 |
7 |

Selamat Datang di Website Saya

8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /Shrijan26_clock.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 31 | 32 | 33 | 34 |
35 | 36 |
37 | 38 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /Sidebar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 65 | 66 | 67 | 68 |
69 | Home 70 | articles 71 | Contact 72 | Follow us 73 |
74 | 75 |
76 |

About Darwin

77 | 78 |

Logo

Darwin formulated his bold theory in private in 1837–39, after returning from a voyage around the world aboard HMS Beagle, but it was not until two decades later that he finally gave it full public expression in On the Origin of Species (1859), a book that has deeply influenced modern Western society and thought.s.

79 |
80 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /Simple Biodata/illus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/HTML-Projects-1/c17668e1816266d3978eb4e3eeb606527dfd6b80/Simple Biodata/illus.png -------------------------------------------------------------------------------- /Simple Biodata/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Biodata 10 | 11 | 12 |
13 |
14 | 15 |

Name

16 |

Yogyakarta, Indonesia

17 | 18 | 19 | 20 |
21 |
22 |

About

23 |

Phasellus pellentesque volutpat sodales. Phasellus quis lobortis dolor. Praesent nec orci quis nulla egestas commodo. Praesent in lobortis lacus.

24 |

Donec in tortor felis. Nunc lobortis lorem eros, in sodales est rhoncus quis.

25 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at nisl ex. Duis quis porta felis. Donec in tortor felis.

26 |

Hobbies

27 | 32 | 33 |

Projects

34 | 38 |

Contacts

39 |

admin@example.com

40 |
41 |
42 | 43 | 44 | -------------------------------------------------------------------------------- /Simple Biodata/style.css: -------------------------------------------------------------------------------- 1 | /* global */ 2 | @import url('https://fonts.googleapis.com/css?family=Roboto'); 3 | 4 | .grid-2{ 5 | display: grid; 6 | grid-template-columns: repeat(2,1fr); 7 | } 8 | 9 | img { 10 | border-radius: 10%; 11 | } 12 | 13 | body{ 14 | margin: 0; 15 | padding: 0; 16 | font-family: 'Roboto', sans-serif; 17 | background-color: #101214; 18 | color: #7A7C80; 19 | 20 | } 21 | 22 | h2, .putih { 23 | color: #fff; 24 | } 25 | 26 | a { 27 | color: #7A7C80; 28 | text-decoration: none; 29 | } 30 | /* seksi 1 */ 31 | .seksi-1{ 32 | padding-top: 20vh; 33 | text-align: center; 34 | } 35 | 36 | .seksi-1 p{ 37 | font-size: 1.1rem; 38 | padding-bottom: 10px; 39 | margin:0; 40 | } 41 | 42 | .seksi-1 h2{ 43 | font-size: 1.7rem; 44 | margin-bottom: 10px; 45 | } 46 | 47 | .seksi-1 a{ 48 | font-size: 1.5rem; 49 | padding: 10px; 50 | } 51 | /* seksi 2 */ 52 | .seksi-2{ 53 | padding-top: 9vh; 54 | width: 70%; 55 | } 56 | 57 | .seksi-2 h2{ 58 | font-size: 1.7rem; 59 | margin-bottom: 10px; 60 | } 61 | 62 | .seksi-2 p{ 63 | font-size: 1.1rem; 64 | padding-bottom: 10px; 65 | margin:0; 66 | } 67 | 68 | .seksi-2 a{ 69 | display: block; 70 | font-size: 1.1rem; 71 | padding-left: 0; 72 | width: 350px; 73 | } 74 | 75 | /* animations / utilities */ 76 | .seksi-2 a:hover{ 77 | font-size: 1.2rem; 78 | color: #fff; 79 | cursor: pointer; 80 | transition: 0.2s; 81 | } 82 | 83 | .seksi-1 a:hover{ 84 | color: #fff; 85 | cursor: pointer; 86 | transition: 0.3s; 87 | } 88 | 89 | .putih:hover{ 90 | position: relative; 91 | padding-left: 10px; 92 | } 93 | 94 | ul { 95 | padding-left: 8px; 96 | } 97 | 98 | /* media queres */ 99 | @media(max-width:780px){ 100 | .grid-2{ 101 | grid-template-columns: 1fr; 102 | } 103 | .seksi-1{ 104 | padding:0; 105 | padding-top: 5rem; 106 | } 107 | .seksi-2{ 108 | padding: 0; 109 | padding-left: 1.5rem; 110 | padding-top: 2rem; 111 | } 112 | } -------------------------------------------------------------------------------- /Snake-Game/css/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=New+Tegomin&display=swap'); 2 | *{ 3 | padding: 0; 4 | margin: 0; 5 | } 6 | 7 | .body{ 8 | background: url("../img/bg.jpg"); 9 | min-height: 100vh; 10 | background-size: 100vw 100vh; 11 | background-repeat: no-repeat; 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | } 16 | 17 | #scoreBox{ 18 | position: absolute; 19 | top: 9px; 20 | right: 200px; 21 | font-size: 39px; 22 | font-weight: bold; 23 | font-family: 'New Tegomin', serif; 24 | } 25 | 26 | #hiscoreBox{ 27 | position: absolute; 28 | top: 59px; 29 | right: 140px; 30 | font-size: 39px; 31 | font-weight: bold; 32 | font-family: 'New Tegomin', serif; 33 | } 34 | 35 | #board{ 36 | background: linear-gradient(rgb(170, 236, 170), rgb(236, 236, 167)); 37 | width: 90vmin; 38 | height: 92vmin; 39 | border: 2px solid black; 40 | display: grid; 41 | grid-template-rows: repeat(18, 1fr); 42 | grid-template-columns: repeat(18, 1fr); 43 | } 44 | 45 | .head{ 46 | background: linear-gradient(rgb(240, 124, 124), rgb(228, 228, 129)); 47 | border: 2px solid rgb(34, 4, 34); 48 | transform: scale(1.02); 49 | border-radius: 9px; 50 | } 51 | 52 | .snake{ 53 | background-color: purple; 54 | border: .25vmin solid white; 55 | border-radius: 12px; 56 | } 57 | 58 | .food{ 59 | background: linear-gradient(red, purple); 60 | border: .25vmin solid black; 61 | border-radius: 8px; 62 | } -------------------------------------------------------------------------------- /Snake-Game/img/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/HTML-Projects-1/c17668e1816266d3978eb4e3eeb606527dfd6b80/Snake-Game/img/bg.jpg -------------------------------------------------------------------------------- /Snake-Game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Snake Game | Javascript 5 | 6 | 7 | 8 | 9 |
10 |
Score: 0
11 |
Hi Score: 0
12 |
13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Snake-Game/js/index.js: -------------------------------------------------------------------------------- 1 | let inputDir = {x: 0, y: 0}; 2 | let foodSound = new Audio('../music/food.mp3'); 3 | let gameOverSound = new Audio('../music/gameover.mp3'); 4 | let moveSound = new Audio('../music/move.mp3'); 5 | let musicSound = new Audio('../music/music.mp3'); 6 | let lastPaintTime = 0; 7 | let speed = 5; 8 | let score = 0; 9 | let snakeArr = [{ 10 | x: 12, 11 | y: 15 12 | }]; 13 | let food = { 14 | x: 5, 15 | y: 8 16 | }; 17 | 18 | 19 | //All the function goes here 20 | function main(ctime){ 21 | window.requestAnimationFrame(main); 22 | // console.log(ctime); 23 | if((ctime - lastPaintTime)/1000 < 1/speed){ 24 | return; 25 | } 26 | lastPaintTime = ctime; 27 | // console.log(ctime); 28 | gameEngine(); 29 | } 30 | 31 | function isCollide(sarr){ 32 | //if the snnake collide with his body then 33 | 34 | for (let i = 1; i < snakeArr.length; i++) { 35 | if (sarr[i].x === snakeArr[0].x && sarr[i].y === snakeArr[0].y) { 36 | return true; 37 | } 38 | } 39 | if (snakeArr[0].x >= 20 || snakeArr[0].x <= 0 || snakeArr[0].y >= 20 || snakeArr[0].y <= 0) { 40 | return true; 41 | } 42 | } 43 | 44 | function gameEngine(){ 45 | //updating the snake array and food 46 | if (isCollide(snakeArr)) { 47 | gameOverSound.play(); 48 | musicSound.pause(); 49 | inputDir = {x: 0, y: 0}; 50 | alert("Game Over. Press any key to play again!") 51 | snakeArr = [{x: 12, y: 15}]; 52 | // musicSound.play(); 53 | score = 0; 54 | } 55 | 56 | //if snake eaten the food and increament the score and reggenerate the food again 57 | 58 | if(snakeArr[0].y === food.y && snakeArr[0].x === food.x){ 59 | 60 | foodSound.play(); 61 | snakeArr.unshift({x: snakeArr[0].x + inputDir.x, y: snakeArr[0].y + inputDir.y}); 62 | //console.log(snakeArr) 63 | let a = 2; 64 | let b = 16; 65 | food = {x: Math.round(a + (b-a)* Math.random()), y: Math.round(a + (b-a)* Math.random())} 66 | score += 1; 67 | if (score>hiscoreval) { 68 | hiscoreval = score; 69 | localStorage.setItem("hiscore",JSON.stringify(hiscoreval)); 70 | hiscoreBox.innerHTML = "Hi Score: " + hiscoreval; 71 | } 72 | scoreBox.innerHTML = "Score: " + score; 73 | } 74 | 75 | //moving the snake 76 | 77 | for (let i = snakeArr.length - 2 ; i >= 0; i--) { 78 | snakeArr[i+1] = {...snakeArr[i]}; 79 | } 80 | 81 | //moving the snake head 82 | snakeArr[0].x += inputDir.x; 83 | snakeArr[0].y += inputDir.y; 84 | 85 | //console.log(snakeArr) 86 | 87 | //display the snake array and food 88 | board.innerHTML = ""; 89 | //display snake element 90 | snakeArr.forEach((e, index)=>{ 91 | snakeElement = document.createElement('div'); 92 | snakeElement.style.gridRowStart = e.y; 93 | snakeElement.style.gridColumnStart = e.x; 94 | 95 | if(index === 0){ 96 | snakeElement.classList.add('head'); 97 | } 98 | else{ 99 | snakeElement.classList.add('snake'); 100 | } 101 | board.appendChild(snakeElement); 102 | }); 103 | // //display food element 104 | // food.forEach((e,index) => { 105 | // foodElement = document.createElement('div'); 106 | // foodElement.style.gridRowStart = e.y; 107 | // foodElement.style.gridColumnStart = e.x; 108 | // foodElement.classList.add('food'); 109 | // board.appendChild(foodElement); 110 | // }) 111 | 112 | // Display the food 113 | foodElement = document.createElement('div'); 114 | foodElement.style.gridRowStart = food.y; 115 | foodElement.style.gridColumnStart = food.x; 116 | foodElement.classList.add('food') 117 | board.appendChild(foodElement); 118 | 119 | 120 | } 121 | 122 | 123 | 124 | 125 | //All the Game Logic goes here 126 | let hiscore = localStorage.getItem("hiscore"); 127 | if(hiscore === null){ 128 | hiscoreval = 0; 129 | localStorage.setItem("hiscore", JSON.stringify(hiscoreval)); 130 | }else{ 131 | hiscoreval = JSON.parse(hiscore); 132 | hiscoreBox.innerHTML = "Hi Score: " + hiscore; 133 | } 134 | window.requestAnimationFrame(main); 135 | window.addEventListener('keydown',(e) => { 136 | inputDir = {x:0, y:1}; //start the game 137 | moveSound.play(); 138 | switch (e.key) { 139 | case "ArrowUp": 140 | //console.log("ArrowUp"); 141 | inputDir.x = 0; 142 | inputDir.y = -1; 143 | break; 144 | 145 | case "ArrowDown": 146 | //console.log("ArrowDown"); 147 | inputDir.x = 0; 148 | inputDir.y = 1; 149 | break; 150 | 151 | case "ArrowLeft": 152 | //console.log("ArrowLeft"); 153 | inputDir.x = -1; 154 | inputDir.y = 0; 155 | break; 156 | 157 | case "ArrowRight": 158 | //console.log("ArrowRight"); 159 | inputDir.x = 1; 160 | inputDir.y = 0; 161 | break; 162 | default: 163 | break; 164 | } 165 | }) -------------------------------------------------------------------------------- /Snake-Game/music/food.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/HTML-Projects-1/c17668e1816266d3978eb4e3eeb606527dfd6b80/Snake-Game/music/food.mp3 -------------------------------------------------------------------------------- /Snake-Game/music/gameover.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/HTML-Projects-1/c17668e1816266d3978eb4e3eeb606527dfd6b80/Snake-Game/music/gameover.mp3 -------------------------------------------------------------------------------- /Snake-Game/music/move.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/HTML-Projects-1/c17668e1816266d3978eb4e3eeb606527dfd6b80/Snake-Game/music/move.mp3 -------------------------------------------------------------------------------- /Snake-Game/music/music.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/FirmanKurniawan/HTML-Projects-1/c17668e1816266d3978eb4e3eeb606527dfd6b80/Snake-Game/music/music.mp3 -------------------------------------------------------------------------------- /SurveyForm.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Employee Interests Survey 7 | 8 | 9 | 10 | 17 | 18 | 19 | 20 | 21 | 22 |
23 |
24 |
25 | 26 |
27 |
28 | 29 |

Employee Interests Survey form

30 |
31 |
32 | 33 |
34 | Enter your name: 35 | 36 | 37 | 38 | 39 |
40 |
41 | Enter your department: 42 | 43 |
44 |
45 | Tell us a little about yourself: 46 | 48 | 49 |
50 |
51 | Do you exercise at home? 52 | 53 |
54 | Yes 55 | No 56 |
57 |
58 |
59 | How do you like to read about your favorite topics? 60 |
61 | 62 | Books 63 | Online resources 64 | Phone apps 65 | Magazines 66 |
67 |
68 |
69 | What genre of movies do you like? 70 | 71 |
72 | 79 |
80 |
81 |
82 | 83 | 84 |
85 |
86 |
87 | 88 |
89 |
90 |
91 | 92 | 93 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /TiledInfoPortfolio.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12 | 14 | 15 | 16 | 17 | MY PORTFOLIO 18 | 19 | 20 | 21 |
22 |
23 |
24 |
25 | avatar 26 |
27 |
28 |
29 |
30 |
31 |

Ritwiz Sinha

32 |
33 | 34 | 35 | 36 |
37 |
38 | 39 | 40 | 41 |
42 |
43 | 44 | 45 | 46 |
47 |
48 | 49 | 50 | 51 |
52 |
53 |
54 |
55 | WEB DEVELOPER IN MAKING 56 |
57 | 58 |
59 |
60 | 61 | About Me 62 |
63 |
64 | 65 | Resume 66 |
67 |
68 | 69 | Skills 70 |
71 |
72 | 73 | Portfolio 74 |
75 |
76 | 77 | Contact 78 |
79 |
80 |
81 |
82 |
83 |
84 | 85 |
86 |
87 |

Welcome to my page

88 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem, cum?

89 |
90 |
91 |

92 | ABOUT ME 93 |

94 |

95 | Hello I am aspiring web developer currently in first year pursuing BTech in Computer Science and 96 | engineering in 97 | IIT Patna 98 |

99 |
Find More About Me
100 |
101 |
102 | At Codeforces 103 |
104 |
105 | At Codechef 106 |
107 |
108 | At Github 109 |
110 |
111 |
112 |
113 | 114 |
115 |
116 |

My Resume

117 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem, cum?

118 |
119 |
120 |

Where Have I Worked

121 |

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, dolorem!

122 |
123 |
124 |
125 |

Devmasters

126 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet, 127 | quibusdam!

128 |

129 | Position: Full Stack Developer 130 |

131 |

132 | Phone: 9599794989 133 |

134 |
135 |
136 |
Dates: 2015 - 2018
137 |
138 |
139 |
140 |
141 |

YSSECURITY

142 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet, 143 | quibusdam!

144 |

145 | Position: Security Admin 146 |

147 |

148 | Phone: 9599794989 149 |

150 |
151 |
152 |
Dates: 2011 - 2014
153 |
154 |
155 |
156 |
157 |

123 Designs

158 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet, 159 | quibusdam!

160 |

161 | Position: Web Designer 162 |

163 |

164 | Phone: 9599794989 165 |

166 |
167 |
168 |
Dates: 2018 - 2019
169 |
170 |
171 |
172 |
173 |
174 | 175 |
176 |
177 |

My Skills

178 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure tempora corporis aperiam 179 | quos magnam.

180 |
181 | 182 |
183 |
184 |

HTML 5

185 |
186 |
187 |
188 |

CSS 3

189 |
190 |
191 |
192 |

Javascript

193 |
194 |
195 |
196 |

Angular JS

197 |
198 |
199 |
200 |

React JS

201 |
202 |
203 |
204 |

Python

205 |
206 |
207 |
208 |

Php

209 |
210 |
211 |
212 |

C++

213 |
214 |
215 |
216 |

Bootstrap

217 |
218 |
219 |
220 |
221 | 222 |
223 | 224 |
225 |
226 |

My Work

227 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi, eos.

228 |
229 |
230 |

WHat Have I built

231 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi architecto quas rerum et mollitia 232 | recusandae sequi excepturi dolores, illo quis! 233 | 234 |

235 |
236 |
237 | 238 | 239 | 240 |
241 |
242 | 243 | 244 | 245 |
246 |
247 | 248 | 249 | 250 |
251 |
252 | 253 | 254 | 255 |
256 |
257 |
258 |
259 | 260 | 261 | 262 |
263 |
264 | 265 | 266 | 267 |
268 |
269 | 270 | 271 | 272 |
273 |
274 | 275 | 276 | 277 |
278 |
279 |
280 |
281 | 282 |
283 |
284 |

My Contact

285 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi, eos.

286 |
287 |
288 |

Contact Me

289 |
290 |
291 |
292 |
293 | 294 | 295 | 296 |
297 | 298 |
299 |
300 |
301 |
302 |
303 | 304 | 305 | 306 |
307 | 308 |
309 |
310 |
311 |
312 |
313 | 314 | 315 | 316 |
317 | 318 |
319 |
320 | 321 |
322 | 323 |
324 | 325 | 326 |
327 | 328 | 337 |
338 | 339 | 340 | 341 | 342 | 343 | 344 | 345 | 347 | 349 | 351 | 352 | 353 | 354 | 355 | 356 | -------------------------------------------------------------------------------- /ahmadk-simple-todolist.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Simple To do List By AhmadK powered by JS 9 | 22 | 23 | 24 | 25 | 26 |
27 | Add To Do 28 | 29 | 30 |
31 |
32 | 33 |
34 | 35 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /alfin: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |

My First Heading

6 |

My first paragraph.

7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /ayya2: -------------------------------------------------------------------------------- 1 | window.alert('Waaahh.. Bandel ya !! ');window.location=('../home');"; 10 | ?> 11 | -------------------------------------------------------------------------------- /buttonHrishabh.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Button 8 | 82 | 83 | 84 |
85 |

Slide text on hover animation

86 | 87 |
88 | 89 | 90 | -------------------------------------------------------------------------------- /calculate_aris.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Program Kalkulator 4 | 5 | 6 | 53 |
54 |
55 | Membuat Calculator 56 |

57 | Bilangan 1 :

58 | Bilangan 2 :

59 | Hasil Perhitungan : 60 |

61 | 62 | 63 | 64 | 65 | 66 | 67 |
68 |
69 | 70 | 71 | -------------------------------------------------------------------------------- /calculator.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 24 | 25 | 49 | 50 | 51 | 52 |
GeeksforGeeks Calculator
53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 |
87 | 88 | 89 | -------------------------------------------------------------------------------- /calculator_rifqi.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | JavaSctipt Calculator | Rifqi 7 | 8 | 9 | 10 | 11 | 18 |
19 |
20 |
21 | 22 |
23 |
24 |
25 | 26 | 27 | 28 | 29 |
30 | 31 |
32 | 33 | 34 | 35 | 36 |
37 | 38 |
39 | 40 | 41 | 42 | 43 |
44 | 45 |
46 | 47 | 48 | 49 | 50 |
51 | 52 |
53 | 54 |
55 |
56 | 57 |
58 |
59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /contact-form.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 69 | 70 | 71 | 72 |

Contact Form

73 | 74 |
75 |
76 |
77 |
78 | 79 |
80 |
81 | 82 |
83 |
84 |
85 |
86 | 87 |
88 |
89 | 90 |
91 |
92 |
93 |
94 | 95 |
96 |
97 | 103 |
104 |
105 |
106 |
107 | 108 |
109 |
110 | 111 |
112 |
113 |
114 | 115 |
116 |
117 |
118 | 119 | 120 | -------------------------------------------------------------------------------- /diamond.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |

The name Attribute

6 | 7 |
8 |
9 |

10 | 11 |
12 | 13 |

If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".

14 | 15 |

Notice that the value of the "First name" field will not be submitted, because the input element does not have a name attribute.

16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /eventpage_tmahato.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 180 | 181 | 182 | 183 |
184 |
185 |
186 |

187 | Events and Shows 188 |

189 |

190 | With the idea of imparting programming 191 | knowledge, Mr. Sandeep Jain, an IIT 192 | Roorkee alumnus started a dream, 193 | GeeksforGeeks. Whether programming 194 | excites you or you feel stifled, 195 | wondering how to prepare for 196 | interview questions or 197 | how to ace data structures and 198 | algorithms, GeeksforGeeks is a 199 | one-stop solution. With every 200 | tick of time, we are adding arrows 201 | in our quiver. From articles on 202 | various computer science subjects 203 | to programming problems for practice, 204 | from basic to premium courses, from 205 | technologies to entrance examinations, 206 | we have been building ample content 207 | with superior quality. In a short 208 | span, we have built a community of 209 | 1 Million+ Geeks around the world, 20,000+ 210 | Contributors and 500+ Campus Ambassadors 211 | in various colleges across the nation. 212 | Our success stories include a lot of 213 | students who benefitted in their 214 | placements and landed jobs at tech 215 | giants. Our vision is to build a gigantic 216 | network of geeks and we are only a 217 | fraction of it yet. 218 |

219 |
220 |
221 | 222 |
223 | 301 |
302 |
303 | 304 | 305 | 306 | -------------------------------------------------------------------------------- /form_rifqi.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

HTML Forms!

5 | 6 |
7 |
8 |
9 |
10 |

11 | 12 |
13 | 14 |

If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".

15 | 16 | 17 | -------------------------------------------------------------------------------- /formulir_aris.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Formulir Pendaftaran Calon Mahasiswa Baru 4 | 5 | 20 |
21 | 
22 | Formulir Calon Pandaftaran Mahasiswa Baru
23 |     

24 | Nama            : 

25 | Alamat          : 

26 | Asal Sekolah    : 

30 | Jurusan dipilih :  Teknik Informatika
31 |                 :  Manajemen Informatika
32 | Jenjang         :  Diploma  Sarjana
33 |  
34 |     

35 | Nama                :

36 | Alamat              :

37 | Asal Sekolah        :

38 | Jurusan             :

39 | Jenjang             :

40 | 
41 |
42 |
43 | 44 | 45 | -------------------------------------------------------------------------------- /garlek123.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | form 5 | 6 | 7 | 8 |
9 | 10 | 11 |
12 | 13 | 14 |
15 | 16 | 17 |
18 | 19 | 20 | 21 |
22 | 23 |
24 | 29 |
30 | 31 |
32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /html-emoji.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |

Sized Emojis

9 | 10 |

11 | 😀 😄 😍 💗 12 |

13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /html-video: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /indexfarrel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | HTML Tutorial 4 | 5 | 6 |

Hallo

7 |

Ijin Join Mas

8 | Italian Trulli 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
CompanyContactCountry
Alfreds FutterkisteMaria AndersGermany
Centro comercial MoctezumaFrancisco ChangMexico
26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /isallkun.html: -------------------------------------------------------------------------------- 1 |  4 | 5 | 6 | 7 | HACKED BY Sharingan No Shisui 8 | 9 | 10 | 19 | 20 |
21 |
22 |
23 | "Hacked by Sharingan No Shisui" 24 | 25 |
26 | Shinobi Sejati Adalah Shinobi Yang Berjuang 27 |
28 | Dibalik Layar Yang 29 | Tidak Ingin Orang Lain Tahu Arti 30 | Perjuangannya 31 |
32 |
33 |
34 | "Uchiha Shisui 35 | "Uchiha Shisui To Itachi In Naruto Shippuden 454 Itachi Shinden: Shisui's Request" 36 | Special Thanks - Itachi_07(For Script) - XxXKanekiXxX - Kyuko - Xmoody - ZeroSvn - Soldaten-Sta - Mr Cakil - DMG1 - Mr Krespokers - Mr Shadow 17 - Bryant Fiscky™ - Angpl3 - Astra - Anonyyos M.I.B - All Member BCT - 37 | 38 | 39 |