Реклама баннер

1.  Перейдите в Admin CP -> Look & Feel -> Select Template -> Global Templates-> globalTemplate и найти:

<!-- ::: MAIN CONTENT AREA ::: -->			<div id='content' class='clearfix'>

2. Ниже вставить этот код:

<div id="allthethings">  <div id="centershadow"></div><a href="http://ipb-board.com/"><div id="left">	<div id="t1"></div>  <div id="t2"></div>  <div id="t3"></div>  <div id="t4"></div>  <div id="t5"></div>  <div id="t6"></div>  <div id="t7"></div>  <p>trip</p>  </div></a><a href="http://ipb-board.com/"><div id="middle">  <div id="thingy1"></div>  <div id="thingy2"></div>  <div id="thingy3"></div>  <div id="thingy4"></div>  <div id="thingy5"></div>  <div id="circle"></div>  <div id="arrow"></div>  <p>Rego</p>    </div></a><a href="http://ipb-board.com/"><div id="right">	<p>PayPal</p>  <div id="f1">P</div>  </div></a>  </div>

(Замените ваши ссылки и текст)

3. Сохранить.

4. Перейти Admin -> CPLook & Feel -> Manage Skin Sets & Templates -> Manage Templates in -> Select Template -> и нажмите кнопку Добавить CSS-файла.

5. Назовите его allthethings.

6. Поместите следующий код в нем:

