<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;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.