informator 01

<link rel="stylesheet" type="text/css" href="http://abandonedstudio.b1.jcink.com/uploads/abandonedstudio/Shippers/Running_Feet.css"><style type="text/css">

/* PICK YOUR GRADIENT COLOURS: edit only the hex codes in the brackets. the top colour is first, bottom is second. do not remove !important as that overrides the external style sheets REPLACE ALL FOUR LINES WITH THE HEX CODES */

.whee3, .whee4 {
 background: -webkit-linear-gradient(#6B6C84, #000)!important;
 background: -o-linear-gradient(#6B6C84, #000)!important;
 background: -moz-linear-gradient(#6B6C84, #000)!important;
 background: linear-gradient(#fff6B6C84 #000)!important;
}

#whee {
    margin: 0px auto;
    width: 310px;
    height: 310px;
    background-color: #f4f4f4;
    position: relative;
    overflow: hidden;
    padding: 20px;
  }

  #whee h1 {
    text-align: center;
    font: italic normal bold 30px/100% "Times New Roman";
    color: #fff;
    text-shadow: 1px 1px 2px #6B6C84, 0px 0px 1px #6B6C84;
    letter-spacing: -1px;
    margin: 0px;
  }

  .wheetext {
    background-color: #fff;
    margin: 10px auto;
    height: 215px;
    box-shadow: 0px 0px 1px #999;
    padding: 10px;
    font: normal normal normal 10px/105% 'Calibri';
    text-indent: 10px;
    text-align: justify;
    letter-spacing: 1px;
  }

  .wheetext2 {
    width: auto;
    height: 215px;
    overflow: auto;
    padding-right: 3px;
  }

  #whee h2 {
    text-align: center;
    font: normal normal normal 9px/100% "Calibri";
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #6B6C84;
    margin: 0px;
  }

  .whee2 {
    width: 150px;
    height: 150px;
    background-color: #999;
    border-radius: 50%;
    border: solid 5px #fff;
    box-shadow: 0px 0px 2px #000;
    position: absolute;
    top: 95px;
    left: 95px;
    transition: all 1s ease-in-out 0s;
    -webkit-transition: all 1s ease-in-out 0s;
    -moz-transition: all 1s ease-in-out 0s;
    -o-transition: all 1s ease-in-out 0s;
  }

  #whee:hover .whee2 {
    left: 360px;
  }

  .whee3 {
    width: 175px;
    height: 350px;
  background: -webkit-linear-gradient(#6B6C84, #000); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#6B6C84, #000); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#6B6C84, #000); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#6B6C84, #000); /* Standard syntax */
    background-color: #6B6C84;
    position: absolute;
    top: 0px;
    left: 0px;
    transition: all 1s ease-in-out 0s;
    -webkit-transition: all 1s ease-in-out 0s;
    -moz-transition: all 1s ease-in-out 0s;
    -o-transition: all 1s ease-in-out 0s;
  }

  .whee4 {
    width: 175px;
    height: 350px;
    background: -webkit-linear-gradient(#6B6C84, #000); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#6B6C84, #000); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#6B6C84, #000); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#6B6C84, #000); /* Standard syntax */
    background-color: #6B6C84;
    position: absolute;
    top: 0px;
    left: 175px;
    transition: all 1s ease-in-out 0s;
    -webkit-transition: all 1s ease-in-out 0s;
    -moz-transition: all 1s ease-in-out 0s;
    -o-transition: all 1s ease-in-out 0s;
  }

  #whee:hover .whee3 {
    left: -250px;
    transition: all 1s ease-in-out 0s;
    -webkit-transition: all 1s ease-in-out 0s;
    -moz-transition: all 1s ease-in-out 0s;
    -o-transition: all 1s ease-in-out 0s;;
  }

  #whee:hover .whee4 {
    left: 435px;
    transition: all 1s ease-in-out 0s;
    -webkit-transition: all 1s ease-in-out 0s;
    -moz-transition: all 1s ease-in-out 0s;
    -o-transition: all 1s ease-in-out 0s;
  }
</style>
<div id="whee"><div class="whee3"></div><div class="whee4"></div><div class="whee2" div style="background-image: url(150x150 - obrazek);"></div>

 <h1> Imie i nazwisko</h1>
 <h2> Cytat Cytat Cytat </h2>
 <div class="wheetext"><div class="wheetext2">


TEXT TEXT TEXT TEXT TEXT TEXT

 </div></div>

</div>