Skip to content

Instantly share code, notes, and snippets.

@kshitij-gavhane

kshitij-gavhane/index.html

Created October 3, 2022 14:41
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kshitij-gavhane/2d72a1bb774d72a94aa2a74909ea0507 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kshitij-gavhane/2d72a1bb774d72a94aa2a74909ea0507 to your computer and use it in GitHub Desktop.
Download ZIP
Payment Page
Raw
index.html
<div class="header">
<div class="header-inner">
<img class="logo" src="https://dl.dropbox.com/s/7umwat48oy7usvs/Reconnect%20Logo.svg?dl=0">
<div class="menu">PAYMENT TYPES&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;LOGOUT</div>
</div>
</div>
<div class="heading">
<h3>Order Review</h3>
<div class="grid-container">
<div class="label-cell label-cell-left Label-1"><label class="base-label">Name</label></div>
<div class="label-cell Text-1"><p class="order-details">Josie Wellington</p></div>
<div class="label-cell label-cell-left Label-2"><label class="base-label">Email Address</label></div>
<div class="label-cell Text-2"><p class="order-details">[email protected]</p></div>
<div class="label-cell label-cell-left Label-3"><label class="base-label">Program Name</label></div>
<div class="label-cell Text-3"><p class="order-details">Core + Video</p></div>
<div class="label-cell label-cell-left Label-4"><label class="base-label">Program Start</label></div>
<div class="label-cell Text-4"><p class="order-details">August 1, 2020</p></div>
<div class="label-cell label-cell-left Label-5 bottom-border"><label class="base-label">Program End</label></div>
<div class="label-cell Text-5 bottom-border"><p class="order-details">December 31, 2020</p></div>
</div>
<!--div>
<div class="inline"><label class="base-label">Name</label>
<p class="order-details">Josie Wellington</p></div>
<div class="inline"><label class="base-label">Email Address</label>
<p class="order-details">[email protected]</p></div>
</div>
<div>
<div class="inline"><label class="base-label">Program End</label>
<p class="order-details">December 31, 2020</p></div>
</div-->
<label class="base-label margin-40">Order Details</label>
<ul class=leaders>
<li class="margin-20"><span>1 month&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Core Platform</span>
<span>$15.00</span></li>
<li class="margin-20"><span>1 month&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Video Chat</span>
<span>$5.00</span></li>
<li class="margin-40"><strong><span>Total</span>
<span>$20.00</span></strong></li>
</ul>
<h3 class="margin-40">Payment</h3>
<form action="/action_page.php">
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> <strong>By checking this box, you agree that your debit/credit card will be charged $20.00.</strong><br><br>
You also agree that, unless you are removed from the program before the program end date, your subscription will automatically renew and you authorize us to continue to charge your debit/credit card $20.00 monthly (until removed from the program). Once charged, all purchases, including renewals, are non-refundable.</label>
</form>
</div>
<div class="margin-40">
<div class="card">
<div class="three-column">
<div>
<label class="base-label">Card on File</label>
XXXX-XXXX-XXXX-1234
</div>
<div>
<label class="base-label">Expiration</label>
01/23
</div>
<div class="mc"><label class="base-label">Card Type</label>
<img src="https://brand.mastercard.com/content/dam/mccom/brandcenter/thumbnails/mastercard_circles_92px_2x.png"></div>
</div>
<input type="button" value="Pay with this card" class="button"></input>
</div>
<div class="card" style="margin-top:40px">
<label class="base-label">Name</label>
<input class="base-input" id="_905815077" type="text" name="client_id" placeholder="" value="">
<label class="base-label">Card Number</label>
<input class="base-input input-cc-icon" id="_905815077" type="text" name="client_id" placeholder="" value="">
<label class="base-label">Expiration</label>
<input class="base-input" id="_905815077" type="text" name="client_id" placeholder="" value="">
<label class="base-label">CVC</label>
<input class="base-input" id="_905815077" type="text" name="client_id" placeholder="" value="">
<input type="button" value="Pay Now" class="button"></input>
</div>
<div class="footer">
<div class="footer-info">&copy; 2020 Reconnect&nbsp;&nbsp;|&nbsp;&nbsp;<a href="">Terms of Service</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="https://reconnect.io/who-we-are/">About Us</a>
</div>
</div>
Raw
payment-page.markdown
Raw
style.css
body {
background: #ecf0f9;
color: #2f3d49;
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
font-size: 1.1rem;
font-weight: 400;
margin: 0;
padding: 0;
}
a {
color: #adc7cb;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.header {
background: #fff;
height: 90px;
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.header-inner {
margin: auto;
padding: 0;
width: 700px;
}
.logo {
margin-top: 29px;
width: 240px;
}
.menu {
color: #00819b;
float: right;
font-size: 15px;
font-weight: 600;
letter-spacing: 1px;
padding-top: 34px;
}
.heading {
margin: 120px auto 0;
max-width: 700px;
}
.margin-20 {
margin-top: 20px;
}
.margin-40 {
margin-top: 40px;
}
.three-column {
display: grid;
grid-template-columns: 3fr .75fr .75fr;
grid-gap: 20px;
}
.mc {
float:right;
}
.mc img {
width: 40px;
}
ul.leaders {
max-width: 40em;
padding: 0;
margin-top: 0;
overflow-x: hidden;
list-style: none
}
ul.leaders li:before {
float: left;
width: 0;
white-space: nowrap;
content:
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "}
ul.leaders span:first-child {
padding-right: 0.33em;
background: #ecf0f9}
ul.leaders span + span {
float: right;
padding-left: 0.33em;
background: #ecf0f9}
.card {
background: #fff;
border-radius: 2px;
box-shadow: 0 2px 8px 1px #ccc;
margin: auto;
max-width: 620px;
padding: 40px;
}
.base-label {
color: #4d4d4d;
cursor: text;
display: block;
font-weight: 600;
margin-bottom: 6px;
text-transform: uppercase;
-webkit-transition: display .3s ease-out;
transition: display .3s ease-out;
font-size: 12px;
}
.grid-container {
background: #fff;
display: grid;
grid-template-columns: 19% 80%;
grid-template-rows: 48px 48px 48px 48px 48px;
gap: 1px 1px;
grid-template-areas: "Label-1 Text-1" "Label-2 Text-2" "Label-3 Text-3" "Label-4 Text-4" "Label-5 Text-5";
}
.Label-1 { grid-area: Label-1;}
.Text-1 { grid-area: Text-1; }
.Label-2 { grid-area: Label-2; }
.Text-2 { grid-area: Text-2; }
.Label-3 { grid-area: Label-3; }
.Text-3 { grid-area: Text-3; }
.Label-4 { grid-area: Label-4; }
.Text-4 { grid-area: Text-4; }
.Label-5 { grid-area: Label-5; }
.Text-5 { grid-area: Text-5; }
.label-cell {
border-top: 1px solid #ccc;
padding: 12px;
}
.bottom-border {
border-bottom: 1px solid #ccc;
}
.label-cell-left {
padding-top: 18px;
}
.order-details {
margin-top: 0;
}
.input-cc-icon {
background: url(https://dl.dropbox.com/s/7xa2zvqhs2xhyq4/cc.png?dl=0) no-repeat scroll 7px 10px;
}
.base-input {
height: 20px;
background-color: #fbfafb;
border-radius: 2px;
width: 97%;
border: 1px solid #ccc;
padding: 8px 0 9px 10px;
margin-bottom: 18px;
color: #2f3d49;
line-height: 16px;
font-size: 14px;
}
.button {
background-color: hsl(16, 100%, 57%)/*#4b858e*/;
border: none;
border-radius: 4px;
color: #fff;
display: block;
font-size: 14px;
font-weight: 600;
letter-spacing: 2px;
margin: 24px 0 0;
min-width: 300px;
padding: 16px;
position: relative;
text-transform: uppercase;
transition: background-color 0.15s ease-out;
width: 99%;
}
.button:hover {
background-color: #FF4B0A;
cursor: pointer;
}
.footer {
background: #2f3d49;
height: 60px;
margin-top: 100px;
width: 100%
}
.footer-info {
color: #fff;
font-size: 13px;
margin: auto;
padding-top: 22px;
max-width: 700px;
}
@media only screen and (max-width: 600px) {
body {
margin: 0;
padding: 0 20px 0;
}
.logo {
margin-left: 20px
}
.inline {
width: 100%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment