Portfolio web app layout

by Codi Bezouka-Smith

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.7.3/tailwind.min.css">
<div id="animations" class="container mx-auto">
	<section class="slide-animations bg-gray-400 p-4">
		<h2 class="font-semibold text-3xl">Sliding animations</h2>
		<div class="flex">
			<div class="box slide-up w-1/2 text-center py-2 m-2 bg-blue-400">slide up</div>
			<div class="box slide-down w-1/2 text-center py-2 m-2 bg-blue-500">slide down</div>
		</div>
		
		<div class="flex">
			<div class="box slide-left w-1/2 text-center py-2 m-2 bg-red-400">slide left</div>
			<div class="box slide-right w-1/2 text-center py-2 m-2 bg-red-500">slide right</div>
		</div>
	</section>
	
	<section class="wiggle-animations bg-gray-300 p-4">
		<h2 class="font-semibold text-3xl">Wiggle animations</h2>
		<div class="flex">
			
		</div>
	</section>
</div>

<div class="test"></div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "Roboto", sans-serif; }

.box {
	-webkit-transition: background-position 300ms linear;
	-moz-transition: background-position 300ms linear;
	transition: background-position 300ms linear;
}

.box:hover {cursor: pointer;}

.slide-up, .slide-down {
	background: linear-gradient(to bottom, transparent 50%, #1A1A1A 50%);
	background-size: 100% 200%;
}
.slide-left, .slide-right {
	background: linear-gradient(to right, transparent 50%, #1A1A1A 50%);
	background-size: 200% 100%;
}

.slide-up:hover {
	background-position: 0 100%;
}
.slide-down:hover {
	background-position: 0 -100%;
}
.slide-left:hover {
	background-position: 100% 0;
}
.slide-right:hover {
	background-position: -100% 0;
}