"thank you page"
Bootstrap 4.1.1 Snippet by tieusuquay79

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Thank you page</title> <link rel="stylesheet" href="./style.css"> </head> <body> <div class=thankyou> <div class="thankyou-popup"> <div class="thankyou-popup-header"> <h3>Thank You !</h3> <h4>Đặt vé thành công.</h4> <p>Chúng tôi đã gửi một email chứa vé điện tử đến Email bạn cung cấp khi đặt vé. Vui lòng kiểm tra cả thư mục Quảng cáo, Spam nếu bạn không tìm thấy Email.</p> <button class="order-id"> Mã đơn hàng: #5355537 </button> <div class="order-id-2"> Mã đơn hàng: <span>#140720565</span> </div> </div> <div class="thankyou-popup-footer"> <p>Chưa nhận được Email? <a href="#">Liên hệ để được hỗ trợ</a> </p> </div> </div> </div> <link href="https://fonts.googleapis.com/css?family=Kaushan+Script|Source+Sans+Pro" rel="stylesheet"> <!-- partial --> </body> </html>
.thankyou-popup{ width:100%; height:100vh; display: flex; flex-direction: column; } .thankyou-popup-header{ padding :30px; text-align:center; } .thankyou-popup-header h3{ font-family: 'Kaushan Script', cursive; font-size:4em; letter-spacing:3px; color: #44ca91; margin:0; margin-bottom:20px; } .wrapper-2 h4 { margin: 0; font-size: 1.3em; margin-bottom: 14px; color: #3e3e3e; letter-spacing: 1px; text-transform: uppercase; } .thankyou-popup-header p { margin: 0; color: #5f5f5f; letter-spacing: 1px; font-size: 18px; } .order-id{ color:#fff; font-size: 20px; font-weight: 700; background: #44ca90; border:none; padding:10px 50px; margin:30px 0; border-radius:30px; text-transform:capitalize; box-shadow: 0 10px 16px 1px rgba(174, 199, 251, 1); display: none; } .order-id-2 { font-size: 25px; color: #222; display: inline-block; text-align: center; padding: 10px 20px; border: 2px dashed #222; clear: both; font-weight: 400; margin-top: 20px; } .order-id-2 span { display: block; color: #03a9f4; } .thankyou-popup-footer{ margin-top: auto; background:#D7E6FE; background: #dadada; padding:6px; text-align:center; } .thankyou-popup-footer p{ margin:0; padding:4px; color:#5892FF; font-family: 'Source Sans Pro', sans-serif; letter-spacing:1px; } .thankyou-popup-footer p a{ text-decoration:none; color:#5892FF; font-weight:600; } @media (min-width:360px){ h1{ font-size:4.5em; } .go-home{ margin-bottom:20px; } } @media (min-width:600px){ .thankyou{ max-width:1000px; margin:0 auto; } .thankyou-popup{ height: initial; max-width:620px; margin:0 auto; margin-top:100px; box-shadow: 4px 8px 40px 8px rgba(88, 146, 255, 0.2); } }

Related: See More


Questions / Comments: