<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.container {
display: flex;
flex-wrap: wrap;
padding: 16px;
}
input[type="text"], select {
display: inline-block;
width: 90%;
margin-bottom: 20px;
padding: 12px;
border: 1px solid #ccc;
border-radius: 3px;
}
label {
margin-left: 20px;
display: block;
}
.formfield {
flex: 25%;
max-width: 25%;
margin: 5px;
background-color: #2efccd;
padding: 5px 20px 15px 20px;
border: 1px solid rgb(191, 246, 250);
border-radius: 3px;
}
.pay {
background-color: #00cc00;
padding: 8px;
font-size: 15px;
width: 70%;
}
.pay:hover {
background-color: #cccccc;
}
p {
background-color: white;
padding : 16px;
}
.icon-container {
margin: 20px;
padding: 7px 0;
font-size: 50px;
}
@media screen and (max-width: 700px) {
.formfield {
flex: 100%;
max-width: 100%;
}
.container {
flex-direction: column;
}
.container :nth-child(1) {order:1;}
.container :nth-child(2) {order:3;}
.container :nth-child(3) {order:2;}
}
</style>
</head>
<body>
<div class= "container">
<div class="formfield">
<form>
<h2> Billing Form </h2>
<label for="fname">Full Name</label>
<input type="text" id="fname" name="fname">
<label for="email"> Email</label>
<input type="text" id="email" name="email">
<label for="add"> Address</label>
<input type="text" id="add" name="address">
</form>
</div>
<div class="formfield">
<form>
<h3>Payment</h3>
<label for="fname">Accepted Cards</label>
<div class="icon-container">
<i class="fa fa-cc-visa" style="color:navy;"></i>
<i class="fa fa-cc-amex" style="color:blue;"></i>
<i class="fa fa-cc-mastercard" style="color:red;"></i>
<i class="fa fa-cc-discover" style="color:orange;"></i>
</div>
<label for="cname">Name on Card</label>
<input type="text" id="cname" name="cardname">
<label for="ccnum">Card number</label>
<input type="text" id="ccnum" name="cardnumber">
<div class="payment">
<div>
<label for="expyear">Exp Year</label>
<select name="Year" id="Year">
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
</select>
</div>
<div>
<label for="cvv">CVV</label>
<input type="text" id="cvv" name="cvv" placeholder="cvv">
</div>
</div>
<input type="submit" value="Continue to pay" class="pay">
</form>
</div>
<div class="formfield">
<h4> Cart Items </h4>
<p>
<a style="text-decoration: none;" href="#">Product 1</a><span class="price">Rs 500</span>
</p>
<p>
<a style="text-decoration: none;" href="#">Product 2</a><span class="price"> Rs 200</span>
</p>
<p>
Total <span class="price" style="color:black"> Rs 250</span>
</p>
</div>
</div>
</body>
</html>