<a href="https://front.codes/" class="hover-target logo" target="_blank">
		<img src="https://assets.codepen.io/1462889/fcy.png" alt="">
	</a>	

	<div class="section-text-scroll fade-top"><span>- scroll -</span></div>	
	<div class="section-text-center">
		<div id=container-c>
			<div id=circle>
				<svg version=1.1 xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink x=0px y=0px width=300px height=300px viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space=preserve>
					<defs>
						<path id=circlePath d="M 150, 150 m -60, 0 a 60,60 0 0,1 120,0 a 60,60 0 0,1 -120,0 "/>
					</defs>
					<circle cx=150 cy=100 r=75 fill=none />
					<g>
						<use xlink:href=#circlePath fill=none />
						<text>
							<textPath xlink:href=#circlePath>Let's build awesome together! •</textPath>
						</text>
					</g>
				</svg>
			</div>
		</div>
	</div>					
	<div class="progress-wrap">
		<svg class="progress-circle" width="100%" height="100%" viewBox="-10 -10 120 120">
			<path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
		</svg>
	</div>

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');
:root {
  --blue: #102770;
  --yellow: #ffeba7;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
::selection {
  color: var(--yellow);
  background-color: var(--blue);
}
::-moz-selection {
  color: var(--yellow);
  background-color: var(--blue);
}
body{
	background-color: var(--blue);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  height: 400vh;
  font-family: 'Roboto', sans-serif;
}
.section-text-scroll {
  position: fixed;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  display: block;
  z-index: 100;
  text-align: center;
  pointer-events: none;
  font-family: 'Roboto', sans-serif;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 3px; 
  font-weight: 900; 
  color: var(--yellow);
}
.section-text-scroll span {
  display: block;
  animation: scroll 1.6s linear infinite;
}
@keyframes scroll {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
.section-text-center {
  position: fixed;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  display: block;
  z-index: 1;
  margin: 0 auto;
  text-align: center;
}
#container-c { 
  margin: 0 auto;
  text-align: center;
  position: relative; 
  width: 240px; 
  overflow: hidden; 
  display: inline-block; 
  transform: rotate(89deg);
}
#circle { 
  position: relative; 
  width: 100%; 
  padding-bottom: 100%; 
  overflow: hidden; 
}
#circle text { 
  font-family: 'Roboto', sans-serif;
  font-size: 16px; 
  font-weight: 700; 
  letter-spacing: 4.6px; 
  fill: var(--yellow);
}
#circle svg { 
  position: absolute; 
  left: -40%; 
  top: -40%; 
  width: 180%; 
  height: 180%;
}

.progress-wrap {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 250px; 
  height: 250px;
  display: block;
  border-radius: 50%;
  z-index: 10;
  pointer-events: none;
  transition: all 200ms linear;
}
.progress-wrap svg { 
  width: 224px; 
  height: 224px;
  margin-top: 13px;
  margin-left: 13px;
  transform: rotate(-10deg);
}
.progress-wrap svg path { 
  fill: none; 
}
.progress-wrap svg.progress-circle path {
  stroke: var(--blue);
  stroke-width: 18;
  box-sizing:border-box;
  transition: all 200ms linear;
}
.logo {
	position: fixed;
	top: 25px;
	left: 25px;
	display: block;
	z-index: 1000;
}
.logo img {
	height: 26px;
	width: auto;
	display: block;
}
.logo:before {
  display: none;
}

	function scrollBanner() {
	  $(document).on('scroll', function(){
      	var scrollPos = $(this).scrollTop();
        	$('.fade-top').css({
          		'opacity' : 1-(scrollPos/100)
        	});
      	});    
	  }
	scrollBanner();	
		
	$(document).ready(function(){"use strict";
		var progressPath = document.querySelector('.progress-wrap path');
		var pathLength = progressPath.getTotalLength();
		progressPath.style.transition = progressPath.style.WebkitTransition = 'none';
		progressPath.style.strokeDasharray = pathLength + ' ' + pathLength;
		progressPath.style.strokeDashoffset = pathLength;
		progressPath.getBoundingClientRect();
		progressPath.style.transition = progressPath.style.WebkitTransition = 'stroke-dashoffset 10ms linear';		
		var updateProgress = function () {
			var scroll = $(window).scrollTop();
			var height = $(document).height() - $(window).height();
			var progress = pathLength + (scroll * pathLength / height);
			progressPath.style.strokeDashoffset = 308 - progress;
		}
		updateProgress();
		$(window).scroll(updateProgress);			
	});