├── images ├── main-img.png ├── background.jpg ├── dark-background-abstract.png └── IMG_20220930_093514_prev_ui.png ├── javascript └── app.js ├── index.html └── css └── style.css /images/main-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javohirveb/tahmid-portfolio/HEAD/images/main-img.png -------------------------------------------------------------------------------- /images/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javohirveb/tahmid-portfolio/HEAD/images/background.jpg -------------------------------------------------------------------------------- /images/dark-background-abstract.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javohirveb/tahmid-portfolio/HEAD/images/dark-background-abstract.png -------------------------------------------------------------------------------- /images/IMG_20220930_093514_prev_ui.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javohirveb/tahmid-portfolio/HEAD/images/IMG_20220930_093514_prev_ui.png -------------------------------------------------------------------------------- /javascript/app.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | let bars = document.querySelector('.fa-bars') 4 | let navbar = document.querySelector('ul') 5 | let items = document.querySelectorAll('.navbar__link') 6 | 7 | bars.addEventListener('click', () => { 8 | bars.classList.toggle("fa-x") 9 | bars.classList.toggle('fixed') 10 | navbar.classList.toggle('top-0') 11 | }) 12 | 13 | items.addEventListener('click', () => { 14 | navbar.classList.toggle('top-0') 15 | }) -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 12 | Tahmid portfolio 13 | 14 | 15 | 16 | 17 | 18 |
19 | 30 |
31 |

Hello, my name is

32 |

Tahmid Ahmed

33 |

I'm a Web Developer.

34 |
35 |
36 | 37 | 38 |
39 |
40 |
41 |
42 | 43 | 44 |
45 |
46 | main-img 47 |
48 |

About Me

49 |
Developer & Designer
50 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus possimus nam eos id, exercitationem 51 | sed soluta delectus iusto hic ipsam molestiae consequuntur et repellendus vel ducimus, cupiditate 52 | impedit quia in.

53 | 54 |
55 |
56 |
57 | 58 | 59 |
60 |
61 |

Our Services

62 |
63 |
64 |
65 | 66 |
Web Development
67 |
68 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam recusandae id 69 | illo, in corporis excepturi est? Dolorum totam optio laboriosam pariatur dolores officia quis 70 | deserunt. 71 |

72 |

73 | Read More 74 |

75 |
76 |
77 | 78 |
79 | 80 |
Web Development
81 |
82 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam recusandae id 83 | illo, in corporis excepturi est? Dolorum totam optio laboriosam pariatur dolores officia quis 84 | deserunt. 85 |

86 |

87 | Read More 88 |

89 |
90 |
91 | 92 |
93 | 94 |
Web Development
95 |
96 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam recusandae id 97 | illo, in corporis excepturi est? Dolorum totam optio laboriosam pariatur dolores officia quis 98 | deserunt. 99 |

100 |

101 | Read More 102 |

103 |
104 |
105 |
106 |
107 | 108 | 109 |
110 |

Let Me Get You A Beautiful Website

