Кодики-хуедики
артики-хуяртики
колдую шаманю феячу
Сообщений 1 страница 7 из 7
Поделиться12022-04-24 18:14:47
Поделиться22022-04-24 18:15:28
[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]
Поделиться32022-04-24 18:15:41
[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]
Поделиться42022-04-24 18:16:05
[html]<link href="https://files.jcink.net/uploads/alesstest/youtubechannel.css" rel="stylesheet"><center><link href="https://fonts.googleapis.com/css?family=Oswald|Roboto" 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="alsutube"><div style="height: 35px; border-bottom: 1px solid #d5d5d5;"><table cellspacing="0" cellpadding="0"><td><div style="width: 30px;"><div class="alsutubelin1"></div><div class="alsutubelin2"></div> <div class="alsutubelin3"></div> </div></td><td><div class="alsutubeutube"><a href="http://cttw.jcink.net/index.php?showuser=1439"><div style="display: inline; color: red; font-size: 24px;"><i class="fab fa-youtube"></i></div></a><div style="margin-top: -22px; margin-left: 28px;">Youtube</div></div></td><td><div class="alsutubesearbar">Search</div><div class="alsutubesearbr"><div style="height:1px;"></div><i class="fas fa-search"></i></div></td><td><div class="alsutubeseic"><i class="fas fa-video"></i> <i class="fas fa-th"></i> <i class="fas fa-comment"></i> <i class="fas fa-bell"></i> <i class="fas fa-user"></i></div></td></table>
</div>
<div style="width: 600px; height: 100px; background: url(https://via.placeholder.com/600x100); background-size: cover; background-position: center;">
</div><div style="width: 600px; height: 90px; background-color: #f9f9f9;"><table cellspacing="0" cellpadding="0"><td><div class="alsutubecavvie">
<img src="https://via.placeholder.com/60" style="width: 60px; border-radius: 50%;">
</div></td><td><div class="alsutubecname"><b>
youtube name</b><br>####### Subscribers
</div></td><td><div class="alsutubecsub"><b>
Subscribe</b> ##
</div></td></table></div><div class="alstubetabContainer"><div class="alstabs"><input type="radio" id="alstabs-1" name="alstabs-group-1" checked><label for="alstabs-1">HOME</label><div class="alstubetabContent"><table cellspacing="0" cellpadding="10"><td>
<div class="alsutubecvid" style="background: url(https://via.placeholder.com/320x190); background-size: cover; background-position: center;"></div>
</td><td><div style="width: 240px;"><div class="alsutubecpublish"><b>
youtube video title</b><div style="height:25px;"></div>
## views - Month Day, Year
<div style="height:15px;"></div><div class="alsutubeccap">
video caption, one line
<div style="height:27px;"></div><b>READ MORE</b></div></div></td></table></div></div><div class="alstabs"><input type="radio" id="alstabs-2" name="alstabs-group-1"><label for="alstabs-2">VIDEOS</label><div class="alstubetabContent"><div class="alsutubecnxt">All videos</div><div class="alsutubeccnxt"><b>Music</b> PLAY ALL</div><div class="alsutubevidslid">
<div style="height: 140px; width: 140px; overflow: hidden;">
<div class="alsutubecplay" style="background: url(https://via.placeholder.com/140x100); background-size: cover; background-position: center;"></div>
<div class="alsutubecntt"><b>
youtube vid name</b><div style="height: 1px; margin-top: -6px;"></div>
#### views</div>
</div>
<div style="height: 140px; width: 140px; overflow: hidden;">
</div>
<div style="height: 140px; width: 140px;">
</div>
<div style="height: 140px; width: 140px;">
</div>
</div></div> </div><div class="alstabs"><input type="radio" id="alstabs-3" name="alstabs-group-1"><label for="alstabs-3">PLAYLISTS</label><div class="alstubetabContent"><div class="alsutubecnxt">All playlists</div><div class="alsutubeccnxt"><b>Created playlists</b></div><div class="alsutubevidslid">
<div style="height: 140px; width: 140px; overflow: hidden;">
<div class="alsutubecplay" style="background: url(https://via.placeholder.com/140x100); background-size: cover; background-position: center;"><div class="alsutubecplayh">PLAY ALL</div></div>
<div class="alsutubecntt"><b>Playlist Name</b><div style="height: 1px; margin-top: -6px;"></div>VIEW PLAYLIST (# VIDEOS)</div>
</div>
<div style="height: 140px; width: 140px; overflow: hidden;">
</div>
<div style="height: 140px; width: 140px; overflow: hidden;">
</div>
<div style="height: 140px; width: 140px; overflow: hidden;">
</div>
</div></div></div><div class="alstabs"><input type="radio" id="alstabs-4" name="alstabs-group-1"><label for="alstabs-4">COMMUNITY</label><div class="alstubetabContent"><table cellspacing="0" cellpadding="10"><td><div style="height: 180px; width: 50px;">
<img src="https://via.placeholder.com/50" style="width: 50px; border-radius: 50%;"></div></td><td><div style="width: 350px; height: 180px; padding-top: 20px;"><div class="alsutubeccomm"><b>
youtubename
</b> 1 week ago <div style="height: 5px;"></div><c>
community post, one line MAX 2 without emojis
</c></div><div style="height: 120px; width: 350px; background-color: #f9f9f9;"><table cellspacing="0" cellpadding="10"><td>
<div style="height: 100px; width: 150px; background: url(https://via.placeholder.com/150x100); background-size: cover; background-position: center;"></div></td><td><div class="alsutubeccom">
<b>youtube video name</b>
<div style="height: 5px;"></div>
youtubename • ### views • 1 week ago
</div></td></table></div></div></td></table></div></div><div class="alstabs"><input type="radio" id="alstabs-5" name="alstabs-group-1"><label for="alstabs-5">CHANNELS</label><div class="alstubetabContent"><div style="height: 6px;"></div><div class="alsutubeccnxt"><b>Subscriptions</b></div><div class="alsutubevidslid" style="height: 164px;">
<div style="height: 160px; width: 140px; overflow: hidden;">
<div style="height: 80px; width: 80px; border-radius: 50%; background: url(https://via.placeholder.com/80x80); background-size: cover; background-position: center;"></div>
<div class="alsutubecntte"><b>YoutubeName</b><div style="height: 1px; margin-top: -6px;"></div>#### subscribers</div>
<div class="alsutubecntsub">SUBSCRIBE</div>
</div>
<div style="height: 160px; width: 140px; overflow: hidden;">
</div>
<div style="height: 160px; width: 140px; overflow: hidden;">
</div>
<div style="height: 160px; width: 140px; overflow: hidden;">
</div>
</div></div></div><div class="alstabs"><input type="radio" id="alstabs-6" name="alstabs-group-1"><label for="alstabs-6">ABOUT</label><div class="alstubetabContent"><div style="height: 20px;"></div><table cellspacing="0" cellpadding="10"><td><div style="height: 200px; width: 300px; color: #000;">
<div class="alsutubedesc">Description</div>
<div class="alsutubedescc">one line
<div class="alsutubebio">Biography</div>
<div class="alsutubebioo">bio here, not too long, doesn't scroll
</div></div></td><td> <div style="height: 200px; width: 150px;">
<div class="alsutubestats">Stats</div>
<div class="alsutubestatss">Joined Month Day, Year</div>
<div class="alsutubestatss">### views
</div></div></td></table></div></div></div></div>[/html]
Поделиться52022-04-24 18:16:18
[html]<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<style>
#instagram {
--username: "cheddar";
--profile_img: url(https://pbs.twimg.com/media/EQsIqOVU4AAeeGX.jpg);
}
.back_insta {
width: 600px;
overflow: hidden;
min-height: 400px;
height: auto;
margin: auto;
padding-bottom: 20px;
position: relative;
color: #262626;
font-family: "Montserrat", sans-serif;
font-weight: 400;
line-height: 140%;
background-color: #fafafa;
cursor: default;
}
.back_insta tag {
color: #003669;
cursor: pointer;
}
.picin_profile {
width: 120px;
height: 120px;
border-radius: 50%;
border: solid 2px #dbdbdb;
position: absolute;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
left: 20px;
z-index: 20;
top: 20px;
}
.picin_profile::after {
content: " ";
width: 110px;
height: 110px;
display: block;
background-image: var(--profile_img);
background-size: cover;
background-position: center;
border-radius: 50%;
}
.infos_insta {
width: 430px;
height: auto;
margin-top: 25px;
float: right;
}
.linein_insta {
width: 430px;
height: 42px;
display: flex;
justify-items: start;
align-items: center;
font-weight: 500;
font-size: 14px;
}
.linein_insta b {
font-weight: 600;
margin-right: 1px;
margin-left: 20px;
}
.linein_insta h1 {
width: fit-content;
margin-right: 20px;
font-size: 22px;
font-weight: 400;
text-transform: lowercase;
}
.linein_insta h3 {
width: fit-content;
margin-bottom: 5px;
font-size: 14px;
font-weight: 600;
text-transform: capitalize;
}
.linein_insta h1::after {
content: var(--username);
width: fit-content;
margin-right: 20px;
font-size: 22px;
font-weight: 400;
text-transform: lowercase;
}
.linein_insta d {
width: fit-content;
margin-left: 5px;
position: relative;
top: -6px;
font-size: 25px;
font-weight: 600;
letter-spacing: 2px;
cursor: pointer;
}
.linein_insta f {
color: #262626;
margin-left: 2px;
margin-right: 2px;
}
.infob_insta {
width: 65px;
height: 25px;
margin-right: 8px;
padding-left: 8px;
padding-right: 8px;
display: flex;
justify-content: center;
align-items: center;
border: solid 1px #dbdbdb;
border-radius: 3px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
}
.infob_insta img {
position: relative;
width: 30px;
height: 30px;
}
.b_insta {
cursor: pointer;
}
.des_insta {
width: 400px;
height: auto;
float: left;
font-size: 13px;
font-weight: 400;
}
.wrphotos_insta {
width: 550px;
max-height: 420px;
position: relative;
top: 10px;
margin-left: auto;
margin-right: auto;
overflow: scroll;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
border-top: 1px solid #dbdbdb;
}
.wrphotos_insta::-webkit-scrollbar {
display: none;
}
.wrbu_insta {
width: fit-content;
height: 20px;
margin-left: 30px;
margin-right: 30px;
padding-top: 13px;
padding-left: 4px;
padding-right: 4px;
position: relative;
top: -4px;
display: flex;
justify-content: space-evenly;
align-items: center;
border-top: 1px #262626 solid;
font-size: 11px;
font-weight: 600;
letter-spacing: 1px;
color: #8e8e8e;
cursor: pointer;
}
.wrbu_insta img {
height: 17px;
width: 17px;
margin-right: 5px;
}
.photo_insta {
width: 170px;
height: 170px;
margin: 6.6px;
position: relative;
background-position: center;
background-size: cover;
}
.numbers_insta {
width: 156px;
height: 100%;
position: absolute;
top: 0px;
opacity: 0;
padding-right: 14px;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 14px;
font-weight: 500;
background-color: rgb(0, 0, 0, 0.4);
cursor: pointer;
}
.numbers_insta img {
width: 20px;
height: 20px;
margin-left: 14px;
margin-right: 3px;
}
.photo_insta:hover > .numbers_insta {
opacity: 1;
}
.credit-insta {
width: 15px;
height: 15px;
position: absolute;
bottom: 5px;
right: 0px;
opacity: 0.5;
margin-right: 5px;
background-image: url(https://images2.imgbox.com/94/48/z238nvod_o.png);
background-position: center;
background-size: cover;
}
.credit-insta a {
text-transform: none;
text-decoration: none;
}
</style>
<div id="instagram">
<div class="back_insta">
<div class="picin_profile"></div>
<div class="infos_insta">
<div class="linein_insta">
<h1></h1>
<div class="infob_insta">Message</div>
<div class="infob_insta" style="width: 55px">
<img src="https://i.imgur.com/KWmQoxL.png" style="top: 1px" />
</div>
<div class="infob_insta" style="width: 15px !important">
<img
src="https://i.imgur.com/cz15PzY.png"
style="width: 7px; height: 7px"
/>
</div>
<d>... </d>
</div>
<div class="linein_insta">
<b style="margin-left: 0px">182 </b> posts
<div class="b_insta"><b>398k </b> followers</div>
<div class="b_insta"><b>682 </b> following</div>
</div>
<div
class="linein_insta"
style="
height: auto;
flex-direction: column;
align-items: flex-start;
margin-top: -5px;
"
>
<h3>Cheddar Holts</h3>
<div class="des_insta">
A good boy and the best detective <tag>#99 </tag>
</div>
</div>
<div
class="linein_insta"
style="font-size: 10px; color: #8e8e8e; cursor: pointer"
>
Followed by <f> jperalta </f>, <f>asantiago </f>, <f>cholts</f> + 398k
more
</div>
</div>
<div class="wrphotos_insta">
<div
class="linein_insta"
style="justify-content: center; width: 550px; margin-bottom: 5px"
>
<div class="wrbu_insta" style="color: #262626">
<img
src="https://i.imgur.com/HKmLEgr.png"
style="width: 12px; height: 12px"
/>
POSTS
</div>
<div class="wrbu_insta" style="border: none">
<img src="https://i.imgur.com/az2FExa.png" /> TAGGED
</div>
</div>
<div
class="photo_insta"
style="background-image: url(https://i.imgur.com/j074xNI.jpg)"
>
<div class="numbers_insta">
<img src="https://i.imgur.com/OfWRaS9.png" /> 162k
<img src="https://i.imgur.com/lkzggk0.png" /> 16k
</div>
</div>
<div
class="photo_insta"
style="background-image: url(https://i.imgur.com/GV29tjP.jpg)"
>
<div class="numbers_insta">
<img src="https://i.imgur.com/OfWRaS9.png" /> 162k
<img src="https://i.imgur.com/lkzggk0.png" /> 16k
</div>
</div>
<div
class="photo_insta"
style="background-image: url(https://i.imgur.com/cJ6nU80.jpg)"
>
<div class="numbers_insta">
<img src="https://i.imgur.com/OfWRaS9.png" /> 162k
<img src="https://i.imgur.com/lkzggk0.png" /> 16k
</div>
</div>
<div
class="photo_insta"
style="background-image: url(https://i.imgur.com/UWJ92GX.jpg)"
>
<div class="numbers_insta">
<img src="https://i.imgur.com/OfWRaS9.png" /> 162k
<img src="https://i.imgur.com/lkzggk0.png" /> 16k
</div>
</div>
<div
class="photo_insta"
style="background-image: url(https://i.imgur.com/ijcqpUx.jpg)"
>
<div class="numbers_insta">
<img src="https://i.imgur.com/OfWRaS9.png" /> 162k
<img src="https://i.imgur.com/lkzggk0.png" /> 16k
</div>
</div>
<div
class="photo_insta"
style="background-image: url(https://i.imgur.com/YSAZTGn.jpg)"
>
<div class="numbers_insta">
<img src="https://i.imgur.com/OfWRaS9.png" /> 162k
<img src="https://i.imgur.com/lkzggk0.png" /> 16k
</div>
</div>
<div
class="photo_insta"
style="background-image: url(https://i.imgur.com/XrJwDkf.jpg)"
>
<div class="numbers_insta">
<img src="https://i.imgur.com/OfWRaS9.png" /> 162k
<img src="https://i.imgur.com/lkzggk0.png" /> 16k
</div>
</div>
</div>
<a
href="http://cttw.jcink.net/index.php?showuser=27194"
title="template by: Vos"
>
<div class="credit-insta"></div
></a>
</div>
</div>
[/html]
Поделиться62022-05-19 21:43:31
увидел Амил и сдох с красоты этой женщины
[html]
<style>
.theopost {
width: 480px;
background-image: url('https://i.ibb.co/rdKVL8s/1a00aabee701b3c6a5e422137a58df89.png');
padding: 10px;
margin: 0 auto;
border-radius: 15px;
background-attachment: fixed; }
.theoimg {
width: 420px;
height: cover;
background-size: cover;
overflow: hidden;
margin: 0 auto; }
.theotextbox {
text-align: justify;
font-family: 'calibri', sans-serif;
font-size: 13px;
line-height: 13px;
padding: 5px;
width: 440px;
margin: 0 auto;
color: #151515;
background: #fff; opacity: 0.5;
border-radius: 15px;}
.theotitle{
font-family: times;
font-style: italic;
font-size: 26px;
color:#D8D8D8;
letter-spacing:5px;
line-height:120%;
text-align: center;
padding-top: 10px;}
.theotitle2{
font-family: times;
font-style: italic;
font-size: 11px;
color:#D8D8D8;
letter-spacing:5px;
line-height:120%;
opacity: 0.4;
text-align: center;
padding-bottom: 5px;}
</style>
<div class="theopost">
<div class="theobox">
<img src="https://i.ibb.co/87CnYRG/480200.jpg"
style="width: 480px; height: 200px; border-radius: 15px;
border: solid 1px #f2f2f2; margin-left: -1px; "></div>
<div class="theotitle">
Short lyrics or something
</div>
<div class="theoimg"><img src="https://i.ibb.co/9c6bJ17/output-onlinepngtools-3.png"
style="width: 420px; margin-top: 0px; margin-bottom: 5px;"></div>
<div class="theotextbox">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div><div class="theoimg"><img src="https://i.ibb.co/pRDz27T/output-onlinepngtools-6.png"
style="width: 420px; padding-top: 5px;"></div>
<div class="theotitle2">
~ notes ~
</div>
</div>
<center><a href="http://cttw.jcink.net/index.php?showuser=21709" style="color:#B2ADAB;font-size:11px;opacity: 0.6;letter-spacing:5px; font-family: times; font-style: italic;">Elyon©</a></center>
[/html]
[html]
<style>.theopost {
width: 480px;
background-image: url('https://i.imgur.com/TarZlcK.png');
padding: 10px;
margin: 0 auto;
border-radius: 15px;
background-attachment: fixed; }.theoimg {
width: 420px;
height: cover;
background-size: cover;
overflow: hidden;
margin: 0 auto; }.theotextbox {
text-align: justify;
font-family: 'calibri', sans-serif;
font-size: 13px;
line-height: 13px;
padding: 5px;
width: 440px;
margin: 0 auto;
color: #151515;
background: #fff; opacity: 0.5;
border-radius: 15px;}.theotitle{
font-family: times;
font-style: italic;
font-size: 26px;
color:#D8D8D8;
letter-spacing:5px;
line-height:120%;
text-align: center;
padding-top: 10px;}.theotitle2{
font-family: times;
font-style: italic;
font-size: 11px;
color:#D8D8D8;
letter-spacing:5px;
line-height:120%;
opacity: 0.4;
text-align: center;
padding-bottom: 5px;}</style>
<div class="theopost">
<div class="theobox">
<img src="https://i.imgur.com/xqvrP35.gif"
style="width: 480px; height: 200px; border-radius: 15px;
border: solid 1px #f2f2f2; margin-left: -1px; "></div><div class="theotitle">
Short lyrics or something
</div>
<div class="theoimg"><img src="https://i.ibb.co/9c6bJ17/output-onlinepngtools-3.png"
style="width: 420px; margin-top: 0px; margin-bottom: 5px;"></div><div class="theotextbox">
место для мега пафосно-ахуенного текста, который я еще не придумал
<br></div><div class="theoimg"><img src="https://i.ibb.co/pRDz27T/output-onlinepngtools-6.png"
style="width: 420px; padding-top: 5px;"></div><div class="theotitle2">
~ notes ~
</div>
</div>
<center><a href="http://cttw.jcink.net/index.php?showuser=21709" style="color:#B2ADAB;font-size:11px;opacity: 0.6;letter-spacing:5px; font-family: times; font-style: italic;">Elyon©</a></center>
[/html]
Отредактировано Asakura Hao (2022-05-20 11:15:18)
Поделиться72022-05-19 22:16:17
как-то давно делал
[html]
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,700|Oswald&display=swap" rel="stylesheet">
<style type="text/css">
.txtthreadbg{
width:246px;
height:510px;
padding: 27px 9px 26px 6px;
background: url(https://i.imgur.com/cpV4Hww.png);
border-radius:25px;
}
.txtthreadwhite{
background:white;
border-radius:15px 15px 20px 20px;
height:510px;
}
.txtthreadtime{
width:206px;
height:20px;
padding:5px 20px 5px 20px;
background:#ccc;
border-radius: 15px 15px 0px 0px;
}
.txtthreadtimetxt{
font-family: 'Montserrat', sans-serif;
font-size:10px;
color:#000;
text-align:left;
float:left;
padding:5px 0px 5px 0px;
}
.txtthreadcamera{
width:50px;
height:15px;
margin:2px 5px 0px 5px;
border-radius:25px;
background:#000;
float:left;
}
.txtthreadcontact{
width: 100px;
height:100px;
background: #aaa;
border-radius:100%;
margin:10px 10px 20px 10px;
float:left;
background: url(https://pbs.twimg.com/media/E-DVoTQVcAY … ame=medium);
background-size:cover;
box-shadow:0 0 0 2px #aaa;
border: 10px solid white;
}
.txtthreadcontacttext{
background:#fff;
width:96px;
height:120px;
font-family: 'Montserrat', sans-serif;
font-size:10px;
color: #000;
text-align:right;
padding: 0px;
float:left;
margin:10px 10px 20px 0px;
overflow:hidden;
text-transform:lowercase;
}
.txtthreadcontacttext b{
font-weight:bold;
font-size:12px;
text-transform:uppercase;
letter-spacing:5.5px;
}
.txtthreadtext{
width:241px;
height:244px;
padding: 0px 0px 5px 0px;
background:#fff;
overflow:auto;
float:left;
margin-right:5px;
}
#txtthreadtextbubble{
width:160px;
padding: 10px;
background: rgba(150,150,150,1);
border-radius:10px;
font-family: 'Montserrat', sans-serif;
font-size:10px;
text-align:justify;
float:right;
margin:0px 5px 5px 0px;
color:#fff;
line-height:120%;
letter-spacing:.5px;
}
#txtthreadtextbubble2{
width:160px;
padding: 10px;
background: rgba(150,150,150,1);
border-radius:10px;
font-family: 'Montserrat', sans-serif;
font-size:10px;
text-align:justify;
float:left;
margin:0px 5px 5px 8px;
color:#fff;
line-height:120%;
letter-spacing:.5px;
}
.txtthreadtext::-webkit-scrollbar {
background: #fff;
width: 5px;
}
.txtthreadtext::-webkit-scrollbar-thumb {
background: #B4B4B4;
width: 5px;
}
.txtthreadtext::-webkit-scrollbar-corner {
background: #B4B4B4;
}
.txtthreadreply{
width:206px;
padding: 5px 20px 5px 20px;
height:20px;
background:#fff;
float:left;
}
.txtthreadreplytext{
font-family:'Montserrat', sans-serif;
font-size:10px;
color: #aaa;
text-align:left;
line-height:18px;
float:left;
}
.txtthreadbottom{
width:206px;
padding: 5px 20px 5px 20px;
height:20px;
background:rgba(255,255,255,1);
border-radius:0px 0px 15px 15px;
float:left;
}
.txtthreadcontacttext a:link, .txtthreadcontacttext a:active, .txtthreadcontacttext a:visited{
color:#aaa;
transition:1s;
text-decoration:none !important;
}
.txtthreadcontacttext a:hover{
color:#fff !important;
text-decoration:none;
}
</style>
<center>
<div class="txtthreadbg"><div class="txtthreadwhite">
<div class="txtthreadtime"><div class="txtthreadtimetxt">
22:43<img src="https://i.imgur.com/9QA0ZbT.png" style="height:10px; padding:0px 5px 0px 113px;">57%<img src="https://i.imgur.com/hP1zOSr.png" style="padding:0px 0px 0px 5px;"></div>
</div>
<div class="txtthreadcontact"></div>
<div class="txtthreadcontacttext"><b>Asakura Yoh:</b><hr>
brother<hr>
shaman<hr>
</div>
<hr style="border: 0;background: #aaa;height: 1px;width: 224px;margin: 0px 10px 20px 10px;">
<div class="txtthreadtext">
<div id="txtthreadtextbubble">теперь я могу написать тебе в любой момент</div>
<div id="txtthreadtextbubble">эй, брат, ты рад?</div>
<div id="txtthreadtextbubble">Аники...</div>
<div id="txtthreadtextbubble">пожалуйста ответь!</div>
<div id="txtthreadtextbubble">извини если докучаю...</div>
<div id="txtthreadtextbubble2">Я за твоей спиной</div>
</div>
<div class="txtthreadreply"><div class="txtthreadreplytext"><img src="https://i.imgur.com/nMj5GZM.png" style="padding:0px 10px 0px 0px; float:left;"><img src="https://i.imgur.com/TJHvtI0.gif" style="margin-top:-2px; float:left; opacity:.5; padding-right:5px;"> message... </div></div>
<div class="txtthreadbottom"><img src="https://i.imgur.com/LnELZtI.png" style="padding:0px 30px 0px 25px;"><a href="http://cttw.jcink.net/index.php?showuser=21131" target="_blank"><img src="https://i.imgur.com/GlMtqhU.png" style="padding:0px 30px 0px 30px;"></a><img src="https://i.imgur.com/8OyYji8.png" style="padding: 0px 25px 0px 30px;"></div>
</div>
</div>
</center>
[/html]
Отредактировано Asakura Hao (2022-05-19 22:38:15)