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

Test by devls

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

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


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


для трэпа

Сообщений 11 страница 20 из 42

11

[html]<style>.faq {
    font-family: Helvetica;
    width: 90%;
    margin: 0 0 0 5%;
   background: url(https://i.imgur.com/mXwNxKf.png);
   border: 1px solid #eff1f1;
    border-radius: 24px;
    padding: 10px 6px;
}

.faq-t {
    padding: 7px 0px 7px 0px;
    position: relative;
    color: black;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: bold;
    text-align-last: center;
}

.faq-n {
    padding: 0px 0px 14px 0px;
    position: relative;
    color: #ffd99b;
    font-size: 12px;
    text-transform: uppercase;
    text-align-last: center;}

.faq-n:before {
    content: '';
    display: block;
    height: 1px;
    width: 720px;
    position: absolute;
    z-index: 0;
    background: #e7e4e4;
    margin: 22px 0 0 -7px;
}

.faq-q {
    border: 1px solid #eff1f1;
    border-radius: 14px;
    padding: 12px 24px 12px 22px;
    position: relative;
    line-height: 16px;
    margin: 14px 10px 14px 26px;
    width: 610px;
background: white;
}
.faq-a {
    border: 1px solid #eff1f1;
    border-radius: 14px;
    padding: 12px 24px 12px 22px;
    position: relative;
    line-height: 16px;
    margin: 14px 10px 14px 14px;
    width: 610px;
background: white;
}

.faq-a:before {
    content: "a";
    left: 100%;
    margin-left: -14px;
    position: absolute;
    border-radius: 50%;
    padding: 3px 2px 3px 3px;
    /* height: 20px; */
    width: 20px;
    margin-top: -5px;
    background: white;
    text-align: center;
    line-height: 18px;
    color: #000;
     border: 1px solid #eff1f1;
    font-size: 110%;
    text-transform: uppercase;
}

.faq-q:before {
    right: 100%;
    margin-right: -14px;
    content: "q";
    position: absolute;
    border-radius: 50%;
    margin-top: -5px;
    padding: 3px;
    /* height: 20px; */
    width: 20px;
    background: #ffd99b;
    text-align: center;
    line-height: 18px;
    color: #000;
    border: 1px solid #eff1f1;
    font-size: 110%;
    text-transform: uppercase;
}
</style>

<div class="faq">
  <div class="faq-t">регистрация</div>
  <div class="faq-q">вопросный вопрос вопросный вопрос вопросный вопрос вопросный вопрос вопросный вопрос  </div>
  <div class="faq-a"> ответный ответ да очень оригинально ответный ответ да очень оригинально ответный ответ да очень оригинально ответный ответ да очень оригинально ответный ответ да очень оригинально ответный ответ да очень оригинально ответный ответ да очень оригинально  </div>
  <div class="faq-q">вопросный вопрос вопросный вопрос вопросный вопрос вопросный вопрос вопросный вопрос  </div>
  <div class="faq-a">ответный ответ да очень оригинально ответный ответ да очень оригинально ответный ответ да очень оригинально ответный ответ да очень оригинально ответный ответ да очень оригинально ответный ответ да очень оригинально ответный ответ да очень оригинально  </div>
<div class="faq-t">активность</div>
  <div class="faq-q">вопросный вопрос вопросный вопрос вопросный вопрос вопросный вопрос вопросный вопрос  </div>
  <div class="faq-a"> ответный ответ да очень оригинально ответный ответ да очень оригинально ответный ответ да очень оригинально ответный ответ да очень оригинально ответный ответ да очень оригинально ответный ответ да очень оригинально ответный ответ да очень оригинально</div>
  <div class="faq-q">вопросный вопрос вопросный вопрос вопросный вопрос вопросный вопрос вопросный вопрос </div>
  <div class="faq-a">ответный ответ да очень оригинально ответный ответ да очень оригинально ответный ответ да очень оригинально ответный ответ да очень оригинально ответный ответ да очень оригинально ответный ответ да очень оригинально ответный ответ да очень оригинально</div>
<div class="faq-t">что-то ещё</div>
  <div class="faq-q">вопросный вопрос вопросный вопрос вопросный вопрос вопросный вопрос вопросный вопрос </div>
  <div class="faq-a">ответный ответ да очень оригинально ответный ответ да очень оригинально ответный ответ да очень оригинально ответный ответ да очень оригинально ответный ответ да очень оригинально ответный ответ да очень оригинально ответный ответ да очень оригинально</div>
  <div class="faq-q">вопросный вопрос вопросный вопрос вопросный вопрос вопросный вопрос вопросный вопрос</div>
<div class="faq-a">ответный ответ да очень оригинально ответный ответ да очень оригинально ответный ответ да очень оригинально ответный ответ да очень оригинально ответный ответ да очень оригинально ответный ответ да очень оригинально ответный ответ да очень оригинально</div>
</div>[/html]

12

[html]<script src="https://kit.fontawesome.com/1427d036f5.js" crossorigin="anonymous"></script><style>
.weverse{    width: 550px;    background: white;    margin-top: -44px;    border-radius: 40px;    box-shadow: 1px 1px 4px #0000003b;}
.weversepoint {    color: gray;    font-size: 18px;    margin-top: 26px;    position: absolute;    margin-left: 516px;    font-family: montserrat;}
.weverseprof{    width: 300px;    height: 100px;    position: absolute;    top: 108px;    left: 130px;    display: flex;    flex-direction: row;    align-items: center;    justify-content: center;}
.weverseicon {    width: 72px;    height: 72px;    padding: 3px;    border-radius: 100%;    border: 3px solid #8fe2d4;    position: relative;    align-self: center;}
.weversedate {    font-family: jost;    font-size: 12px;    position: absolute;    left: 106px;    top: 66px;    width: 150px;    height: 40px;    text-transform: uppercase;    color: #ffffff;}
.weversedate:before {    content: '';    background: url(https://upforme.ru/uploads/001b/e9/2d/7/356121.png);    height: 11px;    width: 9px;    position: absolute;    margin: 2px 0px 0px -14px;}
.weverseicon img {    height: 72px;    width: 72px;    border-radius: 100%;}
.weversename {    font-family: montserrat;    font-size: 18px;    width: 150px;    height: 40px;    margin-top: 22px;    margin-left: -44px;    text-transform: uppercase;    color: #ffffff;}
.weverseextra b {    font-weight: 600;    color: #000000b0;}
.weverseextra {    position: absolute;    margin-top: 21px;    padding: 0px 0px 0px 98px;    width: 300px;    font-family: montserrat;    font-size: 12px;    display: flex;    letter-spacing: 1px;    color: black;    justify-content: center;}
.weversefollow {    padding: 7px 15px 7px 15px;    margin: 10px 10px;    width: 140px;    text-transform: uppercase;    font-size: 11px;    font-family: montserrat;    border-radius: 17px;    border: 1px solid #0adbb8;    color: #0adbb8;    background-color: #ffffff;    text-align: center;}
.weverseline {    content: '';    display: block;    height: 1px;    width: 490px;    position: absolute;    z-index: 0;    background: #eaeaea;    margin: 8px 0 0 33px;}
.weverseinfo {    height: 44px;    width: 545px;    margin-top: 10px;}
.weverseimages {    padding: 20px 45px 20px 45px;    margin-bottom: 10px;}
.weversepost {    padding: 0px 10px;}
.weversepost img {    width: 240px;    height: 312px;    border-radius: 15px;}
.weversepost1 {    padding: 0px 6px;    line-height: 3;    margin-top: 10px;}
.weversepost1 img {    width: 240px;    height: 150px;    border-radius: 15px;}
.weverseimages1{    display: flex;    justify-content: center;    align-items: center;}
.weversehead {    width: 550px;    height: 250px;    margin: auto;    box-shadow: 1px 1px 4px #0000003b;    border-radius: 40px 40px 0px 0px;}</style>
<center><div class="weversehead" style="background: url(http://placehold.it/550x250) no-repeat;"><div class="weversepoint"><i class="fa-solid fa-ellipsis-vertical"></i></div></div>
<div class="weverse">
<div class="weverseprof"><div class="weverseicon"><img src="http://placehold.it/72x72"></div>
<div class="weversename">username</div><br>
<div class="weversedate">1995.20.10</div></div>
<div class="weverseinfo"><div class="weverseextra"><b>00</b> post <b>00</b> followers <b>00</b> following</div></div>
<div class="weversefollow">following</div>
<div class="weverseline"></div>
<div class="weverseimages">
<div class="weverseimages1"><div class="weversepost"><img src="http://placehold.it/240x312"></div>
<div class="weversepost1"><img src="http://placehold.it/240x150"><img src="http://placehold.it/240x150"></div></div>
</div>
</div>
</div></center>
[/html]

13

[html]<div class="wvideo" style="background:url('https://via.placeholder.com/400x600'); background-size: cover;"><div class="wheader"><div class="wprof"><img src="https://via.placeholder.com/35x35"></div><span>name</span><br><span>00.00 00:00</span><div class="wpoint"><i class="fa-solid fa-share"></i><i class="fa-solid fa-stop"></i></div></div><div class="wimg"><div class="wdts">

<div class="wlateral"><i class="fa-solid fa-language"></i><i class="fa-solid fa-download"></i><i class="fa-solid fa-comment-dots"></i><div class="wcomm">10k</div><i class="fa-solid fa-magnifying-glass"></i><div class="wcomm">22k</div></div>

<div class="winfo">lorem ipsum</div></div></div></div>

<script src="https://kit.fontawesome.com/1427d036f5.js" crossorigin="anonymous"></script>
<style>.wvideo {
    width: 400px;
    margin: 10px auto;
    background: #444;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    height: 600px;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    box-shadow: 2px 2px 10px #0007;
}
.wheader {
    padding: 10px;
    width: 100%;
   /* background: linear-gradient(180deg, #222a 0%, transparent 85%);*/
}
.wpoint {
    position: absolute;
    display: flex;
    align-items: center;
    flex-direction: row;
    right: 198px;
    top: 35px;
    gap: 15px;
    font-size: 20px;
    color: #fff;
    justify-content: flex-start;
}
.wimg{height: 250px; display: flex; position: relative; flex-direction: column; justify-content: space-between; align-items: center; width: 100%; /*background: linear-gradient(0deg, #222a 0%, transparent 95%);*/}
.wlateral {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    right: 0;
    width: 60px;
    height: 75%;
    top: 65px;
    gap: 15px;
}
.wprof {
    width: 35px;
    height: 35px;
    border: 2px solid #fff;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    left: -174px;
    top: 2px;
    position: relative;
}
.wlateral > i{color: #fff; font-size: 20px;cursor:pointer;}
.wprof > img{width: 35px; height: 35px; border-radius: 100%;}
.wprof> i{position: absolute; bottom: -8px; background: #cb5151; border-radius: 100%; color: #fff; font-size: 10px; border: 2px solid #fff; padding: 3px; display: flex; align-items: center; justify-content: center; width: 8px; height: 8px; line-height: 13px;}
.wdts{height: 215px; width: 100%; padding: 10px; box-sizing: border-box; position: relative;}
.wcomm {
    display: block;
    font-size: 9px;
    font-weight: 300;
    text-align: center;
    color: #fff;
    margin-top: -8px;
}
.winfo {
    width: 80%;
    height: 90px;
    display: flex;
    box-sizing: border-box;
    position: absolute;
    letter-spacing: 1px;
    font-family: Montserrat;
    color: #fff;
    align-items: center;
    top: -90px;
    left: 35px;
    font-size: 14px;
    justify-content: center;
}

.wheader > span {
    position: relative;
    top: -31px;
    left: 57px;
    font-family: montserrat;
    text-transform: uppercase;
    color: #fff;
    font-size: 12px;
    text-align: left;
}</style>
[/html]

14

[html]<style>
.siil {
background: url(https://i.imgur.com/mXwNxKf.png);
    border-radius: 30px;
    overflow: hidden;
    width: 700px!important;
    height: 570px;
    border: 1px solid #eff1f1;
    margin: 10px auto;

}

.sil {    background: #fbfbfb;
    border-radius: 20px;
    overflow: hidden;
    width: 650px!important;
    height: 500px;
    margin: 35px auto;
    color: #000;
    font-family: jost;
}
.silsv {     display: flex;
    height: 310px;
    margin-top: 137px;
    align-items: center;
    justify-content: center;

   }
.silpages {  display:flex;  justify-content:center;  align-items:center;  flex-direction:column;}
.silpages { width: 40px;
    align-self: stretch;
    margin: 20px;
    justify-content: space-between;
    margin-top: 110px;
}
.silpages a, .silpages label {font-size: 8px;
    border: 1px solid #eff1f1;
    height: 30px;
    width: 86px;
    margin-top: -1-0px;
    line-height: 30px;
    text-align: center;
    text-decoration: none;
    color: #000;
    box-sizing: border-box;
    letter-spacing: 1px;
    font-weight: 600;
    font-family: jost;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 0px 10px 10px 0px;
}
.siltit { height: 38px;
    border-bottom: 1px solid #eeeeee99;
    text-align: center;
    color: #000000;
    text-shadow: 1px 1px rgba(0,0,0,0.05), -1px 1px rgba(0,0,0,0.05), 1px -1px rgba(0,0,0,0.05), -1px -1px rgba(0,0,0,0.05), 1px 0 rgba(0,0,0,0.05), 0 1px rgba(0,0,0,0.05), -1px 0 rgba(0,0,0,0.05), 0 -1px rgba(0,0,0,0.05);
    font: 12px 'jost';
    font-weight: 800;
    text-transform: uppercase;
    line-height: 38px;
    letter-spacing: 2px;
}
.silv2 {    width: 670px;}
.siltem {    flex-grow: 1;    align-self: stretch;    margin: 20px;    border-radius: 10px;    overflow: hidden;    position: relative;}
.siltem>div {    position: absolute;    width: 100%;    height: 100%;    box-sizing: border-box;    padding-right: 5px;    overflow: auto;    border-radius: 10px;    top: 100%;   border: 1px solid #eff1f1;    transition: ease .5s;   background: #fbfbfb;  text-align: center; }
.siltem>div.page1, .siltem>div.page3 {    overflow-y: auto;    display: grid;    padding-right: 0;    line-height: 36px;    align-content: stretch;    align-items: center;    justify-items: center;}
.siltem>div.page2, .siltem>div.page4 {    overflow-y: auto;    display: block;    padding: 10px;}
.siltem>div.page2 strong, .siltem>div.page4 strong {    font-size: 12px;    text-align: center;    text-transform: uppercase;    font-family: jost;    display: flex;     /* width: fit-content; */    border-radius: 15px;    padding: 2px 10px;    background: white;   margin-top: 8px;    margin-bottom: 8px;    justify-content: space-around;}
.sil input, .sil br { display:none; }
.sil input#page1:checked ~ .silsv .page1, .sil input#page2:checked ~ .silsv .page2, .sil input#page3:checked ~ .silsv .page3, .sil input#page4:checked ~ .silsv .page4 {  top:0;  z-index:9;}
.sil input#page1:checked ~ .silsv label[for="page1"], .sil input#page2:checked ~ .silsv label[for="page2"], .sil input#page3:checked ~ .silsv label[for="page3"], .sil input#page4:checked ~ .silsv label[for="page4"] { color: #000000!important;
    background: #ffffff;

}
.silv2 .siltit {    text-align: center;}
.silv2 .page1, .silv2 .page3 { text-align:center; }
.texts {
    color: #000;
    position: absolute;
    display: grid;
    margin-top: 25px;
    z-index: 3;
    text-align: justify;
    width: 575px;
    margin-left: 22px;
    border: 1px solid #eff1f1;
    padding: 15px;
    border-radius: 10px;

}
.page2 img, .page4 img {
    padding: 2px!important;
    border-radius: 5px;
    margin-bottom: 1px;
    border: 1px solid #d9ebe136;

}
</style>
<div class="siil">
<div class="sil silv2">
<div class="siltit">магазин</div>
<div class="texts">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mollis ipsum purus, ut facilisis eros blandit eu. Quisque fringilla iaculis pulvinar. Vivamus odio turpis, rhoncus eget nulla rhoncus, tempus ultrices dui. Maecenas aliquam rhoncus leo, ac mollis est egestas id. In vel elementum nulla. Quisque pharetra dapibus purus, non eleifend elit mollis id. Aliquam vel ligula nec nisl porta efficitur. Mauris vitae aliquet ante. Orci varius natoque penatibus</div>
<input type="radio" name="sil" id="page1" checked/>
<input type="radio" name="sil" id="page2"/>
<input type="radio" name="sil" id="page3"/>
<input type="radio" name="sil" id="page4"/>
<div class="silsv">
<div class="silpages">
<label for="page1">плашки</label>
<label for="page2">иконки</label>
<label for="page3">что-то</label>
<label for="page4">что-то</label>
</div>
<div class="siltem">
<div class="page1">
<table>
<tbody><tr>
<td><img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"></td>
<td><img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"></td>
</tr>
</tbody></table>
</div>
<div class="page2">
<img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif">
<br><br><strong>ивентовые</strong>
<img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif">
<br><br>
<strong>рейтинговые</strong><br>
<img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif">
</div>
<div class="page3">
<table>
<tbody><tr>
<td><img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"></td>
<td><img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"></td>
</tr>
</tbody></table>
</div>
<div class="page4">
<img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif">
<br><br><strong>ивентовые</strong>
<img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif">
<br><br>
<strong>рейтинговые</strong><br>
<img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif">
</div>
</div>
</div>
</div>
</div>
[/html]

15

[html]<center><div class="wverpost"><div class="wverprof"><div><img src="http://placehold.it/40x40"><span><d>name name</d>Oct 02, 2021, 01:51</span></div><div class="wverpoint"><i class="fa-solid fa-language"></i> <i class="fa-solid fa-ellipsis-vertical"></i></div></div><div class="wvertext">Don’t take it so personally, okay? I don’t like most people. Don’t take it so personally, okay? I don’t like most people. Don’t take it so personally, okay? I don’t like most people. Don’t take it so personally, okay? I don’t like most people. Don’t take it so personally, okay? I don’t like most people.</div>
<div class="wverlat"><div class="wverlat1"><i class="fa-solid fa-comment-dots"></i><div class="wvercomm">10k</div><i class="fa-solid fa-magnifying-glass"></i><div class="wvercomm">22k</div></div></div>
<div class="wverfollow">Read more comments</div>
<div class="wverleave"><div><img src="http://placehold.it/30x30"><span>Leave a comment</span></div>
</div></center>

<script src="https://kit.fontawesome.com/1427d036f5.js" crossorigin="anonymous"></script><style>
.wverpost{    border: 1px solid #ccc;    margin: 10px auto;    width: 550px;    background: white;    border-radius: 40px;    box-shadow: 1px 1px 4px #0000003b;}
.wverpoint {    color: #adb1b8;    font-size: 16px;    gap: 15px;    padding: 0px 0px 0px 248px;}
.wverfollow {    padding: 7px 15px 7px 15px;    margin: 20px 10px 10px;    width: 170px;    text-transform: uppercase;    font-size: 11px;    font-family: montserrat;    border-radius: 17px;    border: 1px solid #0adbb8;    color: #0adbb8;    background-color: #ffffff;    text-align: center;}
.wverlat {    height: 40px;    width: 490px;    border-bottom: 1px solid #eaeaea;}
.wverlat1 {    display: flex;    align-items: center;    height: 36px;    width: 120px;    margin-left: 6px;    color: #878e96;    font-size: 14px;}
.wvercomm {    margin-left: -2px;}
.wverpost > div:not(.btinstap-descrip) br{display:none;}
.wverprof {    height: 90px;    display: flex;    align-items: center;    padding: 0px 30px;    justify-content: space-between;}
.wverprof div > img{width:40px; height:40px; border-radius:100%; border:1px solid #ccc; display:block; padding:2px;}
.wverprof > div {    display: flex;    align-items: center;    line-height: 17px;    margin-left: 0px;}
.wverprof > div span {    padding-left: 20px;    font-size: 13px;    color: #888;    margin-left: -4px;    text-align: left;}
.wverprof > div span d {    font-family: Montserrat;    display: block;    font-size: 14px;    color: black;}
.wverleave> div {    display: flex;    align-items: center;}
.wverleave > div span {    padding: 10px 0px 0px 20px;    font-size: 13px;    color: #888;    margin-left: 7px;    background: #f4f7fa;    text-align: left;    height: 25px;    width: 428px;    border-radius: 10px;}
.wverleave {    height: 60px;    display: flex;    align-items: center;    padding: 0px 30px 20px;    justify-content: space-between;}
.wverleave div > img {    width: 30px;    height: 30px;    border-radius: 100%;    display: block;}
.wvertext {    width: 490px;    margin: 0px auto;    line-height: 16px;    font-size: 12px;    text-align: justify; padding: 0px 0px 20px;    border-bottom: 1px solid #eaeaea;    color: #000;}</style>[/html]

16

[html]<center><div class="wverpost"><div class="wverprof"><div><img src="http://placehold.it/40x40"><span><d>name name</d>Oct 02, 2021, 01:51</span></div><div class="wverpoint"><i class="fa-solid fa-language"></i> <i class="fa-solid fa-ellipsis-vertical"></i></div></div><div class="wvertext">Don’t take it so personally, okay? I don’t like most people. Don’t take it so personally, okay? I don’t like most people. Don’t take it so personally, okay? I don’t like most people. Don’t take it so personally, okay? I don’t like most people. Don’t take it so personally, okay? I don’t like most people.
<div class="wverimag"><div class="wveri"><img src="http://placehold.it/240x312"></div>
<div class="wveri1"><img src="http://placehold.it/240x150"><img src="http://placehold.it/240x150"></div></div></div>
<div class="wverlat"><div class="wverlat1"><i class="fa-solid fa-comment-dots"></i><div class="wvercomm">10k</div><i class="fa-solid fa-magnifying-glass"></i><div class="wvercomm">22k</div></div></div>
<div class="wverfollow">Read more comments</div>
<div class="wverleave"><div><img src="http://placehold.it/30x30"><span>Leave a comment</span></div>
</div></center>

<script src="https://kit.fontawesome.com/1427d036f5.js" crossorigin="anonymous"></script><style>
.wverpost{    border: 1px solid #ccc;    margin: 10px auto;    width: 550px;    background: white;    border-radius: 40px;    box-shadow: 1px 1px 4px #0000003b;}
.wverpoint {    color: #adb1b8;    font-size: 16px;    gap: 15px;    padding: 0px 0px 0px 248px;}
.wverfollow {    padding: 7px 15px 7px 15px;    margin: 20px 10px 10px;    width: 170px;    text-transform: uppercase;    font-size: 11px;    font-family: montserrat;    border-radius: 17px;    border: 1px solid #0adbb8;    color: #0adbb8;    background-color: #ffffff;    text-align: center;}
.wverlat {    height: 40px;    width: 490px;    border-bottom: 1px solid #eaeaea;}
.wverlat1 {    display: flex;    align-items: center;    height: 36px;    width: 120px;    margin-left: 6px;    color: #878e96;    font-size: 14px;}
.wvercomm {    margin-left: -2px;}
.wverpost > div:not(.btinstap-descrip) br{display:none;}
.wverprof {    height: 90px;    display: flex;    align-items: center;    padding: 0px 30px;    justify-content: space-between;}
.wverprof div > img{width:40px; height:40px; border-radius:100%; border:1px solid #ccc; display:block; padding:2px;}
.wverprof > div {    display: flex;    align-items: center;    line-height: 17px;    margin-left: 0px;}
.wverprof > div span {    padding-left: 20px;    font-size: 13px;    color: #888;    margin-left: -4px;    text-align: left;}
.wverprof > div span d {    font-family: Montserrat;    display: block;    font-size: 14px;    color: black;}
.wverleave> div {    display: flex;    align-items: center;}
.wverleave > div span {    padding: 10px 0px 0px 20px;    font-size: 13px;    color: #888;    margin-left: 7px;    background: #f4f7fa;    text-align: left;    height: 25px;    width: 428px;    border-radius: 10px;}
.wverleave {    height: 60px;    display: flex;    align-items: center;    padding: 0px 30px 20px;    justify-content: space-between;}
.wverleave div > img {    width: 30px;    height: 30px;    border-radius: 100%;    display: block;}
.wvertext {    width: 490px;    margin: 0px auto;    line-height: 16px;    font-size: 12px;    text-align: justify; padding: 0px 0px 20px;    border-bottom: 1px solid #eaeaea;    color: #000;}
.wverimag {    display: flex;    justify-content: center;    gap: 10px;    align-items: center;}
.wveri {    padding: 0px 0px 0px 4px;}
.wveri img {    width: 240px;    height: 312px;    border-radius: 15px;}
.wveri1 {    line-height: 3;    margin-top: 10px;}
.wveri1 img {    width: 240px;    height: 150px;    border-radius: 15px;}</style>[/html]

17

[html]<center><div class="wchatpost">
<div class="wchatfirst"><div><img src="http://placehold.it/30x30"><span><b>name</b><i class="fa-solid fa-circle-check"></i>hi hello nihao</span></div></div>
<div class="wchatlatfirst"><i class="fa-regular fa-thumbs-up"></i><div class="wchatcomm">Reply</div><div class="wchatcomm">Translate</div><div class="wchatdate">Oct 02, 2021, 21:23</div></div>
<div class="wchatrep">See 318 replies <i class="fa-solid fa-play"></i></div>
<div class="wchat"><div><img src="http://placehold.it/30x30"><span><b>name</b> short</span></div></div>
<div class="wchatlat"><i class="fa-regular fa-thumbs-up"></i><div class="wchatcomm">Reply</div><div class="wchatcomm">Translate</div><div class="wchatdate">Oct 02, 2021, 21:23</div></div>
<div class="wchat"><div><img src="http://placehold.it/30x30"><span><b>name</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbgu</span></div></div>
<div class="wchatlat"><i class="fa-regular fa-thumbs-up"></i><div class="wchatcomm">Reply</div><div class="wchatcomm">Translate</div><div class="wchatdate">Oct 02, 2021, 21:23</div></div>
<div class="wchat"><div><img src="http://placehold.it/30x30"><span><b>name</b> LONG MESSAGE HERE EXCEPT THIS LINE OOOOOPS</span></div></div>
<div class="wchatlat"><i class="fa-regular fa-thumbs-up"></i><div class="wchatcomm">Reply</div><div class="wchatcomm">Translate</div><div class="wchatdate">Oct 02, 2021, 21:23</div></div>
<div class="wchatfollow">Read more comments</div>
<div class="wchatleave"><div><img src="http://placehold.it/30x30"><span>Leave a comment</span></div>
</div></center>

<script src="https://kit.fontawesome.com/1427d036f5.js" crossorigin="anonymous"></script><style>
.wchatpost{    border: 1px solid #ccc;    margin: 10px auto;    width: 550px;    background: white;    border-radius: 40px;    box-shadow: 1px 1px 4px #0000003b;}
.wchatfollow {    padding: 7px 15px 7px 15px;    margin: 7px 10px 10px;    width: 170px;    text-transform: uppercase;    font-size: 11px;    font-family: montserrat;    border-radius: 17px;    border: 1px solid #0adbb8;    color: #0adbb8;    background-color: #ffffff;    text-align: center;}
.wchatlatfirst {      display: flex;    align-items: center;    width: 300px;    margin-top: -26px;    padding: 0px 0px 25px 0px;    margin-left: 71px;    gap: 22px;    color: #252525;    font-size: 12px;    flex-direction: row;}
.wchatlatfirst i {   color: #adb1b8;}
.wchatrep {    color: #0adbb8;    display: flex;    align-items: center;   padding: 0px 0px 25px 0px;    margin-left: 71px;    font-size: 12px;}
.wchatrep i {    color: #0adbb8;    margin-left: 8px;    font-size: 8px;}
.wchatlat { display: flex;    align-items: center;    width: 300px;    height: 7px;    margin-top: -38px;    padding: 4px 0px 25px 0px;    margin-left: 71px;    gap: 22px;    color: #252525;    font-size: 12px;    flex-direction: row;    flex-wrap: wrap;}
.wchatlat i {   color: #adb1b8;}
.wchatcomm {    /* margin-left: -2px; */}
.wchatpost > div:not(.btinstap-descrip) br{display:none;}
.wchatleave> div {    display: flex;    align-items: center;}
.wchatleave > div span {    padding: 10px 0px 0px 20px;    font-size: 13px;    color: #888;    margin-left: 7px;    background: #f4f7fa;    text-align: left;    height: 25px;    width: 428px;    border-radius: 10px;}
.wchatleave {    height: 60px;    display: flex;    align-items: center;    padding: 0px 30px 20px;    justify-content: space-between;}
.wchatleave div > img {    width: 30px;    height: 30px;    border-radius: 100%;    display: block;}
.wchatfirst {    height: 60px;    padding: 30px 30px 10px;}
.wchatfirst > div span {    padding: 10px 20px 10px 20px;    font-size: 13px;    color: #888;    margin-left: 7px;    background: #f4f7fa;    text-align: left;    width: fit-content;    border-radius: 10px;}
.wchatfirst > div span i {    color: #3fa2f4;    padding: 0px 5px;}
.wchatfirst> div span b { color: 000;}
.wchatfirst> div {    float: left; display: flex;    align-items: center;}
.wchatfirst div > img {    width: 30px;    height: 30px;    border-radius: 100%;    display: block;}
.wchat {    height: 60px;    padding: 0px 30px 20px; }
.wchat > div span {    padding: 10px 20px 10px 20px;    font-size: 13px;    color: #888;    margin-left: 7px;    background: #f4f7fa;    text-align: left;    width: fit-content;    border-radius: 10px;}
.wchat > div span b { color: 000;}
.wchat> div {    float: left; display: flex;    align-items: center;}
.wchat div > img {    width: 30px;    height: 30px;    border-radius: 100%;    display: block;}
.wchatcomm:after, .wchatdate:after {    content: '';    display: block;    height: 3px;    width: 3px;    border-radius: 100%;    position: absolute;    z-index: 0;    background: #adb1b8;    margin: -8px 0px 0px -12px;}
.wchatdate {    color: #888;    /* margin-left: -3px; */}
</style>[/html]

18

[html]<style>

.achievementsl {
    background: url(https://i.imgur.com/mXwNxKf.png);
    border-radius: 30px;
    overflow: hidden;
    width: 700px!important;
    height: 630px;
    border: 1px solid #eff1f1;
    margin: 10px auto;
}

.achievements {
    border: 1px solid #e7e4e4;
    margin: 20px auto;
    font-family: jost;
    width: 90%;
    background: #f8f8f8;
    border-radius: 10px;
    padding: 10px 6px;
    height: 570px;}

.achievements texts {

    color: #000;
    position: absolute;
    display: grid;
 
    z-index: 3;
 
    width: 580px;
    margin-left: 10px;
    border: 1px solid #eff1f1;
    padding: 10px 0px 10px 25px;
    border-radius: 10px;

}

.spoiler {
width: 250px;
    background: #ffffff;
    border: 1px #37373717 solid;
    border-radius: 4px;
}

.spoiler details {
    padding: 0.5em 0;

}
.spoiler details + details {
  border-top: 1px solid #e0e0e0;
}
.spoiler summary {
text-decoration: none;
    text-align: center;
    color: #000;
    text-transform: uppercase;
    box-sizing: border-box;
    letter-spacing: 1px;
    font-weight: 600;
    font-size: 8px;
    font-family: jost;
    background: #f8f8f8;
}

details summary {
  display: block;
}
details summary::-webkit-details-marker {
  display: none;
}
details summary::before {
  content: "⭐ ";
}
details[open] summary::before {
  content: "🖤 ";
}
@keyframes spoiler {
  0%   {max-height: 0;}
  100% {max-height: 10em;}
}
</style>



<div class="achievementsl"><div class="achievements">  <texts><center><table>  <tr> <td>
<div class="spoiler">
  <details>
    <summary>  написать первый пост</summary>
    <div><center><br><img src="https://i.imgur.com/NPuQMDK.png"></center></div>
  </details>   </div><br>

<div class="spoiler">
  <details>
    <summary>  написать 10 постов</summary>
    <div><center><br><img src="https://i.imgur.com/NPuQMDK.png"></center></div>
  </details>   </div></td>
<td>

<div class="spoiler"><center>
  <details>
    <summary>  5 раз ответить на пост в течение суток</summary>
    <div><center><br><img src="https://i.imgur.com/NPuQMDK.png"></center></div>
  </details>   </div><br>
</center><div class="spoiler">
  <details>
    <summary>  написать первый пост</summary>
    <div><center><br><img src="https://i.imgur.com/NPuQMDK.png"></center></div>
  </details></div>

</center></td>
  </tr>
</table>

</texts>

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

19

https://via.placeholder.com/100 https://via.placeholder.com/100

имя, возраст

город • внешность • ориентация • профессия

текст анкеты

20

жду тебя, мой(-я) ...

http://forumavatars.ru/img/avatars/001b/e9/c2/2-1688654348.gif

http://forumavatars.ru/img/avatars/001b/e9/c2/2-1688654348.gif

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

профессия · внешность

информация о персонаже


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


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