<div class="earmark-app">
	<header class="header">
		<h1 class="header-logo">earmark.</h1>
		<div class="header-content">
			<div class="header-search">
				<input type="text" class="search-field" placeholder="Search..." />
				<button type="submit" class="search-btn">
					<i class="ph-magnifying-glass-bold"></i>
				</button>
			</div>
			<button class="header-avatar">
				<span class="header-avatar-img"></span>
				<span class="header-avatar-name">Ryan Johnson</span>
			</button>
		</div>
	</header>
	<main class="main">
		<nav class="nav">
			<ul class="tabs">
				<li class="tab">
					<button class="tab-btn tab-btn--active">
						<i class="ph-lightbulb-bold"></i>
						<span class="tab-btn-title">Overview</span>
					</button>
				</li>
				<li class="tab">
					<button class="tab-btn">
						<i class="ph-arrows-left-right-bold"></i>
						<span class="tab-btn-title">Transactions</span>
					</button>
				</li>
				<li class="tab">
					<button class="tab-btn">
						<i class="ph-credit-card-bold"></i>
						<span class="tab-btn-title">Bugdets</span>
					</button>
				</li>
				<li class="tab">
					<button class="tab-btn">
						<i class="ph-arrows-counter-clockwise-bold"></i>
						<span class="tab-btn-title">Subscriptions</span>
					</button>
				</li>
				<li class="tab">
					<button class="tab-btn">
						<i class="ph-bank-bold"></i>
						<span class="tab-btn-title">Accounts</span>
					</button>
				</li>
			</ul>
		</nav>
		<div class="content">
			<div class="content-header">
				<div class="content-header-inner">
					<h1 class="content-header-title">Good afternoon Ryan, <br />you have<small>$24,920.56</small></h1>
					<div class="content-header-info">
						Available funds to invest: $435.00 <a href="#" class="link">Invest now</a>
					</div>
				</div>
				<div class="content-header-illustration">
					<img src="https://assets.codepen.io/285131/illustration-2.svg" />
				</div>
			</div>
			<div class="content-body">
				<section class="overview">
					<header class="overview-header">
						<h2 class="overview-header-title">Transactions to review<span>7</span></h2>
						<a href="#" class="link">View all</a>
					</header>
					<div class="overview-body">
						<div class="summary">
							<h3 class="summary-date">Sept 09, 2020</h3>
							<span class="summary-amount">+$87.01</span>
						</div>
						<div class="list">
							<div class="list-item">
								<div class="list-item-company">
									<figure class="list-item-company-logo">
										<img src="https://assets.codepen.io/285131/spotify-logo.svg" />
									</figure>
									<div class="list-item-company-info">
										<h4 class="list-item-company-name">Spotify</h4>
										<a href="#" class="list-item-company-hashtag">#Music</a>
									</div>
								</div>
								<div class="list-item-transaction">
									<div class="list-item-transaction-values">
										<span class="list-item-transaction-value">
											<i class="ph-arrows-clockwise-bold"></i>-$9.99
										</span>
										<time class="list-item-transaction-time" datetime="17:00">5:00pm</time>
									</div>
									<button class="list-item-transaction-action">
										<i class="ph-caret-down-bold"></i>
									</button>
								</div>
							</div>
							<div class="list-item">
								<div class="list-item-company">
									<figure class="list-item-company-logo">
										<img src="https://assets.codepen.io/285131/megan.jpg" />
									</figure>
									<div class="list-item-company-info">
										<h4 class="list-item-company-name">E-Transfer from Megan Primeau</h4>
										<a href="#" class="list-item-company-hashtag">#Income</a>
									</div>
								</div>
								<div class="list-item-transaction">
									<div class="list-item-transaction-values">
										<span class="list-item-transaction-value list-item-transaction-value--positive"> +$120.00
										</span>
										<time class="list-item-transaction-time" datetime="11:30">11:30am</time>
									</div>
									<button class="list-item-transaction-action">
										<i class="ph-caret-down-bold"></i>
									</button>
								</div>
							</div>
							<div class="list-item">
								<div class="list-item-company">
									<figure class="list-item-company-logo">
										<img src="https://assets.codepen.io/285131/starbucks-logo.svg" />
									</figure>
									<div class="list-item-company-info">
										<h4 class="list-item-company-name">Starbucks</h4>
										<a href="#" class="list-item-company-hashtag">#Food</a>
										<a href="#" class="list-item-company-hashtag">#Coffee</a>
									</div>
								</div>
								<div class="list-item-transaction">
									<div class="list-item-transaction-values">
										<span class="list-item-transaction-value"> -$6.50
										</span>
										<time class="list-item-transaction-time" datetime="11:23">11:23am</time>
									</div>
									<button class="list-item-transaction-action">
										<i class="ph-caret-down-bold"></i>
									</button>
								</div>
							</div>
														<div class="list-item">
								<div class="list-item-company">
									<figure class="list-item-company-logo">
										<img src="https://assets.codepen.io/285131/shell-logo.png" />
									</figure>
									<div class="list-item-company-info">
										<h4 class="list-item-company-name">Shell</h4>
										<a href="#" class="list-item-company-hashtag">#Gas</a>
									</div>
								</div>
								<div class="list-item-transaction">
									<div class="list-item-transaction-values">
										<span class="list-item-transaction-value"> -$16.50
										</span>
										<time class="list-item-transaction-time" datetime="10:00">10:00am</time>
									</div>
									<button class="list-item-transaction-action">
										<i class="ph-caret-down-bold"></i>
									</button>
								</div>
							</div>
						</div>
						<div class="summary">
							<h3 class="summary-date">Sept 08, 2020</h3>
							<span class="summary-amount">+$102.76</span>
						</div>
						<div class="list">
							<div class="list-item">
								<div class="list-item-company">
									<figure class="list-item-company-logo">
										<img src="https://assets.codepen.io/285131/mike.jpg" />
									</figure>
									<div class="list-item-company-info">
										<h4 class="list-item-company-name">E-Transfer from Mike Gravelle</h4>
										<a href="#" class="list-item-company-hashtag">#Income</a>
									</div>
								</div>
								<div class="list-item-transaction">
									<div class="list-item-transaction-values">
										<span class="list-item-transaction-value list-item-transaction-value--positive">
											 +$67.00
										</span>
										<time class="list-item-transaction-time" datetime="17:00">5:00pm</time>
									</div>
									<button class="list-item-transaction-action">
										<i class="ph-caret-down-bold"></i>
									</button>
								</div>
							</div>
							<div class="list-item">
								<div class="list-item-company">
									<figure class="list-item-company-logo">
										<img src="https://assets.codepen.io/285131/whole-foods-logo.png" />
									</figure>
									<div class="list-item-company-info">
										<h4 class="list-item-company-name">Whole Foods</h4>
										<a href="#" class="list-item-company-hashtag">#Groceries</a>
									</div>
								</div>
								<div class="list-item-transaction">
									<div class="list-item-transaction-values">
										<span class="list-item-transaction-value"> -$150.56
										</span>
										<time class="list-item-transaction-time" datetime="16:40">4:40pm</time>
									</div>
									<button class="list-item-transaction-action">
										<i class="ph-caret-down-bold"></i>
									</button>
								</div>
							</div>
							<div class="list-item">
								<div class="list-item-company">
									<figure class="list-item-company-logo">
										<img src="https://assets.codepen.io/285131/amc-logo.png" />
									</figure>
									<div class="list-item-company-info">
										<h4 class="list-item-company-name">AMC Theathers</h4>
										<a href="#" class="list-item-company-hashtag">#Entertainment</a>
									</div>
								</div>
								<div class="list-item-transaction">
									<div class="list-item-transaction-values">
										<span class="list-item-transaction-value"> -$19.20
										</span>
										<time class="list-item-transaction-time" datetime="13:23">1:23am</time>
									</div>
									<button class="list-item-transaction-action">
										<i class="ph-caret-down-bold"></i>
									</button>
								</div>
							</div>
						</div>
					</div>
					<footer class="overview-footer">
						<a href="#" class="link">View all transactions<i class="ph-arrow-right-bold"></i></a>
					</footer>
				</section>
				<section class="overview">
					<header class="overview-header">
						<h2 class="overview-header-title">Upcoming payments<span>3</span></h2>
						<a href="#" class="link">View all</a>
					</header>
					<div class="overview-body">
						<div class="list">
							<div class="list-item">
								<div class="list-item-company">
									<figure class="list-item-company-logo list-item-company-logo--square">
										<img src="https://assets.codepen.io/285131/netflix-logo.png" />
									</figure>
									<div class="list-item-company-info">
										<h4 class="list-item-company-name">Netflix</h4>
										<a href="#" class="list-item-company-hashtag">#Entertainment</a>
									</div>
								</div>
								<div class="list-item-transaction">
									<div class="list-item-transaction-values">
										<span class="list-item-transaction-value">
											<i class="ph-arrows-clockwise-bold"></i>-$7.99
										</span>
										<time class="list-item-transaction-time" datetime="2020-09-23T16:00:00">September 23, 2020 at 4:00pm</time>
									</div>
									<button class="list-item-transaction-action">
										<i class="ph-caret-down-bold"></i>
									</button>
								</div>
							</div>
							<div class="list-item">
								<div class="list-item-company">
									<figure class="list-item-company-logo list-item-company-logo--square">
										<img src="https://assets.codepen.io/285131/apple-music.png" />
									</figure>
									<div class="list-item-company-info">
										<h4 class="list-item-company-name">Apple Music</h4>
										<a href="#" class="list-item-company-hashtag">#Music</a>
									</div>
								</div>
								<div class="list-item-transaction">
									<div class="list-item-transaction-values">
										<span class="list-item-transaction-value"><i class="ph-arrows-clockwise-bold"></i> -$9.99
										</span>
										<time class="list-item-transaction-time" datetime="2020-09-26T17:00:00">September 26, 2020 at 5:00pm</time>
									</div>
									<button class="list-item-transaction-action">
										<i class="ph-caret-down-bold"></i>
									</button>
								</div>
							</div>
							<div class="list-item">
								<div class="list-item-company">
									<figure class="list-item-company-logo list-item-company-logo--square">
										<img src="https://assets.codepen.io/285131/aws-logo.png" />
									</figure>
									<div class="list-item-company-info">
										<h4 class="list-item-company-name">Amazon AWS</h4>
										<a href="#" class="list-item-company-hashtag">#Hosting</a>
									</div>
								</div>
								<div class="list-item-transaction">
									<div class="list-item-transaction-values">
										<span class="list-item-transaction-value"><i class="ph-arrows-clockwise-bold"></i> -$180.50
										</span>
										<time class="list-item-transaction-time" datetime="2020-09-27T21:00:00">September 27, 2020 at 9:00pm</time>
									</div>
									<button class="list-item-transaction-action">
										<i class="ph-caret-down-bold"></i>
									</button>
								</div>
							</div>
						</div>
					</div>
					<footer class="overview-footer">
						<a href="#" class="link">View all upcoming payments<i class="ph-arrow-right-bold"></i></a>
					</footer>
				</section>
			</div>
		</div>
	</main>
