"box 2a"
Bootstrap 3.3.0 Snippet by exigentinc

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="cardcontainerWrapper"> <div id="cardcontainer1"> <div class="circle1"> <i class="fa fa-credit-card"></i> </div> <h2>BEZAHLUNG</h2> <div class="cardtext1"> Die Bezahlung ist per <b>PayPal</b> und <b>Bankberweisung</b> mglich. </div> </div> <div id="cardcontainer2"> <div class="circle2"> <i class="fa fa-truck"></i> </div> <h2>VERSAND</h2> <div class="cardtext2"> Der Versand erfolgt digital <b>innerhalb von 10 Minuten</b> nach Zahlungseingang. Sie erhalten eine Mail mit Zugangsdaten zu Ihrem Download-Kundenbereich </div> </div> </div>
/*! CSS Used from: https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/evoAuction_fonts.css */.fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .fa-credit-card:before { content: "\f09d"; } .fa-truck:before { content: "\f0d1"; }/*! CSS Used from: Embedded */.cardcontainerWrapper { float: right; width: 310px; font-family: 'Source Sans Pro',sans-serif; margin-right: 30px; margin-top: 100px; margin-bottom: 50px; padding-bottom: 66px; background-color: #fff; padding-left: 35px; padding-top: 50px; border: 1px solid #ebebeb; box-shadow: 0 2px 4px 0 rgba(0,0,0,.06); } .cardcontainerWrapper h2 { text-align: center; font-size: 20px; padding-top: 25px; color: #fff; font-weight: 400; overflow: hidden; margin: 0 0 15px 10px; } #cardcontainer1 { max-width: 240px; min-height: 170px; background-color: #e67e22; padding-left: 20px; padding-right: 20px; border-radius: 10px; color: #333; } #cardcontainer2 { max-width: 240px; min-height: 170px; background-color: #e67e22; padding-left: 20px; padding-right: 20px; border-radius: 10px; margin-top: 60px; } .cardtext1,.cardtext2 { color: #fff; margin: 0 0 0 10px; padding: 0 0 20px 0; } .circle1,.circle2 { border-radius: 100%; float: left; width: 80px; height: 80px; background-color: #fff; position: relative; margin-top: -30px; margin-left: -50px; text-align: center; } .circle1 i { font-size: 25px; line-height: 80px; color: #e67e22; } .circle2 i { font-size: 25px; color: #333; line-height: 80px; color: #e67e22; } @media only screen and (max-width:1120px),only screen and (max-width:1120px) and (-moz-min-device-pixel-ratio:3),only screen and (max-width:1120px) and (-o-min-device-pixel-ratio:3/2),only screen and (max-width:1120px) and (-webkit-min-device-pixel-ratio:3),only screen and (max-width:1120px) and (min-device-pixel-ratio:3),only screen and (max-width:1120px) and (-moz-min-device-pixel-ratio:2),only screen and (max-width:1120px) and (-o-min-device-pixel-ratio:2/1),only screen and (max-width:1120px) and (-webkit-min-device-pixel-ratio:2),only screen and (max-width:1120px) and (min-device-pixel-ratio:2),only screen and (max-width:1120px) and (-moz-min-device-pixel-ratio:3),only screen and (max-width:1120px) and (-o-min-device-pixel-ratio:3),only screen and (max-width:1120px) and (-webkit-min-device-pixel-ratio:3),only screen and (max-width:1120px) and (min-device-pixel-ratio:3),only screen and (max-width:1120px) and (-webkit-min-device-pixel-ratio:1.5) { .cardcontainerWrapper { width: 100%; clear: both; height: auto; padding-bottom: 50px; padding-left: 0; margin-bottom: 100px; text-align: center; margin-top: 0; } #cardcontainer1,#cardcontainer2 { display: inline-block; vertical-align: top; margin: 0 20px; } } @media only screen and (max-width:1024px),only screen and (max-width:1024px) and (-moz-min-device-pixel-ratio:3),only screen and (max-width:1024px) and (-o-min-device-pixel-ratio:3/2),only screen and (max-width:1024px) and (-webkit-min-device-pixel-ratio:3),only screen and (max-width:1024px) and (min-device-pixel-ratio:3),only screen and (max-width:1024px) and (-moz-min-device-pixel-ratio:2),only screen and (max-width:1024px) and (-o-min-device-pixel-ratio:2/1),only screen and (max-width:1024px) and (-webkit-min-device-pixel-ratio:2),only screen and (max-width:1024px) and (min-device-pixel-ratio:2),only screen and (max-width:1024px) and (-moz-min-device-pixel-ratio:3),only screen and (max-width:1024px) and (-o-min-device-pixel-ratio:3),only screen and (max-width:1024px) and (-webkit-min-device-pixel-ratio:3),only screen and (max-width:1024px) and (min-device-pixel-ratio:3),only screen and (max-width:1024px) and (-webkit-min-device-pixel-ratio:1.5) { .cardcontainerWrapper { width: 100%; clear: both; height: auto; padding-bottom: 50px; padding-left: 0; margin-bottom: 100px; } .cardcontainerWrapper { margin: 0 auto; text-align: center; } #cardcontainer1 h2,#cardcontainer2 h2 { text-align: center; margin-left: 0; } #cardcontainer1,#cardcontainer2 { float: none; display: inline-block; vertical-align: top; margin-top: 0; text-align: left; } #cardcontainer1 { min-height: 300px; width: 40%; padding-left: 30px; padding-top: 20px; margin: 0 20px 0 0; } #cardcontainer2 { min-height: 300px; padding-left: 30px; height: auto; width: 40%; padding-top: 20px; } .circle1 { float: none; background-color: #e67e22; position: relative; top: 0; left: 0; margin: 0 auto; border: 4px solid #fff; } .circle2 { float: none; background-color: #e67e22; position: relative; top: 0; left: 0; margin: 0 auto; border: 4px solid #fff; } .circle1 i { color: #fff; } .circle2 i { color: #fff; } .cardcontainerWrapper { width: 100%; clear: both; height: auto; padding-bottom: 50px; padding-left: 0; margin-bottom: 100px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; } } @media only screen and (max-width:660px) { #cardcontainer1,#cardcontainer2 { display: block; margin: 20px auto; } } @media only screen and (max-width:480px),only screen and (max-width:480px) and (-moz-min-device-pixel-ratio:3),only screen and (max-width:480px) and (-o-min-device-pixel-ratio:3/2),only screen and (max-width:480px) and (-webkit-min-device-pixel-ratio:3),only screen and (max-width:480px) and (min-device-pixel-ratio:3),only screen and (max-width:480px) and (-moz-min-device-pixel-ratio:2),only screen and (max-width:480px) and (-o-min-device-pixel-ratio:2/1),only screen and (max-width:480px) and (-webkit-min-device-pixel-ratio:2),only screen and (max-width:480px) and (min-device-pixel-ratio:2),only screen and (max-width:480px) and (-moz-min-device-pixel-ratio:3),only screen and (max-width:480px) and (-o-min-device-pixel-ratio:3),only screen and (max-width:480px) and (-webkit-min-device-pixel-ratio:3),only screen and (max-width:480px) and (min-device-pixel-ratio:3),only screen and (max-width:480px) and (device-aspect-ratio:9/16),only screen and (device-width:480px) and (device-height:480px) and (-webkit-device-pixel-ratio:3),only screen and (max-width:480px) and (-webkit-min-device-pixel-ratio:1.5) { .cardcontainerWrapper { text-align: center; height: auto; clear: both; margin: 0 auto; box-shadow: none; } #cardcontainer1,#cardcontainer2 { margin: 20px auto 20px auto; float: none; width: auto; padding-bottom: 20px; min-height: 300px; display: block; } #cardcontainer1 h2 { text-align: center; } #cardcontainer2 h2 { text-align: center; } .cardtext1 { margin-top: 20px; text-align: center; font-size: 15px; } .cardtext2 { margin-top: 20px; text-align: center; font-size: 15px; } }/*! CSS Used fontfaces */@font-face { font-family:FontAwesome;src:url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/fontawesome-webfont.eot?v=4.7.0);src:url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/fontawesome-webfont.eot#iefix&v=4.7.0) format('embedded-opentype'),url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/fontawesome-webfont.woff2?v=4.7.0) format('woff2'),url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/fontawesome-webfont.woff?v=4.7.0) format('woff'),url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/fontawesome-webfont.ttf?v=4.7.0) format('truetype'),url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular) format('svg');font-weight:400;font-style:normal; } @font-face { font-family:'Source Sans Pro';font-style:normal;font-weight:300;src:url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/source-sans-pro-v11-latin-300.eot);src:local('Source Sans Pro Light'),local('SourceSansPro-Light'),url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/source-sans-pro-v11-latin-300.eot#iefix) format('embedded-opentype'),url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/source-sans-pro-v11-latin-300.woff2) format('woff2'),url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/source-sans-pro-v11-latin-300.woff) format('woff'),url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/source-sans-pro-v11-latin-300.ttf) format('truetype'),url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/source-sans-pro-v11-latin-300.svg#SourceSansPro) format('svg'); } @font-face { font-family:'Source Sans Pro';font-style:italic;font-weight:300;src:url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/source-sans-pro-v11-latin-300italic.eot);src:local('Source Sans Pro Light Italic'),local('SourceSansPro-LightItalic'),url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/source-sans-pro-v11-latin-300italic.eot#iefix) format('embedded-opentype'),url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/source-sans-pro-v11-latin-300italic.woff2) format('woff2'),url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/source-sans-pro-v11-latin-300italic.woff) format('woff'),url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/source-sans-pro-v11-latin-300italic.ttf) format('truetype'),url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/source-sans-pro-v11-latin-300italic.svg#SourceSansPro) format('svg'); } @font-face { font-family:'Source Sans Pro';font-style:normal;font-weight:400;src:url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/source-sans-pro-v11-latin-regular.eot);src:local('Source Sans Pro Regular'),local('SourceSansPro-Regular'),url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/source-sans-pro-v11-latin-regular.eot#iefix) format('embedded-opentype'),url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/source-sans-pro-v11-latin-regular.woff2) format('woff2'),url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/source-sans-pro-v11-latin-regular.woff) format('woff'),url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/source-sans-pro-v11-latin-regular.ttf) format('truetype'),url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/source-sans-pro-v11-latin-regular.svg#SourceSansPro) format('svg'); } @font-face { font-family:'Source Sans Pro';font-style:italic;font-weight:400;src:url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/source-sans-pro-v11-latin-italic.eot);src:local('Source Sans Pro Italic'),local('SourceSansPro-Italic'),url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/source-sans-pro-v11-latin-italic.eot#iefix) format('embedded-opentype'),url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/source-sans-pro-v11-latin-italic.woff2) format('woff2'),url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/source-sans-pro-v11-latin-italic.woff) format('woff'),url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/source-sans-pro-v11-latin-italic.ttf) format('truetype'),url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/source-sans-pro-v11-latin-italic.svg#SourceSansPro) format('svg'); } @font-face { font-family:'Source Sans Pro';font-style:normal;font-weight:700;src:url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/source-sans-pro-v11-latin-700.eot);src:local('Source Sans Pro Bold'),local('SourceSansPro-Bold'),url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/source-sans-pro-v11-latin-700.eot#iefix) format('embedded-opentype'),url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/source-sans-pro-v11-latin-700.woff2) format('woff2'),url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/source-sans-pro-v11-latin-700.woff) format('woff'),url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/source-sans-pro-v11-latin-700.ttf) format('truetype'),url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/source-sans-pro-v11-latin-700.svg#SourceSansPro) format('svg'); } @font-face { font-family:'Source Sans Pro';font-style:italic;font-weight:700;src:url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/source-sans-pro-v11-latin-700italic.eot);src:local('Source Sans Pro Bold Italic'),local('SourceSansPro-BoldItalic'),url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/source-sans-pro-v11-latin-700italic.eot#iefix) format('embedded-opentype'),url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/source-sans-pro-v11-latin-700italic.woff2) format('woff2'),url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/source-sans-pro-v11-latin-700italic.woff) format('woff'),url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/source-sans-pro-v11-latin-700italic.ttf) format('truetype'),url(https://hosting.pixelsafari.net/pixelsafari/marketing/ebay/templates/fonts/fonts/source-sans-pro-v11-latin-700italic.svg#SourceSansPro) format('svg'); }

Related: See More


Questions / Comments: