<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');
}