"Interface: Finish"
Bootstrap 4.1.1 Snippet by Shobhan

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link href='https://fonts.googleapis.com/css?family=Lato:300,400|Montserrat:700' rel='stylesheet' type='text/css'> <style> @import url(//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css); @import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css); </style> <script src="https://2-22-4-dot-lead-pages.appspot.com/static/lp918/min/jquery-1.9.1.min.js"></script> <script src="https://2-22-4-dot-lead-pages.appspot.com/static/lp918/min/html5shiv.js"></script> </head> <body> <div class="thankyou-content"> <header class="site-header" id="header"> <h1 class="site-header__title" data-lead-id="site-header-title">Transfer my Claim</h1> </header> <div class="main-content"> <p class="main-content__body" data-lead-id="main-content-body">We've received your claim details. <br /><br /> We will pass our claim details onto one of our panel and lawyers and they will be in touch with you within 48 hours. <br /><br /> Thank you for using our services.</p> <button type="button" class="ok-btn">OK</button> </div> </div> </body> </html>
@font-face { font-family: "Akkurat-Regular"; src:url("../font/akkurat/lineto-akkurat-regular.eot"); src:url("../font/akkurat/lineto-akkurat-regular.eot?#iefix") format("embedded-opentype"), url("../font/akkurat/lineto-akkurat-regular.woff") format("woff"); font-weight: normal; font-style: normal; } .cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } * { box-sizing: border-box; } html { font-size: 16px; background-color: #fffffe; } body { padding: 0 20px; min-width: 300px; font-family: 'Akkurat-Regular', sans-serif; background-color: #fffffe; color: #1a1a1a; text-align: center; word-wrap: break-word; -webkit-font-smoothing: antialiased } a:link, a:visited { color: #00c2a8; } a:hover, a:active { color: #03a994; } .site-header { margin: 0 auto; max-width: 32em; } .site-header__title { margin: 0; font-size: 1rem; line-height: 1.1; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; text-transform: uppercase; font-weight: bold; } .main-content { margin: 0 auto; max-width: 32em; } .main-content__checkmark { font-size: 4.0625rem; line-height: 1; color: #24b663; } .main-content__body { margin: 30px 0 0; font-size: 1rem; line-height: 1.4; } .site-footer { margin: 0 auto; padding: 80px 0 25px; padding: 0; max-width: 820px; } .thankyou-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border: 1px solid #000; width: 34em; padding: 30px; } .site-footer__fineprint { font-size: 0.9375rem; line-height: 1.3; font-weight: 300; } .ok-btn { width: 100%; background: #548235; border: 1px solid #444; font-size: 13px; padding: 4px 0; color: #fff; margin: 30px 0; border-radius: 4px; } @media only screen and (min-width: 40em) { .site-header__title { font-size: 1.3rem; } .main-content__checkmark { font-size: 9.75rem; } .main-content__body { font-size: 1rem; text-align: left; } .site-footer { padding: 145px 0 25px; } .site-footer__fineprint { font-size: 1.125rem; } }

Related: See More


Questions / Comments: