пс

Страница: 1

Ответить

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

Поделиться110th Nov 2020 00:50:03

Автор: softie
привяжи меня самыми крепкими тросами
plash:
make america great again
без смс и суецыда
kp:
гадя петрова. 18
получает работу мечты в париже и, оставив позади родной Чикаго, погружается в новую жизнь, в которой её ждут приключения, друзья и, конечно же, любовь!
Сообщений: 135
золотишко: 112413
Уважение: +0
Последний визит:
19th Dec 2020 01:22:20

Цитировать Сообщение 1

Поделиться210th Nov 2020 02:23:03

Автор: softie
привяжи меня самыми крепкими тросами
plash:
make america great again
без смс и суецыда
kp:
гадя петрова. 18
получает работу мечты в париже и, оставив позади родной Чикаго, погружается в новую жизнь, в которой её ждут приключения, друзья и, конечно же, любовь!
Сообщений: 135
золотишко: 112413
Уважение: +0
Последний визит:
19th Dec 2020 01:22:20

Цитировать Сообщение 2

Поделиться310th Nov 2020 02:23:13

Автор: softie
привяжи меня самыми крепкими тросами
plash:
make america great again
без смс и суецыда
kp:
гадя петрова. 18
получает работу мечты в париже и, оставив позади родной Чикаго, погружается в новую жизнь, в которой её ждут приключения, друзья и, конечно же, любовь!
Сообщений: 135
золотишко: 112413
Уважение: +0
Последний визит:
19th Dec 2020 01:22:20

[indent]

Цитировать Сообщение 3

Поделиться410th Nov 2020 02:23:29

Автор: softie
привяжи меня самыми крепкими тросами
plash:
make america great again
без смс и суецыда
kp:
гадя петрова. 18
получает работу мечты в париже и, оставив позади родной Чикаго, погружается в новую жизнь, в которой её ждут приключения, друзья и, конечно же, любовь!
Сообщений: 135
золотишко: 112413
Уважение: +0
Последний визит:
19th Dec 2020 01:22:20

Цитировать Сообщение 4

Поделиться510th Nov 2020 02:23:44

Автор: softie
привяжи меня самыми крепкими тросами
plash:
make america great again
без смс и суецыда
kp:
гадя петрова. 18
получает работу мечты в париже и, оставив позади родной Чикаго, погружается в новую жизнь, в которой её ждут приключения, друзья и, конечно же, любовь!
Сообщений: 135
золотишко: 112413
Уважение: +0
Последний визит:
19th Dec 2020 01:22:20

Цитировать Сообщение 5

Поделиться611th Nov 2020 07:47:01

Автор: softie
привяжи меня самыми крепкими тросами
plash:
make america great again
без смс и суецыда
kp:
гадя петрова. 18
получает работу мечты в париже и, оставив позади родной Чикаго, погружается в новую жизнь, в которой её ждут приключения, друзья и, конечно же, любовь!
Сообщений: 135
золотишко: 112413
Уважение: +0
Последний визит:
19th Dec 2020 01:22:20

Код:

<!--HTML--><link href="https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap" rel="stylesheet">
<style>

#c_back {
    background: linear-gradient(to right, #d7d5ef, #e0c7e5);
    width: 550px;
    height: auto;
    padding: 25px;
    font-size: 10px;
    margin: auto;
    margin-top: 25px;
}

.headercode {
    font-family: 'Great Vibes', cursive;
    text-align: center;
    font-size: 34px;
    margin-top: -15px;
    margin-bottom: -20px;
}

#c_text {
    text-align: center;
    color: #fff;
    background: linear-gradient(to right, #d7d5ef, #e0c7e5);
    text-decoration: none;
    /* text-transform: uppercase;*/
    font-size: 10px;
    letter-spacing: 2px;
    padding-left: 12px;
    margin-left: 2px;
    margin-right: 2px;
    padding-top: 4px;
    padding-right: 12px;
    padding-bottom: 4px;
}
#c_text a {    color: #fff;
}
.c_1 {
background-color:#ffffff;
height:90%;
border:8px solid #c9c9c9;
padding:1px;
}

