├── README.md ├── images ├── user.png ├── work-1.png ├── work-2.png └── work-3.png ├── index.html ├── script.js └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # animated-portfolio -------------------------------------------------------------------------------- /images/user.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rahul-Khawse/animated-portfolio/23e2588cf464f2d377aeae4ff9a5980f1171903f/images/user.png -------------------------------------------------------------------------------- /images/work-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rahul-Khawse/animated-portfolio/23e2588cf464f2d377aeae4ff9a5980f1171903f/images/work-1.png -------------------------------------------------------------------------------- /images/work-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rahul-Khawse/animated-portfolio/23e2588cf464f2d377aeae4ff9a5980f1171903f/images/work-2.png -------------------------------------------------------------------------------- /images/work-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Rahul-Khawse/animated-portfolio/23e2588cf464f2d377aeae4ff9a5980f1171903f/images/work-3.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Portfolio 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 22 |
23 | 24 |
25 |
26 |

Hello, It's Me ,

27 |

Rahul Khawse .

28 |

And I'm a

29 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. 30 |
Dolor ipsam dolore voluptas eligendi dolorum .

31 |
32 | 33 | 34 | 35 | 36 |
37 | More About Me 38 |
39 |
40 | 41 |
42 |
43 | 44 |
45 |
46 |

About Me

47 |

Full Stack Developer

48 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet deserunt tenetur doloremque velit numquam itaque! Magni molestias harum rem neque enim nesciunt quaerat vitae cum recusandae, cupiditate asperiores nulla in officiis eum dolores iure, assumenda aut quae ad vel porro dolor. A, eveniet quam? Iste tempore fuga saepe nihil aut. Lorem ipsum dolor sit amet consectetur adipisicing elit. At explicabo, nesciunt ex repudian facere doloremque earum aspernatur magni dolores a ea ami eveniet natus libero deleniti soluta quasi eius. Cupiditate? 49 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis, Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur sapiente molestiae at exercitationem placeat recusandae officiis nesciunt vel deleniti ipsum, iste, laboriosam, corp quis! Laudantium placeat ab cumque corrupti corporis? 50 |

51 | 52 | More About Me 53 |
54 |
55 | 56 |
57 |
58 |
59 |

My Services

60 |
61 |
62 | 63 |

UI/UX Design

64 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio tempora nam magni autem eos! Mollitia, possimus commodi dolor exercitationem sapiente placeat fuga pariatur eligendi harum!

65 | Read More 66 |
67 |
68 | 69 |

UI/UX Design

70 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio tempora nam magni autem eos! Mollitia, possimus commodi dolor exercitationem sapiente placeat fuga pariatur eligendi harum!

71 | Read More 72 |
73 |
74 | 75 |

UI/UX Design

76 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio tempora nam magni autem eos! Mollitia, possimus commodi dolor exercitationem sapiente placeat fuga pariatur eligendi harum!

77 | Read More 78 |
79 |
80 |
81 |
82 |
83 | 84 |

My Skills

85 |
86 |
87 |

Technical Skills

88 |
89 |
90 |
91 | HTML 92 |
93 |
94 | 95 |
96 |
97 |
98 |
99 | CSS 100 |
101 |
102 | 103 |
104 |
105 |
106 |
107 | JavaScript 108 |
109 |
110 | 111 |
112 |
113 |
114 |
115 | Python 116 |
117 |
118 | 119 |
120 |
121 |
122 |
123 | React 124 |
125 |
126 | 127 |
128 |
129 |
130 |
131 | 132 |
133 |

Professional Skills

134 |
135 |
136 | 137 | 138 | 139 | 140 |
90%
141 |
Creativity
142 |
143 |
144 | 145 | 146 | 147 | 148 |
65%
149 |
Communication
150 |
151 |
152 | 153 | 154 | 155 | 156 |
75%
157 |
Problem Solving
158 |
159 |
160 | 161 | 162 | 163 | 164 |
80%
165 |
Teamwork
166 |
167 |
168 |
169 |
170 | 171 |
172 |
173 |
174 |

Latest Project

175 | 176 |
177 |
178 | 179 |
180 |
UI/UX Design
181 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi id atque in tempora excepturi eaque quaerat quisquam accusantium provident molestias?

182 | 183 |
184 |
185 |
186 | 187 |
188 |
UI/UX Design
189 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi id atque in tempora excepturi eaque quaerat quisquam accusantium provident molestias?

190 | 191 |
192 |
193 |
194 | 195 |
196 |
UI/UX Design
197 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi id atque in tempora excepturi eaque quaerat quisquam accusantium provident molestias?

198 | 199 |
200 |
201 |
202 |
203 |
204 |
205 | 206 |
207 |
208 |

Contact Me

209 |

Let's work Together

210 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem odit, repellat repudiandae saepe ut id quasi, itaque dolor beatae veniam minus eveniet omnis quae, hic numquam sunt optio laudantium amet!

211 |
212 |
  • contact@gmail.com
    • 213 |
  • 9301935151
    • 214 |
    215 |
    216 | 217 | 218 | 219 | 220 |
    221 |
    222 | 223 |
    224 |
    225 | 226 | 227 | 228 | 229 | 231 | 232 |
    233 |
    234 |
    235 | 236 |
    237 |

    Developed with love by Rahul Khawse @ 2023

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