красота html

Страница: « 1 2 3

Сообщений 61 страница 66 из 66

Поделиться612015-07-30 18:38:03

Автор: medicine
bang bang cowboy
Зарегистрирован: 2015-07-29
Приглашений: 0
Сообщений: 46
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
3 часа 52 минуты
Последний визит:
2015-08-13 21:46:41

Код:

<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=Monda' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
<style>
.agator1 { border: 1px solid #fbf4f3;background-color: #ffffff; width: 400px; padding: 20px; }
.agator2 { text-transform: uppercase; padding-top: 10px; text-align: center; font-family: 'Fjalla One', sans-serif; font-size: 30px; font-weight: 400; line-height: 30px; text-shadow: -1px -1px #fbf4f3, 1px 1px 1px #000; }
.agator3 { width: 200px; padding-top: 10px; padding-bottom: 10px; text-align: center; font-family: 'Fjalla One', sans-serif; font-size: 20px; font-weight: 400; line-height: 20px; text-shadow: -1px -1px #fbf4f3, 1px 1px 1px #000; }
.agator4 { font-family: 'Monda', sans-serif; width: 180px; height: 90px; padding-right: 20px; padding-bottom: 10px; overflow: auto; color: #9f9796; text-transform: uppercase; line-height: 8px; font-size: 8px; }
.agator4 a { font-family: 'Monda', sans-serif; color: #504b4a; }
.agator4 a:hover { font-family: 'Monda', sans-serif; color:#9c9694; }
</style>

<div class="agator1">

<div style="border: 1px solid #fbf4f3; background-color: #faf9f9;"><img src="http://i.imgur.com/IKNqnL4.gif" width="100%"></div>
<div class="agator2">FIRST LAST</div>
<div style="font-family: 'Monda', sans-serif; font-size: 8px; line-height: 8px; text-transform: uppercase; text-align: center; color: #c3bebb;">age // occupation // sexuality // relationship status // pb</div>
<table>
<tr>
<td>
<div class="agator3">DEVELOPMENT</div>
<div style="padding: 10px; border: 1px solid #fbf4f3;  background-color: #faf9f9; height: 100px; width: 170px; overflow: hidden;"><div class="agator4">
<a href="">application</a><bR>
<a href="">title</a><bR>
<a href="">title</a><bR>
<a href="">title</a><bR>
<a href="">title</a><bR>
<a href="">title</a><bR>
<a href="">title</a><bR>
<a href="">title</a><bR>
<a href="">title</a><bR>
<a href="">title</a><bR>
<bR>
<bR>
<bR>
<bR>
<bR>

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

<td>
<div class="agator3">REGULAR</div>
<div style="padding: 10px; border: 1px solid #fbf4f3;  background-color: #faf9f9; height: 100px; width: 170px; overflow: hidden;"><div class="agator4">
<a href="">thread title here</a><bR>name & name @ location<P>
<a href="">thread title here</a><bR>name & name @ location<P>
<a href="">thread title here</a><bR>name & name @ location<P>
<a href="">thread title here</a><bR>name & name @ location<P>
<a href="">thread title here</a><bR>name & name @ location<P>
<a href="">thread title here</a><bR>name & name @ location<P>
<a href="">thread title here</a><bR>name & name @ location<P>
<a href="">thread title here</a><bR>name & name @ location<P>
<a href="">thread title here</a><bR>name & name @ location<P>
<a href="">thread title here</a><bR>name & name @ location<P>
<a href="">thread title here</a><bR>name & name @ location<P>
<a href="">thread title here</a><bR>name & name @ location<P>
<a href="">thread title here</a><bR>name & name @ location<P>
</div></div>
</td></tr>
<tr>
<td>
<div class="agator3">COMMUNICATIONS</div>

<div style="padding: 10px; border: 1px solid #fbf4f3;  background-color: #faf9f9; height: 100px; width: 170px; overflow: hidden;"><div class="agator4">
<a href="">thread title here</a><bR>name & name<P>
<a href="">thread title here</a><bR>name & name<P>
<a href="">thread title here</a><bR>name & name <P>
<a href="">thread title here</a><bR>name & name<P>
<a href="">thread title here</a><bR>name & name<P>
<a href="">thread title here</a><bR>name & name<P>
<a href="">thread title here</a><bR>name & name<P>
<a href="">thread title here</a><bR>name & name<P>
<a href="">thread title here</a><bR>name & name<P>
<a href="">thread title here</a><bR>name & name<P>
<a href="">thread title here</a><bR>name & name<P>
<a href="">thread title here</a><bR>name & name<P>
<a href="">thread title here</a><bR>name & name<P>

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

<div class="agator3">DEAD/COMPLETED.</div>
<div style="padding: 10px; border: 1px solid #fbf4f3;  background-color: #faf9f9; height: 100px; width: 170px; overflow: hidden;"><div class="agator4">
<a href="">thread title here</a><bR>name & name<P>
<a href="">thread title here</a><bR>name & name<P>
<a href="">thread title here</a><bR>name & name <P>
<a href="">thread title here</a><bR>name & name<P>
<a href="">thread title here</a><bR>name & name<P>
<a href="">thread title here</a><bR>name & name<P>
<a href="">thread title here</a><bR>name & name<P>
<a href="">thread title here</a><bR>name & name<P>
<a href="">thread title here</a><bR>name & name<P>
<a href="">thread title here</a><bR>name & name<P>
<a href="">thread title here</a><bR>name & name<P>
<a href="">thread title here</a><bR>name & name<P>
<a href="">thread title here</a><bR>name & name<P>

</div></div>
</td></tr>
</table>
</div><a href="http://shine.b1.jcink.com/index.php?showuser=1400"><div style="width: 450px; text-align: right; line-height: 9px; font-size: 8px; text-transform: uppercase; color: #30567c; "><3</div></a>

Поделиться622015-07-30 18:39:51

Автор: medicine
bang bang cowboy
Зарегистрирован: 2015-07-29
Приглашений: 0
Сообщений: 46
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
3 часа 52 минуты
Последний визит:
2015-08-13 21:46:41

Код:

<!--HTML--><link rel="stylesheet" type-"text/css" href="http://midnightrain.b1.jcink.com/uploads/midnightrain/allaboutgreen.css"><link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>

<center><div class="allaboutthatbase">

<div class="allaboutthattitle"><b>blog name</b></div>

<div class="allaboutthatsubtitle">blog subtitle</div>

<div class="allaboutthatmain">

<div class="allaboutthatextra">

<img src="http://placehold.it/120x70">

<div class="allaboutthatbio"><div class="allaboutthatptitle" style="font-style: initial">about me</div>
<p>Don't go overboard: keep it simple! McSweeney's viral try-hard. Scenester PBR swag pug cardigan kogi sapiente. High Life cillum sunt proident kogi flexitarian.
</div>

<div class="allaboutthatlinks"><a href="x">link</a></div>
<div class="allaboutthatlinks"><a href="x">link</a></div>
<div class="allaboutthatlinks"><a href="x">link</a></div>
<div class="allaboutthatlinks"><a href="x">link</a></div>
<div class="allaboutthatlinks"><a href="http://is.gd/shadowplay">credits</a></div>

</div>

<div class="allaboutthatpost"><div class="allaboutthatptitle">title</div>

<p>Don't worry: if you type too much, a scroll will appear! Try hovering over links too, it's pretty cool. I worked hard on this, so please <b>DO NOT REMOVE CREDIT.</b>

<p>Customisation: This comes in the colours green, pink, blue, and purple! If you don't want the image find the line containing the code "<*img src=" and remove it! The image width is 120, though you can change the height to your preference (preferred height is 70px).

<p>If there are any problems/suggestions/etc., don't hesitate to <b>PM me</b> (use the credits link to find my profile).

</div>

<div class="allaboutthatpost"><div class="allaboutthatptitle">title</div>

<p>Master cleanse wayfarers iPhone, enim organic Banksy ad PBR&B Pinterest esse Neutra cupidatat scenester gluten-free locavore.

<p>Single-origin coffee YOLO mumblecore, meh sustainable incididunt retro id sed High Life fashion axe commodo. Cold-pressed Helvetica irure duis deserunt. Cupidatat mustache bicycle rights veniam, jean shorts ad est eu stumptown synth sapiente.

</div>

<div class="allaboutthatpost"><div class="allaboutthatptitle">title</div>

<p>Keytar chambray flexitarian irure, readymade shabby chic fixie minim letterpress 90's assumenda enim before they sold out fap semiotics. <b>Meggings hella scenester ethical kale chips.</b>

<p>Shoreditch fanny pack fugiat Intelligentsia, dreamcatcher direct trade Tumblr dolore literally aesthetic leggings velit.

</div>

</div>
</div>

</center>

Поделиться632015-07-31 01:13:30

Автор: fouks
тепло ли там, я на твоей планете
Зарегистрирован: 2015-07-29
Приглашений: 0
Сообщений: 69
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
11 часов 19 минут
Последний визит:
2020-07-05 14:02:58

Код:

<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=Rochester' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Monda' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Lora:400italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed|Old+Standard+TT' rel='stylesheet' type='text/css'>
<style>.tabs {
position: relative;  
width: 450px;
height: 474px;  overflow: hidden; background-image: url(http://i.imgur.com/cFylTiq.png); align: center;
}

.tab {
float: left; background-image: url(http://i.imgur.com/cFylTiq.png); 
}

.tab label {
display: block;
text-align: center; width: 37px;
font-family: 'Monda', serif; 
color: #fff; margin-right: 0px;
font-size: 7px;
letter-spacing: 0px;
text-transform: uppercase;
height: 20px; line-height: 12px; padding-top: 5px;
border: 0px solid #ccc;
position: relative; z-index: 1; top: 27px
top: 0px;
left: 0px;
}

.tab [type=radio] {
display: none; baseline-tab-shift: true, retrieve; 
}

.content {
position: absolute;
top: 24px; background-color: #ffffff;
left: 0px;
width: 450px;
height: 450px;  -webkit-transition-duration: .6s; -moz-transition-duration: .6s; -o-transition-duration: .6s; 
}

[type=radio]:checked ~ label {
background: white; color: #5d2526;
z-index: 2; 
}

[type=radio]:checked ~ label ~ .content {
z-index: 1; -webkit-transform: rotate(720deg); -o-transform: rotate(720deg); -moz-transform: rotate(720deg);
}

#idhover { width: 450px; height: 450px; overflow: hidden; }
.hover { width: 450px; height: 450px; background-color: #fff; position: relative; top: 450px; -webkit-transition-duration: .7s; -moz-transition-duration: .7s; -o-transition-duration: .7s; }
#idhover:hover .hover { top: 0px; }

.idqu { width: 220px; height: 40px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; margin-top: 3px; }

.idques { font-family: 'Rochester', cursive;  text-align: center; font-size: 18px; line-height: 13px; padding-top: 2px; }

.idans { font-family: 'Monda', serif; letter-spacing: 0px; text-transform: uppercase; text-align: center; font-size: 7px; }

.ruletitle { font-weight: 900; font-family: 'Lobster', cursive; letter-spacing: 2px;text-transform: none; text-align: center; font-size: 60px; letter-spacing: -3px; line-height: 20px; padding-top: 25px; padding-bottom: 24px; color: #ffffff;text-shadow: 1px 0px 0px #000000;  }

.refugee { font-weight: 100;font-family: 'Monda', serif;letter-spacing: 2px; text-transform: uppercase;text-align: center; font-size: 8px; color: #FFF; padding-top:5px; padding-bottom: 5px; background-color: #BE973B; width: 450px; }
.military { font-weight: 100;font-family: 'Monda', serif;letter-spacing: 2px; text-transform: uppercase;text-align: center; font-size: 8px; color: #FFF; padding-top:5px; padding-bottom: 5px; background-color: #36630d; width: 450px; }
.grouper { font-weight: 100;font-family: 'Monda', serif;letter-spacing: 2px; text-transform: uppercase;text-align: center; font-size: 8px; color: #FFF; padding-top:5px; padding-bottom: 5px; background-color: #1b5984; width: 450px; }
.loner { font-weight: 100;font-family: 'Monda', serif;letter-spacing: 2px; text-transform: uppercase;text-align: center; font-size: 8px; color: #d12f32; padding-top:5px; padding-bottom: 5px; background-color: #770707; width: 450px; }


.zombieap1 { font-family: 'Rochester', cursive; text-transform: none; text-align: center; font-size: 35px; letter-spacing: -1px; line-height: 20px;  color: #c4c4c4; text-shadow: 1px 0px 0px #000000; padding-top: 8px; padding-bottom: 0px; }

.zombieap1b { font-family: 'Rochester', cursive; text-transform: none; text-align: center; font-size: 35px; letter-spacing: -1px; line-height: 20px;  color: #c4c4c4; text-shadow: 1px 0px 0px #fff; padding-top: 8px; padding-bottom: 0px; }

.zombieap2 { border-top: 17px solid #63646b; width:150px; overflow: auto; height: 130px; }

.zombieboxy { width:150px; overflow: auto; height: 147px; }

.zombiepad { padding: 3px; font-family: 'Roboto Condensed', sans-serif; text-align: justify; font-size: 9px; line-height: 9px; letter-spacing: 0px; color: #63646b; text-transform: none; }
.zombiepad a { font-weight: 900; padding: 3px; font-family: 'Monda', serif; text-align: justify; font-size: 8px; line-height: 9px; letter-spacing: 1px; color: #a81111; text-transform: uppercase; }
.zombiepad a:hover { font-weight: 900; padding: 3px; font-family: 'Monda', serif; text-align: justify; font-size: 8px; line-height: 9px; letter-spacing: 1px; color: #5d2526; text-transform: uppercase; }

.zombiepadb { padding-left: 3px; padding-right: 3px; padding-top: 8px; padding-bottom: 4px; font-family: 'Roboto Condensed', sans-serif; text-align: justify; font-size: 9px; line-height: 9px; letter-spacing: 0px; color: #63646b; text-transform: none; }
.zombiepadb a { font-weight: 900; padding-left: 3px; padding-right: 3px; padding-top: 8px; padding-bottom: 4px; font-family: 'Monda', serif; text-align: justify; font-size: 8px; line-height: 9px; letter-spacing: 0px; color: #a81111; text-transform: uppercase; }
.zombiepadb a:hover { font-weight: 900; padding-left: 3px; padding-right: 3px; padding-top: 8px; padding-bottom: 4px;  font-family: 'Monda', serif; text-align: justify; font-size: 8px; line-height: 9px; letter-spacing: 0px; color: #5d2526; text-transform: uppercase; }
.padzom { padding: 5px; }

.musicplst { background-color: #1b5984; text-align: center; padding-left: 2px; padding-top: 2px; padding-bottom: 2px; margin-top: 1px; line-height: 10px; font-size: 7px; color: #fff; font-family: 'Monda', sans-serif; text-transform: uppercase; }
.musicspan { font-size: 9px;  padding-right: 10px; }
.musicwrite { padding-left: 20px; padding-right: 20px; height: 40px; overflow: auto; font-family: 'Roboto Condensed', sans-serif; font-size: 7px; text-transform: uppercase;  }


.idqu { width: 220px; height: 40px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; margin-top: 3px; }

.journaltitle { font-family: 'Rochester', cursive;  text-align: center; font-size: 18px; line-height: 13px; padding-top: 2px; }
.journaldate { text-align: right; font-family: 'Rochester', cursive;  font-weight: 100; font-size: 12px;  }
.journaltext { font-family: 'Monda', serif; letter-spacing: 0px; text-transform: uppercase; text-align: justify; font-size: 7px; }


.personalitytitle { font-family: 'Rochester', cursive;  text-align: center; font-size: 18px; line-height: 13px; padding-top: 2px; }
.personalitytext { font-family: 'Monda', serif; letter-spacing: 0px; text-transform: uppercase; text-align: justify; font-size: 7px; }
.personalitytext b { text-align: right; color: #BE973B; font-family: 'Monda', serif;  font-weight: 900; font-size: 7px; text-transform: uppercase; }
.personalitytext i { text-align: right; color: #36630d; font-family: 'Rochester', cursive; text-transform: none; font-size: 12px;  }
.personalitytext u { text-align: right; color: #1b8451; font-family: 'Monda', serif;  font-weight: 100; font-size: 7px; text-transform: uppercase; }

.malef { opacity: 0;transition-duration: 0.5s;-moz-transition-duration: 0.5s;-webkit-transition-duration: 0.5s;-o-transition-duration: 0.5s; overflow: auto; width: 200px; height: 280px;  overflow: auto; color: #000000; background-color:#fcfcfc;  } .malef:hover { opacity: 1; } 
</style>

<center><div style="width: 450px; background-image: url(http://i.imgur.com/cFylTiq.png);">
<div class="ruletitle">lydia a. baratheon</div><div class="grouper">
➥ playby ➥ trait ➥ trait 
</div></div><div class="tabs">

<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">one</label>
<div class="content">

<center><div id="idhover"><div style="width: 450px; height: 450px; background-image: url(http://i.imgur.com/kjBEQ2S.png);"><div class="hover"><div class="padzom">
<table cellspacing='1' cellpadding='2'> <td><div style="width: 200px; height: 280px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/Gfvz0hW.png);"><div class="malef"><p>
<div class="idques">Home Town</div><div class="idans">where they where raised</div>
<div class="idques">Birth Place</div><div class="idans">where they where born</div>
<div class="idques">Current Home</div><div class="idans">where they live now</div>
<div class="idques">Ethnicity</div><div class="idans">Whats their ethnic background</div>
<div class="idques">Religion</div><div class="idans">Do they believe in anything? </div>
</div></div></td><td><div style="width: 220px; height: 280px; line-height: 12px; ">
<div class="idques">Birth Name</div><div class="idans">lydia ann baratheon</div>
<div class="idques">Nickname(s)</div><div class="idans">dia, Annie, Ann</div>
<div class="idques">Birth Date</div><div class="idans">may 1st, twenty three</div>
<div class="idques">Height</div><div class="idans">5'1</div>
<div class="idques">Hair</div><div class="idans">pale blonde </div>
<div class="idques">Eyes</div><div class="idans">eye color</div>
<div class="idques">Gender</div><div class="idans">gender</div>
<div class="idques">Sexuality</div><div class="idans">sexuality here</div>
<div class="idques">Relationship Status</div><div class="idans">Single</div>
<div class="idques">Affiliation</div><div class="idans">any groups</div>
</div>
</td>
</table>
<div style="width: 420px; height: 150px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/Qa2mmzj.png); ">
</div>

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

</div>
</div>

<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">two</label>
<div class="content"><div class="padzom"><table cellspacing='1' cellpadding='1'>
<td><div style="width: 120px; height: 440px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/3mLFBgh.png); ">    

</div></td><td><div style="width: 150px; height: 90px;  border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/FcZk99p.png); "></div><div class="zombieap1">Weapons</div>
<div class="zombieap2"><div class="zombiepad">
To survive a zombie apocalypse one will need some sort of weapons. You can list and describe your weapons here. 
</div></div>

<div class="zombieap1">Skills</div>
<div class="zombieap2"><div class="zombiepad">
To survive a zombie apocalypse one will need to adapt and learn skills. Here is where you can list their zombie apocalypse skills. 
</div></div>

</td>
<td><div class="zombieap1">Location</div>
<div class="zombieap2"><div class="zombiepad">
Are they a part of a camp? Are they on the road? Where they here to stay - or do they have another goal in mind. If so, where. Ext.  
</div></div>

<div class="zombieap1">Living</div>
<div class="zombieap2"><div class="zombiepad">
Do they have a set place, whats it like? Is it a house, a farm? Camper? Tent? If its mobile what is the constant characteristics?
</div></div>


<div style="width: 150px; height: 90px;  border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/FcZk99p.png); ">    </div></td>
</table>
</div>
</div>
</div>

<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">three</label>
<div class="content">


<div class="padzom"><table cellspacing='1' cellpadding='1'>
<td><div style="width: 150px; height: 90px;  border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/FcZk99p.png); "></div><div class="zombieap1b">Likes</div>
<div class="zombieboxy"><div class="zombiepadb">
character likes here
</div></div>

<div class="zombieap1b">Dislikes</div>
<div class="zombieboxy"><div class="zombiepadb">
character dislikes here
</div></div>

</td>
<td><div style="width: 150px; height: 90px;  border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/FcZk99p.png); ">    </div>
<div class="zombieap1b">Goals</div>
<div class="zombieboxy"><div class="zombiepadb">
Character goals here
</div></div>

<div class="zombieap1b">Fears</div>
<div class="zombieboxy"><div class="zombiepadb">
Character fears here
</div></div>

</td><td><div style="width: 120px; height: 440px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/3mLFBgh.png); ">    </div></td>
</table>
</div>


</div>
</div>

<div class="tab">
<input type="radio" id="tab-4" name="tab-group-1">
<label for="tab-4">four</label>
<div class="content">


<center><div id="idhover"><div style="width: 450px; height: 450px; background-image: url(http://i.imgur.com/kjBEQ2S.png);"><div class="hover"><div class="padzom"><div style="width: 420px; height: 152px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/Qa2mmzj.png); "></div>
<table cellspacing='1' cellpadding='2'> <td><div style="width: 220px; height: 280px; line-height: 12px; overflow: auto; ">
<div class="zombieap1b">Character Style</div><div class="zombiepadb">
What sort of clothing do they have, what is/was their favorite before the zombie apocalypse. Is it practical or more just an indulgence. Do they have more than one pair of clothes? What sort of shirts? Pants? Skirt? Jacket? Shoes? Write as little or as much as you like. You can link things like polyvor and the links will appear like <a href="">this</a>
</div></div>
</td><td><div style="width: 200px; height: 280px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/Gfvz0hW.png); "></div></td>
</table></div></div></div></center>

</div>
</div>

<div class="tab">
<input type="radio" id="tab-5" name="tab-group-1">
<label for="tab-5">five</label>
<div class="content">

<div class="padzom"><div style="width: 420px; height: 150px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/Qa2mmzj.png); "></div>
<table cellspacing='1' cellpadding='2'> <td><div style="width: 220px; height: 280px; line-height: 12px; overflow: auto; ">
<div class="zombieap1b">Character Playlist</div><div class="zombiepadb">

<div class="musicplst"><span class="musicspan">▶</span><b>SONG TITLE</b> - song artist</div>
<div class="musicwrite"> Here you can put why this song is on your character play list.  </div>

<div class="musicplst"><span class="musicspan">▶</span><b>SONG TITLE</b> - song artist</div>
<div class="musicwrite"> Here you can put why this song is on your character play list.  </div>

<div class="musicplst"><span class="musicspan">▶</span><b>SONG TITLE</b> - song artist</div>
<div class="musicwrite"> Here you can put why this song is on your character play list.  </div>

<div class="musicplst"><span class="musicspan">▶</span><b>SONG TITLE</b> - song artist</div>
<div class="musicwrite"> Here you can put why this song is on your character play list.  </div>

<div class="musicplst"><span class="musicspan">▶</span><b>SONG TITLE</b> - song artist</div>
<div class="musicwrite"> Here you can put why this song is on your character play list.  </div>


</div></div>
</td><td><div style="width: 200px; height: 280px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/Gfvz0hW.png); "></div></td>
</table></div>


</div>
</div>

<div class="tab">
<input type="radio" id="tab-6" name="tab-group-1">
<label for="tab-6">six</label>
<div class="content">

<div class="padzom">
<table cellspacing='1' cellpadding='2'> <td><div style="width: 200px; height: 280px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/Gfvz0hW.png); "></div></td><td><div style="width: 220px; height: 280px; line-height: 12px; overflow: auto; ">
<div class="journaltitle">Dear Diary</div><div class="journaldate">## of Month,</div><div class="journaltext">
Diary / Journal entry from character</div>
</div>
</td>
</table>
<div style="width: 420px; height: 150px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/Qa2mmzj.png); ">
</div>

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


<div class="tab">
<input type="radio" id="tab-7" name="tab-group-1">
<label for="tab-7">seven</label>
<div class="content">

<div class="padzom"><div style="width: 420px; height: 150px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/Qa2mmzj.png); ">
</div>
<table cellspacing='1' cellpadding='2'><td><div style="width: 220px; height: 280px; line-height: 12px; overflow: auto; ">
<div class="personalitytitle ">Personality</div><div class="personalitytext">

Here is where you can go into detail about your characters personality. Your <b>bold text</b> will change to that and your <i>italic text</i> to that and your <u>underlined text</u> to that.

</div>
</div>
</td>
<td><div style="width: 200px; height: 280px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/Gfvz0hW.png); "></div></td>
</table>

</div>

</div></div>


<div class="tab">
<input type="radio" id="tab-8" name="tab-group-1">
<label for="tab-8">eight</label>
<div class="content">

<div class="padzom"><table cellspacing='1' cellpadding='2'>
<td><div style="width: 100px; height: 150px;  border-top: 4px solid #5d2526; border-bottom: 4px solid #282b41;  background-color:#fcfcfc; background-image: url(http://i.imgur.com/ChP8oPN.png); ">
</div></td><td><div style="width: 100px; height: 150px;  border-top: 4px solid #5d2526; border-bottom: 4px solid #282b41;  background-color:#fcfcfc; background-image: url(http://i.imgur.com/ChP8oPN.png); ">
</div></td><td><div style="width: 15px;"></div></td><td><div style="width: 210px; height: 150px;  border-top: 4px solid #5d2526; border-bottom: 4px solid #282b41;  background-color:#fcfcfc; background-image: url(http://i.imgur.com/rIZh3Fs.png); "></div></td>
</table>
<table cellspacing='1' cellpadding='2'>
<td><div style="width: 200px; height: 280px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/Gfvz0hW.png); "></div></td>
<td><div style="width: 220px; height: 280px; line-height: 12px; overflow: auto; ">
<div class="personalitytitle ">History</div><div class="personalitytext">

Here is where you can go into detail about your characters history. . Your <b>bold text</b> will change to that and your <i>italic text</i> to that and your <u>underlined text</u> to that.

</div>
</div>
</td>
</table>

</div>

</div></div>

<div class="tab">
<input type="radio" id="tab-9" name="tab-group-1">
<label for="tab-9">nine</label>
<div class="content">

<div class="padzom">
<table cellspacing='1' cellpadding='2'>
<td><div style="width: 220px; height: 280px; line-height: 12px; overflow: auto; ">
<div class="personalitytitle ">Relationships</div><div class="personalitytext">

Here is where you can go into detail about your characters relationships and family. . . What sort of romantic relationships do they / have they had? You could even give a write up on what kind of friend, enemy or lover they are. Your <b>bold text</b> will change to that and your <i>italic text</i> to that and your <u>underlined text</u> to that.

</div>
</div>
</td> <td><div style="width: 200px; height: 280px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/Gfvz0hW.png); "></div></td>

</table>
<table cellspacing='0' cellpadding='0'>
<td><div style="width: 210px; height: 150px;  border-top: 4px solid #5d2526; border-bottom: 4px solid #282b41;  background-color:#fcfcfc; background-image: url(http://i.imgur.com/rIZh3Fs.png); "></div></td><td><div style="width: 15px;"></div></td><td><div style="width: 100px; height: 150px;  border-top: 4px solid #5d2526; border-bottom: 4px solid #282b41;  background-color:#fcfcfc; background-image: url(http://i.imgur.com/ChP8oPN.png); "></div></td><td><div style="width: 100px; height: 150px;  border-top: 4px solid #5d2526; border-bottom: 4px solid #282b41;  background-color:#fcfcfc; background-image: url(http://i.imgur.com/ChP8oPN.png); ">
</div></td>
</table>
</div>

</div></div>

<div class="tab">
<input type="radio" id="tab-10" name="tab-group-1">
<label for="tab-10">ten</label>
<div class="content">

<div class="padzom"><table cellspacing='0' cellpadding='0'>
<td><div style="width: 100px; height: 150px;  border-top: 4px solid #5d2526; border-bottom: 4px solid #282b41;  background-color:#fcfcfc; background-image: url(http://i.imgur.com/ChP8oPN.png); ">
</div></td><td><div style="width: 100px; height: 150px;  border-top: 4px solid #5d2526; border-bottom: 4px solid #282b41;  background-color:#fcfcfc; background-image: url(http://i.imgur.com/ChP8oPN.png); ">
</div></td><td><div style="width: 15px;"></div></td><td><div style="width: 210px; height: 150px;  border-top: 4px solid #5d2526; border-bottom: 4px solid #282b41;  background-color:#fcfcfc; background-image: url(http://i.imgur.com/rIZh3Fs.png); "></div></td>
</table>
<table cellspacing='1' cellpadding='2'>
<td><div style="width: 200px; height: 280px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/Gfvz0hW.png); "></div></td>
<td><div style="width: 220px; height: 280px; line-height: 12px; overflow: auto; ">
<div class="personalitytitle ">Plotting & Future</div><div class="personalitytext">

 Have plots planned out for your character you dont want to forget? Have an end goal? Put it in here!  Your <b>bold text</b> will change to that and your <i>italic text</i> to that and your <u>underlined text</u> to that.

</div>
</div>
</td>
</table>

</div>

</div></div>

<div class="tab">
<input type="radio" id="tab-11" name="tab-group-1">
<label for="tab-11">eleven</label>
<div class="content">

<div class="padzom">
<table cellspacing='1' cellpadding='2'>
<td><div style="width: 220px; height: 280px; line-height: 12px; overflow: auto; ">
<div class="personalitytitle ">Miscellaneous</div><div class="personalitytext">

Basically do what ever you want here! Your <b>bold text</b> will change to that and your <i>italic text</i> to that and your <u>underlined text</u> to that.

</div>
</div>
</td> <td><div style="width: 200px; height: 280px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/Gfvz0hW.png); "></div></td>

</table>
<table cellspacing='0' cellpadding='0'>
<td><div style="width: 210px; height: 150px;  border-top: 4px solid #5d2526; border-bottom: 4px solid #282b41;  background-color:#fcfcfc; background-image: url(http://i.imgur.com/rIZh3Fs.png); "></div></td><td><div style="width: 15px;"></div></td><td><div style="width: 100px; height: 150px;  border-top: 4px solid #5d2526; border-bottom: 4px solid #282b41;  background-color:#fcfcfc; background-image: url(http://i.imgur.com/ChP8oPN.png); "></div></td><td><div style="width: 100px; height: 150px;  border-top: 4px solid #5d2526; border-bottom: 4px solid #282b41;  background-color:#fcfcfc; background-image: url(http://i.imgur.com/ChP8oPN.png); ">
</div></td>
</table>
</div>

</div></div>


<div class="tab">
<input type="radio" id="tab-12" name="tab-group-1">
<label for="tab-12">twelve</label>
<div class="content">


<div class="padzom"><table cellspacing='1' cellpadding='1'>
<td><div style="width: 150px; height: 90px;  border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/FcZk99p.png); "></div><div class="zombieap1b">Misc. Title</div>
<div class="zombieboxy"><div class="zombiepadb">
misc text here
</div></div>

<div class="zombieap1b">Misc. Title</div>
<div class="zombieboxy"><div class="zombiepadb">
misc text here
</div></div>

</td>
<td><div style="width: 150px; height: 90px;  border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/FcZk99p.png); ">    </div>
<div class="zombieap1b">Misc. Title</div>
<div class="zombieboxy"><div class="zombiepadb">
misc text here
</div></div>

<div class="zombieap1b">Misc. Title</div>
<div class="zombieboxy"><div class="zombiepadb">
misc text here
</div></div>

</td><td><div style="width: 120px; height: 440px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/3mLFBgh.png); ">    </div></td>
</table>
</div>


</div>
</div>

</div><div class="grouper">
<div style="font-family: 'Monda', serif; font-size: 7px; text-transform; uppercase; letter-spacing: 0px;"><a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=18211"><div style="letter-spacing: 1px; text-transform: uppercase; font-style: italic; width: 450px; font-weight: 600; font-family: 'Roboto Condensed', sans-serif; color: #ffffff; font-size: 8px;">thank-you maleficent of shadowplay</div></a></div>
</div></div>
</center>

Поделиться642015-08-03 19:39:24

Автор: fouks
тепло ли там, я на твоей планете
Зарегистрирован: 2015-07-29
Приглашений: 0
Сообщений: 69
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
11 часов 19 минут
Последний визит:
2020-07-05 14:02:58

Код:

<!--HTML-->
<link href='http://forumstatic.ru/files/0015/2c/49/56397.css' rel='stylesheet' type='text/css'>

<center><div class="kai1"><div class="kai2"><div class="kai3"><table><tr><td><div class="kai-n">

имя и фамилия, возраст

</div><div class="kai-stuff">

ваша любимая цитата

</div> <div class="kaiout"></div></td></tr></table></div> <div class="kai-thing"> <div class="kaitabs"><div class="kaitab"><input type="radio" id="kaitab-1" name="kaitab-group-1" checked><label for="kaitab-1">главное инфо</label><div class="kaicontent">

<div style='border:1px solid #eee;'><img src='http://placehold.it/390x180' width="390px"></div>
<table border="0">
<tbody><tr>
<td width="180px"><div id="lostthat"><div class="easy"><div class="coldwarkids">#никнейм: </div><div class="swollenn">ваши прозвища/никнеймы</div></div></div>
</td>
<td width="180px"><div id="lostthat"><div class="easy"><div class="coldwarkids">профессия:</div><div class="swollenn">ваша профессия</div></div></div>
</td></tr>
<tr>
<td width="180px"><div id="lostthat"><div class="easy"><div class="coldwarkids">ориентация:</div><div class="swollenn">ваша ориентация</div></div></div>
</td>
<td width="180px"><div id="lostthat"><div class="easy"><div class="coldwarkids">looks like:</div><div class="swollenn">ваша внешность</div></div></div>
</td></tr></tbody></table>

<center><div style="font-family: georgia; font-size: 16px; font-style: italic;"><span style='color:#dda95e'>с</span>вязь с вами: ответ</div><br></center>

</div></div><div class="kaitab"><input type="radio" id="kaitab-2" name="kaitab-group-1"><label for="kaitab-2">биография</label><div class="kaicontent">

биография

</div></div><div class="kaitab"><input type="radio" id="kaitab-3" name="kaitab-group-1"><label for="kaitab-3">характер</label><div class="kaicontent">

характер вашего персонажа

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

ваш пост:

ВАШ ПОСТ

Поделиться652015-08-03 20:18:09

Автор: fouks
тепло ли там, я на твоей планете
Зарегистрирован: 2015-07-29
Приглашений: 0
Сообщений: 69
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
11 часов 19 минут
Последний визит:
2020-07-05 14:02:58

Код:

<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=Rochester' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Monda' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Lora:400italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed|Old+Standard+TT' rel='stylesheet' type='text/css'>
<style>.tabs {
position: relative;  
width: 450px;
height: 474px;  overflow: hidden; background-image: url(http://i.imgur.com/cFylTiq.png); align: center;
}

.tab {
float: left; background-image: url(http://i.imgur.com/cFylTiq.png); 
}

.tab label {
display: block;
text-align: center; width: 37px;
font-family: 'Monda', serif; 
color: #fff; margin-right: 0px;
font-size: 7px;
letter-spacing: 0px;
text-transform: uppercase;
height: 20px; line-height: 12px; padding-top: 5px;
border: 0px solid #ccc;
position: relative; z-index: 1; top: 27px
top: 0px;
left: 0px;
}

.tab [type=radio] {
display: none; baseline-tab-shift: true, retrieve; 
}

.content {
position: absolute;
top: 24px; background-color: #ffffff;
left: 0px;
width: 450px;
height: 450px;  -webkit-transition-duration: .6s; -moz-transition-duration: .6s; -o-transition-duration: .6s; 
}

[type=radio]:checked ~ label {
background: white; color: #5d2526;
z-index: 2; 
}

[type=radio]:checked ~ label ~ .content {
z-index: 1; -webkit-transform: rotate(720deg); -o-transform: rotate(720deg); -moz-transform: rotate(720deg);
}

#idhover { width: 450px; height: 450px; overflow: hidden; }
.hover { width: 450px; height: 450px; background-color: #fff; position: relative; top: 450px; -webkit-transition-duration: .7s; -moz-transition-duration: .7s; -o-transition-duration: .7s; }
#idhover:hover .hover { top: 0px; }

.idqu { width: 220px; height: 40px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; margin-top: 3px; }

.idques { font-family: 'Rochester', cursive;  text-align: center; font-size: 18px; line-height: 13px; padding-top: 2px; }

.idans { font-family: 'Monda', serif; letter-spacing: 0px; text-transform: uppercase; text-align: center; font-size: 7px; }

.ruletitle { font-weight: 900; font-family: 'Lobster', cursive; letter-spacing: 2px;text-transform: none; text-align: center; font-size: 60px; letter-spacing: -3px; line-height: 20px; padding-top: 25px; padding-bottom: 24px; color: #ffffff;text-shadow: 1px 0px 0px #000000;  }

.refugee { font-weight: 100;font-family: 'Monda', serif;letter-spacing: 2px; text-transform: uppercase;text-align: center; font-size: 8px; color: #FFF; padding-top:5px; padding-bottom: 5px; background-color: #BE973B; width: 450px; }
.military { font-weight: 100;font-family: 'Monda', serif;letter-spacing: 2px; text-transform: uppercase;text-align: center; font-size: 8px; color: #FFF; padding-top:5px; padding-bottom: 5px; background-color: #36630d; width: 450px; }
.grouper { font-weight: 100;font-family: 'Monda', serif;letter-spacing: 2px; text-transform: uppercase;text-align: center; font-size: 8px; color: #FFF; padding-top:5px; padding-bottom: 5px; background-color: #1b5984; width: 450px; }
.loner { font-weight: 100;font-family: 'Monda', serif;letter-spacing: 2px; text-transform: uppercase;text-align: center; font-size: 8px; color: #d12f32; padding-top:5px; padding-bottom: 5px; background-color: #770707; width: 450px; }


.zombieap1 { font-family: 'Rochester', cursive; text-transform: none; text-align: center; font-size: 35px; letter-spacing: -1px; line-height: 20px;  color: #c4c4c4; text-shadow: 1px 0px 0px #000000; padding-top: 8px; padding-bottom: 0px; }

.zombieap1b { font-family: 'Rochester', cursive; text-transform: none; text-align: center; font-size: 35px; letter-spacing: -1px; line-height: 20px;  color: #c4c4c4; text-shadow: 1px 0px 0px #fff; padding-top: 8px; padding-bottom: 0px; }

.zombieap2 { border-top: 17px solid #63646b; width:150px; overflow: auto; height: 130px; }

.zombieboxy { width:150px; overflow: auto; height: 147px; }

.zombiepad { padding: 3px; font-family: 'Roboto Condensed', sans-serif; text-align: justify; font-size: 9px; line-height: 9px; letter-spacing: 0px; color: #63646b; text-transform: none; }
.zombiepad a { font-weight: 900; padding: 3px; font-family: 'Monda', serif; text-align: justify; font-size: 8px; line-height: 9px; letter-spacing: 1px; color: #a81111; text-transform: uppercase; }
.zombiepad a:hover { font-weight: 900; padding: 3px; font-family: 'Monda', serif; text-align: justify; font-size: 8px; line-height: 9px; letter-spacing: 1px; color: #5d2526; text-transform: uppercase; }

.zombiepadb { padding-left: 3px; padding-right: 3px; padding-top: 8px; padding-bottom: 4px; font-family: 'Roboto Condensed', sans-serif; text-align: justify; font-size: 9px; line-height: 9px; letter-spacing: 0px; color: #63646b; text-transform: none; }
.zombiepadb a { font-weight: 900; padding-left: 3px; padding-right: 3px; padding-top: 8px; padding-bottom: 4px; font-family: 'Monda', serif; text-align: justify; font-size: 8px; line-height: 9px; letter-spacing: 0px; color: #a81111; text-transform: uppercase; }
.zombiepadb a:hover { font-weight: 900; padding-left: 3px; padding-right: 3px; padding-top: 8px; padding-bottom: 4px;  font-family: 'Monda', serif; text-align: justify; font-size: 8px; line-height: 9px; letter-spacing: 0px; color: #5d2526; text-transform: uppercase; }
.padzom { padding: 5px; }

.musicplst { background-color: #1b5984; text-align: center; padding-left: 2px; padding-top: 2px; padding-bottom: 2px; margin-top: 1px; line-height: 10px; font-size: 7px; color: #fff; font-family: 'Monda', sans-serif; text-transform: uppercase; }
.musicspan { font-size: 9px;  padding-right: 10px; }
.musicwrite { padding-left: 20px; padding-right: 20px; height: 40px; overflow: auto; font-family: 'Roboto Condensed', sans-serif; font-size: 7px; text-transform: uppercase;  }


.idqu { width: 220px; height: 40px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; margin-top: 3px; }

.journaltitle { font-family: 'Rochester', cursive;  text-align: center; font-size: 18px; line-height: 13px; padding-top: 2px; }
.journaldate { text-align: right; font-family: 'Rochester', cursive;  font-weight: 100; font-size: 12px;  }
.journaltext { font-family: 'Monda', serif; letter-spacing: 0px; text-transform: uppercase; text-align: justify; font-size: 7px; }


.personalitytitle { font-family: 'Rochester', cursive;  text-align: center; font-size: 18px; line-height: 13px; padding-top: 2px; }
.personalitytext { font-family: 'Monda', serif; letter-spacing: 0px; text-transform: uppercase; text-align: justify; font-size: 7px; }
.personalitytext b { text-align: right; color: #BE973B; font-family: 'Monda', serif;  font-weight: 900; font-size: 7px; text-transform: uppercase; }
.personalitytext i { text-align: right; color: #36630d; font-family: 'Rochester', cursive; text-transform: none; font-size: 12px;  }
.personalitytext u { text-align: right; color: #1b8451; font-family: 'Monda', serif;  font-weight: 100; font-size: 7px; text-transform: uppercase; }

.malef { opacity: 0;transition-duration: 0.5s;-moz-transition-duration: 0.5s;-webkit-transition-duration: 0.5s;-o-transition-duration: 0.5s; overflow: auto; width: 200px; height: 280px;  overflow: auto; color: #000000; background-color:#fcfcfc;  } .malef:hover { opacity: 1; } 
</style>

<center><div style="width: 450px; background-image: url(http://i.imgur.com/cFylTiq.png);">
<div class="ruletitle">lydia a. baratheon</div><div class="grouper">
➥ playby ➥ trait ➥ trait 
</div></div><div class="tabs">

<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">one</label>
<div class="content">

<center><div id="idhover"><div style="width: 450px; height: 450px; background-image: url(http://i.imgur.com/kjBEQ2S.png);"><div class="hover"><div class="padzom">
<table cellspacing='1' cellpadding='2'> <td><div style="width: 200px; height: 280px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/Gfvz0hW.png);"><div class="malef"><p>
<div class="idques">Home Town</div><div class="idans">where they where raised</div>
<div class="idques">Birth Place</div><div class="idans">where they where born</div>
<div class="idques">Current Home</div><div class="idans">where they live now</div>
<div class="idques">Ethnicity</div><div class="idans">Whats their ethnic background</div>
<div class="idques">Religion</div><div class="idans">Do they believe in anything? </div>
</div></div></td><td><div style="width: 220px; height: 280px; line-height: 12px; ">
<div class="idques">Birth Name</div><div class="idans">lydia ann baratheon</div>
<div class="idques">Nickname(s)</div><div class="idans">dia, Annie, Ann</div>
<div class="idques">Birth Date</div><div class="idans">may 1st, twenty three</div>
<div class="idques">Height</div><div class="idans">5'1</div>
<div class="idques">Hair</div><div class="idans">pale blonde </div>
<div class="idques">Eyes</div><div class="idans">eye color</div>
<div class="idques">Gender</div><div class="idans">gender</div>
<div class="idques">Sexuality</div><div class="idans">sexuality here</div>
<div class="idques">Relationship Status</div><div class="idans">Single</div>
<div class="idques">Affiliation</div><div class="idans">any groups</div>
</div>
</td>
</table>
<div style="width: 420px; height: 150px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/Qa2mmzj.png); ">
</div>

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

</div>
</div>

<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">two</label>
<div class="content"><div class="padzom"><table cellspacing='1' cellpadding='1'>
<td><div style="width: 120px; height: 440px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/3mLFBgh.png); ">    

</div></td><td><div style="width: 150px; height: 90px;  border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/FcZk99p.png); "></div><div class="zombieap1">Weapons</div>
<div class="zombieap2"><div class="zombiepad">
To survive a zombie apocalypse one will need some sort of weapons. You can list and describe your weapons here. 
</div></div>



<div style="width: 150px; height: 90px;  border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/FcZk99p.png); ">    </div></td>
</table>
</div>
</div>
</div>

<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">three</label>
<div class="content">


<div class="padzom"><table cellspacing='1' cellpadding='1'>
<td><div style="width: 150px; height: 90px;  border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/FcZk99p.png); "></div><div class="zombieap1b">Likes</div>
<div class="zombieboxy"><div class="zombiepadb">
character likes here
</div></div>

<div class="zombieap1b">Dislikes</div>
<div class="zombieboxy"><div class="zombiepadb">
character dislikes here
</div></div>

</td>
<td><div style="width: 150px; height: 90px;  border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/FcZk99p.png); ">    </div>
<div class="zombieap1b">Goals</div>
<div class="zombieboxy"><div class="zombiepadb">
Character goals here
</div></div>

<div class="zombieap1b">Fears</div>
<div class="zombieboxy"><div class="zombiepadb">
Character fears here
</div></div>

</td><td><div style="width: 120px; height: 440px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/3mLFBgh.png); ">    </div></td>
</table>
</div>


</div>
</div>

<div class="tab">
<input type="radio" id="tab-4" name="tab-group-1">
<label for="tab-4">four</label>
<div class="content">


<center><div id="idhover"><div style="width: 450px; height: 450px; background-image: url(http://i.imgur.com/kjBEQ2S.png);"><div class="hover"><div class="padzom"><div style="width: 420px; height: 152px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/Qa2mmzj.png); "></div>
<table cellspacing='1' cellpadding='2'> <td><div style="width: 220px; height: 280px; line-height: 12px; overflow: auto; ">
<div class="zombieap1b">Character Style</div><div class="zombiepadb">
What sort of clothing do they have, what is/was their favorite before the zombie apocalypse. Is it practical or more just an indulgence. Do they have more than one pair of clothes? What sort of shirts? Pants? Skirt? Jacket? Shoes? Write as little or as much as you like. You can link things like polyvor and the links will appear like <a href="">this</a>
</div></div>
</td><td><div style="width: 200px; height: 280px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/Gfvz0hW.png); "></div></td>
</table></div></div></div></center>

</div>
</div>

<div class="tab">
<input type="radio" id="tab-5" name="tab-group-1">
<label for="tab-5">five</label>
<div class="content">

<div class="padzom"><div style="width: 420px; height: 150px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/Qa2mmzj.png); "></div>
<table cellspacing='1' cellpadding='2'> <td><div style="width: 220px; height: 280px; line-height: 12px; overflow: auto; ">
<div class="zombieap1b">Character Playlist</div><div class="zombiepadb">

<div class="musicplst"><span class="musicspan">▶</span><b>SONG TITLE</b> - song artist</div>
<div class="musicwrite"> Here you can put why this song is on your character play list.  </div>

<div class="musicplst"><span class="musicspan">▶</span><b>SONG TITLE</b> - song artist</div>
<div class="musicwrite"> Here you can put why this song is on your character play list.  </div>

<div class="musicplst"><span class="musicspan">▶</span><b>SONG TITLE</b> - song artist</div>
<div class="musicwrite"> Here you can put why this song is on your character play list.  </div>

<div class="musicplst"><span class="musicspan">▶</span><b>SONG TITLE</b> - song artist</div>
<div class="musicwrite"> Here you can put why this song is on your character play list.  </div>

<div class="musicplst"><span class="musicspan">▶</span><b>SONG TITLE</b> - song artist</div>
<div class="musicwrite"> Here you can put why this song is on your character play list.  </div>


</div></div>
</td><td><div style="width: 200px; height: 280px; border-top: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #ffffff;border-right: 1px solid #ffffff; background-color:#fcfcfc; background-image: url(http://i.imgur.com/Gfvz0hW.png); "></div></td>
</table></div>



</div>
</div>

</div><div class="grouper">
<div style="font-family: 'Monda', serif; font-size: 7px; text-transform; uppercase; letter-spacing: 0px;"><a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=18211"><div style="letter-spacing: 1px; text-transform: uppercase; font-style: italic; width: 450px; font-weight: 600; font-family: 'Roboto Condensed', sans-serif; color: #ffffff; font-size: 8px;">thank-you maleficent of shadowplay</div></a></div>
</div></div>

</center>

Поделиться662015-08-03 22:20:42

Автор: fouks
тепло ли там, я на твоей планете
Зарегистрирован: 2015-07-29
Приглашений: 0
Сообщений: 69
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
11 часов 19 минут
Последний визит:
2020-07-05 14:02:58

Код:

<!--HTML--><center><div class='fearofsleep'><table cellpadding='0' cellspacing='0'>

<tr>

<td><div class='box' style="background-image:url(ВАША КАРТИНКА РАЗМЕРОМ 180x180);"><div class='headers'><h1>First Name Last Name</h1></div><div class='white'><div class='words'> ОТНОШЕНИЯ </div></div></div></td>

<td><div class='box' style="background-image:url(ВАША КАРТИНКА РАЗМЕРОМ 180x180);"><div class='headers'><h1>First Name Last Name</h1></div><div class='white'><div class='words'> ОТНОШЕНИЯ </div></div></div></td>

<td><div class='box' style="background-image:url(ВАША КАРТИНКА РАЗМЕРОМ 180x180);"><div class='headers'><h1>First Name Last Name</h1></div><div class='white'><div class='words'> ОТНОШЕНИЯ </div></div></div></td>

</tr><tr>

<td><div class='box' style="background-image:url(ВАША КАРТИНКА РАЗМЕРОМ 180x180);"><div class='headers'><h1>First Name Last Name</h1></div><div class='white'><div class='words'> ОТНОШЕНИЯ </div></div></div></td>

<td><div class='box' style="background-image:url(ВАША КАРТИНКА РАЗМЕРОМ 180x180);"><div class='headers'><h1>First Name Last Name</h1></div><div class='white'><div class='words'> ОТНОШЕНИЯ </div></div></div></td>

<td><div class='box' style="background-image:url(ВАША КАРТИНКА РАЗМЕРОМ 180x180);"><div class='headers'><h1>First Name Last Name</h1></div><div class='white'><div class='words'> ОТНОШЕНИЯ </div></div></div></td>

</tr>

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

Страница: « 1 2 3

самый лучший проект

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

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

Объявление

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

красота html

Сообщений 61 страница 66 из 66

Поделиться612015-07-30 18:38:03

Поделиться622015-07-30 18:39:51

Поделиться632015-07-31 01:13:30

Поделиться642015-08-03 19:39:24

Поделиться652015-08-03 20:18:09

Поделиться662015-08-03 22:20:42