<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
				box-sizing: border-box;
				font-family: sans-serif;
			}

			html {
				scroll-behavior: smooth;
			}

			header {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20px;
				z-index: 10;
			}

			footer {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				text-align: center;
				padding: 10px;
				color: white;
				font-size: 13px;
			}

			img {
				width: 100%;
				pointer-events: none;
				user-select: none;
			}

			svg {
				width: 50px;
				height: 34px;
			}

			.home {
				display: grid;
				grid-template-columns: 45% 50%;
				place-items: center;
				gap: 50px;
				background: rgb(67, 69, 112);
				background: radial-gradient(circle,
						rgba(67, 69, 112, 1) 3%,
						rgba(35, 36, 57, 1) 60%);
				overflow: hidden;
				padding: 130px 80px;
				height: 100vh;
				place-content: center;	
			}

			.description {
				color: #fff;
				padding: 0 50px;
			}

			.description>h1 {
				font-family: sans-serif;
				font-size: clamp(2.3rem, 5vw, 4rem);
				line-height: 1;
				margin-bottom: 30px;
			}

			.gradient-text {
				font-family: sans-serif;
				background-image: linear-gradient(90deg,
						rgb(118, 167, 63) 0%,
						rgb(51, 143, 118) 40%,
						rgb(55, 141, 167) 50%,
						rgb(117, 152, 242) 70%,
						rgb(144, 118, 236) 100%);
				color: transparent;
				background-size: contain;
				background-clip: text;
				-webkit-background-clip: text;
			}

			.description>p {
				font-family: sans-serif;
				font-size: 1.2rem;
				line-height: 1.5;
				margin-bottom: 30px;
			}

			#form {
				position: relative;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
			}

			input {
				padding-inline-end: 10px;
				padding-inline-start: 10px;
				background-color: transparent;
				outline: transparent;
				border: 0;
				border-bottom: 2px solid rgba(255, 255, 255, 0.3);
				margin-right: 10px;
				transition: all 0.3s ease-in;
				-webkit-transition: all 0.3s ease-in;
			}

			input::placeholder {
				color: rgb(117, 152, 242);
				opacity: 0.5;
				font-weight: 500;
			}

			input[type="email"] {
				color: rgba(255, 255, 255, 0.7);
				font-weight: 500;
				font-size: 1rem;
			}

			input[type="email"]:focus {
				border: transparent;
				outline: 2px dotted rgb(117, 152, 242);
				outline-offset: -3px;
			}

			.btn {
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 3px;
				max-width: max-content;
				background: linear-gradient(90deg,
						rgb(118, 167, 63) 0%,
						rgb(51, 143, 118) 40%,
						rgb(55, 141, 167) 50%,
						rgb(117, 152, 242) 70%,
						rgb(144, 118, 236) 100%);
				background-size: 200%;
				background-position: left;
				color: #fff;
				font-size: 1.2rem;
				font-weight: 500;
				border: 0;
				padding: 12px 16px;
				border-radius: 5px;
				box-shadow: 0 6px 8px rgba(0, 0, 0, 0.5),
					inset 0px 2px 2px rgba(255, 255, 255, 0.2);
				cursor: pointer;
				transition: all 0.3s ease-in;
			}

			.btn:is(:hover, :focus-visible) {
				background-position: right;
			}

			.users-color-container {
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				grid-template-rows: repeat(3, 1fr);
				gap: 20px;
			}

			.item {
				max-width: 200px;
				aspect-ratio: 1/1;
				box-shadow: 0 8px 8px rgba(0, 0, 0, 0.5),
					inset 0px 2px 2px rgba(255, 255, 255, 0.2);
				animation: fadeIn 0.5s linear 1 forwards;
				animation-delay: calc(0.2s * var(--i));
				opacity: 0;
			}

			.item:nth-child(1) {
				background-color: #67d7e1;
				border-radius: 50% 50% 0 50%;
			}

			.item:nth-child(2) {
				border-radius: 50% 50% 0 0;
			}

			.item:nth-child(3) {
				background-color: #6cc164;
				border-radius: 50%;
			}

			.item:nth-child(4) {
				border-radius: 0 0 0 50%;
			}

			.item:nth-child(5) {
				border-radius: 0 50% 50% 0;
			}

			.item:nth-child(6) {
				background-color: #8071a8;
				border-radius: 0 50% 50% 50%;
			}

			.item:nth-child(7) {
				border-radius: 50% 50% 0 50%;
			}

			.item:nth-child(8) {
				background-color: #fe7519;
				border-radius: 50% 0 0 50%;
			}

			.item:nth-child(9) {
				background-color: #f5bec3;
				border-radius: 0 50% 50% 0;
			}

			.item:nth-child(10) {
				border-radius: 50%;
			}

			.item:nth-child(11) {
				background-color: #fcd659;
				border-radius: 50% 0 50% 50%;
			}

			.item:nth-child(12) {
				border-radius: 50% 0 0 0;
			}

			@keyframes fadeIn {
				0% {
					opacity: 0;
					transform: scale(0);
				}

				100% {
					opacity: 1;
					transform: scale(1);
				}
			}

			.btn-grad {
				background-image: linear-gradient(to right,
						#ece9e6 0%,
						#ffffff 51%,
						#ece9e6 100%);
				padding: 10px 16px;
				color: #000;
				box-shadow: 0 0 5px #eee;
				outline: 0;
				font-size: 1rem;
				font-weight: 400;
				grid-row: 9 / 10;
				cursor: pointer;
				transition: all 0.5s ease-in;
			}

			.btn-grad:is(:hover, :focus-visible) {
				text-decoration: none;
			}

			@media (max-width: 1215px) {
				.description>p {
					font-size: 1rem;
				}

				.btn {
					font-size: 1rem;
				}
			}

			@media (max-width: 1015px) {
				.home {
					grid-template-columns: 45% 50%;
					gap: 50px;
					padding: 140px 50px;
				}

				.description>p {
					font-size: 1rem;
				}

				.btn {
					padding: 8px 12px;
				}

				.btn-grad {
					padding: 8px 12px;
				}
			}

			@media (max-width: 865px) {
				.home {
					grid-template-columns: 45% 50%;
					gap: 30px;
					padding: 130px 70px;
				}
			}

			@media (max-width: 815px) {
				.home {
					grid-template-columns: 1fr;
					/*grid-template-rows: 1fr 1fr;*/
					grid-template-areas:
						"userscolorcontainer"
						"description";
					gap: 150px;
					padding: 90px 80px 70px;
					align-items: center; /* Center vertically */
				}

				.users-color-container {
					grid-area: userscolorcontainer;
				}

				.description {
					grid-area: description;
					padding: 0;
					text-align: center;
				}

				.description>p {
					font-size: 1.1rem;
				}

				#form {
					justify-content: center;
				}
			}

			@media (max-width: 815px) {
				.description>p {
					font-size: 1rem;
				}
			}

			@media (max-width: 460px) {
				.home {
					gap: 150px;
					padding: 30px 40px;
				}

				#form {
					flex-direction: column;
					align-items: center;
					gap: 30px;
					margin-top: 20px;
				}

				input[type="email"]:focus {
					outline-offset: 6px;
				}
			}
		</style>
	</head>

	<body>
		
		<header>
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 157.96 164.02" class="fvlrMc">
				<defs><style>.cls-1{fill:#fbba23;}.cls-2{fill:#060606;}.cls-3{fill:#fffffe;}</style></defs>
				<path class="cls-1" d="M.16,22.14A7.78,7.78,0,0,1,.8,20c1.4-3.3,4.79-4.68,7.93-5,3.77-.44,7.29.74,10.8,1.85A53.83,53.83,0,0,1,34,24.17,86.12,86.12,0,0,1,48.37,37,123.82,123.82,0,0,1,61.09,53.79,154.93,154.93,0,0,1,72.71,75.31a28,28,0,0,1,1.46,4c.36,1.32.11,1.86-1.34,1.82-5-.12-9.91-.05-14.92-.87a66.5,66.5,0,0,1-16.68-5.17,48.17,48.17,0,0,1-8.16-4.75c-3.14-2.23-6.54-4.14-9.49-6.65A78.78,78.78,0,0,1,8.17,46.15,59.57,59.57,0,0,1,1.84,33.57C1.07,31.34.71,29,.16,26.65A16.22,16.22,0,0,1,.16,22.14Z"></path>
				<path class="cls-2" d="M139.47,17.06a56.38,56.38,0,0,1-10.8,18.38A72.2,72.2,0,0,1,115.93,47c-.46.33-1.2.51-1.13,1.55,14.54-4.9,29-6.19,43.16,1.16-13.25-4.92-26.31-4-39.45,1.1,9.78,4.11,16,11.08,18.23,21.26,2.52,11.68-2,23-11.86,30-1.92,1.37-4.37.53-6.58.4a24.42,24.42,0,0,1-9.11-2.75,14.63,14.63,0,0,0,8.31,5.9,24.93,24.93,0,0,1-9.21,1.58,36.24,36.24,0,0,1-9-1.26,33.63,33.63,0,0,1,2.06,12.42,2.39,2.39,0,0,1-.25,1.44c-1.4-.72-2.88-1.23-4.27-2a61.89,61.89,0,0,1-14.35-10.64,60.94,60.94,0,0,1-14.71-24,35.5,35.5,0,0,1,12.41,2.61,28.39,28.39,0,0,1,1.28-18.8c4.48-10.2,12.4-16,23.4-17.74,2.79-.43,5.18-2,7.56-3.41,9.66-5.64,17.68-13,23.38-22.72,1.18-2,2.19-4.14,3.27-6.22ZM116.94,58.93c-7.26,0-13.49,6.14-13.32,13.27a13.28,13.28,0,1,0,13.32-13.27Z"></path>
				<path class="cls-2" d="M34.74,105.19c-.54-3,1.54-5,2.95-7.17a32.55,32.55,0,0,1,11.1-10.31c.52-.3,1-.82,1.68-.39a12.61,12.61,0,0,0,.14,2.05,73.74,73.74,0,0,0,5.13,15.54,59.67,59.67,0,0,0,21.17,24.75A63.91,63.91,0,0,0,94.73,138c-.68,2.15-2.39,3.55-3.89,5a33.5,33.5,0,0,1-14.92,8.56,3.68,3.68,0,0,1-2,0,10,10,0,0,0-1-.54A62.67,62.67,0,0,1,48.89,134,60.6,60.6,0,0,1,37.6,114.41C36.55,111.37,35.69,108.27,34.74,105.19Z"></path>
				<path class="cls-1" d="M94.73,138a63.91,63.91,0,0,1-17.82-8.34,59.67,59.67,0,0,1-21.17-24.75,73.74,73.74,0,0,1-5.13-15.54,12.61,12.61,0,0,1-.14-2.05c.87-1.65,2.69-1.7,4.11-2.17,4.27-1.42,8.63-2.64,13.24-2.08a60.94,60.94,0,0,0,14.71,24,61.89,61.89,0,0,0,14.35,10.64c1.39.77,2.87,1.28,4.27,2a31.56,31.56,0,0,1-3,12.6A34.13,34.13,0,0,1,94.73,138Z"></path>
				<path class="cls-1" d="M68.12,55c-1.43-.36-1.65-1.63-2.18-2.5A126.82,126.82,0,0,0,50.11,32a64.93,64.93,0,0,0-14.3-11.81c-6.55-3.91-13.48-7.4-21.45-7.56-1,0-1.17-.53-1.16-1.3.09-4.21,1-8.07,5-10.34A9.16,9.16,0,0,1,25.5.54,37.33,37.33,0,0,1,36.75,6.16a69.67,69.67,0,0,1,12,11.05A97.44,97.44,0,0,1,60.56,35.53c2.65,5.42,4.9,11,7.09,16.62A14.76,14.76,0,0,1,68.12,55Z"></path>
				<path class="cls-1" d="M34.74,105.19c.95,3.08,1.81,6.18,2.86,9.22A60.6,60.6,0,0,0,48.89,134,62.67,62.67,0,0,0,73,151.07a10,10,0,0,1,1,.54c-.3,1-1.16.52-1.75.62a33.76,33.76,0,0,1-22.7-3.78c-3-1.61-3.07-1.68-5.51.63-3.06,2.89-6.15,5.79-9.37,8.47-2.5,2.07-4.57,4.71-7.6,6.47a3.21,3.21,0,0,1,1-2.63c3.93-5.32,7.46-10.92,11.35-16.25,1.63-2.24,1.67-3.47-.12-5.57a32.21,32.21,0,0,1-6.58-12.83,41.17,41.17,0,0,1-.79-13.4,22.55,22.55,0,0,1,1.51-6.88C33.6,105.82,33.85,105.14,34.74,105.19Z"></path>
				<path class="cls-2" d="M139.12,16.79c.06-.16.17-.33.34-.18s0,.29,0,.45Z"></path>
				<path class="cls-3" d="M116.94,58.93A13.19,13.19,0,1,1,103.62,72.2C103.45,65.07,109.68,58.94,116.94,58.93Zm-4.46,5.55a6.28,6.28,0,0,0-6.36,6.36,6.54,6.54,0,0,0,6.36,6.49,6.63,6.63,0,0,0,6.42-6.48A6.33,6.33,0,0,0,112.48,64.48Z"></path>
				<path class="cls-2" d="M112.48,64.48a6.33,6.33,0,0,1,6.42,6.37,6.63,6.63,0,0,1-6.42,6.48,6.54,6.54,0,0,1-6.36-6.49A6.28,6.28,0,0,1,112.48,64.48Z"></path>
			</svg>
		</header>	

		<section class="home">
			<div class="description">
				<h1 class="title">
					<span class="gradient-text">Occasioni.it</span><br>L'Universo infinito del riciclo creativo.
				</h1>
				<p class="paragraph">
					Scopri componenti elettronici, parti di ricambio e prodotti a prezzi ultra convenienti. Crea, aggiusta, risparmia, reinventa!.
				</p>
			</div>

			<div class="users-color-container">
				<span class="item" style="--i: 1"></span>
				<img class="item" src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/274f29ce-0d3f-4ac2-a2aa-f9b7bd188b2a" style="--i: 2" alt="" />
				<span class="item" style="--i: 3"></span>
				<img class="item" src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/b8a14493-3d9f-4b9b-b93a-56d0bc7243e9" style="--i: 4" alt="" />

				<img class="item" src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/03e51e1e-9750-45a5-b75e-a1e341d4562a" style="--i: 10" alt="" />
				<span class="item" style="--i: 11"></span>
				<img class="item" src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/5eb50f89-3e5a-480e-860c-8d40d3ba9ffe" style="--i: 12" alt="" />
				<span class="item" style="--i: 5"></span>

				<span class="item" style="--i: 9"></span>
				<img class="item" src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/86c71a79-2efe-4567-8665-b1e5a1fd9735" style="--i: 8" alt="" />
				<span class="item" style="--i: 7"></span>
				<img class="item" src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/97ef9643-5202-41aa-80f0-ceeabccdd099" style="--i: 6" alt="" />
			</div>
		</section>

		<footer>
			<p>&copy; 2024 occasioni.it - All rights reserved.</p>
		</footer>

	</body>
</html>