</div>
@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected];400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,[email protected],400;0,500;0,600;0,700;1,400;1,500;1,600&family=Space+Mono:[email protected];700&display=swap');

*, *:after, *:before {
	box-sizing: border-box;
}

:root {
	--c-text-primary: #162121;
	--c-text-secondary: #6D7680;
	--c-action-primary: #F29873; 
	--c-action-primary-accent: #FAF5F1;
	--c-action-secondary: #63C4B1;
	--c-action-tertiary: #F9BE31;
	--c-bg-primary: #FCFCFC;
	--c-bg-secondary: #F7F6FC;
	--c-bg-search: #F0F4F5;
}

body {
	font-family: "Inter", sans-serif;
	line-height: 1.5;
	min-height: 100vh;
	background-color: var(--c-action-primary-accent);
	color: var(--c-text-primary);
	padding: 2rem;
}

input, select, button, textarea {
	font: inherit;
	color: inherit;
	outline: 0;
}

img {
	display: block;
	max-width: 100%;
}

.earmark-app {
	box-shadow: 0 0 2px 0 rgba(#000, .1), 0 15px 30px rgba(#444, .1);
	padding: 3rem;
	border-radius: 15px;
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
	background-color: var(--c-bg-primary);
	min-height: calc(100vh - 4rem);
}

.header {
	display: flex;
	align-items: center;
}

.header-logo {
	font-family: "Lora", sans-serif;
	font-weight: 700;
	font-size: 1.5rem;
}

.header-content {
	margin-left: auto;
	display: flex;
	flex-wrap: wrap;
}

.header-search {
	display: flex;
	position: relative;
}

.search-field {
	border-radius: 99em;
	background-color: var(--c-bg-search); 
	border: none;
	padding-left: 2.75rem;
	height: 3rem;
	transition: width 380ms ease;
	width: 250px;
	&:focus {
		width: 400px;
	}
}

.search-btn {
	border: none;
	position: absolute;
	left: .5rem; 
	top: 50%;
	transform: translateY(-50%);
	border-radius: 50%;
	background-color: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	i {
		font-size: 1.25rem;
		color: #ABB5BD;
	}
}

.header-avatar {
	border: none;
	background-color: transparent;
	display: flex;
	align-items: center;
		margin-left: 1rem;

}

.header-avatar-img {	
	display: block;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background-image: url("https://assets.codepen.io/285131/user-avatar.jpg");
	background-position: 50% 50%;
	background-size: cover; 
	background-repeat: no-repeat;
}

.header-avatar-name {
	margin-left: .75rem;
}

.main {
	margin-top: 6rem;
	display: grid;
	grid-template-columns: 1fr 4fr;
	column-gap: 5rem;
}

.nav {
	//
}

.tabs {
	display: flex;
	flex-direction: column;
}

.tab {
	display: flex;
	&+.tab {
		margin-top: .5rem;
	}
}

.tab-btn {
	border: none;
	background-color: transparent;
	padding: .75rem;
	border-radius: 6px;
	display: flex;
	align-items: center;
	width: 100%;
	font-weight: 500;
	i {
		margin-right: .75rem;
		font-size: 1.25em;
		color: var(--c-text-secondary);
	}
	&--active, &:hover {
		color: var(--c-action-primary);
		background-color: var(--c-action-primary-accent);
		cursor: pointer;
		i {
			color: var(--c-action-primary);
		}
	}
	
	&--active {
		font-weight: 600;
	}
}


.main-content {
	background-color: #EEE;
}

.content-header {
	display: flex;
}

.content-header-inner {
	flex: 1;
}

.content-header-title {
	font-size: 2.5rem;
	font-weight: 700;
	font-family: "Lora", sans-serif;
	line-height: 1.125;
	small {
		display: block;
		font-weight: 400;
		font-family: "Space Mono", monospace;
		font-size: .875em;
		color: var(--c-action-secondary);
		margin-top: .5em;
	}
}

.content-header-info {
	margin-top: 1.5rem;
	font-weight: 600;
}

.link {
	color: var(--c-action-tertiary);
	text-decoration:none;
	box-shadow: 0 1px 0 currentcolor;
	font-weight: 600;
			i {
			display: inline-block;
			margin-left: .25rem;
		}
	&:hover, &:focus {
		box-shadow: 0 3px 0 currentcolor;

	}
}

.content-header-illustration {
	display: flex;
	justify-content: flex-end;
	flex: 1;
	margin-top: -2rem;
	img {
		max-width: 400px;
		max-height: 300px;
	}
}

.overview {
	border: 1px solid #dedede;
	border-radius: 8px;
	min-height: 100px;
	padding: 2rem;
	&+& {
		margin-top: 3rem;
	}
}

.overview-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.overview-header-title {
	font-size: 1.25rem;
	font-weight: 700;
	span {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		font-size: .75em;
		width: 2rem;
		height: 2rem;
		border-radius: 50%;
		color: var(--c-text-secondary);
		background-color: var(--c-bg-secondary);
		margin-left: .5rem;
	}
}

.summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: 500;
	margin-top: 1.5rem;
	color: var(--c-text-secondary);
}

.summary-amount {
	font-family: "Space Mono", monospace;
}

.list {
	margin-top: 1rem;
	& + .summary {
		margin-top: 2.5rem;
	}
}

.list-item {
	border-top: 1px solid #dedede;
	padding-top: 1.25rem;
	padding-bottom: 1.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.list &:last-child {
		border-bottom: 1px solid #dedede;
	}
}

.list-item-company {
	display: flex;
	align-items: center;
}

.list-item-company-logo {
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	overflow: hidden;
	position: relative;
	img {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	
	&--square {
		border-radius: 12px;
		box-shadow: 0 0 4px 0 #dedede;
	}
}

.list-item-company-info {
	margin-left: 1.25rem;
}

.list-item-company-name {
	font-weight: 600;
}

.list-item-company-hashtag {
	display: inline-block;
	text-decoration: none;
	color: var(--c-text-secondary);
	margin-top: .125rem;
	& + & {
		margin-left: .25rem;
	}
}

.list-item-transaction {
	display: flex;
	align-items: center;
}

.list-item-transaction-values {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.list-item-transaction-value {
	font-weight: 600;
	font-family: "Space Mono", monospace;
	display: inline-flex;
	align-items: center;
	i {
		margin-right: .5rem;
	}
	
	&--positive {
		color: var(--c-action-secondary);
	}
}

.list-item-transaction-time {
	color: var(--c-text-secondary);
	font-size: .875rem;
}

.list-item-transaction-action {
	border: none;
	background-color: var(--c-bg-search);
	border-radius: 8px;
	margin-left: 1rem;
	width: 2.25rem;
	height: 2.25rem;
	color: var(--c-text-secondary);
}

.overview-footer {
	display: flex;
	justify-content: center;
	padding-top: 1.25rem;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.