Wednesday, August 31, 2016

car center


.choose-customer {
  1. margin: 0px auto;
  2. text-align: center;
  3. margin-bottom: 57px;
  4. margin-top: 20px;
}
.front-cars {
  1. position: relative;
}
.front-cars-inner-div {
  1. background-color: #FFF;
  2. border: 1px solid #cf0000;
  3. margin-top: 25px;
  4. min-height: 130px;
}
.front-cars a {
  1. margin-top: -20px !important;
  2. min-width: 150px;
  3. background: #cf0000;
  4. color: #ffffff;
}
.cars-image {
  1. position: absolute;
  2. top: 20px;
  3. left: 0;
  4. right: 0;
}
.cars-image img {
  1. max-width: 100%;
}
<div class="col-md-4 col-sm-4 col-xs-12">
                <div class="choose-customer">
                    <h3>Sell my car</h3>
 <p>Make more money when you sell your SUV yourself. Choose a package and price that worths for you.</p>
                        <div class="front-cars">
                            <div class="front-cars-inner-div">
                                <a class="btn btn-primary" href="/Car/Dashboard/CreateAd">Sell</a>
                                <div class="cars-image">
                                    <img src="/images/CenterViewCar.png">
                                </div>
                            </div>
                        </div>
</div>
</div>
           
Posted by at No comments:

Wednesday, August 24, 2016

flex item for listing images go into center

html

<div class="revies">
        <div class="flex-item">
                <img src="#" class="img-responsive" />
        </div>
</div>

css

.reviews .flex-item {
  1. display: flex;
  2. flex-direction: column;
  3. justify-content: center;
  4. align-items: center;
  5. height: 205px;
  6. overflow: hidden;
  7. padding: 10px;
  8. margin-top: 13px;
}

img have bootstrap class or add custom class 

.img-mycustom{
  1. display: block;
  2. max-width: 100%;
  3. height: auto;
}



shahzad_samejo@yahoo.com

Posted by at No comments:

Thursday, August 4, 2016

image sprite use easy way

Code copy and paste into w3school live editor and easy to understand


<!DOCTYPE html>
<html>
<head>
<style>
 ul.dashboard li a.sprite-icons{
    background: url(img_navsprites.gif) no-repeat top left;
    width: 33px;
    height: 34px;
    margin: 0px 26px auto;
    display: block;
     
     }
  ul.dashboard li a.sprite-icons.icons-car{
        background-position: -45px 0;
     }
  ul.dashboard li a.sprite-icons.icons-suv{
        background-position: -35px 0;
     }

</style>
</head>
<body>

<ul class="dashboard" role="tablist">
   <li>
      <a class="sprite-icons icons-car" href="#">Cars ( 0 )</a>
   </li>
   <li>
      <a class="sprite-icons icons-suv" href="#">SUVs ( 0 )</a>
   </li>
   <li>
      <a class="sprite-icons icons-truck" href="#">Truck ( 0 )</a>
   </li>
   <li   class="active">
      <a class="sprite-icons icons-bikes" href="#">Bikes ( 1 )</a>
   </li>
</ul>

</body>
</html>

shahzad_samejo@yahoo.com



Posted by at No comments:
Subscribe to: Posts (Atom)