<main id="main">
	<section id="left">
		<div id="head">
			<h1>Life has great moments</h1>
			<p>Enjoy them with music!</p>
		</div>
		<h3>Only 9.99$</h3>
	</section>
	<section id="right">
		<h1>Purchase</h1>
		<form action="#">
			<div id="form-card" class="form-field">
				<label for="cc-number">Card number:</label>
				<input id="cc-number" maxlength="19" placeholder="1111 2222 3333 4444" required>
			</div>

			<div id="form-date" class="form-field">
				<label for="expiry-month">Expiry date:</label>
				<div id="date-val">
					<select id="expiry-month" required>
															<option id="trans-label_month" value="" default="default" selected="selected">Month</option>
															<option value="1">01</option>
															<option value="2">02</option>
															<option value="3">03</option>
															<option value="4">04</option>
															<option value="5">05</option>
															<option value="6">06</option>
															<option value="7">07</option>
															<option value="8">08</option>
															<option value="9">09</option>
															<option value="10">10</option>
															<option value="11">11</option>
															<option value="12">12</option>
													</select>
					<select id="expiry-year" required>
															<option id="trans-label_year" value="" default="" selected="selected">Year</option>
													<option value="2018">18</option><option value="2019">19</option><option value="2020">20</option><option value="2021">21</option><option value="2022">22</option><option value="2023">23</option><option value="2024">24</option><option value="2025">25</option><option value="2026">26</option><option value="2027">27</option><option value="2028">28</option><option value="2029">29</option><option value="2030">30</option><option value="2031">31</option><option value="2032">32</option><option value="2033">33</option><option value="2034">34</option><option value="2035">35</option><option value="2036">36</option><option value="2037">37</option><option value="2038">38</option><option value="2039">39</option><option value="2040">40</option><option value="2041">41</option><option value="2042">42</option><option value="2043">43</option><option value="2044">44</option><option value="2045">45</option><option value="2046">46</option><option value="2047">47</option></select>
				</div>
			</div>
			
			<div id="form-sec-code" class="form-field">
				<label for="sec-code">Security code:</label>
				<input type="password" maxlength="3" placeholder="123" required>
			</div>
			
			<button type="submit">Purchase Premium</button>
		</form>
	</section>
</main>
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,700");

$gradient: linear-gradient(
	135deg,
	rgba(91, 36, 122, 0.45) 0%,
	rgba(27, 206, 223, 0.55) 100%
);
$shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
$primary: #4183d7;
$secondary: #66cc99;

html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: center;

	background: linear-gradient(#e6e6e6, #bbbbbb);

	font-family: "Raleway", sans-serif;
}

#main {
	position: relative;
	width: 550px;
	height: 330px;

	left: 30px;

	border-radius: 10px;
	box-shadow: $shadow;

	background-color: white;
}

#left {
	position: relative;
	background: $gradient,
		url("https://images.pexels.com/photos/556663/pexels-photo-556663.jpeg?auto=compress&cs=tinysrgb&h=650&w=940");
	background-size: cover;
	background-position: center;

	height: calc(100% + 50px);
	width: 40%;
	top: -35px;
	left: -50px;
	padding: 10px 25px;

	box-shadow: $shadow;

	color: white;

	display: flex;
	flex-flow: column nowrap;
	justify-content: space-between;
}

#left #head {
	opacity: 0.95;
}

#right {
	position: absolute;
	width: calc(60% - 40px);
	height: 100%;
	top: 0;
	left: 40%;

	display: flex;
	flex-flow: column nowrap;

	padding-left: 20px;
}

#right form {
	display: flex;
	flex-flow: column nowrap;

	width: 100%;
}

#right form input,
#right form select {
	-moz-appearance:none; /* Firefox */
	-webkit-appearance:none; /* Safari and Chrome */
	appearance:none;
	border: none;
	border-bottom: 1.5px solid #ccc;
	
	padding: 5px;
	margin-top: 2.5px;
	position: relative;
}

#right form .form-field {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	
	margin-bottom: 12.5px;
}

#right form #date-val {
	display: flex;
	justify-content: space-between;
}

#right form #date-val select {
	width: 45%;
}

#right form button[type="submit"] {
	background: linear-gradient(
								135deg,
								$primary 0%,
								$secondary 100%
							);
	padding: 5px;
	border: none;
	border-radius: 50px;
	color: white;
	font-weight: 400;
	font-size: 12pt;
	margin-top: 10px;
}

#right form button[type="submit"]:hover {
	background: transparent;
	box-shadow: 0 0 0 3px $primary;
	color: $primary;
}
View Compiled

External CSS

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

External JavaScript

This Pen doesn't use any external JavaScript resources.