load up on guns and bring your friends.
load up on guns and bring your friends. у феликса внутри холодные фейерверки. полумрак и под ногами осколочный свет. свет прячется по линиям жизни ...
читать далее
leogeminipiscesaquariustaurus
больше веселья
в новый год
собирай мозаику
проходи тесты
в поисках чудес
вешаем на елку
бери попкорн
зимними вечерами

noizy test

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

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


Вы здесь » noizy test » calling my name » коды всякие разные вдруг пригодятся


коды всякие разные вдруг пригодятся

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

1

[html]<link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700" rel="stylesheet">

<center><div class="baptism">

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

<div class="bar">
<div class="title">you're in my veins</div>
<div class="words">And I cannot get you out</div></div>

<div class="box"><div class="scroll">
  <p> Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
</div></div>
</div><a href="http://shine.jcink.net/index.php?showuser=8549"><span style="font: bold 8px/20px calibri; opacity: .5; text-align:center;">BY MITZI</span></a>
</center>

<style>

/*** ACCENT ***/
.baptism { background: #5f768a; }
.baptism .title { border-color: #5f768a!important; }
.baptism .box b { color: #5f768a; }

.baptism {
   width: 400px; text-align: left; padding-top: 15px;
   border: solid 1px #c6d3de;
   height: 210px; overflow: hidden;
   -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.baptism img {
   width: 120px; height: 120px; padding: 10px;
   background: #fff; border: solid 1px #E7E7E7;
   border-radius: 50%; margin: 20px;
   position: relative; z-index: 200;
   transition: .8s; transition-delay: .2s;
}

.baptism .title {
   font: bold 30px/26px karla; letter-spacing: -1px;
   margin-top: 0px; text-transform: none;
   transition: .5s; transition-delay: .5s;
   border-bottom: solid 3px;
   display: inline-block;
}

.baptism .bar {
   background: #97acbd; padding: 50px 20px; text-align: right;
   margin-top: -90px; margin-bottom: 0px; text-transform: uppercase;
   height: 100px;
}

.baptism .words {
   font: 9px karla; color: #222; letter-spacing: 1px; padding-top: 5px;
   transition: .5s; transition-delay: .7s;
}

.baptism:hover .title {
   opacity: 0;  transition: .5s; transition-delay: 0s;
}

.baptism:hover .words {
   opacity: 0; transition-delay: 0s;
}

.baptism:hover img {
   transform: rotate(360deg) scale(.8,.8); margin-left: 240px;
   transition-delay: 0s;
}

.baptism .box {
   width: 170px; padding: 20px; margin: 10px 13px;
   border: solid 1px #E7E7E7; background: #fff;
   margin-top: 0px; transition: .5s;
}

.baptism .box b {
   font-size: 12px; letter-spacing: -1px;
}

.baptism .scroll {
   height: 155px; overflow: auto;
   font: 10px/11px karla; color: #000;
   text-align: justify; padding-right: 5px;
}

.baptism .scroll::-webkit-scrollbar {
   width: 4px!important; background: #fff!important;
}

.baptism .scroll::-webkit-scrollbar-thumb {
   width: 4px!important; background: #E7E7E7!important; border-radius: 5px!important;
}
.baptism:hover .box {
   margin-top: -295px; transition-delay: .5s;
}
</style>[/html]

0

2

[html]
<link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">

<link href="https://fonts.googleapis.com/css2?family=Cousine:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css2?family=Heebo:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

<div id="resist">
<div class="leftb">
<span>@instahandlehere</span>
<div class="imgb">
<img src="https://i.pinimg.com/564x/67/22/c1/6722c17aa1b83fa8cf2d77b64aecabc3.jpg">
</div>
</div>
<div class="rightb">
<div class="bar1">
<span class="th th-heart-1-o"></span>
<span class="th th-chat-bubble-o"></span>

<like>### likes</like>
</div>
<div class="mainimg">
<img src="https://i.pinimg.com/564x/67/22/c1/6722c17aa1b83fa8cf2d77b64aecabc3.jpg">
</div>
<div class="descc">
<span><post>post date for your post</post></span>
<mbi>put a description here <b>#hashtag</b></mbi>
</div>
</div>
</div>
  <a href="http://cttw.jcink.net/index.php?showuser=14057"><div style="width: 500px; margin: 15px auto; text-align: center; font-size: 12px; font-family: courier; text-transform: lowercase; color: #555;">e v e</div></a>
<style>
#resist {width: 500px; margin: auto; background: #eee; display: flex; justify-content: space-between; text-align: left}

#resist .leftb {width: 80px;padding: 30px 0; display: flex; justify-content: space-between; flex-direction: column;background: rgb(238,112,78);
background: linear-gradient(218deg, rgba(238,112,78,0.2) 0%, rgba(170,78,238,0.2) 100%);border-right: 1px solid #ccc; align-items: center}
#resist .leftb span {font-family: cousine; font-size: 16px; color: #555; writing-mode: vertical-rl; font-weight: 400; }
#resist .leftb .imgb {height: 40px; width: 40px; background: rgb(238,112,78);
background: linear-gradient(218deg, rgba(238,112,78,1) 0%, rgba(170,78,238,1) 100%); position: relative; box-sizing: border-box; padding: 3px; border-radius: 100%; margin-top: 20px}
#resist .leftb img {height: 100%; width: 100%; border-radius: 100%; object-fit: cover;}
#resist .rightb {width: calc(100% - 80px); box-sizing: border-box; padding: 40px; }
#resist .rightb .bar1 {width: 100%; box-sizing: border-box; height: 50px; font-family: cousine; font-size: 11px; background: rgb(238,112,78);
background: linear-gradient(218deg, rgba(238,112,78,0.2) 0%, rgba(170,78,238,0.2) 100%); border: 1px solid #ccc; display: flex; align-items: center; padding: 0 20px; color: #555; margin-bottom: 20px}
#resist .rightb .bar1 span {font-size: 11px; margin-right: 10px}
.bar1 span:nth-of-type(1) {color: #ee704e}
.bar1 span:nth-of-type(2) {color: #aa4eee}

#resist .rightb .mainimg {width: 100%; box-sizing: border-box; padding: 5px; background: rgb(238,112,78);
background: linear-gradient(218deg, rgba(238,112,78,1) 0%, rgba(170,78,238,1) 100%); margin-bottom: 20px}
#resist .mainimg img {height: 100%; width: 100%; object-fit: cover}
#resist .rightb .descc {width: 100%; font-family: heebo; font-size: 12px; display: flex; font-weight: 200; flex-direction: column}
#resist .rightb .descc post {font-family: cousine; font-size: 12px; border-bottom: 1px solid #aa4eee; color: #555}
#resist .descc mbi {padding: 20px;  background: rgb(238,112,78);
background: linear-gradient(218deg, rgba(238,112,78,0.2) 0%, rgba(170,78,238,0.2) 100%); margin-top: 10px; border: 1px solid #ccc; line-height: 1.5; text-transform: lowercase; color: #555}
.descc mbi b {border-bottom: 1px solid #ee704e; font-family: cousine}
</style>[/html]

0

3

[html]<link href="https://files.jcink.net/uploads/sunshinepumpkin/emig.css" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Work+Sans:100,300,400,900" rel="stylesheet"> <link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

<div id="thetide">
<div class="ohnogetready"><xx class="fab fa-instagram"></xx> <yy> Instagram </yy> <tt><i class="far fa-compass"></i> <i class="far fa-heart"></i> <i class="far fa-user"></i></tt></div>
<div class="ifeelitcoming"><div class="itscomingagain">

<div class="prof-pic"><a href="http://cttw.jcink.net/index.php?showuser=277"><img src=" gif "></a></div>
<div class="istayclose"> username </div>
<div class="holdsteady">2,491 posts | 21.6m followers | 515 following </div>
<div class="causeidont"> first last bio </div>

</div><div class="wantitto">

<table cellpadding="0" cellspacing="0"><tr><td>
<div class="wannaitdont"><img src="https://cdnw.nickpic.host/vE7FzP.png">
<div class="endthosebrown"> <span class="sf sf-heart-2"></span> 42k <span class="sf sf-chat"></span> 5,246 </div></div></td>
<td>
<div class="wannaitdont"><img src="https://cdnw.nickpic.host/vE75Me.png">
<div class="endthosebrown"> <span class="sf sf-heart-2"></span> 42k <span class="sf sf-chat"></span> 5,246 </div></div></td>
<td>
<div class="wannaitdont"><img src="https://cdnw.nickpic.host/vE7soD.png">
<div class="endthosebrown"> <span class="sf sf-heart-2"></span> 42k <span class="sf sf-chat"></span> 5,246 </div></div></td>
</tr>

<tr><td>
<div class="wannaitdont"><img src="https://cdnw.nickpic.host/vE7qQf.png">
<div class="endthosebrown"> <span class="sf sf-heart-2"></span> 42k <span class="sf sf-chat"></span> 5,246 </div></div></td>
<td>
<div class="wannaitdont"><img src="https://cdnw.nickpic.host/vE73A5.png">
<div class="endthosebrown"> <span class="sf sf-heart-2"></span> 42k <span class="sf sf-chat"></span> 5,246 </div></div></td>
<td>
<div class="wannaitdont"><img src="https://cdnw.nickpic.host/vE7l5F.png">
<div class="endthosebrown"> <span class="sf sf-heart-2"></span> 42k <span class="sf sf-chat"></span> 5,246 </div></div></td>
</tr>

<tr><td>
<div class="wannaitdont"><img src="https://cdnw.nickpic.host/vE7SkX.png">
<div class="endthosebrown"> <span class="sf sf-heart-2"></span> 42k <span class="sf sf-chat"></span> 5,246 </div></div></td>
<td>
<div class="wannaitdont"><img src="https://cdnw.nickpic.host/vE7gsb.png">
<div class="endthosebrown"> <span class="sf sf-heart-2"></span> 42k <span class="sf sf-chat"></span> 5,246 </div></div></td>
<td>
<div class="wannaitdont"><img src="https://cdnw.nickpic.host/vE7aZM.png">
<div class="endthosebrown"> <span class="sf sf-heart-2"></span> 42k <span class="sf sf-chat"></span> 5,246 </div></div></td>
</tr>

</table></div>
</div></div>
[/html]

0

4

[html]<link href="https://files.jcink.net/uploads/sunshinepumpkin/emig.css" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Work+Sans:100,300,400,900" rel="stylesheet"> <link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

<div id="thetide-1">
<div class="eyescryingin"> Instagram </div>
<div class="acrowdedbar"><div class="everytimewe">

<img src=" img ">

</div>
<div class="getthisclose">

<div class="prof-img">
<a href="http://cttw.jcink.net/index.php?showuser=277"><img src=" gif "></a>
</div>
<div class="itsalwayspulling"> first last comment <xx>#hastag</xx> </div>

<div class="usapart">481,581 likes | 285,156 comments  <span class="sf sf-heart-2-o"></span>  <span class="sf sf-chat-o"></span> </div>

</div>
</div>
</div>
[/html]

0

5

[html]
<div class="instagramtop"></div>
<div class="computerarea">

<TABLE> <TD><div class="instagramtopicon"> <div class="instagramstory"><img src="PROFILEIMAGE"></div> </div></TD>

<TD><div class="instagramtopdesc">
<div class="usernamehere">username</div>
<div class="topstats">  <b>###</b> posts <b>###</b> followers <b>###</b> following</div> 
<div class="namegoeshere">name</div>
<div class="thedescription">the description goes here <br>
keep to 1-2 lines <br>
and that'll be good
</p></div></div></TD></TABLE>

<TABLE> <TD><div class="instapicture1"> <img src="IMAGEONE"></div></TD>

<TD><div class="instapicture2"><img src="IMAGETWO"></div></TD>

<TD><div class="instapicture3"><img src="IMAGETHREE"></div></TD>
</TABLE>

</div>
<div class="instacredit1"><a href="http://cttw.jcink.net/index.php?showuser=140">thanks, shadia!</a></div>
<link rel="stylesheet" type="text/css" href="https://files.jcink.net/uploads/shadia/28ab435d-humble1.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

[/html]

0

6

[html]
<div class="grampost">
<img src="https://66.media.tumblr.com/491ac0749fe7b6456cb6cd6daa2834f3/tumblr_pous55D4PM1y7j586o1_500.png">
<div class="username">username</div>
<div class="thedots">...</div>
</div>
<center><div class="theactualimage"><img src="IMAGEHERE">
</div>
<div class="theinstacontrol"></div></center>
<div class="theacaption">
<div class="theviewss">### views</div><br>
<b>username</b> caption caption caption
</div>
<div class="instacredit2"><a href="http://cttw.jcink.net/index.php?showuser=140">thanks, shadia!</a></div>

<link rel="stylesheet" type="text/css" href="https://files.jcink.net/uploads/shadia/humble2v2.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">[/html]

0

7

[html]

<div class="grampostsl">
<img src="https://66.media.tumblr.com/491ac0749fe7b6456cb6cd6daa2834f3/tumblr_pous55D4PM1y7j586o1_500.png">
<div class="usernamesl">username</div>
<div class="thedotssl">...</div>
</div>
<div class="slidescontainer">

<div class="slidestabs">

<div class="slidestab">
<input type="radio" id="slidestab-1" name="slidestab-group-1" checked>
<label for="slidestab-1"> < </label>
<div class="slidescontent">
<div class="theactualimagesl"><img src="https://66.media.tumblr.com/491ac0749fe7b6456cb6cd6daa2834f3/tumblr_pous55D4PM1y7j586o1_500.png">
</div></div>
</div>

<div class="slidestab">
<input type="radio" id="slidestab-2" name="slidestab-group-1">
<label for="slidestab-2"> ></label>
<div class="slidescontent">
<div class="theactualimagesl"><img src="https://66.media.tumblr.com/491ac0749fe7b6456cb6cd6daa2834f3/tumblr_pous55D4PM1y7j586o1_500.png">
</div>

</div></div></div></div>
<center><div class="theinstacontrolsl"></div></center>
<div class="theacaptionsl">
<div class="theviewsssl">### views</div><br>
<b>username</b> caption caption caption
</div>
<div class="instacredit2"><a href="http://cttw.jcink.net/index.php?showuser=140">thanks, shadia!</a></div>

<link rel="stylesheet" type="text/css" href="https://files.jcink.net/uploads/shadia/humble3.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
[/html]

0

8

[html]
<div class="instagramcomment">
<div class="instagramicon22"><a href="http://cttw.jcink.net/index.php?showuser=140"><img src="https://66.media.tumblr.com/1a7ca7d5e61667b55a806e8c8ae381da/tumblr_onqj73HYnF1ur9gmko5_400.png"></a></div>
<div class="instagramcomment55"><b>username</b> mentioned you in a comment:  wow this is the text. this is a comment. lets see what happens
   when the comment keeps going. wow this is a long comment. a long comment indeed. wow. a comment.
   a very long comment. i love long comments. they're the best. wow. what if i just kept going forever and ever and ever and ever? i could. i could just keep going.

</div>

</div>

<link rel="stylesheet" type="text/css" href="https://files.jcink.net/uploads/shadia/instagramcomment.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
[/html]

0

9

[html]<style>

.amanda-phone-temp {
   width: 250px;
   height: 500px;
   border: 10px inset #2c2c2c;
   border-radius: 20px;
   overflow: hidden;
   background: url(http://files.jcink.net/uploads/cttw//av-16370.jpg);
   background-size: cover;
   --accent: #af96b5;
font-size: 13px;
line-height: 18px;
margin: 5px auto;
}
.amanda-top-icons {
   padding: 8px;
   font-size: 10px;
   color: #eee;
   background: rgba(0,0,0,.4);
   font-family: callibri;
}
.amanda-top-icons lfa {
   display: inline-block;
}
.amanda-top-icons rfa {
   float: right;
   padding: 8px;
   margin: -8px -5px;
}
.amanda-phone-temp contactinfo {
   display: block;
   padding: 20px 5px;
   background: var(--accent);
   color: #2c2c2c;
   font-family: Poppins;
   text-transform: lowercase;
}
.amanda-phone-temp contactinfo img {
   float: left;
   margin: -16px 0px;
   margin-right: 5px;
   border-radius: 100%;
   height: 50px;
   width: 50px;
}
.amanda-phone-temp scroll {
   background: #ededed;
   display: block;
   height: 320px;
   padding: 5px;
   border: 5px solid transparent;
   overflow: auto;
   color: #727272;
}
.amanda-phone-temp scroll recieved {
   width: 210px;
   float: left;
}
.amanda-phone-temp scroll sent {
   width: 210px;
   float: right;
}
.amanda-phone-temp scroll img {
   border-radius: 5px;
   height: 40px;
   width: 40px;
   margin-top: 15px;
}
.amanda-phone-temp scroll msg {
   display: block;
   width: 150px;
   border-radius: 10px;
   margin: 5px 0px;
   padding: 5px;
}
.amanda-phone-temp scroll sent img {float: right;}
.amanda-phone-temp scroll recieved img {float: left;}
.amanda-phone-temp scroll sent msg {float: left; background: #fff;}
.amanda-phone-temp scroll recieved msg {float: right; background: var(--accent); color: #eee; }
.amanda-phone-temp typemessage {
   display: block;
   padding: 20px 5px;
   background: #dadada;
}
.amanda-phone-temp typemessage border {
   display: block;
   float: left;
   margin: -13px 0px;
   background: #eee;
   padding: 5px;
   border: 1px solid #ccc;
   color: #727272;
   font-family: poppins;
   font-size: 12px;
   line-height: 15px;
   text-align: left;
   width: 178px;
}
.amanda-phone-temp typemessage border:hover {
   border: 1px solid #555;
   color: #555;
   cursor: text;
}
.amanda-phone-temp typemessage a.sendbutton {
   display: block;
   float: right;
   margin: -12px 0px;
   background: var(--accent);
   color: #eee;
   font-family: poppins;
   font-size: 12px;
   line-height: 15px;
   padding: 5px;
   width: 35px;
   text-align: center;
   text-decoration: none;
}
.amanda-phone-temp phonebuttons {
   background: rgba(0,0,0,.6);
   display: block;
   padding: 16px;
}
.amanda-phone-temp phonebuttons b {
   display: inline-block;
   float: left;
   width: 70px;
   margin-top: -10px;
   color: #727272;
   text-align: center;
}
.amanda-phone-temp phonebuttons b:hover {
   color: #999;
   cursor: pointer;
}

</style>
<link href="https://fonts.googleapis.com/css?family=Poppins:400,500,600" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

<div class="amanda-phone-temp">
<div class="amanda-top-icons">
   <lfa class="fa fa-comment-alt"></lfa>
   <rfa class=" fa fa-battery-three-quarters"></rfa>
   <rfa>100%</rfa>
   <rfa class=" fa fa-signal"></rfa>
   <rfa class=" fa fa-bell-slash"></rfa>
   <rfa class=" fa fa-cloud-sun"></rfa>
</div>
<contactinfo>
   <img src="http://placehold.it/50">
   contact name
</contactinfo>
<scroll>
<recieved>
   <msg>text message input here</msg>
   <msg>woops had to send another message.</msg>
   <img src="http://placehold.it/40">
</recieved>

<sent>
   <msg>text message input here</msg>
   <msg>woops had to send another message.</msg>
   <msg>another text message input here</msg>
   <img src="http://placehold.it/40">
</sent>

<recieved>
   <msg>text message input here</msg>
   <msg>woops had to send another message.</msg>
   <img src="http://placehold.it/40">
</recieved>

</scroll>
<typemessage>
   <border>type a message</border>
   <a class="sendbutton" href="http://cttw.jcink.net/index.php?showuser=3623">send</a>
</typemessage>
<phonebuttons>
   <b class="fa fa-ellipsis-h"></b>
   <b class="fa fa-home"></b>
   <b class="fa fa-arrow-left"></b>
</phonebuttons>
</div>[/html]

0

10

[html]<style>.wtlh-simple-text span img.wtlh-cont-icon {
width: 75px;
height: 75px;
border-radius: 100%;
border: 5px solid var(--color1);
object-fit: cover;
--color1: #868;
}
.wtlh-simple-text span {flex-shink: 0; width: 75px; display: flex; align-items: flex-end; padding-bottom: 15px;}
.wtlh-simple-text {
margin: 10px auto;
width: 350px;
display: flex;
background: #eee;
border: 1px solid #ccc;
padding: 10px;
border-radius: 10px;
align-items: bottom;
justify-content: space-between;
color: #333;
}
.wtlh-simple-texttxt {
margin: 10px 10px 10px 30px;;
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.wtlh-simple-texttxt sent {
background: #f5f5f5;
display: block;
padding: 20px 10px 10px;
border: 1px solid #ccc;
border-radius: 10px 10px 10px 0px;
position: relative;
margin: 5px 0px;
}
.wtlh-simple-texttxt sent date {
font-size: 10px;
display: flex;
position: absolute;
top: 10px;
left: 5px;
right: 5px;
font-family: arial;
text-transform: uppercase;
color: #777;
height: 1px;
align-items: center;
border-bottom: 1px dotted #777;
}
.wtlh-simple-texttxt sent date b {
background: #f5f5f5;
padding: 0px 5px;
margin: 1px 10px;
}
</style>
<div class="wtlh-simple-text creature">
<span>
   <img src="https://i1.sndcdn.com/artworks-000061258654-ivd9zq-t500x500.jpg" class="wtlh-cont-icon">
</span>
<div class="wtlh-simple-texttxt">
   <sent>

     <date><b>aug 28 2020 @ 9:14am</b></date>

message content

   </sent>

<sent>
message content w/o date
</sent>

</div>
</div><center><a href="http://cttw.jcink.net/index.php?showuser=3623" style="font-size: 10px; font-family: arial;">YTN</a></center>[/html]

0

11

[html]<style type="text/css">
#nico #yayaya { --main: #b0f0fa; --bold: #306e78; }
</style>

<link href="https://fonts.googleapis.com/css?family=Raleway:100,200,400,700&display=swap" rel="stylesheet"> <link href="https://files.jcink.net/uploads/sunshinepumpkin/yayaya.css" rel="stylesheet"> <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">

<div id="nico">
<div id="yayaya"><topline><circ></circ> <circ></circ> <circ></circ> <a href="http://cttw.jcink.net/index.php?showuser=277"><i class="th th-skype"></i></a></topline><div class="yousayit">

<yourname> <b>your first</b> last </yourname>

<pic><img src=" ur pic "></pic>

</div><div class="differentlyithink">

<p> hello my big gorgeous husband
<p> this is some random message to see what it looks like when it gets long
<p> and longer and longer because we know nico loves to talk when he has to calm sunny down lbr
<p> lots of sunnico skype sex much
<p>  *smallbunny  *smallbunny  *smallbunny  *smallbunny  *smallbear  *smallbear  *smallbear  *smallbear

</div><div class="itshardthe">

<pic><img src=" their pic "></pic>

<messline>talking with

<theirname> their first last </theirname>

</messline>
</div></div>
</div>[/html]

0

12

[html]<link href="https://fonts.googleapis.com/css?family=Exo:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i" rel="stylesheet">

<style>
@keyframes clock {
from {
   transform: scale3d(1, 1, 1);
}

50% {
   transform: scale3d(1.05, 1.05, 1.05);
}

to {
   transform: scale3d(1, 1, 1);
}
}

@-webkit-keyframes clock {
from {
   -webkit-transform: scale3d(1, 1, 1);
   transform: scale3d(1, 1, 1);
}

50% {
   -webkit-transform: scale3d(1.05, 1.05, 1.05);
   transform: scale3d(1.05, 1.05, 1.05);
}

to {
   -webkit-transform: scale3d(1, 1, 1);
   transform: scale3d(1, 1, 1);
}
}

@-moz-keyframes clock {
from {
   -moz-transform: scale3d(1, 1, 1);
}

50% {
   -moz-transform: scale3d(1.05, 1.05, 1.05);
}

to {
   -moz-transform: scale3d(1, 1, 1);
}
}
#future {height: 450px; width: 250px; background: #292C33; position: relative; margin: auto; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; overflow: hidden; border: 1px solid #09AEEC; box-shadow: 0 0 10px #09AEEC}
#future .bgb {height: 350px; width: 250px; background-size: cover; position: absolute; filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); mix-blend-mode: screen; opacity: 0.4; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px}
#future gra {height: 100%; width: 100%; position: absolute; bottom: 0; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#292...33+100&0+0,1+66 */
background: -moz-linear-gradient(top, rgba(41,44,51,0) 0%, rgba(41,44,51,1) 66%, rgba(41,44,51,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(41,44,51,0) 0%,rgba(41,44,51,1) 66%,rgba(41,44,51,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(41,44,51,0) 0%,rgba(41,44,51,1) 66%,rgba(41,44,51,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00292c33', endColorstr='#292c33',GradientType=0 ); /* IE6-9 */
border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px}
#future clo {position: absolute; width: 70%; height: 50px; background: none; display: flex; align-items: center; justify-content: center; font-family: exo; color: #eee; left: 15%; top: 60px; font-size: 40px; font-weight: 100; text-shadow: 0 0 30px; animation: clock 4s infinite; -webkit-animation: clock 4s infinite; -moz-animation: clock 4s infinite}
#future cir {border: 3px solid #09AEEC; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; height: 130px; width: 130px; position: absolute; box-sizing: border-box; box-shadow: 0 0 10px #09AEEC; left: 60px; top: 130px;}
#future .img1 img {height: 70px; width: 70px; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; position: absolute; object-fit: cover; filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); left: 90px; top: 160px}
#future .btmb {background: #16171B; width: 250px; height: 60px; position: absolute; bottom: 0px; border-radius: 0 0 30px 30px; -webkit-border-radius: 0 0 30px 30px; -moz-border-radius: 0 0 30px 30px;}
#future .btmb:before {height: 25px; width: 90px; background: #16171B; content: ""; position: absolute; top: -25px;}
#future .btmb:after {width: 0;
height: 0;
border-style: solid;
border-width: 25px 0 0 25px;
border-color: transparent transparent transparent #16171b;
content: ""; position: absolute; top: -25px; left: 90px;}
#future .callt {height: 30px; width: 80%; position: absolute; display: flex; align-items: center; font-family: exo; text-transform: uppercase; color: #eee; left: 10%; top: 280px; justify-content: center; font-size: 10px; letter-spacing: 3px; text-shadow: 0 0 10px #eee;}
#future .btmb .main {width: 80%; background: none; height: 40px; position: absolute; left: 10%; top: 10px; display: flex; justify-content: space-between; align-items: center; font-family: exo; text-transform: uppercase; color: #09AEEC; font-size: 9px; letter-spacing: 2px; font-weight: 700; }
#future .btmb .main img {border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%;  object-fit: cover; filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); height: 40px; width: 40px}
#future li1 {width: 90px; height: 1px; background: #09AEEC; position: absolute; bottom: calc(60px + 25px);}
#future li3 {width: calc(100% - 90px - 25px); height: 1px; background: #09AEEC; position: absolute; bottom: 60px; right: 0}
#future li2 {height: 1px; background: #09AEEC; position: absolute; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); width: 42px; left: 84px; bottom: 70px; }

#future:hover .callt, #future:hover clo {opacity: 0; transition-delay: 0s; -webkit-transition-delay: 0s; -moz-transition-delay: 0s}
#future:hover cir, #future:hover .img1 img {transform: scale(0.7); opacity: 0; transition-delay: 0s; -webkit-transition-delay: 0s; -moz-transition-delay: 0s}
#future:hover .btmb cco {opacity: 1; transition-delay: 0s; -webkit-transition-delay: 0s; -moz-transition-delay: 0s}
#future:hover .mbit {transform: scale(1); opacity: 1; transition-delay: 0.5s; -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s;}

#future .callt, #future cir, #future clo, #future .img1 img, #future .btmb cco {transition: 0.6s ease 0.5s; -webkit-transition: 0.6s ease 0.5s; -moz-transition: 0.6s ease 0.5s;}
#future .mbit {transition: 0.6s ease; -webkit-transition: 0.6s ease; -moz-transition: 0.6s ease}
#future .mbit {width: 80%; height: 280px; left: 10%; top: 50px; background: none; position: absolute; overflow: auto; transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); opacity: 0}
#future .mbit p {background: rgba(22, 23, 27, .8); padding: 10px; font-family: source sans pro; color: #eee; font-weight: 200; font-size: 14px; line-height: 1.5}
#future .btmb cco {height: 15px; width: 50px; background: none; position: absolute; display: flex; align-items: center; justify-content: center; font-size: 10px; font-family: exo; color: #09AEEC; font-weight: 700; text-shadow: 0 0 20px #09AEEC; letter-spacing: 2px; top: -12px; left: 20px; opacity: 0}
#future ::-webkit-scrollbar {width: 0}
</style>

<div id="future">
<div class="bgb" style="background-image: url(https://i.pinimg.com/564x/e9/24/9c/e924 … 21d38c.jpg)"></div>
<gra></gra>
   <clo>12:00</clo>
   <cir></cir>
   <div class="img1"><img src="YOUR GIF WILL RESIZE"></div>
   <div class="callt">call from YOURNAME</div>
   <div class="mbit">
     <p>MESSAGE HERE
<p>MESSAGE HERE
<p>MESSAGE HERE
   </div>
   <li1></li1><li3></li3><li2></li2>
   <div class="btmb">
   <cco>12:00</cco>
     <div class="main">
     <img src="THEIR GIF WILL RESIZE">
     calling THEM</div>
   </div>
</div>
  <a href="http://cttw.jcink.net/index.php?showuser=14057"><div style="width: 250px; margin: 10px auto; text-align: center; font-size: 8px; font-family: arial; text-transform: uppercase; color: #aaa;">eve's codes</div></a>
[/html]

0

13

[html]<div class="scook0"><div class="scook0a"></div><div class="scook0b"></div><div class="scook0c"></div>
<div class="scook1">
<a href="http://cttw.jcink.net/index.php?showuser=6547"><i class="fa fa-comment-alt" style="margin-left: 3px;" title="thanks!"></i></a> 8:45pm <span>
<i class="fa fa-volume-down"></i>
<i class="fa fa-wifi"></i>
<i class="fa fa-signal"></i>
<i class="fa fa-battery-half" style="transform: rotate(270deg);"></i></span>
</div>
<div class="scook4"><img src="http://via.placeholder.com/60.png">
<div class="scook4b">name here<i class="fa fa-envelope"></i><span>1</span></div>
</div>

<div class="scook3">
<p>this is a message
<p>this is a longer message
<p>this is a slightly longer message
<p>this is a super duper long message
<p>this is a message long enough to show you that this will scroll if it is needed
</div>
<div class="scook2">enter message... <span><i class="far fa-smile"></i></span></div>
<div class="scook0d"></div></div>

<style>
.scook0 {
margin: auto; position: relative; width: 250px; height: 450px; background: linear-gradient(var(--accent), var(--main1));
border-radius: 40px; border: 10px solid var(--main1); border-bottom: 60px solid var(--main1);

--accent: #967A9C;
--main1: #dfdfdf;
--main2: #666;
--main3: #111;
}
.scook0 a {
text-decoration: none; color: var(--main2);
}
.scook0a {
background: var(--main1); width: 100px; height: 18px; position: absolute; top: 0px; left: 75px;
border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; z-index: 5;
}
.scook0b {
position: absolute; top: 2px; left: 85px; width: 63px; height: 10px; z-index: 5;
border-radius: 5px; background: var(--main2);
}
.scook0c {
position: absolute; top: 2px; right: 85px; width: 10px; height: 10px; z-index: 5;
border-radius: 5px; background: var(--main2);
}
.scook0d {
position: absolute; bottom: -50px; left: 100px; width: 45px; opacity: 1; height: 45px; z-index: 5;
border-radius: 50%; background: radial-gradient(var(--accent) 25%, var(--main1) 90%);
}
.scook1 {
width: 101%; text-align: left; box-sizing: border-box; border: 10px solid transparent; padding: 0px 5px;
font: 10px/100% Poppins; text-transform: uppercase; background: var(--main1); color: var(--main2);
border-top-right-radius: 35px; border-top-left-radius: 35px; position: absolute; top: -1px; left: -1px;
}
.scook1 span {float: right;}
.scook1 i {margin: 0px 1px 0px -2px;}
.scook2 {
width: 100%; text-align: left; box-sizing: border-box; border: 10px solid transparent; padding: 0px 5px;
font: 12px/110% Poppins; text-transform: lowercase; background: var(--main1); color: var(--main2);
position: absolute; bottom: 0px; box-shadow: 0px 1px 0px var(--accent);
}
.scook2 span {float: right;}
.scook2 i {margin-left: -2px;}
.scook3 {
height: 252px; width: 100%; box-sizing: border-box; border: 20px solid transparent; overflow: auto;
padding-right: 10px; color: var(--main3); position: absolute; bottom: 40px;
}
.scook3 p {
float: right; padding: 10px; margin: 5px; background: var(--main1); font: 11px/120% Poppins; border-radius: 5px;
}
.scook3::-webkit-scrollbar { width: 5px; }
.scook3::-webkit-scrollbar-track { background: var(--main1); border: none; }
.scook3::-webkit-scrollbar-thumb { background: linear-gradient(var(--accent), var(--main1)); }

.scook4 {
height: 82px; position: absolute; top: 50px; left: 0px; width: 100%;
}
.scook4 img {
border-radius: 50% 50% 0% 50%; height: 70px; width: 70px; border: 1px solid var(--color3); padding: 5px; border: 1px solid var(--main1);
position: absolute; left: 15px; top: 20px;
}
.scook4b {
position: absolute; right: 20px; top: 19px; text-transform: lowercase; font: 16px/110% Poppins;
text-align: center; color: var(--main1); width: 50%; font-style: italic;
}
.scook4b i {
display: block; font-size: 46px; position: absolute; top: 30px; left: 20px; color: var(--accent);
}
.scook4b span {
position: absolute; top: 25px; left: 1px; background: var(--accent); color: var(--main1); padding: 5px;
height: 10px; width: 10px; border-radius: 50%; border: 1px solid var(--main1); font: normal 10px/100% Poppins; text-align: center;
}
</style>
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet">
[/html]

0

14

[html]
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

:root {
--mainfonts: 'Roboto', sans-serif;
--messagefonts: 'Roboto', sans-serif;
--phonecolor: #000;
--mymessages: #9267ea;
--mymessgtext: #f1f4ef;
--theirmessages: #6c686f;
--theymessgtext: #f1f4ef;
--msgbackground: linear-gradient(#ebe7ee 80%, rgba(0,0,0,0.15));
--casecolor: #288978;
--menucolors: #FFF;
--inputbg: #ebe7ee;
--bordeeios: rgba(0,0,0,0.1);
--buttoncolors:;
--detailine: rgba(255,255,255,0.1);;
}

#phonysadri ::-webkit-scrollbar {
width: 3px; height: 0px;
}

#phonysadri ::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}

.phonemoo {width: 300px; height: 550px; background: var(--phonecolor);  border-radius: 15px; padding: 5px 5px;  font-size: 14px; border: 3px solid var(--casecolor); }
.phoneyrap {width: 300px; margin: 20px auto; font-family: var(--mainfonts);}
.statusso {font-size: 11px;}
.deetailo {width: 70%; height: 10px; border-radius: 10px; border: 1px solid var(--detailine); margin: 20px auto;}
.usernamo {display: flex; align-items: center; justify-content: center;}
.contactiname {font-size: 19px; padding-left: 5px;}
.usernamo img {width: 25px; border-radius: 20px;}
.providerline {display: flex; padding: 3px 10px; background: var(--menucolors);}
.partmessage {padding: 7px 3px; display: flex; border-top: 1px solid var(--bordeeios); background: var(--menucolors);}
.usernamo {text-align: center; padding: 5px; border-bottom: 1px solid var(--bordeeios); border-top: 1px solid var(--bordeeios); background: var(--menucolors);}
.messgmine {text-align: right; padding: 5px 10px; margin: 5px; margin-left: 100px; margin-right: 7px; background: var(--mymessages); border-radius: 7px; color: var(--mymessgtext); font-family: var(--messagefonts); font-size: 13px; line-height: 160%; position: relative;}

.messgmine:after {
content: ''; position: absolute; right: 0; bottom: 0px; width: 0; height: 0; border: 10px solid transparent; border-left-color: var(--mymessages); border-right: 0; border-bottom: 0; margin-top: -2px; margin-right: -4px;
}

.messgthem {text-align: left; padding: 5px 10px; margin: 10px; margin-right: 100px; background: var(--theirmessages); border-radius: 7px; color: var(--theymessgtext); font-family: var(--messagefonts); font-size: 13px; line-height: 160%; position: relative;}

.messgthem :after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 0; border: 10px solid transparent; border-right-color: var(--theirmessages); border-left: 0; border-bottom: 0; margin-top: -2px; margin-left: -4px;}

.messgblok {overflow: scroll; height: 355px; background-image: var(--msgbackground);}
.provo {flex-basis: 20%; flex-grow: 1; font-size: 11px; font-weight: bold;}
.phoninner {width: 100%; height: 460px; background: var(--menucolors); border-radius: 4px; border: 1px solid var(--bordeeios);}
.adateline {display: block; text-align: center; font-size: 10px; color: var(--theirmessages); font-weight: bold; text-shadow: 1px 1px #FFF;}
.inwriting {padding: 4px; border-radius: 5px; background: var(--inputbg); height: 90%; flex-basis: 60%; flex-grow: 1; border: 1px solid var(--bordeeios);}
.sendbuttonz {flex-basis: 10%; padding: 10px; padding: 4px; border-radius: 5px; background: var(--inputbg); height: 90%; margin-left: 5px; border: 1px solid var(--bordeeios); text-align: center;}
.sadricredit {text-align: center; font-size: 10px; text-align: right;}
.sadricredit a {text-decoration: none;}
.toplines, .bottomlines {height: 25px;}
</style>

<script src="https://kit.fontawesome.com/d20f60b35a.js"></script>
<div class="phoneyrap">
<div class="phonemoo" id="phonysadri">
<div class="toplines"><div class="deetailo"></div></div>
<div class="phoninner">
   <div class="providerline">
     
     <!–– PROVIDER AND TIME ––>
     <span class="provo">Optus 11.05pm</span>
     
     <span class="statusso"><i class="fas fa-signal"></i> <i class="fas fa-wifi"></i> <i class="fas fa-battery-quarter"></i></div>
   <div class="usernamo">
     
     <!–– CONTACT PHOTO ––>
       <img src="http://via.placeholder.com/300">
     
     <!–– CONTACT NAME ––>
     <span class="contactiname">Alan Burdett</span>
     </div>
     
     <div class="messgblok">
       
       <!–– MESSAGE BLOCK. Paste message codes here ––>
       
   <div class="messgthem"><span class-"theyymess">hey Del, I'm gonna need you to cover history again, yeah?</span></div>
     <div class="messgmine"><span class-"mymess">Are you actually serious right now Alan??</span></div>
   <div class="messgthem"><span class-"theyymess">Yes... problem?</span></div>
       <div class="messgmine"><span class-"mymess">If you can't hire a reliable history teacher that's not my problem.</span></div>

       <div class="adateline">Tuesday, January 12th 4.01pm</div>

   <div class="messgthem"><span class-"theyymess">I'm trying!</span></div>
       <div class="messgthem"><span class-"theyymess">Just one more class. Promise.</span></div>
       
       <div class="messgmine"><span class-"mymess">You owe me.</span></div>
       <div class="messgmine"><span class-"mymess">BIG TIME.</span></div>
       
       <div class="messgthem"><span class-"theyymess">Yeah, yeah. Fine.</span></div>
       
       <div class="messgmine"><span class-"mymess">How about buying Lauren that horse?</span></div>
   </div>
     
     <!–– END MESSAGES ––>
     
     <div class="partmessage">
       
       <!–– HALF WRITTEN MESSAGE HERE ––>
       <span class="inwriting">Actually maybe not..</span>
       
       <span class="sendbuttonz"><i class="fas fa-arrow-up"></i></span>
     </div>
</div>
   <div class="bottomlines"><div class="deetailo"></div></div>
</div>
<div class="sadricredit"><a href="http://cttw.jcink.net/index.php?showuser=16694" title="post template made by Sadri of CTTW">★</a>sadri<a href="http://theroleplaynetwork.com/index.php?/profile/1-sadrienne/" title="post template made by Sadri of TRN">★</a></div>
</div>
[/html]

your message
Код:
<div class="messgmine"><span class="mymess">your message text</span></div>
their message
Код:
<div class="messgthem"><span class="theyymess">reply message text</span></div>
add a date line
Код:
<div class="adateline">Tuesday, January 12th 4.01pm</div>
change providers & time
Код:
<!–– PROVIDER AND TIME ––>
     <span class="provo">Optus 11.05pm</span>
change contact name & photo
Код:
<!–– CONTACT PHOTO ––>
       <img src="http://via.placeholder.com/300">
     
     <!–– CONTACT NAME ––>
     <span class="contactiname">Alan Burdett</span>
change your phone's look
Код:
--phonecolor: #000;
--casecolor: #288978;
change your message style
Код:
--mymessages: #9267ea;
 --mymessgtext: #f1f4ef;
change their message style
Код:
--theirmessages: #6c686f;
 --theymessgtext: #f1f4ef;

0

15

[html]
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<center>
<style type="text/css">

@-webkit-keyframes light {
   0%   {opacity: 0;}
   50%   {opacity: 1;}
   100%   {opacity: 0;}

}

@-moz-keyframes light {
   0%   {opacity: 0;}
   50%   {opacity: 1;}
   100%   {opacity: 0;}

}

@keyframes light {
   0%   {opacity: 0;}
   50%   {opacity: 1;}
   100%   {opacity: 0;}

}

#basebg {height: 577px; width: 299px; position: relative; background-image:url(http://i.imgur.com/gPmFPNP.png)}
.baselight {height: 15px; width: 15px; position: absolute; left: 221px; top: 12px; background-color: #76EB00; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-filter: blur(3px); -moz-filter: blur(3px); -ms-filter: blur(3px); -o-filter: blur(3px); filter: blur(3px); -webkit-animation: light 2s ease-in-out infinite; -moz-animation: light 2s ease-in-out infinite; animation: light 2s ease-in-out infinite;}
.base1 {height: 466px; width: 260px; position: absolute; left: 19.5px; top: 55.5px; background-color: transparent; overflow: hidden}
.base1s {height: 466px; width: 260px; position: absolute; background-image: url(http://i.imgur.com/CV8ZmDi.png); z-index: 2}
.base1sa {position: relative; top: 190px; opacity: 0.7; background-color: #000; z-index: 3; width: 120px; height: 22px; line-height: 22px; font-family: 'PT Sans Narrow'; color: #fff; -webkit-border-radius: 5%; -moz-border-radius: 5%; -ms-border-radius: 5%; -o-border-radius: 5%; border-radius: 5%; font-size: 12px}
.base1 .base1s {left: 0px; top: 0px; -webkit-transition: linear 0.5s; -moz-transition: linear 0.5s; -ms-transition: linear 0.5s; -o-transition: linear 0.5s; transition: linear 0.5s; -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -ms-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s;}
.base1:hover .base1s {left: -260px; top: 0px; -webkit-transition: linear 0.5s; -moz-transition: linear 0.5s; -ms-transition: linear 0.5s; -o-transition: linear 0.5s; transition: linear 0.5s;}
.base2 {height: 466px; width: 260px; background-image:url(http://i.imgur.com/htB43t9.png); position: absolute;}
.base1 .base2 {opacity: 0; transform:scale(0.7); -webkit-transition: ease-in-out 0.4s; -moz-transition: ease-in-out 0.4s; -o-transition: ease-in-out 0.4s; -ms-transition: ease-in-out 0.4s; transition: ease-in-out 0.4s;}
.base1:hover .base2 {opacity: 1; transform:scale(1); -webkit-transition: ease-in-out 0.4s; -moz-transition: ease-in-out 0.4s; -o-transition: ease-in-out 0.4s; -ms-transition: ease-in-out 0.4s; transition: ease-in-out 0.4s;  -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -ms-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s;}
.base2t {width: 253px; height: 20px; padding-right: 7px; position: absolute; color: #fff; background-color: #1C1C1C; font-size: 10px; text-align: right}
.base2tc {font-family: 'PT Sans Narrow'; color: #fff; font-size: 10px; width: 260px; height: 20px; line-height: 20px; position: absolute; text-align: center; top: 2px}
.base2n {padding: 7px 0px 7px 0px; width: 260px; background-color: #fff; color: #1c1c1c; font-family: 'Roboto', arial; font-size: 15px; position: absolute; top: 20px; letter-spacing: -0.7px}
.base2msg {width: 240px; border-color: transparent; border-style: solid; border-width: 5px; padding: 5px; height: 366px; background-color: transparent; position: absolute; top: 65px; overflow: auto}
.base2msg::-webkit-scrollbar {width: 0px}
.lftmsg {min-height: 50px; box-shadow: 2px 2px 10px #CFCFCF; font-family: arial; color: #1c1c1c; text-align: justify; padding: 9px; margin: 10px 0px 0px 10px; width: 150px; float: left; background-color: #fff; font-size: 9px; line-height: 95%}
.rtmsg {min-height: 50px; box-shadow: 2px 2px 10px #CFCFCF; font-family: 'Roboto'; color: #1c1c1c; text-align: justify; padding: 10px; margin: 10px 10px 0px 0px; width: 150px; float: right; background-color: #FFFED2; font-size: 9px; line-height: 95%}

</style>
<div id="basebg">
<div class="baselight"></div>
<div class="base1">
<div class="base1s">
<div class="base1sa"><i class="fa fa-envelope-o"></i> 1 New Message</div>
</div>
<div class="base2">
<div class="base2t"><i class="fa fa-wifi"></i><i class="fa fa-signal"></i></div>
<div class="base2tc">12:45PM</div>
<div class="base2n">First Last <img src="http://placehold.it/30" style="-webkit-border-radius: 50%; margin-left: 3px"></div>

<div class="base2msg">
<div class="lftmsg">
<img src="http://placehold.it/20" style="float: left; padding: 0px 5px 2px 0px"><font style="padding-top: -2px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor vestibulum purus, sit amet iaculis tellus. Etiam vitae nunc porta, mattis erat non, fermentum augue. Mauris iaculis sed nisi in fermentum. Donec non turpis gravida, aliquam sem vitae, consequat sem. Praesent at quam tellus. Nullam nec lacus ante. Mauris pellentesque rutrum consectetur. Cras porta nulla non sagittis dignissim.</font></div>

<div class="rtmsg">
<img src="http://placehold.it/20" style="float: right; padding: 0px 0px 2px 5px"><font style="padding-top: -2px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor vestibulum purus, sit amet iaculis tellus.</font>
</div>
<div class="rtmsg">
<img src="http://placehold.it/20" style="float: right; padding: 0px 0px 2px 5px"><font style="padding-top: -2px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor vestibulum purus, sit amet iaculis tellus.</font>
</div>

<div class="lftmsg">
<img src="http://placehold.it/20" style="float: left; padding: 0px 5px 2px 0px"><font style="padding-top: -2px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor vestibulum purus, sit amet iaculis tellus. Etiam vitae nunc porta, mattis erat non, fermentum augue. Mauris iaculis sed nisi in fermentum. Donec non turpis gravida, aliquam sem vitae, consequat sem. Praesent at quam tellus. Nullam nec lacus ante. Mauris pellentesque rutrum consectetur. Cras porta nulla non sagittis dignissim.</font></div>

</div>
</div>
</div>
</div>
<div style="text-align: center; font-family: calibri; font-size: 8px; text-transform: uppercase;"><a href="http://cttw.jcink.net/index.php?showuser=1604">holly at caution</a></div>
</center>
[/html]

0

16

Код:
#pun-index .tcl h3:before {
    content: '';
    display: block;
    height: 1px;
    width: 620px;
    position: absolute;
    z-index: 0;
    background: #bfd8d9;
    margin: 18px 0 0 4px;
}

0


Вы здесь » noizy test » calling my name » коды всякие разные вдруг пригодятся


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