├── README.md ├── images ├── 2nd.png ├── 3rd.jpg ├── 4th.jpg ├── first.png ├── favicon.ico └── download1.png ├── script.js ├── index.html └── css └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # myportfolio -------------------------------------------------------------------------------- /images/2nd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prashantjagtap2909/myportfolio/HEAD/images/2nd.png -------------------------------------------------------------------------------- /images/3rd.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prashantjagtap2909/myportfolio/HEAD/images/3rd.jpg -------------------------------------------------------------------------------- /images/4th.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prashantjagtap2909/myportfolio/HEAD/images/4th.jpg -------------------------------------------------------------------------------- /images/first.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prashantjagtap2909/myportfolio/HEAD/images/first.png -------------------------------------------------------------------------------- /images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prashantjagtap2909/myportfolio/HEAD/images/favicon.ico -------------------------------------------------------------------------------- /images/download1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prashantjagtap2909/myportfolio/HEAD/images/download1.png -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | let sections = document.querySelectorAll(".section"); 2 | let secBtns = document.querySelectorAll(".controlls"); 3 | let secBtn = document.querySelectorAll(".control"); 4 | let allSections = document.querySelector(".main-content"); 5 | 6 | function pageTransition(){ 7 | for (let i = 0; i { 16 | let id = e.target.dataset.id; 17 | if(id){ 18 | //remove selected from other buttons 19 | // secBtns.forEach((btn) => { 20 | // btn.classList.remove('active'); 21 | // }) 22 | // e.target.classList.add('active'); 23 | 24 | //hide other sections 25 | sections.forEach((section) => { 26 | section.classList.remove('active'); 27 | }) 28 | let element = document.getElementById(id); 29 | element.classList.add('active'); 30 | } 31 | }) 32 | // toggle theme 33 | let themebtn = document.querySelector('.theme-btn'); 34 | themebtn.addEventListener('click', () => { 35 | let el = document.body; 36 | el.classList.toggle('light-mode'); 37 | }) 38 | } 39 | 40 | pageTransition(); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | portfolio 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 21 | 22 | 23 | 24 |
25 |
26 |
27 |
28 |
29 | 30 |
31 |
32 |
33 |

Hi, I am Prashant Jagtap.
A Student

34 |

35 | I'm a programmer, I love to learn new thing. 36 | I'm a Third year computer engineering student at Savitribai Phule Pune university 37 |

38 |
39 | 42 | Download CV 43 | 44 | 45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |

About Me 53 | 54 |

55 |
56 |
57 |
58 |

Information About Me

59 |

60 | I'm Prashant Jagtap. i'm third year student at faculty of computer Engineering at Savitribai 61 | Phule Pune unoversity. 62 | I'm begginner programmer. i practies data structure and algorithm problem everyday to improve my 63 | skills. 64 |

65 |

66 | I'm aware of Python , c++ and mern stack. 67 |

68 |
69 | 71 | Download CV 72 | 73 | 74 |
75 |
76 |
77 |
78 |
79 |

1+

80 |

projects
completed

81 |
82 |
83 |
84 |
85 |

0+

86 |

Years of
experience

87 |
88 |
89 |
90 |
91 |

10+

92 |

different
certificates

93 |
94 |
95 |
96 |
97 |

2

98 |

ongoing
courses

99 |
100 |
101 |
102 |
103 |
104 |

my skills

105 |
106 |
107 |

Python

108 |
109 |

60%

110 |
111 | 112 |
113 |
114 |
115 |
116 |

c++

117 |
118 |

85%

119 |
120 | 121 |
122 |
123 |
124 |
125 |

java

126 |
127 |

50%

128 |
129 | 130 |
131 |
132 |
133 |
134 |

HTML

135 |
136 |

50%

137 |
138 | 139 |
140 |
141 |
142 |
143 |

CSS

144 |
145 |

50%

146 |
147 | 148 |
149 |
150 |
151 |
152 |

bootstrap

153 |
154 |

