Метка: html

БЭМ

Stay D.R.Y Don't repeat yourself Запись по БЭМ CSS стили для элемента, идут в алфавитном порядке МЕНЮ Header&Nav Social Image-Box Header & Nav Header & Nav - 1 HTMLSCSSJSFiddleGistHTML <!-- begin Header =========================================================================== --> <header class="header clearfix"> <!-- begin Header Container --> <div class="container header__container clearfix"> <div class="header__logo"> <a href="#" class="header__logo-link"> <img src="http://via.placeholder.com/200x50/4F84DB/FFFFFF?text=LOGO" alt="" class="header__logo-image"> [...]
Read More

AMP События

Документация СложностьAMP 85%HTML 80%CSS 20%JavaScript 30%AMP cобытия. Полезные ссылки. Globally defined Events and Actions Form Events AMP - bind AMP - bind example Standard-actions.amp.html Stackoverflow AMP form event example Stackoverflow. AMP form select How to get the value of the data attribute? Handling Multiple Events Твит!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
Read More

AMP Всплывающее окно

Документация СложностьAMP 50%HTML 70%CSS 60%JavaScript 30%AMP - Lightbox - Базовый вариант Первым делом, напишем пример простого AMP всплывающего окна. К этому моменту, вы уже должны понимать базовый HTML шаблон, соответствующий критериям AMP. Создадим пустую папку с нашим проектом. В данной папке, создадим файл: index.html В данном файле, напишем следующий код: <!doctype html> <html amp lang="ru"> [...]
Read More

AMP Контактная форма

Документация СложностьAMP 80%HTML 70%CSS 60%JavaScript 20%PHP 30%Пример формы на AMP странице, используя PHP Первым делом напишем пример простой AMP формы, используя PHP. Убедимся, что нет ошибок в консоли. К этому моменту, вы должны уже знать кое-что о AMP и понимать базовый AMP шаблон страницы, а также помнить, что в AMP используется только https. Конечная точка [...]
Read More