Вёрстка по макету PSD в bootstrap4
- по боотстрап4
— ставим начальный шаблон с ресурса https://getbootstrap.com/
— вначале в редакторе Sublime Text создали файл index.html - — затем подключаем библиотеку со шрифтами , можно локально или удалённо через https
<link rel=»preconnect» href=»https://fonts.gstatic.com»>
<link href=»https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap» rel=»stylesheet»> - — в стилях при этом пишем
font-family: ‘Open Sans’, sans-serif; для всего html документа
*html{ - }
- И шрифты должны заработать.
- Если шрифты подключать локально , то нужно их скачать , положить в папку со шрифтами и подключить из папки со шрифтами
вот так..если непонятно , то идём снова в урок
https://www.youtube.com/watch?v=ST9mdY0jaZY..вот тоже получается урок , как начать делать шаблон
по боотстрап4 , правда надо ещё скачать сам шаблон(psd макет) с ресурса(классный ресурс)
https://freebiesbug.com/psd-freebies/design-agency-template/ - (ещё одна попутно задача , научиться скачивать psd шаблон с этого ресурса , гуглим и учим)
правильный , кстати , получается урок , есть задание , есть ресурсы , просто бери и делай , бери , тренируйся и делай .. и так пока не получится ,что-нибудь путное , внятное ..
Всё в итоге просто: кто умеет –делает, кто не умеет-учит!! - _____________________________________________
- Вот и вся правда жизни , остальное всё от лукавого!!
И так, я научился ставить начальный шаблон от боотстрап4
затем ставим меню navbar . подстраиваем его под себя,
меняем расположение меню , сдвигаем его вправо , ставим
вместо mr—auto ml—auto и меню сдвинулось вправо.
Затем по шаблону нужно увеличить отступы в меню или <br>
или margin—right .Да это так ,примерно , и произошло. В стилях прописываем для nav-item ml50(margi—left:50px😉
И всё меню встало на место – раздвинулось на 50px / Но я думаю, по макету нужно увеличить отступ до 100px.
Разобрался и сделал небольшую анимацию для пунктов меню:
при наведение курсора появляется тонкое подчёркивание , а при отводе курсора всё исчезает.
Это делается с помощью кода , то что я прописал ниже:
header .nav-item a::after {
content: »;
display: block;
width: 100%;
background-color: #ccc;
height: 1px;
transform: scale(0);
transition: all .3s;
}
header .nav-item a:hover::after {
transform: scale(1);
}
Item здесь класс пунктов меню
___________________________________________________________
Вот так друзья делается привлекательная анимашка для пунктов меню.
На сегодня всё , движение вперёд есть –уже хорошо.
___________________________________________________
16,05,21 Свинцов!!
Сегодня третий урок по Боотстрап4
Ставим карусель(слайдер) , всё берём из документации….
здесь https://getbootstrap.com/
И так сегодня уже 27,07,2021
Проект Minimo я закончил и даже подключил к форме
файл send.php ? который сработал , хотя там не было полей
c именем и телефоном.
проект загрузил на хостинг , всё работает, всё грузится , форма отправляет данные.
Вывод; я всё таки чему-то научился, взял макет PSD c сайта https://freebiesbug.com/
там можно ещё раз также всё проделать для закрепления материала.
По урокам сверстал с помощью боотстрапа 4 данный макет.
попутно научился брать картинки и тексты прямо из фотошопа.
Это ещё одна наука, тоже надо всё уметь.
лучше , конечно, грузить макет PSD в программу Зеплин и из неё брать тексты
и картинки, а также код , чтобы его уже потом вставлять в вёрстку.
И это будет более правильно и быстро, так как не придётся самому
писать часть кода.
Проект стоит на хостинге , его можно показывать и использовать в портфолио на сайте кворк.ру, что мы и сделаем в ближайщее время.
______________________________________________________________________
Вот продукт моих стараний и обучения.
http://www.s4.kruglovo.ru/minimo28
форма кстати тоже подключена, даже появляется страница с благодарностью после отправки сообщения.
А после нажатия на кнопку _Load-more подгружаются новые или другие посты, тоже всё реализовано в этом проекте.
Всем спасибо за внимание !
До следующих встреч.