111 | Hire Me 112 |
113 | 114 | 115 | 127 | 128 | 129 | 130 | 131 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | font-family: 'Josefin Sans', sans-serif; 5 | box-sizing: border-box; 6 | } 7 | 8 | html { 9 | scroll-behavior: smooth; 10 | } 11 | 12 | .hero { 13 | height: 100vh; 14 | width: 100%; 15 | background-image: url(../images/background.jpg); 16 | background-size: cover; 17 | background-position: center; 18 | } 19 | 20 | nav { 21 | display: flex; 22 | align-items: center; 23 | justify-content: space-between; 24 | padding-top: 45px; 25 | padding-left: 8%; 26 | padding-right: 8%; 27 | } 28 | 29 | .logo { 30 | color: white; 31 | font-size: 35px; 32 | letter-spacing: 1px; 33 | cursor: pointer; 34 | } 35 | 36 | span { 37 | color: #f9004d; 38 | } 39 | 40 | nav ul li { 41 | list-style-type: none; 42 | display: inline-block; 43 | padding: 10px 25px; 44 | } 45 | 46 | nav ul li .navbar__link { 47 | color: white; 48 | text-decoration: none; 49 | font-weight: bold; 50 | text-transform: capitalize; 51 | } 52 | 53 | nav ul li .navbar__link:hover { 54 | color: #f9004d; 55 | transition: 0.4s; 56 | } 57 | 58 | .btn { 59 | background-color: #f9004d; 60 | color: white; 61 | text-decoration: none; 62 | border: 2px solid transparent; 63 | font-weight: bold; 64 | padding: 10px 25px; 65 | border-radius: 30px; 66 | transition: transform 0.4s; 67 | } 68 | 69 | .btn:hover { 70 | transform: scale(1.2); 71 | } 72 | 73 | .content { 74 | position: absolute; 75 | top: 50%; 76 | left: 8%; 77 | transform: translateY(-50%); 78 | } 79 | 80 | h1 { 81 | color: white; 82 | margin: 20px 0px 20px; 83 | font-size: 75px; 84 | } 85 | 86 | h3 { 87 | color: white; 88 | font-size: 25px; 89 | margin-bottom: 50px; 90 | } 91 | 92 | h4 { 93 | color: #fcfc; 94 | letter-spacing: 2px; 95 | font-size: 20px; 96 | } 97 | 98 | .newslatter form { 99 | width: 380px; 100 | max-width: 100%; 101 | position: relative; 102 | } 103 | 104 | .newslatter form input:first-child { 105 | display: inline-block; 106 | width: 100%; 107 | padding: 14px 130px 14px 15px; 108 | border: 2px solid #f9004d; 109 | outline: none; 110 | border-radius: 30px; 111 | } 112 | 113 | .newslatter form input:last-child { 114 | position: absolute; 115 | display: inline-block; 116 | outline: none; 117 | border: none; 118 | padding: 10px 30px; 119 | border-radius: 30px; 120 | background-color: #f9004d; 121 | color: white; 122 | box-shadow: 0px 0px 5px #000, 0px 0px 15px #858585; 123 | top: 6px; 124 | right: 6px; 125 | cursor: pointer; 126 | } 127 | 128 | .fa-bars { 129 | display: none; 130 | } 131 | 132 | .top-0 { 133 | top: 0; 134 | } 135 | 136 | .fixed { 137 | position: fixed !important; 138 | } 139 | 140 | @media only screen and (max-width: 768px) { 141 | .fa-bars { 142 | position: absolute; 143 | right: 50px; 144 | top: 50px; 145 | display: block; 146 | color: #fff; 147 | font-size: 24px; 148 | z-index: 11; 149 | cursor: pointer; 150 | } 151 | .btn { 152 | display: none; 153 | } 154 | nav ul { 155 | position: fixed; 156 | left: 0; 157 | top: -100%; 158 | width: 100%; 159 | height: 50vh; 160 | background: #000000c9; 161 | z-index: 10; 162 | display: flex; 163 | justify-content: center; 164 | align-items: center; 165 | flex-direction: column; 166 | border-bottom-left-radius: 30px; 167 | border-bottom-right-radius: 30px; 168 | transition: all 0.4s ease-in; 169 | } 170 | 171 | h1 { 172 | font-size: 35px; 173 | } 174 | 175 | h3 { 176 | font-size: 20px; 177 | margin-bottom: 50px; 178 | } 179 | 180 | h4 { 181 | letter-spacing: 2px; 182 | font-size: 16px; 183 | } 184 | .newslatter form { 185 | width: 80%; 186 | position: relative; 187 | } 188 | } 189 | 190 | 191 | .about { 192 | width: 100%; 193 | padding: 100px 0px; 194 | background-color: #191919; 195 | } 196 | 197 | .about img { 198 | height: auto; 199 | width: 430px; 200 | } 201 | 202 | .about-text { 203 | width: 550px; 204 | } 205 | 206 | .main { 207 | display: flex; 208 | align-items: center; 209 | justify-content: space-around; 210 | } 211 | 212 | .about-text h2 { 213 | color: white; 214 | font-size: 75px; 215 | text-transform: capitalize; 216 | margin-bottom: 20px; 217 | } 218 | 219 | .about-text h5 { 220 | color: #fff; 221 | letter-spacing: 2px; 222 | font-size: 22px; 223 | margin-bottom: 25px; 224 | text-transform: capitalize; 225 | } 226 | 227 | .about-text p { 228 | color: #fff; 229 | letter-spacing: 1px; 230 | line-height: 28px; 231 | font-size: 18px; 232 | margin-bottom: 45px; 233 | } 234 | 235 | button { 236 | background-color: #f9004d; 237 | color: white; 238 | text-decoration: none; 239 | border: 2px solid transparent; 240 | font-weight: bold; 241 | padding: 13px 30px; 242 | border-radius: 30px; 243 | transition: 0.4s; 244 | } 245 | 246 | button:hover { 247 | background-color: transparent; 248 | border: 2px solid #f9004d; 249 | cursor: pointer; 250 | } 251 | 252 | @media only screen and (max-width: 768px) { 253 | .main { 254 | flex-direction: column; 255 | } 256 | .main img { 257 | width: 250px; 258 | } 259 | .about-text { 260 | text-align: center; 261 | width: auto; 262 | padding: 0px 20px; 263 | } 264 | 265 | .about-text h2 { 266 | font-size: 35px; 267 | margin-top: 10px; 268 | } 269 | 270 | .about-text h5 { 271 | font-size: 18px; 272 | } 273 | 274 | .about-text p { 275 | font-size: 14px; 276 | line-height: 18px; 277 | } 278 | } 279 | 280 | .service { 281 | background: #101010; 282 | width: 100%; 283 | padding: 100px 0px; 284 | } 285 | 286 | .title h2 { 287 | color: #fff; 288 | font-size: 75px; 289 | margin: 30px auto; 290 | text-align: center; 291 | } 292 | 293 | .box { 294 | display: flex; 295 | justify-content: center; 296 | align-items: center; 297 | min-height: 400px; 298 | } 299 | 300 | .card { 301 | height: 395px; 302 | width: 335px; 303 | padding: 20px 35px; 304 | background: #191919; 305 | border-radius: 20px; 306 | margin: 15px; 307 | position: relative; 308 | overflow: hidden; 309 | text-align: center 310 | } 311 | 312 | .card i { 313 | font-size: 50px; 314 | display: block; 315 | text-align: center; 316 | margin: 25px 0px; 317 | color: #f9004d; 318 | } 319 | 320 | h5 { 321 | color: white; 322 | font-size: 23px; 323 | margin-bottom: 15px; 324 | } 325 | 326 | .pra p { 327 | color: #fcfc; 328 | font-size: 16px; 329 | line-height: 27px; 330 | margin-bottom: 25px; 331 | } 332 | 333 | .card .button { 334 | background-color: #f9004d; 335 | color: white; 336 | text-decoration: none; 337 | border: 2px solid transparent; 338 | font-weight: bold; 339 | padding: 9px 22px; 340 | border-radius: 30px; 341 | transition: 0.4s; 342 | } 343 | 344 | .card .button:hover { 345 | background-color: transparent; 346 | border: 2px solid #f9004d; 347 | cursor: pointer; 348 | } 349 | 350 | @media only screen and (max-width: 768px) { 351 | .box { 352 | flex-direction: column; 353 | } 354 | .title h2 { 355 | font-size: 35px; 356 | } 357 | } 358 | 359 | .contact-me { 360 | width: 100%; 361 | height: 290px; 362 | background: url(../images/dark-background-abstract.png); 363 | background-attachment: fixed; 364 | background-size: cover; 365 | display: flex; 366 | align-items: center; 367 | flex-direction: column; 368 | justify-content: center; 369 | } 370 | 371 | .contact-me p { 372 | color: white; 373 | font-size: 30px; 374 | font-weight: bold; 375 | margin-bottom: 25px; 376 | } 377 | 378 | .contact-me .button-two { 379 | background-color: #f9004d; 380 | color: white; 381 | text-decoration: none; 382 | border: 2px solid transparent; 383 | font-weight: bold; 384 | padding: 13px 30px; 385 | border-radius: 30px; 386 | transition: 0.4s; 387 | } 388 | 389 | .contact-me .button-two:hover { 390 | background-color: transparent; 391 | border: 2px solid #f9004d; 392 | cursor: pointer; 393 | } 394 | 395 | @media only screen and (max-width: 768px) { 396 | .contact-me p { 397 | font-size: 24px; 398 | } 399 | } 400 | 401 | @media only screen and (max-width: 496px) { 402 | .contact-me p { 403 | font-size: 20px; 404 | } 405 | } 406 | 407 | footer { 408 | position: relative; 409 | width: 100%; 410 | height: 400px; 411 | background: #101010; 412 | display: flex; 413 | flex-direction: column; 414 | align-items: center; 415 | justify-content: center; 416 | } 417 | 418 | footer p:nth-child(1) { 419 | font-size: 30px; 420 | color: white; 421 | margin-bottom: 20px; 422 | font-weight: bold; 423 | } 424 | 425 | footer p:nth-child(2) { 426 | color: white; 427 | font-size: 17px; 428 | width: 500px; 429 | text-align: center; 430 | line-height: 26px; 431 | } 432 | 433 | .social { 434 | display: flex; 435 | } 436 | .social a { 437 | width: 45px; 438 | height: 45px; 439 | display: flex; 440 | align-items: center; 441 | justify-content: center; 442 | background: #f9004d; 443 | color: #fff; 444 | border-radius: 50%; 445 | margin: 22px 10px; 446 | text-decoration: none; 447 | font-size: 20px; 448 | transition: 0.3s; 449 | } 450 | 451 | .social a:hover { 452 | transform: scale(1.3); 453 | } 454 | 455 | .end { 456 | position: absolute; 457 | color: #f9004d; 458 | bottom: 35px; 459 | font-size: 14px; 460 | } 461 | 462 | .end a { 463 | color: #f9004d; 464 | } 465 | 466 | .end a:hover { 467 | color: #858585; 468 | } 469 | 470 | @media only screen and (max-width: 768px) { 471 | footer p:nth-child(2) { 472 | color: white; 473 | font-size: 14px; 474 | width: 80%; 475 | } 476 | } --------------------------------------------------------------------------------