Adam Portfolio-Procoder09

├── Image ├── bg.jpg ├── img1.jpg ├── menu.png ├── close.png ├── work1.jpg ├── work2.jpg ├── work3.jpg ├── work4.jpg ├── work5.jpg └── work6.jpg ├── README.md ├── index.html └── style.css /Image/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ritesh-0309/Complete_Portfolio_Website/HEAD/Image/bg.jpg -------------------------------------------------------------------------------- /Image/img1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ritesh-0309/Complete_Portfolio_Website/HEAD/Image/img1.jpg -------------------------------------------------------------------------------- /Image/menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ritesh-0309/Complete_Portfolio_Website/HEAD/Image/menu.png -------------------------------------------------------------------------------- /Image/close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ritesh-0309/Complete_Portfolio_Website/HEAD/Image/close.png -------------------------------------------------------------------------------- /Image/work1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ritesh-0309/Complete_Portfolio_Website/HEAD/Image/work1.jpg -------------------------------------------------------------------------------- /Image/work2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ritesh-0309/Complete_Portfolio_Website/HEAD/Image/work2.jpg -------------------------------------------------------------------------------- /Image/work3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ritesh-0309/Complete_Portfolio_Website/HEAD/Image/work3.jpg -------------------------------------------------------------------------------- /Image/work4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ritesh-0309/Complete_Portfolio_Website/HEAD/Image/work4.jpg -------------------------------------------------------------------------------- /Image/work5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ritesh-0309/Complete_Portfolio_Website/HEAD/Image/work5.jpg -------------------------------------------------------------------------------- /Image/work6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ritesh-0309/Complete_Portfolio_Website/HEAD/Image/work6.jpg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🌟 Complete Portfolio Website Using HTML & CSS 🌟 2 | A fully responsive and modern portfolio website built with only HTML and CSS. Perfect for showcasing your projects and skills! 3 | 4 | ## 🚀 DEMO 5 | 🔗 [Live Demo]: https://www.procoder09.com/yt-Projects/portfolio-projects/Complete-Adam-Portfolio/ 6 | 🔗 [Download ]: 7 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Adam Portfolio-Procoder09 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

15 | Adam 16 | 17 | 25 |

26 | 27 |

28 |

29 |

Hello, I'm
Adam Smith

30 |

31 |

Web Developer

32 |

Web Designer

33 |

Programmer

34 |

35 | See My Work 36 |

37 | 38 | 39 | 40 | 41 |

42 |

43 |

44 | 45 | 46 | 47 |

48 |

49 |

About me

50 |

51 |

52 |

53 |

54 |

55 |

56 |

57 |

58 |

Hey There! I am Adam Smith

59 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

60 | See more 61 |

62 |

63 |

64 | 65 | 66 | 67 |

68 |

69 |

My Skills

70 |

71 |

72 |

73 |

My Skills and Experiences

74 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

75 | See more 76 |

77 |

78 |

79 |

80 | HTML 81 | 95% 82 |

83 |

84 |

85 |

86 |

87 | CSS 88 | 90% 89 |

90 |

91 |

92 |

93 |

94 | Javascript 95 | 80% 96 |

97 |

98 |

99 |

100 |

101 | Python 102 | 85% 103 |

104 |

105 |

106 |

107 |

108 | PHP 109 | 65% 110 |

111 |

112 |

113 |

114 |

115 |

116 | 117 | 118 | 119 |

120 |

121 |

My Services

122 |

123 |

124 |

125 |

126 |

127 | 128 |

129 |

130 |

Web Design

131 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

132 |

133 |

134 |

135 |

136 | 137 |

138 |

139 |

Motion Graphic Design

140 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

141 |

142 |

143 |

144 |

145 | 146 |

147 |

148 |

Web Development

149 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

150 |

151 |

152 |

153 |

154 | 155 | 156 |

157 |

158 |

My Work

159 |

160 |

161 |

