├── LICENSE ├── README.md ├── about.html ├── blogs.html ├── contact.html ├── css └── style.css ├── fontendport.PNG ├── images ├── blog1.png ├── blog2.PNG ├── blog3.PNG ├── blog4.png ├── blog5.PNG ├── blog6.PNG ├── icon-1.png ├── icon-2.png ├── icon-3.png ├── icon-4.png ├── icon-5.png ├── icon-6.png ├── img-1.PNG ├── img-2.PNG ├── img-3.PNG ├── img-4.png ├── img-5.PNG ├── img-6.PNG └── user.jpg ├── index.html └── portfolio.html /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Naem Azam 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Front-end-dev-portfolio 2 | 3 | A front-end web developer is responsible for implementing visual and interactive elements that users engage with through their web browser when using a web application. ... A front-end web developer is responsible for implementing visual elements that users see and interact with in a web application. 4 | 5 | ![](./fontendport.PNG) 6 | 7 | # Feature 8 | Only Html And CSS Based Project. 9 | 10 | Pages: 11 | - Home 12 | - About 13 | - Portfolio 14 | - Blogs 15 | - Contact 16 | 17 | 18 | # Demo 19 | [Youtube](https://youtu.be/BNOTvGjRj3A) 20 | 21 | 22 | # Contribution 23 | Open To Fork, Give Give Me a Simple credit 24 | -------------------------------------------------------------------------------- /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | about 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 27 | 28 | 29 | 30 | 31 | 32 |
33 | 34 |

about me

35 | 36 |
37 | 38 |
39 | 40 |

personal info

41 | 42 |
43 | 44 |
45 |

name : john wick

46 |

age : 22

47 |

email : yourmail@mail.com

48 |

address : New York, USA

49 |
50 | 51 |
52 |

freelance : available

53 |

skill : front-end

54 |

experience : 2 years

55 |

language : English

56 |
57 | 58 |
59 | 60 | download CV 61 | 62 |
63 | 64 |
65 | 66 |
67 |

2+

68 |

years of experience

69 |
70 | 71 |
72 |

50+

73 |

happy clients

74 |
75 | 76 |
77 |

150+

78 |

project completed

79 |
80 | 81 |
82 |

3

83 |

awards won

84 |
85 | 86 |
87 | 88 |
89 | 90 |
91 | 92 | 93 | 94 | 95 | 96 |
97 | 98 |

my skills

99 | 100 |
101 |
102 | 103 |

html

104 |
105 |
106 | 107 |

css

108 |
109 |
110 | 111 |

javascript

112 |
113 |
114 | 115 |

sass

116 |
117 |
118 | 119 |

jquery

120 |
121 |
122 | 123 |

react.js

124 |
125 |
126 | 127 |
128 | 129 | 130 | 131 | 132 | 133 |
134 | 135 |

my resume

136 | 137 |
138 | 139 |
140 | 141 | 2015 - 2016 142 |

front-end development

143 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia explicabo magni est quo vitae quis veritatis fugiat optio placeat enim!

144 |
145 | 146 |
147 | 148 | 2016 - 2017 149 |

front-end development

150 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia explicabo magni est quo vitae quis veritatis fugiat optio placeat enim!

151 |
152 | 153 |
154 | 155 | 2017 - 2018 156 |

front-end development

157 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia explicabo magni est quo vitae quis veritatis fugiat optio placeat enim!

158 |
159 | 160 |
161 | 162 | 2018 - 2019 163 |

front-end development

164 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia explicabo magni est quo vitae quis veritatis fugiat optio placeat enim!

165 |
166 | 167 |
168 | 169 | 2019 - 2020 170 |

front-end development

171 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia explicabo magni est quo vitae quis veritatis fugiat optio placeat enim!

172 |
173 | 174 |
175 | 176 | 2020 - 2021 177 |

front-end development

178 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia explicabo magni est quo vitae quis veritatis fugiat optio placeat enim!

179 |
180 | 181 |
182 | 183 |
184 | 185 | 186 | 187 | 188 | -------------------------------------------------------------------------------- /blogs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | blogs 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 27 | 28 | 29 | 30 | 31 | 32 |
33 | 34 |

my blogs

35 | 36 |
37 | 38 |
39 |
40 | 41 |
42 |
43 |
44 | 21st may, 2021 45 | by admin 46 |
47 |

Impossible-OS

48 |

Everyone is saying make a OS by using Html CSS and js is not possible that's why I named it Impossible OS. But I Know You will Like IT.

49 | read more 50 |
51 |
52 | 53 |
54 |
55 | 56 |
57 |
58 |
59 | 21st may, 2021 60 | by admin 61 |
62 |

Live Browser

63 |

Live Browser is a fully browser based (funny) BROWSER!!

64 | read more 65 |
66 |
67 | 68 |
69 |
70 | 71 |
72 |
73 |
74 | 21st may, 2021 75 | by admin 76 |
77 |

Note Keeper

78 |

Take Your Note Online

79 | read more 80 |
81 |
82 | 83 |
84 |
85 | 86 |
87 |
88 |
89 | 21st may, 2021 90 | by admin 91 |
92 |

Voov Automation

93 |

Join Online Meeting Auto

94 | read more 95 |
96 |
97 | 98 |
99 |
100 | 101 |
102 |
103 |
104 | 21st may, 2021 105 | by admin 106 |
107 |

Chrome-Dinosaur

108 |

simple chrome offline T-rex Runner game clone using html CSS and JS

109 | read more 110 |
111 |
112 | 113 |
114 |
115 | 116 |
117 |
118 |
119 | 21st may, 2021 120 | by admin 121 |
122 |

Google Clone

123 |

Make Google Search Clone

124 | read more 125 |
126 |
127 | 128 |
129 | 130 |
131 | 132 | 133 | 134 | 135 | -------------------------------------------------------------------------------- /contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | contact 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 27 | 28 | 29 | 30 | 31 | 32 |
33 | 34 |

contact me

35 | 36 |
37 | 38 |
39 | 40 |

get in touch

41 | 42 |

Tell me If You have any Project :-)

43 | 44 |
45 | 46 |
47 | 48 |
49 |

address :

50 |

New York, USA

51 |
52 |
53 | 54 |
55 | 56 |
57 |

email :

58 |

yourmail@mail.com

59 |
60 |
61 | 62 |
63 | 64 |
65 |

number :

66 |

+123-456-7890

