Online Voucher

HTML

<!DOCTYPE html> <html> <head> <link rel="stylesheet"href="style.css"> <link href="https://fonts.googleapis.com/css?family=Righteous&display=swap" rel="stylesheet"> </head> <body> <div class="card-body"> <div class="header"> <div class="top"> <p>TOTAL TO PAY</p> </div> <div class="bottom"> <p id="doller">$500</p> </div> </div> <div class="fotter"> <div class="in-fotter"> <div class="paypal"> <a href="https://paypal.com"><p id="b">Pay with</p><span><img src="https://pbs.twimg.com/media/EJMA5emUwAEIhDs?format=png&name=small"></span><p></a> </div> <div class="separator"><label>OR</label></div> <label>CREDIT CARD NUMBER</label> <div class="card"> <input type="text" class="card-number" id="card-number"> <div class="mscard"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/MasterCard_Logo.svg/1280px-MasterCard_Logo.svg.png"> </div> </div> <div class="cvr"> <div class="cvr1"> <label>EXPIRE DATE</label> <input type="text" class="cvc"> </div> <div class="cvr2"> <label>EXPIRE DATE</label> <input type="text" class="cvc"> </div> <label>CARD WONER</label> <input type="text" class="card-woner"id="card-woner"> </div> </div> <div class="btn"> <a id="p" href="#">Process Order</a> </div> </div> </div> </body> </htmL>

CSS

*{ margin:0px; padding:0px; box-sizing:border-box; } .card-body{ height:480px; width:280px; margin:auto; margin-top:20px; margin-bottom:20px; box-shadow:0px 0px 10px 0px; border-radius:5px; overflow:hidden; } .header{ height:120px; background:#d81b60; } .top{ height:70px; } .top p{ text-align:center; line-height:80px; font-size:20px; font-family: 'Righteous', cursive; color:white; } .bottom{ height:80px; } .bottom p{ text-align:center; font-size:50px; line-height:30px; color:white; font-family: 'Righteous', cursive; } #doller:hover{ color:#ffca28; transform:scale(1.03); transition:0.4s; } .fotter{ height:250px; } .in-fotter{ height:280px; width:215px; margin:auto; margin-top:20px; } .paypal{ height:40px; widht:100%; border:2px solid lightgray; } .paypal p{ font-family:arial; line-height:40px; float:left; margin-left:40px; color:gray; } .paypal img{ height:20px; width:70px; float:left; margin-top:9px; } #p{ text-align:center; } .or h3{ color:gray; } label{ font-size:11px; } .card{ height:40px; width:100%; border:2px solid lightgray; } .card-number{ height:36px; width:80%; border:none; } .mscard{ height:40px; width:20%; float:right; } .mscard img{ height:15px; width:28px; float:right; transform:translate(0px,10px); padding-right:2px; } .cvr{ height:40px; width:100%; } .cvr1{ height:60px; width:48%; float:left; margin-right:2%; } .cvr2{ height:60px; width:48%; float:right; } .cvc{ height:40px; width:100%; border:2px solid lightgray; } .card-woner{ height:40px; widht:215px; border:2px solid lightgray; } #card-woner{ width:215px; } .btn{ height:40px; width:80%; margin:auto; background:#d81b60; border-radius:20px; margin-top:-15px; margin:auto; } .btn:hover{ background:#c2185b; transition:0.3s; } .btn a{ text-decoration:none; text-align:center; padding-left:30%; } #p{ color:white; line-height:40px; } //*or css*// .separator{ position: relative; text-align: center; position:relative; } .separator label{ background-color:#fff; padding: 0 0.4em; position: relative; } .separator:before{ content: ""; display: block; background: grey; width: 16%; height:1px; position:absolute; margin-top:10px; } .separator label:after{ content: ""; display: block; background: grey; width: 90px; height:1px; position:absolute; margin-left:130px; margin-top:-8px; }

Javascript