Вёрстка по макету PSD в bootstrap4

  1. по боотстрап4
    — ставим начальный шаблон с ресурса https://getbootstrap.com/
    — вначале в редакторе  Sublime Text создали файл index.html
  2. — затем подключаем библиотеку со шрифтами , можно локально или удалённо через 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»>
  3. — в стилях при этом пишем
    font-family: ‘Open Sans’, sans-serif; для всего html документа
    *html{
  4. }
  5. И шрифты должны заработать.
  6. Если шрифты подключать локально , то нужно их скачать , положить в папку со шрифтами и подключить из папки со шрифтами
    вот так..если непонятно , то идём снова в урок
    https://www.youtube.com/watch?v=ST9mdY0jaZY

    ..вот тоже получается урок , как начать делать шаблон
    по боотстрап4 , правда надо ещё скачать сам шаблон(psd макет) с ресурса(классный ресурс)
    https://freebiesbug.com/psd-freebies/design-agency-template/

  7. (ещё одна попутно задача , научиться скачивать psd шаблон с этого ресурса , гуглим и учим)
    правильный , кстати , получается урок , есть задание , есть ресурсы , просто бери и делай , бери , тренируйся и делай .. и так пока не получится ,что-нибудь путное , внятное ..
    Всё в итоге просто: кто умеет –делает, кто не умеет-учит!!
  8. _____________________________________________

 

  1. Вот и вся правда жизни , остальное всё от лукавого!!

 

И так, я научился ставить начальный шаблон от боотстрап4
затем ставим меню
navbar . подстраиваем его под себя,
меняем расположение меню , сдвигаем его вправо , ставим
вместо
mrauto mlauto и меню сдвинулось вправо.
Затем по шаблону нужно увеличить отступы в меню или <
br>
или
marginright .Да это так ,примерно , и произошло. В стилях прописываем для nav-item  ml50(margileft: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 подгружаются новые или другие посты, тоже всё реализовано в этом проекте.
Всем спасибо за внимание !
До следующих встреч.