НАЗВАНИЕ ФОРУМА

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

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » НАЗВАНИЕ ФОРУМА » Тестовый форум » ссс


ссс

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

1

ссс

0

2

Код:
<!--HTML-->
<center><link href='http://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>

<style>

.ctabcon {width: 600px;
height: 500px;
background-color: #e4c499;
padding: 10px;
position: relative;}

.ctablab {float: left;}

.ctablab label {width: 80px;
background-color: #b77049;
font-family: 'Slabo 27px', serif;
text-align: center;
text-transform: uppercase;
padding: 10px;
font-size: 15px;
line-height: 100%;
color: #f0e2d0;
font-weight: bold;
position: relative;
top: 20px;
left: 65px;
margin: 2px;
}

.ctablab [type=radio] {
display: none;  
}

.ctabcont {width: 560px;
height: 390px;
background-color: #f0e2d0;
padding: 10px;
font-family: sans-serif;
font-size: 12px;
text-align: justify;
line-height: 100%;
color: #241117;
overflow: auto;
position: absolute;
border: #e4c499 10px solid;
top: 75px;
left: 10px;
-webkit-transform: scale(0); -o-transform: scale(0); -moz-transform: scale(0);-transition-duration: 2s;-webkit-transition-duration: 2s;-moz-transition-duration: 2s; -o-transition-duration: 2s;}

