<div class="container">
	<div class="testimonial-box">
		<div class="testimonial">
			<i class="fas fa-quote-right"></i>
			<span class="testimonial-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic dignissimos blanditiis similique quod quaerat et recusandae tempora. Animi error quaerat labore cum! Ratione veritatis culpa illo quo molestiae minima repudiandae.</span>
			<div class="testimonial-user">
				<img src="https://randomuser.me/api/portraits/women/17.jpg" alt="user-img" class="user-img">
				<div class="user-info">
					<span class="user-name">Username</span>
					<div class="user-job-details">
						<span class="user-job">Job</span>
						<div class="line"></div>
						<span class="user-post">Post</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>


<div class="support">
	<a href="https://twitter.com/DevLoop01" target="_blank"><i class="fab fa-twitter-square"></i></a>
	<a href="https://codepen.io/dev_loop/" target="_blank"><i class="fab fa-codepen"></i></a>
</div>
@import url('https://fonts.googleapis.com/css?family=Montserrat');
* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	height: 100vh;
	width: 100%;
	font-family: Montserrat;
}

body {
	background: #1d81af;
	display: flex;
	justify-content: center;
	align-items: center;
}


.container{
	width: 80%;
	height: 80%;
	display: grid;
	justify-content: center;
	align-content: center;
	
	.testimonial-box{
		position: relative;
		width: 500px;
		height: 300px;
		
		&::before{
			content: '';
			position: absolute;
			top: 10px;
			left: -100px;
			width: 200px;
			height: 200px;
			border-radius: 50%;
			background:  linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%) , rgba(255, 255, 255, 0.8);
			box-shadow: -5px 5px 10px rgba(0,0,0,.3);
			z-index: -1;
		}
			&::after{
			content: '';
			position: absolute;
			bottom: 10px;
			right: -100px;
			width: 200px;
			height: 200px;
			border-radius: 50%;
			background: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%) , rgba(255, 255, 255, 0.8);
			box-shadow: 5px 5px 10px rgba(0,0,0,.3);
			z-index: -1;
		}
		
		.testimonial{
			display: grid;
			grid-template-rows: 1.3fr 0.7fr;
			box-shadow: 0 0 5px rgba(0,0,0,.5);
			width: 100%;
			height: 100%;
			background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
			padding: 10px 20px;
			position: relative;
			
			.fas{
				position: absolute;
				top: 0;
				right: 0;
				padding: 10px;
				font-size: 25px;
				color: #222;
			}
			
			.testimonial-text{
				font-size: 16px;
				line-height: 25px;
				text-align: center;
				padding: 25px 15px;
				width: 100%;
			}
			
			.testimonial-user{
				display: flex;
				align-items: center;
				
				.user-img{
					box-shadow: 0 0 10px rgba(0,0,0,.5);
					width: 60px;
					height: 60px;
					border-radius: 50%;
				}
				
				.user-info{
					margin: 0 20px;
					display: grid;
					grid-template-rows: 1fr 1fr;
					
					.user-name{
						font-weight: 800;
					}
					
					.user-job-details{
						margin: 5px 0 0 0;
						position: relative;
						display: flex;
						justify-content: space-between;
						
						.line{
							position: absolute;
							width: 2px;
							height: 100%;
							background: #000;
							left: 50%;
							top: 0;
							transform: translateX(-50%);
						}
					}
				}
			}
		}
	}
}


.support{
	position: absolute;
	right: 10px;
	bottom: 10px;
	padding: 10px;
	display: flex;
}
a{
	margin: 0 10px;
	color: #fff;
	font-size: 1.5rem;
	transition: all 400ms ease;
}

a:hover{
	color: #222;
}
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.