Здесь делается вжух 🪄

Test by devls

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

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


Вы здесь » Test by devls » страниу » для трэпа


для трэпа

Сообщений 31 страница 40 из 42

31

[html]<style>#dramavn {    width: 700px;    overflow: hidden;    background: url(https://upforme.ru/uploads/000c/73/14/2/35761.png);    background-repeat: no-repeat;    background-position: bottom center;    background-size: contain;    background-color: #000;    border: 1px solid grey;    outline: 10px solid #dcdcdc82;    border-radius: 22px;    display: flex;    flex-wrap: wrap;    justify-content: center;text-transform: lowercase;    margin: 10px auto;}

.ficon, .micon {    position: absolute;    width: 25px;    height: 25px;    border-radius: 100%;    background: #ffffff;    font-family: 'Font Awesome 6 Pro';    font-size: 12px;    color: #622eaa;    font-weight: 400;    display: flex;    align-items: center;    z-index: 1;}
.micon {    margin-top: 51px;    margin-left: -11px;}
.ficon {    margin-top: 51px;    margin-left: 626px;}

.dramaline {    background: linear-gradient(90deg, #6635a9, transparent, #5827a0);    width: 720px;    height: 52px;}
.dramazag {    color: #fff;    height: 50px;    line-height: 11px;    font-size: 20px;    align-items: center;    display: flex;    font-weight: 800;    overflow: auto;    justify-content: center;}
.dramavnbox {    text-transform: lowercase;    font-size: 12px;    padding-top: 10px;    padding-bottom: 16px;}

.dramafcm, .dramafcf  {    width: 300px;    background: #ffffff;    border: 1px solid black;    margin-bottom: 8px;    margin-right: 25px;    padding-top: 3px;    padding-bottom: 3px;    border-radius: 20px;}
.dramalet {    text-align: center;    word-spacing: 7px;    color: #ffffff;    font-weight: 800;    font-size: 17px;    text-transform: lowercase;    letter-spacing: 1px;    padding: 6px 0px 15px 0px;}
.dramablok {    background: white;    border-radius: 20px;}
.dramaboys {    font-size: 12px;    width: 290px;    height: 100px;    overflow-y: auto;    padding: 10px 2px 7px 12px;    z-index: 4;    position: relative;}

.dramagirls {    font-size: 12px;    width: 290px;    height: 100px;    overflow-y: auto;    padding: 10px 2px 7px 8px;    margin-right: 8px;    z-index: 4;    position: relative;}
.dramabox {    position: absolute;    overflow: hidden;    width: 640px;    height: 130px;    border-radius: 20px;}
.dramabox cr2 {    display: block;    width: 100px;    height: 100px;    border-radius: 100%;    background: #6900ff59;    position: absolute;    left: -24px;    top: -33px;    filter: blur(30px);}
.dramabox cr1 {    display: block;    width: 100px;    height: 100px;    border-radius: 100%;    background: #6900ff59;    position: absolute;    left: 550px;    top: 68px;    filter: blur(30px);}
</style>

<center>
<div id="dramavn">
<div class="dramaline"><div class="dramazag">занятые внешности</div></div>
<div class="dramavnbox">
<div class="dramalet">a b c d e f g</div>
<div class="dramablok"><div class="micon"><i class="fa-solid fa-mars"></i></div><div class="ficon"><i class="fa-solid fa-venus"></i></div>
<div class="dramabox"><cr1></cr1><cr2></cr2></div>
<table layout="fixed" width="100%">
<tbody><tr><td>
<div class="dramaboys">
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>

</div></td><td>

<div class="dramagirls">
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
</div></td></tr></tbody></table></div>

<div class="dramalet">h i j k l m n</div>
<div class="dramablok"><div class="micon"><i class="fa-solid fa-mars"></i></div><div class="ficon"><i class="fa-solid fa-venus"></i></div>
<div class="dramabox"><cr1></cr1><cr2></cr2></div>
<table layout="fixed" width="100%">
<tbody><tr><td><div class="dramaboys">
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>

</div></td><td>
<div class="dramagirls">
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
</div></td></tr></tbody></table></div>

<div class="dramalet">o p q r s t u</div>
<div class="dramablok"><div class="micon"><i class="fa-solid fa-mars"></i></div><div class="ficon"><i class="fa-solid fa-venus"></i></div>
<div class="dramabox"><cr1></cr1><cr2></cr2></div>
<table layout="fixed" width="100%">
<tbody><tr><td><div class="dramaboys">
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>

</div></td><td>
<div class="dramagirls">
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
</div></td></tr></tbody></table></div>

<div class="dramalet">v w x y z 0 — 9</div>
<div class="dramablok"><div class="micon"><i class="fa-solid fa-mars"></i></div><div class="ficon"><i class="fa-solid fa-venus"></i></div>
<div class="dramabox"><cr1></cr1><cr2></cr2></div>
<table layout="fixed" width="100%">
<tbody><tr><td><div class="dramaboys">
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>

</div></td><td><div class="dramagirls">
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
<b>group</b> — <a href="">name surname</a><br>
</div></td></tr></tbody></table></div>

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

32

[html]<style>:root {
    --mgrgb: 245, 212, 186;
    --mgrgb2: 236, 192, 242;
    --mgrgb3: 178, 200, 230;
    --grad-1: -webkit-linear-gradient(45deg, rgba(var(--mgrgb), .1) 0%, rgba(var(--mgrgb2), .1) 50%, rgba(var(--mgrgb3), .1) 100%);
    --grad-2: -webkit-linear-gradient(45deg, rgba(var(--mgrgb), .2) 0%, rgba(var(--mgrgb2), .2) 50%, rgba(var(--mgrgb3), .2) 100%);
    --grad-3: -webkit-linear-gradient(45deg, rgba(var(--mgrgb), .3) 0%, rgba(var(--mgrgb2), .3) 50%, rgba(var(--mgrgb3), .3) 100%);
    --grad-4: -webkit-linear-gradient(45deg, rgba(var(--mgrgb), .4) 0%, rgba(var(--mgrgb2), .4) 50%, rgba(var(--mgrgb3), .4) 100%);
    --grad-5: -webkit-linear-gradient(45deg, rgba(var(--mgrgb), .5) 0%, rgba(var(--mgrgb2), .5) 50%, rgba(var(--mgrgb3), .5) 100%);
    --grad-6: -webkit-linear-gradient(45deg, rgba(var(--mgrgb), .6) 0%, rgba(var(--mgrgb2), .6) 50%, rgba(var(--mgrgb3), .6) 100%);
    --grad-7: -webkit-linear-gradient(45deg, rgba(var(--mgrgb), .7) 0%, rgba(var(--mgrgb2), .7) 50%, rgba(var(--mgrgb3), .7) 100%);
    --grad-8: -webkit-linear-gradient(45deg, rgba(var(--mgrgb), .8) 0%, rgba(var(--mgrgb2), .8) 50%, rgba(var(--mgrgb3), .8) 100%);
    --grad-9: -webkit-linear-gradient(45deg, rgba(var(--mgrgb), .9) 0%, rgba(var(--mgrgb2), .9) 50%, rgba(var(--mgrgb3), .9) 100%);
    --grad-10: -webkit-linear-gradient(45deg, rgba(var(--mgrgb), 1) 0%, rgba(var(--mgrgb2), 1) 50%, rgba(var(--mgrgb3), 1) 100%);

#dramanews {
    width: 600px;
    margin: auto;
    height: auto;
}
.news {
    width: 600px;
    background: white;
    border: 1px solid #dad9de;
    border-radius: 22px;
    min-height: 300px;
}
.newstop {
    position: relative;
    width: 600px;
    height: 200px;
    background: #e9ccff61;
    border-radius: 22px 22px 0 0;
}
.newstop img {
    width: 100px;
    height: 100px;
    border-radius: 100%;
    border: 2px solid #f2d6ef;
    max-width: 100px;
    max-height: 100px;
    position: absolute;
    top: 62px;
    left: 240px;
    z-index: 1;
}

main-hdr {
    display: grid;
    width: 600px;
    height: 197px;
    position: relative;
    overflow: hidden;
}
main-hdr .wave-one {
    display: block;
    width: 161%;
    height: 134px;
    fill: #ffffff;
    position: absolute;
    bottom: 0;
    left: -209px;
    z-index: 2;
}
main-hdr .wave-two {
    display: block;
    width: 171%;
    height: 550px;
    fill: #ff000033;
    position: absolute;
    bottom: -182px;
    left: 0;
    z-index: 1;
}
main-hdr .wave-three {
    display: block;
    width: 171%;
    height: 550px;
    fill: blue;
    position: absolute;
    bottom: -182px;
    left: 0;
    z-index: 1;
}
main-hdr .wave-four {
    display: block;
    width: 171%;
    height: 550px;
    fill: blue;
    position: absolute;
    bottom: -182px;
    left: 0;
    z-index: 1;
}
</style>

<div id="dramanews">

<div class="news">
<div class="newstop"><img src="https://upforme.ru/uploads/000c/73/14/2/160289.png">
<ttl> name
<span>online</span></name>

<main-hdr><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" class="wave-one"><path d="M0,32L8.9,74.7C17.8,117,36,203,53,224C71.1,245,89,203,107,165.3C124.4,128,142,96,160,112C177.8,128,196,192,213,224C231.1,256,249,256,267,245.3C284.4,235,302,213,320,176C337.8,139,356,85,373,58.7C391.1,32,409,32,427,53.3C444.4,75,462,117,480,122.7C497.8,128,516,96,533,90.7C551.1,85,569,107,587,117.3C604.4,128,622,128,640,154.7C657.8,181,676,235,693,218.7C711.1,203,729,117,747,90.7C764.4,64,782,96,800,128C817.8,160,836,192,853,224C871.1,256,889,288,907,272C924.4,256,942,192,960,186.7C977.8,181,996,235,1013,224C1031.1,213,1049,139,1067,122.7C1084.4,107,1102,149,1120,165.3C1137.8,181,1156,171,1173,144C1191.1,117,1209,75,1227,96C1244.4,117,1262,203,1280,218.7C1297.8,235,1316,181,1333,138.7C1351.1,96,1369,64,1387,64C1404.4,64,1422,96,1431,112L1440,128L1440,320L1431.1,320C1422.2,320,1404,320,1387,320C1368.9,320,1351,320,1333,320C1315.6,320,1298,320,1280,320C1262.2,320,1244,320,1227,320C1208.9,320,1191,320,1173,320C1155.6,320,1138,320,1120,320C1102.2,320,1084,320,1067,320C1048.9,320,1031,320,1013,320C995.6,320,978,320,960,320C942.2,320,924,320,907,320C888.9,320,871,320,853,320C835.6,320,818,320,800,320C782.2,320,764,320,747,320C728.9,320,711,320,693,320C675.6,320,658,320,640,320C622.2,320,604,320,587,320C568.9,320,551,320,533,320C515.6,320,498,320,480,320C462.2,320,444,320,427,320C408.9,320,391,320,373,320C355.6,320,338,320,320,320C302.2,320,284,320,267,320C248.9,320,231,320,213,320C195.6,320,178,320,160,320C142.2,320,124,320,107,320C88.9,320,71,320,53,320C35.6,320,18,320,9,320L0,320Z"></path></svg>

     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 300" class="wave-two">
  <path d="M0,192L48,181.3C96,171,192,149,288,170.7C384,192,480,256,576,234.7C672,213,768,107,864,90.7C960,75,1056,149,1152,165.3C1248,181,1344,139,1392,117.3L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
</svg>
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 300" class="wave-two">
  <path d="M0,192L48,181.3C96,171,192,149,288,170.7C384,192,480,256,576,234.7C672,213,768,107,864,90.7C960,75,1056,149,1152,165.3C1248,181,1344,139,1392,117.3L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"  class="wave-three">
  <path d="M0,256L26.7,234.7C53.3,213,107,171,160,133.3C213.3,96,267,64,320,64C373.3,64,427,96,480,117.3C533.3,139,587,149,640,149.3C693.3,149,747,139,800,165.3C853.3,192,907,256,960,261.3C1013.3,267,1067,213,1120,192C1173.3,171,1227,181,1280,176C1333.3,171,1387,149,1413,138.7L1440,128L1440,320L1413.3,320C1386.7,320,1333,320,1280,320C1226.7,320,1173,320,1120,320C1066.7,320,1013,320,960,320C906.7,320,853,320,800,320C746.7,320,693,320,640,320C586.7,320,533,320,480,320C426.7,320,373,320,320,320C266.7,320,213,320,160,320C106.7,320,53,320,27,320L0,320Z"></path>
</svg>
   
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" class="wave-four">
  <path d="M0,160L40,181.3C80,203,160,245,240,250.7C320,256,400,224,480,224C560,224,640,256,720,229.3C800,203,880,117,960,80C1040,43,1120,53,1200,48C1280,43,1360,21,1400,10.7L1440,0L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z"></path>
</svg>
   
    </main-hdr>

</div>

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

[/html]

33

#pun-index #pun-main .category .container, .post-box {
    background: var(--bg2);
    color: var(--text1);
    border-radius: 10px;
    border: var(--bordr1);
}
#pun {
    background: var(--body);
    color: var(--text2);
    border-radius: 3px;
    border: var(--bordr);
}

34

#pun-stats ul.container {
    position: relative;
    background: var(--bg3);
    color: var(--toxic4);
    border-radius: 10px;
    border: var(--bordr);
    width: 862px;
    margin: 0px 0px 20px 0px;
    padding: 20px 20px 15px 20px;
}

35

#pun-main .category .container {
    overflow: hidden;
    border: 0px;
    width: auto;
    background: url(https://i.imgur.com/uOL3ywb.png) top center no-repeat, url(https://i.imgur.com/x5XSnEL.png) bottom center no-repeat;
    background-color: #F9F9F9;
    border-radius: 0 0 16px 16px;
}

36

Код:
.cvet85 {
    background: url(https://upforme.ru/uploads/001c/1b/e1/2/456106.png);
    position: absolute;
    width: 96px;
    background-size: 96px 177px;
    height: 177px;
    left: -69px;
    top: -47px;
    transition: all 1s ease-in-out 0s;
}
.cvet85:hover, .cvet86:hover {    transition: all 1s ease-in-out 0s;
    transform: rotate(3deg);}

37

38

Код:
<script>
$('#pun-index .tcr').each(function(){
$(this).find('.lastpost-link, .lastpost').wrapAll('<div class="tcr-wrap">');
});
$('#pun-stats').find('.item1, .item2, .item3, .item4').wrapAll('<div class="statsinfo">');
$('.punbb .post .post-author').each(function(){
$(this).find('li.pa-title, .pa-avatar, .pa-fld2').wrapAll('<div class="author-wrap">');
});
$('#pun-main .post-author ul').each(function() { 
$(this).find('.pa-posts, .pa-respect').wrapAll('<div class="wrap-resp">'); }); 
$('.punbb').each(function() { $(this).find('#pun-navlinks, #pun-ulinks').wrapAll('<div class="navi-head">'); }); 
$('.forum .tcr').each(function(){ 
$(this).find('a:not(.user-avatar a), .byuser').wrapAll('<div class="wrap-byuser">');
});
$('.post-box').each(function(){
$(this).find('.post-rating, .post-vote').wrapAll('<div class="rsp_wrap">');
});
</script>

39

Код:
.author-wrap {
    background: #d2d2d25c;
    margin: 0 20px;
    border-radius: 7px;
    padding: 5px;
    backdrop-filter: blur(10px);
}

40

https://kindergarten.rusff.me/


Вы здесь » Test by devls » страниу » для трэпа


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