Где посмотреть примеры красивой верстки сайта? — Хабр Q&A
Вот пример анимационой презентационной верстки:
seo.totalcan.com.ua
totalcan.com.ua/ru/5136_boom-market.htm
totalcan.com.ua/ru/5127_portfolio_vomed.htm
totalcan.com.ua/ru/5379_praktiker.htm
Ответ написан
https://raindrop.io/collection/40865
land-book.com
bestwebgallery.com
Ответ написан
Комментировать
www.csszengarden.com
Мало чистого HTML и много CSS, но не задавать стиль кнопки кучей классов, определяющих каждый свой стиль отдельного угла, а в стиле «задал класс одному блоку, и все элементы стилизовались».
Так же, хорошая верстка — это когда сменой файла стилей сайт меняется целиком (как на дзен-гарден). А дальше цепляем файл стиля для печати, файл стиля для наладоника, для телефона и пошло-поехало….
Ответ написан
Ни один из примеров не понравился… vichuga.info — ужас, загляните в код
Здесь можно найти много интересного — https://dribbble.com
Ответ написан
Комментировать
Тоже искал как-то подобный сайт, где можно черпать фантазию для верстки, различных hover-эффектов, анимаций для кнопок и т.
д. Нашел такой сайт — devtutor.ru и добавил в закладки в браузере. На нем большая коллекция готовых решений для верстальщика. В общем, годнота да и только. Пользуйся на здоровье)
Ответ написан
Комментировать
Нужно конкретно определить какие эффекты. Гугли виды скролл-эффектов. Куча вариантов с примерами и уроками.
html5.by/blog/scroll-effects — тут есть некоторые.
tympanus.net/codrops — это можно посмотреть, много интересного.
Ответ написан
Комментировать
А как насчет посмотреть шаблоны для разных движков?
Ответ написан
Комментировать
Я не совсем в тему буду, но вот вам пример годного лэндинга который работает и не парит пользователям голову с анимациями. Конверсия годная.
Так же если речь идёт про верстку, то можете и исходники посмотреть, там неплохой BEM.
https://teamkey.guru
Ответ написан
Комментировать
Мне очень понравилось промо Fly tornado.fly-phone.ru
Ответ написан
Ответ написан
Комментировать
Окромя вышеупомянутого awwwards часто смотрю patterntap и designshack для поиска вдохновения. Иногда переключаюсь на dribbble, и даже в pinterest нахожу «примеры для подражания».
Ответ написан
Комментировать
getgoldee.com
lixpen.com
https://moto360.motorola.com/
Ответ написан
Комментировать
Портфолио фрилансеров — HTML-верстка
ActiveBox
нет просмотров
Valorant
нет просмотров
Одностраничник с новостями
нет просмотров
Вело-Магазин «Летнее Солнце»(Пример для портфолио)
1 просмотр
Тестовый сайт для портфолио №6
1 просмотр
Тестовый сайт для портфолио №5
нет просмотров
Тестовый сайт для портфолио №4
нет просмотров
Тестовый сайт для портфолио №3
нет просмотров
Тестовый сайт для портфолио №2
нет просмотров
Тестовый сайт для портфолио №1
нет просмотров
Рыбацкий Магазин «Абордаж» (Пример Для Портфолио)
нет просмотров
Рандомний макет для практики у верстці сайтів
нет просмотров
Верстка сайта, обучающего wordpress
1 просмотр
Верстка сайта стоматологии
1 просмотр
Сайт косметологии
нет просмотров
Макет1
нет просмотров
Легкий и неинтересный сайт, адаптивный
нет просмотров
Главная страница магазина цаетов
1 просмотр
Template 4
нет просмотров
Figma — макет
нет просмотров
SportHub
нет просмотров
Landing page of «Burger Factory»
1 просмотр
Resume
1 просмотр
Portfolio
2 просмотра
Web studio
нет просмотров
Сайт курсов турецкого языка
1 просмотр
Сайт интернет магазина «Green Shop»
нет просмотров
Сайт онлайн-магазина мебели
нет просмотров
Персональний сайт психолога
нет просмотров
Сайт-портфолио дизайнера
нет просмотров
Сайт онлайн-магазина наушников
нет просмотров
Car payments
нет просмотров
Адаптивная верстка главной страницы сайта про профессии
нет просмотров
Вёрстка лендинга на основе шаблона
1 просмотр
Вёрстка многостраничного сайта со слайдером
4 просмотра
Вёрстка лендинга на основе шаблона
2 просмотра
Макет и структура HTML | HTML-плюшки
Макет является очень важным аспектом для любого веб-сайта, потому что правильно разработанная структура дает вам хороший и воздушный вид, а также интуитивно понятна и удобна для мобильных устройств (сайт должен быть адаптивным, поэтому его можно корректно просматривать на всех устройствах). Макет важен, потому что он придает особый вид созданному нами сайту, и для достижения разумного и эффективного макета требуется много внимания и времени.
Вы можете создавать веб-сайты, используя таблицы HTML или разделяющие теги в сочетании с другими метками форматирования, но современные сайты используют фреймворки на основе CSS и JavaScript для создания динамичных и отзывчивых веб-сайтов. Большинство веб-сайтов в настоящее время состоят из области основного содержимого, заголовка, панели навигации, подвала и часто боковой панели (левой или правой).
Макет HTML с использованием таблиц
В следующих строках мы приведем пример с использованием кода HTML и его атрибутов.
Наиболее часто используемый метод создания макетов использует тег
<голова>
Макет HTML с использованием таблиц
<тело>
<ширина таблицы = "70%" граница = "3">
Как и в примере выше, мы можем создать веб-страницу, используя несколько столбцов и таблиц. Таким образом, подробный контент будет расположен посередине, слева мы вставим меню, а в правой колонке разместим различную информацию, рекламу и так далее.
<голова>
Трехколоночный макет HTML
<тело>
<ширина таблицы = "100%" граница = "3">
Другим способом создания макетов является использование элемента
Здесь мы также будем использовать HTML-элемент , этот элемент используется для группировки существующих элементов на встроенном уровне.Макет HTML с использованием
Пример, который мы приведем, будет аналогичен приведенному выше, где использовался
ПРИМЕР СХЕМЫ ПРОЦЕССА |
||
|
Ссылка на один Ссылка два Ссылка третья Ссылка четыре |
Это пример макета с использованием таблиц | |
<центр>
www. Пример макета с использованием таблиц.com
|
||
|
Главное меню Ссылка на один Ссылка два Ссылка третья Ссылка четыре |
ПРИМЕР СХЕМЫ ПРОЦЕССА |
Правое меню ОБЪЯВЛЕНИЯ ИНФОРМАЦИЯ НОВОСТИ |
<голова>
Макеты HTML с использованием div и span
<тело>
<стиль div = "ширина: 80%">
ПРИМЕР СХЕМЫ ПРОЦЕССА
Главное меню
Ссылка на один
Ссылка два
Ссылка третья
Ссылка четыре
Это пример макета с использованием div и span
Правое меню
ОБЪЯВЛЕНИЯ
ИНФОРМАЦИЯ
НОВОСТИ
<центр>
www.
Пример макета с использованием div и span.com
Пример макета с использованием div и span.com
Теперь мы создадим макет, используя следующее:
| Элемент не предназначен для использования в качестве инструмента компоновки. Назначение элемента  |