Итоги недели

Код:

<!--HTML-->

<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>

<center>
<div style="margin: 0px; width: 560px; height: 30px;">
<div style="height: 100px; background: #34623d;">
<div style="padding-top: 20px; font-family: georgia; text-transform: uppercase; font-size: 12px; letter-spacing: 4px; color: #f8f8f8;">
<span style="letter-spacing: -2px;">--------------------</span> итоги недели<span style="letter-spacing: -2px;">--------------------</span></div></div></div>

 


</center>

Код:

<!--HTML--><center>
<div style='width:560px; background-color:#222; padding-top: 0px; padding-left: 0px; padding-bottom: 20px; padding-right: 10px; '><div style='width:500px; height: 10px;  margin-bottom:10px;'></div>
<div style='width:460px; padding:20px;  background-color:#999; color:#222; font-family:verdana; font-size:11px; text-align:justify; line-height:100%;min-height:40px;  '> 

<b>★</b> Каждую неделю мы будем подводить итоги, и публиковать лучших! <br>
<b>★</b> Помимо тех, кто попадут в таблицу, здесь будут указаны и другие участники - участники флешмобов, победители конкурсов и т.п.; <br>
</div> </div>

 
 </center>

Код:

<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700|Roboto+Condensed' rel='stylesheet' type='text/css'>

<div class="alias">
  <div class="capt">итоги недели 24.08 - 30.08<br> тема недели - прощай, лето
<br><br><img src="http://s9.uploads.ru/mJa83.png"></div>
  <div class="pott">
    <div class="infobox">Привет, мои хорошие! Эта неделя была яркой и насыщенной событиями, конкурсами и игрой. Подводя итоги, мы с вами еще раз сможем вспомнить их, и вновь улыбнуться. Ну и мои комментарии! На этой неделе я необычно блещу сарказмом, поэтому не обижайтесь на меня, я вас люблю! Итак, на первой неделе было...</div>
      <div class="playerinfo1">1 неделя // 30 персонажей  // 30  эпизодов// ▼</div>
      <div class="pl1">020</div>
      <div class="playerinfo2">постов</div>
    <img src="http://s1.uploads.ru/pVMhA.gif">
  </div>

<table><tr><td style="width: 250px"><div class="itogiac">АКТИВИСТЫ</div>
<br>
<center><img src="http://5.6.firepic.org/5/images/2015-08/16/tke9sfguizc9.png">   <img src="http://5.6.firepic.org/5/images/2015-08/16/tke9sfguizc9.png">   <img src="http://5.6.firepic.org/5/images/2015-08/16/tke9sfguizc9.png">   <img src="http://5.6.firepic.org/5/images/2015-08/16/tke9sfguizc9.png"></center>

</td><td style="width: 250px"><div class="itogiac">ЛЮБИМЧИКИ</div>
<br>
<center><img src="http://5.6.firepic.org/5/images/2015-08/16/tke9sfguizc9.png">   <img src="http://5.6.firepic.org/5/images/2015-08/16/tke9sfguizc9.png">   <img src="http://5.6.firepic.org/5/images/2015-08/16/tke9sfguizc9.png">   <img src="http://5.6.firepic.org/5/images/2015-08/16/tke9sfguizc9.png"></center>

</td></tr></table>
 
<table><tr><td style="width: 200px"><div class="itogiac1">ЛУЧШИЙ ИГРОК</div>
</td><td style="width: 300px"><div class="itogiac2">ЛУЧШИЙ ПОСТ</div>
</td></tr></table>

<table><tr><td style="width: 200px">
<center><img src="http://5.6.firepic.org/5/images/2015-08/16/pgvyele1rwqe.png"></center>