162 |

163 |

164 |

165 |

166 |

167 |

168 |

169 |

170 |

171 |

172 |

173 |

174 |

175 |

176 |

177 |

178 |

179 |

180 |

181 |

182 |

183 |

184 |

185 |

186 |

187 |

188 |

189 |

190 |

191 |

192 |

193 |

194 |

195 |

Contact Me

196 |

197 |

198 |

199 |

200 |

201 | 202 |

203 |

204 |

Address

205 | Bercelona, Spain 206 |

207 |

208 |

209 |

210 | 211 |

212 |

213 |

Phone

214 | +34566-839754 215 |

216 |

217 |

218 |

219 | 220 |

221 |

222 |

Email Address

223 | contact@email.com 224 |

225 |

226 |

227 |

228 | 229 |

230 |

231 |

Website

232 | mywebsite.com 233 |

234 |

235 |

236 |

237 |

238 |

Send Message

239 |

240 | 241 |

242 |

243 | 244 |

245 |

246 | 247 |

248 |

249 | 250 |

251 |

252 |

253 |

254 |

255 | 256 | 260 | 261 | 262 | 263 | 266 | 304 | 305 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); 2 | 3 | *{ 4 | padding: 0; 5 | margin: 0; 6 | font-family: 'Poppins', sans-serif; 7 | box-sizing: border-box; 8 | } 9 | 10 | body{ 11 | width: 100%; 12 | height: auto; 13 | overflow-x: hidden; 14 | } 15 | 16 | header{ 17 | z-index: 889; 18 | position: fixed; 19 | background-color: rgba(255,255,255,0.1); 20 | top: 0; 21 | left: 0; 22 | width: 100%; 23 | padding: 15px 200px; 24 | display: flex; 25 | justify-content: space-between; 26 | align-items: center; 27 | transition: 0.2s ease; 28 | } 29 | 30 | header.sticky{ 31 | background-color: #3a6cf4; 32 | padding: 10px 200px; 33 | } 34 | 35 | header .brand{ 36 | color: white; 37 | font-size: 1.8em; 38 | font-weight: 700; 39 | text-transform: uppercase; 40 | text-decoration: none; 41 | } 42 | 43 | header .navigation{ 44 | position: relative; 45 | } 46 | 47 | header .navigation a{ 48 | color: white; 49 | font-size: 1em; 50 | text-decoration: none; 51 | font-weight: 500; 52 | margin-left: 30px; 53 | } 54 | 55 | header .navigation a:hover{ 56 | color: #3a6cf4; 57 | } 58 | 59 | header .sticky .navigation a:hover{ 60 | color: black; 61 | } 62 | 63 | section{ 64 | padding: 100px 200px; 65 | } 66 | 67 | .main{ 68 | position: relative; 69 | width: 100%; 70 | height: 100vh; 71 | display: flex; 72 | align-items: center; 73 | background-image: url(Image/bg.jpg); 74 | background-size: cover; 75 | background-position: center; 76 | background-repeat: no-repeat; 77 | background-attachment: fixed; 78 | } 79 | 80 | .main .content{ 81 | max-width: 800px; 82 | } 83 | 84 | .main .content h2{ 85 | color: white; 86 | font-size: 2em; 87 | font-weight: 500; 88 | } 89 | 90 | .main .content h2 span{ 91 | font-size: 2.8rem; 92 | font-weight: 600; 93 | } 94 | 95 | .animated-text{ 96 | position: relative; 97 | height: 70px; 98 | overflow: hidden; 99 | } 100 | 101 | .animated-text h3{ 102 | color: #4e9eff; 103 | font-size: 3em; 104 | font-weight: 700; 105 | line-height: 70px; 106 | letter-spacing: 1px; 107 | } 108 | 109 | .animated-text h3:nth-child(1){ 110 | animation: text-move 6s infinite ease-out; 111 | } 112 | 113 | @keyframes text-move { 114 | 0%,15%{ 115 | margin-top: 0px; 116 | } 117 | 118 | 25%,40%{ 119 | margin-top: -70px; 120 | } 121 | 122 | 50%,65%{ 123 | margin-top: -140px; 124 | } 125 | 126 | 75%,90%{ 127 | margin-top: -70px; 128 | } 129 | 130 | 100%{ 131 | margin-top: 0px; 132 | } 133 | } 134 | 135 | .btn{ 136 | color: white; 137 | background-color: #3a6cf4; 138 | font-size: 1em; 139 | font-weight: 600; 140 | display: inline-block; 141 | padding: 10px 20px; 142 | text-transform: uppercase; 143 | text-decoration: none; 144 | letter-spacing: 1px; 145 | border-radius: 2px; 146 | margin-top: 30px; 147 | transition: 0.5s ease; 148 | } 149 | 150 | .btn:hover{ 151 | background-color: #235bf6; 152 | } 153 | 154 | .media-icons{ 155 | margin-top: 50px; 156 | } 157 | 158 | .media-icons a{ 159 | color: white; 160 | font-size: 25px; 161 | margin-right: 30px; 162 | } 163 | 164 | 165 | /* About */ 166 | 167 | .title{ 168 | width: 100%; 169 | display: flex; 170 | justify-content: center; 171 | align-items: center; 172 | flex-direction: column; 173 | } 174 | 175 | .section-title{ 176 | position: relative; 177 | color: #3a6cf4; 178 | font-size: 2.2em; 179 | font-weight: 800; 180 | margin-bottom: 60px; 181 | } 182 | 183 | .section-title::before{ 184 | content: ""; 185 | position: absolute; 186 | top: 56px; 187 | left: 50%; 188 | width: 140px; 189 | height: 4px; 190 | background-color: #3a6cf4; 191 | transform: translateX(-50%); 192 | } 193 | 194 | .section-title::after{ 195 | content: ""; 196 | position: absolute; 197 | top: 50px; 198 | left: 50%; 199 | width: 15px; 200 | height: 15px; 201 | border-radius: 50%; 202 | background-color: #3a6cf4; 203 | transform: translateX(-50%); 204 | } 205 | 206 | .about .content{ 207 | position: relative; 208 | width: 100%; 209 | display: flex; 210 | justify-content: space-between; 211 | align-items: center; 212 | margin-top: 20px; 213 | } 214 | 215 | .about .content .col-left{ 216 | position: relative; 217 | width: 45%; 218 | } 219 | 220 | .about .content .col-right{ 221 | position: relative; 222 | width: 50%; 223 | } 224 | 225 | .about .content .col-left .img-card{ 226 | position: relative; 227 | width: 100%; 228 | min-height: 450px; 229 | } 230 | 231 | .about .content .col-left .img-card img{ 232 | position: absolute; 233 | top: 0; 234 | left: 0; 235 | width: 100%; 236 | height: 100%; 237 | object-fit: cover; 238 | border-radius: 10px; 239 | } 240 | 241 | .about .content .col-right .content-title{ 242 | font-size: 2em; 243 | font-weight: 800; 244 | margin-bottom: 20px; 245 | } 246 | 247 | .about .content .col-right .paragraph-text{ 248 | font-size: 1em; 249 | } 250 | 251 | /* Skills Section */ 252 | 253 | .skills{ 254 | background-color: black; 255 | } 256 | 257 | .skills .content{ 258 | position: relative; 259 | width: 100%; 260 | display: flex; 261 | justify-content: space-between; 262 | align-items: center; 263 | color: white; 264 | margin-top: 20px; 265 | } 266 | 267 | .skills .content .col-left{ 268 | position: relative; 269 | width: 46%; 270 | } 271 | 272 | .skills .content .col-left .content-title{ 273 | margin-bottom: 20px; 274 | } 275 | 276 | .skills .content .col-right{ 277 | position: relative; 278 | width: 46%; 279 | } 280 | 281 | .skills .content .col-right .bar{ 282 | margin-bottom: 15px; 283 | padding: 10px; 284 | } 285 | 286 | .skills .content .col-right .bar .info{ 287 | display: flex; 288 | align-items: center; 289 | justify-content: space-between; 290 | margin-bottom: 5px; 291 | } 292 | 293 | .skills .content .col-right .br .info span{ 294 | font-size: 18px; 295 | font-weight: 500; 296 | } 297 | 298 | .skills .content .col-right .bar .line{ 299 | position: relative; 300 | width: 100%; 301 | height: 15px; 302 | background-color: #ccc; 303 | border-radius: 2px; 304 | } 305 | 306 | .skills .content .col-right .bar .line::before{ 307 | content: ""; 308 | position: absolute; 309 | height: 100%; 310 | top: 0; 311 | left: 0; 312 | border-radius: 3px; 313 | } 314 | 315 | .skills .content .col-right .bar .html::before{ 316 | width: 95%; 317 | background-color: #e45126; 318 | } 319 | 320 | .skills .content .col-right .bar .css::before{ 321 | width: 90%; 322 | background-color: #0c73b8; 323 | } 324 | 325 | .skills .content .col-right .bar .javascript::before{ 326 | width: 80%; 327 | background-color: #e3a324; 328 | } 329 | 330 | .skills .content .col-right .bar .python::before{ 331 | width: 85%; 332 | background-color: blue; 333 | } 334 | 335 | .skills .content .col-right .bar .php::before{ 336 | width: 65%; 337 | background-color: #6d7eb8; 338 | } 339 | 340 | /* Services */ 341 | 342 | .services .content{ 343 | display: flex; 344 | justify-content: center; 345 | flex-wrap: wrap; 346 | flex-direction: row; 347 | margin-top: 20px; 348 | } 349 | 350 | .title p{ 351 | font-size: 1em; 352 | width: 80%; 353 | text-align: center; 354 | } 355 | 356 | .services .content .card{ 357 | background-color: #fff; 358 | width: 340px; 359 | margin: 10px; 360 | padding: 25px; 361 | display: flex; 362 | justify-content: center; 363 | align-items: center; 364 | flex-direction: column; 365 | border-radius: 10px; 366 | box-shadow: 0 5px 25px rgba(1 1 1/15%); 367 | transition: 0.3s linear; 368 | } 369 | 370 | .services .content .card .service-icon{ 371 | color: #3a6cf4; 372 | font-size: 8rem; 373 | text-align: center; 374 | transition: 0.3s linear; 375 | } 376 | 377 | .services .content .card .info{ 378 | text-align: center; 379 | } 380 | 381 | .services .content .card .info h3{ 382 | color: #3a6cf4; 383 | font-size: 1.2rem; 384 | font-weight: 700; 385 | margin: 10px; 386 | transition: 0.3s linear; 387 | 388 | } 389 | 390 | .services .content .card:hover{ 391 | background-color: #3a6cf4; 392 | color: white; 393 | } 394 | 395 | .services .content .card:hover .service-icon, 396 | .services .content .card:hover .info h3 397 | { 398 | transform: translateY(-10px); 399 | color: white; 400 | } 401 | 402 | /* Work */ 403 | 404 | .work{ 405 | background-color: #000016; 406 | } 407 | 408 | .work .content{ 409 | display: flex; 410 | justify-content: center; 411 | flex-direction: row; 412 | flex-wrap: wrap; 413 | margin-top: 20px; 414 | } 415 | 416 | .work .content .card{ 417 | width: 340px; 418 | margin: 15px; 419 | } 420 | 421 | .work .content .card .card-img{ 422 | position: relative; 423 | width: 100%; 424 | height: 260px; 425 | overflow: hidden; 426 | border-radius: 10px; 427 | } 428 | 429 | .work .content .card .card-img img{ 430 | position: absolute; 431 | top: 0; 432 | left: 0; 433 | width: 100%; 434 | height: 100%; 435 | object-fit: cover; 436 | border-radius: 10px; 437 | transition: 0.3s linear; 438 | } 439 | 440 | .work .content .card .card-img img:hover{ 441 | transform: scale(1.2); 442 | } 443 | 444 | 445 | /* Contact */ 446 | 447 | .contact .content{ 448 | display: flex; 449 | justify-content: center; 450 | flex-wrap: wrap; 451 | flex-direction: column; 452 | margin-top: 20px; 453 | } 454 | 455 | .contact .content .row{ 456 | display: flex; 457 | justify-content: center; 458 | flex-wrap: wrap; 459 | flex-direction: row; 460 | } 461 | 462 | .contact .content .row .card{ 463 | background: #fff; 464 | width: 240px; 465 | margin: 20px; 466 | padding: 25px; 467 | display: flex; 468 | justify-content: center; 469 | align-items: center; 470 | flex-direction: column; 471 | box-shadow: 0 5px 25px rgba(1 1 1 / 15%); 472 | border-radius: 10px; 473 | } 474 | 475 | .contact .content .row .card .contact-icon{ 476 | color: #3a6cf4; 477 | font-size: 4em; 478 | text-align: center; 479 | transition: transform 0.5s ease; 480 | } 481 | 482 | .contact .content .row .card:hover .contact-icon{ 483 | transform: translateY(-10px); 484 | } 485 | 486 | .contact .content .row .card .info{ 487 | text-align: center; 488 | } 489 | 490 | .contact .content .row .card .info h3{ 491 | color: #111; 492 | font-size: 1.2em; 493 | font-weight: 700; 494 | margin: 10px; 495 | } 496 | 497 | .contact .content .row .card .info span{ 498 | color: #666; 499 | font-weight: 500; 500 | } 501 | 502 | .contact-form{ 503 | background: #fff; 504 | max-width: 600px; 505 | margin-top: 50px; 506 | padding: 50px; 507 | border-radius: 10px; 508 | box-shadow: 0 5px 25px rgba(1 1 1 / 15%); 509 | } 510 | 511 | .contact-form h3{ 512 | color: #111; 513 | font-size: 1.6em; 514 | font-weight: 600; 515 | text-align: center; 516 | margin-bottom: 40px; 517 | } 518 | 519 | .contact-form .input-box{ 520 | position: relative; 521 | width: 100%; 522 | margin-bottom: 20px; 523 | } 524 | 525 | .contact-form .input-box input, 526 | .contact-form .input-box textarea{ 527 | color: #111; 528 | width: 100%; 529 | padding: 10px; 530 | font-size: 1em; 531 | font-weight: 400; 532 | outline: none; 533 | border: 1px solid #111; 534 | border-radius: 5px; 535 | resize: none; 536 | } 537 | 538 | .contact-form .input-box .send-btn{ 539 | color: #fff; 540 | background: #3a6cf4; 541 | display: inline-block; 542 | font-size: 1.1em; 543 | font-weight: 500; 544 | text-transform: uppercase; 545 | letter-spacing: 2px; 546 | width: 100%; 547 | border: none; 548 | cursor: pointer; 549 | transition: 0.5s ease; 550 | } 551 | 552 | .contact-form .input-box .send-btn:hover{ 553 | background: #235bf6; 554 | } 555 | 556 | /* Footer */ 557 | 558 | .footer{ 559 | background: #000016; 560 | color: #fff; 561 | text-align: center; 562 | padding: 2em; 563 | } 564 | 565 | .footer .footer-title{ 566 | font-size: 20px; 567 | font-weight: 600; 568 | } 569 | 570 | .footer p{ 571 | font-size: 16px; 572 | margin-top: 10px; 573 | } 574 | 575 | .footer p a{ 576 | color: #3a6cf4; 577 | font-weight: 600; 578 | text-decoration: none; 579 | } 580 | 581 | 582 | 583 | @media (max-width:1040px) { 584 | 585 | header{ 586 | padding: 12px 20px; 587 | } 588 | 589 | header.sticky{ 590 | padding: 10px 20px; 591 | } 592 | 593 | header .navigation{ 594 | display: none; 595 | } 596 | 597 | .navigation.active{ 598 | z-index: 889; 599 | position: fixed; 600 | background-color: white; 601 | top: 0; 602 | right: 0; 603 | width: 380px; 604 | height: 100%; 605 | display: flex; 606 | justify-content: center; 607 | align-items: center; 608 | flex-direction: column; 609 | box-shadow: 0 5px 25px rgba(1 1 1/ 15%); 610 | transition: 0.3s ease; 611 | } 612 | 613 | header .navigation a{ 614 | color: black; 615 | font-size: 1.2em; 616 | margin: 10px; 617 | padding: 10px 40px; 618 | border-radius: 5px; 619 | } 620 | 621 | header .navigation a:hover{ 622 | background-color: #3a6cf4; 623 | color: white; 624 | transition: 0.3s ease; 625 | } 626 | 627 | .menu-btn{ 628 | position: absolute; 629 | background-image: url(Image/menu.png); 630 | background-position: center; 631 | background-size: 30px; 632 | background-repeat: no-repeat; 633 | width: 40px; 634 | height: 40px; 635 | right: 0; 636 | margin: 0 20px; 637 | cursor: pointer; 638 | transition: 0.3s ease; 639 | } 640 | 641 | .menu-btn.active{ 642 | z-index: 999; 643 | background-image: url(Image/close.png); 644 | background-repeat: no-repeat; 645 | background-position: center; 646 | background-size: 25px; 647 | transition: 0.3s ease; 648 | filter: invert(1); 649 | } 650 | 651 | section{ 652 | padding: 80px 20px; 653 | } 654 | 655 | .main .content h2{ 656 | font-size: 1em; 657 | } 658 | 659 | .animated-text h3{ 660 | font-size: 2.2em; 661 | } 662 | 663 | .section-title{ 664 | font-size: 1.8em; 665 | } 666 | 667 | .about .content{ 668 | flex-direction: column; 669 | } 670 | 671 | .about .content .column{ 672 | width: 100%; 673 | position: relative; 674 | } 675 | 676 | .about .content .col-right{ 677 | margin-top: 40px; 678 | } 679 | 680 | /* Skills */ 681 | 682 | .skills .content{ 683 | flex-direction: column; 684 | } 685 | 686 | .skills .content .column{ 687 | position: relative; 688 | width: 100%; 689 | } 690 | 691 | .skills .content .col-right{ 692 | margin-top: 40px; 693 | } 694 | 695 | .contact-form{ 696 | padding: 35px 40px; 697 | } 698 | } 699 | 700 | 701 | .scrollToTop-btn{ 702 | z-index: 999; 703 | position: fixed; 704 | background: #3a6cf4; 705 | color: #fff; 706 | width: 45px; 707 | height: 45px; 708 | right: 0; 709 | bottom: 10px; 710 | font-size: 22px; 711 | text-align: center; 712 | line-height: 45px; 713 | border-radius: 3px; 714 | cursor: pointer; 715 | pointer-events: none; 716 | opacity: 0; 717 | transition: all 0.3s ease; 718 | } 719 | 720 | 721 | 722 | 723 | 724 | --------------------------------------------------------------------------------

Hello, I'm Adam Smith

Web Developer

Web Designer

Programmer

About me

Hey There! I am Adam Smith

My Skills

My Skills and Experiences

My Services

Web Design

Motion Graphic Design

Web Development

My Work

Contact Me

Address

Phone

Email Address

Website

Send Message

Hello, I'm
Adam Smith