.ctabcont b {color: #CA3579;}

.ctabcont i {color: #CA3579;}

[type=radio]:checked ~ label {background-color: #f0e2d0;color: #b77049;z-index: 2;}

[type=radio]:checked ~ label ~ .ctabcont {z-index: 1;-webkit-transform: scale(1); -o-transform: scale(1); -moz-transform: scale(1);}

.ctably {font-family: 'Montserrat', sans-serif;
font-size: 30px;
text-align: center;
line-height: 100%;
text-transform: uppercase;
color: #CA3579;
text-shadow: #241117 1px 1px; 
margin-bottom: 10px;}

.ctably2 {font-family: sans-serif;
font-size: 9px;
text-align: justify;
line-height: 100%;
color: #241117;
text-transform: uppercase;
margin-bottom: 10px;
}

</style>

<div class="ctabcon">

<div class="ctablab">
<input type="radio" id="ctablab-1" name="ctablab-group-1" checked>
<label for="ctablab-1">ИНФОРМАЦИЯ</label>
<div class="ctabcont">


<table valign="top"><td><div style="width: 330px; height: 300px; background-image: URL(http://funkyimg.com/i/25rrn.png);"></div></td><td><div style="font-family: montserrat; font-size: 40px; line-height: 35px; font-weight: 700; color: #6a3816; padding: 3px; text-shadow: 1px 1px 1px #333333; text-align: center;">phoebe</div>
<div style="width: 250px; padding: 2px; border: 1px solid #6a3816;"><div style="background-color: #6a3816;"><div style="font-family: times new roman, sans-serif; font-size: 12px; line-height: 100%; text-align: center; padding: 3px; color: #faf6f5;">16. student. becca tobin. wife. possible final</div></div></div><div style="width: 240px; height: 200px; padding: 10px; text-align: justify; color:#000000; overflow: auto; font-size:10px; font-family: arial,sans-serif; font-weight: 300; "><div style="font-family: Cambria; font-size: 9px; ">im not bulletproof when it comes to you. Don't know what to say when you make me the enemy. After the wars won there's always a next one.</div>

<p>phoebe is puck's heavily on-off, secret girlfrien over the coarse of three years. They are madly in love ever since their sophmore year. when ever her and alexander break up, Phoebe tries to be the good girlfriend to his best friend but it never last long due to the magnetic pulls towards her and puck.. Hell, people thought they were a couple when they weren't even dating at the time, but they were just really good friend.  While they would eye each other or get jealous when the other one would bring someone else home. Well that wasn't til the summer of sophomore year when drunk alexander made the first move of passionately kissing her during a house party on the beach side. She had returned the kiss. ...Even though their relationship is generally kept a secret, but then their relationship is short lived when Alexander's girlfriend of two years, Candace finds out she is pregnant. At some point Phoebe is going to find out that the baby isn't Alexander's baby and is the one to tell him about it. <p>
she is a juinor and a Raven's cheerleader. 

<p>Her history personality and name are up to you. The face is Becca Tobin and her face is not negotiable. How their affair comes out we can discuss. her name is Phoebe in pucks app. But your welcomed to change it. </div></td></table>


</div></div>

<div class="ctablab">
<input type="radio" id="ctablab-2" name="ctablab-group-1">
<label for="ctablab-2">НАГРАДЫ</label>
<div class="ctabcont">

<div class="ctably">line of lyrics</div>
<div class="ctably2"><img src="http://place-hold.it/100x100" align="left" style="margin-right: 5px;"/>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta lacus vel consequat luctus. Fusce sit amet sodales ligula. Quisque sed luctus ante, sed venenatis ex. In pretium ipsum ac turpis sollicitudin hendrerit. Proin ac varius nisi. In eu sem sed leo laoreet placerat nec et arcu. Integer mollis feugiat nulla, vitae egestas velit mollis vel. Maecenas molestie varius sapien, in fringilla purus auctor quis. Nam eu pretium lacus. Praesent vestibulum felis ac enim vestibulum, sed aliquam tellus tempor. Cras interdum est nibh, et tempus justo ullamcorper sed. Suspendisse id eros magna. Nullam et justo et neque dignissim interdum. Donec et elit ut nisi fringilla euismod id at lectus. In vulputate dolor ut sagittis suscipit

.</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta lacus vel consequat luctus. Fusce sit amet sodales ligula. Quisque sed luctus ante, sed venenatis ex. In pretium ipsum ac turpis sollicitudin hendrerit. Proin ac varius nisi. In eu sem sed leo laoreet placerat nec et arcu. Integer mollis feugiat nulla, vitae egestas velit mollis vel. Maecenas molestie varius sapien, in fringilla purus auctor quis. Nam eu pretium lacus. Praesent vestibulum felis ac enim vestibulum, sed aliquam tellus tempor. Cras interdum est nibh, et tempus justo ullamcorper sed. Suspendisse id eros magna. Nullam et justo et neque dignissim interdum. Donec et elit ut nisi fringilla euismod id at lectus. In vulputate dolor ut sagittis suscipit.<P>

[b]Nunc fringilla sed risus nec bibendum. Ut dignissim ullamcorper tellus, sit amet venenatis est vulputate ac. Etiam ac pharetra tellus. Quisque lorem ipsum, vestibulum nec turpis in, consectetur iaculis arcu. In sollicitudin massa vel sem venenatis, eu suscipit lectus molestie. Praesent erat sem, mollis in enim in, tincidunt pulvinar augue. Nullam eget mollis nisi. Phasellus ultricies dolor erat, sit amet porttitor eros porta quis. Quisque nec risus ornare, volutpat dui et, ornare nulla.[/b]<P>

Mauris fringilla risus quis mi sollicitudin interdum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pulvinar, ante a rhoncus blandit, nisi metus accumsan turpis, ut tristique diam eros non orci. Cras ut ante fermentum, porta neque et, interdum diam. Aenean quis eleifend nunc. Duis suscipit congue nulla ut pretium. Nam id pharetra felis, a aliquam quam. Nam accumsan at orci in fringilla. Sed egestas sapien tortor. Suspendisse iaculis purus est, pharetra dignissim nulla volutpat et. Nam et vestibulum lorem, in ultrices neque.<P>

[i]Sed tempor eu orci a feugiat. Vivamus convallis scelerisque mauris non posuere. Donec efficitur ac augue eget elementum. Nunc enim nisi, vehicula vel mollis ut, blandit eget odio. Ut dapibus sapien id semper faucibus. Vivamus felis felis, porttitor et cursus bibendum, viverra non lacus. Pellentesque vel velit luctus, finibus ante at, gravida mauris. Cras nec volutpat eros.[/i]<P>

Nulla convallis faucibus nisi. In auctor consectetur ipsum nec elementum. Nulla quam eros, luctus id luctus sed, porta volutpat justo. Phasellus et urna in metus egestas pharetra. Nam vitae aliquet ex. Nunc ac pulvinar ligula, et ullamcorper lacus. Duis iaculis commodo tortor, dapibus cursus lectus venenatis in. Integer nec arcu tincidunt, congue turpis nec, placerat justo. Sed vitae dolor quis metus tristique vestibulum ut ac ipsum. Phasellus leo enim, bibendum eget fringilla nec, pharetra eu justo. Pellentesque id ipsum nisl.

</div></div>

<div class="ctablab">
<input type="radio" id="ctablab-3" name="ctablab-group-1">
<label for="ctablab-3">ЧОТО ЕЩЕ</label>
<div class="ctabcont">

<div class="ctably">### for name</div>
<div class="ctably2">Nulla convallis faucibus nisi. In auctor consectetur ipsum nec elementum. Nulla quam eros, luctus id luctus sed, porta volutpat justo. Phasellus et urna in metus egestas pharetra. Nam vitae aliquet ex. Nunc ac pulvinar ligula, et ullamcorper lacus. Duis iaculis commodo tortor, dapibus cursus lectus venenatis in. Integer nec arcu tincidunt, congue turpis nec, placerat justo. Sed vitae dolor quis metus tristique vestibulum ut ac ipsum. Phasellus leo enim, bibendum eget fringilla nec, pharetra eu justo. Pellentesque id ipsum nisl.</div>


</div></div></div>

0

3

0

4

0

5

цитата

0

6

Код:
<!--HTML-->
<center><div style="width: 590px; padding: 6px; background-image: url(http://img0.liveinternet.ru/images/attach/c/7/94/828/94828492_1__3_.jpg); border: 1px solid #043f88;"><div style="width: 540px;  background-color: #ebe6da; border: 15px solid #ebe6da; font-family: Arial;  font-size: 11px; letter-spacing: 1px; color: #000000; text-align: justify; overflow: auto; box-shadow: 0px 0px 3px #523a23;"> <div style="text-align:center; line-height: 80%; font-family: Times New Roman; font-size: 13px; letter-spacing: -3px; color: #043f88"> </div>

<center><font style="color: #553d1e; font-family: Arial Narrow; font-size: 13px; text-shadow: #2 1px 1px 0px;"><b>БЛА БЛА БЛА ТУТ</b></font></center><br>

<center>

ТУТ ПИШИТЕ ВАШ ТЕКСТ

</center>
</center>
</div>
</div></div></div></center>

0

7

0

8

Код:
<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=Anton' rel='stylesheet' type='text/css'>
<style>
.geek::-webkit-scrollbar { width: 2px; background: #; }
.geek::-webkit-scrollbar-thumb { background: #ffc2c2; }
.geek { width: 260px; height: 130px; overflow: auto; color: #000; font-family: calibri; font-size: 11px; line-height: 11px; text-align: justify; margin-left: 60px; padding: 5px; }
.geek::first-letter { width: 20px height: 20px; padding: 10px; margin: 8px; background: #ffc2c2; background: -moz-linear-gradient(top,  #ffc2c2 0%, #ff9c9c 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc2c2), color-stop(100%,#ff9c9c)); background: -webkit-linear-gradient(top,  #ffc2c2 0%,#ff9c9c 100%); background: -o-linear-gradient(top,  #ffc2c2 0%,#ff9c9c 100%); background: -ms-linear-gradient(top,  #ffc2c2 0%,#ff9c9c 100%); background: linear-gradient(to bottom,  #ffc2c2 0%,#ff9c9c 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc2c2', endColorstr='#ff9c9c',GradientType=0 );  color: #fff; font-family: anton; font-size: 25px; text-align: center; text-transform: uppercase; line-height: 20px; float: left; margin-top: 4px; margin-right: 8px; margin-bottom: 0px; } 
.geekside { width: 130px; height: 200px; background: url(http://i.imgur.com/qSIB77v.png); padding: 20px; z-index: 1; position: relative; }
.geekside img { width: 110px; height: 110px; background: #ffc2c2; background: -moz-linear-gradient(top,  #ffc2c2 0%, #ff9c9c 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc2c2), color-stop(100%,#ff9c9c)); background: -webkit-linear-gradient(top,  #ffc2c2 0%,#ff9c9c 100%); background: -o-linear-gradient(top,  #ffc2c2 0%,#ff9c9c 100%); background: -ms-linear-gradient(top,  #ffc2c2 0%,#ff9c9c 100%); background: linear-gradient(to bottom,  #ffc2c2 0%,#ff9c9c 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc2c2', endColorstr='#ff9c9c',GradientType=0 ); padding: 10px; background-size: cover; }
.geekside .geektitle { width: 130px; position: relative; top: -12px; left: -2px; text-align: center; font-family: anton; letter-spacing: -3px; font-size: 65px; color: #d9d9d9; line-height: 100%; }
.geekside .geeksubtitle { width: 130px; position: relative; top: -12px; text-align: right; font-family: calibri; letter-spacing: 5px; font-size: 12px; color: #FF9C9C; text-transform: uppercase; line-height: 100%; }
.geekside .geekinfo { width: 150px; height: 140px; background: #; top: 0px; left: 0px; position: absolute; color: #000; font-family: calibri; font-size: 11px; line-height: 11px; text-align: justify; padding: 10px; opacity: 0; margin-left: -20px; -webkit-transition: all 0.7s ease;
transition: all 0.7s ease;  }
.geekside .geekinfo:hover {opacity: 1; margin-left: 0px; -webkit-transition: all 0.7s ease;
transition: all 0.7s ease; }
.geekinfo::first-letter { width: 20px height: 20px; padding: 10px; margin: 1px; background: #ffc2c2; background: -moz-linear-gradient(top,  #ffc2c2 0%, #ff9c9c 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc2c2), color-stop(100%,#ff9c9c)); background: -webkit-linear-gradient(top,  #ffc2c2 0%,#ff9c9c 100%); background: -o-linear-gradient(top,  #ffc2c2 0%,#ff9c9c 100%); background: -ms-linear-gradient(top,  #ffc2c2 0%,#ff9c9c 100%); background: linear-gradient(to bottom,  #ffc2c2 0%,#ff9c9c 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc2c2', endColorstr='#ff9c9c',GradientType=0 );  color: #fff; font-family: anton; font-size: 25px; text-align: center; text-transform: uppercase; line-height: 20px; float: left; margin-top: 4px; margin-right: 8px; margin-bottom: 0px; } 
.geekinfo a { background: #ffc2c2; background: -moz-linear-gradient(top,  #ffc2c2 0%, #ff9c9c 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc2c2), color-stop(100%,#ff9c9c)); background: -webkit-linear-gradient(top,  #ffc2c2 0%,#ff9c9c 100%); background: -o-linear-gradient(top,  #ffc2c2 0%,#ff9c9c 100%); background: -ms-linear-gradient(top,  #ffc2c2 0%,#ff9c9c 100%); background: linear-gradient(to bottom,  #ffc2c2 0%,#ff9c9c 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc2c2', endColorstr='#ff9c9c',GradientType=0 ); display: block; font-family: calibri; font-size: 11px; text-transform: uppercase; color: #111; text-align: center; text-decoration: none; padding: 2px; margin: 1px; letter-spacing: 1px; }
.geekinfo a:hover { letter-spacing: 2px; }
</style>

<center>
<table style="background: none;">
<tr>
<td>
<div style="width: 250px; height: 200px;  background: #; padding: 10px; ">
<div style="width: 290px; height: 18px; background: #ff9c9c; background: -moz-linear-gradient(top,  #ff9c9c 0%, #ffc2c2 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff9c9c), color-stop(100%,#ffc2c2)); background: -webkit-linear-gradient(top,  #ff9c9c 0%,#ffc2c2 100%); background: -o-linear-gradient(top,  #ff9c9c 0%,#ffc2c2 100%); background: -ms-linear-gradient(top,  #ff9c9c 0%,#ffc2c2 100%); background: linear-gradient(to bottom,  #ff9c9c 0%,#ffc2c2 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9c9c', endColorstr='#ffc2c2',GradientType=0 ); margin-top: -20px; margin-left: 60px;"></div>
<div class="geek">
Добро пожаловать к нам бла бла бла бла бла и много чего бла бла, надо тут какую-то фигня приветственную написать, у меня фантазии на это точно не хватит, может у кого-то из вас получиться, чтобы так красивенько было.

бла бла бла бла блабла бла бла бла блабла бла бла бла блабла бла бла бла блабла бла бла бла блабла бла бла бла блабла бла бла бла блабла бла бла бла блабла бла бла бла блабла бла бла бла блабла бла бла бла бла
</div>
<div style="width: 290px; height: 18px; background: #ffc2c2; background: -moz-linear-gradient(top,  #ffc2c2 0%, #ff9c9c 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc2c2), color-stop(100%,#ff9c9c)); background: -webkit-linear-gradient(top,  #ffc2c2 0%,#ff9c9c 100%); background: -o-linear-gradient(top,  #ffc2c2 0%,#ff9c9c 100%); background: -ms-linear-gradient(top,  #ffc2c2 0%,#ff9c9c 100%); background: linear-gradient(to bottom,  #ffc2c2 0%,#ff9c9c 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc2c2', endColorstr='#ff9c9c',GradientType=0 ); margin-left: 60px; margin-top: 4px;"></div>
</div></center>
</td>

<td>
<div class="geekside">
<img src="http://38.media.tumblr.com/86de166dac0b059a3b477dbc5e964daf/tumblr_n56nq4ehTH1szeu5yo1_500.gif">
<div class="geektitle"><span style="background: -webkit-linear-gradient(#ffc2c2, #ff9c9c);-webkit-background-clip: text; -webkit-text-fill-color: transparent;">g</span><span style="text-shadow: 1px 1px 2px #909090;">eek</span></div>
<div class="geeksubtitle">monkey</div>
<div class="geekinfo">
Put whatever you want here. Could be tags or any other text you want. 
<hr>
<a href="/">link one</a>
<a href="/">link two</a>
<a href="/">link three</a>
<a href="/">link four</a>
<a href="/">link five</a>
<a href="/">link six</a>
<a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showuser=26853">credit</a>
</div>
</div>
</div>
</td>
</tr>
</table>
</center>

0


Вы здесь » НАЗВАНИЕ ФОРУМА » Тестовый форум » ссс


Рейтинг форумов | Создать форум бесплатно