#allthethings {  width:800px;  height:200px;  margin:auto;  position:relative;    }#f1 {  font-size:40px;  width:50px;  height:50px;  background: red;  position:absolute;  left:180px;  top:42px;  text-align:center;  border : 1px solid black;  border-radius:5px;  color:white;  box-shadow: 5px 4px 5px black;  text-shadow: 2px 2px 1px black;  font-style:italic;  }#right p {  font-size:40px;  position:absolute;  left:50px;  top:58px;  z-index:5;  color:white;  text-shadow:2px 5px 1px black; font-family:Oswald;  font-style:italic;  }#right:hover {  box-shadow: 0px 0px 0px  black inset ;  -webkit-transform: perspective( 400px ) rotateY(0deg);  transform: perspective( 400px ) rotateY(0deg);  right:-30px;}#right:after {   display:block;  height:10px;  width:277px;  background:#CC0000;  opacity:0.15;  content:"";  z-index:5;  position:relative;  top:140px;  border: 1px solid transparent;  border-top-left-radius:8px;  border-top-right-radius:8px;  }#right {  height:140px;  width:280px;  float:right;  position:absolute;  margin:auto;  background:#CC0000;  -webkit-transform: perspective( 400px ) rotateY(-34deg);  transform: perspective( 400px ) rotateY(-34deg);  right:18px;  top:19px;   border: 1px solid black;  border-radius: 8px;  box-shadow: 25px 0px 50px  black inset ;  transition:0.5s;  -webkit-transition:0.5s;    }#t1 {  position:absolute;  height:5px;  width:5px;  background:green;  border: 2px solid white;  border-radius:50px;  top:55px;  left:118px;  z-index:700;  }#t2 {  height:7px;  width:7px;  background:transparent;  border: 4px solid black;  border-radius:50px;  position:absolute;  top:52px;  left:115.4px;  z-index:200;    }#t3 {  z-index:100;  background: white;  height:20px;  width:20px;  border:3px solid black;  border-radius:50px;  position:absolute;  left:109.4px;  top:47px;  }#t3:before {  content:"";  width:4px;  display:block;  height:8px;  background:black;  position:absolute;  top:-6px;  left:-16px;  -webkit-transform:rotate(-60deg);  transform:rotate(-60deg);  }#t4 {  position:absolute;  height:5px;  width:5px;  background:red;  border: 2px solid white;  border-radius:50px;  top:55px;  left:93px;  z-index:700;  }#t5 {  height:7px;  width:7px;  background:transparent;  border: 4px solid black;  border-radius:50px;  position:absolute;  top:52px;  left:90px;  z-index:200;    }#t6 {  z-index:100;  background: white;  height:20px;  width:20px;  border:3px solid black;  border-radius:50px;  position:absolute;  left:85px;  top:47px;  }#t6:after {  content:"";  width:4px;  display:block;  height:8px;  background:black;  position:absolute;  top:-7px;  left:32px;  -webkit-transform:rotate(60deg);  transform:rotate(60deg);    }#t7 {    z-index:99;  height:20px;  width:30px;  background:yellow;  border: 2px solid black;  border-radius:55px;    position:absolute;  top:45px;  left:94px;  }#t7:after {  content:"";  width:2px;  display:block;  height:8px;  background:black;    position:absolute;  top:17px;  left:13px;  }#left p:after {  content:"advisor";  color:#05810D;  text-shadow:1px 1px 1px white;  }#left:after {  display:block;  height:10px;  width:277px;  background:#2562B0;  opacity:0.15;  content:"";  z-index:5;  position:relative;  top:140px;  border: 1px solid transparent;  border-top-left-radius:8px;  border-top-right-radius:8px;  }#left p {  color:black;  position:absolute;  top:50px;  left:140px;  font-size:25px;   text-shadow:1px 1px 1px white;}#left {    float:left;  top:10px;  height:140px;  width:280px;  background: linear-gradient(#629EEE,#2562B0);  background: -webkit-linear-gradient(#629EEE,#2562B0);  background: -moz-linear-gradient(#629EEE,#2562B0);  background: -o-linear-gradient(#629EEE,#2562B0);  margin:auto;  border: 1px solid black;  border-radius: 8px;  position:absolute;  top:19px;  left:10px;  background-size:5px 90%;   -webkit-transform: perspective( 400px ) rotateY(34deg);  transform: perspective( 400px ) rotateY(34deg);  transition:0.5s;  -webkit-transition:0.5s;  box-shadow: -25px 0px 50px  black inset ;z-index:2;  }#left:hover {   -webkit-transform: perspective( 400px ) rotateY(0deg);  transform: perspective( 400px ) rotateY(0deg);  left:-38px;      box-shadow: 0px 0px 0px  black inset ;    }#thingy5 {  height:80px;  width:80px;  border:7px solid black;  border-radius:500px;  opacity:0.3;  position:absolute;  bottom:-45px;  left:60px;  }#thingy4 {   height:20px;  width:20px;  border:7px solid black;  border-radius:500px;  opacity:0.3;  position:absolute;  right:15px;  bottom:30px;  }#thingy3 {    height:60px;  width:60px;  border:7px solid black;  border-radius:500px;  opacity:0.3;  position:absolute;  top:15px;  right:60px;  }#thingy3:after {  position:absolute;  content:"";  display:block;  height:20px;  width:20px;  background:black;  border-radius:50px;  left:20px;  top:5px;}#thingy3::before {  position:absolute;  content:"";  display:block;  height:5px;  width:5px;  border-radius:50px;  background:gray;  position:absolute;  left:25px;  z-index:5;  top:10px;    }#thingy1:before {  content:"";  display:block;    height:40px;  width:2px;  background:black;  position:absolute;  right:113px;  top:79px;  }#thingy2 {   height:75px;  width:75px;  border:7px solid black;  border-radius:500px;  position:absolute;  bottom:50px;  opacity: 0.3; left:10px;  top:-15px;  }#thingy2::before {  content:" ";  display:block;  height:10px;  width:10px;  background:black;  position:absolute;  top:34px;  left:30px;  border:2px solid gray;  border-radius:50px;  z-index:70;}#thingy2::after {  content:" ";  display:block;  height:20px;  width:40px;  background:black;  position:relative;  top:30px;  left:17px;  z-index:60;  }#thingy1:after {  height:5px;  width:10px;  content:"";  display:block;  background:black;  position:absolute;  top:49px;  right:259px;  }#thingy1 {  height:75px;  width:75px;  border:7px solid black;  border-radius:500px;  position:absolute;  bottom:50px;  opacity: 0.3;  right:-25px;  bottom:100px;       }#arrow {  border-left: 15px solid transparent;	border-right: 15px solid transparent;	border-bottom: 30px solid #FAEA07;  position:absolute;  -webkit-transform:rotate(40deg);  transform:rotate(40deg);  top:56px;  left:82px;    }#arrow::after {  content:"";  display:block;    border-left: 15px solid transparent;	border-right: 15px solid transparent;	border-bottom: 15px solid #565656;  position:absolute;  right:-15px;  top:16px;  z-index:5;      }#middle p {    font-size:40px;  font-family:Chewy;  color:#FAEA07;  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; position:absolute;  top:42px;  left:150px;}#circle {  position:absolute;  height:60px;  width:60px;  color:transparent;  border: 4px solid #FAEA07;    border-radius:150px;  left:60px;  top:40px; }#middle {  position:absolute;  top:10px;  height:150px;  width:300px;  background: radial-gradient(gray,black);  background: -webkit-radial-gradient(gray,black);  background: -o-radial-gradient(gray,black);  background: -moz-radial-gradient(gray,black);  margin:auto;  border: 1px solid gray;  border-radius: 8px;  overflow:hidden;  transition:0.2s;  -webkit-transition:0.2s;  z-index:3;  left:245px;  top:19px;  box-shadow: 0px 5px 5px black;  }#middle:hover {  -webkit-transform:scale3d(1.05,1.05,1.05);  transform:scale3d(1.05,1.05,1.05);}