30%

155 |
156 | 157 |
158 |
159 |
160 |
161 |

it support

162 |
163 |

80%

164 |
165 | 166 |
167 |
168 |
169 |
170 |
171 |

Education

172 |
173 |
174 |
175 | 176 |
177 |

2018

178 |
SSC
179 |

84.20%

180 |
181 |
182 |
183 | 184 |
185 |

2020

186 |
HSC
187 |

72%

188 |
189 |
190 |
191 | 192 |
193 |

2021

194 |
First year
195 |

9.13 CGPA

196 |
197 |
198 |
199 | 200 |
201 |

2021

202 |
Second year
203 |

8.41 CGPA

204 |
205 |
206 |
207 | 208 | 209 |
210 |
211 |

My Portofolio 212 | 213 |

214 |
215 |

Here is some of my courses that i have done till now

216 |
217 |
218 |
219 | 220 |
221 |
222 |

verify

223 |
224 | 225 | 226 | 227 | 228 | 229 |
230 |
231 |
232 |
233 |
234 | 235 |
236 |
237 |

verify

238 |
239 | 240 | 241 | 242 | 243 |
244 |
245 |
246 |
247 |
248 | 249 |
250 |
251 |

verify

252 |
253 | 254 | 255 | 256 | 257 |
258 |
259 |
260 |
261 |
262 | 263 | 264 | 265 |
266 |
267 |
268 |

contact me 269 | 270 |

271 |
272 |
273 |
274 |

contact me here

275 |

contact me if you like my work. if you didn't, send me an advise.

276 |
277 |
278 |
279 | Location : 280 |
281 |

282 | Pune , Mahashtra ,India. 283 |

284 |
285 |
286 |
287 | Email : 288 |
289 |

290 | prashantjagtap06532@gmail.com 291 |

292 |
293 |
294 |
295 | Education : 296 |
297 |

298 | Savitribai Phule Pune university 299 |

300 |
301 |
302 |
303 | Phone number : 304 |
305 |

306 | +910000000000 307 |

308 |
309 |
310 |
311 | Languages : 312 |
313 |

314 | Marathi, English 315 |

