<nav>
	<ul class="nav">
		<li class="nav__item"><a href=""><img src="" alt=""></a></li>
		<li class="nav__item"><a href=""></a>About us</li>
		<li class="nav__item"><a href="">Services</a></li>
		<li class="nav__item"><a href="">News</a></li>
		<li class="nav__item"><a href="">Contact</a></li>
	</ul>
</nav>
<div class="hero">
	
	<div class="hero__item">
		<h1 class="title">Oh my God</h1>
	</div>
	<div class="hero__item">
		
		<div class="boxes">
			<div><img src="https://picsum.photos/324/410" alt=""></div>
			<div class="boxes__box"></div>
			<div class="boxes__box"></div>
			<div class="boxes__box"></div>
			<div class="boxes__box"></div>
			<div class="boxes__box"></div>
			<div class="boxes__box"></div>
		</div>
	</div>
	
</div>
<div class="content">
	<div class="site-container">
		<h2>Oh my God it's so nice to meet you</h2>
		<p>Quisque ut nisi. Phasellus gravida semper nisi. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci.</p>
	</div>
</div>

*, :after, :before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
body {
     margin: 0;
}
h1, h2, h3, p, a, ul {
     font-family: 'Raleway', sans-serif;
	color: #000;
}
.site-container {
	max-width: 1700px;
	margin: 0 auto;
	padding: 20px;
}

$box: #0D284F;


nav {
	position:fixed;
	width: 100%;
	ul {
		list-style: none;
		text-align: center;
		li {
			display: inline-block;
			margin-right: 60px;
			position:relative;
			top: -100px;
			&:last-child {
				margin-right: 0;
			}
			a {
				text-decoration: none;
			}
		}
	}
}
.hero {
	background-color: #f5f5f5;
	width: 100%;
	height: 100vh;
	display:flex;
	justify-content:space-between;
	align-items:center;
	overflow:hidden;
	&__item {
		padding-left: 80px;
		&:last-child {
			padding-left: 0;
			padding-right: 180px;
		}
		.title {
			// opacity: 1;
			position:relative;
		}
		h1 {
			font-size: 90px;
			position:relative;
		}
		img {
			z-index: 2;
			position:relative;
			opacity: 0;
			right: -1000px;
		}
	}
}

.boxes {
	position:relative;
	&__box {
		min-width: 120px;
		min-height: 120px;
		background-color: $box;
		position: absolute;
		top: -70px;
		left: -20px;
		&:first-child {
			top: -210px;
			left: 0;
		}
		&:nth-child(2) {
			background-color: lighten($box, 5%);
			bottom: -50px;
			left: -90px;
			top:auto;
			height: 240px;
			width: 240px
		}
		&:nth-child(3) {
			background-color: lighten($box, 4%);
			top: -50px;
			right: 40px;
			left: auto;
			height: 200px;
			width: 200px;
		}
		&:nth-child(4) {
			background-color: lighten($box, 7%);
			top: -30px;
			left:-120px;
			height:220px;
			width:220px;
				
		}
		&:nth-child(5) {
			background-color: lighten($box, 2%);
			right: -50px;
			top: auto;
			left:auto;
			bottom:-40px;
			height: 170px;
			width: 170px;
		}
		
	}
}

window.addEventListener('load', function () {
 init();
});

function init(){
	let toolTimeline = new TimelineMax();
	let duration = .9;
	toolTimeline.from('h1', duration, {
		opacity:0,
		// scale:10,
		ease:Linear.easeIn
	}, .8)
	toolTimeline.staggerFrom('.boxes__box', duration, {
		opacity:0,
		scale:0,
		ease:Back.easeInOut
	}, .1 , .2);
	
	toolTimeline.to('.boxes img', duration, {
		opacity:1,		
		right:0,
		ease:Back.easeOut
	}, .4);
	
	toolTimeline.staggerTo('li', duration, {
		
		top:0,
		ease:Back.easeOut
	}, .1, .9);
	
};