<div class="view">
	<div class="phone">
		<div class="main">
			<!-- 	Top Bar	 -->
			<div class="nav">
				<div class="brand">Nine Codes</div>
				<div class="icons">
					<div class="hamburger">
						<div class="ham"></div>
						<div class="ham"></div>
						<div class="ham"></div>
					</div>
				</div>
			</div>

			<!-- 	Intro	 -->
			<div class="intro">
				<p>Current account</p>
				<p class="sum">$ 155 550<span class="darken">.99</span> </p>
			</div>

			<!-- 	BTN GROUP -->
			<div class="button-group">
				<button class="payments">Make a payment</button>
				<button class="requisites">Requisites</button>
			</div>

			<!-- 	Divider	 -->
			<div class="divider"></div>

			<!-- 	Bottom bar	 -->
			<div class="main-footer">
				<p>Tasks <span class="circle">3</span></p>
				<p>Analytics</p>
			</div>

		</div>

		<div class="list">
			<!-- 	Top Bar	 -->
			<div class="head">
				<h1 class="title">Payments <span>last month</span></h1>
				<p>Today, Wednesday</p>
			</div>

			<ul class="history">
				<li>
					<div class="content">
						Stickers
						<span class="minus">- $ 20</span>
					</div>
					<button class="sign">Sign</button>
				</li>
				<li>
					<div class="content">
						Dev Tipps
						<span class="plus">+ $ 10</span>
					</div>
					<button class="income">Income</button>
				</li>
				<li>
					<div class="content">
						Sweets
						<span class="minus">- $ 50</span>
					</div>
					<button class="outcome">Outcome</button>
				</li>
				<li>
					<div class="content">
						Blog Posts
						<span class="plus">+ $ 14</span>
					</div>
					<button class="income">Income</button>
				</li>
				<li>
					<div class="content">
						Food
						<span class="minus">- $ 28</span>
					</div>
					<button class="outcome">Outcome</button>
				</li>
			</ul>
		</div>
	</div>
</div>

@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900')
	
.view
	min-height 100vh
	background #333
	display flex
	justify-content center
	align-items center
	flex-wrap wrap
	.phone
		margin 10px 0
		height 650px
		width 350px
		border-radius 10px
		overflow hidden
		.main
			height 40%
			background-image url('https://images.unsplash.com/photo-1511207538754-e8555f2bc187?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2082&q=80')
			background-position center
			background-size cover
			object-fit cover
			color #fff
			padding 10px
			display grid
			.nav
				padding 10px
				display flex
				justify-content space-between
				.brand
					color #fff
					font-family 'Montserrat'
					font-weight 800
					font-size 20px
				.icons
					width max-content
					.hamburger
						display grid
						grid-gap 5px
						.ham
							height 2px
							width 40px
							background #fff
							border-radius 1px
			.intro
				display grid
				grid-gap 20px
				padding 10px
				place-items center start
				font-family 'Montserrat'
				p
					font-weight 500
					font-size 16px
				.sum
					font-size 30px
					font-weight 500
					.darken
						font-size 25px
						color #9e9e9e
			.button-group
				padding 10px
				button
					all unset
					padding 15px
					border-radius 5px
					font-family 'Montserrat'
					font-weight 800
					font-size 14px
				.payments
					background linear-gradient(to right, #11998e, #38ef7d)
				.requisites
					background #9e9e9e
					opacity .8
			.divider
				width 100%
				height 1px
				background #fff
			.main-footer
				padding 10px
				display flex
				justify-content space-between
				font-family 'Montserrat'
				font-weight 700
				p
					font-weight 500
					.circle
						background-color #dd2c00
						border-radius 100%
						padding 5px 10px
						font-size 14px
		.list
			background #fff
			height 100%
			padding 20px
			font-family 'Montserrat'
			.head
				height max-content
				.title
					font-weight 700
					font-size 25px
					span
						color #40c4ff
				p
					padding 10px 0
					color #9e9e9e
			.history
				display flex
				flex-direction column
				justify-content space-between
				li
					margin 1px
					font-weight 600
					background #e0e0e0
					padding 10px
					justify-content space-between
					border-radius 5px
					display flex
					.content
						font-size 14px
						display grid
						grid-gap 3px
						.minus
							color #ff3d00
							font-weight 500
						.plus
							color #00c853
							font-weight 500
					button
						all unset
						padding 10px
						width 50px
						text-align center
						border-radius 5px
						font-family 'Montserrat'
						font-weight 500
						font-size 12px
						color #fff
					.sign
						background linear-gradient(to right, #11998e, #38ef7d)
					.income
						background #e1f5fe
						color #40c4ff
						font-weight 600
					.outcome
						background #ffcdd2
						color #ff3d00