316 |
317 | 318 |
319 |
320 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 331 | 332 | 333 | 335 | 336 | 337 |
338 |
339 |
340 |
341 |
342 | 343 | 344 |
345 |
346 | 347 |
348 |
349 | 350 |
351 |
352 | 353 | SEND 354 | 355 | 356 |
357 |
358 |
359 |
360 |
361 |
362 | 363 |
364 |
365 |
366 | 367 |
368 |
369 | 370 |
371 |
372 | 373 |
374 | 377 |
378 | 379 |
380 |
381 | 382 |
383 | 384 |
385 | 386 | 387 | 388 | 389 | 390 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | list-style: none; 6 | } 7 | /* Small */ 8 | @media (min-width: 768px) { 9 | .container{ 10 | width: 750px; 11 | } 12 | } 13 | /* Medium */ 14 | @media (min-width: 992px) { 15 | .container{ 16 | width: 970px; 17 | } 18 | } 19 | /* Large */ 20 | @media (min-width: 1200px) { 21 | .container{ 22 | width: 1170px; 23 | } 24 | } 25 | :root{ 26 | --color-primary: #191d2b; 27 | --color-secondary: #27AE60; 28 | --color-white: #FFFFFF; 29 | --color-black: #000; 30 | --color-grey0: #f8f8f8; 31 | --color-grey-1: #dbe1e8; 32 | --color-grey-2: #b2becd; 33 | --color-grey-3: #6c7983; 34 | --color-grey-4: #454e56; 35 | --color-grey-5: #2a2e35; 36 | --color-grey-6: #12181b; 37 | --br-sm-2: 14px; 38 | --box-shadow-1: 0 3px 15px rgba(0,0,0,.3); 39 | } 40 | .light-mode{ 41 | --color-primary: #FFFFFF; 42 | --color-secondary: #FD5D5D; 43 | --color-white: #454e56; 44 | --color-black: #000; 45 | --color-grey0: #f8f8f8; 46 | --color-grey-1: #6c7983; 47 | --color-grey-2: #6c7983; 48 | --color-grey-3: #6c7983; 49 | --color-grey-4: #454e56; 50 | --color-grey-5: #B4FF9F; 51 | --color-grey-6: #12181b; 52 | } 53 | body{ 54 | font-family: 'Poppins', sans-serif; 55 | background-color: var(--color-primary); 56 | font-size: 1.1rem; 57 | color: var(--color-white); 58 | transition: all .4s ease-in-out ; 59 | } 60 | a{ 61 | display: inline-block; 62 | text-decoration: none; 63 | color: inherit; 64 | font-family: inherit; 65 | } 66 | header{ 67 | height: 100vh; 68 | color: var(--color-white); 69 | overflow: hidden; 70 | } 71 | section{ 72 | position: absolute; 73 | width: 100%; 74 | min-height: 100vh; 75 | top: 0; 76 | left: 0; 77 | padding: 3rem 7rem; 78 | } 79 | .section{ 80 | transform: translateY(-100%) scale(0); 81 | background-color: var(--color-primary); 82 | transition: all .4s ease-in-out; 83 | } 84 | .sec1{ 85 | display: none; 86 | transform: translate(0) scale(1); 87 | } 88 | .sec2{ 89 | display: none; 90 | transform: translate(0) scale(1); 91 | } 92 | .sec3{ 93 | display: none; 94 | transform: translate(0) scale(1); 95 | } 96 | .sec4{ 97 | display: none; 98 | transform: translate(0) scale(1); 99 | } 100 | .sec5{ 101 | display: none; 102 | transform: translate(0) scale(1); 103 | } 104 | .active{ 105 | display: block; 106 | animation: scaleAnmi 1s ease-in-out; 107 | } 108 | @keyframes scaleAnmi { 109 | 0%{ 110 | transform: translateY(-100%) scaleY(0); 111 | } 112 | 100%{ 113 | transform: translateY(0) scaleY(1); 114 | } 115 | } 116 | 117 | /* controlls */ 118 | .controlls{ 119 | position: fixed; 120 | z-index: 10; 121 | top: 50%; 122 | right: 3%; 123 | transform: translateY(-50%); 124 | display: flex; 125 | flex-direction: column; 126 | align-items: center; 127 | justify-content: center; 128 | 129 | } 130 | .controlls .control{ 131 | padding: 1rem; 132 | cursor: pointer; 133 | background-color: var(--color-grey-4); 134 | width: 55px; 135 | height: 55px; 136 | border-radius: 50%; 137 | display: flex; 138 | align-items: center; 139 | justify-content: center; 140 | margin: .7rem 0; 141 | box-shadow: var(--box-shadow-1); 142 | } 143 | .controlls .control i{ 144 | font-size: 1.2rem; 145 | color: var(--color-grey-2); 146 | pointer-events: none; 147 | } 148 | .controlls .active-btn{ 149 | background-color: var(--color-secondary); 150 | transition: all .4s ease-in-out; 151 | } 152 | .controlls .active-btn i{ 153 | color: white; 154 | } 155 | .theme-btn{ 156 | position: fixed; 157 | top: 5%; 158 | right: 3%; 159 | cursor: pointer; 160 | background-color: var(--color-grey-4); 161 | width: 60px; 162 | height: 60px; 163 | border-radius: 50%; 164 | display: flex; 165 | justify-content: center; 166 | align-items: center; 167 | margin: .7rem 0; 168 | box-shadow: 0 3px 15px rgba(0,0,0,.2); 169 | transition: all .1s ease-in-out; 170 | } 171 | .theme-btn:active{ 172 | transform: translateY(-5px); 173 | } 174 | .theme-btn i{ 175 | font-size: 1.2rem; 176 | color: var(--color-grey-2); 177 | pointer-events: none; 178 | } 179 | 180 | /*Start section 1 home */ 181 | .header-content{ 182 | display: grid; 183 | grid-template-columns: repeat(2, 1fr); 184 | height: 100%; 185 | } 186 | 187 | /* .left-header */ 188 | .header-content .left-header { 189 | display: flex; 190 | align-items: center; 191 | position: relative; 192 | } 193 | .header-content .left-header .h-shape { 194 | transition: all 0.4s ease-in-out; 195 | width: 65%; 196 | height: 100%; 197 | background-color: var(--color-secondary); 198 | position: absolute; 199 | left: 0; 200 | top: 0; 201 | z-index: -1; 202 | clip-path: polygon(0 0, 46% 0, 79% 100%, 0% 100%); 203 | } 204 | .header-content .left-header .image { 205 | 206 | border-radius: 50%; 207 | height: 58%; 208 | width: 58%; 209 | margin-left: 4rem; 210 | background-color: var(--color-black); 211 | transition: all 0.4s ease-in-out; 212 | } 213 | .header-content .left-header .image img { 214 | width: 100%; 215 | height: 100%; 216 | object-fit: cover; 217 | transition: all 0.4s ease-in-out; 218 | /* filter: grayscale(100%); */ 219 | } 220 | /* .header-content .left-header .image img:hover { 221 | filter: grayscale(0); 222 | } */ 223 | /* end .left-header */ 224 | 225 | /* start right-header */ 226 | .header-content .right-header{ 227 | display: flex; 228 | flex-direction: column; 229 | justify-content: center; 230 | padding-right: 5rem; 231 | } 232 | .header-content .right-header .name{ 233 | font-size: 3rem; 234 | } 235 | .header-content .right-header .name span{ 236 | color: var(--color-secondary); 237 | } 238 | .header-content .right-header p{ 239 | margin: 1.5rem; 240 | line-height: 2rem; 241 | } 242 | .btn-container{ 243 | display: flex; 244 | align-self: flex-start; 245 | } 246 | .main-btn{ 247 | border-radius: 30px; 248 | position: relative; 249 | font-weight: 600; 250 | color: inherit; 251 | border: 1px solid var(--color-secondary); 252 | display: flex; 253 | align-self: flex-start; 254 | display: flex; 255 | align-items: center; 256 | overflow: hidden; 257 | } 258 | .main-btn::before{ 259 | content: ""; 260 | position: absolute; 261 | top: 0; 262 | right: 0; 263 | transform: translateX(100%); 264 | transition: all .4s ease-in-out; 265 | z-index: -1; 266 | } 267 | .main-btn:hover::before{ 268 | width: 100%; 269 | height: 100%; 270 | background-color: var(--color-secondary); 271 | transform: translateX(0); 272 | } 273 | .main-btn .btn-text{ 274 | padding: 0 2rem; 275 | 276 | } 277 | .main-btn .btn-icon{ 278 | background-color: var(--color-secondary); 279 | display: flex; 280 | align-items: center; 281 | justify-content: center; 282 | border-radius: 50%; 283 | padding: 1rem; 284 | } 285 | /* end right-header */ 286 | /*End section 1 home */ 287 | 288 | /* start section 2 about */ 289 | .main-title{ 290 | text-align: center; 291 | } 292 | .main-title h2{ 293 | position: relative; 294 | text-transform: uppercase; 295 | font-size: 3.5rem; 296 | font-weight: 700; 297 | } 298 | .main-title h2 span{ 299 | color: var(--color-secondary); 300 | } 301 | .main-title h2 .bg-text{ 302 | position: absolute; 303 | top: 50%; 304 | left: 50%; 305 | z-index: -1; 306 | color: var(--color-grey-5); 307 | transform: translate(-50%,-50%); 308 | transition: all .4s ease-in-out; 309 | font-weight: 800; 310 | font-size: 6.3rem; 311 | } 312 | 313 | .about-con{ 314 | display: grid; 315 | grid-template-columns: repeat(2,1fr); 316 | grid-gap: 10px; 317 | /* padding-top: 2.5rem; */ 318 | /* padding-bottom: 5rem; */ 319 | /* margin-left: -13rem; */ 320 | margin-top: 2rem; 321 | } 322 | .about-con .right-about{ 323 | display: grid; 324 | grid-template-columns: repeat(2,1fr); 325 | grid-gap: 2rem; 326 | } 327 | .about-con .right-about .about-item{ 328 | border: 1px solid var(--color-grey-5); 329 | border-radius: 5px; 330 | transition: all .4s ease-in-out; 331 | box-shadow: 1px 2px 15px rgba(0,0,0,.1); 332 | } 333 | .about-con .right-about .about-item:hover{ 334 | cursor: default; 335 | transform: translateY(-5px); 336 | border: 1px solid var(--color-secondary); 337 | box-shadow: 1px 4px 15px rgba(0,0,0,.32); 338 | } 339 | .about-con .right-about .about-item .abt-text{ 340 | padding: 1.5rem; 341 | display: flex; 342 | flex-direction: column; 343 | } 344 | .about-con .right-about .about-item .abt-text .large-text{ 345 | font-size: 3rem; 346 | font-weight: 700; 347 | color: var(--color-secondary); 348 | } 349 | .about-con .right-about .about-item .abt-text .small-text{ 350 | padding-left: 3rem; 351 | position: relative; 352 | text-transform: uppercase; 353 | font-size: 1.2rem; 354 | color: var(--color-grey-1); 355 | letter-spacing: 2px; 356 | } 357 | .about-con .right-about .about-item .abt-text .small-text::before{ 358 | content: ""; 359 | position: absolute; 360 | left: 0; 361 | top: 15px; 362 | width: 2rem; 363 | height: 2px; 364 | background-color: var(--color-grey-5); 365 | } 366 | 367 | .left-about{ 368 | /* padding-right: 5rem; */ 369 | margin-right:2rem; 370 | } 371 | .left-about p{ 372 | line-height: 1.5rem; 373 | padding: 1rem; 374 | color: var(--color-grey-1); 375 | } 376 | .left-about h4{ 377 | font-size: 2rem; 378 | text-transform: uppercase; 379 | } 380 | 381 | /* about stats */ 382 | .about-stats{ 383 | padding-bottom: 4rem; 384 | margin-top: 3rem; 385 | /* margin-left: -12rem; */ 386 | } 387 | .stat-title{ 388 | text-transform: uppercase; 389 | font-size: 1.4rem; 390 | text-align: center; 391 | padding: 3.5rem 0; 392 | position: relative; 393 | } 394 | .stat-title::before{ 395 | content: ""; 396 | position: absolute; 397 | left: 50%; 398 | top: 0; 399 | width: 40%; 400 | height: 1px; 401 | background-color: var(--color-grey-5); 402 | transform: translateX(-50%); 403 | } 404 | .about-stats .prog-bars{ 405 | display: grid; 406 | grid-template-columns: repeat(2, 1fr); 407 | grid-gap: 2rem; 408 | } 409 | .about-stats .prog-bars .prog-bar{ 410 | display: flex; 411 | flex-direction: column; 412 | } 413 | .about-stats .prog-bars .prog-bar .prog-title{ 414 | text-transform: uppercase; 415 | font-weight: 500; 416 | } 417 | .about-stats .prog-bars .prog-con{ 418 | display: flex; 419 | align-items: center; 420 | } 421 | .about-stats .prog-bars .prog-con .prog-text{ 422 | color: var(--color-grey-2); 423 | } 424 | .prog-con .progress{ 425 | width: 100%; 426 | height: .45rem; 427 | background-color: var(--color-grey-4); 428 | margin-left: 1rem; 429 | position: relative; 430 | } 431 | .prog-con .progress span{ 432 | position: absolute; 433 | top: 0; 434 | left: 0; 435 | height: 100%; 436 | background-color: var(--color-secondary); 437 | transition: all .4s ease-in-out; 438 | width: 60%; 439 | } 440 | .prog-con .progress .python{ 441 | width: 60%; 442 | } 443 | .prog-con .progress .c{ 444 | width: 85%; 445 | } 446 | .prog-con .progress .java{ 447 | width: 50%; 448 | } 449 | .prog-con .progress .html{ 450 | width: 50%; 451 | } 452 | .prog-con .progress .css{ 453 | width: 50%; 454 | } 455 | .prog-con .progress .bootstrap{ 456 | width: 30%; 457 | } 458 | .prog-con .progress .it{ 459 | width: 80%; 460 | } 461 | 462 | /* timeline */ 463 | .timeline{ 464 | display: grid; 465 | grid-template-columns: repeat(2, 1fr); 466 | grid-gap: 3rem; 467 | /* grid-column-gap: 15rem; */ 468 | /* grid-row-gap: 30px; */ 469 | padding-bottom: 3rem; 470 | /* margin-left: -10rem; */ 471 | } 472 | .timeline-item{ 473 | position: relative; 474 | padding-left: 3rem; 475 | border-left: 1px solid var(--color-grey-5); 476 | } 477 | .tl-icon{ 478 | position: absolute; 479 | left: -27px; 480 | top: 0; 481 | background-color: var(--color-secondary); 482 | width: 50px; 483 | height: 50px; 484 | border-radius: 50%; 485 | justify-content: center; 486 | display: flex; 487 | } 488 | .tl-icon i{ 489 | font-size: 1.3rem; 490 | align-self: center; 491 | } 492 | .tl-duration{ 493 | padding: .2rem .6rem; 494 | background-color: var(--color-grey-5); 495 | border-radius: 15px; 496 | font-size: .8rem; 497 | text-transform: uppercase; 498 | font-weight: 500; 499 | width: 120px; 500 | text-align: center; 501 | } 502 | .timeline-item h5{ 503 | padding: 1rem 0; 504 | text-transform: uppercase; 505 | font-size: 1.3rem; 506 | font-weight: 600; 507 | 508 | } 509 | .timeline-item span{ 510 | color: var(--color-grey-2); 511 | font-weight: 500; 512 | font-size: 1.2rem; 513 | } 514 | .due-p{ 515 | color: var(--color-grey-2); 516 | } 517 | /* end section 2 about */ 518 | 519 | 520 | /* start section 3 portfolio */ 521 | .port-text{ 522 | padding: 2rem 0; 523 | text-align: center; 524 | } 525 | .portofolios{ 526 | display: grid; 527 | grid-template-columns: repeat(3, 1fr); 528 | grid-gap: 2rem; 529 | margin-top: 1rem; 530 | } 531 | .port-item{ 532 | position: relative; 533 | } 534 | .port-item img{ 535 | width: 100%; 536 | height: 300px; 537 | object-fit: cover; 538 | border-radius: 15px; 539 | } 540 | .port-item:hover .hover-item{ 541 | opacity: 1; 542 | transform: scale(1); 543 | } 544 | .hover-item{ 545 | width: 100%; 546 | height: 100%; 547 | background-color: var(--color-secondary); 548 | position: absolute; 549 | top: 0; 550 | left: 0; 551 | border-radius: 15px; 552 | display: flex; 553 | flex-direction: column; 554 | align-items: center; 555 | justify-content: center; 556 | opacity: 0; 557 | transform: scale(0); 558 | transition: all .4s ease-in-out; 559 | } 560 | .hover-item h3{ 561 | font-size: 1.5rem; 562 | color: var(--color-white); 563 | margin-bottom: 1.5rem; 564 | } 565 | .hover-item .icons{ 566 | display: flex; 567 | justify-content: center; 568 | align-items: center; 569 | } 570 | .hover-item .icons .icon{ 571 | background-color: var(--color-primary); 572 | width: 50px; 573 | height: 50px; 574 | border-radius: 50%; 575 | display: flex; 576 | justify-content: center; 577 | align-items: center; 578 | margin: 0 1rem; 579 | cursor: pointer; 580 | transition: all .4s ease-in-out; 581 | } 582 | .hover-item .icons .icon:hover{ 583 | background-color: var(--color-white); 584 | } 585 | .hover-item .icons .icon:hover i{ 586 | color: var(--color-primary); 587 | 588 | } 589 | 590 | /* .hover-item .icons .icon i:hover{ 591 | color: var(--color-primary); 592 | } */ 593 | .hover-item .icons .icon i{ 594 | font-size: 1.5rem; 595 | 596 | color: var(--color-white); 597 | margin: 0 1rem; 598 | } 599 | /* end section 3 portfolio */ 600 | 601 | 602 | /* start section 4 contact */ 603 | .contact-content-con{ 604 | display: flex; 605 | padding-top: 1rem; 606 | gap: 2rem; 607 | } 608 | .contact-content-con .left-contact{ 609 | flex: 2; 610 | } 611 | .contact-content-con .left-contact h4{ 612 | margin-bottom: 1rem; 613 | font-size: 2rem; 614 | text-transform: uppercase; 615 | } 616 | .contact-content-con .left-contact p{ 617 | margin: .5rem 0; 618 | line-height: 2rem; 619 | } 620 | .contact-info .contact-item{ 621 | display: flex; 622 | align-items: center; 623 | justify-content: space-between; 624 | } 625 | .contact-info .contact-item p{ 626 | margin: 0 4rem !important; 627 | padding: 0 !important; 628 | } 629 | .contact-info .contact-item .icon{ 630 | display: grid; 631 | grid-template-columns: 40px 1fr; 632 | } 633 | .contact-info .contact-item .icon i{ 634 | display: flex; 635 | align-items: center; 636 | /* font-size: 1rem; */ 637 | } 638 | .contact-icons{ 639 | display: flex; 640 | margin-top: 2rem; 641 | } 642 | .contact-icons a{ 643 | display: flex; 644 | align-items: center; 645 | justify-content: center; 646 | cursor: pointer; 647 | color: var(--color-white); 648 | background-color: var(--color-grey-5); 649 | width: 50px; 650 | height: 50px; 651 | border-radius: 50%; 652 | margin: 0 .4rem; 653 | transition: all .4s ease-in-out; 654 | } 655 | .contact-icons a:hover{ 656 | background-color: var(--color-secondary); 657 | } 658 | .contact-icons a:hover i{ 659 | color: var(--color-primary); 660 | } 661 | .contact-icons a:hover i{ 662 | display: flex; 663 | align-items: center; 664 | justify-content: center; 665 | font-size: 1.3rem; 666 | 667 | } 668 | /* left contact */ 669 | .contact-content-con .right-contact{ 670 | flex: 3; 671 | margin-left: 3rem; 672 | } 673 | .input-control{ 674 | margin: .9rem 0; 675 | } 676 | .input-control input, 677 | .input-control textarea{ 678 | border-radius: 30px; 679 | font-family: inherit; 680 | font-size: inherit; 681 | font-weight: inherit; 682 | padding: .5rem .7rem; 683 | outline: none; 684 | border: none; 685 | background-color: var(--color-grey-5); 686 | color: var(--color-white); 687 | width: 100%; 688 | resize: none; 689 | } 690 | .i-c-2{ 691 | display: flex; 692 | } 693 | .i-c-2 :last-child{ 694 | margin-left: 1.5rem; 695 | } 696 | .submit-btn{ 697 | display: flex; 698 | justify-content: flex-start; 699 | } 700 | 701 | 702 | /* end section 4 contact */ 703 | 704 | @media screen and (max-width:767px) { 705 | header{ 706 | padding: 0; 707 | min-height: 100vh !important; 708 | } 709 | header .right-header{ 710 | padding: 0 !important; 711 | } 712 | .theme-btn{ 713 | width: 50px; 714 | height: 50px; 715 | } 716 | /*start home section */ 717 | .header-content{ 718 | grid-template-columns: 1fr; 719 | padding-bottom: 6rem; 720 | min-height: 100vh; 721 | } 722 | .left-header .h-shape{ 723 | display: none; 724 | } 725 | .left-header .image{ 726 | background-color: transparent !important; 727 | } 728 | .right-header{ 729 | grid-row: 1; 730 | /* height: 60%; */ 731 | width: 90%; 732 | margin: 0 auto; 733 | } 734 | .right-header .name{ 735 | font-size: 1.5rem !important; 736 | } 737 | .controlls{ 738 | top: auto; 739 | bottom: 0; 740 | flex-direction: row; 741 | align-items: center; 742 | justify-content: center; 743 | left: 50%; 744 | transform: translate(-50%); 745 | width: 100%; 746 | background-color: var(--color-grey-5); 747 | border-radius: 10px; 748 | } 749 | .controlls .control{ 750 | margin: 1rem .3rem; 751 | } 752 | /*end home section */ 753 | 754 | 755 | /*start about section */ 756 | 757 | .about-con{ 758 | grid-template-columns: repeat(1, 1fr); 759 | } 760 | .about-con .right-about { 761 | grid-template-columns: repeat(1 ,1fr); 762 | padding-top: .5rem; 763 | } 764 | .section{ 765 | padding: 30px !important; 766 | 767 | } 768 | .left-about{ 769 | padding-right: 0; 770 | } 771 | .left-about p{ 772 | padding-left: 0; 773 | } 774 | .timeline { 775 | grid-template-columns: repeat(1 ,1fr); 776 | padding-bottom: 6rem; 777 | } 778 | .about-stats .prog-bars{ 779 | grid-template-columns: repeat(1 ,1fr); 780 | } 781 | /*end about section */ 782 | 783 | 784 | /*start portfolio section */ 785 | .portofolios{ 786 | grid-template-columns: repeat(1 ,1fr); 787 | padding-bottom: 6rem; 788 | } 789 | /*end portfolio section */ 790 | 791 | 792 | /*start contact section */ 793 | .contact-content-con{ 794 | flex-direction: column; 795 | padding-bottom: 6rem; 796 | } 797 | .contact-content-con .right-contact{ 798 | margin-left: 0; 799 | margin-top: 2.5rem; 800 | } 801 | .i-c-2{ 802 | flex-direction: column; 803 | } 804 | .i-c-2 :last-child{ 805 | margin-left: 0; 806 | margin-top: 1.5rem; 807 | } 808 | .main-title h2{ 809 | font-size: 2rem; 810 | } 811 | .main-title span{ 812 | font-size: 2.5rem; 813 | } 814 | .contact-item{ 815 | flex-direction: column; 816 | margin: 1rem 0; 817 | } 818 | /*end contact section */ 819 | } 820 | 821 | @media screen and (max-width:992px) { 822 | /* .section{ 823 | padding: 3rem 5rem; 824 | } */ 825 | .contact-content-con{ 826 | flex-direction: column; 827 | } 828 | .contact-content-con .right-contact{ 829 | margin-left: 0; 830 | margin-top: 2.5rem; 831 | } 832 | .i-c-2{ 833 | flex-direction: column; 834 | } 835 | .i-c-2 :last-child{ 836 | margin-left: 0; 837 | margin-top: 1.5rem; 838 | } 839 | .about-con{ 840 | grid-template-columns: repeat(1 ,1fr); 841 | } 842 | .right-about{ 843 | padding-top: 2.25rem; 844 | } 845 | 846 | .main-title h2{ 847 | font-size: 2.5rem; 848 | } 849 | .main-title span{ 850 | font-size: 2.5rem; 851 | 852 | } 853 | .portofolios{ 854 | grid-template-columns: repeat(1, 1fr); 855 | } 856 | } 857 | --------------------------------------------------------------------------------