Приветствую , мои дорогие читатели ))
Было много трудностей , но я закончил верстку сайта.
Завтра планирую написать форму отправки на (mail) на языке (PHP), для последнего блока.Но так как язык (PHP) это серверный язык, и без хостинга работать не будет. Мне нужно будет запускать локальный сервер, и работать уже на нем.
Помимо этого еще много работы:
-Я планирую добавить немного анимации на сайта.
-Нужно оптимизировать скорость загрузки сайта.
-Нужна проверка валидности HTML кода.
Короче, мозг у меня уже крепит.
Так теперь коротко о главном .
Для меня было необходимо поставить на сайт плагины, для прокрутки блока с портфолио, и блока с отзывами.
И так-как знанием JavaScript я сильно не владею я использовал
готовые плагины .Если детально говорить об этом то, я использовал( jquery) плагин -(slick slider).
С ним как не странно, проблем не возникло.
Перейдем к работе над ошибками.
Я очень долго мучился, не мог понять почему подсказывающий текст в форме отправке, не менял свой окрас.
Побывал менять классы, забивать стили в html код, все бесполезно.
Ну спустя некоторое количество времени проведённое на форуме , я узнал что не все браузеры видят стили подсказок (placeholder), в стороне не оказался и мой браузер((
Возникла еще одна очень интересная вещь, и опять с формой отправки.
Вообще с самого начала для меня, создание такой своеобразной фигуры для формы было в новинку. И не увидел варианта лучше чем использовать свойство (clip-path)
Объясню по подробней про это свойство.
Это свойство создает ограниченную область, которая определяет какая часть элемента должна быть видимой, то что находится в области, будет видимо , а то что выходит за нее, будет скрыто.Таким образом я создал такую интересную фигуру. Но самое интересное ждало меня впереди.
Как не странно сделать фигуру у меня получилось с первого раза, но моя эйфория быстро прошла сразу же , как я начал задавать радиус углам.
Моя задумка была закруглить все углы.Но свойство (border radius) сработало только с теми углами , которые небыли деформированы при помощи свойства (clip-path).
В итоге я наткнулся на очень интересный вариант решение этой проблемы:
-(border-top-right-radius: 80px 50px;
-border-bottom-left-radius: 10px;
-border-top-left-radius: 10px;
-border-bottom-right-radius: 10px;)
Это свойство регулирует каждый угол отдельно.
Если раньше приходилось задавать радиус углов по порядку:
-border-radius:2px 2px 2px 2px ;
То теперь каждый угол я мог задать по отдельности, и не зависимо от порядка расположение углов.
И так подведем итоги:
Для меня верстка этих блоков Стала очень интересной ,так как с некоторыми свойствами (css) я еще не сталкивался, надеюсь эта информация была полезной для вас))
Прошу на мой блог https://vk.com/blogchaklidi
Удачи)))
