├── images ├── About.png ├── Home.png ├── Project1.png ├── Project2.png └── Project3.png ├── main.js ├── README.md ├── index.html └── style.css /images/About.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuantumCoding123/Day-10-Portfolio-Website-Modern/HEAD/images/About.png -------------------------------------------------------------------------------- /images/Home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuantumCoding123/Day-10-Portfolio-Website-Modern/HEAD/images/Home.png -------------------------------------------------------------------------------- /images/Project1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuantumCoding123/Day-10-Portfolio-Website-Modern/HEAD/images/Project1.png -------------------------------------------------------------------------------- /images/Project2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuantumCoding123/Day-10-Portfolio-Website-Modern/HEAD/images/Project2.png -------------------------------------------------------------------------------- /images/Project3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuantumCoding123/Day-10-Portfolio-Website-Modern/HEAD/images/Project3.png -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | var typed = new Typed(".text",{ 2 | strings:["Frontend Developer", "Java Developer", "Web Developer"], 3 | typeSpeed : 10, 4 | backSpeed : 100, 5 | backDelay : 1000, 6 | loop : true 7 | }); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Day-10-Portfolio-Website-Modern 2 | 3 | Embark on an exhilarating journey of web development with the "100 Days, 100 Websites" challenge! Over the course of 100 days, immerse yourself in the world of HTML, CSS, and JavaScript as you craft 100 unique websites from scratch. Each day presents an opportunity to explore new design concepts, master coding techniques, and unleash your creativity. 4 | 5 | Live Demo - https://quantumcoding123.github.io/Day-10-Portfolio-Website-Modern/ 6 | 7 | # Join Us 8 | 9 | GitHub-https://github.com/QuantumCoding123 10 | 11 | YouTube-https://www.youtube.com/channel/UC3Dz2Yaz2uWAczNU4GEDg5Q 12 | 13 | Instagram - https://www.instagram.com/quantumcoding123 14 | 15 | Telegram - https://t.me/QuantumCoding123 16 | 17 | Whatsapp- https://whatsapp.com/channel/0029VaVInCA2ZjCjXEf2IC2I 18 | 19 | With a plethora of free resources available online, including tutorials, code snippets, and open-source projects, you'll have everything you need to bring your ideas to life. Whether you're building a personal blog, an e-commerce site, a portfolio showcase, or an interactive web application, the possibilities are endless. 20 | 21 | Join the "100 Days, 100 Websites" challenge today and witness your proficiency in web development soar to new heights. With dedication, perseverance, and a dash of creativity, you'll emerge from this journey as a proficient web developer ready to tackle any project that comes your way. 22 | 23 | # Output - 1 24 | 25 | ![Screenshot (43)](https://github.com/QuantumCoding123/Day-10-Portfolio-Website-Modern/assets/166281221/e5cbc900-7032-4503-8d0f-ba323a4eb916) 26 | 27 | 28 | # Output - 2 29 | 30 | ![Screenshot (44)](https://github.com/QuantumCoding123/Day-10-Portfolio-Website-Modern/assets/166281221/c2107373-abdb-4220-8eee-2f9bac0965d1) 31 | 32 | 33 | # Output - 3 34 | 35 | ![Screenshot (45)](https://github.com/QuantumCoding123/Day-10-Portfolio-Website-Modern/assets/166281221/57bbe198-ade7-41a3-89a5-7a5cf138ac80) 36 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Portfolio 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 22 |
23 |
24 |
25 |

Hello, It's Me

26 |

Diksha Jadhav

27 |

And I'm a

28 |

I'm a Full Stack Developer.
29 | My first exposure to professional life through internship has benefited me mostly in 30 | strengthening my personal skills. I have developed a positive attitude and a strong 31 | sense of responsibility being innovative , resourceful, open and responsive to change. It has 32 | created in me an interest in lifelong learning. 33 |

34 |
35 | 36 | 37 | 38 | 39 |
40 | More About Me 41 |
42 | 43 |
44 | 45 |
46 |
47 | 48 |
49 |
50 |

