<!--HTML--><div id="spiritworkroom">
<div class="spiritfirst">
<div class="spiritfirstpic"><img src="https://i.imgur.com/5uipK4n.png"></div>
<div class="spiritfirsttitle">от вещего духа
<subtitle>однако, дратути</subtitle></div>
<div class="spiritfirsttext"><subtitle>да, этот мужик смотрит вам в душу хд</subtitle>
<about>шел оформлять тему в графику, но споткнулся о раздел с дизайнами. к такому меня жизнь не готовила. прежде перебивался заказами от знакомых через знакомых, но сейчас решил оформиться, так сказать, официально. дизайнами и вот этим вот всем занимаюсь столько, сколько себя на ролевых помню, в связи с чем по факту могу как минимум в плане кодов исполнить практически любое пожелание. графически тоже не отстаю и в процессе работы стараюсь передать дизайном атмосферу и направленность проекта. это, собственно, всё, что я хотел сказать в приветствии.</about></div>
</div>
<div class="spiritsecond">
<div class="tabs">
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1" title="Вкладка 1">информация</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2" title="Вкладка 2">вопросник</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3" title="Вкладка 3">портфолио</label>
<section id="content-tab1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In efficitur eros eu diam vestibulum, at pretium libero blandit. Duis ut blandit tellus, interdum euismod nisl. Sed mattis erat non dapibus porttitor. Curabitur faucibus dictum ex et eleifend. Sed ultrices ante a sapien bibendum lobortis. Aliquam erat volutpat. Mauris ornare ligula eget felis placerat, a laoreet felis lobortis. Aliquam et elementum lectus. Aliquam suscipit nisl non tortor elementum ullamcorper. Donec tincidunt mollis purus, a condimentum leo.
Nullam sed iaculis lectus, sed euismod arcu. Maecenas scelerisque consequat enim, nec semper nulla laoreet vitae. Curabitur elit elit, ultrices in diam et, aliquam tristique ipsum. Aenean pulvinar fermentum egestas. In hac habitasse platea dictumst. Fusce hendrerit odio et eleifend tempor. Phasellus condimentum scelerisque ultricies. Phasellus pretium, risus vitae pretium volutpat, tellus nunc tristique diam, ut ornare nisi nunc in est. Nullam lacinia, nibh nec lacinia mollis, leo metus luctus leo, sed posuere lorem lorem a arcu. Fusce faucibus dolor a ultrices sagittis. Duis nec fringilla purus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam diam leo, malesuada et nulla sed, auctor ornare odio. Curabitur eu mi leo. Suspendisse mauris nulla, rhoncus et quam nec, feugiat aliquet lorem. In hac habitasse platea dictumst. Sed justo metus, lobortis vel posuere in, cursus non magna. Nam mattis feugiat malesuada.
Cras velit mauris, consequat ullamcorper luctus ut, vehicula quis enim. Fusce vehicula nunc sit amet ligula venenatis sodales. Vivamus ac arcu dui. Cras turpis justo, ullamcorper non tellus vel, facilisis venenatis velit. Aliquam elementum risus ultrices nisi gravida efficitur. Aenean pulvinar tellus convallis varius tincidunt. Cras molestie diam at dui vehicula viverra. Fusce id sapien neque. Suspendisse egestas varius arcu, quis lobortis augue. Ut ultricies semper lacus. Quisque sed commodo augue. Vestibulum leo risus, viverra vitae magna id, volutpat scelerisque felis. Proin aliquam elit et ipsum posuere malesuada.
Maecenas pellentesque eros vitae elementum condimentum. Sed nec orci est. Vestibulum a ex nec nisl euismod varius. Etiam bibendum nibh id tortor vehicula malesuada volutpat ut augue. Integer sodales, leo eget molestie finibus, nibh diam laoreet dui, quis efficitur lectus lacus suscipit mi. Aliquam finibus et lorem congue imperdiet. Curabitur porta dolor sit amet eros semper viverra. Fusce aliquet, ligula quis mattis bibendum, nulla eros vulputate tortor, eget gravida erat tortor eget nulla. In arcu nisl, elementum sed tristique id, elementum eu odio. Duis imperdiet metus ac justo tempus vehicula et a sem. Vestibulum et volutpat libero. Cras vestibulum diam sit amet pulvinar accumsan. Donec sed ultrices libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Aenean sed ex arcu.
</p>
</section>
<section id="content-tab2">
<p>
<b>нам срочно нужен дизайн, срок не больше недели.</b>
я – вечно больной человек, заказы перманентно 2-3 в очереди всегда есть. по этим причинам я априори не успею сделать дизайн быстро (то есть: 2-3 дня это не мой случай). даже если вы мне доплатите сверху за продвижение в очереди – вот ни разу не факт, что на этой неделе у меня не случится кризиса головной боли и я не выпаду из жизни. <s>а то и вовсе в больницу отъеду, и такое бывает</s>
<b>как быстро возьметесь за нас? сколько будете делать по времени?</b>
в виду того, что у меня, я тут заметил, всегда висит 2-3 заказа, которые я параллельно выполняю, то подождать неделю минимум точно придется. дальнейший срок зависит от хитровывернутости дизайна, правок в макете и прочих деталей. обычно неделя или чуть больше.
вот здесь обратите внимание: если вы получили сообщение о сроках и молча пропали – я отдам место следующему, кто напишет и согласится подождать (по закону подлости, это обычно происходит в тот же день, и да – я серьезно хд). бесполезно потом пытаться давить аргументом «мы вам раньше написали». я не экстрасенс, я не читаю мысли: скажите мне придержать место и я буду распределять время согласно этому.
<b>сколько будет стоить?</b>
понятия не имею) покажите мне тз и я скажу, сколько это стоит.
<b>ну, примерно? вот сколько обычно вы берете за дизайн?</b>
даже примерно. обычно я беру исходя из тз. как видите, без него с разговором о цене мы далеко не уедем. на практике меньше 1500-2000 не выходит, ничего более точного я сказать не могу. я могу сказать сколько какой дизайн в портфолио стоил, но это не панацея.
<b>ладно, а можно нам так же круто как <i>там</i>, но за цену вдвое меньше?</b>
нет, это не так работает. вот классная картинка, которая поможет понять схему: <a href="https://i.imgur.com/Ubrao9T.jpg">тык</a>.<br><br>
впрочем, есть дизайны, которые я делаю в стол (редко, но есть) или те, которые оказались не востребованы (заказчик отказался, пропал и так далее) – тогда я продаю дизайны за цену вдвое меньшую себестоимости.
<b>ты возвращаешь предоплату, если мы передумаем?</b>
я почти всегда верну вам деньги, если вы на относительно ранних сроках работы решите отказаться. но, как и у большинства дизайнеров, есть пара случаев, в которых я не возвращаю предоплату:
<it>если вы испарились на срок более двух недель, не оплатив законченную работу.</it>
<it>если вы на последних сроках (готова большая часть дизайна, а то и вовсе он уже стоит на кодах) внезапно отказываетесь от дизайна по независящим от меня причинам. «вы не поняли, что мы хотели» это независящая от меня причина: я всегда показываю заказчику ход работы, всегда, я даю несколько вариантов тех или иных элементов на выбор, и коль вы на этой стадии постеснялись мне сказать, что переделать – простите, это не моя вина.</it>
во всех остальных случаях я верну предоплату. НО: во всех из них я оставляю за собой право перепродать невостребованный дизайн.
<b>мы можем получить псд какой-либо детали или всего дизайна?</b>
детали – да. весь псд не дам. жизнь научила, что люди очень любят перекрасить и выдать за своё, а упрощать им задачу, выдавая исходники, не мой случай) у меня итак частенько коды кусками передирают, мне одного этого уже хватает.
<b>как нам собрать тз?</b>
представить, что хотите видеть. хотя бы примерно. посмотреть другие дизайны, собрать данные. окошко аватара как там, скрипт как тут, наводилки как здесь. желательно – во всех подробностях и обычным языком. как вы это видите – так и пишете, если я что-то не пойму – я уточню у вас; если что-то будет невыполнимо – я скажу вам; если какая-то деталь будет плохо смотреться в общей канве – я предупрежу вас. я умею говорить ртом. отговаривать от плохих решений не стану – в конце концов, не мне с этим дизайном сидеть, но предупредить, что такая-то шапка будет плохой идей – предупрежу; тут, знаете, как в баянистой дизайнерской шутке: «да, мне тоже очень нравится результат. только никому не говорите, что я это сделал». записывайте ВСЁ. ВООБЩЕ ВСЁ. мне не лень читать, это не ограничит мою фантазию, но облегчит задачу и мне, и вам.
и еще раз обратите внимание: если вы под конец работы внезапно поняли, что хотите еще один вариант рамочки для аватаров, бордер под картинки, сменные шапки, гифки, еще пачку иконок для важной закрытой темы или для важной с новым сообщением в ней, короче говоря любой детали, которой в тз изначально не было, итоговая цена будет выше ранее озвученной. я уже несколько раз напоролся на то, что за меньшую цену выполнил большую работу, опять на те же грабли наступать не буду. понимете, дух, конечно, альтруист и от широты души может на халяву что-то клёвенькое сделать, но не настолько – ему тоже хочется кушать.
<b>я все равно не понимаю, как мне собрать тз. что там вообще писать?</b>
можно заполнить анкетку, скачать тут. важно: не кидайте мне заполненную анкету вордовским файлом. если там будут ссылки, я заколебаюсь копировать и в адресную строку браузера вставлять. я лучше получу её сообщением/двумя/тремя в контакте и сохраню себе в важные сообщения.
<b>а можно без предоплаты?</b>
если ваш дизайн стоит в пределах 1500 – можно. во всех остальных случаях предоплата обязательна. половина – с началом работы, половина во время верстки/после верстки. начало работы – это когда я нашел исходники, открыл фотошоп и начал лепить ваш дизайн, показал наработку. тело, фон, рамку, чтобы обсудить цветовую гамму. может быть, там даже рамки не будет: голая наработка с цветовой гаммой.
<b>«а сделайте на ваш вкус, мы вам полностью доверяем».</b>
доступная функция без тз/с минимальным тз: достаточно просто кинуть мне примеры моих дизайнов, которые понравились и «вот что-то такое мы себе хотим». но правки по макету в этом случае минимальны. вот прям совсем. и если мне нравится золотая рамочка, а вы хотели серебряную – придется кушать золотую. вы сами выбрали опцию «тыхудожник, тытаквидишь». опять же, цена при таком раскладе плавающая: я не смогу точно сказать, сколько это будет стоить, пока я это не сделаю. нет тз – нет адекватной цены. как видите, собрать тз вам выгоднее, чем пинать на меня проработку концепта дизайна и всего проекта в графическом ключе.<br><br>
до такого дела, конечно, пока не доходило и обычно я правки делаю без вопросов, но я лучше уточню этот момент. обычно такую роскошь как опцию «на твой вкус» выбирают постоянные заказчики: они <i>уже</i> давали мне тз, когда мы работали в первый раз; я <i>уже</i> знаю, что должно быть, а чего быть не должно. и даже в этом случае они обязательно скажут, если что-то изменилось или хотят что-то добавить.
<b>ты хам/злой/зажрался.</b>
было бы круто, но нет. все это написано здесь, потому что я сейчас осознал, как дела обстоят плохо и что без этого дополнения – все будет печально и дальше. нет, не все заказчики плохие, точнее вообще ни один (бог миловал), но оказии случаются. поэтому я решил, что разумнее будет написать вот это вот всё, чтобы прояснить лишний раз какие-то моменты лично.
</p>
</section>
<section id="content-tab3">
<p>
Здесь размещаете любое содержание....
</p>
</section>
</div>
</div>
</div>
<div class="clearer"></div>
<style>
#spiritworkroom {width: 610px;
height: 520px;
background: #fefefe;
margin:auto;
box-shadow: 0 0 0 1px rgba(0,0,0,.2)}
.spiritfirst {float: left;
margin: 10px;
width: 190px;
height: 490px;
box-shadow: 0 0 0 1px rgba(0,0,0,.2);
overflow: hidden;
position: relative;
border: 5px solid #fefefe}
.spiritfirstpic {margin:auto;
width: 190px;
height: 490px;}
.spiritfirsttitle {font-family: playfair display;
font-weight: 900;
width: 190px;
color: #dfdfdf;
text-shadow: 1px 1px 0px #000;
font-size: 18px;
height: 73px;
margin: -80px 0 0 0px;
z-index: 10;
position: relative;
padding-left: 10px;
background: rgba(0,0,0,.65);
transition: all .7s cubic-bezier(0.25, 0.1, 0.25, 1) .15s}
.spiritfirsttitle subtitle {box-shadow: 0 -2px 0 0 rgba(255,255,255,.1);
font-family: pt sans;
font-weight: normal;
color: #cecece;
text-shadow: 1px 1px 0px #333;
font-size: 9px;
display: block;
text-align: right;
letter-spacing: 1px;
margin-top:4px;
margin-right: 20px}
.spiritfirsttitle:before {background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.65));
content: "";
display: block;
position: absolute;
width: 100%;
height: 50px;
top: -50px;
margin-left: -10px}
.spiritfirsttext {
z-index:8;
position: relative;
background: rgba(0,0,0,.65);
width: 190px;
margin: 0px 0 0 0px;
font-family: pt sans;
font-size: 10px;
text-align: justify;
padding: 1px 0px;
color: #efefef;}
.spiritfirsttext about {margin: 10px 15px;
display: block;
box-shadow: 0 -2px 0 0 rgba(255,255,255,.1);
padding-top:10px}
.spiritfirsttext:after {background:linear-gradient(to bottom, rgba(0,0,0,.65), rgba(0,0,0,0));
content: "";
display: block;
position: absolute;
width: 100%;
height: 100px;
bottom: -100px;
margin-left: 0px}
.spiritfirsttext subtitle {
text-align: center;
display: block;
width: 190px;
font-size: 9px;
font-family: pt sans;
color: #999;
opacity: 0;
transform: translate(0,400px);
transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) .15s
}
.spiritfirst:hover .spiritfirsttitle {margin-top: -530px;
}
.spiritfirst:hover subtitle {opacity:1;
transform: translate(0,0px)}
.spiritsecond {background: #fefefe;
width: 389px;
margin: 10px;
height: 500px;
margin-top:9px;
border: 1px solid rgba(0,0,0,.2);
position: absolute;
margin-left: 211px
}
/* Базовый контейнер табов */
.tabs {
padding: 0px;
margin: 0 auto;
}
/* Стили секций с содержанием */
.tabs>section {
display: none;
padding: 10px;
height: 440px;
overflow-y: auto;
margin: 5px;
font-family: arial;
font-size: 11px;
text-align: justify
}
.tabs>section>p {
margin: 0 0 5px;
line-height: 1.5;
color: #383838;
/* прикрутим анимацию */
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
/* Описываем анимацию свойства opacity */
@keyframes fadeIn {
from {
transform: translate(-400px,0);
transform-origin: 50% 0%;
}
to {
transform: translate(0px,0);
}
}
/* Прячем чекбоксы */
.tabs>input {
display: none;
position: absolute;
}
/* Стили переключателей вкладок (табов) */
.tabs>label:first-of-type {box-shadow: none}
.tabs>label {
display: inline-grid;
margin: 0 -3px 0px;
padding: 10px 0px;
font-weight: 600;
text-align: center;
color: #aaa;
background: #fefefe;
width: 131px;
border: solid rgba(0,0,0,.2);
border-width: 0px 0px 1px 0px;
left: 3px;
top: 0px;
position: relative;
font-family: pt sans;
font-size: 8px;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: lighter;
box-shadow: 1px 0 0 0 rgba(0,0,0,.2) inset
}
.tabs>label:after {content: "";
display: block;
position:absolute;
width: 123px;
height: 3px;
background: #dfdfdf;
left:3px;
bottom:3px;
transform: scaleX(0);
transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s}
/* Изменения стиля переключателей вкладок при наведении */
.tabs>label:hover:after {transform: scaleX(1);
background: #888;}
.tabs>label:hover {
color: #888;
cursor: pointer;
transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s
}
/* Стили для активной вкладки */
.tabs>input:checked+label {
color: #555;
background: #f1f1f1;
}
.tabs>input:checked+label:after {content: "";
display: block;
position:absolute;
width: 123px;
height: 3px;
background: #888;
left:3px;
bottom:3px;
transform: scaleX(1);
transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s}
/* Активация секций с помощью псевдокласса :checked */
#tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab3:checked~#content-tab3 {
display: block;
}
</style>
