"Success Notification Boxes"
Bootstrap 3.3.0 Snippet by HakanBulgurlu

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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-US"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>Success Notification Boxes</title> <link rel="shortcut icon" href="favicon.ico"> <link rel="icon" href="favicon.ico"> <link rel="stylesheet" type="text/css" media="all" href="style.css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> </head> <body> <div id="w"> <div id="content"> <!-- Icons source http://dribbble.com/shots/913555-Flat-Web-Elements --> <div class="notify successbox"> <h1>Success!</h1> <span class="alerticon"><img src="http://s22.postimg.org/i5iji9hv1/check.png" alt="checkmark" /></span> <p>Thanks so much for your message. We check e-mail frequently and will try our best to respond to your inquiry.</p> </div> <div class="notify errorbox"> <h1>Warning!</h1> <span class="alerticon"><img src="http://s22.postimg.org/ulf9c0b71/error.png" alt="error" /></span> <p>You did not set the proper return e-mail address. Please fill out the fields and then submit the form.</p> </div> </div><!-- @end #content --> </div><!-- @end #w --> </body> </html>
/** resets **/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; outline: none; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { height: 101%; } body { background: #f0f0f0 url('http://s22.postimg.org/3l1gnfmwd/image.gif'); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #313131; font-size: 62.5%; line-height: 1; } ::selection { background: #a4dcec; } ::-moz-selection { background: #a4dcec; } ::-webkit-selection { background: #a4dcec; } ::-webkit-input-placeholder { /* WebKit browsers */ color: #ccc; font-style: italic; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #ccc; font-style: italic; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #ccc; font-style: italic; } :-ms-input-placeholder { /* Internet Explorer 10+ */ color: #ccc !important; font-style: italic; } br { display: block; line-height: 2.2em; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul { list-style: none; } input, textarea { -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } strong { font-weight: bold; } table { border-collapse: collapse; border-spacing: 0; } img { border: 0; max-width: 100%; } #topbar { background: #4f4a41; padding: 10px 0 10px 0; text-align: center; } #topbar a { color: #fff; font-size:1.3em; line-height: 1.25em; text-decoration: none; opacity: 0.5; font-weight: bold; } #topbar a:hover { opacity: 1; } /** typography **/ h1 { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 2.5em; line-height: 1.5em; letter-spacing: -0.05em; margin-bottom: 20px; padding: .1em 0; color: #444; position: relative; overflow: hidden; white-space: nowrap; text-align: center; } h1:before, h1:after { content: ""; position: relative; display: inline-block; width: 50%; height: 1px; vertical-align: middle; background: #f0f0f0; } h1:before { left: -.5em; margin: 0 0 0 -50%; } h1:after { left: .5em; margin: 0 -50% 0 0; } h1 > span { display: inline-block; vertical-align: middle; white-space: normal; } p { display: block; font-size: 1.35em; line-height: 1.5em; margin-bottom: 22px; } /** page structure **/ #w { display: block; width: 750px; margin: 0 auto; padding-top: 30px; } #content { display: block; width: 100%; background: #fff; padding: 25px 20px; padding-bottom: 35px; -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px; -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px; } .flatbtn { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: inline-block; outline: 0; border: 0; color: #f9f8ed; text-decoration: none; background-color: #b6a742; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); font-size: 1.2em; font-weight: bold; padding: 12px 22px 12px 22px; line-height: normal; text-align: center; vertical-align: middle; cursor: pointer; text-transform: uppercase; text-shadow: 0 1px 0 rgba(0,0,0,0.3); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3); -moz-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3); box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3); } .flatbtn:hover { color: #fff; background-color: #c4b237; } .flatbtn:active { -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1); box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1); } /** notifications **/ .notify { display: block; background: #fff; padding: 12px 18px; max-width: 400px; margin: 0 auto; cursor: pointer; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; margin-bottom: 20px; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px 0px; } .notify h1 { margin-bottom: 6px; } .successbox h1 { color: #678361; } .errorbox h1 { color: #6f423b; } .successbox h1:before, .successbox h1:after { background: #cad8a9; } .errorbox h1:before, .errorbox h1:after { background: #d6b8b7; } .notify .alerticon { display: block; text-align: center; margin-bottom: 10px; }

Related: See More


Questions / Comments: