Общая информация о заказе
Условия и бюджет
✘ Я хочу, чтобы амс Я хочу, чтобы амс проконтролировали заказ через чат в дискорде
✘ Я хочу переводить оплату Я хочу переводить оплату через фонд ForumD.ru
✘ Я хочу работать со специалистом, который соблюдает ВСЕ Я хочу работать со специалистом, который соблюдает ВСЕ условия работы ForumD.ru
бюджет не понимаю даже примерно, так что доверяюсь опыту профессионалов ForumD)
срок - хотелось бы в течение недели/двух
Ссылка на сайт/форум
https://thedome.rusff.me/
Ваши контакты
п.с. кнопка хайда не работает в этом поле... как и все остальные кнопки в форме ответа
Техническое задание
Описание заказа
необходима верстка из хтмл в бб-коды нескольких сообщений и коррекция уже сверстаных.
уже сверстаны @Gerda на МК: https://thedometestt.rusff.me/viewtopic.php?id=21#p172 и https://thedometestt.rusff.me/viewtopic.php?id=21#p173
не смогла победить размер шрифта и выравнивание по центру в некоторых блоках, чуть не свихнулась.
верстка новых сообщений необходима мало того, что в бб-кодах, но и в новом стиле, макеты каждой страницы прилагаю
1) шаблон анкеты
макет - https://imgur.com/moDLBHC
ВАЖНО! стиль спойлера в анкете и команднике будет отличаться от основного, который будет стоять по умолчанию, так что его нужно будет прописать отдельно.
код:
<div class="quenta_box"> <div class="quenta_name">имя фамилия на англ, возраст</div> <div class="quenta_next"> <div class="quenta_face"> <img src="ссылка на гиф 100 на 100"> <img src="ссылка на гиф 100 на 100"> <span>face: имя фамилия прототипа</span> </div> <div class="quenta_mininfo"> <span>имя фамилия на рус [дата рождения]</span> <span>раса, вид [конкретизируем, например "чистокровный оборотень, альфа" или "ведьма, полукровка"], группа - ковен - клан - стая - одиночка</span> <span>ориентация</span> </div> <div class="quenta_reason"> <b>я оказался в городе по этой причине:</b> текст </div> <div class="quenta_profi"> <b>профессия/деятельность:</b> текст </div> <div class="quenta_skill"> <b>навыки/таланты:</b> текст </div> <div class="quenta_quote"> цитата/песня </div> <div class="quenta_history"> текст вашей истории </div> <div class="quenta_bottominfo"> <span><b>готовы ли на квесты:</b> ответ</span> <span><b>планы на игру:</b> ответ</span> <span><b>что с персонажем, если покинете форум:</b> ответ</span> </div> <div class="post_button" id="post_button">пробный пост</div> <div id="postblock" style="display:none"> СЮДА ПИХАЕМ ПРОБНЫЙ ПОСТ </div> </div> </div> <script type="text/javascript" src="https://forumstatic.ru/files/001b/60/aa/87833.js"></script> [img=hide-autor2]https://is.gd/ekiTPp[/img]
стиль
/* стиль хтмл анкеты */ .quenta_box { background: var(--color-white); } .quenta_name { text-align: center; color: var(--color-white); text-transform: uppercase; letter-spacing: 1px; padding: 12px 0px 5px; font-size: 30px; background: var(--html-bg); font-family: var(--font); } .quenta_next { position: relative; padding: 10px 0px 0px; } .quenta_face { position: absolute; right: 5px; top: 43px; width: 218px; display: flex; flex-wrap: wrap; justify-content: space-between; font-size: 9px; } .quenta_face img { width: 100px; object-fit: cover; height: 100px; border: 1px solid var(--color-accent) !important; } .quenta_face span { display: block; flex: 1; width: 100%; text-align: center; margin-top: 5px; letter-spacing: 1px;} .quenta_mininfo { padding: 0px 5px; display: flex; justify-content: space-between; color: var(--color-accent); text-transform: uppercase; } .quenta_mininfo span { width: 310px; background: var(--color-black); text-align: center; min-height: 13px; padding: 5px 7px; overflow-y: auto; font-size: 10px; } .quenta_mininfo span + span { margin-left: 10px; max-height: 16px; overflow-x: auto; } .quenta_reason, .quenta_profi, .quenta_skill { width: 320px; overflow-y: auto; box-sizing: border-box; margin: 10px 0px; text-align: justify; padding: 0px 5px; } .quenta_reason { height: 57px; } .quenta_profi { height: 57px; margin-top: 5px !important; } .quenta_skill { left: 330px; height: 125px; top: 32px; position: absolute; width: 360px; } .quenta_quote { background: var(--color-black); text-align: center; padding: 7px 0px; text-transform: uppercase; letter-spacing: 1px; color: var(--color-accent); margin: 10px 0px !important; } .quenta_history { line-height: 150%; overflow-y: auto; padding: 10px; max-height: 500px; letter-spacing: 1px; } .quenta_bottominfo { display: flex; justify-content: space-between; background: var(--html-bg); padding: 5px 15px; position: relative; top: 30px !important; color: var(--color-white); } .quenta_bottominfo span { padding: 5px 10px; flex: 1; text-align: justify; } .quenta_bottominfo span + span { margin-left: 10px; } .quenta_bottominfo span b { color: var(--color-accent); } #post_button { background: var(--color-black); margin-top: 30px; text-align: center; padding: 7px; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; color: var(--color-white); } .post_button { transition: all .6s ease-in-out 0s; } .post_button.openpost { letter-spacing: 3px !important; filter: brightness(.8) } #postblock { line-height: 150%; background: var(--color-black); padding: 10px 55px; color: var(--color-white); text-align: justify; }
2) шаблон принятия анкеты
макет - https://imgur.com/XSfFkTz
код
<div class="anket-box"> <div class="anket-top">welcome to the dome</div> <div class="anket_bottom_box anket_bottom_box-22"> <div><span><b>Теперь ты в ловушке, Имя!</b> <br></br> Фолл Ривер уже заждался тебя. Тебе следует заполнить все необходимое в теме <a href="https://thedome.rusff.me/viewtopic.php?id=26">лз</a>. Не забудь прислать в лс амс связь с тобой. Посмотри тему <a href="https://thedome.rusff.me/viewtopic.php?id=42">группы</a> на тот случай, если захочешь создать свою. Любой труд должен вознаграждаться, поэтому мы создали <a href="https://thedome.rusff.me/viewtopic.php?id=1528#p237181">банк</a>, на твоем счету появится первый заработок. В <a href="https://thedome.rusff.me/viewtopic.php?id=1433&p=22">этой теме</a> ты можешь найти командную игру, в которую тебя включат автоматически. И очень важно отметиться в теме <a href="https://thedome.rusff.me/viewtopic.php?id=565#p71379">карта</a>.<br><br> Будь осторожен, в городе неспокойно. </span></div> </div> </div>
стиль
/* шаблон принятия */ .anket-box { background: var(--html-bg); padding: 20px; } .anket-top { text-align: center; color: var(--color-white); letter-spacing: 1px; text-transform: uppercase; padding-bottom: 8px; font-size: 30px; font-family: var(--font); } .anket-top img { max-height: 50px; } .anket_bottom_box { width: 460px; height: auto; margin: 0 auto !important; padding: 17px; text-align: justify; opacity: 0.8; background: var(--color-white); } .anket_bottom_box span { } .anket_bottom_box a { color: var(--color-accent-2); font-weight: 600; }
3) шаблон героев
макет - https://imgur.com/cMUr0NN
код
<div id="aphrodite"> <div class="words1"><u>герои</u> наших сердец, октябрь</div> <div class="aphrodite3">do you want to play hide-and-seek?</div> <div class="aphrodite4">лучший пост: сейди</div> <div class="aphrodite-line-active"> <div class="aphrodite39"> <div class="aprimgicons"><img src="https://forumupload.ru/uploads/001b/60/aa/2/837631.jpg" title="активист: сэйди"></div> <div class="aprimgicons"><img src="https://i.imgur.com/QqwzBNn.jpg" title="активист: генри"></div> <div class="aprimgicons"><img src="https://forumupload.ru/uploads/001b/60/aa/2/789074.jpg" title="активист: фрэнк"></div> <div class="aprimgicons"><img src="https://forumupload.ru/uploads/001b/60/aa/455/890350.png" title="активист: рита"></div> </div> </div> <div class="aphrodite-line-posts"> <div class="aphrodite39"> <div class="aprimgicons-post"><img src="https://i.imgur.com/oZzEaLX.jpg" title="киану: 42 поста"></div> <div class="aprimgicons-post"><img src="https://forumupload.ru/uploads/001b/60/aa/278/647741.jpg" title="март: 22 поста"></div> <div class="aprimgicons-post"><img src="https://forumupload.ru/uploads/001b/60/aa/278/980731.jpg" title="шиена: 14 постов"></div> <div class="aprimgicons-post"><img src="https://i.imgur.com/yAc2qc8.jpg" title="сильвер: 10 постов"></div> </div> </div> </div>
стиль
/* шаблон героев */ #aphrodite { outline: 1px solid var(--color-border); border: 2px solid; outline-offset: -20px; width: 550px; height: 460px; background: var(--html-bg); margin: 20px auto; position: relative; } #aphrodite .words1 { padding: 30px; letter-spacing: 1px; text-align: right; text-transform: uppercase; color: var(--color-white); font-size: 30px; font-weight: 600; } #aphrodite u { text-decoration: none; border-bottom: 1px solid var(--color-accent); } .aphrodite-line-active, .aphrodite-line-posts { position: relative; display: flex; justify-content: space-between; width: 450px; margin: 35px auto; } #aphrodite .aprimgicons { outline: 1px solid var(--color-white) !important; outline-offset: 2px; } #aphrodite .aprimgicons-post { outline: 1px solid var(--color-accent) !important; outline-offset: 2px; } #aphrodite .aprimgicons img, #aphrodite .aprimgicons-post img { max-width: 70px; max-height: 70px; display: block; transition: 1s; filter: grayscale(1); } #aphrodite .aprimgicons img:hover { transform: scale(1.2); } #aphrodite .aprimgicons-post img:hover { transform: scale(1.2); } #aphrodite .aphrodite4 { letter-spacing: 2px; color: var(--color-white); padding: 5px 0px; float: right !important; position: absolute; right: 47px; bottom: 7%; font-size: 16px; font-weight: 600; } .aphrodite39 { position: relative; display: flex; justify-content: space-between; width: 450px; } #aphrodite .aphrodite3 { letter-spacing: 2px; color: var(--color-white); font-size: 16px; font-weight: 600; padding: 0 45px; }
4) шаблон банка/командника
макет - https://imgur.com/Mus8AEm
ВАЖНО! стиль спойлера в анкете и команднике будет отличаться от основного, который будет стоять по умолчанию, так что его нужно будет прописать отдельно.
код:
<div id='team'> <div class='team-name'>командник</div> <div class='team-description'><div class='team-description-main'>100$ → 1 балл</div> <span>*</span>вы можете обменять заработанное <b>либо</b> на баллы в команднике, <b>либо</b> на $ в <a href='https://thedome.rusff.me/viewtopic.php?id=1067#p177116'>банке</a><br> нельзя брать и то, и другое за одно выполненное задание. исключение составляют посты, за них вы получаете <b>и</b> $, <b>и</b> баллы<br> конвертировать можно только 1 раз в месяц одной суммой. максимальная сумма конвертации - 1000$</div> ч <table> <tr> <td style="width:50%;vertical-align: top;"> <div class='team-game'> <div class='team-game-block'> <center><span>игровые</span></center><br> <b>пост</b> → 2 балла<br> <div class='team-explain'>*только за текущий месяц</div> <b>участие в квесте</b> → 5 баллов <div class='team-explain'>*можно получить только по окончании квеста</div> <b>использование артефакта</b> → 3 балла <div class='team-explain'>*отыграно в эпизоде</div> </div> </div></td> <td style="width:50%;vertical-align: top;"><div class='team-non-play'><div class='team-game-block'> <center><span>неигровые</span></center><br> <b>10 реклам</b> → 1 балл<br> <b>заявка на нужного</b> → 1 балла<br> <b>собранный пак достижений</b> → 2 балла<br> <b>участие в конкурсах </b> → 1 балл <div class='team-explain'>*паззлы не считаются</div> <div class='team-explain'>*если сделана хотя бы половина заданий</div> <b>отзыв на рпг-топе</b> → 2 балла <div class='team-explain'>*за старые отзывы не учитывается. можно оставить еще один раз. использовать 1 раз в месяц</div> </div> </div></td> </tr> </table> <div class='team-count'>общий счет</div> <table style="margin-bottom: 15px !important;"> <tr> <td style="width:40%;vertical-align: top;"> <div class='team-count-block'> <div class='team-count-name'>домоседы</div> <img src='https://forumstatic.ru/files/001b/e7/0b/84090.png'></br> <span>14</span> </div></td> <td style="width:20%;"></td> <td style="width:40%;vertical-align: top;"><div class='team-count-block'> <div class='team-count-name'>домофоны</div> <img src='https://forumstatic.ru/files/001b/e7/0b/65776.png'><br> <span>17</span> </div></td> </tr> </table> <table style="border-top: 2px solid var(--color-yellow);"><tr> <td style="width:40%;vertical-align: top;"> <div class='team-real-count'><span>0</span></div> </td> <td style="width:20%;"><div class='team-real-count'>текущий счет</div></td> <td style="width:40%;vertical-align: top;"> <div class='team-real-count'><span>10</span></div> </div></td> </tr> </div> </table> </div>
ДОМОСЕДЫ
alex morris
amber morton
aobhinn murphy
ashwynn bones
butch velasquez
carly o`grady
clifford hale
elliot adrian hoagie
frank bishop
helen barton
henrietta bern
jean walsh
jessica carpenter
josefa ana guerrero
keanu edwards
kenneth rasmussen
leeroy richardson
leon inganamore
loreen bern
march
neymar richardson
rita sohlberg
russell tillinghast
saoirse o'leary
sean white
susan grant
taites campbell
takeshi hasashi
thaddeus wrona
tyler cox reedДОМОФОНЫ
aisha miller
alexandra anderson
anna de ville
boone chase
corvin crowley
deirdre o`leary
greta geibel
hestia white
jade luna
james velasquez
jonathan j. weismann
june middle
kado reed
keith hoagie
lorraine foster
madeleine whitly
murphy lynch
michael bishop
miel wagner
nathan dale
noel clarke
prudence devereaux
ren sawazaki
ruth harmon
sadie marshall
sheena white
silver wild
thomas warren
wendel wagner
william russo
стиль:
/* стиль командника */ #team { background: var(--html-bg); } .team-name { text-align: center; color: var(--color-white); letter-spacing: 2px; text-transform: uppercase; padding: 12px 0px 7px; font-size: 35px; font-family: var(--font); } .team-description { text-align: center; letter-spacing: 1px; line-height: 1.5em; background: var(--color-main); padding: 10px; } .team-description-main { height: 30px; color: var(--color-accent-2); padding: 15px; font-size: 23px; font-weight: 600; } .team-description span { color: var(--color-accent-2); font: normal 24px var(--font2); } .team-game, .team-non-play { margin: 5px 20px 10px !important; outline: 1px solid var(--color-border); } .team-game-block { padding: 10px 15px; letter-spacing: 1px; line-height: 1.5em; background: var(--color-white); } .team-game-block span { text-transform: uppercase; padding: 8px 0px; font-weight: bold; font-size: 12px; } .team-explain { font-size: 9px; margin-left: 20px !important; line-height: 1em; } .team-count { text-align: center; color: var(--color-white); text-transform: uppercase; letter-spacing: 1px; font-size: 16px; font-weight: 600; padding: 10px; } .team-count-block { text-align: center; line-height: 1.5em; font-size: 12px; } .team-count-name { text-transform: uppercase; color: var(--color-white); margin-bottom: 10px !important; font-weight: bold; } .team-count-block img { outline: 2px solid var(--color-border); outline-offset: 2px; margin-bottom: 10px !important; } .team-count-block span, .team-real-count span { font-size: 24px; font-weight: 600; color: var(--color-accent); } .team-real-count { text-transform: uppercase; font-size: 16px; font-weight: 600; color: var(--color-white); text-align: center; margin: 15px 0px !important; } .team-count-block img { max-height: 100px; }
Графика и исходники
Я предоставляю выбор исходников дизайнеру.
Все макеты в наличии, все фоны для верстки также готовы и уже лежат в файлах форума на тесте.
Дополнительно
Все готовые макеты не надо нести на форум, они нужны на тесте вот тут: https://thedometestt.rusff.me/
логин/пароль вышлю исполнителю лично)
Также поделюсь логином/паролем для того, чтобы посмотреть закрытые от гостей темы на основном форуме