Создание многостраничного сайта на HTML и CSS
Создание многостраничного сайта с использованием HTML и CSS является базовым этапом изучения веб-разработки. В этой статье мы подробно рассмотрим процесс разработки такого проекта, начиная от планирования структуры до финальной сборки.
Планирование структуры сайта
Первым шагом в создании многостраничного сайта является определение его структуры. Нужно продумать, какие разделы и страницы будут на сайте, как они будут связаны между собой, а также какой функционал будет доступен пользователям.
1. Определение раздела сайта – Создайте список всех потенциальных разделов вашего сайта, таких как "Главная", "О нас", "Услуги" и т.д.
2. Схема навигации – Разработайте детализированную схему того, как пользователь будет перемещаться по сайту.
3. Wireframe или низкоуровневый макет страниц помогает визуализировать расположение элементов и разделов.
Основы HTML
HTML (HyperText Markup Language) является языком разметки для создания веб-страниц. С помощью тегов и атрибутов HTML, вы создадите структуру вашего сайта.
1. Базовые HTML-теги – Изучите основные теги HTML такие как ``, ``, ``, ``, `<body>`, `<header>`, `<footer>`, `<nav>`, `<section>`, `<article>`, `<aside>`, `<h2>` через `<h6>` для заголовков и `<p>` для параграфов.<br>2. <strong>Структура страницы</strong> – Составьте основной каркас вашего сайта с помощью этих тегов, создавая файлы для каждой отдельной страницы.<br><h2>Основы CSS</h2><br>CSS (Cascading Style Sheets) используется для стилизации элементов на веб-странице. Это включает в себя цвета, шрифты и расположение элементов.<br>1. <strong>Внутренние и внешние листы стилей</strong> – Используйте внутренний CSS тег `<style>` или внешний файл .css для применения стилей к элементам HTML.<br>2. <strong>Селекторы</strong> – Изучите различные типы селекторов, такие как элемент (type), класс (.class) и идентификатор (<h2>id).</h2>3. <strong>Каскадирование и специфичность</strong> – Понятие каскадирования и специфичности поможет вам понять, какие стили применимы в различных ситуациях.<br>4. <strong>Отзывчивый дизайн</strong> – Применение медиа-запросов с помощью CSS3 для обеспечения адаптивности вашего сайта на разных устройствах.<br><h2>Работа со шрифтами и цветами</h2><br>1. <strong>Глобальные стили</strong> – Выберите базовые шрифты, цвета фона и текста, которые будут использоваться по умолчанию в различных разделах веб-сайта.<br>2. <strong>Специфические стили для блоков</strong> – Примените специфические настройки к заголовкам (например, разные шрифты и размеры для h1 и p), цветовых элементов (кнопки, акценты) и т.п.<br><h2>Композиция страницы</h2><br>1. <strong>Расположение контента</strong> – Используйте CSS для выравнивания содержимого в макет, применения фонового размещения, как рексативные адаптивные блочные дизайны с помощью Flexbox или Grid.<br>2. <strong>Адаптируемая верстка</strong> — Включите медиа-запросы для обеспечения адаптивности вебсайта под все виды устройств от настольных ПК и планшетов до мобильных телефонов, что сделает интерфейс удобным для каждого пользователя.<br><h2>Несколько HTML-страниц</h2><br>Далее необходимо воспроизвести структуру между несколькими отдельными документами .html. Создавайте основные разделы (шапку и подвал) в одном общем CSS файле, а также разрабатывать модульные страницы с различным количеством внутренних разделами.<br><h2>Объединение элементов</h2><br>Используйте CSS классы для повторного использования кодовых стилей по всему сайту:<br>- <strong>Navigation Menu</strong> – Единые шаблоны навигации должны быть в каждом вашем файле.<br>- <strong>Global Stylesheet</strong> — Это отдельный большой .css файл, который используется для общих структурных и текстовых стилей во всем проекте.<br><h2>Ошибки и проверка</h2><br>Регулярная работа со специализированными инструментами таких как Chrome DevTools может помочь быстро отладить и выявить потенциальные проблемы. Это необходимо делать на протяжении всех этапов веб-проектирования от прототипизации до запуска в живую среду.<br><h2>Опубликование сайта</h2><br>1. <strong>Упаковка</strong> – Используйте инструменты для минификации кода, объединения CSS/JS файлов и других оптимизаций перед загрузкой их на веб хостинг.<br>2. <strong>Выбор сервера и доменное имя</strong> — Выберите надежный хостинг, предоставляющий все необходимое для стабильной работы и подберите соответствующий домен для вашего сайта.<br><h2>Основная сборка и завершение</h2><br>1. <strong>Троянский конверт с помощью GIT</strong> – Восстребуйте умение использовать базовую систему управления версиями, такие как Git или SVN.<br>2. <strong>Ключивые мета-сведения</strong> – Подготовте SEO (Search Engine Optimization) ключей, вроде правильных meta тегов title и description для привлечения посетителей через основные поисковые системы.<br>В дополнение к этой информации, обратите внимание на использование фреймворков типы Bootstrap как они могут существенно ускорить ваш рабочий процесс с CSS и HTML но при этом следует не забывать об основах.<br>Ключевые слова: создания сайта, многостраничный сайт, HTML5, CSS3, адаптивная верстка, медиа-запросы, веб-разработка<br><h2>Короткое описание статьи:</h2>Статья посвящена основным этапам разработки многостраничного сайта с использованием HTML и CSS. В ней рассматриваются вопросы планирования структуры сайта, создание базовой разметки на HTML, применение стилей через CSS, работа со шрифтами и цветами, принципы композиции страницы, адаптивная верстка, общие техники разработки для нескольких файлов .html, а также практические рекомендации по отладке, оптимизации сайта и его публикации. Также в статье описаны некоторые инструменты и методологии, такие как использование фреймворков и систем контроля версий.</div><div class="popular">
<h2 style="margin-bottom: 1em; font-weight: bold;">Посмортите другие материалы в категории: Сделать сайт:</h2>
<div class="popularitem">
<a class="popularitemimg" href="/sdelat-sayt/notion-sayt-sdelat"><img src="/content/images/thumb/34b1c605-3b96-4205-8047-b6926e84a8f3.jpg" title="Notion сайт сделать" alt="Notion сайт сделать"/></a>
<a style="position: absolute; text-shadow: #000 0 0 0.5em; left: 0.8em; top: 0.8em; font-size: 0.8em; font-weight: bold; color: #FFFFFF;" href="/sdelat-sayt/notion-sayt-sdelat">Notion сайт сделать</a>
<div style="position: absolute; text-shadow: #000 0 0 0.5em; right: 2.5em; bottom: 0.5em; font-size: 0.8em; font-weight: bold; color: #FFFFFF;">92</div>
<img style="position: absolute; right: 0.8em; bottom: 0.8em; font-size: 0.8em; font-weight: bold;" src="/templates/img/eye.png" width="20" height="20" title="просмотров" alt="просмотров"/>
<a style="position: absolute; text-shadow: #000 0 0 0.5em; left: 0.8em; bottom: 0.6em; font-size: 0.8em; font-weight: bold; color: #FFFFFF;" href="/sdelat-sayt/notion-sayt-sdelat">28.12.2024</a>
</div>
<div class="popularitem">
<a class="popularitemimg" href="/sdelat-sayt/sdelat-knopku-telegram-na-sayt"><img src="/content/images/thumb/9f2b5bd2-1a73-4e11-bdcb-d59f135762da.jpg" title="Сделать кнопку телеграм на сайт" alt="Сделать кнопку телеграм на сайт"/></a>
<a style="position: absolute; text-shadow: #000 0 0 0.5em; left: 0.8em; top: 0.8em; font-size: 0.8em; font-weight: bold; color: #FFFFFF;" href="/sdelat-sayt/sdelat-knopku-telegram-na-sayt">Сделать кнопку телеграм на сайт</a>
<div style="position: absolute; text-shadow: #000 0 0 0.5em; right: 2.5em; bottom: 0.5em; font-size: 0.8em; font-weight: bold; color: #FFFFFF;">87</div>
<img style="position: absolute; right: 0.8em; bottom: 0.8em; font-size: 0.8em; font-weight: bold;" src="/templates/img/eye.png" width="20" height="20" title="просмотров" alt="просмотров"/>
<a style="position: absolute; text-shadow: #000 0 0 0.5em; left: 0.8em; bottom: 0.6em; font-size: 0.8em; font-weight: bold; color: #FFFFFF;" href="/sdelat-sayt/sdelat-knopku-telegram-na-sayt">27.12.2024</a>
</div>
<div class="popularitem">
<a class="popularitemimg" href="/sdelat-sayt/hostinger-ru-sdelat-svoy-sayt"><img src="/content/images/thumb/be675059-604d-4185-b23d-49b3835f2c2c.jpg" title="Хостингер ру сделать свой сайт" alt="Хостингер ру сделать свой сайт"/></a>
<a style="position: absolute; text-shadow: #000 0 0 0.5em; left: 0.8em; top: 0.8em; font-size: 0.8em; font-weight: bold; color: #FFFFFF;" href="/sdelat-sayt/hostinger-ru-sdelat-svoy-sayt">Хостингер ру сделать свой сайт</a>
<div style="position: absolute; text-shadow: #000 0 0 0.5em; right: 2.5em; bottom: 0.5em; font-size: 0.8em; font-weight: bold; color: #FFFFFF;">83</div>
<img style="position: absolute; right: 0.8em; bottom: 0.8em; font-size: 0.8em; font-weight: bold;" src="/templates/img/eye.png" width="20" height="20" title="просмотров" alt="просмотров"/>
<a style="position: absolute; text-shadow: #000 0 0 0.5em; left: 0.8em; bottom: 0.6em; font-size: 0.8em; font-weight: bold; color: #FFFFFF;" href="/sdelat-sayt/hostinger-ru-sdelat-svoy-sayt">28.12.2024</a>
</div>
<div class="popularitem">
<a class="popularitemimg" href="/sdelat-sayt/mojno-li-sdelat-besplatnyy-audit-sayta"><img src="/content/images/thumb/08860a05-4c5c-4000-bdfb-d533f48ee132.jpg" title="Можно ли сделать бесплатный аудит сайта" alt="Можно ли сделать бесплатный аудит сайта"/></a>
<a style="position: absolute; text-shadow: #000 0 0 0.5em; left: 0.8em; top: 0.8em; font-size: 0.8em; font-weight: bold; color: #FFFFFF;" href="/sdelat-sayt/mojno-li-sdelat-besplatnyy-audit-sayta">Можно ли сделать бесплатный аудит сайта</a>
<div style="position: absolute; text-shadow: #000 0 0 0.5em; right: 2.5em; bottom: 0.5em; font-size: 0.8em; font-weight: bold; color: #FFFFFF;">82</div>
<img style="position: absolute; right: 0.8em; bottom: 0.8em; font-size: 0.8em; font-weight: bold;" src="/templates/img/eye.png" width="20" height="20" title="просмотров" alt="просмотров"/>
<a style="position: absolute; text-shadow: #000 0 0 0.5em; left: 0.8em; bottom: 0.6em; font-size: 0.8em; font-weight: bold; color: #FFFFFF;" href="/sdelat-sayt/mojno-li-sdelat-besplatnyy-audit-sayta">27.12.2024</a>
</div>
<div class="popularitem">
<a class="popularitemimg" href="/sdelat-sayt/sdelat-avatarku-robloks-sayt"><img src="/content/images/thumb/dec21044-c4f3-43bc-8257-b838d4ee577f.jpg" title="Сделать аватарку роблокс сайт" alt="Сделать аватарку роблокс сайт"/></a>
<a style="position: absolute; text-shadow: #000 0 0 0.5em; left: 0.8em; top: 0.8em; font-size: 0.8em; font-weight: bold; color: #FFFFFF;" href="/sdelat-sayt/sdelat-avatarku-robloks-sayt">Сделать аватарку роблокс сайт</a>
<div style="position: absolute; text-shadow: #000 0 0 0.5em; right: 2.5em; bottom: 0.5em; font-size: 0.8em; font-weight: bold; color: #FFFFFF;">81</div>
<img style="position: absolute; right: 0.8em; bottom: 0.8em; font-size: 0.8em; font-weight: bold;" src="/templates/img/eye.png" width="20" height="20" title="просмотров" alt="просмотров"/>
<a style="position: absolute; text-shadow: #000 0 0 0.5em; left: 0.8em; bottom: 0.6em; font-size: 0.8em; font-weight: bold; color: #FFFFFF;" href="/sdelat-sayt/sdelat-avatarku-robloks-sayt">26.12.2024</a>
</div>
<div class="popularitem">
<a class="popularitemimg" href="/sdelat-sayt/sdelat-sayt-s-domenom-ru"><img src="/content/images/thumb/489ea4f5-e3d5-4ab1-9685-eaa84067c4e5.jpg" title="Сделать сайт с доменом ru" alt="Сделать сайт с доменом ru"/></a>
<a style="position: absolute; text-shadow: #000 0 0 0.5em; left: 0.8em; top: 0.8em; font-size: 0.8em; font-weight: bold; color: #FFFFFF;" href="/sdelat-sayt/sdelat-sayt-s-domenom-ru">Сделать сайт с доменом ru</a>
<div style="position: absolute; text-shadow: #000 0 0 0.5em; right: 2.5em; bottom: 0.5em; font-size: 0.8em; font-weight: bold; color: #FFFFFF;">80</div>
<img style="position: absolute; right: 0.8em; bottom: 0.8em; font-size: 0.8em; font-weight: bold;" src="/templates/img/eye.png" width="20" height="20" title="просмотров" alt="просмотров"/>
<a style="position: absolute; text-shadow: #000 0 0 0.5em; left: 0.8em; bottom: 0.6em; font-size: 0.8em; font-weight: bold; color: #FFFFFF;" href="/sdelat-sayt/sdelat-sayt-s-domenom-ru">21.12.2024</a>
</div>
<div class="popularitem">
<a class="popularitemimg" href="/sdelat-sayt/sayt-dlya-zakupok-sdelat"><img src="/content/images/thumb/20ef21e4-dbda-4048-bbff-17aefc1f106d.jpg" title="Сайт для закупок сделать" alt="Сайт для закупок сделать"/></a>
<a style="position: absolute; text-shadow: #000 0 0 0.5em; left: 0.8em; top: 0.8em; font-size: 0.8em; font-weight: bold; color: #FFFFFF;" href="/sdelat-sayt/sayt-dlya-zakupok-sdelat">Сайт для закупок сделать</a>
<div style="position: absolute; text-shadow: #000 0 0 0.5em; right: 2.5em; bottom: 0.5em; font-size: 0.8em; font-weight: bold; color: #FFFFFF;">80</div>
<img style="position: absolute; right: 0.8em; bottom: 0.8em; font-size: 0.8em; font-weight: bold;" src="/templates/img/eye.png" width="20" height="20" title="просмотров" alt="просмотров"/>
<a style="position: absolute; text-shadow: #000 0 0 0.5em; left: 0.8em; bottom: 0.6em; font-size: 0.8em; font-weight: bold; color: #FFFFFF;" href="/sdelat-sayt/sayt-dlya-zakupok-sdelat">27.12.2024</a>
</div>
<div class="popularitem">
<a class="popularitemimg" href="/sdelat-sayt/sdelat-sayt-pod-klyuch-moskva"><img src="/content/images/thumb/3061eedd-98b8-4765-a90d-3b3dcc529306.jpg" title="Сделать сайт под ключ москва" alt="Сделать сайт под ключ москва"/></a>
<a style="position: absolute; text-shadow: #000 0 0 0.5em; left: 0.8em; top: 0.8em; font-size: 0.8em; font-weight: bold; color: #FFFFFF;" href="/sdelat-sayt/sdelat-sayt-pod-klyuch-moskva">Сделать сайт под ключ москва</a>
<div style="position: absolute; text-shadow: #000 0 0 0.5em; right: 2.5em; bottom: 0.5em; font-size: 0.8em; font-weight: bold; color: #FFFFFF;">79</div>
<img style="position: absolute; right: 0.8em; bottom: 0.8em; font-size: 0.8em; font-weight: bold;" src="/templates/img/eye.png" width="20" height="20" title="просмотров" alt="просмотров"/>
<a style="position: absolute; text-shadow: #000 0 0 0.5em; left: 0.8em; bottom: 0.6em; font-size: 0.8em; font-weight: bold; color: #FFFFFF;" href="/sdelat-sayt/sdelat-sayt-pod-klyuch-moskva">27.12.2024</a>
</div>
<div class="popularitem">
<a class="popularitemimg" href="/sdelat-sayt/sayt-gde-mojno-sdelat-zvuk"><img src="/content/images/thumb/7ddc2978-abf6-40dd-b90e-03ea90e4cda5.jpg" title="Сайт где можно сделать звук" alt="Сайт где можно сделать звук"/></a>
<a style="position: absolute; text-shadow: #000 0 0 0.5em; left: 0.8em; top: 0.8em; font-size: 0.8em; font-weight: bold; color: #FFFFFF;" href="/sdelat-sayt/sayt-gde-mojno-sdelat-zvuk">Сайт где можно сделать звук</a>
<div style="position: absolute; text-shadow: #000 0 0 0.5em; right: 2.5em; bottom: 0.5em; font-size: 0.8em; font-weight: bold; color: #FFFFFF;">79</div>
<img style="position: absolute; right: 0.8em; bottom: 0.8em; font-size: 0.8em; font-weight: bold;" src="/templates/img/eye.png" width="20" height="20" title="просмотров" alt="просмотров"/>
<a style="position: absolute; text-shadow: #000 0 0 0.5em; left: 0.8em; bottom: 0.6em; font-size: 0.8em; font-weight: bold; color: #FFFFFF;" href="/sdelat-sayt/sayt-gde-mojno-sdelat-zvuk">27.12.2024</a>
</div>
</div>
</div>
<div id="pageright" class="pageright">
<div style="margin: 1em; font-size: 0.9em; line-height: 1.2em;">
Привет! Меня зовут Илья Федотов я веб-разработчик.<br><br>
Занимаюсь <b>разработкой сайтов</b>, CRM-Систем и веб-приложений более 12 лет. Разрабатываю <strong>веб-проекты</strong> любой сложности на PHP + JS
<img style="margin-top: 10px; margin-bottom: 10px; border-radius: 20px;" src="/content/my/fedotov.jpg" width="100%" height="auto" alt=""/>
<div style="text-align: center;">
Звоните:
<a style="font-weight: bold; font-size: 1.4em; display: block; margin-bottom: 0.5em;" href="tel:+79174373926">+7 917 43-73-926</a>
или пишите:
<a style="font-weight: bold; font-size: 1.4em; display: block;" href="https://wa.me/79174373926?text=%D0%9F%D1%80%D0%B8%D0%B2%D0%B5%D1%82!%20%F0%9F%91%8B%20%D0%9C%D0%B5%D0%BD%D1%8F%20%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D0%B5%D1%81%D1%83%D0%B5%D1%82...">WhatsApp</a>
</div>
<div class="popular2">
<h3 style="margin-bottom: 1em; font-weight: bold;">Самое читаемое:</h3>
<div class="popularitem2">
<a class="popularitemimg2" href="/dizayn-sayta/dizayn-okna-registracii-na-sayte-krasivyy"><img src="/content/images/thumb/fc036ca3-874f-48c7-b0b9-3d4527279ab5.jpg" title="Дизайн окна регистрации на сайте красивый" alt="Дизайн окна регистрации на сайте красивый"/></a>
<a style="position: absolute; left: 0.6em; top: 0.6em; font-size: 1em; line-height: 1em; font-weight: bold; color: #FFF; text-shadow: #000 0.1em 0.1em 0.2em" href="/dizayn-sayta/dizayn-okna-registracii-na-sayte-krasivyy">Дизайн окна регистрации на сайте красивый</a>
<div style="position: absolute; text-shadow: black 0.1em 0.1em 0.2em; right: 3em; bottom: 0.6em; font-size: 0.8em; font-weight: bold; color: #FFFFFF;">204</div>
<img style="position: absolute; right: 0.8em; bottom: 0.8em; font-size: 0.8em; font-weight: bold;" src="/templates/img/eye.png" width="20" height="20" title="просмотров" alt="просмотров"/>
<a style="position: absolute; text-shadow: black 0.1em 0.1em 0.2em; left: 0.8em; bottom: 0.6em; font-size: 0.8em; font-weight: bold; color: #FFFFFF;" href="/dizayn-sayta/dizayn-okna-registracii-na-sayte-krasivyy">29.01.2025</a>
</div>
<div class="popularitem2">
<a class="popularitemimg2" href="/dizayn-sayta/permskiy-tehnikum-dizayna-i-tehnologiy-sayt"><img src="/content/images/thumb/723cadb1-950e-4479-9394-d93685be30df.jpg" title="Пермский техникум дизайна и технологий сайт" alt="Пермский техникум дизайна и технологий сайт"/></a>
<a style="position: absolute; left: 0.6em; top: 0.6em; font-size: 1em; line-height: 1em; font-weight: bold; color: #FFF; text-shadow: #000 0.1em 0.1em 0.2em" href="/dizayn-sayta/permskiy-tehnikum-dizayna-i-tehnologiy-sayt">Пермский техникум дизайна и технологий сайт</a>
<div style="position: absolute; text-shadow: black 0.1em 0.1em 0.2em; right: 3em; bottom: 0.6em; font-size: 0.8em; font-weight: bold; color: #FFFFFF;">197</div>
<img style="position: absolute; right: 0.8em; bottom: 0.8em; font-size: 0.8em; font-weight: bold;" src="/templates/img/eye.png" width="20" height="20" title="просмотров" alt="просмотров"/>
<a style="position: absolute; text-shadow: black 0.1em 0.1em 0.2em; left: 0.8em; bottom: 0.6em; font-size: 0.8em; font-weight: bold; color: #FFFFFF;" href="/dizayn-sayta/permskiy-tehnikum-dizayna-i-tehnologiy-sayt">29.01.2025</a>
</div>
<div class="popularitem2">
<a class="popularitemimg2" href="/dizayn-sayta/osenniy-dizayn-sayta"><img src="/content/images/thumb/7503971c-9ce2-4362-906c-4cba1cf126e5.jpg" title="Осенний дизайн сайта" alt="Осенний дизайн сайта"/></a>
<a style="position: absolute; left: 0.6em; top: 0.6em; font-size: 1em; line-height: 1em; font-weight: bold; color: #FFF; text-shadow: #000 0.1em 0.1em 0.2em" href="/dizayn-sayta/osenniy-dizayn-sayta">Осенний дизайн сайта</a>
<div style="position: absolute; text-shadow: black 0.1em 0.1em 0.2em; right: 3em; bottom: 0.6em; font-size: 0.8em; font-weight: bold; color: #FFFFFF;">115</div>
<img style="position: absolute; right: 0.8em; bottom: 0.8em; font-size: 0.8em; font-weight: bold;" src="/templates/img/eye.png" width="20" height="20" title="просмотров" alt="просмотров"/>
<a style="position: absolute; text-shadow: black 0.1em 0.1em 0.2em; left: 0.8em; bottom: 0.6em; font-size: 0.8em; font-weight: bold; color: #FFFFFF;" href="/dizayn-sayta/osenniy-dizayn-sayta">30.01.2025</a>
</div>
<div class="popularitem2">
<a class="popularitemimg2" href="/sozdanie-saytov/sozdanie-sayta-v-visual-studio-code"><img src="/content/images/thumb/d25f8f04-755c-4752-90b6-3da7a1386e65.jpg" title="Создание сайта в visual studio code" alt="Создание сайта в visual studio code"/></a>
<a style="position: absolute; left: 0.6em; top: 0.6em; font-size: 1em; line-height: 1em; font-weight: bold; color: #FFF; text-shadow: #000 0.1em 0.1em 0.2em" href="/sozdanie-saytov/sozdanie-sayta-v-visual-studio-code">Создание сайта в visual studio code</a>
<div style="position: absolute; text-shadow: black 0.1em 0.1em 0.2em; right: 3em; bottom: 0.6em; font-size: 0.8em; font-weight: bold; color: #FFFFFF;">107</div>
<img style="position: absolute; right: 0.8em; bottom: 0.8em; font-size: 0.8em; font-weight: bold;" src="/templates/img/eye.png" width="20" height="20" title="просмотров" alt="просмотров"/>
<a style="position: absolute; text-shadow: black 0.1em 0.1em 0.2em; left: 0.8em; bottom: 0.6em; font-size: 0.8em; font-weight: bold; color: #FFFFFF;" href="/sozdanie-saytov/sozdanie-sayta-v-visual-studio-code">08.12.2024</a>
</div>
<div class="popularitem2">
<a class="popularitemimg2" href="/dizayn-sayta/gde-iskat-referensy-dlya-dizayna-sayta"><img src="/content/images/thumb/e9691714-0704-4f76-ba56-32615169da62.jpg" title="Где искать референсы для дизайна сайта" alt="Где искать референсы для дизайна сайта"/></a>
<a style="position: absolute; left: 0.6em; top: 0.6em; font-size: 1em; line-height: 1em; font-weight: bold; color: #FFF; text-shadow: #000 0.1em 0.1em 0.2em" href="/dizayn-sayta/gde-iskat-referensy-dlya-dizayna-sayta">Где искать референсы для дизайна сайта</a>
<div style="position: absolute; text-shadow: black 0.1em 0.1em 0.2em; right: 3em; bottom: 0.6em; font-size: 0.8em; font-weight: bold; color: #FFFFFF;">103</div>
<img style="position: absolute; right: 0.8em; bottom: 0.8em; font-size: 0.8em; font-weight: bold;" src="/templates/img/eye.png" width="20" height="20" title="просмотров" alt="просмотров"/>
<a style="position: absolute; text-shadow: black 0.1em 0.1em 0.2em; left: 0.8em; bottom: 0.6em; font-size: 0.8em; font-weight: bold; color: #FFFFFF;" href="/dizayn-sayta/gde-iskat-referensy-dlya-dizayna-sayta">29.01.2025</a>
</div>
</div>
</div></div>
</div>
<div class="pagebottom">
<div class="pagebottomc"><div class="copy">
<div class="copy_text"><p>ИП Федотов И.А - Создание сайтов, веб-проектов и веб-приложений. Все права сохранены.</p></div>
<div class="copy_caunter"><!--LiveInternet counter--><a href="https://www.liveinternet.ru/click" target="_blank"><img id="licnt3CBF" width="88" height="31" style="border:0" title="LiveInternet: показано число просмотров за 24 часа, посетителей за 24 часа и за сегодня" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAEALAAAAAABAAEAAAIBTAA7" alt=""/></a><script>(function(d,s){d.getElementById("licnt3CBF").src= "https://counter.yadro.ru/hit?t16.1;r"+escape(d.referrer)+ ((typeof(s)=="undefined")?"":";s"+s.width+"*"+s.height+"*"+ (s.colorDepth?s.colorDepth:s.pixelDepth))+";u"+escape(d.URL)+ ";h"+escape(d.title.substring(0,150))+";"+Math.random()}) (document,screen)</script><!--/LiveInternet--></div>
</div></div>
</div>
<div style="width: 96%; background-color: #AF0002; position: fixed; bottom: 0px; padding-top: 1em; padding-bottom: 1em; padding-left: 2%; padding-right: 2%; font-size: 1em; color: #FFFFFF; text-align: center; z-index: 2000;">Продолжая, Вы принимаете нашу политику использования cookies. Мы используем файлы cookies для улучшения работы сайта. Чтобы узнать больше, ознакомьтесь с нашей <a style="color: #FFFFFF;text-decoration: underline; font-weight: bold;" target="_blank" href="/cookies/policy">политикой обработки персональных данных</a> далее "ПОПД".<div><a style="color: #FFFFFF; display: block; padding: 10px; border: 1px solid #FFFFFF; max-width: 400px; margin: 0 auto; margin-top: 1em; font-weight: bold; font-size: 1em; text-align: center;" href="/cookies">Хорошо, с ПОПД ознакомлен(а)</a></div></div><link href='/templates/css/style.css' media='all' rel='stylesheet' type='text/css'/>
</body>
</html> 