Верстальщик

— Брендинг. Это создание или редизайн логотипов и создание брендбуков. Тут всё просто. За 25 тысяч рублей вы получите 4 варианта логотипа, а позже, после утверждения одного из них — полный брендбук для его использования. Туда входят: сам логотип, цвета, шрифты, цветовые решения, варианты использования, варианты оформления деловой документации, нанесение на сувенирку и спецодежду, оформление торговых точек и вообще всё, что вашей душе угодно.
Опыт у меня большой, за всё время сделал 69 брендбуков (специально посчитал) и около 300 логотипов, которые до сих пор мелькают в печати и на ТВ. Предпочитаю простые, броские и хорошо читаемые решения. Никаких заимствований из Интернета, упаси боже.
На входе: пожелания заказчика.
На выходе: PDF-файл с брендбуком и приложенные векторные и растровые файлы с логотипами, шрифтами и прочим.

— Дизайн и верстка. Что ж, тут надо поподробнее. Верстаю лет 25, чего уже только не делал: книги, буклеты, почетные грамоты, годовые отчеты банков (в том числе федеральных), детские книги-раскраски, каталоги продукции, фотоальбомы, туристические карты, меню для ресторанов, кучу наружной рекламы — в общем всё, что можно напечатать на бумаге (и не только).
Книги верстаются по всем правилам — отступы, колонтитулы, титульная и концевая страницы, содержание, сноски, примечания и прочее. Могу присвоить библиотечные индексы (УДК, ББК) и даже ISBN. Откройте вторую страницу любой книги — и вы поймете, о чем я.
Чем я НЕ занимаюсь — так это 3D, видео и изготовлением сайтов. Ну не моё это, я буквы люблю. Также не занимаюсь обработкой фото кроме как для верстки — сейчас в интернете желающих полно, и некоторые получше меня делают. Каждый свой хлебушек должен кушоц)).
Работаю в пакете от Adobe: InDesign, Illustrator, Photoshop, Lightroom, Acrobat. Часть заданий делаю в ColelDraw (сувенирка и наружка). Владею всем более чем уверенно.
Тут по ценам сказать сложнее. Всё зависит от объема издания. Согласовывается отдельно после примерной оценки.
На входе: ваши тексты, фотоматериалы, вообще всё что есть.
На выходе: готовые файлы для типографии, включая основной блок, обложку, форзацы, вклейки и всё, что нужно. Полный готовый пакет.

— НОВИНКА. Изготовление книг в мягком переплете. ОТ ОДНОГО ЭКЗЕМПЛЯРА. Формат — А4 (210х297 мм) и меньше. Блок страниц на любой бумаге (офсетная, мелованная) и плотная обложка (хоть и называется мягкая). При заказе тиража от 100 экз. — верстка в подарок).
Мне тут при случае достался хороший комплект — качественный большой цветной принтер и оборудование для склейки. Людям очень нравится получить свою книгу тиражом 10‑15 экземпляров для себя и родственников, а не переться с этим в типографию и выкладывать большие деньги. Книгоиздание — это доступно!))
Стоимость обговаривается отдельно, сильно зависит от тиража и объема. И бумага нонче недёшева…
На входе: макет от вас или сверстанный мной.
На выходе: малый тираж книг, которые не стыдно людям показать.

Сроки. Больная тема для удаленной работы. После понимания объемов и сложности заказа, я согласовываю срок его исполнения с точностью до дня. И сделаю это в срок, даже если инопланетяне высадятся. На связи с 9 до 18 МСК по телефону, почте, контакту, WhatsApp и Telegram (как вам удобнее). Не морожусь, не вру и не пропадаю.

По оплате — я зарегистрирован самозанятым. Работаю как с физическими, так и юридическими лицами. Полный пакет отчетных документов безо всяких проблем. Важный момент. За работу я беру предоплату в 50 %. В случае сложных объемных заказов могу снизить до 30 %.

Поскольку город, в котором я живу, невелик, не хочется сильно светиться. Так что все вопросы задавайте на почту while.true.do@mail.ru. Пока только сюда. После первого удачного сотрудничества скину вам все контакты, явки, адреса, пароли, страницу ВК и фото своих собак и кошек в фас и профиль. Также, если надо, скину образцы своих работ по профилю.

Я реальный человек, ответственный и работоспособный. Надеюсь на сотрудничество.

Datalist

<datalist> - содержит набор опций (<option>), доступных для выбора. Выбранное значение будет установлено для элемента <input>, с атрибутом list.

Не стоит использовать его вместо тега <select>, но можно использовать как вспомогательный тег для <input>. Причина в том что его сложнее обрабатывать через JavaScript.

<form action="">
<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />
<datalist id="ice-cream-flavors">
<option value="Chocolate">
<option value="Coconut">
<option value="Mint">
<option value="Strawberry">
<option value="Vanilla">
</datalist>
</form>

Fieldset

<fieldset> - существует для группировки <input> внутри тега <form>, а также помогает удобно управлять группой полей.

<form action="#">
<h3>Registration form</h3>
<fieldset>
<div>
<label for="name_input">First name:</label>
<input id="name_input" type="text" placeholder="Email">
</div>
<div>
<label for="surname_input">Surname:</label>
<input id="surname_input" type="text" placeholder="Surname">
</div>
</fieldset>
<br>
<fieldset disabled>
<div>
<label for="email_input">Email:</label>
<input id="email_input" type="text" placeholder="Email">
</div>
<div>
<label for="password_input">Password:</label>
<input id="password_input" type="text" placeholder="Password">
</div>
</fieldset>
</form>

У <fieldset> также есть несколько атрибутов, которые помогают управлять сразу всей группой <input>.

name - задает общее имя для группы

disabled - делает группу недоступной для редактирования

form - если <fieldset> лежит вне тега <form> то этот атрибут позволит вам связать их.

<form action="" id="example_form">
<h3>Example form</h3>
<label>
<input type="text" placeholder="Some example input">
</label>
</form>
<fieldset form="example_form">
<div>
<label for="name_2_input">First name:</label>
<input id="name_2_input" type="text" placeholder="Email">
</div>
<div>
<label for="surname_2_input">Surname:</label>
<input id="surname_2_input" type="text" placeholder="Surname">
</div>
</fieldset>

Legend

<legend> - Является заголовком для группы элементов, сгруппированных через <fieldset>

<form action="">
<h3>Another Example Form</h3>
<fieldset>
<legend>User info</legend>
<div>
<label for="name_3_input">First name:</label>
<input id="name_3_input" type="text" placeholder="Email">
</div>
<div>
<label for="surname_3_input">Surname:</label>
<input id="surname_3_input" type="text" placeholder="Surname">
</div>
</fieldset>
<br>
<fieldset disabled>
<legend>User credentials</legend>
<div>
<label for="email_3_input">Email:</label>
<input id="email_3_input" type="text" placeholder="Email">
</div>
<div>
<label for="password_3_input">Password:</label>
<input id="password_3_input" type="text" placeholder="Password">
</div>
</fieldset>

Button

<button> - Парный тег, который предназначен для создания кнопки, имеет схожие атрибуты с тегом <input>. Может использовать как внутри <form> заменяя собой <input type="button">, так и просто как отдельный элемент на странице.

<form action="">
<h3>Another Example Form</h3>
<fieldset>
<legend>User info</legend>
<div>
<label for="name_3_input">First name:</label>
<input id="name_3_input" type="text" placeholder="Email">
</div>
<div>
<label for="surname_3_input">Surname:</label>
<input id="surname_3_input" type="text" placeholder="Surname">
</div>
</fieldset>
<br>
<fieldset disabled>
<legend>User credentials</legend>
<div>
<label for="email_3_input">Email:</label>
<input id="email_3_input" type="text" placeholder="Email">
</div>
<div>
<label for="password_3_input">Password:</label>
<input id="password_3_input" type="text" placeholder="Password">
</div>
</fieldset>
<fieldset>
<legend>Form Controls</legend>
<button type="submit">Submit</button>
<button type="reset">Clear Form</button>
</fieldset>
</form>

Файлы с урока

P.S. Подпишись на мой youtube и telegram канал чтобы регулярно получать новый контент.

Селектор потомков (селекторы разделяются пробелами)

В реальной разработке, зачастую нам приходится использовать вложенные селекторы для того чтобы добраться к внутренним элементам HTML структуры.

Рассмотрим пример - selectors_nesting.html

Задача 1

Нам нужно сделать заголовки каждого article больше чем они есть сейчас, мы конечно можем каждому <h2> внутри article задать отдельный класс и обратится к нем, и это будет даже правильно, но в любом случае в таких ситуациях нам нужно будет обратится к их родителю чтобы было понятно какие именно заголовки и внутри какого блока мы хотим увеличить.

Решение:

main article h2 {
font-size: 28px;
}

В данном случае мы указали комбинацию из 3х селекторов, мы уже знаем как они работают по отдельности, но разделив их пробелом браузер интерпретирует их как один большой селектор. В данном случае браузер будет брать только те теги <h2> которые находятся внутри тега <article> который в свою очередь находится внутри тега с классом .articles.

P.S. Не стоит увлекаться и использовать большие вложенности селекторов, наоборот, старайтесь использовать комбинации не более 2-3х селекторов.

Задача 2

В нашем html файле есть 2 section с классами articles и news, нам необходимо изменить код который мы писали выше, чтобы сделать заголовки статей в блоке .articles размером 32px и цветом deeppink, а в блоке .news размер заголовков должен быть 28px и их цвет blueviolet.

Решение:

Дочерний селектор (селекторы разделяются символом '>' ) Задача 3: У наших секций articles и news также есть заголовки, и нам нужно выделить их отдельным цветом blue и задать им размер шрифта в 50px. Попробуем это сделать.

main .articles h2 {
color: blue;
font-size: 50px;
}
main .news h2 {
color: blue;
font-size: 50px;
}

Дочерний селектор (селекторы разделяются символом '>' )

Задача 3

У наших секций articles и news также есть заголовки, и нам нужно выделить их отдельным цветом blue и задать им размер шрифта в 50px. Попробуем это сделать.

main .articles h2 {
color: blue;
font-size: 50px;
}
main .news h2 {
color: blue;
font-size: 50px;
}

Решение

Перейдя на страницу мы видим что абсолютно все теги <h2> приняли такие стили, хотя мы этого не хотели, в таком случае мы можем задать атрибут класс для нужных нам заголовков и стилизовать или использовать символ '>' когда пишем вложенность.

main .articles > h2 {
color: blue;
font-size: 50px;
}
main .news > h2 {
color: blue;
font-size: 50px;
}

Немного усовершенствуем наше решение

main .articles > h2,
main .news > h2 {
color: blue;
font-size: 50px;
}

Если мы попадаем в ситуацию когда стили наших селекторов одинаковые а селекторы разные, мы можем просто перечислять селекторы через запятую, в таком случае нам не придется дублировать когда CSS свойств, но они будет работать также.

Добираемся к элементу по нескольким селекторам ( селекторы не разделяются )

В таком случае селекторы которые мы используем являются одним целым селектором.

a#link.read-more {
color: blue;
text-decoration: none;
font-size: 20px;
font-weight: bold;
}

Обычно такой способ используется для увеличения веса селектора.

Файлы с урока

1. HTML File

2. CSS File

P.S. Подписывайся на мой youtube и telegram каналы чтобы получать больше контента )