</td><td style="width: 270px">
<span style='color:#9b1e21; font-size:50px; line-height:60px; padding-right:10px; font-family: garamond; float: left; display:block;'><img src="http://5.6.firepic.org/5/images/2015-08/16/tke9sfguizc9.png"></span>

  пост пост пост пост пост пост пост пост пост пост пост пост пост пост пост пост пост пост пост пост пост пост пост пост. пост пост пост пост пост пост пост пост пост пост пост пост пост пост пост пост пост пост пост пост пост пост пост пост.

</td></tr></table>

<div class="itogiac3">победители недели</div>
  <center><table><tr><td><center>
    <div class="peep"> 
    <img src="http://6.6.firepic.org/6/images/2015-08/19/csf0ng1vxtyq.png">
    <div class="peepword2">Samantha Riley</div> 
    </div>
  </center></td>
    
<td><center>
    <div class="peep"> 
    <img src="http://6.6.firepic.org/6/images/2015-08/19/csf0ng1vxtyq.png">
    <div class="peepword2">Samantha Riley</div> 
    </div>
  </center></td>
  
<td><center>
    <div class="peep"> 
    <img src="http://6.6.firepic.org/6/images/2015-08/19/csf0ng1vxtyq.png">
    <div class="peepword2">Samantha Riley</div> 
    </div>
  </center></td>
  
  
  </tr></table></center>
<div class="itogiac3">цитаты  недели</div>

<center><table><tr><td><div class="fg">
<div class="fm"><img src="http://5.6.firepic.org/5/images/2015-08/16/tke9sfguizc9.png" style="width: 40px; border-radius: 50%;"></div>
<div class="fht"> 
<div class="fa">
И куда мы без любимого флуда? Здесь можно познакомиться с будущими партнерами по игре, поговорить на различные темы, да и просто поиграть в различные форум
</div></div></div> 
</td>
    
<td>
<div class="fg">
<div class="fm"><img src="http://5.6.firepic.org/5/images/2015-08/16/tke9sfguizc9.png" style="width: 40px; border-radius: 50%;"></div>
<div class="fht"> 
<div class="fa">
И куда мы без любимого флуда? Здесь можно познакомиться с будущими партнерами по игре, поговорить на различные темы, да и просто поиграть в различные форум
</div></div></div> </td>
  
  
  </tr></table> </center>

</div>


<link href='http://fonts.googleapis.com/css?family=Economica' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>

<style type="text/css">
 