About Me

51 |

Full Stack Developer!

52 |

53 | I'm Diksha Jadhav & I'm from Khargone. I'm an engineering graduate from JIT College specialized in Computer Science. I've worked hard in my education & maintained a CGPA of 8. 54 | Along with my degree I've completed Java, SQL and Full Stack Courses online.Now I'm ready to apply my knowledge into practice.Though I do not have any real life working experience, I've had a lot of exposure to the software field. 55 | My Goal is to build a successfull career as a Full Stack Developer.Moving forward in my career I hope to expand my experience across different industries. 56 | I'm a good learner and team player 57 | That's all about my self. 58 | 63 |

64 | More About Me 65 |
66 |
67 | 68 |
69 |
70 |
71 |

My Skiils

72 |
73 |
74 | 75 |

Full Stack Developer

76 |

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam perspiciatis fugit debitis laudantium, sed numquam neque at, praesentium exercitationem culpa ipsam? Nihil. 77 |

78 | Learn More 79 |
80 |
81 | 82 |

Java

83 |

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam perspiciatis fugit debitis laudantium, sed numquam neque at, praesentium exercitationem culpa ipsam? Nihil. 84 |

85 | Learn More 86 |
87 |
88 | 89 |

React

90 |

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam perspiciatis fugit debitis laudantium, sed numquam neque at, praesentium exercitationem culpa ipsam? Nihil. 91 |

92 | Learn More 93 |
94 |
95 |
96 |
97 |
98 | 99 |

My Skills

100 | 101 |
102 |
103 | 104 |

Technical Skills

105 |
106 |
107 |
108 | HTML 109 |
110 |
111 | 112 |
113 |

114 |
115 |
116 | CSS 117 |
118 |
119 | 120 |
121 |

122 |
123 |
124 | JavaScript 125 |
126 |
127 | 128 |
129 |

130 |
131 |
132 | Java 133 |
134 |
135 | 136 |
137 |

138 |
139 |
140 | React 141 |
142 |
143 | 144 |
145 |
146 |
147 |
148 | 149 |
150 |

Professional Skills

151 |
152 | 153 |
154 | 155 | 156 | 157 | 158 |
90%
159 |
Creativity
160 |
161 | 162 |
163 | 164 | 165 | 166 | 167 |
80%
168 |
Communication
169 |
170 | 171 |
172 | 173 | 174 | 175 | 176 |
75%
177 |
Problem Solving
178 |
179 | 180 |
181 | 182 | 183 | 184 | 185 |
85%
186 |
TeamWork
187 |
188 |
189 |
190 |
191 | 192 |
193 |
194 |
195 |

Latest Project

196 | 197 |
198 |
199 | 200 |
201 |
Weather App
202 |

The Weather Detection project is designed to 203 | provide real-time weather information based 204 | on user inputs such as location or city name. 205 | It utilizes APIs (Application Programming Interfaces) 206 | provided by weather services to fetch and display 207 | current weather conditions and forecasts. 208 |

209 | 210 |
211 |
212 | 213 |
214 | 215 |
216 |
To-Do List
217 |

The To-Do List project is a web application designed 218 | to help users organize and manage their tasks effectively. 219 | This project utilizes HTML, CSS, and JavaScript to create 220 | an interactive user interface for adding, editing, and 221 | deleting tasks. 222 |

223 | 224 |
225 |
226 | 227 |
228 | 229 |
230 |
Quiz App
231 |

The Quiz App project is a web application designed to provide 232 | users with an interactive quiz experience. This project utilizes 233 | HTML, CSS, and JavaScript to create a dynamic user interface 234 | for presenting questions, handling user responses, and 235 | calculating scores. 236 |

237 | 238 |
239 |
240 |
241 |
242 |
243 |
244 | 245 |
246 |
247 |

Contact Me

248 |

Let's Work Together

249 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. 250 | Iste similique quibusdam facere! 251 |

252 |
253 |
  • dikshajadhav@gmail.com
  • 254 |
  • 756653564
  • 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 |

    Developed By Diksha....

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