├── src └── index │ ├── assets │ ├── image.png │ ├── images.png │ ├── swiggi.png │ ├── favicon.png │ ├── images (1).png │ ├── mit-logo3.png │ ├── portfolio.jpg │ ├── personalprotfolio.png │ ├── Screenshot 2024-06-30 195556.png │ ├── Screenshot 2024-07-04 234303.png │ ├── Screenshot 2024-07-04 235915.png │ ├── Screenshot 2024-07-05 001022.png │ ├── Screenshot 2024-07-05 001216.png │ ├── Screenshot 2024-07-05 001323.png │ ├── Screenshot 2024-07-05 002002.png │ └── Screenshot 2024-07-05 002124.png │ ├── Scripts │ ├── script.js │ └── script1.js │ ├── work.html │ ├── index.css │ ├── index.html │ └── global.css ├── vercel.json └── README.md /src/index/assets/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sahhoArjun097/portfolio/HEAD/src/index/assets/image.png -------------------------------------------------------------------------------- /src/index/assets/images.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sahhoArjun097/portfolio/HEAD/src/index/assets/images.png -------------------------------------------------------------------------------- /src/index/assets/swiggi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sahhoArjun097/portfolio/HEAD/src/index/assets/swiggi.png -------------------------------------------------------------------------------- /src/index/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sahhoArjun097/portfolio/HEAD/src/index/assets/favicon.png -------------------------------------------------------------------------------- /src/index/assets/images (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sahhoArjun097/portfolio/HEAD/src/index/assets/images (1).png -------------------------------------------------------------------------------- /src/index/assets/mit-logo3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sahhoArjun097/portfolio/HEAD/src/index/assets/mit-logo3.png -------------------------------------------------------------------------------- /src/index/assets/portfolio.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sahhoArjun097/portfolio/HEAD/src/index/assets/portfolio.jpg -------------------------------------------------------------------------------- /src/index/assets/personalprotfolio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sahhoArjun097/portfolio/HEAD/src/index/assets/personalprotfolio.png -------------------------------------------------------------------------------- /src/index/assets/Screenshot 2024-06-30 195556.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sahhoArjun097/portfolio/HEAD/src/index/assets/Screenshot 2024-06-30 195556.png -------------------------------------------------------------------------------- /src/index/assets/Screenshot 2024-07-04 234303.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sahhoArjun097/portfolio/HEAD/src/index/assets/Screenshot 2024-07-04 234303.png -------------------------------------------------------------------------------- /src/index/assets/Screenshot 2024-07-04 235915.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sahhoArjun097/portfolio/HEAD/src/index/assets/Screenshot 2024-07-04 235915.png -------------------------------------------------------------------------------- /src/index/assets/Screenshot 2024-07-05 001022.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sahhoArjun097/portfolio/HEAD/src/index/assets/Screenshot 2024-07-05 001022.png -------------------------------------------------------------------------------- /src/index/assets/Screenshot 2024-07-05 001216.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sahhoArjun097/portfolio/HEAD/src/index/assets/Screenshot 2024-07-05 001216.png -------------------------------------------------------------------------------- /src/index/assets/Screenshot 2024-07-05 001323.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sahhoArjun097/portfolio/HEAD/src/index/assets/Screenshot 2024-07-05 001323.png -------------------------------------------------------------------------------- /src/index/assets/Screenshot 2024-07-05 002002.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sahhoArjun097/portfolio/HEAD/src/index/assets/Screenshot 2024-07-05 002002.png -------------------------------------------------------------------------------- /src/index/assets/Screenshot 2024-07-05 002124.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sahhoArjun097/portfolio/HEAD/src/index/assets/Screenshot 2024-07-05 002124.png -------------------------------------------------------------------------------- /vercel.json: -------------------------------------------------------------------------------- 1 | { 2 | "routes": [ 3 | { 4 | "src": "/[^.]+", 5 | "dest": "/", 6 | "status": 200 7 | } 8 | ] 9 | } -------------------------------------------------------------------------------- /src/index/Scripts/script.js: -------------------------------------------------------------------------------- 1 | var main = document.querySelector("#main") 2 | var curser = document.querySelector("#curser") 3 | var myimage = document.querySelector("#rigth-box") 4 | var comicbtn = document.querySelectorAll("#comic-button") 5 | 6 | main.addEventListener("mousemove", function (deft) { 7 | gsap.to(curser, { 8 | x: deft.x, 9 | y: deft.y, 10 | duration: 1 11 | }) 12 | }); 13 | myimage.addEventListener("mouseenter", function () { 14 | curser.innerHTML = "Hi!" 15 | 16 | gsap.to(curser, { 17 | scale: 1.5, 18 | backgroundColor: "#eeeeee62" 19 | }) 20 | }) 21 | myimage.addEventListener("mouseout", function () { 22 | curser.innerHTML = " " 23 | gsap.to(curser, { 24 | scale: 1, 25 | 26 | backgroundColor: "#eee" 27 | }) 28 | }) 29 | 30 | // -------------------------------------------------------------- 31 | 32 | 33 | comicbtn.forEach(function (link) { 34 | link.addEventListener("mouseenter", function () { 35 | gsap.to(curser, { 36 | scale: 0, 37 | }) 38 | }); 39 | 40 | link.addEventListener("mouseout", function () { 41 | gsap.to(curser, { 42 | scale: 1, 43 | backgroundColor: "#eee" 44 | }) 45 | }); 46 | }); 47 | 48 | 49 | -------------------------------------------------------------------------------- /src/index/Scripts/script1.js: -------------------------------------------------------------------------------- 1 | var tl = gsap.timeline() 2 | tl.from(".l-nav a", { 3 | y: -20, 4 | duration: 1, 5 | opacity: 0, 6 | delay: 0.2 7 | }) 8 | 9 | tl.from(".description .nav-skill", { 10 | y: -20, 11 | stagger: 0.3, 12 | opacity: 0, 13 | duration: 1 14 | }) 15 | 16 | tl.from(".description .nav-work", { 17 | y: -20, 18 | stagger: 0.3, 19 | opacity: 0, 20 | duration: 1 21 | }) 22 | 23 | tl.from(".description .nav-edu", { 24 | y: -20, 25 | stagger: 0.3, 26 | opacity: 0, 27 | duration: 1 28 | }) 29 | 30 | tl.from(".description .nav-resum", { 31 | y: -20, 32 | stagger: 0.3, 33 | opacity: 0, 34 | duration: 1 35 | }) 36 | 37 | tl.from(".description .nav-contact", { 38 | y: -20, 39 | stagger: 0.3, 40 | opacity: 0, 41 | duration: 1 42 | }) 43 | var cross = document.querySelector(".sheet-content i") 44 | var menu = document.querySelector("#present-midnav #menuButton") 45 | 46 | var til = gsap.timeline() 47 | til.to(".menu-sheet", { 48 | right: 0, 49 | duration: 0.4 50 | }) 51 | til.from(".sheet-content h4", { 52 | x: 100, 53 | duration: 0.5, 54 | stagger: 0.3, 55 | opacity: 0, 56 | }) 57 | til.from(".sheet-content i", { 58 | opacity: 0 59 | }) 60 | 61 | til.pause() 62 | 63 | 64 | 65 | menu.addEventListener("click", function () { 66 | til.play() 67 | }) 68 | 69 | cross.addEventListener("click", function () { 70 | til.reverse() 71 | }) -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # My Portfolio 2 | 3 | Welcome to my portfolio! This project showcases my skills as a frontend developer, using HTML, CSS, JavaScript, and GSAP to create a dynamic, interactive, and visually engaging website. 4 | 5 | ## Features 6 | 7 | - **Responsive Design:** Optimized for various screen sizes to provide a seamless experience on mobile, tablet, and desktop. 8 | - **Smooth Animations:** Integrated animations using **GSAP** (GreenSock Animation Platform) to enhance user experience. 9 | - **Multiple Sections:** Includes sections for About Me, Projects, Skills, Contact, and more. 10 | - **Interactive Elements:** Buttons, icons, and various elements respond to user interaction to add a dynamic touch. 11 | 12 | ## Tech Stack 13 | 14 | - **HTML:** Structured the content of the website. 15 | - **CSS:** Styled the portfolio with a focus on a modern, clean design. 16 | - **JavaScript:** Added interactivity and enhanced functionality. 17 | - **GSAP:** Used for animations, adding smooth transitions and interactive effects. 18 | 19 | ## Live Demo 20 | 21 | Check out the live version of my portfolio here: [arjunagarwal.vercel.app](https://arjunagarwal.vercel.app/) 22 | 23 | ## Installation 24 | 25 | To view or edit this portfolio locally: 26 | 27 | 1. **Clone the repository:** 28 | ```bash 29 | git clone https://github.com/sahhoArjun097/portfolio.git 30 | Open the project: Navigate to the project folder and open the index.html file in a web browser to view the portfolio. 31 | 32 | -------------------------------------------------------------------------------- /src/index/work.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |

MY WORK

21 |
22 |
23 | 24 |
25 | 26 |
27 |

"Personal Portfolio Website"

28 |

29 | This personal portfolio website showcases my creative work and achievements. It features a collection of visual art and web design projects, offering visitors a chance to explore my skills and experience in a simple and engaging way.

30 | 31 |
32 |
33 | 34 |
35 | 36 |
37 |

"Layers"

38 |

39 | This project is a "Layers" clone built with HTML and Tailwind CSS. It demonstrates a layered design structure with a modern, responsive layout. The design includes a header, content sections, and a footer, all styled using Tailwind's utility classes for a clean and efficient development process.

40 | 41 |
42 |
43 | 44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 | 53 |
54 |
55 |
56 |
57 |
58 | 59 |
60 |
61 |
62 |
63 |
64 | 65 |
66 |
67 |
68 |
69 |
70 | 71 |
72 |
73 |
74 |
75 |
76 | 77 |
78 |
79 |
80 |
81 |
82 | 83 |
84 |
85 |
86 |
87 |
88 |
89 | 90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 | 107 |
108 |
109 |
110 |
111 | 112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 | 141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 | 157 |
158 |
159 |
160 |

"WeatherApp"

161 |

162 | Our Weather App provides accurate and up-to-date weather information for any location worldwide. Built with HTML, CSS and Javascript. Simply enter a city name, and you'll get the current temperature, weather conditions, and other relevant data such as humidity and wind speed.

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

"Your Favorite Meals, Delivered Fast"

171 |

172 | This React-based food delivery app provides users with a seamless and intuitive experience to browse, customize, and order meals from a variety of restaurants. Styled using Tailwind CSS, the app boasts a sleek, responsive design, ensuring smooth navigation across all devices. Whether you're craving fast food or gourmet cuisine, this app makes ordering your favorite meals easy and enjoyable.

173 | 174 |
175 |
176 |
177 | 178 |
179 | 180 | -------------------------------------------------------------------------------- /src/index/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | html, 8 | body { 9 | height: 100%; 10 | width: 100%; 11 | color: beige; 12 | background: #080808; 13 | } 14 | 15 | .home { 16 | height: 100vh; 17 | width: 100%; 18 | } 19 | 20 | #main { 21 | height: 100%; 22 | position: relative; 23 | } 24 | 25 | #curser { 26 | height: 40px; 27 | width: 40px; 28 | border-radius: 50%; 29 | font-size: 15px; 30 | display: flex; 31 | align-items: center; 32 | justify-content: center; 33 | color: #000; 34 | background-color: #eee; 35 | position: fixed; 36 | z-index: 6; 37 | } 38 | 39 | 40 | .bar { 41 | width: 100%; 42 | display: flex; 43 | justify-content: space-between; 44 | height: 8vh; 45 | padding: 0px 50px; 46 | } 47 | 48 | .A { 49 | color: rgb(177, 18, 18); 50 | font-size: 45px; 51 | } 52 | 53 | .sheet-content { 54 | display: none; 55 | } 56 | 57 | .l-nav { 58 | height: 50px; 59 | width: 100px; 60 | display: flex; 61 | padding: 5px 10px 15px; 62 | opacity: 1; 63 | justify-content: space-between; 64 | } 65 | 66 | .l-nav a { 67 | color: inherit; 68 | text-decoration: none; 69 | padding-bottom: 15px; 70 | font-family: "Ubuntu Sans Mono", monospace; 71 | font-size: 30px; 72 | } 73 | 74 | .name { 75 | display: flex; 76 | gap: 10px; 77 | } 78 | 79 | .name p { 80 | font-family: "Ubuntu Sans Mono", monospace; 81 | font-size: 40px; 82 | } 83 | 84 | #present-midnav { 85 | justify-content: center; 86 | display: flex; 87 | /* align-items: center; */ 88 | padding-top: 10px; 89 | } 90 | 91 | .mid-nav { 92 | display: flex; 93 | gap: 50px 94 | } 95 | 96 | .mid-nav>h2 { 97 | font-family: "Ubuntu Sans Mono", monospace; 98 | } 99 | 100 | .mid-nav a { 101 | color: inherit; 102 | text-decoration: none; 103 | } 104 | 105 | .description { 106 | display: flex; 107 | padding: 30px; 108 | gap: 40px; 109 | } 110 | 111 | .nav-skill { 112 | display: flex; 113 | gap: 10px; 114 | } 115 | 116 | .nav-work { 117 | display: flex; 118 | gap: 5px; 119 | } 120 | 121 | .nav-edu { 122 | display: flex; 123 | gap: 5px; 124 | } 125 | 126 | .nav-resum { 127 | display: flex; 128 | gap: 5px; 129 | } 130 | 131 | .nav-contact { 132 | display: flex; 133 | gap: 5px; 134 | } 135 | 136 | .description h2 { 137 | font-family: "Ubuntu Sans Mono", monospace; 138 | font-weight: 100; 139 | font-size: 20px; 140 | color: #c18949; 141 | } 142 | 143 | .container-holder { 144 | height: 92vh; 145 | width: 100%; 146 | } 147 | 148 | .container { 149 | width: 100%; 150 | height: 100%; 151 | display: flex; 152 | justify-content: center; 153 | align-items: center; 154 | } 155 | 156 | .inner-box { 157 | height: 60%; 158 | width: 90%; 159 | gap: 55px; 160 | display: flex; 161 | justify-content: center; 162 | align-items: center; 163 | } 164 | 165 | #left-box { 166 | display: flex; 167 | flex-direction: column; 168 | gap: 20px; 169 | width: 60%; 170 | /* background: #000; */ 171 | } 172 | 173 | .name { 174 | display: flex; 175 | gap: 20px; 176 | } 177 | 178 | .name>p { 179 | font-size: 50px; 180 | font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; 181 | } 182 | 183 | #left-box>p { 184 | word-wrap: break-word; 185 | font-size: 35px; 186 | font-family: "Ubuntu Sans Mono", monospace; 187 | /* font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */ 188 | } 189 | 190 | #rigth-box { 191 | height: 100%; 192 | width: 35%; 193 | background: #8f1c1c; 194 | border-radius: 50%; 195 | position: relative; 196 | border-color: #eeeeee; 197 | border-width: 8px; 198 | } 199 | 200 | #rigth-box>img { 201 | justify-content: center; 202 | height: 100%; 203 | border-radius: 50%; 204 | object-fit: cover; 205 | background-position: center; 206 | display: flex; 207 | align-items: center; 208 | background-size: cover; 209 | background-color: #eeeeee; 210 | width: 100%; 211 | } 212 | 213 | #overlay { 214 | position: absolute; 215 | height: 100%; 216 | width: 100%; 217 | background: transparent; 218 | border-radius: 50%; 219 | z-index: 8; 220 | } 221 | 222 | /* -------------------------------------------------------------------------------------------------- */ 223 | #skill { 224 | height: 100vh; 225 | width: 100%; 226 | background: #221c1c3f; 227 | } 228 | 229 | .skill-heading { 230 | font-size: 45px; 231 | font-family: "Ubuntu Sans Mono", monospace; 232 | display: flex; 233 | justify-content: center; 234 | } 235 | 236 | /* ---------------------------------------------------------------------------------- */ 237 | #mywork { 238 | height: 105vh; 239 | width: 100%; 240 | align-items: center; 241 | display: flex; 242 | flex-direction: column; 243 | } 244 | 245 | .work-box { 246 | display: grid; 247 | grid-template-columns: repeat(3, 1fr); /* Only 3 columns */ 248 | grid-gap: 40px; 249 | margin-top: 0px; 250 | width: 100%; 251 | padding: 40px; 252 | justify-content: center; 253 | align-items: center; 254 | } 255 | 256 | .black { 257 | background-color: #312b2b; 258 | } 259 | 260 | .btn a { 261 | text-decoration: none; 262 | } 263 | 264 | /* ------------------------------------------------------------------------------------------------------------------------------ */ 265 | .myedu-heading { 266 | font-size: 45px; 267 | font-family: "Ubuntu Sans Mono", monospace; 268 | display: flex; 269 | justify-content: center; 270 | margin-top: 15px; 271 | } 272 | 273 | #myedu { 274 | height: 105vh; 275 | width: 100%; 276 | align-items: center; 277 | display: flex; 278 | flex-direction: column; 279 | background-color: #000; 280 | } 281 | 282 | .myedu-box { 283 | /* height: 90%; */ 284 | width: 80%; 285 | display: flex; 286 | margin-top: 20px; 287 | flex-direction: column; 288 | /* background-color: #8f1c1c; */ 289 | } 290 | 291 | .myedu-box1, 292 | .myedu-box2 { 293 | height: 40vh; 294 | width: 45%; 295 | } 296 | 297 | .myedu-box1 { 298 | top: 0; 299 | left: 0; 300 | } 301 | 302 | .myedu-box2 { 303 | right: 0; 304 | margin-left: 50%; 305 | 306 | } 307 | 308 | .college-box { 309 | padding: 20px; 310 | gap: 10px; 311 | display: flex; 312 | flex-direction: column; 313 | } 314 | 315 | .college-box img { 316 | width: 50px; 317 | align-items: center; 318 | justify-content: center; 319 | display: flex; 320 | height: auto; 321 | /* margin-bottom: 10px; */ 322 | } 323 | 324 | .college-box h3 { 325 | margin: 0 0 10px; 326 | font-family: "Ubuntu Sans Mono", monospace; 327 | font-weight: 700; 328 | } 329 | 330 | .college-box p { 331 | margin: 0 0 10px; 332 | font-weight: 300; 333 | font-family: "Ubuntu Sans Mono", monospace; 334 | } 335 | 336 | button { 337 | background: #fbca1f; 338 | font-family: inherit; 339 | padding: 0.6em 1.3em; 340 | font-weight: 600; 341 | font-size: 18px; 342 | border: 3px solid rgb(0, 0, 0); 343 | border-radius: 0.4em; 344 | box-shadow: 0.1em 0.1em; 345 | cursor: pointer; 346 | } 347 | 348 | .school-box { 349 | padding: 20px; 350 | gap: 10px; 351 | display: flex; 352 | flex-direction: column; 353 | } 354 | 355 | .school-box img { 356 | width: 50px; 357 | align-items: center; 358 | justify-content: center; 359 | display: flex; 360 | height: auto; 361 | /* margin-bottom: 10px; */ 362 | } 363 | 364 | .school-box h3 { 365 | margin: 0 0 10px; 366 | font-family: "Ubuntu Sans Mono", monospace; 367 | font-weight: 700; 368 | } 369 | 370 | .school-box p { 371 | margin: 0 0 10px; 372 | font-weight: 300; 373 | font-family: "Ubuntu Sans Mono", monospace; 374 | } 375 | 376 | /* --------------------------------------------------------------------------------------------------------- */ 377 | #contact { 378 | height: 100vh; 379 | width: 100%; 380 | align-items: center; 381 | justify-content: center; 382 | padding: 25px; 383 | display: flex; 384 | flex-direction: column; 385 | /* background-color: #000; */ 386 | } 387 | 388 | .contact-box { 389 | height: 92vh; 390 | width: 80%; 391 | /* justify-content: center; */ 392 | /* align-items: center; */ 393 | /* background-color: wheat; */ 394 | display: flex; 395 | gap: 50px; 396 | } 397 | 398 | .contact-heading { 399 | font-size: 35px; 400 | width: 80%; 401 | font-family: "Ubuntu Sans Mono", monospace; 402 | margin-top: 15px; 403 | justify-content: end; 404 | align-items: end; 405 | } 406 | 407 | .contact-box1 { 408 | display: flex; 409 | flex-direction: column; 410 | gap: 30px; 411 | height: 100%; 412 | width: 50%; 413 | } 414 | 415 | .row-row { 416 | display: flex; 417 | align-items: center; 418 | gap: 20px; 419 | } 420 | 421 | .contact-box2 { 422 | display: flex; 423 | justify-content: center; 424 | flex-direction: column; 425 | align-items: center; 426 | /* background-color: #eee; */ 427 | } 428 | 429 | .email-div h2 { 430 | font-size: 15px; 431 | font-family: "Ubuntu Sans Mono", monospace; 432 | font-weight: 100; 433 | } 434 | 435 | /* --------------------------------------------------------------------------- */ 436 | .footer { 437 | background-color: #1b1212; 438 | height: 4vh; 439 | align-items: center; 440 | justify-content: center; 441 | display: flex; 442 | width: 100%; 443 | 444 | } 445 | 446 | /* ------------------------------------------------------------------------------- */ 447 | .banner { 448 | width: 100%; 449 | height: 85vh; 450 | text-align: center; 451 | overflow: hidden; 452 | position: relative; 453 | padding: 50px; 454 | } 455 | 456 | .banner .slider { 457 | position: absolute; 458 | width: 150px; 459 | height: 150px; 460 | top: 25%; 461 | left: calc(50% - 100px); 462 | transform-style: preserve-3d; 463 | transform: perspective(1000px); 464 | animation: autoRun 20s linear infinite; 465 | z-index: 2; 466 | } 467 | 468 | @keyframes autoRun { 469 | from { 470 | transform: perspective(2000px) rotateX(-16deg) rotateY(0deg); 471 | } 472 | 473 | to { 474 | transform: perspective(2000px) rotateX(-16deg) rotateY(360deg); 475 | } 476 | } 477 | 478 | .banner .slider .item { 479 | position: absolute; 480 | inset: 0 0 0 0; 481 | transform: 482 | rotateY(calc((var(--position) - 1) * (360 / var(--quantity)) * 1deg)) translateZ(550px); 483 | } 484 | 485 | .banner .slider .item img { 486 | width: 100%; 487 | height: 100%; 488 | object-fit: cover; 489 | } 490 | 491 | 492 | 493 | /* ----------------------------------------------------------------------------- */ 494 | /* 495 | For Mobile Devices – 320px — 480px. 496 | iPads and Tablets – 481px — 768px. 497 | Laptops and small screen – 769px — 1024px. 498 | Large screens and Desktops – 1025px — 1200px. 499 | TV and Extra Large Screens – 1201px and more. */ 500 | @media screen and (min-width:320px) and (max-width:580px) { 501 | 502 | 503 | #curser { 504 | display: none; 505 | } 506 | 507 | body, 508 | html { 509 | width: 100%; 510 | overflow-x: hidden; 511 | margin: 0; 512 | padding: 0; 513 | box-sizing: border-box; 514 | } 515 | 516 | .bar { 517 | width: 100%; 518 | display: flex; 519 | justify-content: space-between; 520 | height: 15vh; 521 | padding: 25px; 522 | } 523 | 524 | .menu-sheet { 525 | height: 100%; 526 | width: 50%; 527 | background-color: #25262762; 528 | backdrop-filter: blur(30px); 529 | overflow: hidden; 530 | top: 0; 531 | right: -50%; 532 | padding: 100px 30px; 533 | position: absolute; 534 | gap: 40px; 535 | z-index: 10; 536 | } 537 | 538 | .sheet-content { 539 | /* height: 50%; */ 540 | /* width: 80%; */ 541 | display: inline; 542 | } 543 | 544 | .sheet-content a { 545 | text-decoration: none; 546 | color: #000; 547 | } 548 | 549 | .sheet-content i { 550 | position: absolute; 551 | top: 7%; 552 | right: 20%; 553 | /* background-color: white; */ 554 | /* border-radius: 50%; */ 555 | /* padding: 7px; */ 556 | color: #000; 557 | font-weight: 600; 558 | font-size: 28px; 559 | cursor: pointer; 560 | 561 | } 562 | 563 | .menu-sheet h4 { 564 | font-size: 25px; 565 | font-weight: 600; 566 | font-family: monospace; 567 | margin-bottom: 10px; 568 | color: #000; 569 | } 570 | 571 | .container-holder { 572 | height: 80vh; 573 | width: 100%; 574 | } 575 | 576 | .container { 577 | width: 100%; 578 | height: 100%; 579 | justify-content: center; 580 | align-items: center; 581 | padding: 10px; 582 | } 583 | 584 | .inner-box { 585 | display: flex; 586 | flex-direction: column-reverse; 587 | height: 100%; 588 | width: 100%; 589 | justify-content: center; 590 | align-items: center; 591 | gap: 20px; 592 | 593 | } 594 | 595 | #left-box { 596 | /* display: none; */ 597 | height: 80vh; 598 | width: 90%; 599 | } 600 | 601 | #left-box .name p { 602 | font-size: 40px; 603 | } 604 | 605 | #left-box p { 606 | font-size: 25px; 607 | } 608 | 609 | #rigth-box { 610 | /* display: none; */ 611 | height: 38vh; 612 | width: 100%; 613 | padding: 10px; 614 | background-color: transparent; 615 | } 616 | 617 | .skill-heading { 618 | font-size: 45px; 619 | font-family: "Ubuntu Sans Mono", monospace; 620 | display: flex; 621 | justify-content: center; 622 | padding-top: 40px; 623 | } 624 | 625 | .A { 626 | color: rgb(177, 18, 18); 627 | font-size: 45px; 628 | } 629 | 630 | .mid-nav { 631 | display: none; 632 | } 633 | 634 | /* --------------------------------------------------------------- */ 635 | 636 | .banner .slider { 637 | width: 250px; 638 | height: 250px; 639 | left: calc(50% - 50px); 640 | } 641 | 642 | .banner .slider { 643 | transform: 644 | rotateY(calc((var(--position) - 1) * (360 / var(--quantity)) * 1deg)) translateZ(180px); 645 | } 646 | 647 | .seemorebtn { 648 | margin-top: 30px; 649 | } 650 | 651 | #mywork { 652 | height: 160vh; 653 | width: 100%; 654 | align-items: center; 655 | display: flex; 656 | flex-direction: column; 657 | } 658 | 659 | .work-box { 660 | height: 80%; 661 | width: 100%; 662 | display: flex; 663 | flex-direction: column; 664 | gap: 40px; 665 | align-items: center; 666 | justify-content: center; 667 | padding-top: 25px; 668 | } 669 | 670 | .myedu-box { 671 | /* height: 90%; */ 672 | width: 90%; 673 | display: flex; 674 | margin-top: 20px; 675 | flex-direction: column; 676 | /* background-color: #8f1c1c; */ 677 | } 678 | 679 | .myedu-heading { 680 | font-size: 45px; 681 | font-family: "Ubuntu Sans Mono", monospace; 682 | display: flex; 683 | justify-content: center; 684 | padding-top: 25px; 685 | } 686 | 687 | .myedu-box1, 688 | .myedu-box2 { 689 | height: 45vh; 690 | width: 100%; 691 | } 692 | 693 | .myedu-box2 { 694 | /* right: 0; */ 695 | margin-left: 0%; 696 | } 697 | 698 | .college-box { 699 | padding: 20px; 700 | gap: 10px; 701 | display: flex; 702 | flex-direction: column; 703 | } 704 | 705 | #contact { 706 | padding: 5px; 707 | display: flex; 708 | } 709 | 710 | .contact-box { 711 | height: 92vh; 712 | width: 100%; 713 | display: flex; 714 | flex-direction: column; 715 | } 716 | 717 | .contact-heading { 718 | font-size: 35px; 719 | width: 90%; 720 | font-family: "Ubuntu Sans Mono", monospace; 721 | margin-top: 15px; 722 | justify-content: end; 723 | align-items: end; 724 | } 725 | 726 | .contact-box1 { 727 | display: flex; 728 | flex-direction: column; 729 | gap: 5px; 730 | height: 50%; 731 | padding: 0px 20px; 732 | width: 100%; 733 | } 734 | 735 | .contact-box2 { 736 | /* display: flex; 737 | height: 40%; 738 | justify-content: center; 739 | flex-direction: column; 740 | 741 | align-items: center; */ 742 | /* background-color: #eee; */ 743 | /* display: none; */ 744 | } 745 | 746 | .wrapper { 747 | display: inline-flex; 748 | list-style: none; 749 | height: 80px; 750 | width: 100%; 751 | padding-top: 20px; 752 | font-family: "Poppins", sans-serif; 753 | } 754 | 755 | } 756 | 757 | /* ------------------------------------------------------------------------------------- */ 758 | @media screen and (min-width:581px) and (max-width:800px) { 759 | 760 | body, 761 | html { 762 | width: 100%; 763 | overflow-x: hidden; 764 | margin: 0; 765 | padding: 0; 766 | box-sizing: border-box; 767 | } 768 | 769 | .skill-heading { 770 | font-size: 45px; 771 | font-family: "Ubuntu Sans Mono", monospace; 772 | display: flex; 773 | justify-content: center; 774 | padding-top: 40px; 775 | } 776 | 777 | .banner .slider { 778 | width: 160px; 779 | height: 200px; 780 | left: calc(50% - 80px); 781 | } 782 | 783 | .banner .slider .item { 784 | transform: 785 | rotateY(calc((var(--position) - 1) * (360 / var(--quantity)) * 1deg)) translateZ(300px); 786 | } 787 | 788 | .myedu-box { 789 | /* height: 90%; */ 790 | width: 90%; 791 | display: flex; 792 | margin-top: 20px; 793 | gap: 40px; 794 | flex-direction: column; 795 | /* background-color: #8f1c1c; */ 796 | } 797 | 798 | .myedu-heading { 799 | font-size: 45px; 800 | font-family: "Ubuntu Sans Mono", monospace; 801 | display: flex; 802 | justify-content: center; 803 | padding-top: 25px; 804 | } 805 | 806 | .myedu-box1, 807 | .myedu-box2 { 808 | height: 35vh; 809 | width: 100%; 810 | } 811 | 812 | .myedu-box2 { 813 | /* right: 0; */ 814 | margin-left: 0%; 815 | } 816 | 817 | .school-box p, 818 | h3 { 819 | margin: 0 0 10px; 820 | font-weight: 300; 821 | font-size: 20px; 822 | font-family: "Ubuntu Sans Mono", monospace; 823 | } 824 | 825 | #contact { 826 | padding: 5px; 827 | display: flex; 828 | } 829 | 830 | .contact-heading { 831 | font-size: 35px; 832 | width: 80%; 833 | font-family: "Ubuntu Sans Mono", monospace; 834 | margin-top: 15px; 835 | display: flex; 836 | justify-content: center; 837 | align-items: center; 838 | } 839 | 840 | .contact-box { 841 | height: 92vh; 842 | width: 90%; 843 | display: flex; 844 | flex-direction: column; 845 | } 846 | 847 | .contact-box1 { 848 | display: flex; 849 | flex-direction: column; 850 | align-items: center; 851 | gap: 20px; 852 | height: 45%; 853 | width: 100%; 854 | } 855 | 856 | .mid-nav { 857 | display: flex; 858 | gap: 40px; 859 | } 860 | 861 | .description { 862 | display: flex; 863 | /* padding: 20px; */ 864 | gap: 10px; 865 | } 866 | 867 | .bar { 868 | width: 100%; 869 | display: flex; 870 | justify-content: space-between; 871 | height: 8vh; 872 | padding: 0px 30px; 873 | gap: 50px; 874 | } 875 | 876 | .work-box { 877 | height: 80%; 878 | width: 100%; 879 | display: flex; 880 | flex-direction: column; 881 | gap: 30px; 882 | align-items: center; 883 | justify-content: center; 884 | } 885 | 886 | .seemorebtn { 887 | margin-top: 30px; 888 | } 889 | 890 | /* .work-box{ 891 | display: grid; 892 | grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 893 | grid-gap: 20px; 894 | margin-top: 0px; 895 | width: 100%; 896 | padding: 40px; 897 | } */ 898 | 899 | } 900 | 901 | @media screen and (min-width:800px) and (max-width:1080px) { 902 | 903 | .work-box { 904 | display: grid; 905 | grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); 906 | grid-gap: 40px; 907 | margin-top: 0px; 908 | width: 100%; 909 | padding: 40px; 910 | justify-content: center; 911 | align-items: center; 912 | } 913 | 914 | .Xcard { 915 | position: relative; 916 | width: 350px; 917 | height: 450px; 918 | background-color: #f2f2f2; 919 | object-fit: cover; 920 | justify-content: center; 921 | opacity: 0.8; 922 | border-radius: 10px; 923 | display: flex; 924 | overflow: hidden; 925 | perspective: 1000px; 926 | box-shadow: 0 0 0 5px #ffffff80; 927 | transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); 928 | } 929 | 930 | .seemorebtn { 931 | margin-top: 100px; 932 | } 933 | 934 | 935 | .myedu-box { 936 | /* height: 90%; */ 937 | width: 90%; 938 | display: flex; 939 | margin-top: 20px; 940 | gap: 40px; 941 | flex-direction: column; 942 | /* background-color: #8f1c1c; */ 943 | } 944 | 945 | .myedu-heading { 946 | font-size: 45px; 947 | font-family: "Ubuntu Sans Mono", monospace; 948 | display: flex; 949 | justify-content: center; 950 | padding-top: 25px; 951 | } 952 | 953 | .myedu-box1, 954 | .myedu-box2 { 955 | height: 35vh; 956 | width: 100%; 957 | } 958 | 959 | .myedu-box2 { 960 | /* right: 0; */ 961 | margin-left: 0%; 962 | } 963 | 964 | .school-box p, 965 | h3 { 966 | margin: 0 0 10px; 967 | font-weight: 300; 968 | font-size: 20px; 969 | font-family: "Ubuntu Sans Mono", monospace; 970 | } 971 | 972 | #contact { 973 | padding: 15px; 974 | display: flex; 975 | } 976 | 977 | .contact-heading { 978 | font-size: 35px; 979 | width: 80%; 980 | font-family: "Ubuntu Sans Mono", monospace; 981 | margin-top: 35px; 982 | display: flex; 983 | justify-content: center; 984 | align-items: center; 985 | } 986 | 987 | .contact-box { 988 | height: 102vh; 989 | width: 90%; 990 | display: flex; 991 | flex-direction: column; 992 | } 993 | 994 | .contact-box1 { 995 | display: flex; 996 | flex-direction: column; 997 | align-items: center; 998 | gap: 20px; 999 | height: 45%; 1000 | width: 100%; 1001 | } 1002 | } -------------------------------------------------------------------------------- /src/index/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 16 | 17 | 18 | 21 | 22 | 23 | 24 |
25 |
26 |
27 |
28 |

Skill

29 |

My work

30 |

Education

31 |

Resume

32 |

Contact

33 | 34 |
35 |
36 | 37 |
38 | 112 | 113 | 114 | 115 |
116 |
117 |
118 |
119 |
120 |

ARJUN ,

121 |
122 |
123 |

A final year MITian, majoring in Computer Science and Engineering. I have a strong passion for 124 | programming and web development.

125 |
126 | 127 | 128 | 130 | 131 | 132 | 133 | 134 | 135 | 137 | 138 | 139 | 140 | 141 | 142 | 144 | 145 | 146 | 147 | 148 | 149 | 151 | 152 | 153 | 154 |
155 |
156 |
157 |
158 | 159 |
160 |
161 |
162 |
163 | 164 |
165 | 166 |
167 |
168 |

SKILLS

169 |
170 | 183 | 184 |
185 | 186 | 187 | 188 |
189 |
190 |

MY WORK

191 |
192 |
193 | 194 |
195 | 196 |
197 |

"Personal Portfolio Website"

198 |

199 | This personal portfolio website showcases my creative work and achievements. It features a collection of 200 | visual art and web design projects, offering visitors a chance to explore my skills and experience in a 201 | simple and engaging way.

202 | 203 |
204 |
205 | 206 |
207 | 208 |
209 |

"Layers"

210 |

211 | This project is a "Layers" clone built with HTML and Tailwind CSS. It demonstrates a layered design 212 | structure with a modern, responsive layout. The design includes a header, content sections, and a footer, 213 | all styled using Tailwind's utility classes for a clean and efficient development process.

214 | 215 |
216 |
217 | 218 |
219 |
220 |
221 |
222 |
223 |
224 |
225 |
226 | 227 |
228 |
229 |
230 |
231 |
232 | 233 |
234 |
235 |
236 |
237 |
238 | 239 |
240 |
241 |
242 |
243 |
244 | 245 |
246 |
247 |
248 |
249 |
250 | 251 |
252 |
253 |
254 |
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 |
280 | 281 |
282 |
283 |
284 |
285 | 286 |
287 |
288 |
289 |
290 |
291 |
292 |
293 |
294 |
295 |
296 |
297 |
298 |
299 |
300 |
301 |
302 |
303 |
304 |
305 |
306 |
307 |
308 |
309 |
310 |
311 |
312 |
313 |
314 | 315 |
316 |
317 |
318 |
319 |
320 |
321 |
322 |
323 |
324 |
325 |
326 |
327 |
328 |
329 |
330 | 331 |
332 |
333 |
334 |

"WeatherApp"

335 |

336 | Our Weather App provides accurate and up-to-date weather information for any location worldwide. Built 337 | with HTML, CSS and Javascript. Simply enter a city name, and you'll get the current temperature, weather 338 | conditions, and other relevant data such as humidity and wind speed.

339 | 340 |
341 |
342 |
343 |
344 | 347 |
348 |
349 | 350 | 351 |
352 |
353 |

EDUCATION

354 |
355 |
356 |
357 |
358 |
359 |
360 | 361 |
362 |

Bachelor degree of Technology in Computer Science and Engineering

363 |

Moradabad Institute of Technology and Management, AKTU
MORADABAD, India - 4 years

364 |
365 | 366 | 367 | 368 | 369 | 370 | 371 |
372 |
373 |
374 |
375 |
376 |
377 |
378 |
379 | 380 |
381 |

Intermediate

382 |

St Mary's convent School, CBSE
DHAMPUR, India

383 |
384 | 385 | 386 | 387 | 388 | 389 |
390 |
391 |
392 |
393 |
394 | 395 | 396 |
397 |
398 |
399 |
400 |

Contact Me

401 |
402 | 403 |
404 | 405 | 408 |
409 |
410 | 411 | 414 |
415 | 416 |
417 | 463 |
464 |
465 | 477 |
478 |
479 | 480 |
481 |
482 | 483 | 484 | 485 | 486 |
487 |
488 |
489 |
490 |
491 |
492 |

Copyright @ Arjun. All rights Reserved

493 |
494 |
495 | 496 | 497 | 500 | 501 | 502 | 503 | 504 | 505 | -------------------------------------------------------------------------------- /src/index/global.css: -------------------------------------------------------------------------------- 1 | .spinner { 2 | width: 22px; 3 | height: 22px; 4 | animation: spinner-y0fdc1 2s infinite ease; 5 | transform-style: preserve-3d; 6 | } 7 | 8 | .spinner>div { 9 | background-color: #5f646833; 10 | height: 100%; 11 | position: absolute; 12 | width: 100%; 13 | border: 1px solid #0d0d0e; 14 | } 15 | 16 | .spinner div:nth-of-type(1) { 17 | transform: translateZ(-11px) rotateY(180deg); 18 | } 19 | 20 | .spinner div:nth-of-type(2) { 21 | transform: rotateY(-270deg) translateX(50%); 22 | transform-origin: top right; 23 | } 24 | 25 | .spinner div:nth-of-type(3) { 26 | transform: rotateY(270deg) translateX(-50%); 27 | transform-origin: center left; 28 | } 29 | 30 | .spinner div:nth-of-type(4) { 31 | transform: rotateX(90deg) translateY(-50%); 32 | transform-origin: top center; 33 | } 34 | 35 | .spinner div:nth-of-type(5) { 36 | transform: rotateX(-90deg) translateY(50%); 37 | transform-origin: bottom center; 38 | } 39 | 40 | .spinner div:nth-of-type(6) { 41 | transform: translateZ(11px); 42 | } 43 | 44 | @keyframes spinner-y0fdc1 { 45 | 0% { 46 | transform: rotate(45deg) rotateX(-25deg) rotateY(25deg); 47 | } 48 | 49 | 50% { 50 | transform: rotate(45deg) rotateX(-385deg) rotateY(25deg); 51 | } 52 | 53 | 100% { 54 | transform: rotate(45deg) rotateX(-385deg) rotateY(385deg); 55 | } 56 | } 57 | 58 | /* ------------------------------------------------------------------------------------------ */ 59 | 60 | .work-loader { 61 | display: inline-block; 62 | vertical-align: middle; 63 | position: relative; 64 | margin: 1px; 65 | /* Medium margin */ 66 | } 67 | 68 | @keyframes work-loader-bubbles { 69 | 0% { 70 | box-shadow: 0 -7px #fff, 71 | 2px 0 #fff, 72 | 3.5px 0 #fff; 73 | /* Medium values */ 74 | } 75 | 76 | 30% { 77 | box-shadow: 2px -14px rgba(255, 255, 255, 0), 78 | 3.5px -7px #fff, 79 | 3.5px 0 #fff; 80 | /* Medium values */ 81 | } 82 | 83 | 60% { 84 | box-shadow: 2px 0 rgba(255, 255, 255, 0), 85 | 2.8px -14px rgba(255, 255, 255, 0), 86 | 2.1px -7px #fff; 87 | /* Medium values */ 88 | } 89 | 90 | 61% { 91 | box-shadow: 2px 0 #fff, 92 | 2.8px -14px rgba(255, 255, 255, 0), 93 | 2.1px -7px #fff; 94 | /* Medium values */ 95 | } 96 | 97 | 100% { 98 | box-shadow: 0 -7px #fff, 99 | 2.8px -14px rgba(255, 255, 255, 0), 100 | 3.5px -14px rgba(255, 255, 255, 0); 101 | /* Medium values */ 102 | } 103 | } 104 | 105 | .work-loader { 106 | width: 7px; 107 | /* Medium width */ 108 | height: 14px; 109 | /* Medium height */ 110 | margin-left: 14px; 111 | /* Medium margin */ 112 | margin-right: 14px; 113 | /* Medium margin */ 114 | background: #fff; 115 | /* Color remains white */ 116 | } 117 | 118 | .work-loader:before, 119 | .work-loader:after { 120 | content: ''; 121 | position: absolute; 122 | } 123 | 124 | .work-loader:before { 125 | top: -5.6px; 126 | /* Medium top position */ 127 | left: -9.1px; 128 | /* Medium left position */ 129 | width: 0; 130 | height: 0; 131 | border: 12.6px solid transparent; 132 | /* Medium border size */ 133 | border-bottom: 14px solid #fff; 134 | /* Color remains white */ 135 | border-radius: 2.1px; 136 | /* Medium border-radius */ 137 | } 138 | 139 | .work-loader:after { 140 | top: 0; 141 | left: 0; 142 | width: 2.8px; 143 | /* Medium width */ 144 | height: 2.8px; 145 | /* Medium height */ 146 | background: #fff; 147 | /* Color remains white */ 148 | border-radius: 50%; 149 | animation: work-loader-bubbles 1s linear infinite forwards; 150 | } 151 | 152 | 153 | /* -------------------------------------------------------------------------------------- */ 154 | .edu-loader { 155 | display: flex; 156 | align-items: center; 157 | justify-content: center; 158 | margin: 1px; 159 | } 160 | 161 | .book-wrapper { 162 | width: 38px; 163 | padding-top: 20px; 164 | display: flex; 165 | align-items: center; 166 | justify-content: flex-end; 167 | position: relative; 168 | } 169 | 170 | .book { 171 | width: 100%; 172 | height: auto; 173 | filter: drop-shadow(10px 10px 5px rgba(0, 0, 0, 0.137)); 174 | } 175 | 176 | .book-wrapper .book-page { 177 | width: 50%; 178 | height: auto; 179 | position: absolute; 180 | animation: paging 0.15s linear infinite; 181 | transform-origin: left; 182 | } 183 | 184 | @keyframes paging { 185 | 0% { 186 | transform: rotateY(0deg) skewY(0deg); 187 | } 188 | 189 | 50% { 190 | transform: rotateY(90deg) skewY(-20deg); 191 | } 192 | 193 | 100% { 194 | transform: rotateY(180deg) skewY(0deg); 195 | } 196 | } 197 | 198 | /* --------------------------------------------------------------------------------------------------- */ 199 | 200 | 201 | .container-1 { 202 | display: flex; 203 | justify-content: center; 204 | align-items: center; 205 | margin-top: 12px; 206 | gap: 10px; 207 | } 208 | 209 | .folder { 210 | width: auto; 211 | animation: float 2s infinite linear; 212 | } 213 | 214 | .folder .top { 215 | background-color: #FF8F56; 216 | width: 20px; 217 | /* Reduced width */ 218 | height: 4px; 219 | /* Reduced height */ 220 | border-top-right-radius: 3px; 221 | /* Adjusted border radius */ 222 | } 223 | 224 | .folder .bottom { 225 | background-color: #FFCE63; 226 | width: 30px; 227 | /* Reduced width */ 228 | height: 20px; 229 | /* Reduced height */ 230 | box-shadow: 1.5px 1.5px 0 0 #283149; 231 | /* Adjusted box shadow */ 232 | border-top-right-radius: 2px; 233 | /* Adjusted border radius */ 234 | } 235 | 236 | @keyframes float { 237 | 0% { 238 | transform: translateY(0px); 239 | } 240 | 241 | 50% { 242 | transform: translateY(-8px); 243 | /* Adjusted translate value */ 244 | } 245 | 246 | 100% { 247 | transform: translateY(0px); 248 | } 249 | } 250 | 251 | 252 | /* -------------------------------------------------------------------------------------------------------- */ 253 | .center-body { 254 | background: #202628; 255 | display: flex; 256 | justify-content: center; 257 | align-items: center; 258 | width: 100%; 259 | height: 100%; 260 | } 261 | 262 | 263 | .loader-shape-3 { 264 | position: relative; 265 | display: inline-block; 266 | width: 35px; 267 | /* Medium width */ 268 | height: 35px; 269 | /* Medium height */ 270 | } 271 | 272 | .loader-shape-3:after { 273 | width: 18px; 274 | /* Medium width */ 275 | height: 13px; 276 | /* Medium height */ 277 | border-radius: 100%; 278 | background-color: rgba(255, 255, 255, 0.2); 279 | top: 50%; 280 | left: 50%; 281 | transform: translate(-50%, -50%); 282 | margin-top: 15px; 283 | /* Medium margin-top */ 284 | } 285 | 286 | .loader-shape-3:before { 287 | width: 12px; 288 | /* Medium width */ 289 | height: 12px; 290 | /* Medium height */ 291 | border-radius: 100% 100% 100% 0; 292 | box-shadow: 0px 0px 0px 1.5px rgba(255, 255, 255, 1); 293 | /* Medium box-shadow */ 294 | animation: anm-SL-3-move 1s linear infinite; 295 | top: 50%; 296 | left: 50%; 297 | transform: translate(-50%, -50%) rotate(-46deg); 298 | margin-top: 20px; 299 | /* Medium margin-top */ 300 | } 301 | 302 | .loader-shape-3:before, 303 | .loader-shape-3:after { 304 | position: absolute; 305 | content: ""; 306 | } 307 | 308 | @keyframes anm-SL-3-move { 309 | 0% { 310 | top: 0; 311 | } 312 | 313 | 50% { 314 | top: -3.5px; 315 | /* Medium top position */ 316 | } 317 | 318 | 100% { 319 | top: 0; 320 | } 321 | } 322 | 323 | /* --------------------------------------------------------------- */ 324 | .card { 325 | width: 270px; 326 | height: 50px; 327 | display: flex; 328 | align-items: center; 329 | gap: 20px; 330 | box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.055); 331 | } 332 | 333 | /* for all social containers*/ 334 | .socialContainer { 335 | width: 52px; 336 | height: 52px; 337 | background-color: rgb(44, 44, 44); 338 | display: flex; 339 | align-items: center; 340 | justify-content: center; 341 | overflow: hidden; 342 | transition-duration: .3s; 343 | } 344 | 345 | /* instagram*/ 346 | .containerOne:hover { 347 | background-color: #d62976; 348 | transition-duration: .3s; 349 | } 350 | 351 | /* twitter*/ 352 | .containerTwo:hover { 353 | background-color: #00acee; 354 | transition-duration: .3s; 355 | } 356 | 357 | /* linkdin*/ 358 | .containerThree:hover { 359 | background-color: #0072b1; 360 | transition-duration: .3s; 361 | } 362 | 363 | /* Whatsapp*/ 364 | .containerFour:hover { 365 | background-color: #128C7E; 366 | transition-duration: .3s; 367 | } 368 | 369 | .socialContainer:active { 370 | transform: scale(0.9); 371 | transition-duration: .3s; 372 | } 373 | 374 | .socialSvg { 375 | width: 17px 376 | } 377 | 378 | .socialSvg path { 379 | fill: rgb(255, 255, 255); 380 | } 381 | 382 | .socialContainer:hover .socialSvg { 383 | animation: slide-in-top 0.3s both; 384 | } 385 | 386 | @keyframes slide-in-top { 387 | 0% { 388 | transform: translateY(-50px); 389 | opacity: 0; 390 | } 391 | 392 | 100% { 393 | transform: translateY(0); 394 | opacity: 1; 395 | } 396 | } 397 | 398 | /* ---------------------------------------------------------------------------------------------------------------------- */ 399 | 400 | .loader { 401 | width: 40px; 402 | height: 40px; 403 | background: #353535; 404 | display: block; 405 | /* margin: 2px auto; */ 406 | position: relative; 407 | box-sizing: border-box; 408 | animation: rotationBack 1s ease-in-out infinite reverse; 409 | margin-top: 10px; 410 | } 411 | 412 | .loader::before { 413 | content: ''; 414 | box-sizing: border-box; 415 | left: 0; 416 | top: 0; 417 | transform: rotate(45deg); 418 | position: absolute; 419 | width: 40px; 420 | height: 40px; 421 | background: #2e2e2e; 422 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 423 | } 424 | 425 | .loader::after { 426 | content: ''; 427 | box-sizing: border-box; 428 | width: 30px; 429 | height: 30px; 430 | border-radius: 50%; 431 | position: absolute; 432 | left: 50%; 433 | top: 50%; 434 | background: rgb(0, 0, 0); 435 | transform: translate(-50%, -50%); 436 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 437 | } 438 | 439 | 440 | @keyframes rotationBack { 441 | 0% { 442 | transform: rotate(0deg); 443 | } 444 | 445 | 100% { 446 | transform: rotate(-360deg); 447 | } 448 | } 449 | 450 | /* ----------------------------------------------------------------------------------------------------------------- */ 451 | .Xcard { 452 | position: relative; 453 | width: 350px; 454 | height: 450px; 455 | background-color: #f2f2f2; 456 | object-fit: cover; 457 | justify-content: center; 458 | opacity: 0.8; 459 | border-radius: 10px; 460 | display: flex; 461 | overflow: hidden; 462 | perspective: 1000px; 463 | box-shadow: 0 0 0 5px #ffffff80; 464 | transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); 465 | } 466 | 467 | .Xcard svg { 468 | width: 48px; 469 | fill: #333; 470 | transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); 471 | } 472 | 473 | .Xcard:hover { 474 | transform: scale(1); 475 | box-shadow: 0 8px 16px rgba(255, 255, 255, 0.2); 476 | } 477 | 478 | .Xcard img:hover { 479 | opacity: 0.4; 480 | } 481 | 482 | .card__content { 483 | position: absolute; 484 | justify-content: center; 485 | align-items: center; 486 | display: flex; 487 | flex-direction: column; 488 | width: 100%; 489 | height: 100%; 490 | z-index: 2; 491 | padding: 40px; 492 | box-sizing: border-box; 493 | background-color: transparent; 494 | transform: rotateX(-90deg); 495 | transform-origin: bottom; 496 | transition: all 0.9s cubic-bezier(0.175, 0.885, 0.32, 1.275); 497 | } 498 | 499 | .Xcard:hover .card__content { 500 | transform: rotateX(0deg); 501 | background-color: #1111127e; 502 | } 503 | 504 | .card__title { 505 | 506 | font-size: 30px; 507 | text-align: center; 508 | font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; 509 | color: #18fcd2; 510 | font-weight: 500; 511 | } 512 | 513 | .card__description { 514 | 515 | justify-content: center; 516 | margin-top: 20px; 517 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 518 | font-size: 16px; 519 | color: #ffffff; 520 | font-weight: 500; 521 | justify-content: center; 522 | text-align: center; 523 | 524 | } 525 | 526 | /* -------------------------------------------------------------------------------------------------------------- */ 527 | 528 | #comic-button { 529 | display: inline-block; 530 | padding: 10px 20px; 531 | font-size: 14px; 532 | font-weight: bold; 533 | text-align: center; 534 | margin-top: 30px; 535 | text-decoration: none; 536 | color: #fff; 537 | background-color: #ff5252; 538 | border: 2px solid #000; 539 | border-radius: 10px; 540 | box-shadow: 5px 5px 0px #000; 541 | transition: all 0.3s ease; 542 | cursor: pointer; 543 | } 544 | 545 | #comic-button:hover { 546 | background-color: #fff; 547 | color: #ff5252; 548 | border: 2px solid #ff5252; 549 | box-shadow: 5px 5px 0px #ff5252; 550 | } 551 | 552 | #comic-button:active { 553 | background-color: #fcf414; 554 | box-shadow: none; 555 | transform: translateY(4px); 556 | } 557 | 558 | #comic-button a { 559 | text-decoration: none; 560 | color: #06a4e3; 561 | 562 | } 563 | 564 | 565 | /* -------------------------------------------------------------------------- */ 566 | 567 | @keyframes stageBackground { 568 | 569 | 0%, 570 | 10%, 571 | 90%, 572 | 100% { 573 | background-color: #00B6BB; 574 | } 575 | 576 | 25%, 577 | 75% { 578 | background-color: #0094bd; 579 | } 580 | } 581 | 582 | @keyframes earthRotation { 583 | from { 584 | transform: rotate(0deg); 585 | } 586 | 587 | to { 588 | transform: rotate(360deg); 589 | } 590 | } 591 | 592 | @keyframes sunrise { 593 | 594 | 0%, 595 | 10%, 596 | 90%, 597 | 100% { 598 | box-shadow: 0 0 0 25px #5ad6bd, 0 0 0 40px #4acead, 0 0 0 60px rgba(74, 206, 173, 0.6), 0 0 0 90px rgba(74, 206, 173, 0.3); 599 | } 600 | 601 | 25%, 602 | 75% { 603 | box-shadow: 0 0 0 0 #5ad6bd, 0 0 0 0 #4acead, 0 0 0 0 rgba(74, 206, 173, 0.6), 0 0 0 0 rgba(74, 206, 173, 0.3); 604 | } 605 | } 606 | 607 | @keyframes moonOrbit { 608 | 25% { 609 | transform: rotate(-60deg); 610 | } 611 | 612 | 50% { 613 | transform: rotate(-60deg); 614 | } 615 | 616 | 75% { 617 | transform: rotate(-120deg); 618 | } 619 | 620 | 0%, 621 | 100% { 622 | transform: rotate(-180deg); 623 | } 624 | } 625 | 626 | @keyframes nightTime { 627 | 628 | 0%, 629 | 90% { 630 | opacity: 0; 631 | } 632 | 633 | 50%, 634 | 75% { 635 | opacity: 1; 636 | } 637 | } 638 | 639 | @keyframes hotPan { 640 | 641 | 0%, 642 | 90% { 643 | background-color: #74667e; 644 | } 645 | 646 | 50%, 647 | 75% { 648 | background-color: #b2241c; 649 | } 650 | } 651 | 652 | @keyframes heat { 653 | 654 | 0%, 655 | 90% { 656 | box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0.3); 657 | } 658 | 659 | 50%, 660 | 75% { 661 | box-shadow: inset 0 -2px 0 0 white; 662 | } 663 | } 664 | 665 | @keyframes smoke { 666 | 667 | 0%, 668 | 50%, 669 | 90%, 670 | 100% { 671 | opacity: 0; 672 | } 673 | 674 | 50%, 675 | 75% { 676 | opacity: 0.7; 677 | } 678 | } 679 | 680 | @keyframes fire { 681 | 682 | 0%, 683 | 90%, 684 | 100% { 685 | opacity: 0; 686 | } 687 | 688 | 50%, 689 | 75% { 690 | opacity: 1; 691 | } 692 | } 693 | 694 | @keyframes treeShake { 695 | 0% { 696 | transform: rotate(0deg); 697 | } 698 | 699 | 25% { 700 | transform: rotate(-2deg); 701 | } 702 | 703 | 40% { 704 | transform: rotate(4deg); 705 | } 706 | 707 | 50% { 708 | transform: rotate(-4deg); 709 | } 710 | 711 | 60% { 712 | transform: rotate(6deg); 713 | } 714 | 715 | 75% { 716 | transform: rotate(-6deg); 717 | } 718 | 719 | 100% { 720 | transform: rotate(0deg); 721 | } 722 | } 723 | 724 | @keyframes fireParticles { 725 | 0% { 726 | height: 30%; 727 | opacity: 1; 728 | top: 75%; 729 | } 730 | 731 | 25% { 732 | height: 25%; 733 | opacity: 0.8; 734 | top: 40%; 735 | } 736 | 737 | 50% { 738 | height: 15%; 739 | opacity: 0.6; 740 | top: 20%; 741 | } 742 | 743 | 75% { 744 | height: 10%; 745 | opacity: 0.3; 746 | top: 0; 747 | } 748 | 749 | 100% { 750 | opacity: 0; 751 | } 752 | } 753 | 754 | @keyframes fireLines { 755 | 756 | 0%, 757 | 25%, 758 | 75%, 759 | 100% { 760 | bottom: 0; 761 | } 762 | 763 | 50% { 764 | bottom: 5%; 765 | } 766 | } 767 | 768 | .scene { 769 | display: flex; 770 | margin: 0 auto 80px auto; 771 | justify-content: center; 772 | align-items: flex-end; 773 | width: 400px; 774 | height: 300px; 775 | position: relative; 776 | } 777 | 778 | .forest { 779 | display: flex; 780 | width: 75%; 781 | height: 90%; 782 | position: relative; 783 | } 784 | 785 | .tree { 786 | display: block; 787 | width: 50%; 788 | position: absolute; 789 | bottom: 0; 790 | opacity: 0.4; 791 | } 792 | 793 | .tree .branch { 794 | width: 80%; 795 | height: 0; 796 | margin: 0 auto; 797 | padding-left: 40%; 798 | padding-bottom: 50%; 799 | overflow: hidden; 800 | } 801 | 802 | .tree .branch:before { 803 | content: ""; 804 | display: block; 805 | width: 0; 806 | height: 0; 807 | margin-left: -600px; 808 | border-left: 600px solid transparent; 809 | border-right: 600px solid transparent; 810 | border-bottom: 950px solid #000; 811 | } 812 | 813 | .tree .branch.branch-top { 814 | transform-origin: 50% 100%; 815 | animation: treeShake 0.5s linear infinite; 816 | } 817 | 818 | .tree .branch.branch-middle { 819 | width: 90%; 820 | padding-left: 45%; 821 | padding-bottom: 65%; 822 | margin: 0 auto; 823 | margin-top: -25%; 824 | } 825 | 826 | .tree .branch.branch-bottom { 827 | width: 100%; 828 | padding-left: 50%; 829 | padding-bottom: 80%; 830 | margin: 0 auto; 831 | margin-top: -40%; 832 | } 833 | 834 | .tree1 { 835 | width: 31%; 836 | } 837 | 838 | .tree1 .branch-top { 839 | transition-delay: 0.3s; 840 | } 841 | 842 | .tree2 { 843 | width: 39%; 844 | left: 9%; 845 | } 846 | 847 | .tree2 .branch-top { 848 | transition-delay: 0.4s; 849 | } 850 | 851 | .tree3 { 852 | width: 32%; 853 | left: 24%; 854 | } 855 | 856 | .tree3 .branch-top { 857 | transition-delay: 0.5s; 858 | } 859 | 860 | .tree4 { 861 | width: 37%; 862 | left: 34%; 863 | } 864 | 865 | .tree4 .branch-top { 866 | transition-delay: 0.6s; 867 | } 868 | 869 | .tree5 { 870 | width: 44%; 871 | left: 44%; 872 | } 873 | 874 | .tree5 .branch-top { 875 | transition-delay: 0.7s; 876 | } 877 | 878 | .tree6 { 879 | width: 34%; 880 | left: 61%; 881 | } 882 | 883 | .tree6 .branch-top { 884 | transition-delay: 0.2s; 885 | } 886 | 887 | .tree7 { 888 | width: 24%; 889 | left: 76%; 890 | } 891 | 892 | .tree7 .branch-top { 893 | transition-delay: 0.1s; 894 | } 895 | 896 | .tent { 897 | width: 60%; 898 | height: 25%; 899 | position: absolute; 900 | bottom: -0.5%; 901 | right: 15%; 902 | z-index: 1; 903 | text-align: right; 904 | } 905 | 906 | .roof { 907 | display: inline-block; 908 | width: 45%; 909 | height: 100%; 910 | margin-right: 10%; 911 | position: relative; 912 | /*bottom: 0; 913 | right: 9%;*/ 914 | z-index: 1; 915 | border-top: 4px solid #4D4454; 916 | border-right: 4px solid #4D4454; 917 | border-left: 4px solid #4D4454; 918 | border-top-right-radius: 6px; 919 | transform: skew(30deg); 920 | box-shadow: inset -3px 3px 0px 0px #F7B563; 921 | /*background: linear-gradient( 922 | to bottom, 923 | rgba(246,212,132,1) 0%, 924 | rgba(246,212,132,1) 24%, 925 | rgba(#F0B656,1) 25%, 926 | rgba(#F0B656,1) 74%, 927 | rgba(235,151,53,1) 75%, 928 | rgba(235,151,53,1) 100% 929 | );*/ 930 | background: #f6d484; 931 | } 932 | 933 | .roof:before { 934 | content: ""; 935 | width: 70%; 936 | height: 70%; 937 | position: absolute; 938 | top: 15%; 939 | left: 15%; 940 | z-index: 0; 941 | border-radius: 10%; 942 | background-color: #E78C20; 943 | } 944 | 945 | .roof:after { 946 | content: ""; 947 | height: 75%; 948 | width: 100%; 949 | position: absolute; 950 | bottom: 0; 951 | right: 0; 952 | z-index: 1; 953 | background: linear-gradient(to bottom, rgba(231, 140, 32, 0.4) 0%, rgba(231, 140, 32, 0.4) 64%, rgba(231, 140, 32, 0.8) 65%, rgba(231, 140, 32, 0.8) 100%); 954 | } 955 | 956 | .roof-border-left { 957 | display: flex; 958 | justify-content: space-between; 959 | flex-direction: column; 960 | width: 1%; 961 | height: 125%; 962 | position: absolute; 963 | top: 0; 964 | left: 35.7%; 965 | z-index: 1; 966 | transform-origin: 50% 0%; 967 | transform: rotate(35deg); 968 | } 969 | 970 | .roof-border-left .roof-border { 971 | display: block; 972 | width: 100%; 973 | border-radius: 2px; 974 | border: 2px solid #4D4454; 975 | } 976 | 977 | .roof-border-left .roof-border1 { 978 | height: 40%; 979 | } 980 | 981 | .roof-border-left .roof-border2 { 982 | height: 10%; 983 | } 984 | 985 | .roof-border-left .roof-border3 { 986 | height: 40%; 987 | } 988 | 989 | .door { 990 | width: 55px; 991 | height: 92px; 992 | position: absolute; 993 | bottom: 2%; 994 | overflow: hidden; 995 | z-index: 0; 996 | transform-origin: 0 105%; 997 | } 998 | 999 | .left-door { 1000 | transform: rotate(35deg); 1001 | position: absolute; 1002 | left: 13.5%; 1003 | bottom: -3%; 1004 | z-index: 0; 1005 | } 1006 | 1007 | .left-door .left-door-inner { 1008 | width: 100%; 1009 | height: 100%; 1010 | transform-origin: 0 105%; 1011 | transform: rotate(-35deg); 1012 | position: absolute; 1013 | top: 0; 1014 | overflow: hidden; 1015 | background-color: #EDDDC2; 1016 | } 1017 | 1018 | .left-door .left-door-inner:before { 1019 | content: ""; 1020 | width: 15%; 1021 | height: 100%; 1022 | position: absolute; 1023 | top: 0; 1024 | right: 0; 1025 | background: repeating-linear-gradient(#D4BC8B, #D4BC8B 4%, #E0D2A8 5%, #E0D2A8 10%); 1026 | } 1027 | 1028 | .left-door .left-door-inner:after { 1029 | content: ""; 1030 | width: 50%; 1031 | height: 100%; 1032 | position: absolute; 1033 | top: 15%; 1034 | left: 10%; 1035 | transform: rotate(25deg); 1036 | background-color: #fff; 1037 | } 1038 | 1039 | .right-door { 1040 | height: 89px; 1041 | right: 21%; 1042 | transform-origin: 0 105%; 1043 | transform: rotate(-30deg) scaleX(-1); 1044 | position: absolute; 1045 | bottom: -3%; 1046 | z-index: 0; 1047 | } 1048 | 1049 | .right-door .right-door-inner { 1050 | width: 100%; 1051 | height: 100%; 1052 | transform-origin: 0 120%; 1053 | transform: rotate(-30deg); 1054 | position: absolute; 1055 | bottom: 0px; 1056 | overflow: hidden; 1057 | background-color: #EFE7CF; 1058 | } 1059 | 1060 | .right-door .right-door-inner:before { 1061 | content: ""; 1062 | width: 50%; 1063 | height: 100%; 1064 | position: absolute; 1065 | top: 15%; 1066 | right: -28%; 1067 | z-index: 1; 1068 | transform: rotate(15deg); 1069 | background-color: #524A5A; 1070 | } 1071 | 1072 | .right-door .right-door-inner:after { 1073 | content: ""; 1074 | width: 50%; 1075 | height: 100%; 1076 | position: absolute; 1077 | top: 15%; 1078 | right: -20%; 1079 | transform: rotate(20deg); 1080 | background-color: #fff; 1081 | } 1082 | 1083 | .floor { 1084 | width: 80%; 1085 | position: absolute; 1086 | right: 10%; 1087 | bottom: 0; 1088 | z-index: 1; 1089 | } 1090 | 1091 | .floor .ground { 1092 | position: absolute; 1093 | border-radius: 2px; 1094 | border: 2px solid #4D4454; 1095 | } 1096 | 1097 | .floor .ground.ground1 { 1098 | width: 65%; 1099 | left: 0; 1100 | } 1101 | 1102 | .floor .ground.ground2 { 1103 | width: 30%; 1104 | right: 0; 1105 | } 1106 | 1107 | .fireplace { 1108 | display: block; 1109 | width: 24%; 1110 | height: 20%; 1111 | position: absolute; 1112 | left: 5%; 1113 | } 1114 | 1115 | .fireplace:before { 1116 | content: ""; 1117 | display: block; 1118 | width: 8%; 1119 | position: absolute; 1120 | bottom: -4px; 1121 | left: 2%; 1122 | border-radius: 2px; 1123 | border: 2px solid #4D4454; 1124 | background: #4D4454; 1125 | } 1126 | 1127 | .fireplace .support { 1128 | display: block; 1129 | height: 105%; 1130 | width: 2px; 1131 | position: absolute; 1132 | bottom: -5%; 1133 | left: 10%; 1134 | border: 2px solid #4D4454; 1135 | } 1136 | 1137 | .fireplace .support:before { 1138 | content: ""; 1139 | width: 100%; 1140 | height: 15%; 1141 | position: absolute; 1142 | top: -18%; 1143 | left: -4px; 1144 | border-radius: 2px; 1145 | border: 2px solid #4D4454; 1146 | transform-origin: 100% 100%; 1147 | transform: rotate(45deg); 1148 | } 1149 | 1150 | .fireplace .support:after { 1151 | content: ""; 1152 | width: 100%; 1153 | height: 15%; 1154 | position: absolute; 1155 | top: -18%; 1156 | left: 0px; 1157 | border-radius: 2px; 1158 | border: 2px solid #4D4454; 1159 | transform-origin: 0 100%; 1160 | transform: rotate(-45deg); 1161 | } 1162 | 1163 | .fireplace .support:nth-child(1) { 1164 | left: 85%; 1165 | } 1166 | 1167 | .fireplace .bar { 1168 | width: 100%; 1169 | height: 2px; 1170 | border-radius: 2px; 1171 | border: 2px solid #4D4454; 1172 | } 1173 | 1174 | .fireplace .hanger { 1175 | display: block; 1176 | width: 2px; 1177 | height: 25%; 1178 | margin-left: -4px; 1179 | position: absolute; 1180 | left: 50%; 1181 | border: 2px solid #4D4454; 1182 | } 1183 | 1184 | .fireplace .pan { 1185 | display: block; 1186 | width: 25%; 1187 | height: 50%; 1188 | border-radius: 50%; 1189 | border: 4px solid #4D4454; 1190 | position: absolute; 1191 | top: 25%; 1192 | left: 35%; 1193 | overflow: hidden; 1194 | animation: heat 5s linear infinite; 1195 | } 1196 | 1197 | .fireplace .pan:before { 1198 | content: ""; 1199 | display: block; 1200 | height: 53%; 1201 | width: 100%; 1202 | position: absolute; 1203 | bottom: 0; 1204 | z-index: -1; 1205 | border-top: 4px solid #4D4454; 1206 | background-color: #74667e; 1207 | animation: hotPan 5s linear infinite; 1208 | } 1209 | 1210 | .fireplace .smoke { 1211 | display: block; 1212 | width: 20%; 1213 | height: 25%; 1214 | position: absolute; 1215 | top: 25%; 1216 | left: 37%; 1217 | background-color: white; 1218 | filter: blur(5px); 1219 | animation: smoke 5s linear infinite; 1220 | } 1221 | 1222 | .fireplace .fire { 1223 | display: block; 1224 | width: 25%; 1225 | height: 120%; 1226 | position: absolute; 1227 | bottom: 0; 1228 | left: 33%; 1229 | z-index: 1; 1230 | animation: fire 5s linear infinite; 1231 | } 1232 | 1233 | .fireplace .fire:before { 1234 | content: ""; 1235 | display: block; 1236 | width: 100%; 1237 | height: 2px; 1238 | position: absolute; 1239 | bottom: -4px; 1240 | z-index: 1; 1241 | border-radius: 2px; 1242 | border: 1px solid #efb54a; 1243 | background-color: #efb54a; 1244 | } 1245 | 1246 | .fireplace .fire .line { 1247 | display: block; 1248 | width: 2px; 1249 | height: 100%; 1250 | position: absolute; 1251 | bottom: 0; 1252 | animation: fireLines 1s linear infinite; 1253 | } 1254 | 1255 | .fireplace .fire .line2 { 1256 | left: 50%; 1257 | margin-left: -1px; 1258 | animation-delay: 0.3s; 1259 | } 1260 | 1261 | .fireplace .fire .line3 { 1262 | right: 0; 1263 | animation-delay: 0.5s; 1264 | } 1265 | 1266 | .fireplace .fire .line .particle { 1267 | height: 10%; 1268 | position: absolute; 1269 | top: 100%; 1270 | z-index: 1; 1271 | border-radius: 2px; 1272 | border: 2px solid #efb54a; 1273 | animation: fireParticles 0.5s linear infinite; 1274 | } 1275 | 1276 | .fireplace .fire .line .particle1 { 1277 | animation-delay: 0.1s; 1278 | } 1279 | 1280 | .fireplace .fire .line .particle2 { 1281 | animation-delay: 0.3s; 1282 | } 1283 | 1284 | .fireplace .fire .line .particle3 { 1285 | animation-delay: 0.6s; 1286 | } 1287 | 1288 | .fireplace .fire .line .particle4 { 1289 | animation-delay: 0.9s; 1290 | } 1291 | 1292 | .time-wrapper { 1293 | display: block; 1294 | width: 100%; 1295 | height: 100%; 1296 | position: absolute; 1297 | overflow: hidden; 1298 | } 1299 | 1300 | .time { 1301 | display: block; 1302 | width: 100%; 1303 | height: 200%; 1304 | position: absolute; 1305 | transform-origin: 50% 50%; 1306 | transform: rotate(270deg); 1307 | animation: earthRotation 5s linear infinite; 1308 | } 1309 | 1310 | .time .day { 1311 | display: block; 1312 | width: 20px; 1313 | height: 20px; 1314 | position: absolute; 1315 | top: 20%; 1316 | left: 40%; 1317 | border-radius: 50%; 1318 | box-shadow: 0 0 0 25px #5ad6bd, 0 0 0 40px #4acead, 0 0 0 60px rgba(74, 206, 173, 0.6), 0 0 0 90px rgba(74, 206, 173, 0.3); 1319 | animation: sunrise 5s ease-in-out infinite; 1320 | background-color: #ef9431; 1321 | } 1322 | 1323 | .time .night { 1324 | animation: nightTime 5s ease-in-out infinite; 1325 | } 1326 | 1327 | .time .night .star { 1328 | display: block; 1329 | width: 4px; 1330 | height: 4px; 1331 | position: absolute; 1332 | bottom: 10%; 1333 | border-radius: 50%; 1334 | background-color: #fff; 1335 | } 1336 | 1337 | .time .night .star-big { 1338 | width: 6px; 1339 | height: 6px; 1340 | } 1341 | 1342 | .time .night .star1 { 1343 | right: 23%; 1344 | bottom: 25%; 1345 | } 1346 | 1347 | .time .night .star2 { 1348 | right: 35%; 1349 | bottom: 18%; 1350 | } 1351 | 1352 | .time .night .star3 { 1353 | right: 47%; 1354 | bottom: 25%; 1355 | } 1356 | 1357 | .time .night .star4 { 1358 | right: 22%; 1359 | bottom: 20%; 1360 | } 1361 | 1362 | .time .night .star5 { 1363 | right: 18%; 1364 | bottom: 30%; 1365 | } 1366 | 1367 | .time .night .star6 { 1368 | right: 60%; 1369 | bottom: 20%; 1370 | } 1371 | 1372 | .time .night .star7 { 1373 | right: 70%; 1374 | bottom: 23%; 1375 | } 1376 | 1377 | .time .night .moon { 1378 | display: block; 1379 | width: 25px; 1380 | height: 25px; 1381 | position: absolute; 1382 | bottom: 22%; 1383 | right: 33%; 1384 | border-radius: 50%; 1385 | transform: rotate(-60deg); 1386 | box-shadow: 9px 9px 3px 0 white; 1387 | filter: blur(1px); 1388 | animation: moonOrbit 5s ease-in-out infinite; 1389 | } 1390 | 1391 | .time .night .moon:before { 1392 | content: ""; 1393 | display: block; 1394 | width: 100%; 1395 | height: 100%; 1396 | position: absolute; 1397 | bottom: -9px; 1398 | left: 9px; 1399 | border-radius: 50%; 1400 | box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.05), 0 0 0 15px rgba(255, 255, 255, 0.05), 0 0 0 25px rgba(255, 255, 255, 0.05), 0 0 0 35px rgba(255, 255, 255, 0.05); 1401 | background-color: rgba(255, 255, 255, 0.2); 1402 | } 1403 | 1404 | /* ----------------------------------------------------------------------------------------------- */ 1405 | 1406 | .seemorebtn { 1407 | margin-bottom: 30px; 1408 | } 1409 | 1410 | .seemorebtn button { 1411 | background: linear-gradient(245deg, #000000 0%, #fdff96 100%), 1412 | linear-gradient(245deg, #0038ff 0%, #000000 100%), 1413 | radial-gradient(100% 225% at 100% 0%, #4200ff 0%, #001169 100%), 1414 | linear-gradient(245deg, #000000 0%, #ffb800 100%), 1415 | radial-gradient(115% 107% at 40% 100%, 1416 | #eaf5ff 0%, 1417 | #eaf5ff 40%, 1418 | #a9c6de calc(40% + 1px), 1419 | #a9c6de 70%, 1420 | #247e6c calc(70% + 2px), 1421 | #247e6c 85%, 1422 | #e4c666 calc(85% + 2px), 1423 | #e4c666 100%), 1424 | linear-gradient(65deg, 1425 | #083836 0%, 1426 | #083836 40%, 1427 | #66d37e calc(40% + 1px), 1428 | #66d37e 60%, 1429 | #c6e872 calc(60% + 1px), 1430 | #c6e872 100%); 1431 | background-blend-mode: overlay, screen, overlay, hard-light, overlay, normal; 1432 | font-family: inherit; 1433 | padding: 0.6em 1.3em; 1434 | font-weight: 900; 1435 | font-size: 18px; 1436 | border: 3px solid black; 1437 | border-radius: 0.4em; 1438 | box-shadow: 0.1em 0.1em; 1439 | } 1440 | 1441 | .seemorebtn>span { 1442 | color: white; 1443 | } 1444 | 1445 | .seemorebtn:hover { 1446 | transform: translate(-0.05em, -0.05em); 1447 | box-shadow: 0.15em 0.15em; 1448 | } 1449 | 1450 | .seemorebtn button:active { 1451 | transform: translate(0.05em, 0.05em); 1452 | box-shadow: 0.05em 0.05em; 1453 | } 1454 | 1455 | .seemorebtn a { 1456 | text-decoration: none; 1457 | color: #eeeeee; 1458 | } 1459 | 1460 | /* ---------------------------------------------------------------------------------------------------- */ 1461 | .card-1 { 1462 | width: 100%; 1463 | height: 100%; 1464 | margin: 0 auto; 1465 | background: linear-gradient(0deg, #000, #272727); 1466 | border-radius: 8px; 1467 | z-index: 1; 1468 | } 1469 | 1470 | .tools { 1471 | display: flex; 1472 | align-items: center; 1473 | padding: 9px; 1474 | } 1475 | 1476 | .circle { 1477 | padding: 0 4px; 1478 | } 1479 | 1480 | .box { 1481 | display: inline-block; 1482 | align-items: center; 1483 | width: 10px; 1484 | height: 10px; 1485 | padding: 1px; 1486 | border-radius: 50%; 1487 | } 1488 | 1489 | .red { 1490 | background-color: #ff605c; 1491 | } 1492 | 1493 | .yellow { 1494 | background-color: #ffbd44; 1495 | } 1496 | 1497 | .green { 1498 | background-color: #00ca4e; 1499 | } 1500 | 1501 | /* ---------------------------------------------------------------------------------------- */ 1502 | .box { 1503 | width: 35px; 1504 | height: 35px; 1505 | background: #5cda5c; 1506 | border-radius: 25px; 1507 | display: flex; 1508 | justify-items: center; 1509 | justify-content: center; 1510 | align-items: center; 1511 | transition: 0.3s; 1512 | cursor: pointer; 1513 | position: relative; 1514 | } 1515 | 1516 | .arrow { 1517 | border: solid black; 1518 | border-width: 0 3px 3px 0; 1519 | display: inline-block; 1520 | padding: 3px; 1521 | } 1522 | 1523 | .right { 1524 | transform: rotate(-45deg); 1525 | } 1526 | 1527 | 1528 | /* ----------------------------------------------------------------------------------- */ 1529 | 1530 | .form { 1531 | --input-focus: #2d8cf0; 1532 | --font-color: #323232; 1533 | --font-color-sub: #666; 1534 | --bg-color: #fff; 1535 | --main-color: #323232; 1536 | padding: 20px; 1537 | background: lightgrey; 1538 | display: flex; 1539 | flex-direction: column; 1540 | align-items: flex-start; 1541 | justify-content: center; 1542 | gap: 20px; 1543 | height: 450px; 1544 | border-radius: 5px; 1545 | border: 2px solid var(--main-color); 1546 | box-shadow: 4px 4px var(--main-color); 1547 | } 1548 | 1549 | .input { 1550 | width: 350px; 1551 | height: 40px; 1552 | border-radius: 5px; 1553 | border: 2px solid var(--main-color); 1554 | background-color: var(--bg-color); 1555 | box-shadow: 4px 4px var(--main-color); 1556 | font-size: 15px; 1557 | font-weight: 600; 1558 | color: var(--font-color); 1559 | padding: 5px 10px; 1560 | outline: none; 1561 | } 1562 | 1563 | .input::placeholder { 1564 | color: var(--font-color-sub); 1565 | opacity: 0.8; 1566 | } 1567 | 1568 | .message-input { 1569 | width: 350px; 1570 | height: 150px; 1571 | /* Increase the height as needed */ 1572 | border-radius: 5px; 1573 | border: 2px solid var(--main-color); 1574 | background-color: var(--bg-color); 1575 | box-shadow: 4px 4px var(--main-color); 1576 | font-size: 15px; 1577 | font-weight: 600; 1578 | color: var(--font-color); 1579 | padding: 10px 10px; 1580 | /* Adjust padding as needed */ 1581 | outline: none; 1582 | } 1583 | 1584 | .message-input::placeholder { 1585 | font-size: 15px; 1586 | /* Adjust the placeholder font size */ 1587 | color: var(--font-color-sub); 1588 | opacity: 0.8; 1589 | 1590 | } 1591 | 1592 | .input:focus { 1593 | border: 2px solid var(--input-focus); 1594 | } 1595 | 1596 | .login-with { 1597 | display: flex; 1598 | gap: 20px; 1599 | } 1600 | 1601 | .button-log { 1602 | cursor: pointer; 1603 | width: 40px; 1604 | height: 40px; 1605 | border-radius: 100%; 1606 | border: 2px solid var(--main-color); 1607 | background-color: var(--bg-color); 1608 | box-shadow: 4px 4px var(--main-color); 1609 | color: var(--font-color); 1610 | font-size: 25px; 1611 | display: flex; 1612 | justify-content: center; 1613 | align-items: center; 1614 | } 1615 | 1616 | 1617 | 1618 | .button-log:active, 1619 | .button-confirm:active { 1620 | box-shadow: 0px 0px var(--main-color); 1621 | transform: translate(3px, 3px); 1622 | } 1623 | 1624 | .button-confirm { 1625 | margin: 50px auto 0 auto; 1626 | width: 120px; 1627 | height: 40px; 1628 | border-radius: 5px; 1629 | border: 2px solid var(--main-color); 1630 | background-color: var(--bg-color); 1631 | box-shadow: 4px 4px var(--main-color); 1632 | font-size: 17px; 1633 | font-weight: 600; 1634 | color: var(--font-color); 1635 | cursor: pointer; 1636 | } 1637 | 1638 | /* --------------------------------------------------------------------------------------------------------------------- */ 1639 | .wrapper { 1640 | display: inline-flex; 1641 | list-style: none; 1642 | height: 120px; 1643 | width: 100%; 1644 | padding-top: 40px; 1645 | font-family: "Poppins", sans-serif; 1646 | 1647 | 1648 | } 1649 | 1650 | .wrapper .icon { 1651 | position: relative; 1652 | /* background: #fff; */ 1653 | border-radius: 50%; 1654 | margin: 10px; 1655 | width: 50px; 1656 | height: 50px; 1657 | font-size: 18px; 1658 | display: flex; 1659 | justify-content: center; 1660 | align-items: center; 1661 | flex-direction: column; 1662 | box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); 1663 | cursor: pointer; 1664 | transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); 1665 | } 1666 | 1667 | .wrapper .tooltip { 1668 | position: absolute; 1669 | top: 0; 1670 | font-size: 14px; 1671 | background: #fff; 1672 | color: #fff; 1673 | padding: 5px 8px; 1674 | border-radius: 5px; 1675 | box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); 1676 | opacity: 0; 1677 | pointer-events: none; 1678 | transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); 1679 | } 1680 | 1681 | .wrapper .tooltip::before { 1682 | position: absolute; 1683 | content: ""; 1684 | height: 8px; 1685 | width: 8px; 1686 | background: #fff; 1687 | bottom: -3px; 1688 | left: 50%; 1689 | transform: translate(-50%) rotate(45deg); 1690 | transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); 1691 | } 1692 | 1693 | .wrapper .icon:hover .tooltip { 1694 | top: -45px; 1695 | opacity: 1; 1696 | visibility: visible; 1697 | pointer-events: auto; 1698 | } 1699 | 1700 | .wrapper .icon:hover span, 1701 | .wrapper .icon:hover .tooltip { 1702 | text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1); 1703 | } 1704 | 1705 | .wrapper .github:hover, 1706 | .wrapper .github:hover .tooltip, 1707 | .wrapper .github:hover .tooltip::before { 1708 | background: #333; 1709 | color: #fff; 1710 | } 1711 | 1712 | 1713 | .wrapper .twitter:hover, 1714 | .wrapper .twitter:hover .tooltip, 1715 | .wrapper .twitter:hover .tooltip::before { 1716 | background: #1da1f2; 1717 | color: #fff; 1718 | } 1719 | 1720 | .wrapper .instagram:hover, 1721 | .wrapper .instagram:hover .tooltip, 1722 | .wrapper .instagram:hover .tooltip::before { 1723 | background: #e4405f; 1724 | color: #fff; 1725 | } 1726 | 1727 | 1728 | .wrapper .linkedin:hover, 1729 | .wrapper .linkedin:hover .tooltip, 1730 | .wrapper .linkedin:hover .tooltip::before { 1731 | background: #0077b5; 1732 | color: #fff; 1733 | } 1734 | 1735 | /* --------------------------------------------------------------------------------------------- */ 1736 | .button { 1737 | display: flex; 1738 | align-items: center; 1739 | justify-content: center; 1740 | width: 200px; 1741 | cursor: pointer; 1742 | background: linear-gradient(45deg, #ffc75d, #ffc708); 1743 | box-shadow: 0 0 24px #ffb20861; 1744 | border: 2px solid #ffe825; 1745 | border-radius: 100px; 1746 | transition: background-color 0.3s ease, box-shadow 0.3s ease; 1747 | text-shadow: 0.3s ease; 1748 | text-decoration: none; 1749 | padding: 10px 20px; 1750 | color: #09090b; 1751 | font-weight: bold; 1752 | text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); 1753 | /* Text drop shadow */ 1754 | } 1755 | 1756 | .button:hover { 1757 | background-color: #ffc75d !important; 1758 | box-shadow: 0 0 34px #ffb20861 !important; 1759 | text-shadow: 0 0 4px #ffe825; 1760 | /* Hover text shadow */ 1761 | border-color: #ffe825 !important; 1762 | } 1763 | 1764 | .button a { 1765 | text-decoration: none; 1766 | color: #eeeeee; 1767 | } 1768 | 1769 | .icon { 1770 | margin-right: 5px; 1771 | filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.3)); 1772 | /* Icon drop shadow */ 1773 | text-decoration: none; 1774 | } 1775 | 1776 | /* -------------------------------------------------------------------------------------------------------- */ 1777 | button-1 { 1778 | background: #2389e9; 1779 | padding: 25px; 1780 | color: #FFFFFF; 1781 | display: flex; 1782 | justify-content: center; 1783 | align-items: center; 1784 | border: none; 1785 | transition: all .5s ease-in-out; 1786 | } 1787 | 1788 | button-1:hover { 1789 | border-radius: 50%; 1790 | transition: all .5s ease-in-out; 1791 | } 1792 | 1793 | button-1:hover:before { 1794 | margin-left: 0%; 1795 | transform: rotate(24deg); 1796 | } 1797 | 1798 | button-1::before { 1799 | content: ""; 1800 | background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNzUycHQiIGhlaWdodD0iNzUycHQiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDc1MiA3NTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8cGF0aCBkPSJtNTczLjE4IDE5OC42MnYwbC0zOTYuMDkgNjMuNzE5Yy03Ljc1IDAuODU5MzgtOS40NzI3IDExLjE5NS0zLjQ0NTMgMTUuNWw5Ny4zMDEgNjguODgzLTE1LjUgMTEyLjhjLTAuODU5MzggNy43NSA3Ljc1IDEyLjkxNCAxMy43NzcgNy43NWw1NS4xMDktNDQuNzczIDI2LjY5MSAxMjQuODVjMS43MjI3IDcuNzUgMTEuMTk1IDkuNDcyNyAxNS41IDIuNTgybDIxNS4yNy0zMzguMzljMy40NDE0LTYuMDI3My0xLjcyNjYtMTMuNzc3LTguNjEzMy0xMi45MTR6bS0zNzIuODQgNzYuNjMzIDMxMy40Mi00OS45NDEtMjMzLjM0IDEwNy42M3ptNzQuMDUxIDE2NS4zMiAxMi45MTQtOTIuMTMzYzgwLjkzOC0zNy4wMjcgMTM5LjQ5LTY0LjU3OCAyMjkuMDQtMTA1LjkxLTEuNzE4OCAxLjcyMjctMC44NTkzNyAwLjg1OTM4LTI0MS45NSAxOTguMDR6bTg4LjY4OCA4Mi42Ni0yNC4xMDktMTEyLjggMTk5Ljc3LTE2Mi43NHoiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg=="); 1801 | height: 50px; 1802 | background-repeat: no-repeat; 1803 | position: absolute; 1804 | width: 50px; 1805 | transition: all .9s ease-in-out; 1806 | background-size: 100%; 1807 | } 1808 | 1809 | /* ------------------------------------------------------- */ 1810 | button-2 { 1811 | background: #23e926; 1812 | padding: 25px; 1813 | color: #FFFFFF; 1814 | display: flex; 1815 | justify-content: center; 1816 | align-items: center; 1817 | border: none; 1818 | transition: all .5s ease-in-out; 1819 | 1820 | } 1821 | 1822 | button-2:hover { 1823 | border-radius: 50%; 1824 | transition: all .5s ease-in-out; 1825 | } 1826 | 1827 | button-2:hover:before { 1828 | margin-left: 0%; 1829 | transform: rotate(24deg); 1830 | } 1831 | 1832 | button-2::before { 1833 | content: ""; 1834 | background-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjM2cHgiIHZpZXdCb3g9IjAgMCAzNiAzNiIgd2lkdGg9IjM2cHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE1LjUgM0E5LjUgOS41IDAgMCAwIDYgMTIuNSAxMC41IDEwLjUgMCAwIDAgMTYuNSAyMmMxLjkgMCAyLjcgMS4yIDMuNSAyLjEgMiAxIDIuNiAzLjUgNSAzLjUgMyAwIDMuNyAxLjMgNS4zIDIuMSAxLjMgMC43IDIuNy0wLjMgMy0xLjVsMy4yLTExLjJhMS4xIDEuMSAwIDAgMC0wLjctMS4zYy0wLjktMC4yLTMuNy0wLjktNC40LTAuOS0wLjYgMC0xLjEgMC0yIC4yYTExIDExIDAgMCAxLTEuOCAxYy0wLjMgMC0wLjYgMC0xIC0wLjItMC44LTAuMy0yLjctMi4yLTMuMi0zLTFjLTAuOC0wLjgtMC45LTAuNy0xLTYuMi0wLjEtNC4zLTAuOC01LjYtMS01LjktMC4xLTAuMy0wLjItMC4yLTAuOS0wLjhhMS4xIDEuMSAwIDAgMC0wLjYtMC4yQTMuNiAzLjYgMCAwIDAgMTUuNSAzeiIvPjwvc3ZnPg=="); 1835 | height: 40px; 1836 | /* Adjusted size for smaller screens */ 1837 | background-repeat: no-repeat; 1838 | position: absolute; 1839 | width: 40px; 1840 | /* Adjusted size for smaller screens */ 1841 | transition: all .9s ease-in-out; 1842 | background-size: 100%; 1843 | } 1844 | 1845 | /* ----------------------------------------------------------------------------------------------- */ 1846 | @media screen and (min-width:320px) and (max-width:580px) { 1847 | .card { 1848 | width: 100%; 1849 | height: 87px; 1850 | display: flex; 1851 | align-items: center; 1852 | /* justify-content: center; */ 1853 | gap: 20px; 1854 | box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.055); 1855 | } 1856 | 1857 | .socialContainer { 1858 | width: 72px; 1859 | height: 72px; 1860 | background-color: rgb(44, 44, 44); 1861 | display: flex; 1862 | align-items: center; 1863 | justify-content: center; 1864 | overflow: hidden; 1865 | transition-duration: .3s; 1866 | } 1867 | 1868 | .socialSvg { 1869 | width: 20px; 1870 | } 1871 | 1872 | /* -------------------------------------------------------------------------------------- */ 1873 | 1874 | 1875 | #menuButton { 1876 | display: flex; 1877 | justify-content: center; 1878 | align-items: center; 1879 | flex-direction: column; 1880 | cursor: pointer; 1881 | gap: 13%; 1882 | color: #090909; 1883 | width: 3em; 1884 | height: 3em; 1885 | border-radius: 0.5em; 1886 | background: #171717; 1887 | border: 1px solid #171717; 1888 | 1889 | box-shadow: inset 4px 4px 12px #3a3a3a, 1890 | inset -4px -4px 12px #000000; 1891 | } 1892 | 1893 | #menuButton:hover { 1894 | border: 1px solid black; 1895 | } 1896 | 1897 | 1898 | input[type="checkbox"] { 1899 | -webkit-appearance: none; 1900 | display: none; 1901 | visibility: hidden; 1902 | } 1903 | 1904 | #menuButton span { 1905 | width: 30px; 1906 | height: 4px; 1907 | background: rgb(200, 200, 200); 1908 | border-radius: 100px; 1909 | transition: 0.3s ease; 1910 | } 1911 | 1912 | 1913 | /* --------------------------------------------------------------------------- */ 1914 | 1915 | .loader { 1916 | width: 40px; 1917 | height: 40px; 1918 | background: #353535; 1919 | display: block; 1920 | /* margin: 2px auto; */ 1921 | position: relative; 1922 | box-sizing: border-box; 1923 | animation: rotationBack 1s ease-in-out infinite reverse; 1924 | margin-top: 5px; 1925 | } 1926 | 1927 | .input { 1928 | width: 350px; 1929 | height: 60px; 1930 | border-radius: 5px; 1931 | border: 2px solid var(--main-color); 1932 | background-color: var(--bg-color); 1933 | box-shadow: 4px 4px var(--main-color); 1934 | font-size: 15px; 1935 | font-weight: 600; 1936 | color: var(--font-color); 1937 | padding: 5px 10px; 1938 | outline: none; 1939 | } 1940 | 1941 | .message-input { 1942 | width: 350px; 1943 | height: 50px; 1944 | /* Increase the height as needed */ 1945 | border-radius: 5px; 1946 | border: 2px solid var(--main-color); 1947 | background-color: var(--bg-color); 1948 | box-shadow: 4px 4px var(--main-color); 1949 | font-size: 15px; 1950 | font-weight: 600; 1951 | color: var(--font-color); 1952 | padding: 10px 10px; 1953 | /* Adjust padding as needed */ 1954 | outline: none; 1955 | } 1956 | 1957 | .form { 1958 | --input-focus: #2d8cf0; 1959 | --font-color: #323232; 1960 | --font-color-sub: #666; 1961 | --bg-color: #fff; 1962 | --main-color: #323232; 1963 | padding: 20px; 1964 | background: lightgrey; 1965 | display: flex; 1966 | flex-direction: column; 1967 | align-items: flex-start; 1968 | justify-content: center; 1969 | gap: 20px; 1970 | height: 300px; 1971 | width: 100%; 1972 | border-radius: 5px; 1973 | border: 2px solid var(--main-color); 1974 | box-shadow: 4px 4px var(--main-color); 1975 | } 1976 | } 1977 | 1978 | @media screen and (min-width:581px) and (max-width:800px) { 1979 | .spinner { 1980 | display: none; 1981 | } 1982 | 1983 | .work-loader { 1984 | display: none; 1985 | } 1986 | 1987 | .edu-loader { 1988 | display: none; 1989 | } 1990 | 1991 | .container-1 { 1992 | display: none; 1993 | } 1994 | 1995 | .center-body { 1996 | display: none; 1997 | } 1998 | 1999 | .description { 2000 | display: flex; 2001 | padding: 20px; 2002 | gap: 30px; 2003 | } 2004 | 2005 | .bar { 2006 | width: 100%; 2007 | display: flex; 2008 | justify-content: space-between; 2009 | height: 8vh; 2010 | padding: 0px 30px; 2011 | } 2012 | 2013 | .inner-box { 2014 | height: 90%; 2015 | width: 90%; 2016 | gap: 55px; 2017 | display: flex; 2018 | flex-direction: column-reverse; 2019 | justify-content: center; 2020 | align-items: center; 2021 | } 2022 | 2023 | #left-box { 2024 | display: flex; 2025 | flex-direction: column; 2026 | gap: 20px; 2027 | width: 80%; 2028 | /* background: #000; */ 2029 | } 2030 | 2031 | #rigth-box { 2032 | height: 80%; 2033 | width: 50%; 2034 | background: #8f1c1c; 2035 | border-radius: 50%; 2036 | position: relative; 2037 | border-color: #eeeeee; 2038 | border-width: 8px; 2039 | } 2040 | 2041 | .card { 2042 | width: 100%; 2043 | height: 70px; 2044 | display: flex; 2045 | align-items: center; 2046 | justify-content: center; 2047 | gap: 20px; 2048 | box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.055); 2049 | } 2050 | 2051 | .socialContainer { 2052 | width: 62px; 2053 | height: 62px; 2054 | background-color: rgb(44, 44, 44); 2055 | display: flex; 2056 | align-items: center; 2057 | justify-content: center; 2058 | overflow: hidden; 2059 | transition-duration: .3s; 2060 | } 2061 | } --------------------------------------------------------------------------------