.fg { width: 240px; height: 50px; padding: 6px; background-color: #cbcacc; margin-bottom: 7px; }
.fm { border-radius: 50%;width: 40px; height: 40px; border: 1px solid #fff; background-size: 40px 40px; float: left; margin-right: 6px; }
.fht { width: 182px; height: 42px; padding: 4px; margin-top: -43px; margin-left: 50px; background-color: #fff; float: left; overflow: auto;}
.fa { width: 172px; font-family: 'Arial Narrow', sans-serif; font-size: 8px; text-transform: uppercase; color: #000; line-height: 100%; text-align: right; padding-top: 3px; border-top: 1px solid #cbcacc; letter-spacing: 1px; margin-top: -6px;  }


.itogiac {background-color: #006e8c; width:250px; font-family: 'Fira Sans Heavy';font-weight: bold;font-size: 10px;letter-spacing: 1px;color: #ffffff;text-shadow: 1px 1px 0px #222222;line-height: 100%;text-align: center;margin-top: 3px;text-transform: uppercase;}
.itogiac1 {background-color: #006e8c; width:200px; font-family: 'Fira Sans Heavy';font-weight: bold;font-size: 10px;letter-spacing: 1px;color: #ffffff;text-shadow: 1px 1px 0px #222222;line-height: 100%;text-align: center;margin-top: 3px;text-transform: uppercase;}
.itogiac2 {background-color: #006e8c; width:300px; font-family: 'Fira Sans Heavy';font-weight: bold;font-size: 10px;letter-spacing: 1px;color: #ffffff;text-shadow: 1px 1px 0px #222222;line-height: 100%;text-align: center;margin-top: 3px;text-transform: uppercase;}
.itogiac3 {background-color: #006e8c; width:530px; font-family: 'Fira Sans Heavy';font-weight: bold;font-size: 10px;letter-spacing: 1px;color: #ffffff;text-shadow: 1px 1px 0px #222222;line-height: 100%;text-align: center;margin-top: 3px;text-transform: uppercase;}

  .alias {
    width: 530px;
    background-color: #e9e9e9;
    margin: 0 auto;
    padding: 0 0 10px 0;
    position: relative;
    overflow: hidden;
    border: 10px solid #fefefe;
    border-image: url(http://colourlovers.com.s3.amazonaws.com/images/patterns/4813/4813807.png) 30 30 round;
    
  }
  
  .capt {
    height: 110px;
    width: 530px;
    padding: 8px 0;
    background-color: #006E8C;
    font: 14px Helvetica;
    text-transform: uppercase;
    text-align: center;
    color: white;
    letter-spacing: 3px;
    position: relative;
    top: 0;
    left: 0;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
  }
  
  .pott {
    height: 110px; 
    width: 510px;
    background-color: #006E8C;
    position: absolute;
    top: 0;
    left: 550px;
    padding: 8px 10px;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
    font: 9px calibri;
    text-transform: uppercase;
    color: white;
  }
  
  .pott img {
    width: 100px;
    float: right;
    border: 1px solid white;
  }
  
  .infobox {
    width: 200px;
    height: 100px;
    overflow: auto;
    position: absolute;
    left: 10px;
    top: 8px;
    text-align: left;
    line-height: 100%;
    padding-right: 4px;
    font-size: 10px;
  }
  
  .infobox::-webkit-scrollbar {
    width: 5px;
  }
  
  .infobox::-webkit-scrollbar-track {
    background-color: white;
    border-right: 2px solid #006E8C;
    border-left: 2px solid #006E8C;
  }
  
  .infobox::-webkit-scrollbar-thumb {
    background-color: white;
    border-top: 2px solid #006E8C;
    border-bottom: 2px solid #006E8C;
  }
  
  .playerinfo1 {
    width: 200px;
    position: absolute;
    top: 15px;
    left: 220px;
    text-align: center;
  }
  
  .playerinfo2 {
    width: 210px;
    position: absolute;
    top: 60px;
    left: 220px;
    text-align: center;
  }
  
  .pl1 {
   width: 210px;
   font-size: 40px;
   position: absolute; 
   top: 22px;
   left: 220px;
   text-align: center;
  }
  
  .peep {
    width: 150px;
    height: 90px;
    background-color: lightgrey;
    padding: 3px;
    margin: 2px;
    overflow: hidden;
  }
  
  .peep img {
    width: 150px;
  }
  
 
  
  .peepword a {
    color: white;
    text-decoration: none;
  }
  
  .peepword2 {
    height: 12px;
    padding-bottom: 1px;
    position: relative;
    top: 10px;
    left: 0;
    background-color: #006E8C;
    font: 10px Helvetica;
    text-transform: uppercase;
    text-align: center;
    color: white;
    -webkit-transition: .4s;
    -o-transition: .4s;
    -moz-transition: .4s;
    transition: .4s;
  }
  
  .peep:hover .peepword {
    top: -28px;
    -webkit-transition: .4s;
    -o-transition: .4s;
    -moz-transition: .4s;
    transition: .4s;
  }
  
  .peep:hover .peepword2 {
    top: -28px;
    -webkit-transition: .4s;
    -o-transition: .4s;
    -moz-transition: .4s;
    transition: .4s;
  }
  
  .alias:hover .capt {
    left: -550px;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
  }
  
  .alias:hover .pott {
    left: 0px;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
  }

  
</style>

Тестовик для будущего

Меню навигации

Пользовательские ссылки

Информация о пользователе

Итоги недели

Сообщений 1 страница 2 из 2

Поделиться12015-08-23 18:47:15

Поделиться22015-08-23 18:47:27