Bronson — готовый шаблон современного адаптивного сайта



Bronson - современный шаблон сайта

HTML шаблон Bronson

Частенько бывают такие ситуации, что надо сделать небольшой сайт для конкретной задачи. Естественно, можно это реализовать через разнообразные движки, тот же WordPress, а можно взять готовый шаблон и просто наполнить его нужной информацией. Главное, чтобы в шаблоне была своя фишка. Такая, чтобы ярко и выгодно выделяла его на общем фоне других сайтов.

Вот таким вариантом с запоминающейся фишкой и может стать шаблон HTML сайта Bronson.

Смотрим демо сайт. Надо только выбрать один из трёх вариантов.

На первый взгляд, не самый удачный вариант. Темные тона, основная информация расположена на одной странице. Но, это только на первый взгляд, до тех пор, пока не познакомитесь с функционалом, который заложили в этот шаблон разработчики.

Темный тон легко убрать. Для каждой секции можно легко задать свой цвет. И, при желании, можно достичь весьма эффектного результата. Сегодня принято разнообразные “несочетаемые сочетания”, вот тут и можно поиграться.

В самом шаблоне уже встроены 15 цветовых решений для подсветки ссылок, иконок, меню и заголовков, если все эти возможности правильно соотнести с оригинальным фоном, может получиться весьма интересный вариант.

В шаблоне имеются три варианта главной страницы. Можно вывести статическое изображение с эффектом Параллакса, можно вывести слайдер на всю ширину страницы, а можно выбрать в качестве фона видеоролик. Смотрится весьма неплохо.

Встроенный слайдер даёт возможность добавлять любое количество изображений. Ограничений нет.

Интересное решение для контактной формы. В правом нижнем углу появляется панель, при щелчке на которую раскрывается контактная форма без перезагрузки страницы. Прилично смотрится.

Неплохо реализован вывод записей в блоге. Сайдбар справа, превьюшки на всю ширину контента. Ну это уже стандартный вариант на сегодняшний день.

Естественно, присутствует адаптация под любое современное устройство.

Ну а где тут фишка, почему этот шаблон будет запоминаться?

Эту информацию я оставил напоследок. Фишка шаблона, на мой взгляд, состоит в том, как сделан вывод портфолио.

Нажимаем в меню ссылку Porfolio, и нас перебрасывает на ту часть страницы, где расположены материалы с портфолио. Три, довольно большие, по 490 пикселей шириной, изображения. При скроллинге, появляется ещё один ряд изображений. Дальше – ещё.

Если навести мышку на картинку появляется кнопка просмотра. Жмём, и большое изображение с описанием и другими изображениями плавно появляются без перезагрузки страницы. Весьма необычное и эффектное решение. На других сайтах, лично я, подобное не наблюдал. На картинке вы сможете увидеть конечный результат этого эффекта, но, лучше, всё таки, смотреть на демо сайте. :good:

Шаблон Bronson

Вывод портфолио в шаблоне Bronson

Вот такой, достаточно нестандартный вариант вывода и может сделать ваш сайт запоминающимся и необычным. И, естественно, это может быть весомым аргументом при обсуждении величины вознаграждения за вашу работу.

Скачать шаблон Bronson можно здесь, размер файла 22 МВ.

Всем удачи и творческих высот! :bye:

@ ПОДПИСАТЬСЯ НА НОВОСТИ САЙТА

Этот сайт работает на быстром, надёжном, не дорогом хостинге GIGAHOST

Поделиться:

Комментарии к «Bronson — готовый шаблон современного адаптивного сайта»

  1. Иван:

    Они на хостинге моем 🙂

    Да не, я просто решил убрать фиксацию и просто подберу правильные бэкграунды. Вот и все решение. Слишком много времени на поиск проблемы ушло…

    1. Ну и замечательно. Главное, чтобы работало. Редко какой шаблон не приходится допиливать.

      Удачной работы! :bye:

  2. Иван:

    Упс…. Только частично получилось. Mozilla начала нормально показывать если убрать у parallax-a background-repeat: no-repeat;

    В принципе при изменении размера окна в момент изменения да, появляются клоны фотки. Но при остановке деформации все так как должно быть. Только Chrome остался в таком же состоянии… Короче, как разберусь отпишу. Если получится у вас что-то узнать буду рад получить любую инфу.

    1. Иван, в файле read me.txt с восклицательным знаком написано, что все файлы должны быть загружены на сервер. Может на Денвере попробовать, или на тестовом хостинге.  :wacko:

  3. Иван:

    Проблема решена 🙂

    1. Иван, и как удалось приручить этот слайдер?

  4. Иван:

    Добрый день. Отличный шаблон! Только никак не могу разобраться, почему-то у меня верхних слайдер после прокрутки не показывает другие слайды, только серый фон. С телефона если смотреть то все нормально. Попробовал в Firefox, Chrome и Opera. Во всех одно и то же. Хотя по ссылке демо сайта которую вы дали в описании данного шаблона все отлично работает. Если знает кто-то решение, отпишитесь пожалуйста.

    Заранее большое спасибо!

    1. Иван, такие ситуации наблюдаются, чаще всего, в том случае, когда отсутствуют изображения для слайдера. Проверьте их наличие, при отсутствии, загрузите свои.

      А в мобильной версии показывают не большие изображения, а миниатюры, это совсем другие файлы. Вот отсюда и ситуация.

      Удачи! :bye:

      1. Иван:

        wwdiz, я пока что еще не трогал фотографии. Они как изначально были залиты в папке images, так они там и сидят: hero-1.jpg, hero-2.jpg, hero-3.jpg

        И вот что я еще смог заметить, почему-то в браузере CoolNovo (это бывший Chrome+) (которого больше не поддерживают и не обнавляют) все отлично показывает. Поэтому я вообще в ступоре. Браузеры о которых я писал выше все up to date.

        Вот Chrome пытается что-то сделать но только если хотя бы на пиксель скрольнуть страницу. Тогда весь слайд показывается.

        Сделал 3 скрина выложил на imgur.

        http://imgur.com/CMmZhjC — успел поймать во время прокрутки кадр перехода с первого на второй скрин.

        http://imgur.com/qk3See0 — проскролил 1 раз и 2-ой слайд появился.

        http://imgur.com/hqWVOzV — а тут Chrome пытается что-то показать справа.

  5. Alex:

    А другая ссылка на скачивание есть) :bye:

    С этой не получается.

    1. Alex, странно, что не получается. Нашёл ещё одну ссылочку, может она поможет:

      //letitbit.net/download/08934.01829d29876049103c8b50404a35/bronson.rar.html

      Удачи!  :bye:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

:bye: 
:good: 
:za-nas: 
:wacko: 
:yahoo: 
:skromnost: 
:heart: 
:rose: 
:-) 
:yes: 
:cry: 
:mail: 
:unsure: 
;-)