diff --git a/css/media.css b/css/media.css index e6e2d0f..a0d0c3f 100644 --- a/css/media.css +++ b/css/media.css @@ -174,7 +174,7 @@ width: 100%; } - #home #scroll-to-top { + #home .scroll-to-top { bottom: 1.75rem; right: 1.75rem; padding: .65rem .8rem; diff --git a/css/style.css b/css/style.css index d7e9fbe..c31f923 100755 --- a/css/style.css +++ b/css/style.css @@ -209,7 +209,7 @@ nav .nav-l ul .nav-links a { color: white; padding: 8px 16px; text-decoration: none; - transition: color .3s; + transition: color .3s ease; } nav .nav-l ul .nav-links a.active { @@ -364,7 +364,7 @@ nav .nav-r a { padding: .9rem; padding-right: 8rem; margin-right: 3px; - transition: border-color .2s; + transition: border-color .2s ease; } #home .contact-box .contact-bar form .text-field:focus { @@ -386,9 +386,8 @@ nav .nav-r a { cursor: url('/assets/images/link.png'), pointer; } -#home #scroll-to-top { +#home .scroll-to-top { z-index: 99; - display: none; position: fixed; bottom: 2rem; right: 2.5rem; @@ -398,9 +397,17 @@ nav .nav-r a { padding: .7rem .85rem; border: 1px solid rgba(255, 255, 255, .24); border-radius: 12px; + opacity: 0; + visibility: hidden; + transition: all .3s ease; backdrop-filter: blur(24px); } +#home .scroll-to-top-show { + opacity: 1; + visibility: visible; +} + /*----------------------------------------------------*/ #portfolio { @@ -729,7 +736,7 @@ nav .nav-r a { border: 1px solid rgba(255, 255, 255, .12); border-radius: 25px; box-shadow: rgb(24, 26, 27) 3px -3px 10px 0px inset; - transition: ease .5s; + transition: all .5s ease; } #contact .table .table-r .container .card > img { @@ -781,7 +788,7 @@ nav .nav-r a { line-height: 1.5; color: var(--text); text-decoration: none; - transition: color .3s; + transition: color .3s ease; } #contact .table .table-r .container .card.one .content .block-bottom { @@ -795,7 +802,7 @@ nav .nav-r a { line-height: 2; color: var(--text); text-decoration: none; - transition: color .3s; + transition: color .3s ease; } #contact .table .table-r .container .card.one .content .block-bottom p { @@ -913,7 +920,7 @@ footer .container .wrapper-r p { footer .container .wrapper-r p a { color: #ffffffb3; font-size: .875rem; - transition: color .3s; + transition: color .3s ease; text-decoration: none; } diff --git a/index.html b/index.html index 0e98dc9..7173961 100644 --- a/index.html +++ b/index.html @@ -60,7 +60,7 @@

to You, Mate

- +
@@ -198,7 +198,9 @@

Nitin Soni

NITIN SONI

-

Sohna
Gurugram, HR 122103

+

© Nitin Soni.

+ Sohna
+ Gurugram, HR 122103

diff --git a/js/script.js b/js/script.js index 10bdc67..de1f661 100644 --- a/js/script.js +++ b/js/script.js @@ -34,16 +34,15 @@ window.addEventListener('scroll', function () { }); }); - // Show the scroll-to-top button when user scrolls down 20px -let btnTop = document.getElementById('scroll-to-top'); +let btnTop = document.querySelector('.scroll-to-top'); window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) { - btnTop.style.display = 'block'; + btnTop.classList.add('scroll-to-top-show'); } else { - btnTop.style.display = 'none'; + btnTop.classList.remove('scroll-to-top-show'); } } @@ -53,7 +52,6 @@ function topFunction() { document.documentElement.scrollTop = 0; // for chrome, firefox, ie and opera } - // 1st nav button of portfolio card container gets in focus on site load window.onload = function(){ document.getElementById('button1').classList.add('button-focus'); @@ -89,7 +87,6 @@ function scrollToCard(index) { cardContainer.scrollTo({ left: index * (cardWidth + marginBetweenItems) }); } - // Swap cards when user click non-front card const one = document.querySelector('.one'); const two = document.querySelector('.two'); @@ -107,3 +104,6 @@ two.addEventListener('click', function() { one.classList.remove('front'); } }); + +// Dynamically change year in copyright text +document.querySelector('.year').textContent = new Date().getFullYear();