EVC - Checkout cards / Address

by AaronLayton

HTML

<ul class="checkoutItems">
    <li>
        <div class="cPreviewWin">
            <div class="cCard">
                <div class="cCardContent">
                    <div class="cCardLabel">•••• •••• •••• 5639</div>
                    <div class="cCardLabel">01/11</div>
                    <div class="cCardLogo">
                        <img src="https://www.yoursclothing.co.uk/images/checkout/visa-card.jpg" alt="Visa" />
                    </div>
                </div>
            </div>
        </div>
        <div class="cItemContent">
            <span class="cItem-Label cItem-cardName">Mr A Layton</span>
            <span class="cItem-Label cItem-company">Eventure Internet</span>
            <span class="cItem-Label cItem-address1">Unit 20, H20</span>
            <span class="cItem-Label cItem-address2">Lake View Drive</span>
            <span class="cItem-Label cItem-address3">Annesley</span>, 
            <span class="cItem-Label cItem-cityState">Nottingham</span>, 
            <span class="cItem-Label cItem-postalcode">NG17 0HT</span>
            <span class="cItem-Label cItem-phone">0845 166 2703</span>
            
            <div class="cItem-Option"><a href="#">Set as default</a></div>
            <div class="cItem-Option">
                <a href="#">Edit</a>
                <a href="#">Delete</a>
            </div>
        </div>
        <div class="clearfix"></div>
    </li>
    <li>
        <div class="cPreviewWin">
            <div class="cMap">
                <!-- http://code.google.com/apis/maps/documentation/staticmaps/ -->
                <img src="http://maps.googleapis.com/maps/api/staticmap?size=170x110&maptype=roadmap\&zoom=10&markers=size:large%7Ccolor:red%7CUnit%2020,%20H20,Lake%20View%20Drive,Annesley,%20Nottingham,%20NG17%200HT&sensor=false" alt="Approximate location" height="110" width="170" />
            </div>
            <div class="cItem-small">*approximate location</div>
        </div>
        <div class="cItemContent">
     ...

CSS

body { 
    padding:50px;
}
.clearfix { clear:both; }

.checkoutItems a { color:#15C;text-decoration:none; }
.checkoutItems a:hover{ color:#12A; }
.checkoutItems a:active { color:#EC008C; }
.checkoutItems li {
    margin: 0;
    padding: 16px 0;
    border-top: 1px solid #E5E5E5;
}
.cPreviewWin { float:left; }
/* Map */
.cPreviewWin .cMap { border:1px solid #EBEBEB;margin: 0 16px 0 0; }
.cPreviewWin .cMap img { display:block; }
.cPreviewWin .cItem-small { color:#C0C0C0;font-size:9px;margin:5px 0;text-align:center; }
/* Card */
.cPreviewWin .cCardContent {
    padding: 32px 10px 0 16px;
}
.cPreviewWin .cCardLabel { letter-spacing:1px;margin:0 0 10px;word-spacing:5px; }
.cPreviewWin .cCardLogo { bottom:10px;position:absolute;right:10px;}
.cPreviewWin .cCard {
    background-color:#ebebeb;
    border:1px solid #EBEBEB;
    color:#666;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight:bold;
    height:110px;
    margin: 0 16px 0 0;
    position:relative;
    width:170px;
    
    
    /* rounded borders */
    -webkit-border-radius: 5px; /* Saf3-4, iOS 1-3.2, Android <e;1.6 */
     -moz-border-radius: 5px; /* FF1-3.6 */
          border-radius: 5px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
          
  /* useful if you don't want a bg color from leaking outside the border: */        
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; 
    
    /* gradient */
      background-color: #fafafa;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ededed)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #fafafa, #ededed); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image:    -moz-linear-gradient(top, #fafafa, #ededed); /* FF3.6 */
  background-image:     -ms-linear-gradient(top, #fafafa, #ededed); /* IE10 */
  background-image:      -o-linear-gradient(top, #fafafa, #ededed); /* Opera 11.10+ */
 ...

JavaScript

// Checkout items - Cards / Address