<main>
	<div class=slit-shadow></div>
	<div class=slit-peek><img src="ccd91455-00ec-41d7-8eba-7b61751594e2.png"/></div>
	<div class=slit-cover>
		<p>Stylish yet comfortable design. <br><br>Made of soft and matte silicone material. <br><br>The strap of the silicone grip cover is detachable. </p>
	</div> 
</main>
.slit-shadow{
	height: 350px;
	width: 3px;
	background: linear-gradient(to bottom, beige, orange, black, orange, beige);
	filter: blur(6px);
	transform: translatex(-25px);
}
.slit-cover{
	height: inherit;
	background:inherit;
	width: 50%;
	transform: translatex(calc(-50% - 25px));
	display:grid;
	align-items:center;
	justify-items: center;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}
.slit-peek > img{
	width: 300px;
	filter: drop-shadow(0 0 10px white)
}
main>div{
	grid-area: 1 / 1;
	
}
p{
	margin: 25px;
	font-family: 'crimson pro';	
	font-size: 18px;
	color: crimson;
	text-shadow: 1px 1px 0 white;
}
main{
	width: 300px;
	height: 400px;
	display: grid;
	align-items: center;
	justify-items: center;
	background: beige;
	border-top-right-radius: 50%;
	border-bottom-right-radius: 50%;
	box-shadow: 10px 20px 20px red;
	
}
body{
	height: 100vh;
	display: grid;
	align-items: center;
	justify-items: center;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.