67 |
68 |
69 | 70 |
71 | 72 | 78 | 79 |
80 | 81 |
82 | 83 |
84 | 85 | 86 |
87 | 88 |
89 | 90 | 91 |
92 | 93 | 94 | 95 | 96 | 97 |
98 | 99 |
100 | 101 |
102 | 103 | 104 | 105 | 106 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700&display=swap"); 2 | * { 3 | font-family: 'Poppins', sans-serif; 4 | margin: 0; 5 | padding: 0; 6 | -webkit-box-sizing: border-box; 7 | box-sizing: border-box; 8 | text-decoration: none; 9 | outline: none; 10 | border: none; 11 | text-transform: capitalize; 12 | } 13 | 14 | html { 15 | font-size: 62.5%; 16 | overflow-x: hidden; 17 | } 18 | 19 | html::-webkit-scrollbar { 20 | width: 1rem; 21 | } 22 | 23 | html::-webkit-scrollbar-track { 24 | background: #0d0d0d; 25 | } 26 | 27 | html::-webkit-scrollbar-thumb { 28 | background: #00ddff; 29 | border-radius: 5rem; 30 | } 31 | 32 | body { 33 | background: #0d0d0d; 34 | padding-bottom: 6.5rem; 35 | } 36 | 37 | section { 38 | padding: 5rem 9%; 39 | } 40 | 41 | .heading { 42 | text-align: center; 43 | font-size: 6vw; 44 | color: #fff; 45 | margin-bottom: 3rem; 46 | text-transform: uppercase; 47 | } 48 | 49 | .heading span { 50 | text-transform: uppercase; 51 | color: #376e3c; 52 | } 53 | 54 | .btn { 55 | display: inline-block; 56 | margin-top: 1rem; 57 | border-radius: 5rem; 58 | background: #1a5c31; 59 | padding: .7rem; 60 | font-size: 1.7rem; 61 | color: #05f2f2; 62 | padding-left: 2rem; 63 | } 64 | 65 | .btn i { 66 | height: 4rem; 67 | width: 4rem; 68 | line-height: 4rem; 69 | font-size: 1.7rem; 70 | text-align: center; 71 | background: #242b2b; 72 | color: #20d0d6; 73 | border-radius: 50%; 74 | margin-left: 1rem; 75 | -webkit-transition: .2s linear; 76 | transition: .2s linear; 77 | } 78 | 79 | .btn:hover i { 80 | margin-left: 2rem; 81 | } 82 | 83 | .navbar { 84 | position: fixed; 85 | bottom: 0; 86 | left: 0; 87 | right: 0; 88 | display: -webkit-box; 89 | display: -ms-flexbox; 90 | display: flex; 91 | z-index: 1000; 92 | -webkit-box-align: end; 93 | -ms-flex-align: end; 94 | align-items: flex-end; 95 | } 96 | 97 | .navbar a { 98 | padding: 2rem; 99 | font-size: 2rem; 100 | background: #27292b; 101 | -webkit-box-flex: 1; 102 | -ms-flex: 1; 103 | flex: 1; 104 | color: #0ce3eb; 105 | text-align: center; 106 | -webkit-transition: .2s linear; 107 | transition: .2s linear; 108 | } 109 | 110 | .navbar a i { 111 | color: #219159; 112 | padding-right: .5rem; 113 | } 114 | 115 | .navbar a:hover { 116 | background: #3b3d3c; 117 | padding-bottom: 6rem; 118 | } 119 | 120 | .navbar a:hover i { 121 | color: #00f018; 122 | } 123 | 124 | .home { 125 | display: -webkit-box; 126 | display: -ms-flexbox; 127 | display: flex; 128 | -webkit-box-align: center; 129 | -ms-flex-align: center; 130 | align-items: center; 131 | -ms-flex-wrap: wrap; 132 | flex-wrap: wrap; 133 | gap: 4rem; 134 | min-height: calc(100vh - 6.5rem); 135 | } 136 | 137 | .home .image { 138 | -webkit-box-flex: 1; 139 | -ms-flex: 1 1 42rem; 140 | flex: 1 1 42rem; 141 | text-align: center; 142 | } 143 | 144 | .home .image img { 145 | height: 50rem; 146 | width: 50rem; 147 | border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; 148 | } 149 | 150 | .home .content { 151 | -webkit-box-flex: 1; 152 | -ms-flex: 1 1 42rem; 153 | flex: 1 1 42rem; 154 | } 155 | 156 | .home .content h3 { 157 | color: #fff; 158 | font-size: 4rem; 159 | padding-bottom: .5rem; 160 | } 161 | 162 | .home .content span { 163 | font-size: 3rem; 164 | color: #42965b; 165 | padding: .5rem 0; 166 | display: block; 167 | } 168 | 169 | .home .content p { 170 | font-size: 1.5rem; 171 | color: #27d4f5; 172 | padding: 1rem 0; 173 | line-height: 2; 174 | } 175 | 176 | .about .row { 177 | display: -webkit-box; 178 | display: -ms-flexbox; 179 | display: flex; 180 | -webkit-box-align: center; 181 | -ms-flex-align: center; 182 | align-items: center; 183 | -ms-flex-wrap: wrap; 184 | flex-wrap: wrap; 185 | gap: 2rem; 186 | } 187 | 188 | .about .row .info-container { 189 | -webkit-box-flex: 1; 190 | -ms-flex: 1 1 42rem; 191 | flex: 1 1 42rem; 192 | } 193 | 194 | .about .row .info-container h1 { 195 | font-size: 3rem; 196 | color: #fff; 197 | text-transform: uppercase; 198 | padding-bottom: 1rem; 199 | } 200 | 201 | .about .row .info-container .box-container { 202 | padding: 1rem 0; 203 | display: -webkit-box; 204 | display: -ms-flexbox; 205 | display: flex; 206 | -ms-flex-wrap: wrap; 207 | flex-wrap: wrap; 208 | gap: 2rem; 209 | } 210 | 211 | .about .row .info-container .box-container .box { 212 | -webkit-box-flex: 1; 213 | -ms-flex: 1 1 20rem; 214 | flex: 1 1 20rem; 215 | } 216 | 217 | .about .row .info-container .box-container .box h3 { 218 | font-size: 1.7rem; 219 | color: #fff; 220 | padding: 1rem 0; 221 | font-weight: normal; 222 | } 223 | 224 | .about .row .info-container .box-container .box h3 span { 225 | color: #00a6ff; 226 | } 227 | 228 | .about .row .count-container { 229 | -webkit-box-flex: 1; 230 | -ms-flex: 1 1 42rem; 231 | flex: 1 1 42rem; 232 | display: -webkit-box; 233 | display: -ms-flexbox; 234 | display: flex; 235 | -ms-flex-wrap: wrap; 236 | flex-wrap: wrap; 237 | gap: 2rem; 238 | } 239 | 240 | .about .row .count-container .box { 241 | -webkit-box-flex: 1; 242 | -ms-flex: 1 1 20rem; 243 | flex: 1 1 20rem; 244 | padding: 3rem 4rem; 245 | border-radius: .5rem; 246 | background: #1a1a1a; 247 | -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7); 248 | box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7); 249 | } 250 | 251 | .about .row .count-container .box h3 { 252 | font-size: 5rem; 253 | color: #2fc23c; 254 | } 255 | 256 | .about .row .count-container .box p { 257 | font-size: 2rem; 258 | color: #23dbd5; 259 | } 260 | 261 | .skills .box-container { 262 | display: -ms-grid; 263 | display: grid; 264 | -ms-grid-columns: (minmax(16rem, 1fr))[auto-fit]; 265 | grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); 266 | gap: 1.5rem; 267 | } 268 | 269 | .skills .box-container .box { 270 | padding: 2rem; 271 | text-align: center; 272 | -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7); 273 | box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7); 274 | border-radius: .5rem; 275 | background: #213837; 276 | } 277 | 278 | .skills .box-container .box:hover { 279 | background: #2f3635; 280 | } 281 | 282 | .skills .box-container .box:hover h3 { 283 | color: #0afad8; 284 | } 285 | 286 | .skills .box-container .box img { 287 | height: 7rem; 288 | margin-bottom: 1rem; 289 | } 290 | 291 | .skills .box-container .box h3 { 292 | color: #fff; 293 | font-size: 1.7rem; 294 | font-weight: normal; 295 | text-transform: uppercase; 296 | } 297 | 298 | .education .box-container { 299 | display: -webkit-box; 300 | display: -ms-flexbox; 301 | display: flex; 302 | -ms-flex-wrap: wrap; 303 | flex-wrap: wrap; 304 | } 305 | 306 | .education .box-container .box { 307 | -webkit-box-flex: 1; 308 | -ms-flex: 1 1 40rem; 309 | flex: 1 1 40rem; 310 | margin-left: 2rem; 311 | padding-top: 0; 312 | padding-bottom: 0; 313 | padding-left: 3.5rem; 314 | padding-bottom: 3rem; 315 | border-left: 0.1rem solid #aaa; 316 | position: relative; 317 | } 318 | 319 | .education .box-container .box i { 320 | height: 4.5rem; 321 | width: 4.5rem; 322 | line-height: 4.5rem; 323 | font-size: 1.7rem; 324 | border-radius: 50%; 325 | background: #196b5f; 326 | color: #fff; 327 | text-align: center; 328 | position: absolute; 329 | top: -1rem; 330 | left: -2.5rem; 331 | } 332 | 333 | .education .box-container .box span { 334 | font-size: 1.7rem; 335 | color: #fff; 336 | border-radius: 5rem; 337 | padding: .5rem 1.5rem; 338 | background: #1a1a1a; 339 | } 340 | 341 | .education .box-container .box h3 { 342 | font-size: 2rem; 343 | padding: 1rem 0; 344 | color: #fff; 345 | padding-top: 3rem; 346 | font-weight: normal; 347 | } 348 | 349 | .education .box-container .box p { 350 | font-size: 1.5rem; 351 | color: #aaa; 352 | line-height: 2; 353 | } 354 | 355 | .portfolio { 356 | text-align: center; 357 | } 358 | 359 | .portfolio .box-container { 360 | display: -ms-grid; 361 | display: grid; 362 | -ms-grid-columns: (minmax(31rem, 1fr))[auto-fit]; 363 | grid-template-columns: repeat(auto-fit, minmax(31rem, 1fr)); 364 | gap: 1.5rem; 365 | margin-bottom: 2rem; 366 | } 367 | 368 | .portfolio .box-container .box { 369 | height: 30rem; 370 | overflow: hidden; 371 | position: relative; 372 | } 373 | 374 | .portfolio .box-container .box:hover .content { 375 | -webkit-transform: translateY(0%); 376 | transform: translateY(0%); 377 | } 378 | 379 | .portfolio .box-container .box img { 380 | height: 100%; 381 | width: 100%; 382 | -o-object-fit: cover; 383 | object-fit: cover; 384 | } 385 | 386 | .portfolio .box-container .box .content { 387 | position: absolute; 388 | top: 0; 389 | left: 0; 390 | height: 100%; 391 | width: 100%; 392 | background: #1a1a1a; 393 | display: -webkit-box; 394 | display: -ms-flexbox; 395 | display: flex; 396 | -webkit-box-orient: vertical; 397 | -webkit-box-direction: normal; 398 | -ms-flex-flow: column; 399 | flex-flow: column; 400 | -webkit-box-align: center; 401 | -ms-flex-align: center; 402 | align-items: center; 403 | -webkit-box-pack: center; 404 | -ms-flex-pack: center; 405 | justify-content: center; 406 | padding: 2rem; 407 | -webkit-transform: translateY(-100%); 408 | transform: translateY(-100%); 409 | -webkit-transition: .2s linear; 410 | transition: .2s linear; 411 | } 412 | 413 | .portfolio .box-container .box .content h3 { 414 | font-size: 2.5rem; 415 | color: #fff; 416 | text-transform: uppercase; 417 | font-weight: normal; 418 | } 419 | 420 | .portfolio .box-container .box .content p { 421 | padding: 1rem 0; 422 | font-size: 1.5rem; 423 | line-height: 2; 424 | color: #aaa; 425 | } 426 | 427 | .portfolio .box-container .box .content a { 428 | font-size: 2rem; 429 | color: #28a5b8; 430 | } 431 | 432 | .portfolio .box-container .box .content a:hover { 433 | color: #fff; 434 | } 435 | 436 | .blogs .box-container { 437 | display: -ms-grid; 438 | display: grid; 439 | -ms-grid-columns: (minmax(31rem, 1fr))[auto-fit]; 440 | grid-template-columns: repeat(auto-fit, minmax(31rem, 1fr)); 441 | gap: 1.5rem; 442 | } 443 | 444 | .blogs .box-container .box { 445 | text-align: center; 446 | padding: 2rem; 447 | border-radius: .5rem; 448 | background: #1a1a1a; 449 | -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7); 450 | box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7); 451 | } 452 | 453 | .blogs .box-container .box:hover .image img { 454 | -webkit-transform: scale(1.2); 455 | transform: scale(1.2); 456 | } 457 | 458 | .blogs .box-container .box .image { 459 | height: 25rem; 460 | width: 100%; 461 | border-radius: .5rem; 462 | overflow: hidden; 463 | } 464 | 465 | .blogs .box-container .box .image img { 466 | height: 100%; 467 | width: 100%; 468 | -o-object-fit: cover; 469 | object-fit: cover; 470 | -webkit-transition: .2s linear; 471 | transition: .2s linear; 472 | } 473 | 474 | .blogs .box-container .box .content .icons { 475 | position: relative; 476 | top: -1rem; 477 | border-radius: .5rem; 478 | padding: 1.5rem; 479 | display: inline-block; 480 | background: #0d0d0d; 481 | } 482 | 483 | .blogs .box-container .box .content .icons a { 484 | font-size: 1.4rem; 485 | margin: 0 1rem; 486 | color: #fff; 487 | } 488 | 489 | .blogs .box-container .box .content .icons a:hover { 490 | color: #0fd9bb; 491 | } 492 | 493 | .blogs .box-container .box .content .icons a i { 494 | padding-right: .5rem; 495 | color: #30611d; 496 | } 497 | 498 | .blogs .box-container .box .content h3 { 499 | font-size: 2rem; 500 | color: #fff; 501 | font-weight: normal; 502 | } 503 | 504 | .blogs .box-container .box .content p { 505 | font-size: 1.5rem; 506 | color: #aaa; 507 | padding: 1rem 0; 508 | line-height: 2; 509 | } 510 | 511 | .contact .row { 512 | display: -webkit-box; 513 | display: -ms-flexbox; 514 | display: flex; 515 | -webkit-box-align: center; 516 | -ms-flex-align: center; 517 | align-items: center; 518 | -ms-flex-wrap: wrap; 519 | flex-wrap: wrap; 520 | gap: 2rem; 521 | } 522 | 523 | .contact .row .info-container { 524 | width: 40rem; 525 | } 526 | 527 | .contact .row .info-container h1 { 528 | font-size: 3rem; 529 | text-transform: uppercase; 530 | color: #fff; 531 | padding-bottom: 1rem; 532 | } 533 | 534 | .contact .row .info-container p { 535 | font-size: 1.5rem; 536 | line-height: 2; 537 | color: #aaa; 538 | padding: 1rem 0; 539 | } 540 | 541 | .contact .row .info-container .box-container { 542 | padding: 2rem 0; 543 | } 544 | 545 | .contact .row .info-container .box-container .box { 546 | display: -webkit-box; 547 | display: -ms-flexbox; 548 | display: flex; 549 | gap: 2rem; 550 | padding: 1rem 0; 551 | } 552 | 553 | .contact .row .info-container .box-container .box i { 554 | font-size: 3rem; 555 | color: #13bda0; 556 | } 557 | 558 | .contact .row .info-container .box-container .box h3 { 559 | font-size: 2rem; 560 | color: #fff; 561 | } 562 | 563 | .contact .row .info-container .share a { 564 | font-size: 2rem; 565 | height: 4.5rem; 566 | width: 4.5rem; 567 | line-height: 4.5rem; 568 | border-radius: 50%; 569 | background: #1a1a1a; 570 | color: #fff; 571 | text-align: center; 572 | margin-right: .3rem; 573 | } 574 | 575 | .contact .row .info-container .share a:hover { 576 | background: #42965b; 577 | } 578 | 579 | .contact .row form { 580 | -webkit-box-flex: 1; 581 | -ms-flex: 1 1 42rem; 582 | flex: 1 1 42rem; 583 | } 584 | 585 | .contact .row form .inputBox { 586 | display: -webkit-box; 587 | display: -ms-flexbox; 588 | display: flex; 589 | -ms-flex-wrap: wrap; 590 | flex-wrap: wrap; 591 | -webkit-box-pack: justify; 592 | -ms-flex-pack: justify; 593 | justify-content: space-between; 594 | } 595 | 596 | .contact .row form .inputBox input { 597 | width: 49%; 598 | } 599 | 600 | .contact .row form .inputBox input, 601 | .contact .row form textarea { 602 | border-radius: 5rem; 603 | padding: 1.2rem 1.8rem; 604 | font-size: 1.6rem; 605 | color: #fff; 606 | text-transform: none; 607 | margin: .7rem 0; 608 | background: #1a1a1a; 609 | } 610 | 611 | .contact .row form textarea { 612 | width: 100%; 613 | border-radius: 1rem; 614 | resize: none; 615 | height: 25rem; 616 | } 617 | 618 | .contact .row form .btn { 619 | padding: 1rem 3rem; 620 | cursor: pointer; 621 | } 622 | 623 | .contact .row form .btn:hover { 624 | background: #fff; 625 | color: #0d0d0d; 626 | } 627 | 628 | @media (max-width: 1200px) { 629 | html { 630 | font-size: 55%; 631 | } 632 | section { 633 | padding: 3rem 2rem; 634 | } 635 | } 636 | 637 | @media (max-width: 768px) { 638 | .heading { 639 | font-size: 12vw; 640 | } 641 | .navbar a i { 642 | padding: 0; 643 | } 644 | .navbar a span { 645 | display: none; 646 | } 647 | .navbar a:hover { 648 | padding-bottom: 2rem; 649 | } 650 | .home { 651 | text-align: center; 652 | gap: 2rem; 653 | } 654 | .home .image img { 655 | height: 30rem; 656 | width: 30rem; 657 | } 658 | .home .content h3 { 659 | font-size: 3rem; 660 | } 661 | .home .content span { 662 | font-size: 2.5rem; 663 | } 664 | .contact .row form .inputBox input { 665 | width: 100%; 666 | margin-bottom: 1rem; 667 | } 668 | } 669 | 670 | @media (max-width: 450px) { 671 | html { 672 | font-size: 50%; 673 | } 674 | } 675 | /*# sourceMappingURL=style.css.map */ -------------------------------------------------------------------------------- /fontendport.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naemazam/Front-end-dev-portfolio/3f9b89462a6523709f986e277395781afca22860/fontendport.PNG -------------------------------------------------------------------------------- /images/blog1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naemazam/Front-end-dev-portfolio/3f9b89462a6523709f986e277395781afca22860/images/blog1.png -------------------------------------------------------------------------------- /images/blog2.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naemazam/Front-end-dev-portfolio/3f9b89462a6523709f986e277395781afca22860/images/blog2.PNG -------------------------------------------------------------------------------- /images/blog3.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naemazam/Front-end-dev-portfolio/3f9b89462a6523709f986e277395781afca22860/images/blog3.PNG -------------------------------------------------------------------------------- /images/blog4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naemazam/Front-end-dev-portfolio/3f9b89462a6523709f986e277395781afca22860/images/blog4.png -------------------------------------------------------------------------------- /images/blog5.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naemazam/Front-end-dev-portfolio/3f9b89462a6523709f986e277395781afca22860/images/blog5.PNG -------------------------------------------------------------------------------- /images/blog6.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naemazam/Front-end-dev-portfolio/3f9b89462a6523709f986e277395781afca22860/images/blog6.PNG -------------------------------------------------------------------------------- /images/icon-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naemazam/Front-end-dev-portfolio/3f9b89462a6523709f986e277395781afca22860/images/icon-1.png -------------------------------------------------------------------------------- /images/icon-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naemazam/Front-end-dev-portfolio/3f9b89462a6523709f986e277395781afca22860/images/icon-2.png -------------------------------------------------------------------------------- /images/icon-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naemazam/Front-end-dev-portfolio/3f9b89462a6523709f986e277395781afca22860/images/icon-3.png -------------------------------------------------------------------------------- /images/icon-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naemazam/Front-end-dev-portfolio/3f9b89462a6523709f986e277395781afca22860/images/icon-4.png -------------------------------------------------------------------------------- /images/icon-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naemazam/Front-end-dev-portfolio/3f9b89462a6523709f986e277395781afca22860/images/icon-5.png -------------------------------------------------------------------------------- /images/icon-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naemazam/Front-end-dev-portfolio/3f9b89462a6523709f986e277395781afca22860/images/icon-6.png -------------------------------------------------------------------------------- /images/img-1.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naemazam/Front-end-dev-portfolio/3f9b89462a6523709f986e277395781afca22860/images/img-1.PNG -------------------------------------------------------------------------------- /images/img-2.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naemazam/Front-end-dev-portfolio/3f9b89462a6523709f986e277395781afca22860/images/img-2.PNG -------------------------------------------------------------------------------- /images/img-3.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naemazam/Front-end-dev-portfolio/3f9b89462a6523709f986e277395781afca22860/images/img-3.PNG -------------------------------------------------------------------------------- /images/img-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naemazam/Front-end-dev-portfolio/3f9b89462a6523709f986e277395781afca22860/images/img-4.png -------------------------------------------------------------------------------- /images/img-5.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naemazam/Front-end-dev-portfolio/3f9b89462a6523709f986e277395781afca22860/images/img-5.PNG -------------------------------------------------------------------------------- /images/img-6.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naemazam/Front-end-dev-portfolio/3f9b89462a6523709f986e277395781afca22860/images/img-6.PNG -------------------------------------------------------------------------------- /images/user.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/naemazam/Front-end-dev-portfolio/3f9b89462a6523709f986e277395781afca22860/images/user.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Front-end-dev-portfolio 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 27 | 28 | 29 | 30 | 31 | 32 |
33 | 34 |
35 | 36 |
37 | 38 |
39 |

hi, i am John Wick

40 | Front-end developer 41 |

i am also an open-source enthusiast and maintainer. i learned a lot from the open-source community and i love how collaboration and knowledge sharing happened through open-source.

42 | about me 43 |
44 | 45 |
46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /portfolio.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | portfolio 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 27 | 28 | 29 | 30 | 31 | 32 |
33 | 34 |

my work

35 | 36 |
37 | 38 |
39 | 40 |
41 |

CheatSheet Hub

42 |

Cheatsheets That Devlope Your Productivity

43 | read more 44 |
45 |
46 | 47 |
48 | 49 |
50 |

Covid-19

51 |

COVID-19 is caused by a coronavirus called SARS-CoV-2.

52 | read more 53 |
54 |
55 | 56 |
57 | 58 |
59 |

Chess

60 |

Chess is a board game played between two players.

61 | read more 62 |
63 |
64 | 65 |
66 | 67 |
68 |

Need Linux

69 |

Hi, Tux User, It's Time For Make A world of Open Source

70 | read more 71 |
72 |
73 | 74 |
75 | 76 |
77 |

CV Baba

78 |

Make your Resume 79 | look really good.

80 | read more 81 |
82 |
83 | 84 |
85 | 86 |
87 |

Soft UI

88 |

Perfect Soft UI Portfolio

89 | read more 90 |
91 |
92 | 93 |
94 | 95 | load more 96 | 97 |
98 | 99 | 100 | 101 | 102 | --------------------------------------------------------------------------------