Bootstrap snippet: Large Blocks With No Space Arrow

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: blocks,large



<div class="container bootstrap snippet"> <div class="row-fluid"> <div class="col-md-6 wp-block no-space arrow-right base no-margin"> <div class="wp-block-body"> <div class="img-icon"> <img src="http://preview.webpixels.ro/boomerang-v2.0.1/images/icons/svg/clipboard.svg" alt="Clipboard"> </div> <h1>Your title</h1> <p class="text-center"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes. </p> <div class="text-center mt-15"> <a href="#" class="btn btn-b-white">Sign up</a> </div> </div> </div> <div class="col-md-6 wp-block no-space light no-margin"> <div class="wp-block-body"> <div class="img-icon"> <img src="http://preview.webpixels.ro/boomerang-v2.0.1/images/icons/svg/book.svg" alt="Book"> </div> <h1>Your title</h1> <p class="text-center"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes. </p> <div class="text-center mt-15"> <a href="#" class="btn btn-b-dark">Sign up</a> </div> </div> </div> </div> </div>
body{ margin-top:20px; } .wp-block { margin: 0 0 15px 0; -webkit-transition: all .3s linear; transition: all .3s linear; position: relative; cursor: default; border-radius: 2px; } .wp-block.no-space.arrow-right.base:after { border-left-color: #3498db; } .wp-block.no-space.arrow-right:after { left: 100%; z-index: 300; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-width: 20px; margin-top: -20px; } .no-margin { margin: 0 !important; } .base { background: #3498db; color: #fff !important; } .light { background: #ecf0f1; color: #333; } .wp-block.light p { color: #333; } .wp-block:before, .wp-block:after { display: table; content: ""; } .wp-block.no-space>.wp-block-body { margin-top: 20px; padding: 20px 40px; min-height: 350px; } .wp-block.no-space .img-icon { display: block; text-align: center; margin: 20px 0 10px 0; } .wp-block.no-space h1 { display: block; font-size: 24px; line-height: 30px; font-weight: 500; text-transform: capitalize; margin: 20px 0 20px 0; padding: 0; text-align: center; } .base h1, .base>h2, .base h3, .base h4, .base h5, .base h6 { color: #fff; } .wp-block.base p { color: #fff; } .mt-15 { margin-top: 15px; } .btn-b-white { background-color: transparent; border: 2px solid #fff; color: #fff !important; } .btn-b-white:hover, .btn-b-white:focus, .btn-b-white:active, .btn-b-white.active, .open .dropdown-toggle.btn-b-white { color: #3498db !important; background-color: #fff; border-color: #fff; } .btn-b-white:active, .btn-b-white.active, .open .dropdown-toggle.btn-b-white { background-image: none; } .btn-b-white:hover:before { color: #3498db !important; } .btn-b-white.btn-icon:before { border-right: 2px solid #fff; } .btn-b-white.btn-icon-right:before { border-right: 0; border-left: 2px solid #fff; } .btn-b-dark { background-color: transparent; border: 2px solid #131313; color: #131313; } .btn-b-dark:hover, .btn-b-dark:focus, .btn-b-dark:active, .btn-b-dark.active, .open .dropdown-toggle.btn-b-dark { color: #fff; background-color: #131313; border-color: #131313; } .btn-b-dark:active, .btn-b-dark.active, .open .dropdown-toggle.btn-b-dark { background-image: none; } .btn-b-dark.btn-icon:before { border-right: 2px solid #131313; } .btn-b-dark.btn-icon-right:before { border-right: 0; border-left: 2px solid #131313; } @media (max-width: 767px) { .wp-block.no-space.arrow-right.base:after { border-left-color: transparent; border-top-color: #3498db; } } @media (max-width: 767px){ .wp-block.no-space.arrow-right:after { margin-top: 0 !important; top: 100%; z-index: 2000; left: 50%; margin-left: -20px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-width: 20px; margin-top: -20px; } }
Dey-Dey

Large Blocks With No Space Arrow

Dey-Dey
  Jun 18th 2015, 07:34
2.3K Views