├── README.md ├── images ├── bg.png ├── close.png ├── img1.png ├── menu.png ├── work1.jpg ├── work2.jpg ├── work3.jpg ├── work4.jpg ├── work5.jpg └── work6.jpg ├── index.html ├── script.js └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # website-using-html-css-javascript -------------------------------------------------------------------------------- /images/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SameerBadriddinov/portfolio-website-html-css-js/b903b6ac1a279b9d1e4247f5c8502532d03c8e13/images/bg.png -------------------------------------------------------------------------------- /images/close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SameerBadriddinov/portfolio-website-html-css-js/b903b6ac1a279b9d1e4247f5c8502532d03c8e13/images/close.png -------------------------------------------------------------------------------- /images/img1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SameerBadriddinov/portfolio-website-html-css-js/b903b6ac1a279b9d1e4247f5c8502532d03c8e13/images/img1.png -------------------------------------------------------------------------------- /images/menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SameerBadriddinov/portfolio-website-html-css-js/b903b6ac1a279b9d1e4247f5c8502532d03c8e13/images/menu.png -------------------------------------------------------------------------------- /images/work1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SameerBadriddinov/portfolio-website-html-css-js/b903b6ac1a279b9d1e4247f5c8502532d03c8e13/images/work1.jpg -------------------------------------------------------------------------------- /images/work2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SameerBadriddinov/portfolio-website-html-css-js/b903b6ac1a279b9d1e4247f5c8502532d03c8e13/images/work2.jpg -------------------------------------------------------------------------------- /images/work3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SameerBadriddinov/portfolio-website-html-css-js/b903b6ac1a279b9d1e4247f5c8502532d03c8e13/images/work3.jpg -------------------------------------------------------------------------------- /images/work4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SameerBadriddinov/portfolio-website-html-css-js/b903b6ac1a279b9d1e4247f5c8502532d03c8e13/images/work4.jpg -------------------------------------------------------------------------------- /images/work5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SameerBadriddinov/portfolio-website-html-css-js/b903b6ac1a279b9d1e4247f5c8502532d03c8e13/images/work5.jpg -------------------------------------------------------------------------------- /images/work6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SameerBadriddinov/portfolio-website-html-css-js/b903b6ac1a279b9d1e4247f5c8502532d03c8e13/images/work6.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Portfolio 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 |
16 | 17 |
18 | Samar 19 |
20 |
21 | home 22 | about 23 | skills 24 | services 25 | work 26 | contact 27 |
28 |
29 | 30 |
31 |
32 |

Hello, I'm
Samar Badriddinov

33 |
34 |

Blogger

35 |

Web Developer

36 |

Youtuber

37 |
38 | See My Work 39 |
40 | 41 | 42 | 43 |
44 |
45 |
46 | 47 |
48 |
49 |
About Me
50 |
51 |
52 |
53 |
54 | 55 |
56 |
57 |
58 |

Hey there! I'm Samar Badriddinov

59 |

Officiis, eos pariatur esse velit veritatis reiciendis cum quod possimus quas? Modi adipisci odit voluptatem tempora error perferendis quisquam, dolores iure, ullam id nam quaerat dolor incidunt, ratione aliquam deserunt eaque explicabo nostrum quo veniam expedita distinctio dolorem. Aspernatur consectetur eum vitae nobis.


60 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque corporis ullam deserunt debitis. Rerum necessitatibus accusantium, ipsa, officiis, eos pariatur esse velit veritatis reiciendis cum quod possimus quas? Modi adipisci odit voluptatem tempora error perferendis quisquam, dolores iure, ullam id nam

61 | See More 62 |
63 |
64 |
65 | 66 |
67 |
68 |
My Skills
69 |
70 |
71 |
72 |

My Skills and Experiences

73 |

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

74 | See More 75 |
76 |
77 |
78 |
79 | HTML 80 | 95% 81 |
82 |
83 |
84 |
85 |
86 | CSS 87 | 85% 88 |
89 |
90 |
91 |
92 |
93 | JavaScript 94 | 80% 95 |
96 |
97 |
98 |
99 |
100 | jQuery 101 | 80% 102 |
103 |
104 |
105 |
106 |
107 | PHP 108 | 70% 109 |
110 |
111 |
112 |
113 |
114 |
115 | 116 |
117 |
118 |
My Services
119 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde molestias accusamus modi molestiae praesentium ipsam doloribus repudiandae, reiciendis nesciunt consectetur distinctio dignissimos, vel suscipit ipsum consequatur adipisci sed sint provident?

120 |
121 |
122 |
123 |
124 | 125 |
126 |
127 |

Web Design

128 |

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

129 |
130 |
131 |
132 |
133 | 134 |
135 |
136 |

Web Developer

137 |

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

138 |
139 |
140 |
141 |
142 | 143 |
144 |
145 |

Youtuber

146 |

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

147 |
148 |
149 |
150 |
151 | 152 |
153 |
154 |
My Work
155 |
156 |
157 |
158 |
159 | 160 |
161 |
162 |
163 |
164 | 165 |
166 |
167 |
168 |
169 | 170 |
171 |
172 |
173 |
174 | 175 |
176 |
177 |
178 |
179 | 180 |
181 |
182 |
183 |
184 | 185 |
186 |
187 |
188 | See All 189 |
190 |
191 |
192 | 193 |
194 |
195 |
Contact Me
196 |
197 |
198 |
199 |
200 |
201 | 202 |
203 |
204 |

Address

205 | Tashkent City 206 |
207 |
208 |
209 |
210 | 211 |
212 |
213 |

Phone

214 | + 1111 11 11 215 |
216 |
217 |
218 |
219 | 220 |
221 |
222 |

Email Address

223 | samar@gmail.com 224 |
225 |
226 |
227 |
228 | 229 |
230 |
231 |

Website

232 | MyPortfolio.org 233 |
234 |
235 |
236 |
237 |
238 |

Send Message

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