<span class="back">
		<i class="fas fa-long-arrow-alt-left"></i>
		back
	</span>

	<section class="profile_container">
		<div class="profile_img_section">
			<img class="profile_img-LG" src="https://cdn.idntimes.com/content-images/community/2020/10/122163576-262420488513552-863075192792965334-n-f95e3dd6d25d3618eb9f1b3b9bcc5796.jpg" />
			<div class="flag_wrapper">
				<img class="flag" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/271/flag-south-korea_1f1f0-1f1f7.png" alt="South Korean Flag" />
			</div>
		</div>

		<div class="profile_desc_section">
			<h2>Seo Dal-Mi</h2>
			<h3>CEO</h3>
			<p class="description">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

			<div class="interests">
				<span class="interests_item">Technology</span>
				<span class="interests_item">Management</span>
				<span class="interests_item">Leadership</span>
			</div>
		</div>

	</section>

	<div class="info">
		<ul>
			<li>
				<div class="link_img_wrapper">
					<img class="link_img" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/271/round-pushpin_1f4cd.png" alt="">
				</div>
				<p>Seoul, South Korea</p>
			</li>
			<li>
				<div class="link_img_wrapper">
					<img class="link_img" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/271/speaking-head_1f5e3-fe0f.png" alt="">
				</div>
				<p>Korean, English</p>
			</li>
			<li>
				<div class="link_img_wrapper">
					<img class="link_img" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/samsung/265/globe-with-meridians_1f310.png" alt="">
				</div>
				<p>sandbox.kr/samsantech</p>
			</li>
		</ul>
	</div>
h2 {
	font-family: "Poppins";
	font-size: 36px;

	margin-bottom: 15px;
}

h3 {
	font-size: 24px;
	font-weight: 500;
	color: rgba(34, 34, 34, 0.5);

	margin-bottom: 25px;
	margin-top: 0px;
}

h3,
span,
p {
	font-family: "Avenir";
}

.profile_container,
.info,
.back {
	margin: 60px 100px 0px;
	max-width: 900px;
	display: flex;
	overflow-x: hidden;
}

.back {
	display: flex;
	align-items: center;
	color: rgba(34, 34, 34, 0.5);
}

.back i {
	margin-right: 15px;
}

.profile_img-LG {
	height: 400px;
	width: 300px;
	border-radius: 40px;

	object-fit: cover;
	object-position: 50% 50%;

	background-position: 40% 50%;
}

.flag_wrapper {
	width: 50px;
	height: 50px;
	background-color: #f2f2f2;
	border-radius: 100%;
	position: relative;
	top: -70px;
	left: 230px;
}

.flag {
	width: 30px;
	height: 30px;
	position: absolute;
	right: 0;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto auto;
}

.description {
	margin-bottom: 30px;
	margin-top: 0px;
}

.profile_img_section {
	margin-right: 50px;
}

.profile_desc_section {
	display: flex;
	flex-direction: column;

	margin-left: 50px;
}

.interests_item {
	display: inline-block;
	padding: 5px 15px;
	margin-right: 7.5px;
	margin-bottom: 10px;
	line-height: 35px;
	background-color: #e6e6e6;
	border-radius: 5px;

	color: rgba(34, 34, 34, 0.5);
}

.info {
	margin-top: -20px;
	margin-left: 100px;
}

.link_img_wrapper {
	width: 40px;
	height: 40px;
	background-color: #f2f2f2;
	border-radius: 10px;
	position: relative;
}

.link_img {
	height: 20px;
	width: 20px;
	position: absolute;
	right: 0;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto auto;
}

ul {
	padding: 0px;
}

li {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-bottom: 5px;
}

li p {
	margin-left: 30px;
	color: rgba(34, 34, 34, 0.5);
}

@media screen and (max-width: 1000px) {
	.profile_container,
	.info,
	.back {
		margin: 60px 33px 0px;
	}

	.profile_container {
		flex-direction: column;
	}

	.profile_img_section {
		margin: 0 auto;
	}

	.profile_img-LG {
		width: 300px;
		height: 300px;
		border-radius: 100%;
	}

	.flag_wrapper {
	}

	.profile_desc_section {
		margin-left: 0px;
		margin-bottom: 10px;
		margin-top: -40px;
	}

	.info {
		margin-top: 10px;
		margin-left: 33px;
	}
}

External CSS

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

External JavaScript

This Pen doesn't use any external JavaScript resources.