Иногда, в поисках идей, я просматриваю каталоги шаблонов для сайтов. В этой статье я расскажу, что такое CSS-шаблоны
для сайта, где лучше всего их искать.
Что такое шаблон для сайта
Под шаблоном в этой статье я понимаю сверстанный макет, то есть набор HTML и CSS файлов, изображений и, возможно, скриптов.
Шаблон отличается от PSD-макета (несверстанного, т.е. изображения), и темы оформления (которая чаще всего является уже конечным продуктом, полностью готовым к установке на CMS). Шаблон является промежуточным продуктом между PSD-макетом и темой оформления.
Зачем нужны готовые CSS-шаблоны?
Используя сверстанный шаблон, можно быстро и без особых проблем сделать тему оформления для любой CMS. В одном из ближайших постов я расскажу, как на основе сверстанного шаблона и темы Toolbox создать собственную тему для блога на WordPress. Также их можно использовать и без CMS, для создания простых сайтов типа визиток.
Ну а можно просто изучать с их помощью верстку, смотреть что и как сделал автор, пробовать как-то изменить, добавлять что-то свое, ну и так далее. В общем, готовый CSS-шаблон
– это полезный инструмент для веб-творчества 🙂
На бесплатные шаблоны действуйт, как правило, лицензия Creative Commons , поэтому у вас не возникнет проблем с его использованием, изменением, и последующим распространением.
Где можно найти CSS-шаблоны?
Обыно я ищу бесплатные шаблоны на следующих сайтах:
- http://www.freecss.in – около 170 шаблонов, для каждого выводится дата добавления в каталог
- http://templated.org – очень удобная система поиска и сортировки: по цвету, лицензии; около 500 шаблонов, для каждого выводится количество скачиваний и дата добавления
И напишем блочный шаблон сайта.
В этой статье я дам вам не только код блочного шаблона сайта, а и подробно расскажу, и покажу, что и как в нём можно изменять, и куда складывать файлы.
Итак, такой вот сайт.
Тему грузоперевозок я взял для примера потому, что чаще всего именно люди работающие в этой сфере, обращаются ко мне за помощью.
Но Вы, прочитав статью, сможете сделать всё по своей тематике, и со своей конструкцией каркаса сайта.
Времени это займёт столько, сколько потребуется на внимательное прочтение статьи, и материалов по ссылкам, и последовательное выполнение моих инструкций.
Код блочного сайта
/* Стилевое оформление */
http://trueimages.ru/img/81/90/b1718f15.png
">
Наша работа
Здравствуйте уважаемые будущие веб-мастера!
Мне 55 лет и я рад приветствовать Вас на своём сайте.
Этот сайт первый, который я разработал самостоятельно,
а до этого умел только входить в интернет.
Почему я решил его сделать?
За те 3 месяца, пока
разбирался в сайтостроении и создавал этот ресурс
обнаружилось, что авторы руководств по созданию
сайтов считают многие нюансы само собой разумеющимися
и не обращают на них внимание.
А мне, учитывая
возраст и «опыт», было не просто понять как раз эти
нюансы, они отнимали больше всего времени. И я решил
написать свой материал, так что-бы другим было легче
сориентироваться в потоке новой информации.
http://trueimages.ru/img/0d/64/07a18f15.png
">
Здесь
«разжеваны» все мелочи сопровождающие создание сайта,
мимо которых обычно проскакивают другие авторы.
Если вам что-то будет непонятно, спрашивайте, для
меня нет «глупых» вопросов.
Читайе и создавайте свой сайт самостоятельно, каким
бы ни был Ваш возраст и стаж работы на компьютере.
Уверен, у Вас получится еще лучше и уж точно, в
несколько раз быстрее, чем у меня.
Это код статичного сайта, а это значит, что на экранах с разным расширением, он будет оставаться в неизменных размерах.
То есть на мобилах у него появится полоса горизонтальной прокрутки, которой придётся пользоваться, чтоб просмотреть сайт целиком.
А теперь вернёмся к нашему примеру.
Прежде чем начать работать с кодом, нужно создать место где будет располагаться сайт до вывода его в интернет.
Для редактирования этого кода, потребуется HTML редактор. У кого он есть, очень хорошо, у кого нет, предлагаю .
Как начать в нём работу, то есть создать файл, прочитайте .
Когда редактор будет установлен, откройте его, скопируйте из представленного выше кода строки 1 — 6, и вставьте в поле редактора, а затем строки 118 — 153, и так же вставьте в редактор.
Таким образом мы выбрали HTML часть кода, из которой создадим HTML файл. Удалите мою нумерацию строк, создайте файл, назовите его index.html, и сохраните в директорию сайта.
Директория должна приобрести такой вид:
Следующим шагом создаём файл style.css, в котором будет расположена таблица стилей.
Вот тут внимание! Файл style.css, в дальнейшем, будет подключаться ко всем страницам сайта, поэтому в нём нужно собрать стили, формирующие основу страницы.
А это все стили из выше приведённого кода, кроме селекторов .left
и .right
, относящихся непосредственно к тексту статьи.
В дальнейшем, если Вам захочется внести какие-то изменения в конструкцию сайта, достаточно будет внести их в файл style.css, и они отобразятся на всех страницах.
Итак, в директории сайта создаём ещё одну папку, и называем её css.
Затем возвращаемся в редактор, открываем новый документ (первая иконка панели), копируем и вставляем в него строки 8 — 80 и 90 — 116.
Пропускаем только стили оформляющие картинки в тексте, так как они предназначены только для одной страницы.
Убираем мою нумерацию, и сохраняем этот новый документ во вновь созданную папку css, под названием style.css.
Делается это следующим образом: в теге
, можно между тегами
и
, вставляется тег <link>, с атрибутами определяющими местоположение и назначение css.</p>
<p><link
href
="css/style.css
" type
="text/css
" rel
="stylesheet
"></p>
<p>После тега <link>, подключим стили, оформляющие картинки расположенные в тексте статьи. (строки 81 — 88). Убираем мою нумерацию и комментарии, так как в файле html комментарии css не работают, и даже наоборот, могут всё испортить.</p>
<p><style
"><br>.left
{<br>float
: left
;<br>margin
: 30px 7px 7px 7px
;<br>
}<br>.right
{<br>float
: right
;<br>margin
: 7px 0 7px 7px
;<br>
}<br>
</style
></p>
<p>После каждой манипуляции с кодом в редакторе, не забывайте сохранить изменения (третья иконка слева). При этом иконка файла должна из красной стать синей.</p>
<p>Вид в редакторе:</p>
<p><img src='https://i0.wp.com/starper55plys.ru/wp-content/uploads/2013/08/4.png' align="center" width="100%" loading=lazy></p>
<p>Следующим шагом разберёмся с изображениями. У меня картинки загружены через сервис trueimages, только для того, чтоб страница открылась у Вас в браузере.</p>
<p>Вам же нужны будут свои изображения, и их нужно сделать, или найти в интернете.</p>
<p>Можно посмотреть в одноимённой статье. Если-же у Вас есть фотошоп, то все изображения лучше делать в нём.</p>
<p>Все сделанные, или найденные изображения, нужно поместить в папку images директории сайта.</p>
<p>Первым делом поменяем шапку сайта. Для этого в файле index.html удалим тег <img> c моей картинкой (строка 124)</p>
<p><img src='https://i2.wp.com/starper55plys.ru/wp-content/uploads/2013/08/5.png' align="center" width="100%" loading=lazy></p>
<p>Затем в файле style.css удалим селектор img.</p>
<p>background-image
: url(../images/schapka.png)
;<br></p>
<p>В редакторе это будет смотреться так</p>
<p><img src='https://i2.wp.com/starper55plys.ru/wp-content/uploads/2013/08/6.png' align="center" width="100%" loading=lazy></p>
<p>Двоеточие в начале адреса изображения ставиться тогда, когда селектор находится в в отдельном css файле. Если стили подключены в html файле, двоеточие в начале адреса не ставится.</p>
<p>Обратите внимание, что размер картинки не должен превышать размер блока header. Определяется он так: щёлкните по файлу картинки правой клавишей, в появившемся меню выбираете "Свойства", и затем, "Подробно", там и будут показаны размеры.</p>
<p>Теперь, если пройти в меню "Запуск", и открыть index.html, то откроется страница с Вашим изображением в шапке сайта.</p>
<p>Меняем остальные картинки (строки 128,129,130,135,141) В отличие от предыдущей, в них нужно изменить только адреса. Удалить адреса моих изображений, и вставить адреса Ваших.</p>
<p>После чего они приобретут примерно такой вид. Название картинки у меня i2.png, а у Вас будет своё.</p>
<p><p
><img src='/prostye-html-shablony-gde-skachat-gotovye-css-shablony-html-shablony/' loading=lazy>Наши сотрудники</p
></p>
<p>Ну вот, осталось написать свои заголовки, оформить и подвинуть их туда куда Вам нужно(как это сделать сказано в комментариях к коду), написать свой текст, и главная страница Вашего сайта готова!</p>
<p>Если Вам захочется изменить положение сайдбара, или сделать два сайдбара, то код таких шаблонов представлен в статье . Просмотрев их, можно сделать небольшие изменения в коде, представленном в этой статье, и получить желаемый результат.</p>
<p>Итак главная страница сайта готова, можно приступать к созданию рубрик и страниц. Я покажу, как создаётся одна рубрика, и в ней одна страница, а уж остальные Вы, точно так же, сделаете самостоятельно.</p>
<p>В директории сайта у нас есть папка content. Открываем её и создаём ещё одну папку — rubrica1(у Вас конечно будет своё название). В этой папке создаём ещё две папки — css и images.</p>
<p>В папку css помещаем файл style.css, а в папку images, во первых — основные изображения, которые должны быть на каждой странице (в моём случае это шапка сайта и маркеры меню), и во вторых, Вы поместите туда все картинки, которыми будете оформлять статьи этой рубрики.</p>
<p>В современном мире порой иметь собственный сайт также важно, как например, наличие номера телефона или адреса электронной почты. К сожалению, не каждый самостоятельно может сделать себе красивый профессиональный сайт, а порой даже и кривой не получается. Заказывать у программистов тоже не идеальный выход, так как не всем это по карману.</p><p>Из такой ситуации помогут выйти бесплатные HTML шаблоны сайтов. HTML шаблон сайта – это набор уже готовых статических страниц для сайта определенной тематики. С помощью такого шаблона, создать простой сайт можно буквально за пару часов, при наличии базового знания HTML разметки. В разделе HTML Вы получите эти знания, если потратите еще пару часов на изучения, а если не пожалеете время на раздел CSS, то сможете полностью управлять дизайном HTML шаблонов сайтов и настраивать их полностью под свои нужды.</p><p>Еще одним неоспоримым плюсом шаблонов сайтов является, то что их пишут в большинстве случаев профессионалы. Под профессиональным шаблоном сайтом понимается не только красивый и современный дизайн, но и так как написан код. Поисковые системы смотрят, как у Вас написан сайт, SEO оптимизирован код или нет, на основании этого понижают или повышают Ваши позиции в выдаче. Поэтому хороший сайт должен быть не только красивый и современный, что немаловажно, но и грамотно написан в плане кода.</p><p>Скачивайте бесплатные HTML шаблоны сайта и создавайте свои проекты в кратчайшие сроки.</p>
<p>Когда HTML5 стал поддерживаться современными браузерами,его начали использовать практически во всех современных сайтах. HTML5 в связке с CCS3 предоставляет огромные возможности для создания удивительных, функциональных и удобных сайтов.</p>
<p>В этой подборке я попытался собрать наиболее качественные адаптивные шаблоны сайтов, построенные на HTML5 и CSS3. Несмотря на то, что они бесплатные, вы можете увидеть, что большинство этих шаблонов выглядят как премиум-шаблоны.</p>
<h3></h3>
<h3></h3>
<p><img src='https://i1.wp.com/design-secrets.ru/wp-content/uploads/2014/09/real-estate-html.jpg' width="100%" loading=lazy></p>
<h3></h3>
<p><img src='https://i0.wp.com/design-secrets.ru/wp-content/uploads/2014/09/creative-bootstrap.jpg' width="100%" loading=lazy></p>
<h3></h3>
<p><img src='https://i0.wp.com/design-secrets.ru/wp-content/uploads/2014/09/drifolio.jpg' width="100%" loading=lazy></p>
<h3>5. SquadFree – бесплатный шаблон на Bootstrap HTML5</h3>
<p><img src='https://i2.wp.com/design-secrets.ru/wp-content/uploads/2014/09/squad.jpg' width="100%" loading=lazy></p><p>Squad Free — адаптивный шаблон на bootstrap</p>
<h3>6. Pluton – бесплатный одностраничный шаблон на Bootstrap HTML5</h3>
<p><img src='https://i2.wp.com/design-secrets.ru/wp-content/uploads/2014/09/pluton.jpg' width="100%" loading=lazy></p><p>Pluton — бесплатный одностраничный шаблон на Bootstrap HTML5</p>
<h3></h3>
<p><img src='https://i1.wp.com/design-secrets.ru/wp-content/uploads/2014/09/sublime_2.jpg' width="100%" loading=lazy></p>
<h3></h3>
<p><img src='https://i2.wp.com/design-secrets.ru/wp-content/uploads/2014/09/timber_3.jpg' height="600" width="590" loading=lazy></p>
<h3>9. E-Shopper — бесплатный шаблон для интернет-магазина</h3>
<p><img src='https://i0.wp.com/design-secrets.ru/wp-content/uploads/2014/09/eShopper_4.jpg' height="678" width="590" loading=lazy></p><p>E-Shopper — бесплатный шаблон для интернет-магазина</p>
<h3>10. AdminLTE — шаблон панели управления администратора</h3>
<p><img src='https://i1.wp.com/design-secrets.ru/wp-content/uploads/2014/09/admin-template_5.jpg' width="100%" loading=lazy></p><p>AdminLTE — шаблон панели управления администратора</p>
<h3>11. Magnetic — бесплатный шаблон для сайта фотографа</h3>
<p><img src='https://i1.wp.com/design-secrets.ru/wp-content/uploads/2014/09/Magnetic_6.jpg' width="100%" loading=lazy></p><p>Magnetic — бесплатный шаблон для сайта фотографа</p>
<h3>12. Mabur — адаптивный шаблон для портфолио</h3>
<p><img src='https://i2.wp.com/design-secrets.ru/wp-content/uploads/2014/09/mabur_7.jpg' width="100%" loading=lazy></p><p>Mabur — адаптивный шаблон для портфолио</p>
<h3>13. Moderna — адаптивный шаблон сайта на Bootstrap</h3>
<p><img src='https://i2.wp.com/design-secrets.ru/wp-content/uploads/2014/09/Moderna_8.jpg' width="100%" loading=lazy></p><p>Moderna — адаптивный шаблон сайта на Bootstrap</p>
<h3>14. Sport Here — минималистичный шаблон сайта</h3>
<p><img src='https://i2.wp.com/design-secrets.ru/wp-content/uploads/2014/09/sport-landing_9.jpg' width="100%" loading=lazy></p><p>Sport Here — минималистичный шаблон сайта</p>
<h3>15. Crafty — адаптивный шаблон корпоративного сайта</h3>
<p><img src='https://i2.wp.com/design-secrets.ru/wp-content/uploads/2014/09/crafty1_10.jpg' width="100%" loading=lazy></p><p>Crafty — адаптивный шаблон корпоративного сайта</p>
<h3>16. Infusion — одностраничный шаблон портфолио</h3>
<p><img src='https://i2.wp.com/design-secrets.ru/wp-content/uploads/2014/09/Infusion_11.jpg' width="100%" loading=lazy></p><p>Infusion — одностраничный шаблон портфолио</p>
<h3>17. Yebo — HTML/CSS шаблон сайта в плоском стиле</h3>
<p><img src='https://i2.wp.com/design-secrets.ru/wp-content/uploads/2014/09/Yebo-HTML5-Template_12.jpg' width="100%" loading=lazy></p><p>Yebo — HTML/CSS шаблон сайта в плоском стиле</p>
<h3>18. Twenty — шаблон на HTML5 с эффектом параллакса</h3>
<p><img src='https://i1.wp.com/design-secrets.ru/wp-content/uploads/2014/09/Twenty-HTML5_13.jpg' height="591" width="590" loading=lazy></p><p>Twenty — шаблон на HTML5 с эффектом параллакса</p>
<h3>19. Urbanic — шаблон на Bootstrap</h3>
<p><img src='https://i0.wp.com/design-secrets.ru/wp-content/uploads/2014/09/Urbanic-Bootstrap-Template_14.jpg' width="100%" loading=lazy></p><p>Urbanic — шаблон на Bootstrap</p>
<h3>20. Calm — шаблон портфолио</h3>
<p><img src='https://i1.wp.com/design-secrets.ru/wp-content/uploads/2014/09/portfolio-html-Template_15.jpg' height="609" width="590" loading=lazy></p><p>Calm — шаблон портфолио</p>
<h3>21. Mamba — одностраничный шаблон</h3>
<p><img src='https://i1.wp.com/design-secrets.ru/wp-content/uploads/2014/09/Mamba-Free-one-page-template_16.jpg' width="100%" loading=lazy></p><p>Mamba — одностраничный шаблон</p>
<h3></h3>
<p><img src='https://i2.wp.com/design-secrets.ru/wp-content/uploads/2014/09/flat-design-mini-portfolio-featured_18.jpg' width="100%" loading=lazy></p>
<h3>23. Brushed — одностраничный адаптивный шаблон сайта</h3>
<p><img src='https://i1.wp.com/design-secrets.ru/wp-content/uploads/2014/09/Brushed-Responsive-One-Page-Template_19.jpg' height="592" width="590" loading=lazy></p><p>Brushed — одностраничный адаптивный шаблон сайта</p>
<h3>24. Big Picture — шаблон сайта на HTML5</h3>
<p><img src='https://i1.wp.com/design-secrets.ru/wp-content/uploads/2014/09/Big-Picture-HTML5-UP_20.jpg' width="100%" loading=lazy></p><p>Big Picture — шаблон сайта на HTML5</p>
<h3>25. Tesselatte — бесплатный адаптивный шаблон сайта</h3>
<p><img src='https://i0.wp.com/design-secrets.ru/wp-content/uploads/2014/09/teslaa_21.jpg' width="100%" loading=lazy></p><p>Tesselatte — бесплатный адаптивный шаблон сайта</p>
<h3>26. Overflow — адаптивный шаблон сайта на HTML5</h3>
<p><img src='https://i1.wp.com/design-secrets.ru/wp-content/uploads/2014/09/OVERFLOW_22.jpg' width="100%" loading=lazy></p><p>Overflow — адаптивный шаблон сайта на HTML5</p>
<h3>27. Runkeeper — шаблон сайта мобильного приложения</h3>
<p><img src='https://i0.wp.com/design-secrets.ru/wp-content/uploads/2014/09/Runkeeper-Website-Template_23.jpg' height="785" width="590" loading=lazy></p><p>Runkeeper — шаблон сайта мобильного приложения</p>
<h3>28. Pinball — адаптивный шаблон блога</h3>
<p><img src='https://i0.wp.com/design-secrets.ru/wp-content/uploads/2014/09/Pinball-Website-Template-Home_24.jpg' width="100%" loading=lazy></p><p>Pinball — адаптивный шаблон блога</p>
<h3>29. Bak One — одностраничный адаптивный шаблон сайта</h3>
<p><img src='https://i2.wp.com/design-secrets.ru/wp-content/uploads/2014/09/The-Bak-one-Website-Template_25.jpg' height="778" width="590" loading=lazy></p><p>Bak One — одностраничный адаптивный шаблон сайта</p>
<h3>30. Andia — бесплатный шаблон сайта</h3>
<p><img src='https://i2.wp.com/design-secrets.ru/wp-content/uploads/2014/09/Andia-Responsive-Agency-Template_26.jpg' height="638" width="590" loading=lazy></p><p>Andia — бесплатный шаблон сайта</p>
<h3>31. Produkta — 4 HTML-шаблона в одном</h3>
<p><img src='https://i2.wp.com/design-secrets.ru/wp-content/uploads/2014/09/Produkta-Responsive-Product-Showcase_27.jpg' width="100%" loading=lazy></p><p>Produkta — 4 HTML-шаблона в одном</p>
<h3></h3>
<p><img src='https://i0.wp.com/design-secrets.ru/wp-content/uploads/2014/09/Great-Page-title_28.jpg' height="736" width="590" loading=lazy></p>
<h3>33. Studio Francesca — адаптивный шаблон сайта</h3>
<p><img src='https://i1.wp.com/design-secrets.ru/wp-content/uploads/2014/09/Studio-Francesca-Premium_29.jpg' height="609" width="590" loading=lazy></p><p>Studio Francesca — адаптивный шаблон сайта</p>
<h3>34. Prologue — шаблон сайта на HTML5</h3>
<p><img src='https://i2.wp.com/design-secrets.ru/wp-content/uploads/2014/09/Prologue-HTML5-UP_30.jpg' width="100%" loading=lazy></p>
<p>В современном мире порой иметь собственный сайт также важно, как например, наличие номера телефона или адреса электронной почты. К сожалению, не каждый самостоятельно может сделать себе красивый профессиональный сайт, а порой даже и кривой не получается. Заказывать у программистов тоже не идеальный выход, так как не всем это по карману.</p><p>Из такой ситуации помогут выйти бесплатные HTML шаблоны сайтов. HTML шаблон сайта – это набор уже готовых статических страниц для сайта определенной тематики. С помощью такого шаблона, создать простой сайт можно буквально за пару часов, при наличии базового знания HTML разметки. В разделе HTML Вы получите эти знания, если потратите еще пару часов на изучения, а если не пожалеете время на раздел CSS, то сможете полностью управлять дизайном HTML шаблонов сайтов и настраивать их полностью под свои нужды.</p><p>Еще одним неоспоримым плюсом шаблонов сайтов является, то что их пишут в большинстве случаев профессионалы. Под профессиональным шаблоном сайтом понимается не только красивый и современный дизайн, но и так как написан код. Поисковые системы смотрят, как у Вас написан сайт, SEO оптимизирован код или нет, на основании этого понижают или повышают Ваши позиции в выдаче. Поэтому хороший сайт должен быть не только красивый и современный, что немаловажно, но и грамотно написан в плане кода.</p><p>Скачивайте бесплатные HTML шаблоны сайта и создавайте свои проекты в кратчайшие сроки.</p>
<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
";"+Math.random()+
"border='0' width='1' height='1' loading=lazy>");</script>
</div>
<div class="col-md-12">
<div class="panel">
<div class="panel-body">
<center>
<div class="share-title">Интересно? Поделись!</div>
<div class="share">
<a onClick="window.open('https://www.facebook.com/sharer.php?u=https%3A%2F%2Falpezzo.ru%2Fprostye-html-shablony-gde-skachat-gotovye-css-shablony-html-shablony%2F','sharer','toolbar=0,status=0,width=700,height=400');" href="javascript: void(0)" class="facebook"></a>
<a onClick="window.open('https://twitter.com/intent/tweet?text=https%3A%2F%2Falpezzo.ru%2Fprostye-html-shablony-gde-skachat-gotovye-css-shablony-html-shablony%2F','sharer','toolbar=0,status=0,width=700,height=400');" href="javascript: void(0)" class="twitter"></a>
<a onClick="window.open('https://vkontakte.ru/share.php?url=https%3A%2F%2Falpezzo.ru%2Fprostye-html-shablony-gde-skachat-gotovye-css-shablony-html-shablony%2F','sharer','toolbar=0,status=0,width=700,height=400');" href="javascript: void(0)" class="vkontakte"></a>
<a onClick="window.open('http://ok.ru/dk?st.cmd=addShare&st.s=1&st._surl=https%3A%2F%2Falpezzo.ru%2Fprostye-html-shablony-gde-skachat-gotovye-css-shablony-html-shablony%2F','sharer','toolbar=0,status=0,width=700,height=400');" href="javascript: void(0)" class="odnoklassniki"></a>
<a onClick="window.open('https://plus.google.com/share?url=https%3A%2F%2Falpezzo.ru%2Fprostye-html-shablony-gde-skachat-gotovye-css-shablony-html-shablony%2F','sharer','toolbar=0,status=0,width=700,height=400');" href="javascript: void(0)" class="google"></a>
<a onClick="window.open('https://connect.mail.ru/share?url=https%3A%2F%2Falpezzo.ru%2Fprostye-html-shablony-gde-skachat-gotovye-css-shablony-html-shablony%2F','sharer','toolbar=0,status=0,width=700,height=400');" href="javascript: void(0)" class="mail"></a>
</div>
</center>
</div>
</div>
</div>
<div class="clear"></div>
<div class="clear"></div>
</div>
</span>
</div>
<div id="sidebar" class="col-md-3">
<div class="well well-sm side-widget widget_text" id="text-14"> <div class="textwidget">
</div>
</div><div class="well well-sm side-widget widget_categories" id="categories-3"><div class="widget-title">Рубрики</div> <ul>
<li class="cat-item"><a href="/category/android/" title="Android">Android</a>
</li>
<li class="cat-item"><a href="/category/apple/" title="Apple">Apple</a>
</li>
<li class="cat-item"><a href="/category/linux/" title="Linux">Linux</a>
</li>
<li class="cat-item"><a href="/category/wifi/" title="Wi-Fi">Wi-Fi</a>
</li>
<li class="cat-item"><a href="/category/windows/" title="Windows">Windows</a>
</li>
<li class="cat-item"><a href="/category/internet/" title="Интернет">Интернет</a>
</li>
<li class="cat-item"><a href="/category/computer/" title="Компьютер">Компьютер</a>
</li>
<li class="cat-item"><a href="/category/modems/" title="Модемы">Модемы</a>
</li>
<li class="cat-item"><a href="/category/programs/" title="Программы">Программы</a>
</li>
<li class="cat-item"><a href="/category/miscellaneous/" title="Разное">Разное</a>
</li>
</ul>
</div><div class="well well-sm side-widget widget_text" id="text-12">
<div class="textwidget">
</div>
</div></div>
</div>
<div id="sidebar-bottom" class="col-md-12">
</div>
<div class="col-md-12">
<div id="footer">
<div class="row footer-go well well-sm">
<div class="col-md-12">
<div class="row">
<div class="footer_menu">
<ul id="menu-menyu-2-nizhnee" class="menu">
<li class="menu-item type-post_type object-page "><a href="">О сайте</a></li>
<li class="menu-item type-post_type object-page "><a href="/feedback/">Контакты</a></li>
</ul>
</div> </div>
</div>
<div class="col-md-4">
<p class="text-left" itemscope itemtype="http://schema.org/WPFooter"><a href="/">Компьютерные подсказки для вас</a> © <span itemprop="copyrightYear">2024</span>. Все права защищены.</p>
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
<p class="text-right"></p>
</div>
</div>
</div>
</div>
</div>
</div>
<span class="scrollTop hidden-xs hidden-sm" id="gotop" onclick="top.goTop(); return false;" href="#"><span class="glyphicon glyphicon-eject scroll"></span></span>
<script type= "text/javascript">function GoTo(link){ window.open(link.replace("_","http://"));} </script>
<script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=4.8.3'></script>
<script type='text/javascript' src='https://alpezzo.ru/wp-content/themes/mini-max-box/js/bootstrap.min.js?ver=3.2.0'></script>
<script type='text/javascript'>
var q2w3_sidebar_options = new Array();
q2w3_sidebar_options[0] = { "sidebar" : "sidebar-1", "margin_top" : 50, "margin_bottom" : 400, "stop_id" : "", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['text-12'] } ;
</script>
<script type='text/javascript' src='https://alpezzo.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script>
<script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.8.3'></script>
<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function($){
$('.link').replaceWith(function(){
var id = ( null != $(this).attr('id') ) ? ' id="' + $(this).attr('id') + '"' : '',
target = ( null != $(this).attr('data-target') ) ? ' target="' + $(this).attr('data-target') + '"' : ' target="_blank"',
title = ( null != $(this).attr('title') ) ? ' title="' + $(this).attr('title') + '"' : '',
style = ( null != $(this).attr('style') ) ? ' style="' + $(this).attr('style') + '"' : '',
rel = ( null != $(this).attr('data-rel') ) ? ' rel="' + $(this).attr('data-rel') + '"' : '',
cl = ( null != $(this).attr('class') ) ? $(this).attr('class').replace('link','').trim() : '';
cl = ( '' != cl ) ? ' class="' + cl + '"' : '';
return '<a href="' + $(this).attr('data-link') + '" ' + title + id + cl + target + style + rel + ' >' + $(this).html() + '</a>';
} );
} );
/*]]>*/
</script>
</body>
</html>