Дан текст
Песенка про елочку В лесу родилась ёлочка, В лесу она росла. Зимой и летом стройная, Зелёная была. Метель ей пела песенку: - «Спи, ёлочка, бай-бай!» Мороз снежком укутывал: - «Смотри, не замерзай!» Теперь я умею Использовать заголовочные теги h1, h2 etc. Выделять цвет жирным шрифтом через strong Выделять цвет наклонным шрифтом через em Использовать разрывы строк br и абзацы p
сверстать его как на картинке [добавил чуток уточнений чтобы было проще]
Найти текст с тремя абзацами. И сверстать следующим образом.
как-то так (в принципе, чем трешовее тем лучше =)
Заменить стили на классы, чтобы проще было разбираться со следующим заданием
добавить реакцию на наведение мышки, по вкусу
Сверстать как на картинке
Сверстать вот так
если вдруг, то тут три строчки и у каждой колонки в строчке фиксированная ширина и высота, то есть flex-grow колонкам не ставим.
Используя bootstrap, cверстать как на картинке
либо, если чувствуете себя уверенее, сверстать блоки чтобы получилась пиксельная иконка
Сверстать шестое задание используетя классы бутстрапа
Сверстать максимально приближено карточку какого-нибудь персонажа, например
Тут главное не запутаться в структуре организации флексов: какой горизонтальный, какой вертикальный. Слева схема вложености конейтнеров.
ДОПОЛНИТЕЛЬНОЕ,
Задача, собственно, доверстать шаблон до конца. В видосе я начинаю верстать шаблон. Можете найти какой-нибудь свой шаблон. Я рассматриваю на следующем примере FigmaEx.fig
Чтобы открыть шаблон в Figma, надо на странице проектов https://www.figma.com/files/recent тыкнуть сюда и выбрать файл
либо просто перетянуть его в окно бразуера.
Дополнительное
Реализовать адапитвность для вашего шаблона из 10-го задания
Создаем где-нибудь папку, в которой будем хранить работы
Теперь запускаем Visual Studio Code, тыкаем Open Folder…
и выбираем папку
если спросят доверяете ли вы папке, смело тыкайте да
откроется что-то такое
создадим html файлик и назовем его test01.html
по сути мы создали просто текстовый файл, пока пустой. Можно открыть папку в проводнике и увидеть что и там этот файл появился:
в общем попробуем теперь запустить его в браузере
Мне не очень нравится работать в темной теме особенно в солнечное время, поэтому я переключу тему. В visual studio code это сделать очень просто, тыкаете на шестерёнку внизу
сверху откроется выпадающее меню и выбираете тему которая вам нравится:
Попробуем теперь чего-нибудь пописать, откроем файлик
Листопад
прямо в файлике
нажать Ctrl+S чтобы сохранить файл и перегрузить страничку в браузере
видим
можно предложение написать
Осенний листопад
можно в две строки
Осенний
листопад
ой, что-то не так. Мы ж в две строки написали, а вывелось в одну. Как так?
Дело в том, что html, а если быть точнее – браузер, переносы строк игнорирует. И если хочется сделать перенос строки, надо об этом явно ему сказать, делается это так:
Осенний<br>
листопад
так как писать треугольные скобочки лениво можно писать используя встроенный в visual studio code плагин emmet. Просто пишете то что внутри скобочек и тыкаете ENTER либо TAB.
теперь все четко
Так как постоянно тыкать на обновить не очень весело, имеет смысл поставить специальный плагин который будет автоматом делать это за нас каждый раз как мы будем сохранять файл. Называется плагин Live Server. Идем в плагины:
ждем пока установится
и возвращаемся обратно в раздел проекта, где будут видны все файлы в нашей папке:
теперь чтобы активировать возможности плагина, надо в проводнике тыкнуть правой кнопкой на файл и выбрать:
в браузере по умолчанию откроется ссылка примерно такая http://127.0.0.1:5500/test01.html
если надо открыть в другом браузере можно просто скопировать эту ссылку туда.
Еще, в студии справа внизу выскочит сообщение:
дело в том, что у нас не совсем валидный код, по идее все что мы пишем должно писаться внутри базовой разметки html. А у нас нет никакой базовой разметки пока.
Но это не страшно. Добавить ее очень легко. Пишем восклицательный знак и тыкаем TAB. Затем все, что мы уже написали вставляем между <body> и </body> вот так
и теперь проверяем авто перезагрузку. На всякий еще раз кликнем на имя файла правой кнопкой и выберем пункт меню Open with Live Server. Ну и в барузере, где была открыта ссылка http://127.0.0.1:5500/test01.html, тоже на всякий случай перегружаем
Проверяем как работает:
то есть я просто нажал сохранить в visual studio code и оно само обновило бразуер! Красота! =)
Кстати, помимо переносов строк, html игнорирует больше одного пробела, то есть можно сделать
Осенний<br>
листопад в сентябре
это все равно нарисуется так
в случаях, когда вот очень-очень хочется больше одного пробела используют специальные конструкции, начинающиеся с амперсанда &
Осенний<br>
листопад в сентябре
– это явное указание на “вставить пробел” (No-Break Space), тут я целых 4 вставил
но в природе так делать не рекомендуется, и вообще людей которые так делают не очень любят… но иногда пригождается =)
Вообще, есть другие способы добавить пространства, но о них позже.
Вот так штучка которая выглядит как <br> называется тегом. Большинство тегов парные.
То есть, есть открывающий тег, содержимое тега и закрывающий тег. Например, я могу явно выделить какую-то часть текста жирным шрифтом:
Осенний<br>
листопад <strong>в сентябре</strong>
стало быть
<strong> – открывающий тег</strong> – закрывающий тег, выглядит как открывающий только с прямым слэшем перед названиемникто не запрещает вставлять теги внутри других тегов. То есть я, например, могу весь текст выделить жирным текстом и причем оставить внутри перенос на новую строку
<strong>Осенний<br>
листопад в сентябре</strong>
намного красивее писать так:
<strong>
Осенний<br>
листопад в сентябре
</strong>
получим такое:
В общем существует джентельменский набор тегов для оформления кода, которые вроде как каждый должен знать.
Но на деле используются они только когда нет времени заморачиваться со стилями. Плюс иногда для семантической верстки. Собственно, вот они:
<h1>Заголовок первого уровня</h1>
<h2>Второго уровня</h2>
<h3>Третьего</h3>
<h4>4-го</h4>
<h5>5-го (помоему никто такие не используют)</h5>
<h6>пффф, шестой...</h6>
попробуйте сами пописать теги, типа набираешь h1, и тыкаешь TAB, и внутри чего-нибудь пишешь
он такой комбинированный тег. Там есть открывающий тег ol (от англ. ordered list), внутри которого пишутся вложенные li теги (от англ. list item)
<ol>
<li>Первый пункт меню</li>
<li>Второй пункт меню</li>
<li>Третий пункт меню</li>
</ol>
он сам циферки добавляет:
тоже что и выше только без циферок, и тег называется ul (unordered list)
<ul>
<li>Не могу понять какой я пункт меню, может второй?</li>
<li>А я наверное четвертый</li>
<li>Ну я то точно первый</li>
</ul>
рисует точечки вместо циферок
<strong>Я просто сидел на самоизоляции</strong>
<br>
<em>Помогите, падаю ООО</em>
<br>
<u>Иду по рельсам</u>
<br>
<strike>Я передумал тут чего-то писать</strike>
обрати внимание, что тут я вставляю br теги чтобы у меня каждый элемент был с новой строки.
Кстати часто вместо br используют тег p.
Если br – это разрыв строки, то p – это начало нового абзаца
<strong>Я просто сидел на самоизоляции</strong>
<p>
<em>Помогите, падаю ООО</em>
<p>
<u>Иду по рельсам</u>
<p>
<strike>Я передумал тут чего-то писать</strike>
у абзаца сильнее отступы сверху и сниху
И так, собственно база для того что бы что-то можно было писать уже есть. Теперь попробуйте сделать задание.
Начнем со следующего кода
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
Варкалось. Хливкие шорьки<br>
Пырялись по наве,<br>
И хрюкотали зелюки,<br>
Как мюмзики в мове.<br>
</body>
</html>
дальше буду писать только то что находится в body.
И так современный html код примерно на 95% состоит из комбинаций тега div, который мы почему-то пока ни разу не упомянули.
Этот тег в отличие от тех что мы рассматривали в предыдущем задании, никак на оформление не влияет, и именно поэтому является идеальным кандидатом в качестве некоторой оболочки для контента.
Попробуем обернуть код в тег div
<div>
Варкалось. Хливкие шорьки<br>
Пырялись по наве,<br>
И хрюкотали зелюки,<br>
Как мюмзики в мове.<br>
</div>
выглядит все один в один
Зачем же он собственно нужен? А для того чтобы указывать стили для каждого блока.
Например, вот хочу я чтобы текст был выровнен по центру. Как мне это сделать?
Тут нам пригодятся так называемые атрибуты. Добавим атрибут для указания стиля
и пропишем в нем стиль который укажет что мы хотим выравнивать текст по центру (стиль text-align)
проверяем
мы можем указать несколько стилей, например, я могу указать чтобы весь текст был толстым (стиль font-weight):
то есть в целом, любой стиль имеет вид:
название: значение;
соответственно, если несколько стилей, то пишем
название1: значение1; название2: значение2; ...
по сути div тег является таким обобщенным тегом который позволяет более тонко настраивать отображение текста.
Я могу использовать сколько угодно тегов div
<div style="text-align: center; font-weight: bold;">
Варкалось. Хливкие шорьки
</div>
<div style="text-align: right; text-decoration: underline;">
Пырялись по наве,
</div>
<div style="text-align: left; text-decoration: line-through;">
И хрюкотали зелюки,
</div>
<div style="text-align: center; font-style: italic;">
Как мюмзики в мове.
</div>
плюс нет необходимости использовать тег переноса на новую строку, так как div по умолчанию занимает все строку и не позволяет другим divам находится на той же строке
Вообще надо понять принцип поведения блока div.
Он занимает все расстояние от левого до правого края и расширяется в высоту в зависимости от содержимого.
Добавим границу к нашему блоку. Для этого есть стиль border
<div style="text-align: center; border: 1px solid black;">
Варкалось. Хливкие шорьки
</div>
получится так
формат стиля border такой:
а если запихать текст побольше, он начнет расширять область в высоту
<div style="text-align: center; border: 1px solid black;">
Однажды весною, в час небывало жаркого заката, в Москве,
на Патриарших прудах, появились два гражданина.
Первый из них, одетый в летнюю серенькую пару,
был маленького роста, упитан, лыс, свою приличную шляпу
пирожком нес в руке, а на хорошо выбритом лице его помещались
сверхъестественных размеров очки в черной роговой оправе.
Второй – плечистый, рыжеватый, вихрастый молодой человек в
заломленной на затылок клетчатой кепке – был в ковбойке,
жеваных белых брюках и в черных тапочках.
</div>
<div style="text-align: right; text-decoration: underline;">
Пырялись по наве,
</div>
<div style="text-align: left; text-decoration: line-through;">
И хрюкотали зелюки,
</div>
<div style="text-align: center; font-style: italic;">
Как мюмзики в мове.
</div>
кстати еще один интересный момент, несмотря на переносы в тексте, в html они игнорируются, но тем не менее браузер автоматически делает переносы текста и расширяет область, чтобы текст влезал на страницу.
Еще один очень важный стиль, который очень часто используется в природе это padding (отступ). Грубо говоря это расстояние от текста до границы блока. Задавать его можно тремя разными способами:
<div style="text-align: center; padding: 8px 16px; border: 1px solid black;">
Однажды весною, в час небывало жаркого заката, в Москве,
на Патриарших прудах, появились два гражданина.
Первый из них, одетый в летнюю серенькую пару,
был маленького роста, упитан, лыс, свою приличную шляпу
пирожком нес в руке, а на хорошо выбритом лице его помещались
сверхъестественных размеров очки в черной роговой оправе.
Второй – плечистый, рыжеватый, вихрастый молодой человек в
заломленной на затылок клетчатой кепке – был в ковбойке,
жеваных белых брюках и в черных тапочках.
</div>
Тоже регулярно используется. Допусти добавлю я все div-ам рамки:
<div style="text-align: center; padding: 8px 16px; border: 1px solid black;">
<!-- это комментарий, его копировать не надо, я его сюда вставил чтобы весь текст не копировать ... -->
</div>
<div style="text-align: right; border: 1px solid black; text-decoration: underline;">
Пырялись по наве,
</div>
<div style="text-align: left; border: 1px solid black; text-decoration: line-through;">
И хрюкотали зелюки,
</div>
<div style="text-align: center; border: 1px solid black; font-style: italic;">
Как мюмзики в мове.
</div>
выглядит это все слеплено:
так вот, внешние границы позволяют убрать эту склееность. Формат тот же что и у padding
добавляем:
<div style="margin: 8px 0; text-align: center; padding: 8px 16px; border: 1px solid black;">
<!-- ... -->
</div>
<div style="margin: 8px 0; text-align: right; border: 1px solid black; text-decoration: underline;">
Пырялись по наве,
</div>
<div style="margin: 8px 0; text-align: left; border: 1px solid black; text-decoration: line-through;">
И хрюкотали зелюки,
</div>
<div style="margin: 8px 0; text-align: center; border: 1px solid black; font-style: italic;">
Как мюмзики в мове.
</div>
вот теперь красота:
Часто хочется как-то выделить или раскрасить блок. Для этого используется стиль background. У него очень много всяких форм, но мы рассмотрим две, для заливки одним цветом или для заливки градиентом
<div style="background: #a6ff00; text-align: center; margin: 8px 0; padding: 8px 16px; border: 1px solid black;">
<!-- ... -->
</div>
чтобы подкорректировать цвет просто наведи мышку на цвет и немного подожди:
получится как-то так:
градиент делается вот так
<div style="background: linear-gradient(90deg, #00aeff, #ffa6f3); text-align: right; margin: 8px 0; border: 1px solid black; text-decoration: underline;">
Пырялись по наве,
</div>
а выглядит вот так:
Иногда очень хочется ограничить размеры блока. Тут на помощь приходит свойство width, формат простой:
<div style="width: 300px; background: #a6ff00; text-align: center; margin: 8px 0; padding: 8px 16px; border: 1px solid black;">
<!-- ... -->
</div>
причем указывать размер не обязательно в px, можно указать в процентах, например, 50%:
<div style="width: 50%; background: #a6ff00; text-align: center; margin: 8px 0; padding: 8px 16px; border: 1px solid black;">
<!-- ... -->
</div>
правда он все равно займет не 50 процентов. На деле окажется что 50% будет занимать только сам текст, а плюсом будет еще идти всякие padding и margin и даже ширина границы
чтобы такое поведение подправить надо добавить свойство box-sizing: border-box;, вот так:
<div style="box-sizing: border-box; width: 50%; background: #a6ff00 ; text-align: center; margin: 8px 0; padding: 8px 16px; border: 1px solid black;">
<!-- ... -->
</div>
вот тогда все будет четко
Вообще, не пугайся что мы так много пишем в этот несчастный атрибут style, в следующем задании мы научимся делать классы, и писать станет сильно комфортнее.
Помимо управления видом самих блоков, можно также управлять видом отдельных частей текста.
Для этого используется тег span. Он также используется в качестве обертки текста.
А главное отличие от div заключается в том, что он не добавляет переносы на новую строку.
То есть я могу выделить отдельное слово и, например, изменить фон текста:
<div style="...">
Однажды весною, в час небывало жаркого заката, в <span style="background: red;">Москве</span>,
на Патриарших прудах, появились два гражданина.
Первый из них, одетый в летнюю серенькую пару,
был маленького роста, упитан, лыс, свою приличную шляпу
пирожком нес в руке, а на хорошо выбритом лице его помещались
сверхъестественных размеров очки в черной роговой оправе.
Второй – плечистый, рыжеватый, вихрастый молодой человек в
заломленной на затылок клетчатой кепке – был в ковбойке,
жеваных белых брюках и в черных тапочках.
</div>
будет выглядеть вот так:
могу padding добавить:
<div style="width: 50%; box-sizing: border-box; background: #a6ff00 ; text-align: center; margin: 8px 0; padding: 8px 16px; border: 1px solid black;">
Однажды весною, в час небывало жаркого заката, в <span style="padding: 8px; background: red;">Москве</span>,
<!-- ... -->
</div>
странно выглядит, правда:
дело в том, что span пытается не нарушать межстрочных интервалов и вообще стандартной логики поведения текста.
Но часто хочется прямо вот сильно выделить слово. Для этого добавляется специальный стиль display: inline-block;, вот так:
<div style="width: 50%; box-sizing: border-box; background: #a6ff00 ; text-align: center; margin: 8px 0; padding: 8px 16px; border: 1px solid black;">
Однажды весною, в час небывало жаркого заката, в <span style="display: inline-block; padding: 8px; background: red;">Москве</span>,
<!-- ... -->
</div>
тогда оно выглядит нормально
вот такие дела =)
Ну думаю хватит пока, можно теперь и задание поделать
И так вот намучились мы с этими стилями. Особенно муторно было, наверное, прописывать подсветку прилагательных.
А теперь представь, что тебе приходят и говорят, что прилагательные все должны выделятся серо-буро-малиновым и чтобы с каемочкой.
И вот ты идешь в документ и правишь каждый span. Хотя конечно можно воспользоваться заменой, но что делать если ты не только прилагательные желтым выделяла, а еще и чуваков всяких, в этом случае придется все равно вручную проверять.
Чтобы не сталкиваться с такой проблемой, были придуманы классы.
Класс – это именованный набор атрибутов. Который можно привязать к тегу через атрибут class.
Буду использовать такой файлик, а ты стало быть используй свой
<div style="background:#cceb92 ;text-align: center;font-weight: bold; padding: 8px 16px ;border: 2px solid rgb(230, 139, 21)"">
Однажды весною, в час небывало <span style="background: yellow;">жаркого </span> заката, в <span style="display: inline-block; padding: 8px; background: red;">Москве,</span>
на Патриарших прудах, появились два гражданина.
Первый из них, одетый в <span style="background: yellow;">летнюю серенькую </span> пару,
был <span style="background: yellow;">маленького</span> роста, упитан, лыс, свою <span style="background: yellow;">приличную</span> шляпу
пирожком нес в руке, а на хорошо выбритом лице его помещались
<span style="background: yellow;">сверхъестественных</span> размеров очки в <span style="background: yellow;">черной роговой</span> оправе.
Второй – <span style="background: yellow;">плечистый, рыжеватый, вихрастый молодой</span> человек в
<span style="background: yellow;">заломленной на затылок клетчатой</span> кепке – был в ковбойке,
<span style="background: yellow;"> жеваных белых</span> брюках и в <span style="background: yellow;">черных</span> тапочках.
</div>
<br>
<div style="text-align: right; width: 500px; background:linear-gradient(90deg, #9bd8f5, #e97f84 ); padding: 8px 16px; border: 4px solid rgb(17, 0, 255);">
Первый был не кто иной , как <span style="display:inline-block; padding: 6px; background: linear-gradient(80deg, yellow , red); ">Михаил Александрович Берлиоз</span>,
председательно правления одной из <span style="background: yellow;">курпнейших московских литературных</span> ассоциаций, сокращенно именуемой МАССОЛИТ, и редактор <span style="background: yellow;">толстого художественного</span>
журнала, а <span style="background: yellow;"> молодой спутник его поэт </span>
<span style="display: inline-block; padding: 8px; background: wheat;"> Иван Николаевич Понырев </span>, пишущий под
псевдонимом <span style="display: inline-block; padding: 5px; background: yellow;">Бездомный</span>
</div>
<br>
<div style="text-align: left; width: 50%; background: linear-gradient(50deg, white, red); padding: 8px 16px; border: 10px solid green;">
Попав в тень чуть <span style="background: yellow; border: 1px solid black;">зеленеющих</span> лип, писатели
первым долгом бросились к <span style="background: yellow;">пестро раскрашенной </span>
будочке с надписью "Пиво и воды"
</div>
все прилагательные выделены у нас следующим образом, у всех (почти) одинаковый атрибут style
<span style="background: yellow;">пестро раскрашенной </span>
чтобы добавить класс, надо вставить в разметку кода специальный парный тег <style>, например, прям после всех дивов
<div style="background:#cceb92 ;text-align: center;font-weight: bold; padding: 8px 16px ;border: 2px solid rgb(230, 139, 21)"">
<!-- ... -->
будочке с надписью "Пиво и воды"
</div>
<style>
/* коментарии внутри style пишутся вот так */
/* щас мы тут класс создадим */
</style>
добавляем внутрь style класс. Имя класса внутри стайл тега, надо писать с точечки, вот так
<style>
.adjective {
}
</style>
внутри фигурных скобок мы будем собственно перечислять стили, у нас один стиль, его и добавил
<style>
.adjective {
background: yellow;
}
</style>
теперь у всех прилагательных уберем атрибут style и добавил атрибут class, то есть
<span style="background: yellow;">пестро раскрашенной </span>
заменяем на
<span class="adjective">пестро раскрашенной </span>
обрати внимание что в атрибут мы пишем название без точечки.
Дальше делаем так со всеми прилагательными. Так как они выглядит одинаково мы можем воспользоваться мультикурсором и заменить все сразу.
Для этого выделяем один style со стилем, вот так
а затем начинаем тыкать Ctrl+D пока не будут выделены все элементы с таким же содержимым:
и пишем сразу во всех местах
визуально ничего не должно поменяться
просто теперь все прилагательные привязаны к классу adjective.
Самое классное что теперь мы можем поменять у них всех цвет изменив всего одну строчку, вот так:
<style>
.adjective {
background: yellowgreen;
}
</style>
можем рамочку добавить
.adjective {
background: yellowgreen;
border: 2px dashed black;
}
добавим несколько прикольных стилей:
.adjective {
background: yellowgreen;
border: 2px dashed black;
display: inline-block; /* это мы уже знаем, просто чтобы прилагательные были как блоки */
margin: 2px; /* отступы со всех сторон */
padding: 0 4px; /* отступы внутри границы */
border-radius: 8px; /* закруглим границы */
box-shadow: 0 0 8px grey; /* добавим тень, 0 0 это ее сдвиг относительно блока, 8px радиус тени ну и цает */
}
выглядит уже интереснее:
кстати у нас там есть одно прилагательное с границей, которому мы забыли добавить класс, из-за этого оно выбивается из общего стиля
на самом деле мы можем подцепить его к классу, и тем не менее оставить стиль. То есть добавим класс в
<span style="background: yellow; border: 1px solid black;">зеленеющих</span>
получится так
<span class="adjective" style="background: yellow; border: 1px solid black;">зеленеющих</span>
а выглядит так
на самом деле тут произошли некоторые очень важные штуковины. А именно стили из style переписали те что были в классе adjective. То есть для фона используется желтый цвет, вместо зеленого из adjective и рамка тоненькая и без разрывов. Это стандартное поведение. То есть стиль всегда важнее того что в классе.
Хотя на самом деле мы можем заставить стиль класса быть важнее стиля тега, для этого надо добавить слово !important. Например, я хочу, чтобы рамочка из класса перезаписывала стиль, то я сделаю так:
.adjective {
background: yellowgreen;
border: 2px dashed black !important; /* добавил в конец !important */
/* ... */
}
тыдыщь:
в качестве особых извращений мы в принципе можем запихать !important внутрь стиля и тогда он станет важнее того что в классе:
<span class="adjective" style="background: yellow; border: 1px solid black !important;">
вернулись к началу
Но вообще людей использующих !important очень не любят и могут даже побить. Так что никогда не используй !important.
Еще один функционал, которые добавляют классы — это возможность реагировать на наведение мышки. Для этого используются так называемые псевдоклассы.
Когда ты наводишь мышь на тег, то ему неявно добавляется класс :hover, и мы можем изменить то как будет отображаться блок добавив новый класс, вот так
<style>
.adjective {
/* … */
}
.adjective:hover {
/* сейчас сюда чего-нибудь добавим */
}
</style>
например, добавим смену фона, например:
.adjective:hover {
background: skyblue;
}
как видишь стили из .adjective:hover перезаписывают значения класса. Туда можно добавить и какие-то стили которые не присутствуют в базовом классе. Например, я могу сделать чтобы курсор превращался в указательный палец
.adjective:hover {
background: skyblue;
cursor: pointer;
}
во как
кстати “зеленеющих” не реагирует на смену цвета, потому что там в атрибует !important.
Возможно ты заметила что смена цвета происходит сильно резко.
Мы можем добавить так называемые переходы между параметрами, то есть один цвет будет плавно переплывать в другой. Для этого достаточно добавить в базовый класс следующий стиль
.adjective {
/* ... */
transition: all 0.3s; /* all означает что сглаживаем все преобразования, 0.3s -- это скорость перехода в секундах */
}
/* это не трогаем */
.adjective:hover {
background: skyblue;
cursor: pointer;
}
теперь все очень гладенько меняется
если поиграть со стилями можно очень необычных эффектов
.adjective:hover {
background: skyblue;
cursor: pointer;
border-width: 4px; /* меняю ширину границы, да можно только ширину указать */
padding: 6px; /* меняю отступы от границы */
box-shadow: 0 0 30px white; /* делаю тень белой и побольше, получается иллюзия свечения */
}
Но лучше конечно не злоупотреблять особенно размерами и отступами.
Все можно теперь задание пилить =)
Теперь поговорим о комбинациях классов
Помимо того, что мы можем описывать внутри тега <style> конкретный класс, мы можем прописать иерархию классов.
Допустим хочу я чтобы в первом параграфе все прилагательные были белые, но не хочу менять класс прилагательного. Зато я могу сделать новый комбинированные иерархический стиль — вот так:
<style>
.paragraph1 {/* ... */}
.paragraph2 {/* ... */}
.paragraph3 { /* ... */ }
.adjective {/* ... */}
.adjective:hover { /* ... */ }
/* добавил новый стиль, пробел между названиями классов обязателен */
.paragraph1 .adjective {
background: white;
}
</style>
так как комбинированный стиль имеет больший приоритет чем простой стиль, то цвет из класса .adjective будет перезаписан и получим:
вообще строя разные комбинации можно получать очень интересные эффекты. Например я могу менять цвет всех прилагательных при наведении мыши на абзац. Для этого я добавляю стиль с псевдоклассом:
<style>
/* ... */
.paragraph1 .adjective {
background: white;
}
/* теперь при наведении мышки на абзац поменяется цвет всех прилагательных */
.paragraph1:hover .adjective {
background: red;
}
</style>
получится так
правда теперь если я захочу, чтобы прилагательные все-таки меняли цвет при наведении мышки внутри первого абзаца, надо будет добавить еще один стиль
.paragraph1:hover .adjective:hover {
background: yellow;
}
Мы пока что указывали только один класс у каждого тега. Есть возможность указывать несколько классов. Особенно часто это используется во всяких подключаемых библиотечках со стилями, которые мы попробуем попозже.
Используется это для целей декомпозиции. Например, я хочу сделать отдельный стиль под блок с рамочкой.
Для этого я разбиваю класс прилагательного на два, вот так:
.adjective {
/* тут оставил только цвет и активацию плавных переходов */
background: yellowgreen;
transition: all 0.3s;
}
.bordered {
/* в этот новый стиль вынес все связанной с блоком и рамкой */
border: 2px dashed black;
display: inline-block;
margin: 2px;
padding: 0 4px;
border-radius: 8px;
box-shadow: 0 0 8px grey;
}
из-за этого у меня естественно все рамки слетят
зато я теперь могу добавить рамочки все тегам каким захочу без необходимости создавать новый класс.
Например, абзацу могу добавить, для этого в атрибут class добавляю через пробел второй класс:
<div class="paragraph1 bordered">
<!-- ... -->
</div>
получится так
тут у меня слетели отступы, я могу добавить уточняющий класс который будет учитывать поведение абзаца в комбинации с классом bordererd. Для этого я определяю комбинированный стиль следующим образом
/* тут пробел уже не ставим, прямо склеиваем имена классов */
.paragraph1.bordered {
margin: 16px 0;
border-width: 6px;
}
получится так
ну можно теперь и задание поделать
До этого мы работали с блоками по отдельности. А тут попробуем уже поработать с общей структурой.
В целом, какой сайт не возьми, получается набор строк и столбцов. И строки мы в принципе уже умеем делать, то есть какой бы div мы не вставили он уже полностью занимает всю строку:
<div class="block"></div>
<style>
.block {
border: 1px solid black;
height: 1rem; /* явно указал высоту блока в единице измерения rem, которая равна стандартной высоте одной строки */
margin-bottom: 0.5rem; /* отступ снизу */
}
</style>
и если я добавлю три блока, то все они будут занимать одну строку
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
и вот встает вопрос, а что делать если я хочу, чтобы они выводились не построчно, а все вместе встали бы в одну строку?
Для этого мы воспользуемся возможностями специального набора стилей именуемых флексами (flex).
Сначала обернём все три наших блока в один див, и присвоим ему класс row:
<div class="row">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
визуально ничего не изменится
а теперь пропишем стили для класса row
<style>
.block { /* ... */ }
.row {
display: flex;
}
</style>
И тут же у нас все блоки схлопнутся в строку, и видны останутся только границы
а теперь самое главное мы укажем у наших блоков сколько относительного места им полагается занимать в строке. Для этого используется свойство flex-grow, добавим его в класс block
<style>
.block {
border: 1px solid black;
height: 1rem;
margin-bottom: 0.5rem;
flex-grow: 1; /* добавил */
}
.row {
display: flex;
}
</style>
и так, теперь все блоки растянулись по строке, и каждый, так как у всех flex-grow один и тот же, занимает одинаковую долю равную 1:
я могу заставить какой-нибудь блок заставить быть в два раза больше других для этого я прям добавлю ему стиль и укажу значение flex-grow: 2
<div class="row">
<div class="block"></div>
<div class="block" style="flex-grow: 2;"></div>
<div class="block"></div>
</div>
теперь второй блок занимает две доли, а остальные по одной
правда все это начинает себя очень интересно вести, когда мы не просто пустые блоки, а еще добавляем туда какое-нибудь содержимое.
Чтобы было веселее я буду вместе с текстом использовать иконки.
Для иконок существует замечательная библиотечка fontawesome в которой тьма иконок на любой цвет и вкус.
Чтобы начать ее использовать в своем файле надо добавить ссылку на ее стили, у всех библиотечек это делается немного по-разному.
Для fontawesome следующим образом. Вверху файлика, там где
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
добавляем ссылку где-то внутри тега head, вот так
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" />
</head>
теперь выбираем категорию, я буду добавлять звериков
затем тыкаю на котяру напирмер
и копирую тег с классом
теперь вставляю себе в блоки
<div class="row">
<div class="block">
тут собачка живет
<i class="fas fa-dog"></i>
</div>
<div class="block" style="flex-grow: 2;">
<i class="fas fa-cat"></i>
<i class="fas fa-cat"></i>
<i class="fas fa-cat"></i>
</div>
<div class="block">
<i class="fas fa-kiwi-bird"></i>
дом киви
</div>
</div>
получится как-то так:
иконки кажутся сильно маленькими, поэтому я добавлю класс fa-2x встроенный в библиотечку который позволяет увеличить размер иконок
так, чего-то все повылазили из блоков… а, ну это потому что мы явно высоту блока в классе прописали, уберем там стиль height
<style>
.block {
border: 1px solid black;
/* убрал height: 1rem; */
margin-bottom: 0.5rem;
flex-grow: 1;
}
/* ... */
</style>
добавим им немного воздушного пространства
<style>
.block {
border: 1px solid black;
margin-bottom: 0.5rem;
margin: 0.25rem; /* оступы вокруг блоков */
padding: 0.5rem; /* отступы внутри блоков */
flex-grow: 1;
}
/* ... */
</style>
все теперь вроде ок выглядит.
Вот между прочим я хотел, чтобы второй блок был вдвое больше остальных по ширине, а он получается едва ли не меньше первого блока, плюс первый и последний блоки должны быть равны.
Как же так получается, мы же там вот это flex-grow: 1; прописывали. Дело в том, что flex-grow пытается распределить именно пустое место в блоках не учитывая места занимаемое содержимым
а за размер содержимого отвечает стиль flex-basis, который по умолчанию пытается уместить все содержимое в одну строку.
Чтобы flex-grow начал учитывать и содержимое, надо прописать свойство flex-basis: 0
.block {
border: 1px solid black;
margin-bottom: 0.5rem;
margin: 0.25em;
padding: 0.5em;
flex-grow: 1;
flex-basis: 0; /* добавил */
}
от теперь все как прописано во flex-grow, первый и последний равны, второй вдвое больше
сейчас у нас получается резиновая верстка
но иногда хочется, чтобы какой-то блок не реагировал на растяжения, например, я хочу, чтобы домик киви всегда был фиксированного размера.
Для этого я могу указать свойство flex-grow равным нулю, ну то есть grow – значит расширятся, а если поставить 0 то мы говорим что не расширяйся, добавим прямо в блок этот стиль
<div class="row">
<!-- ... -->
<div class="block" style="flex-grow: 0;">
<i class="fas fa-2x fa-kiwi-bird"></i>
дом киви
</div>
</div>
хм, чет сильно ужали эту киви
вообще тут интересно на самом деле, то есть собака и котики находятся в корректной пропорции, а киви ужато по самое не могу, так чтобы кошки и собаки заняли максимальное возможно пространство.
Как же облегчить судьбу несчастной птицы? Помнишь мы указывали свойство flex-basis: 0 для всех блоков, чтобы растяжение было пропорционально. Так вот, через это свойство мы можем указать конкретную ширину блока, это по сути аналог width но для флексовой верстки. Например, поставлю туда 250px
<div class="row">
<!-- ... -->
<div class="block" style="flex-grow: 0; flex-basis: 250px;">
<i class="fas fa-2x fa-kiwi-bird"></i>
дом киви
</div>
</div>
и усё, теперь птичка круче всех:
но вообще конечно это перебор, если надо чтобы просто птичка не была ужата, просто укажем значение auto
<div class="row">
<!-- ... -->
<div class="block" style="flex-grow: 0; flex-basis: auto;">
<i class="fas fa-2x fa-kiwi-bird"></i>
дом киви
</div>
</div>
и тогда блок займет ровно столько места сколько ему надо:
В общем, теперь можем добавлять сколько угодно строк и в каждом прописывать уникальные поведение блоков
<div class="row">
<!-- ... -->
</div>
<!-- добавил второй ряд -->
<div class="row">
<div class="block" style="flex-grow: 3; text-align: center;">
<i class="fas fa-2x fa-dog"></i>
<i class="fas fa-2x fa-dog"></i>
<i class="fas fa-2x fa-dog"></i>
</div>
<div class="block" style="flex-grow: 1; ">
<i class="fas fa-2x fa-horse"></i>
лошадка
</div>
</div>
вот такие дела
Сегодня будем учится верстать в столбик. В строчку вроде как уже умеем.
В строчку обычно как? Например, вот так
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
</head>
<body>
<div class="row">
<div class="block">
тут собачка живет
<i class="fas fa-2x fa-dog"></i>
</div>
<div class="block">
<i class="fas fa-2x fa-cat"></i>
</div>
<div class="block">
<i class="fas fa-2x fa-kiwi-bird"></i>
</div>
</div>
<style>
.row {
display: flex;
}
.block {
border: 1px solid black;
margin: 0.25em;
padding: 0.5em;
}
</style>
</body>
</html>
и по умолчанию все зверики занимают ровно столько сколько им надо
если я хочу, чтобы каждый занимал какое-то специфическое пространство я стало быть добавляю свойство flex-grow: 1
<div class="row">
<div class="block" style="flex-grow: 1;">
тут собачка живет
<i class="fas fa-2x fa-dog"></i>
</div>
<div class="block" style="flex-grow: 1;">
<i class="fas fa-2x fa-cat"></i>
</div>
<div class="block" style="flex-grow: 1;">
<i class="fas fa-2x fa-kiwi-bird"></i>
</div>
</div>
в этом случае как ты помнишь идет равномерное распределение пустого пространства
то есть, если я хочу, чтобы равномерными были именно размеры, то я добавляю flex-basis: 0
<div class="row">
<div class="block" style="flex-basis: 0; flex-grow: 1;">
тут собачка живет
<i class="fas fa-2x fa-dog"></i>
</div>
<div class="block" style="flex-basis: 0; flex-grow: 1;">
<i class="fas fa-2x fa-cat"></i>
</div>
<div class="block" style="flex-basis: 0; flex-grow: 1;">
<i class="fas fa-2x fa-kiwi-bird"></i>
</div>
</div>
и все ровно встает:
А теперь посмотрим, как все это работает, когда я делаю верстку в столбик.
Чтобы сделать верстку в столбик надо добавить свойство flex-direction: column, вот так
<style>
.block {
/* ... */
}
.column { /* переименовал в column, не забудь переименовать выше, где class="row" */
display: flex;
flex-direction: column; /* добавил */
}
</style>
и тут же все превращается в колонку
Попробую-ка я сделать, чтобы кошечка в два раза больше места занимала:
<div class="column">
<div class="block" style="flex-basis: 0; flex-grow: 1;">
тут собачка живет
<i class="fas fa-2x fa-dog"></i>
</div>
<div class="block" style="flex-basis: 0; flex-grow: 2;"> <!-- заменил тут на flex-grow: 2; -->
<i class="fas fa-2x fa-cat"></i>
</div>
<div class="block" style="flex-basis: 0; flex-grow: 1;">
<i class="fas fa-2x fa-kiwi-bird"></i>
</div>
</div>
проверяем:
Хм, шо за ерунда?
А дело в том, что у вертикальной верстки есть мини проблема, которая заключается в том, что у браузера нет по сути чёткого понятия высоты.
То есть 100% ширины — это всегда понятно сколько, от левого края до правого. А вот 100% высоты — это не понятно, как считать. Это от верха видимого куска страницы до низа видимого куска страницы, или до низа если проскроллить, или еще как? Неясно в общем.
Поэтому при вертикальной верстке всегда важно указывать высоту колонки. Например, я укажу что высота моей колонки 300px
<div class="column" style="height: 300px"> <!-- добавил height: 300px -->
<div class="block" style="flex-basis: 0; flex-grow: 1;">
тут собачка живет
<i class="fas fa-2x fa-dog"></i>
</div>
<div class="block" style="flex-basis: 0; flex-grow: 2;">
<i class="fas fa-2x fa-cat"></i>
</div>
<div class="block" style="flex-basis: 0; flex-grow: 1;">
<i class="fas fa-2x fa-kiwi-bird"></i>
</div>
</div>
о, и сразу все заработало
flex-basis: 0; ведет себя точно так же как и в горизонтальной верстке, то есть без него будет попытка распределить пустое пространство:
тут не сильно разницу видно, но она есть.
На самом деле наличие резиновых блоков по вертикали не очень часто нужно. То есть сейчас у нас, и собачка и кошка и киви все находятся в резиновых блоках. Но резина весьма условная, так как высота родительского блока у нас фиксированная
Уберу-ка я у блоков flex-grow и flex-basis и добавлю цвет колонке
<div class="column" style="height:300px; background-color: rgb(167, 242, 255);">
<div class="block" style="">
тут собачка живет
<i class="fas fa-2x fa-dog"></i>
</div>
<div class="block" style="">
<i class="fas fa-2x fa-cat"></i>
</div>
<div class="block" style="">
<i class="fas fa-2x fa-kiwi-bird"></i>
</div>
</div>
получится так
и теперь воспользуюсь невероятной возможностью выравнивать содержимое внутри блока. Для этого есть свойство, которое именуется align-items, для блока-колонки она определяет, как выравниваются блоки внутри по горизонтали.
По умолчанию оно имеет значение stretch (что переводится как растянуть)
.column {
align-items: stretch; /* добавил, прописал значение по умолчанию*/
display: flex;
flex-direction: column;
}
и соответственно меняя его я могу менять то, как будут выравниваться блоки по горизонтали внутри:
Например align-items: flex-start;
или align-items: center;
или в конец если хочу загнать align-items: flex-end;
но самая радость появляется что мы можем управлять положением блоков не только по горизонтали, но и по вертикали. Для этого используется свойство justify-content. По умолчанию оно имеет значение flex-start, то есть выравнивать по верху блока
.column {
justify-content: flex-start; /* добавил */
align-items: flex-end;
display: flex;
flex-direction: column;
}
но я могу так же попросить его выравнивать по центру
.column {
justify-content: center; /* поменял на center */
align-items: flex-end;
display: flex;
flex-direction: column;
}
а если еще и align-items: center; сделать:
можно и вниз опустить
.column {
justify-content: flex-end; /* поменял на flex-end */
align-items: center;
/* ... */
}
еще есть интересный режим который равномерно распределяет расстояние между блоками, почти как flex-grow только блоки занимают ровно столько места сколько им надо:
.column {
justify-content: space-between; /* поменял на space-between */
align-items: center;
/* ... */
}
есть еще такой:
.column {
justify-content: space-around; /* поменял на space-around */
align-items: center;
/* ... */
}
и такой:
.column {
justify-content: space-evenly; /* поменял на space-evenly */
align-items: center;
/* ... */
}
используя эти свойства можно быстро и красиво выровнять содержимое любого блока.
Естественно одна колонка — это не очень интересно, и намного интереснее объединять колонки в строчки. Используя уже знакомый нам горизонтальный флекс.
Допустим хочу я три колонки в ряд, сначала я просто скопирую блок с колонкой три раза:
<div class="column" style="height:300px; background-color: rgb(167, 242, 255);">
<!-- ... -->
</div>
<div class="column" style="height:300px; background-color: rgb(167, 242, 255);">
<!-- ... -->
</div>
<div class="column" style="height:300px; background-color: rgb(167, 242, 255);">
<!-- ... -->
</div>
он мне все три колонки положит в одну мега колонк (то есть каждая колонка окажется под следующей), потому что это стандартное поведение div блоков, и по сути я получу колонку в три раза выше.
Чтобы поставить колонки в строчку я оберну все в обыкновенный flex блок, вот так
<div style="display: flex;">
<div class="column" style="height:300px; background-color: rgb(167, 242, 255);">
<!-- ... -->
</div>
<div class="column" style="height:300px; background-color: rgb(167, 242, 255);">
<!-- ... -->
</div>
<div class="column" style="height:300px; background-color: rgb(167, 242, 255);">
<!-- ... -->
</div>
</div>
и ура, теперь три колонки в ряд:
каждой колонке я могу указать как размещать блоки в ней
<div style="display: flex;">
<div class="column" style="justify-content: flex-start; height:300px; background-color: rgb(167, 242, 255);">
<!-- ... -->
</div>
<div class="column" style="align-items: stretch; justify-content: space-evenly; height:300px; background-color: rgb(167, 242, 255);">
<!-- ... -->
</div>
<div class="column" style="align-items: flex-end; justify-content: flex-end; height:300px; background-color: rgb(167, 242, 255);">
<!-- ... -->
</div>
</div>
вот так получится
на большом экране они скорее всего займут не всю строчку
если ты хочешь, чтобы они растягивались на всю ширину, просто добавь свойство flex-grow: 1 каждой колонке. Я еще цвет каждой поменял тут чтобы лучше видно было
<div style="display: flex;">
<div class="column" style="flex-grow:1; justify-content: flex-start; height:300px; background-color: rgb(167, 242, 255);">
<!-- ... -->
</div>
<div class="column" style="flex-grow:1; align-items: stretch; justify-content: space-evenly; height:300px; background-color: rgb(126, 171, 255);">
<!-- ... -->
</div>
<div class="column" style="flex-grow:1; align-items: flex-end; justify-content: flex-end; height:300px; background-color: rgb(171, 147, 255);">
<!-- ... -->
</div>
</div>
колонки ведут себя так же как обыкновенные блоки. То есть я могу попросить вторую колонку стать в два раза толще других, если укажу ей flex-grow: 2
<div style="display: flex;">
<div class="column" style="...">
<!-- ... -->
</div>
<div class="column" style="flex-grow:2; align-items: stretch; justify-content: space-evenly; height:300px; background-color: rgb(126, 171, 255);">
<!-- ... -->
</div>
<div class="column" style="...">
<!-- ... -->
</div>
</div>
тут опять распределится именно пустое пространство, если хочешь чтобы было четко, то добавляешь flex-basis: 0
<div style="display: flex;">
<div class="column" style="flex-basis: 0; ...">
<!-- ... -->
</div>
<div class="column" style="flex-basis: 0; flex-grow:2; ...">
<!-- ... -->
</div>
<div class="column" style="flex-basis: 0; ...">
<!-- ... -->
</div>
</div>
хошь конкретные размеры, прописываешь в пикселях в свойство flex-basis, попутно убирая flex-grow:
<div style="display: flex;">
<div class="column" style="flex-basis: 100px; justify-content: flex-start; height:300px; background-color: rgb(167, 242, 255);">
<!-- ... -->
</div>
<div class="column" style="...">
<!-- ... -->
</div>
<div class="column" style="...">
<!-- ... -->
</div>
</div>
в общем все как обычно, прямо как в прошлой задачке. Ну все можно пилить задачку =)
И так, сегодня займемся bootstarpом.
Это так называемый ui-framework то есть набор классов со стилями + небольшим количеством скриптов. Который позволяет быстро сделать адекватно выглядящий интерфейс либо сделать скелет верстки и уже допиливать стили под себя.
Доступен здесь: https://getbootstrap.com
Чтобы начать использовать бутстрап ничего устанавливать не надо. Он как и fontawesome просто представляет собой файлик, который подключается к своему файлу.
Создаем себе пустой документ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Идем сюда https://getbootstrap.com/docs/5.0/getting-started/introduction/
копируем себе путь к файлу со стилем:
и вставляем в head
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
</body>
</html>
далее копируем себе путь со скриптами, они визуально ни на что не повлияют, но добавят нам интерактивный функционал
скрипты обычно запихивают в конец страницы, получится так:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<!-- ДАЛЬШЕ ВЕСЬ КОД БУДУ ПИСАТЬ СЮДА -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
Разработка интерфейса на бутсрапе построена на размещении объектов по сетке. Сетка реализована на тех самых флексах, которые мы терзали там в предыдущих заданиях. Только за нас уже все написано, нам остается только классы использовать.
Первое что делаем это создаем блок container, он является хитрой оберткой, которая делает ширину блоков, находящихся внутри в меру резиновой. Так как я тоже использую bootstrap у себя, то сразу могу показать на реальном примере как оно работает, примерно так:
то есть содержимое внутри блока не растянуто на всю ширину экрана а всегда имеет небольшие отступы справа, которые в зависимости от ширины экрана либо больше либо меньше. Эти размеры долго подбирали специалисты в секретных лабораториях. А суть их просто в том, чтобы сделать чтение более комфортным.
В общем начнем с того что сделаем строчку с тремя колонками. Так как все стили за нас уже прописаны и хочется писать код быстро. Как раз для таких случаев в visual-studio-code встроен плагин, который упрощает создание блоков с одним классом. Для этого надо просто написать точку, затем название класса, а затем тыкаешь Tab, вот так можно быстро все добавить:
получится так:
<div class="container">
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
</div>
визуально выглядит вот так:
я добавлю немного стиля нашим колонкам чтобы было лучше видно, что происходит. Причем я немного хитрый стиль добавлю, я хочу, чтобы все блоки к которых название класса начинается с col имели границу, цвет фона и отступ:
<style>
[class^=col] {
padding-top: .75rem;
padding-bottom: .75rem;
background-color: rgba(86,61,124,.15);
border: 1px solid rgba(86,61,124,.2);
}
</style>
стиль я взял из документации чтобы было проще ориентироваться. Вот так должно получится:
у нас три колонки и одна строка. Можно добавить еще одну строку, например, и прописать в нее больше колонок:
<div class="container">
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
<div class="row">
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
</div>
</div>
если, например, захочется добавить отступ к какой-то строке, можно добавить стиль например так:
<div class="container">
<div class="row" style="margin-bottom: 8px;">
<!-- ... -->
</div>
<div class="row">
<!-- ... -->
</div>
</div>
получится так:
но в bootstarp встроены стили для быстрого добавления отступов и имеют они вид:
причем вместо b можно подставить t если хочется margin-top, s – если хочешь margin-left, e – для margin-right, а можно вообще просто написать m-2 и это добавит отступ в 8 пикселей со всех сторон.
В общем для нашего варианта сгодится такой:
<div class="container">
<div class="row mb-2">
<!-- ... -->
</div>
<div class="row">
<!-- ... -->
</div>
</div>
можно, например, колонке с двойкой добавить отступ со всех сторон:
<div class="container">
<div class="row mb-2">
<div class="col">1</div>
<div class="col m-2">2</div>
<div class="col">3</div>
</div>
<div class="row">
<!-- ... -->
</div>
</div>
получится так:
подробнее описано тут https://getbootstrap.com/docs/5.0/utilities/spacing/
Помните во флексах у нас было свойство flex-grow и там можно было указать относительный размер ячейки в строке.
Так вот в бутстрапе принято, что строка может содержать до 12 ячеек, и добавляя очередную колонку в строку мы можем указать какую долю от 12 ячеек она занимает. Делается это будем добавления цифры к классу col:
col-1 – занимает одну двенадцатую строкиcol-2 – занимает 2/12 строкиcol-3 – занимает 3/12 строкиcol-10 – занимает 10/12 строкиcol-11 – занимает 11/12 строкиcol-12 – занимает всю строкупопробуем подкрутить код:
<div class="container">
<div class="row mb-2">
<div class="col-2">2 из 12</div>
<div class="col-8">8 из 12</div><!-- тут m-2 обязательно убираем -->
<div class="col-2">2 из 12</div>
</div>
<div class="row">
<div class="col-1">1 из 12</div>
<div class="col-2">2 из 12</div>
<div class="col-3">3 из 12</div>
<div class="col">все оставшееся пространство</div>
</div>
</div>
получится так:
то есть все строго и четко.
Если хочется выровнять по центру содержимое, то можно использовать класс text-center:
<div class="container">
<div class="row mb-2">
<div class="col-2">2 из 12</div>
<div class="col-8 text-center" style="background-color: rgb(255, 185, 32);">8 из 12</div><!-- добавил класс, и раскрасил -->
<div class="col-2">2 из 12</div>
</div>
<div class="row">
<!-- ... -->
</div>
</div>
получится так:
если же хочется, чтобы выравнивание было не только по горизонтали, но и по вертикали, то тут уже придется указать что колонка у нас — это тоже флекс блок. К счастью сделать это тоже очень легко, достаточно добавить класс d-flex, что равносильно добавлению свойства display: flex
<div class="container">
<div class="row mb-2">
<!-- ... -->
</div>
<div class="row">
<div class="col-1">1 из 12</div>
<div class="col-2">2 из 12</div>
<!-- добавил класс, и раскрасил -->
<div class="col-3 d-flex" style="background-color: rgb(255, 32, 188);">3 из 12</div>
<div class="col">все оставшееся пространство</div>
</div>
</div>
выглядит так:
и теперь чтобы прописать выравнивание и по вертикали, и по горизонтали мы добавляем вместо стиля
align-items: center – класс align-items-centerjustify-content: center – класс justify-content-centerполучается так
<div class="col-3 d-flex justify-content-center align-items-center" style="background-color: rgb(255, 32, 188);">3 из 12</div>
красота:
более подробно об этом написано тут https://getbootstrap.com/docs/5.0/utilities/flex/
Помимо расположение объектов строго по сетке, можно еще делать отступы, для этого используется стили вида offset-*. Где вместо зведочки подставляется цифра от 1 до 12, показывающая сколько ячеек использовать в качестве отступа
Например уберу я блок 3 из 12
<div class="container">
<div class="row mb-2">
<div class="col-2">2 из 12</div>
<div class="col-8 text-center" style="background-color: rgb(255, 185, 32);">8 из 12</div>
<div class="col-2">2 из 12</div>
</div>
<div class="row">
<div class="col-1">1 из 12</div>
<div class="col-2">2 из 12</div>
<!-- убрал -->
<div class="col">все оставшееся пространство</div>
</div>
</div>
я могу вставить пустое пространство на место этого блока если добавлю следующий див:
<div class="container">
<div class="row mb-2">
<!-- ... -->
</div>
<div class="row">
<div class="col-1">1 из 12</div>
<div class="col-2">2 из 12</div>
<div class="offset-3"></div> <!-- добавил -->
<div class="col">все оставшееся пространство</div>
</div>
</div>
проверяем:
Правда нельзя добавить отступ в сколько-то ячеек справа границы, но для этих случаев можно просто ограничить границы крайнего блока, например если я хочу чтобы справа был отступ в 3 ячейки, то надо посчитать сколько у меня уже занято.
Получается 1 + 2 + 3 (которая offset) = 6
Максимум 12 ячеек, значит надо чтобы последний блок имел длину в три ячейки. Делаем это:
<div class="container">
<div class="row mb-2">
<div class="col-2">2 из 12</div>
<div class="col-8 text-center" style="background-color: rgb(255, 185, 32);">8 из 12</div>
<div class="col-2">2 из 12</div>
</div>
<div class="row">
<div class="col-1">1 из 12</div>
<div class="col-2">2 из 12</div>
<div class="offset-3"></div>
<!-- меняю col на col-3 -->
<div class="col-3">все оставшееся пространство</div>
</div>
</div>
итого получаем так:
Сначала покажу как сделать флекс колонку. Я в принципе в предыдущем задании показал, но просто повторюсь. Начнем с базы:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"></script>
</body>
</html>
запихаю в тело основу
<div class="container">
<div class="row">
</div>
</div>
то есть контейнер и строку. Теперь добавлю в строку колонку
<div class="container">
<div class="row">
<div class="col">
</div>
</div>
</div>
пропишу в колонку
<div class="container">
<div class="row">
<div class="col">
<div>Я<br>картинка</div>
<div>А я подпись</div>
</div>
</div>
</div>
получится весьма скромно:
добавим теперь границу к колонке чтобы лучше ориентироваться что у нас происходит. Тут опять все здорово уже есть класс border просто его добавляем:
<div class="col border">
<div>Я<br>картинка</div>
<div>А я подпись</div>
</div>
как помнишь колонка по умолчанию растягивается на всю ширину. Есть несколько способов ее ограничить:
<div class="col-3 border">
<div>Я<br>картинка</div>
<div>А я подпись</div>
</div>
<div class="col-auto border">
<div>Я<br>картинка</div>
<div>А я подпись</div>
</div>
для задания такое подойдет лучше.
Теперь посмотрим, как выровнять содержимое внутри. Самый простой способ — это просто добавить text-center:
<div class="col-auto text-center border">
<div>Я<br>картинка</div>
<div>А я подпись</div>
</div>
этот способ в принципе надежный и можно его использовать. Но он работает только для простых ситуаций.
Альтернативный способ превратить колонку во флекс-колонку:
<div class="col-auto d-flex flex-column border">
<div>Я<br>картинка</div>
<div>А я подпись</div>
</div>
и сделать выравнивание через класс align-items-center
<div class="col-auto d-flex align-items-center flex-column border">
<div>Я<br>картинка</div>
<div>А я подпись</div>
</div>
и сразу обрати внимание что тут выравнивание сработало совсем по-другому, тут выровнялся блок с текстом “Я картинка”, а текст в нем остался выравненным влево. Вот так его можно выделить, например:
<div class="row">
<div class="col-auto d-flex align-items-center flex-column border">
<div class="border border-danger">Я<br>картинка</div>
<div>А я подпись</div>
</div>
</div>
border-danger – это цвет границы (полный список можно тут глянуть https://getbootstrap.com/docs/4.6/utilities/borders/#border-color)
выглядит так
если я хочу добавить отступ от картинки вниз я добавлю стиль mb-* (то есть margin-bottom), вот так:
<div class="col-auto d-flex align-items-center flex-column border">
<div class="border border-danger mb-3">Я<br>картинка</div>
<div>А я подпись</div>
</div>
Ну и собственно все могу теперь копипастить блоки:
<div class="container">
<div class="row">
<div class="col-auto d-flex align-items-center flex-column border">
<div class="border border-danger mb-3">Я<br>картинка</div>
<div>А я подпись</div>
</div>
<div class="col-auto d-flex align-items-center flex-column border">
<div class="border border-danger mb-3">Я<br>картинка</div>
<div>А я подпись</div>
</div>
<div class="col-auto d-flex align-items-center flex-column border">
<div class="border border-danger mb-3">Я<br>картинка</div>
<div>А я подпись</div>
</div>
<div class="col-auto d-flex align-items-center flex-column border">
<div class="border border-danger mb-3">Я<br>картинка</div>
<div>А я подпись</div>
</div>
<div class="col-auto d-flex align-items-center flex-column border">
<div class="border border-danger mb-3">Я<br>картинка</div>
<div>А я подпись</div>
</div>
</div>
</div>
и получать что-то такое:
Картинку вставляют через тег img, вот так:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="" alt="">
</body>
</html>
собственно, у него одно главное свойство это src, в которую можно вставить ссылку на любую картинку.
Ссылку в браузере можно получить очень легко, если тыкнуть на любую картинку и выбрать
и дальше скопированное значение вставить в атрибут src
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Haanja_2010_01_1.jpg/1200px-Haanja_2010_01_1.jpg" alt="">
правда она немедленно займет ровно столько места сколько ей нужно:
поэтому по-хорошему размеры картинок лучше ограничивать используя те же стили. Например, я могу сказать, чтобы высота картинки была ровно 250px
<img style="height: 250px" src="..." alt="">
и получится уже так
так как картинка — это обыкновенный блок, то ее можно стилизовать как угодно, например, добавить тень или границу
<img class="main-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Haanja_2010_01_1.jpg/1200px-Haanja_2010_01_1.jpg" alt="">
<style>
.main-image {
height: 250px;
border: 1px solid silver;
margin: 8px;
box-shadow: 0 0 16px silver;
border-radius: 16px;
}
</style>
Вообще, чтобы сделать квадратную картинку, в идеале нужно чтобы и исходник был квадратный. Можно конечно попробовать указать свойство width равное height вот так
<style>
.main-image {
height: 250px;
width: 250px;
border: 1px solid silver;
margin: 8px;
box-shadow: 0 0 16px silver;
border-radius: 16px;
}
</style>
но тогда у картинки поползут пропорции
в общем самый универсальный способ, которые работает и для квадратных и для прямоугольных картинок – это положить картинку в квадратный блок:
<div class="main-image-wrapper"> <!-- обернули в блок -->
<img class="main-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Haanja_2010_01_1.jpg/1200px-Haanja_2010_01_1.jpg" alt="">
</div>
<style>
/* в блок перенесли все свойства из main-image */
.main-image-wrapper {
width: 250px;
height: 250px;
border: 1px solid silver;
margin: 8px;
box-shadow: 0 0 16px silver;
border-radius: 16px;
}
.main-image {
height: 100%; /* тут поставили такое свойство, чтобы картинка по высоте равнялась высоте обертки */
}
</style>
Чет не работает… если присмотреться, то видно, что на заднем фоне появилась квадратная тень, но картинка то все равно не квадратная
Тут проблема в том, что картинка вылазит за границы блока, а блок ее никак не ограничивает.
Чтобы ничего не вылезало, есть волшебное свойство overflow: hidden, которое отключает отрисовку кусков изображений (да и не только изображений), которые вылазят за границы.
<style>
.main-image-wrapper {
width: 250px;
height: 250px;
border: 1px solid silver;
margin: 8px;
box-shadow: 0 0 16px silver;
border-radius: 16px;
overflow: hidden; /* добавил */
}
.main-image {
height: 100%;
}
</style>
Чтобы сделать круглую картинку надо чтобы она была квадратная, либо внутри квадратного блока. Это у нас уже готово.
Есть свойство border-radius в котором указывается радиус закругления краев блока. Мы туда пока пихали только пиксельные размер, а если поставить туда значение 50% то радиус закругления будет равен половине стороны квадраты и получится круг, вот так:
<style>
.main-image-wrapper {
width: 250px;
height: 250px;
border: 1px solid silver;
margin: 8px;
box-shadow: 0 0 16px silver;
border-radius: 50%; /* поставил 50% */
overflow: hidden;
}
.main-image {
height: 100%;
}
</style>
все это можно обернуть во flexы и получить что-нибудь красивое
<div style="display: flex; justify-content: center;">
<div style="display: flex; flex-direction: column; align-items: center;">
<div class="main-image-wrapper">
<img class="main-image" src="..." alt="">
</div>
<div style="font-size: 2em;">Зима</div>
<div style="font-size: 1em;">близко</div>
</div>
</div>
вот и вся наука)
В fontawesome есть встроенная поддержка крутящихся иконок, прочитать подробнее можно тут: https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons в общем если хочется добавить крутящуюся иконку то делается это так:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ... -->
<!-- Добавил ссылку на font-awesome, а тож не было -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
</head>
<body>
<div style="display: flex; justify-content: center;">
<div style="display: flex; flex-direction: column; align-items: center;">
<div class="main-image-wrapper">
<img class="main-image" src="..." alt="">
</div>
<!-- вставил иконку, и добавил к ней класс fa-spin чтобы она крутилась -->
<div style="font-size: 2em;">Зима <i class="fas fa-cog fa-spin"></i></div>
<div >близко </div>
</div>
</div>
Собственно вот такая верстка получилась.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Poppins:wght@400;500&display=swap"
rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<title>Hello, world!</title>
</head>
<body>
<main>
<section class="section-top">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container d-flex">
<a class="navbar-brand" href="#">
<div class="logo">
<svg width="72" height="72" viewBox="0 0 72 72" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle cx="36" cy="36" r="36" fill="#C8C8C8" />
<g filter="url(#filter0_d)">
<path
d="M16.2012 27.4043C20.153 27.1113 22.7311 26.9648 23.9355 26.9648C25.1465 26.9648 26.1003 27.0788 26.7969 27.3066C27.5 27.528 28.1283 27.8372 28.6816 28.2344C29.7559 28.9961 30.5664 30.0085 31.1133 31.2715C31.6667 32.5345 31.9434 33.8138 31.9434 35.1094C31.9434 36.4049 31.7318 37.5378 31.3086 38.5078C30.8919 39.4714 30.3125 40.2852 29.5703 40.9492C28.0534 42.3229 26.0905 43.0065 23.6816 43H16.2012V27.4043ZM22.2754 32.3555V38.3027C22.6204 38.0098 22.9948 37.7201 23.3984 37.4336C24.9479 36.3203 25.7227 35.1549 25.7227 33.9375C25.7227 33.3451 25.5469 32.7982 25.1953 32.2969C24.8438 31.7891 24.3848 31.5352 23.8184 31.5352C23.2585 31.5352 22.7441 31.8086 22.2754 32.3555ZM39.1211 27.4043L40.9082 32.9609L44.8047 27.7363C44.9349 27.5605 45.0326 27.4466 45.0977 27.3945C45.1628 27.3424 45.2604 27.3164 45.3906 27.3164C45.5208 27.3164 45.6868 27.4564 45.8887 27.7363L49.5215 32.9023L51.2793 27.4043H56.8652L51.7676 42.5996C51.5462 43.2507 51.1719 43.5762 50.6445 43.5762C50.1172 43.5762 49.6452 43.2767 49.2285 42.6777L44.8633 36.3789L40.166 42.6973C39.7428 43.2572 39.2708 43.5371 38.75 43.5371C38.2292 43.5371 37.8483 43.2116 37.6074 42.5605L32.1191 27.4043H39.1211Z"
fill="white" />
</g>
<defs>
<filter id="filter0_d" x="12.2012" y="22.9648" width="52.6641" height="28.6113"
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feOffset dx="2" dy="2" />
<feGaussianBlur stdDeviation="3" />
<feColorMatrix type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow"
result="shape" />
</filter>
</defs>
</svg>
</div>
<span class="logo-text">Dreammaker</span>
</a>
<div class="d-flex align-items-center">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Service</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Setting</a>
</li>
</ul>
<button class="btn-lilac nav-item">Contact us</button>
</div>
</div>
</nav>
<div class="header-top-info-container container">
<h1>
Your awesome Dream <br>
maker consultant
</h1>
<div class="text">
The occupational traffic permit is one of the most important things in the company<br>
when carrying out freight transport. In fact, it is a prerequisite for<br>
doing business traffic at all.
</div>
<button class="btn-lilac">Get started</button>
</div>
</section>
<section class="section-2">
<div class="info-container">
<h2>
We provide great Service
</h2>
<div class="text">
The occupational traffic permit is one of the most important things in the company<br>
when carrying out freight transport. In fact, it is a<br>
prerequisite for doing business traffic at all.
</div>
</div>
<div class="service-items container">
<div class="row">
<div class="col-3">
<div class="service-item">
<div class="icon">
<img src="/images/screen.svg" alt="">
</div>
<h3>Web design</h3>
<div class="text">
Here you can find all
web design and all of yours
designing meterials
</div>
</div>
</div>
<div class="col-3">
<div class="service-item">
<div class="icon">
<img src="/images/doctor.svg" alt="">
</div>
<h3>Health and study</h3>
<div class="text">
Here you can find all
your primary health your
good health and education
</div>
</div>
</div>
<div class="col-3">
<div class="service-item">
<div class="icon">
<img src="/images/box.svg" alt="">
</div>
<h3>Packaging</h3>
<div class="text">
Consistency in packaging
matter a lot. Give your attention
match design elements
</div>
</div>
</div>
<div class="col-3">
<div class="service-item">
<div class="icon">
<img src="/images/pencil.svg" alt="">
</div>
<h3>Content writing</h3>
<div class="text">
It can be understood
that your fonts, sizes, headings,
sub-headings, and button
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section-3">
<div class="container">
<div class="row">
<div class="col">
<div class="info-container">
<h2>
The People are quick turnaround here
</h2>
<div class="text">
The occupational traffic permit is one of the most <br>
things in the company How do you do when <br>
a commercial traffic permit for freight <br>
transport to your business?
</div>
</div>
</div>
<div class="col">
<img src="/images//people_network.svg" alt="">
</div>
</div>
</div>
</section>
<section class="section-4">
<div class="container">
<div class="row">
<div class="col">
<div class="question-item">
<div> When is a professional traffic permit needed?</div>
<i>></i>
</div>
<div class="question-item">
<div> Where to look for a traffic permit?</div>
<i>></i>
</div>
<div class="question-item">
<div> Are there differences between a traffic permit and a professional traffic permit?</div>
<i>></i>
</div>
<div class="question-item">
<div> How much does a commercial traffic permit cost for goods?</div>
<i>></i>
</div>
<div class="question-item">
<div> How to plug in for the traffic permit test?</div>
<i>></i>
</div>
<div class="question-item">
<div> How is the sample for a professional traffic permit booked?</div>
<i>></i>
</div>
</div>
<div class="col under-the-man">
<div class="question-item">
<div> When is a professional traffic permit needed?</div>
<i>></i>
</div>
<div class="question-item">
<div> Where to look for a traffic permit?</div>
<i>></i>
</div>
<div class="question-item">
<div> Are there differences between a traffic permit and a professional traffic permit?</div>
<i>></i>
</div>
<div class="question-item">
<div> How much does a commercial traffic permit cost for goods?</div>
<i>></i>
</div>
<div class="question-item">
<div> How to plug in for the traffic permit test?</div>
<i>></i>
</div>
<div class="question-item">
<div> How is the sample for a professional traffic permit booked?</div>
<i>></i>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"></script>
</body>
</html>
body {
font-family: 'Poppins';
}
/* TOP SECTION */
.navbar {
height: 116px;
background: rgba(196, 196, 196, 0.1);
}
.section-top {
background-image: url("/images/bg01.jpg");
height: 737px;
background-repeat: no-repeat;
background-position-x: center;
}
.navbar-brand {
margin: 0;
padding: 0;
display: flex;
align-items: center;
}
.navbar-nav {
flex-direction: row;
}
.navbar-brand .logo-text {
margin-left: 21px;
}
.nav-item {
margin-left: 58px;
padding: 0;
}
.navbar-light .navbar-nav .nav-link {
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 27px;
color: #717784;
}
.btn-lilac {
width: 234px;
height: 60px;
background: #9B9BCA;
border-radius: 10px;
border: 0;
font-style: normal;
font-size: 18px;
line-height: 27px;
/* identical to box height */
color: #FFFFFF;
transition: all .3s;
}
.btn-lilac:hover {
background: #9e75cc;
}
.header-top-info-container {
margin-top: 196px;
}
.header-top-info-container > h1 {
font-family: DM Serif Display;
font-style: normal;
font-weight: normal;
font-size: 56px;
line-height: 100%;
/* or 56px */
color: #696A86;
}
.header-top-info-container > .text {
font-size: 18px;
line-height: 27px;
color: #696A86;
}
.header-top-info-container > * {
margin-top: 30px;
}
/* SECTION 2 */
.section-2 .info-container {
margin-top: 95px;
text-align: center;
width: 780px;
margin-left: auto;
margin-right: auto;
}
.section-2 .info-container > h2 {
font-family: Poppins;
font-style: normal;
font-weight: 500;
font-size: 26px;
line-height: 39px;
color: #626780;
}
.section-2 .info-container > .text {
margin-top: 23px;
font-size: 18px;
line-height: 26px;
color: #626780;
}
.section-2 .service-items {
margin-top: 139px;
}
.section-2 .service-items .service-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 250px;
border: 1px solid #9d9d9d00;
box-sizing: border-box;
border-radius: 5px;
transition: all .3s;
cursor: pointer;
position: relative;
overflow: hidden;
}
.section-2 .service-items .service-item::after {
position: absolute;
height: 7px;
left: 0px;
right: 0px;
bottom: 0px;
background: #c4c4c400;
transition: all .3s;
content: "";
}
.section-2 .service-items .service-item:hover {
border: 1px solid #9D9D9D;
}
.section-2 .service-items .service-item:hover::after {
background: #C4C4C4;
}
.section-2 .service-items .service-item h3 {
margin-top: 21px;
font-weight: 500;
font-size: 22px;
line-height: 40px;
color: #626780;
}
.section-2 .service-items .service-item .text {
margin-top: 12px;
text-align: center;
font-size: 16px;
line-height: 20px;
text-align: center;
color: #626780;
}
.section-3 {
margin-top: 192px;
}
.section-3 .row {
align-items: center;
}
.section-3 .info-container h2 {
font-weight: 500;
font-size: 26px;
line-height: 39px;
color: #626780;
}
.section-3 .info-container .text {
font-size: 18px;
line-height: 30px;
color: #626780;
}
.section-4 {
margin-top: 150px;
background: url("/images/big-circle.svg");
background-repeat: no-repeat;
background-position-x: 877px;
}
.section-4 .container {
background: url("/images/man.png");
background-position-x: 577px;
background-repeat: no-repeat;
overflow: visible;
height: 1030px;
}
.section-4 .container .under-the-man {
margin-top: 730px;
}
.section-4 .question-item {
padding: 25px 34px 25px 34px;
background: #FFFFFF;
box-shadow: 0px 20px 40px #F5F5FF;
border-radius: 23px;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: space-between;
}