html, body { scroll-behavior: smooth; } section::after { position: absolute; bottom: 0; left: 0; content: ”; width: 100%; height: 0%; } .demo a { position: absolute; bottom: 20%; right: 0%; z-index: 2; display: inline-block; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); color: #423737; font: normal 400 20px/1 ‘Josefin Sans’, sans-serif; letter-spacing: .1em; text-decoration: none; transition: opacity .3s; left: 86%; } .demo a:hover { opacity: .5; } #section01 a { padding-top: 60px; } #section01 a span { position: absolute; top: 0; left: 50%; width: 24px; height: 24px; margin-left: -12px; border-left: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); box-sizing: border-box; } #section02 a span { position: absolute; top: -100%; left: 50%; width: 46px; height: 46px; margin-left: -23px; border: 1px solid #fff; border-radius: 100%; box-sizing: border-box; } #section02 a span::after { position: absolute; top: 50%; left: 50%; content: ”; width: 16px; height: 16px; margin: -12px 0 0 -8px; border-left: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); box-sizing: border-box; } #section01 a span { position: absolute; background: url(‘https://y-pern.org.uk/wp-content/uploads/sites/145/2023/12/Screenshot_11.png’); top: 0; background-repeat: no-repeat; background-size: cover; width: 20%; height: 200px; margin-left: 0px; border-left: none; border-bottom: none; -webkit-transform: rotate(-45deg); transform: rotate(0deg); }

$(function() { $(‘a[href*=#]’).on(‘click’, function(e) { e.preventDefault(); $(‘html, body’).animate({ scrollTop: $($(this).attr(‘href’)).offset().top }, 1500, ‘easeInOutExpo’); }); });