Scribd
Upload
100 views13 pages

SWD Micro Project

The document is a micro project submission for a static web design course. It includes HTML and CSS code for a credit card payment form. The form allows users to enter their credit card number, expiration date, and CVV. It also includes buttons to proceed with payment or pay with PayPal. The code was written by Patel Sarthak Nileshbhai and submitted to the Information Technology Department.

Uploaded by

barotguru844
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
100 views13 pages

SWD Micro Project

The document is a micro project submission for a static web design course. It includes HTML and CSS code for a credit card payment form. The form allows users to enter their credit card number, expiration date, and CVV. It also includes buttons to proceed with payment or pay with PayPal. The code was written by Patel Sarthak Nileshbhai and submitted to the Information Technology Department.

Uploaded by

barotguru844
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 13

Micro Project

On
Project Title:- Credit Card Payment Form

By
Name :- PATEL SARTHAK NILESHBHAI

Enrollment No: 226040316045

A Micro Project in Static Web Design(4311603)

Submitted to

Information Technology Department


B & B Institute of Technology, Vallabh Vidyanagar
HTML CODE

<form class="credit-card">
<div class="form-header">
<h4 class="title">Credit card detail</h4>
</div>

<div class="form-body">
<!-- Card Number -->
<input type="text" class="card-number"
placeholder="Card Number">

<!-- Date Field -->


<div class="date-field">
<div class="month">
<select name="Month">
<option value="january">January</option>
<option value="february">February</option>
<option value="march">March</option>
<option value="april">April</option>
<option value="may">May</option>
<option value="june">June</option>
<option value="july">July</option>
<option value="august">August</option>
<option
value="september">September</option>
<option value="october">October</option>
<option value="november">November</option>
<option value="december">December</option>
</select>
</div>
<div class="year">
<select name="Year">
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
</select>
</div>
</div>

<!-- Card Verification Field -->


<div class="card-verification">
<div class="cvv-input">
<input type="text" placeholder="CVV">
</div>
<div class="cvv-details">
<p>3 or 4 digits usually found <br> on the
signature strip</p>
</div>
</div>

<!-- Buttons -->


<button type="submit" class="proceed-btn"><a
href="#">Proceed</a></button>
<button type="submit" class="paypal-btn"><a
href="#">Pay With</a></button>
</div>
</form>
CSS CODE

<link href='https://fonts.googleapis.com/css?
family=Roboto:400,300,100' rel='stylesheet'
type='text/css'>
<link rel="stylesheet" href="style.css">
/* Global */
*{
box-sizing: border-box;
}

body,
html {
height: 100%;
min-height: 100%;
}

body {
font-family: 'Roboto',
sans-serif;
margin: 0;
background-color: #e7e7e7;
}
* Credit Card */
.credit-card {
width: 360px;
height: 400px;
margin: 60px auto 0;
border: 1px solid #ddd;
border-radius: 6px;
background-color: #fff;
box-shadow: 1px 2px 3px 0 rgba(0,0,0,.10);
}
.form-header {
height: 60px;
padding: 20px 30px 0;
border-bottom: 1px solid #e1e8ee;
}
.form-body {
height: 340px;
padding: 30px 30px 20px;
}
/* Title */
.title {
font-size: 18px;
margin: 0;
color: #5e6977;
}
/* Common */
.card-number,
.cvv-input input,
.month select,
.year select {
font-size: 14px;
font-weight: 100;
line-height: 14px;
}
.card-number,
.month select,
.year select {
font-size: 14px;
font-weight: 100;
line-height: 14px;
}
.card-number,
.cvv-details,
.cvv-input input,
.month select,
.year select {
opacity: .7;
color: #86939e;
}
/* Card Number */
.card-number {
width: 100%;
margin-bottom: 20px;
padding-left: 20px;
border: 2px solid #e1e8ee;
border-radius: 6px;
/* Date Field */
.month select,
.year select {
width: 145px;
margin-bottom: 20px;
padding-left: 20px;
border: 2px solid #e1e8ee;
border-radius: 6px;
background: url('caret.png') no-repeat;
background-position: 85% 50%;
-moz-appearance: none;
-webkit-appearance: none;
}

.month select {
float: left;
}

.year select {
float: right;
}
/* Card Verification Field */
.cvv-input input {
float: left;
width: 145px;
padding-left: 20px;
border: 2px solid #e1e8ee;
border-radius: 6px;
background: #fff;
}

.cvv-details {
font-size: 12px;
font-weight: 300;
line-height: 16px;
float: right;
margin-bottom: 20px;
}

.cvv-details p {
margin-top: 6px;
}
/* Buttons Section */
.paypal-btn,
.proceed-btn {
cursor: pointer;
font-size: 16px;
width: 100%;
border-color: transparent;
border-radius: 6px;
}

.proceed-btn {
margin-bottom: 10px;
background: #7dc855;
}

.paypal-btn a,
.proceed-btn a {
text-decoration: none;
}
.proceed-btn a {
color: #fff;
}

.paypal-btn a {
color: rgba(242, 242, 242, .7);
}
.paypal-btn {
padding-right: 95px;
background: url('paypal-logo.svg') no-repeat 65%
56% #009cde;
}

OUTPUT:-

You might also like