<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />

<div class="profile">
	<div class="profile-pic">
		<div class="header-color"></div>
		<img src="https://anniedotexe.github.io/hosted-assets/dailyui/dailyui006/profile-pic.jpg" alt="Profile Picture">
	</div>
	<div class="title">
		<h1>Ava Silva</h1>
		<h2><span class="highlighted">Warrior Nun</span> at OCS</h2>
	</div>
	<div class="description">
		<p>Bisexual Jesus</p>
		<p>Besties with Karl the Tarask</p>
	</div>
	<button class="follow">Follow</button>

	<div class="images-container">
		<div class="image">
			<img src="https://anniedotexe.github.io/hosted-assets/dailyui/dailyui006/bar-dance2.jpg" alt="Image Post">
			<i class="fas fa-heart"><span>70,418</span></i>
		</div>
		<div class="image">
			<img src="https://anniedotexe.github.io/hosted-assets/dailyui/dailyui006/museum-heist.jpg" alt="Image Post">
			<i class="fas fa-heart"><span>48,657</span></i>
		</div>
		<div class="image">
			<img src="https://anniedotexe.github.io/hosted-assets/dailyui/dailyui006/ava-beach.jpg" alt="Image Post">
			<i class="fas fa-heart"><span>53,829</span></i>
		</div>
	</div>
</div>

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap");

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html,
body {
	height: 100vh;
	display: grid;
	background: #eef0eb;
	font-family: "Open Sans", sans-serif;
}

.profile {
	margin: auto;
	height: 710px;
	width: 400px;
	background: #ffffff;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	border-radius: 20px;
	box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
	-ms-overflow-style: none; /* for Internet Explorer, Edge */
	scrollbar-width: none; /* for Firefox */
	overflow-y: scroll;
}

::-webkit-scrollbar {
	display: none; /* for Chrome, Safari, and Opera */
}

.header-color {
	border-radius: 20px 20px 0 0;
	padding-bottom: 150px;
	width: 400px;
	background: #896279;
}

.profile-pic img {
	height: 200px;
	width: 200px;
	border-radius: 50%;
	border: 10px solid #ffffff;
	margin-top: -100px;
}

.title {
	margin-bottom: 25px;
}

h1 {
	font-size: 32px;
	font-weight: 700;
	color: #0c120c;
	margin-bottom: 10px;
	letter-spacing: 0.025em;
}

h2 {
	font-size: 18px;
	letter-spacing: 0.01em;
	color: #0c120c;
	span {
		color: #33658a;
		font-weight: 700;
	}
}

.description {
	margin-bottom: 25px;
	color: #33658a;
	letter-spacing: 0.01em;

	p:not(:last-child) {
		margin-bottom: 5px;
	}
}

button {
	font-family: "Open Sans", sans-serif;
	color: #ffffff;
	background: #33658a;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0.025em;
	border: none;
	border-radius: 15px;
	min-height: 35px;
	width: 100px;
	margin-bottom: 25px;
	transition: all 0.2s ease;
	cursor: pointer;
}

button:hover {
	width: 115px;
	background: #4f759be0;
}

.images-container {
	width: 350px;

	.image {
		margin-bottom: 25px;

		img {
			width: 100%;
			border-radius: 5px;
			margin-bottom: 5px;
		}

		i {
			color: #9b1d20;
			display: flex;
			align-items: center;
			margin-left: 10px;

			span {
				margin-left: 5px;
				font-family: "Open Sans", sans-serif;
				font-size: 14px;
				font-weight: 400;
				color: #000000;
			}
		}
	}
}