.c_2 {
height:85%;
border:3px solid #c9c9c9;
padding:20px;
padding-bottom:21px;
text-align: justify;
background: url(https://i.imgur.com/lRtktwF.png) center top no-repeat;
}


details summary {
  display: block;  /* у summary по умолчанию свойство display в значении list-item, потому поддерживается свойство list-style */
  width: 10em;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;  /* блок раскрывается при щелчке по кнопке, а не по всей строке */
  border-bottom: 1px dotted;  /* подводка точками или тире часто используется для элементов, с которыми пользователю предлагается взаимодействовать, можно заменить на text-decoration */
  outline-style: none;  /* удалить обводку при фокусе */
  cursor: pointer;
}
details summary::-webkit-details-marker {  /* нестандартный псевдоэлемент Google Chrome */
  display: none;
}
</style>

<div id="c_back">
<div class="headercode">softclub. nc-17. us</div><br>
<div class="c_1">
 <div class="c_2">
   <center><br><br><br>
   <span id="c_text"><a href="link">f a q</a></span>
   <span id="c_text"><a href="link">занятые внешности</a></span>
   <span id="c_text"><a href="link">шаблон анкеты</a></span>
   </center><br>
    <p><center>я бы поменяла шрифт который прописной в начале, где название нс17 итд, принимаю предложения<br>картинку надо будет поменять в зависимости от диза/фона, чтоб гармонично смотрелась, или придумать какую-то одну чтоб подо все дизы подходила <br>
эта картинка будет во всех темах, либо нахер ее и будет пустой верх как сейчас в шаблоне гостевой<br><br>
фон блока, кнопок, поля с текстом будет регулироваться в зависимости от диза <br>
нужен диз((<br><br>
допустим тут текст гостевой допустим тут текст гостевой допустим тут текст гостевой допустим тут текст гостевой допустим тут текст гостевой допустим тут текст гостевой допустим тут текст гостевой допустим тут текст гостевой допустим тут текст гостевой допустим тут текст гостевой допустим тут текст гостевой допустим тут текст гостевой допустим тут текст гостевой допустим тут текст гостевой допустим тут текст гостевой допустим тут текст гостевой допустим тут текст гостевой допустим тут текст гостевой допустим тут текст гостевой допустим тут текст гостевой допустим тут текст гостевой допустим тут текст гостевой допустим тут текст гостевой допустим тут текст гостевой <br><br>
спойлер можно сделать открытым чтоб сразу было видно, жду комменты!<br><br>как решим со шрифтом доделаю фак под подобный шаблон и шаблон внех
<br><br>

<details close>
    <summary><span id="c_text">придержанные внешности</span></summary><br>
<table><tr><td><div style="padding-right: 10px;
padding-left: 10px;
    font-family: calibri, sans-serif;
    font-size: 9.5px;
    text-align: center;
height: 180px;
    overflow: auto;">

 <div style="font-size:10px;
background-color: #a1cadf;
padding: 2px;">мальчишки<br></div>
<br> <b>bis 21.11</b> <br><br>
chris evans _ // <a href="link">ams</a> <br>
имя фамилия _ // <a href="link">имя фамилия</a> <br>
<br> <b>bis 21.11</b> <br><br>
chris evans _ // <a href="link">ams</a> <br>
имя фамилия _ // <a href="link">имя фамилия</a> <br>
<br> <b>bis 21.11</b> <br><br>
chris evans _ // <a href="link">ams</a> <br>
имя фамилия _ // <a href="link">имя фамилия</a> <br>
</div></td><td>

<div style="padding-right: 10px;
    font-family: calibri, sans-serif;
    font-size: 9.5px;
    text-align: center;
height: 180px;
    overflow: auto;">

<div style="font-size:10px;
background-color: #dfa1b0;
padding: 2px;"> девчонки<br></div>
<br> <b>bis 21.11</b> <br><br>
имя фамилия _ // <a href="link">имя фамилия</a> <br>
имя фамилия _ // <a href="link">имя фамилия</a> <br>
имя фамилия _ // <a href="link">имя фамилия</a> <br>
имя фамилия _ // <a href="link">имя</a> <br>
имя фамилия _ // <a href="link">имя фамилия</a> <br>
имя фамилия _ // <a href="link">имя фамилия</a> <br>
</div></td></tr></table>

</details>

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

Цитировать Сообщение 6

Поделиться711th Nov 2020 17:23:59

Автор: softie
привяжи меня самыми крепкими тросами
plash:
make america great again
без смс и суецыда
kp:
гадя петрова. 18
получает работу мечты в париже и, оставив позади родной Чикаго, погружается в новую жизнь, в которой её ждут приключения, друзья и, конечно же, любовь!
Сообщений: 135
золотишко: 112413
Уважение: +0
Последний визит:
19th Dec 2020 01:22:20

Цитировать Сообщение 7

Поделиться811th Nov 2020 17:25:57

Автор: softie
привяжи меня самыми крепкими тросами
plash:
make america great again
без смс и суецыда
kp:
гадя петрова. 18
получает работу мечты в париже и, оставив позади родной Чикаго, погружается в новую жизнь, в которой её ждут приключения, друзья и, конечно же, любовь!
Сообщений: 135
золотишко: 112413
Уважение: +0
Последний визит:
19th Dec 2020 01:22:20

Код:

<!--HTML-->
<style type="text/css">
/*Подвижка иконки*/
img.a-info{
  margin-top: -3px!important;
  margin-left: 173px!important;
  width:30px;  /*Размер иконки*/
}
/*Подвижка всплывающей подсказки иконки*/
.tipsy.a-info{
  margin-top: -2px!important;
  margin-left:-6px!important;
  font: normal normal 400 11px/16.5px Verdana;
}
/*сдвиг таблицы*/ .my-tabs{
  margin-top: -73px;  /*сдвиг таблицы вверх от положения иконки*/
  margin-left:255px;  /*сдвиг таблицы вправо от положения иконки*/
}
/*Цвет фона и бордюров таблицы*/
.my-tabs>.tab-a,.my-tabs>span{
  background:#F7F6D2!important;
  border-color: #909D7E!important;
}
</style>
<link rel="stylesheet" type="text/css" href="https://forumstatic.ru/files/0013/44/56/73823.css" />
<script img-data="http://sa.uploads.ru/SoT3N.png" src="https://forumstatic.ru/files/0013/44/56/57946.js" forum="16"></script>

Цитировать Сообщение 8

Поделиться911th Nov 2020 17:36:38

Автор: softie
привяжи меня самыми крепкими тросами
plash:
make america great again
без смс и суецыда
kp:
гадя петрова. 18
получает работу мечты в париже и, оставив позади родной Чикаго, погружается в новую жизнь, в которой её ждут приключения, друзья и, конечно же, любовь!
Сообщений: 135
золотишко: 112413
Уважение: +0
Последний визит:
19th Dec 2020 01:22:20

Код:

<!--HTML--><style type="text/css" data-vue-ssr-id="43a1e9b8:0">.description-more{transition:max-height 0.50s ease-in-out;position:relative}.description-more:after{position:absolute;bottom:0;left:0;height:100%;width:100%;content:"";background:linear-gradient(to top, #fff 0%, rgba(255,255,255,0) 20%);pointer-events:none}.swiper-slide{max-height:200px}.blur-content{filter:blur(3px)}.family-info-column{flex:0 1 320px;min-width:380px}.family-details-page .warning{background-color:#f39f86;background-image:linear-gradient(315deg, #f39f86 0%, #f9d976 74%)}.family-details-page .first-row{margin-top:1rem;display:flex;flex-direction:column;text-align:center}.family-details-page .first-row .license{color:#9C9C9C}.family-details-page .first-row .bullet{margin:0 1rem}.family-details-page .first-row .ad{padding:auto 0px auto 20px;text-align:center}.family-details-page .first-row section{flex:1}.family-details-page .circle-icon-40{border-radius:50%/50%;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;margin:2px}.family-details-page .related-grid{text-align:center}.family-details-page .reply-form{box-shadow:0px 2px 6px 0px #999;padding:20px;margin:3rem 0}.family-details-page .reply-form .avatar{margin-right:2rem;flex-shrink:0;border-radius:50%;width:60px;height:60px}.family-details-page .reply-form textarea{border:none;overflow:auto;outline:none;box-shadow:none;resize:none;width:100%}.dark-mode .family-details-page .reply-form{background-color:#fff}.family-details-page .activate-styles{font-size:.8rem;font-weight:600;text-transform:uppercase;margin-right:10px}.family-details-page .multiple-styles-header{margin:0 1rem 1rem 1rem;padding-top:1rem}.section-family-details{flex:1;border-radius:24px;padding:2rem}.section-family-details h1{font-size:2.4rem}.section-family-details .action-buttons{margin-top:2rem;margin-bottom:1rem}.gray-text{color:#707070;font-weight:bold}.gray-text a{color:#707070}.gray-uppercase-text{color:#707070;font-weight:bold;text-transform:uppercase;letter-spacing:0.02rem}.family-stat-list{font-weight:600;color:#707070;text-transform:uppercase;margin-bottom:1rem;list-style:none;padding:0}.family-stat-list li{margin-right:1rem}.font-stats{display:flex;flex-wrap:wrap;justify-content:space-evenly}.font-stat{border-radius:20px;border:2px solid #E6E6E6;text-align:center;flex-basis:40%;margin:.5rem;padding:1.5rem 1rem}.font-stat .stat-label{font-size:1.5rem;font-weight:bold;color:#959595}.dark-mode .font-stat{border:2px solid #333}.section-family-description{min-height:200px}.section-family-description .license{margin-bottom:1rem;text-align:center}.section-family-description .section-family-note{background-color:#fff;flex-grow:1;padding:10px;position:relative}.section-family-description .section-family-note p{word-break:break-work}.section-family-description .section-family-note::before{content:"";position:absolute;width:0;height:0;border-right:30px solid transparent;border-bottom:30px solid #fff;border-left:30px solid transparent;left:120px;top:-20px;transform:translateX(-50%)}.section-family-description .section-family-note .about-header{text-align:center;color:#B3B3B3;text-transform:uppercase;font-size:.875rem;letter-spacing:.05rem;margin-bottom:1rem}.section-family-description .section-family-note .family-description a{font-weight:bold !important}.dark-mode .section-family-description .section-family-note{background-color:#353D4B}.dark-mode .section-family-description .section-family-note::before{border-bottom:30px solid #353D4B}.designer-title{font-size:1.5rem;font-weight:bold}.license-title{font-size:1.2rem;font-weight:bold}.section-family-posters{text-align:center;margin-bottom:2rem}.section-family-posters .poster-active img{width:100%}.section-family-posters .thumbnail-bar{text-align:center;overflow-x:auto;white-space:nowrap}.section-family-posters .thumbnail-dots{margin-top:1rem}.section-family-posters .thumbnail-dots .bullet{height:1rem;width:1rem;background:#6C6C6C}.section-family-posters .poster-thumb{margin:10px 5px 0 5px}.section-family-sharereport{display:flex;justify-content:center;align-items:center;margin:3rem 1rem}.section-family-sharereport>section{margin-bottom:1rem}.comment-container{display:flex;transition:all .3s ease;padding:20px;border-radius:20px}.comment-container:hover{background-color:#E6E6E6}.comment-container:hover .comment-actions{opacity:1}.dark-mode .comment-container:hover{background-color:#353D4B}.comment-container .comment-actions{opacity:0;transition:all .3s ease}.comment-container .comment-figure{flex:0 0 60px;overflow:hidden}.comment-container .avatar{border-radius:50%;width:60px;height:60px}.comment-container .comment-body{flex:1;padding-left:2rem}.comment-container .comment-info{display:flex;justify-content:space-between}.comment-container .comment-text-container{display:flex;justify-content:space-between;flex-direction:column}.comment-container .comment-text{word-wrap:break-word;word-break:break-all}.section-designer-contact{margin:0 0 2rem 0;background:#E6E6E6;border-radius:50px;padding:10px;width:100%}.section-designer-contact .avatar{border-radius:50%;width:100px;height:100px;margin-right:20px}.dark-mode .section-designer-contact{background-color:#202733}@media (min-width: 600px){.family-details-page .first-row{align-items:center}.family-details-page .related-grid>div{display:flex;flex-wrap:wrap;justify-content:space-evenly}.family-details-page .related-grid figure{margin:10px}.family-details-page .related-grid figure>a{border-radius:20px;overflow:hidden;display:block}.family-details-page .related-grid figure img{max-width:100%;height:auto;animation:fadein 2s}.family-details-page .related-grid figure h4{margin:0}.family-details-page .related-grid figure h4 a{display:block;padding:10px;color:#B3B3B3}.family-details-page .multiple-styles-header{padding-top:0}.family-details-page .reply-form{border-radius:30px}.font-stat{flex-basis:20%}.section-family-description{padding:20px;margin-top:3rem}.section-family-description .section-family-note{border-radius:30px;padding:20px 30px;word-break:normal}.section-family-description .section-family-note .about-header{text-align:left}.section-family-description .fdlc{flex-grow:1;display:flex;flex-direction:column}.section-family-description .fdrc{width:300px;margin-left:20px;display:flex;padding:20px;flex-direction:column;background:#fff;border-radius:30px;flex-shrink:0}.dark-mode .section-family-description .fdrc{background-color:#353D4B}.section-family-description .fels{border-radius:30px;flex-grow:1}.section-designer-contact>div{display:flex;align-items:center;flex-grow:1}.section-family-posters .poster-active{min-height:467px;display:inline-block}.section-family-posters .poster-active img{border-radius:33px;box-shadow:0 2px 8px rgba(0,0,0,0.25);transition:filter .3s ease}.section-family-posters .poster-active img:hover{filter:brightness(1.1)}.section-family-posters .thumbnail-bar{white-space:normal}.section-family-posters .poster-thumb{border-radius:10px;overflow:hidden}.comment-container .comment-text-container{flex-direction:row}}.fixed-toolbar2{position:-webkit-sticky;position:sticky;bottom:0px;background:#fff;width:100%;box-shadow:0 -2px 10px 1px rgba(0,0,0,0.41);padding:20px;z-index:1001}.fixed-toolbar2 button,.fixed-toolbar2 .button{margin:5px}.fixed-toolbar2 button:first-of-type{margin-left:auto}
</style>



<div class="section-family-description content-rounded-2 flex-vertical-small-horizontal-large"><section class="fdlc"><div class="section-designer-contact flex-center"><a href="/letteralle-studio" title="Letteralle Studio" class=""><img src="https://img.fontspace.co/gallery/80x80/1/c4ad0ee0ea844320ae7385d9fda04832.jpg" alt="Letteralle Studio avatar" class="v-lazy-image avatar"></a> <div><div><h4 class="gray-uppercase-text no-margin">Designed by</h4> <div class="designer-title"><a href="/letteralle-studio" class="">Letteralle Studio</a></div></div> <div class="ml-auto buffer1-right"><button title="Send a message" class="button contact-button black pad">
                                Contact
                            </button></div></div></div> <section class="section-family-note"><h3 class="about-header">About Heisenberg Font</h3> <div class="family-description" style="display:none;"><p class=""></p> <div class="text-center"><a href="#" class="button rounded" style="display:none;">Read  more</a></div></div></section></section> <div class="fdrc"><div class="license"><div class="flex-center-v  buffer-bottom buffer1-top"><a href="/get/family/1rx98" title="Download font" rel="nofollow" class="button rounded-large rounded-gradient large icon-left"><svg xmlns="http://www.w3.org/2000/svg" height="25" viewBox="0 0 36.275 30.137"><g transform="translate(-1479.473 -952.305)"><path d="M839.732,564.551l6.138,6.138,6.137-6.138" transform="translate(651.744 410.503)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"></path><path d="M843.188,560.232v13.81" transform="translate(654.426 407.151)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"></path><path d="M864.194,575.618a7.672,7.672,0,0,0-4.414-13.948h-1.938a12.275,12.275,0,1,0-21.072,11.2l-.011-.012" transform="translate(647.045 401.108)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"></path></g></svg> Free Download</a></div> <h4 class="gray-uppercase-text no-margin">Licensed as</h4> <div class="license-title text-bold"><a href="https://www.fontspace.com/help#license-2">Freeware, Non-Commercial</a></div></div> <div class="fels"><div class="text-center"><h4 class="gray-uppercase-text buffer1-top text-center">Donations</h4> <form id="" method="post" action="https://www.paypal.com/cgi-bin/webscr"><input type="hidden" name="cmd" value="_donations"> <input type="hidden" name="business" value="annasalamyahya1102@gmailcom"> <input type="hidden" name="item_name" value="Donation to Letteralle Studio from FontSpace"> <input type="hidden" name="item_number" value="Heisenberg"> <input type="hidden" name="currency_code" value="USD"> <input type="hidden" name="bn" value="FontSpace-Donations"> <button type="submit" title="Donate" class="donate-button"><svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 17.172 20.285"><path d="M5.062,41.225c-.157.859-.778,4.862-.962,5.994-.013.081-.045.112-.134.112H.629a.544.544,0,0,1-.541-.622L2.709,30.074a.908.908,0,0,1,.895-.756c6.812,0,7.385-.166,9.125.51,2.688,1.042,2.934,3.556,1.968,6.276-.962,2.8-3.243,4-6.267,4.039-1.941.031-3.109-.313-3.368,1.082Zm10.99-6.437c-.081-.058-.112-.081-.134.058a10.469,10.469,0,0,1-.394,1.5C13.74,41.44,8.792,41,6.377,41a.45.45,0,0,0-.488.42c-1.011,6.28-1.212,7.591-1.212,7.591a.476.476,0,0,0,.474.577h2.84a.8.8,0,0,0,.778-.666c.031-.242-.049.273.644-4.084.206-.984.64-.881,1.311-.881,3.176,0,5.654-1.288,6.392-5.023.291-1.557.206-3.194-1.065-4.142Z" transform="translate(-0.083 -29.3)" fill="#fff"></path></svg>
                                    Donate
                                </button></form></div> <div class="text-center"><h4 class="gray-uppercase-text buffer1-top text-center">Commercial licenses</h4> <div><div class="text-small">There are no commercial license purchase options. Contact the designer.</div></div></div></div></div></div>

Цитировать Сообщение 9

Поделиться1012th Nov 2020 20:20:51

Автор: гостьовь
Гость

hdkd

Цитировать Сообщение 10

Поделиться1113th Nov 2020 00:32:06

Автор: softie
привяжи меня самыми крепкими тросами
plash:
make america great again
без смс и суецыда
kp:
гадя петрова. 18
получает работу мечты в париже и, оставив позади родной Чикаго, погружается в новую жизнь, в которой её ждут приключения, друзья и, конечно же, любовь!
Сообщений: 135
золотишко: 112413
Уважение: +0
Последний визит:
19th Dec 2020 01:22:20

соо

Цитировать Сообщение 11

Поделиться1213th Nov 2020 00:59:01

Автор: softie
привяжи меня самыми крепкими тросами
plash:
make america great again
без смс и суецыда
kp:
гадя петрова. 18
получает работу мечты в париже и, оставив позади родной Чикаго, погружается в новую жизнь, в которой её ждут приключения, друзья и, конечно же, любовь!
Сообщений: 135
золотишко: 112413
Уважение: +0
Последний визит:
19th Dec 2020 01:22:20

Код:

<!--HTML--><link href="https://fonts.googleapis.com/css2?family=Codystar&family=Coming+Soon&family=Lily+Script+One&family=Patrick+Hand+SC&family=Sofia&display=swap" rel="stylesheet">

<style>
  .warpx {
    width: 200px; height: auto; padding: 30px; outline: 1px dashed var(--bxrd); outline-offset: -10px; margin: 0 auto; background: var(--bxck); text-align: center; text-transform: uppercase; font-family: 'Coming Soon'; letter-spacing: 1px; font-size: 13px; font-weight: bold; color: rgba(1,1,1,0.8); position: relative;
    --bxck: rgba(230,230,235,1);
    --accx: rgba(150,150,200,0.5);
    --acc2: rgba(50,50,200,0.5);
    --bxrd: rgba(100,100,150,0.5);
  }
  
  .warpx h1 {
    width: 200px; height: 70px; margin: 0px; margin-bottom: 30px; text-align: center; transform:rotate(-5deg); position: relative; z-index: 2; font-family: 'Patrick Hand SC'; font-weight: normal; font-size: 50px; text-transform: lowercase; letter-spacing: 3px; display: flex; justify-content: center; align-items: center;
  }
  
  .warpx h1::before {
    content:''; position: absolute; top:-10px; left:50px; border-radius: 50px; width: 100px; height: 100px; background: var(--accx); z-index: -1; border: 1px dashed var(--bxrd);
  }
  
  .warpx .bxr {
    width: 150px; height: 10px; border: 1px solid var(--bxrd); border-radius: 10px; margin: 0px auto 5px; background: rgba(250,250,250,0.4);
  }
  
  .warpx .fxll {
    height: 10px; background:linear-gradient(var(--accx),var(--acc2));
  }
  
        #webscred, /* coder's credit */
  #webscred a, #webscred a:link, #webscred a:visited, #webscred a:active{
    color: #bca96b; font-family: 'Montserrat'; font-size: 14px; text-decoration: none;
    position: relative; left: -7px; top: -2px; float: left;
    transition: 0.5s; -o-transition: 0.5s; -moz-transition: 0.5s; -webkit-transition: 0.5s;
  }
      #webscred a:hover {
        color: #333;
      }

</style>

<div class="warpx">
  <h1>theodore</h1>
  serious / childish
  <div class="bxr"><div class="fxll" style="width: 19px;"></div></div>
  weak / strong
    <div class="bxr"><div class="fxll" style="width: 10px;"></div></div>
  timid / confident
  <div class="bxr"><div class="fxll" style="width: 55px;"></div></div>
  naive / wise
    <div class="bxr"><div class="fxll" style="width: 110px;"></div></div>
  coward / brave
  <div class="bxr"><div class="fxll" style="width: 34px;"></div></div>
  pessimist / optimist
  <div class="bxr"><div class="fxll" style="width: 24px;"></div></div>
  apathetic / opinionated
  <div class="bxr"><div class="fxll" style="width: 75px;"></div></div>
  bossy / laid-back
  <div class="bxr"><div class="fxll" style="width: 93px;"></div></div>
  logical / emotional
  <div class="bxr"><div class="fxll" style="width: 47px;"></div></div>
  selfish / selfless
  <div class="bxr"><div class="fxll" style="width: 101px;"></div></div>
  needy / independent
  <div class="bxr"><div class="fxll" style="width: 111px;"></div></div>
  insincere / honest
  <div class="bxr"><div class="fxll" style="width: 65px;"></div></div>
  rebellious / obedient
  <div class="bxr"><div class="fxll" style="width: 129px;"></div></div>
  mean / kind
  <div class="bxr"><div class="fxll" style="width: 108px;"></div></div>
  disloyal / loyal
  <div class="bxr"><div class="fxll" style="width: 93px;"></div></div>
  impatient / patient
  <div class="bxr"><div class="fxll" style="width: 37px;"></div></div>
    <div id="webscred" title="code by jude"><a href="https://shadowplayers.jcink.net/index.php?showuser=5453">★</a></div>
</div>