<!-- Please ❤ this if you like it! -->
<!-- Follow Me https://codepen.io/designfenix -->

<div id="wrapper">
	<header>
		<div class="container-fluid">
			<div class="row">
				<div class="col-4-sm"><a href="#" class="btn"><i class="gg-layout-grid"></i></a></div>
				<div class="col-4-sm center">
					<h1 class="page-title">Home</h1>
				</div>
				<div class="col-4-sm right">
					<div class="profile"></div>
				</div>
			</div>
		</div>
	</header>
	<section>
		<div class="container-fluid">
			<!-- HERO CARD -->
			<div class="row">
				<div class="col-12">
					<div class="hero-card">
						<div class="content-image">
							<img src="https://design-fenix.com.ar/codepen/ui-store/speaker.png" alt="">
						</div>
						<div class="card-content">
							<h3>Hello Nanase!</h3>
							<p>Explore new gadgets</p>
							<div class="content-input">
								<i class="gg-search"></i>
								<input type="text" placeholder="Search">
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- Category title -->
			<div class="row margin-vertical">
				<div class="col-6-sm">
					<h3 class="segment-title left">Electronics</h3>
				</div>
				<div class="col-6-sm right">
					<a href="#" class="btn btn-primary">Popular <img src="https://design-fenix.com.ar/codepen/ui-store/dropdown.png" alt=""></a>
				</div>
			</div>
			<!-- Products grid -->
			<div class="row">
				<div class="col-6-sm">
					<div class="product">
						<img src="https://i.pinimg.com/originals/ad/93/b2/ad93b255e78fba7030ef006a2d310315.png" alt="">
						<div class="detail">
							<h4 class="name">Headphones</h4>
							<div class="detail-footer">
								<div class="price left">$66,99</div>
								<div class="review right"><img src="https://design-fenix.com.ar/codepen/ui-store/stars.png" alt="">4,3</div>
							</div>
						</div>
						<div class="star"><img src="https://design-fenix.com.ar/codepen/ui-store/stars.png" alt=""></div>
					</div>
				</div>
				<div class="col-6-sm">
					<div class="product">
						<img src="https://pngimg.com/uploads/gamepad/gamepad_PNG54.png" alt="">
						<div class="detail">
							<h4 class="name">Controller</h4>
							<div class="detail-footer">
								<div class="price left">$116,99</div>
								<div class="review right"><img src="https://design-fenix.com.ar/codepen/ui-store/stars.png" alt="">4,5</div>
							</div>
						</div>
						<div class="star"><img src="https://design-fenix.com.ar/codepen/ui-store/stars.png" alt=""></div>
					</div>
				</div>
			</div>
			<!-- Category title -->
			<div class="row margin-vertical">
				<div class="col-6-sm">
					<h3 class="segment-title left">Ear buds</h3>
				</div>
				<div class="col-6-sm right">
					<a href="#" class="btn btn-primary">Category <img src="https://design-fenix.com.ar/codepen/ui-store/dropdown.png" alt=""></a>
				</div>
			</div>
			<!-- Feature Product -->
			<div class="row">
				<div class="col-12">
					<div class="featured-product">
						<div class="content-img">
							<img src="https://design-fenix.com.ar/codepen/ui-store/earbuds.png" alt="">
						</div>
						<div class="product-detail">
							<h4 class="product-name">Earbuds Beams Pro</h4>
							<p class="price">$89.00</p>
						</div>
						<div class="star"><img src="https://design-fenix.com.ar/codepen/ui-store/stars.png" alt=""><span class="review">4.5</span></div>
					</div>
				</div>
			</div>
		</div>
	</section>
</div>

<p class="dev">Developed with ❤ by <a href="https://codepen.io/designfenix/" target="_blank">Fernando Cohen</a> | Design by <a href="https://www.instagram.com/afshinase/" target="_blank">Afshin Nanase</a></p>

@import url("https://fonts.googleapis.com/css2?family=Poppins:[email protected];400;600&display=swap");
:root {
	/*Animations*/
	--delay-titles: 0.3s;
	--delay-product: 0.6s;
	--delay-product-image: 1s;
	--delay-product-detail: 1.1s;
	--delay-product-star: 1.3s;
	/*icons Size multiply*/
	--ggs: 1.5;
	/*Colors*/
	--color-light: #faf4f4;
	--color-dark: #17171f;
	--color-dark-rgb: 23, 23, 31;
	/*Font Familiy*/
	--font-family: "Poppins", sans-serif;
}

body {
	background-color: var(--color-light);
	font-family: var(--font-family);
	.margin-vertical {
		margin: 10px 0;
	}
	.col-6-sm {
		animation: fade-in-bottom 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both
			var(--delay-titles);
	}
}
#wrapper {
	width: 420px;
	height: 720px;
	margin: 40px auto;
	background: var(--color-dark);
	border-radius: 45px;
	overflow-y: auto;
	overflow-x: hidden;
	box-shadow: -40px 50px 40px -20px rgb(var(--color-dark-rgb) / 15%);
	@media (max-width: 540px) {
		margin: 0px;
		width: 100%;
		border-radius: 0;
		padding: 0;
		height: 100vh;
	}
	header {
		z-index: 5;
		position: sticky;
		top: 0;
		background: linear-gradient(
			0deg,
			rgba(0, 0, 0, 0) 0%,
			rgba(var(--color-dark-rgb), 0.8) 25%,
			rgba(var(--color-dark-rgb), 1) 100%
		);
		color: var(--color-light);
		padding: 30px 25px;
		padding-bottom: 15px;
		.page-title {
			margin: 0;
			font-size: 16px;
			color: var(--color-light);
			padding: 5px 0;
		}
		.profile {
			display: inline-block;
			width: 40px;
			height: 40px;
			border-radius: 15px;
			background: url("https://i.pravatar.cc/50?img=45") no-repeat center center;
			background-size: cover;
			position: relative;
			&:before {
				width: 7px;
				height: 7px;
				border-radius: 100%;
				content: "";
				position: absolute;
				top: 0;
				display: block;
				right: 0;
				box-shadow: 0 0 0 3px var(--color-dark);
				background-color: #e7d583;
			}
		}
	}
	section {
		padding: 0px 25px;
	}
	.hero-card {
		margin: 20px 0;
		height: 160px;
		box-shadow: inset 1px 2px 0 rgba(255, 255, 255, 0.4);
		border-radius: 35px;
		animation: flip-in-hor-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
		background: radial-gradient(
				farthest-side at center center,
				#eed8db 5%,
				transparent 180px
			),
			radial-gradient(
				farthest-side at bottom center,
				#f0c1bb 5%,
				transparent 180px
			),
			radial-gradient(farthest-side at left bottom, #ebc6c0 5%, transparent 180px),
			radial-gradient(farthest-side at left center, #dabbc3 5%, transparent 180px),
			radial-gradient(farthest-side at left top, #e7cdce 5%, transparent 180px),
			radial-gradient(farthest-side at right top, #bcb7d7 5%, transparent 180px),
			radial-gradient(farthest-side at right bottom, #bcb7d7 5%, transparent),
			radial-gradient(farthest-side at right center, #bcb7d7 5%, transparent),
			radial-gradient(farthest-side at top center, #f6ede8 60%, transparent 500px);
		&:before {
			content: "";
			display: block;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: -1;
			transform: scaleY(0.8);
			filter: blur(35px);
			background: radial-gradient(
					farthest-side at center center,
					#eed8db 5%,
					transparent 180px
				),
				radial-gradient(
					farthest-side at bottom center,
					#f0c1bb 5%,
					transparent 180px
				),
				radial-gradient(farthest-side at left bottom, #ebc6c0 5%, transparent 180px),
				radial-gradient(farthest-side at left center, #dabbc3 5%, transparent 180px),
				radial-gradient(farthest-side at left top, #e7cdce 5%, transparent 180px),
				radial-gradient(farthest-side at right top, #bcb7d7 5%, transparent 180px),
				radial-gradient(farthest-side at right bottom, #bcb7d7 5%, transparent),
				radial-gradient(farthest-side at right center, #bcb7d7 5%, transparent),
				radial-gradient(farthest-side at top center, #f6ede8 60%, transparent 500px);
			z-index: 0;
		}
		.content-image {
			position: absolute;
			right: 0;
			top: 0;
			text-align: right;
			img {
				width: 60%;
				animation: float 6s ease-in-out infinite;
				margin-right: -10%;
				margin-top: -20px;
			}
		}
		.card-content {
			padding: 25px;
			z-index: 1;
			position: relative;
			h3 {
				margin: 0;
				font-weight: 600;
				font-family: var(--font-family);
			}
			p {
				margin: 0;
				font-family: var(--font-family);
				font-size: 14px;
				font-weight: 400;
			}
			.content-input {
				margin-top: 10px;
				border-radius: 15px;
				background: white;
				max-width: 120px;
				padding: 13px;
				display: flex;
				flex-direction: row;
				box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
				i {
					--ggs: 0.6;
					margin: 0;
					color: #b3aeab;
					flex: 0 0 16px;
				}
				input {
					padding: 0 10px;
					font-family: var(--font-family);
					width: 100%;
					outline: none;
					border: 0;
					color: #b3aeab;
					font-size: 12px;
				}
			}
		}
	}
	.segment-title {
		color: var(--color-light);
		font-family: var(--font-family);
		font-size: 18px;
		font-weight: 600;
		margin: 5px;
	}
	.btn {
		display: inline-flex;
		color: var(--color-light);
		padding: 15px;
		border-radius: 10px;
		box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
		background: transparent;
		transition: ease all 0.3s;
		text-decoration: none;
		font-family: var(--font-family);
		font-weight: 600;
		font-size: 12px;

		i {
			color: var(--color-light);
		}
		&:hover {
			background-color: var(--color-light);
			box-shadow: 0 0 0 1px rgba(255, 255, 255, 0);
			i {
				color: var(--color-dark);
			}
		}
	}
	.btn-primary {
		position: relative;
		padding: 12px 18px 12px 25px;
		color: var(--color-dark);
		border-radius: 18px;
		transition: ease all 0.3s;
		vertical-align: middle;
		background: radial-gradient(
				farthest-side at bottom center,
				#f0c1bb 25%,
				transparent 75%
			),
			radial-gradient(farthest-side at left bottom, #ebc6c0 25%, transparent 75%),
			radial-gradient(farthest-side at left center, #dabbc3 25%, transparent 75%),
			radial-gradient(farthest-side at left top, #e7cdce 25%, transparent 75%),
			radial-gradient(farthest-side at right top, #bcb7d7 25%, transparent 75%),
			radial-gradient(farthest-side at right bottom, #bcb7d7 25%, transparent 75%),
			radial-gradient(farthest-side at right center, #bcb7d7 25%, transparent 75%),
			radial-gradient(farthest-side at top center, #f6ede8 60%, transparent 100%),
			radial-gradient(
				farthest-side at center center,
				#eed8db 100%,
				transparent 100%
			);
		z-index: 2;
		display: inline-block;
		i {
			color: var(--color-dark);
			--ggs: 0.6;
			flex: 0 0 1;
			height: 14px;
		}
		img {
			width: 8px;
			height: 7px;
			vertical-align: middle;
			margin-left: 5px;
		}
		&:before {
			pointer-events: none;
			content: "";
			display: block;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: -1;
			transition: ease all 0.3s;
			transform: scaleY(0.7);
			opacity: 0.6;
			filter: blur(35px);
			background: radial-gradient(
					farthest-side at bottom center,
					#f0c1bb 25%,
					transparent 75%
				),
				radial-gradient(farthest-side at left bottom, #ebc6c0 25%, transparent 75%),
				radial-gradient(farthest-side at left center, #dabbc3 25%, transparent 75%),
				radial-gradient(farthest-side at left top, #e7cdce 25%, transparent 75%),
				radial-gradient(farthest-side at right top, #bcb7d7 25%, transparent 75%),
				radial-gradient(farthest-side at right bottom, #bcb7d7 25%, transparent 75%),
				radial-gradient(farthest-side at right center, #bcb7d7 25%, transparent 75%),
				radial-gradient(farthest-side at top center, #f6ede8 60%, transparent 100%),
				radial-gradient(
					farthest-side at center center,
					#eed8db 100%,
					transparent 100%
				);
		}
		&:hover {
			transform: scale(1.05);
		}
	}
	.product {
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(#2f2e36, #313038);
		border-radius: 18px;
		min-height: 200px;
		font-family: var(--font-family);
		font-size: 18px;
		font-weight: 600;
		box-shadow: inset 0px 1.5px 0 1px rgba(255, 255, 255, 0.1);
		color: var(--color-light);
		position: relative;
		animation: fade-in-bottom 0.6s ease-out var(--delay-product);
		animation-fill-mode: backwards;
		& > img {
			max-width: 130px;
			max-height: 130px;
			margin-top: -35px;
			animation: fade-in-bottom 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both
				var(--delay-product-image);
		}
		.star {
			width: 45px;
			height: 45px;
			position: absolute;
			bottom: 0;
			right: 0;
			background-color: var(--color-dark);
			border-radius: 18px 0 0 0;
			display: flex;
			align-items: center;
			justify-content: center;
			//animation: scale-in-br 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both var(--delay-product-star);
			img {
				width: 24px;
				box-shadow: 0 0 5px -5px #faa827;
			}
			i {
				color: var(--color-light);
				--ggs: 1;
				transition: ease all 0.3s;
			}
			&:hover {
				img {
					animation: wobble-hor-bottom 1s both;
					cursor: pointer;
				}
				i {
					animation: wobble-hor-bottom 1s both;
					cursor: pointer;
					color: pink;
				}
			}
			&:before {
				content: "";
				position: absolute;
				left: -20px;
				bottom: 0;
				background: #313038;
				width: 20px;
				height: 20px;
				border-radius: 18px;
				box-shadow: 10px 10px 0 0 var(--color-dark);
			}
			&:after {
				content: "";
				position: absolute;
				right: 0;
				top: -20px;
				background: #313038;
				width: 20px;
				height: 20px;
				border-radius: 18px;
				box-shadow: 10px 10px 0 0 var(--color-dark);
			}
		}
		.detail {
			position: absolute;
			left: 0;
			z-index: 3;
			bottom: 0;
			width: calc(100% - 65px);
			padding: 10px;
			animation: swing-in-left-fwd 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275)
				both var(--delay-product-detail);
			.name {
				font-family: var(--font-family);
				font-size: 14px;
				font-weight: 600;
				margin: 0;
				color: var(--color-light);
			}
			.detail-footer {
				display: flex;

				.review {
					display: flex;
					color: #f7ad32;
					font-family: var(--font-family);
					font-size: 12px;
					font-weight: 600;
					width: 40%;
					align-items: center;
					img {
						width: 12px;
						height: 12px;
						vertical-align: middle;
						display: inline-block;
						margin-right: 5px;
					}
					i {
						margin-right: 5px;
						color: #f7ad32;
						--ggs: 0.7;
						transition: ease all 0.3s;
					}
				}
				.price {
					color: #626169;
					font-family: var(--font-family);
					font-size: 14px;
					font-weight: 400;
					width: 60%;
				}
			}
		}
	}
	.featured-product {
		animation: fade-in-bottom 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both
			var(--delay-product-detail);
		box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
		border-radius: 35px;
		display: flex;
		place-content: stretch;
		margin-bottom: 30px;
		.product-detail {
			width: 100%;
			justify-content: flex-end;
			display: flex;
			flex-direction: column;
			.product-name {
				margin-top: auto;
				font-family: var(--font-family);
				font-size: 12px;
				font-weight: 600;
				margin: 0;
				color: var(--color-light);
			}
			.price {
				color: #626169;
				margin: 0;
				margin-bottom: 10px;
				font-family: var(--font-family);
				font-size: 14px;
				font-weight: 400;
				width: 60%;
			}
		}
		.content-img {
			width: 100px;
			margin-top: -10px;
			margin-bottom: 10px;
			flex: 0 0 100px;
			img {
				width: 100%;
				max-width: 75px;
				height: auto;
				margin: 0 auto;
				display: block;
			}
		}
		.star {
			width: 20%;
			flex: 0 0 20%;
			padding: 20px 0;
			.review {
				text-align: center;
				display: block;
				color: #f7ad32;
				font-family: var(--font-family);
				font-size: 12px;
				font-weight: 600;
				margin-top: 5px;
			}
			img {
				display: block;
				margin: 0 auto;
				width: 24px;
				height: 24px;
			}
			i {
				margin: 0 auto;
				padding: 0;
				color: var(--color-light);
				--ggs: 1.2;
				transition: ease all 0.3s;
			}
			&:hover {
				cursor: pointer;
				i {
					color: #f7ad32;
				}
			}
		}
	}
}

/*Animations*/
@keyframes wobble-hor-bottom {
	0%,
	100% {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
		-webkit-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
	}
	15% {
		-webkit-transform: translateX(-5px) rotate(-6deg);
		transform: translateX(-5px) rotate(-6deg);
	}
	30% {
		-webkit-transform: translateX(4px) rotate(6deg);
		transform: translateX(4px) rotate(6deg);
	}
	45% {
		-webkit-transform: translateX(-3px) rotate(-3.6deg);
		transform: translateX(-3px) rotate(-3.6deg);
	}
	60% {
		-webkit-transform: translateX(2px) rotate(2.4deg);
		transform: translateX(2px) rotate(2.4deg);
	}
	75% {
		-webkit-transform: translateX(-1px) rotate(-1.2deg);
		transform: translateX(-1px) rotate(-1.2deg);
	}
}
@keyframes fade-in-bottom {
	0% {
		-webkit-transform: translateY(50px);
		transform: translateY(50px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
}
@keyframes scale-in-br {
	0% {
		-webkit-transform: scale(0);
		transform: scale(0);
		-webkit-transform-origin: 100% 100%;
		transform-origin: 100% 100%;
		opacity: 1;
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-transform-origin: 100% 100%;
		transform-origin: 100% 100%;
		opacity: 1;
	}
}
@keyframes flip-in-hor-top {
	0% {
		-webkit-transform: rotateX(-80deg);
		transform: rotateX(-80deg);
		opacity: 0;
	}
	100% {
		-webkit-transform: rotateX(0);
		transform: rotateX(0);
		opacity: 1;
	}
}
@keyframes swing-in-left-fwd {
	0% {
		-webkit-transform: rotateY(100deg);
		transform: rotateY(100deg);
		-webkit-transform-origin: left;
		transform-origin: left;
		opacity: 0;
	}
	100% {
		-webkit-transform: rotateY(0);
		transform: rotateY(0);
		-webkit-transform-origin: left;
		transform-origin: left;
		opacity: 1;
	}
}
@keyframes float {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-20px);
	}
	100% {
		transform: translatey(0px);
	}
}

/* DEV */
.dev,
.instagram {
	position: fixed;
	font-size: 14px;
	top: 10px;
	left: 10px;
	padding: 1em;
	color: var(--color-dark);
	background-color: rgba(255, 255, 255, 0.7);
	border-radius: 25px;
	@media (max-width: 540px) {
		position: relative;
		width: 100%;
		top: 0;
		left: 0;
		padding: 1em 0;
	}
	a {
		text-decoration: none;
		font-weight: bold;
		color: var(--color-dark);
		transition: ease all 0.3s;
		&:hover {
			color: #ef5350;
			text-decoration: underline;
		}
	}
	span {
		color: #ef5350;
	}
}
.instagram {
	top: auto;
	left: auto;
	bottom: 0;
	right: 0;
}

$("a").on("click", function (e) {
	e.preventDefault();
});