Преподаватель который помогает студентам и школьникам в учёбе.

Разработка сайта кондитерского комбината

Содержание:

ВВЕДЕНИЕ

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

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

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

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

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

Веб-сайт - в компьютерной сети объединённая под одним адресом (Доменным именем или IP-адресом) совокупность документов частного лица или организации. По умолчанию подразумевается, что сайт располагается в сети Интернет. Все веб-сайты Интернета в совокупности составляют Всемирную паутину. Для прямого доступа клиентов к веб-сайтам на серверах был специально разработан протокол HTTP (Hyper Text Transfer Protocol). Веб-сайты иначе называют Интернет представительством человека или организации. Когда говорят своя страничка в Интернет, то подразумевается целый веб-сайт или личная страница в составе чужого сайта.

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

Целесообразно рассмотреть каждую функцию в отдельности.

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

Сайт-визитка включает в себя несколько разделов (иногда даже только один раздел, так называемый одностраничный сайт или продающая страница) и состоит только из самой главной информации о фирме: перечень услуг, описание деятельности, прайс-лист, контакты, обратная связь. Несмотря на свой минимализм, такой сайт отлично выполняет функцию привлечения потребителей. По сути, сайт-визитка — это расширенный интернет-вариант обычной визитки, которую компания обычно передает своим клиентам или партнерам.

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

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

Коммерческая функция сайта. При рациональном использовании сайта можно успешно продать какую-либо продукцию или услугу. Сегодня будущее за активно растущим рынком Интернет-маркетига. Например, есть у вас мебельный магазин. Увидев рекламу о создании сайтов, вы решили создать свой сайт. Наполнить его информацией о своем бизнесе это лишь половина проделанной работы. Такую информацию пользователи будут просто читать, а вам же нужно продать продукцию. Для этого надо заказать каталог продукции и наполнить его собственными видами продукции, и посетители без труда увидят предложенный ему продукт. Тогда существует большая вероятность того, что вам позвонят и вероятно закажут продукцию.

1. Основная часть

СТРУКТУРА И ФУНКЦИОНАЛ ИНТЕРНЕТ-ПРЕДСТАВИТЕЛЬСТВ КОМПАНИИ «ВИШЕНКА»

2. Структура сайта и навигация

Тематически сайт подразделяется на следующие разделы:

а) Главная;

б) О Компании;

в) Продукция;

д) Контакты.

Все разделы имеют подразделы, описанные ниже.

а) Главная

Содержит в себе общую, краткую информацию об организации. Краткое описание и ссылки на другие страницы сайта, такие как:

О компании;
Продукция.

Так же на главной странице сайта содержится форма обратной связи.

б) О Компании

Данный раздел содержит текстовую информацию о компании. Формирование и оформление текста осуществляется владельцем сайта и может иметь произвольную форму.

в) Продукция

Раздел предоставляет доступ к каталогу продукции. Раздел содержит вступительный текст, краткое описание каждой позиции и список подкаталогов, соответствующих товарным категориям:

- 1. Хлеб;
    - 1. Бриошь;
      2. Злаковый;
      3. Заварной.
  2. Пирожные и булочки;
    - 1. Апельсиновые кексы;
      2. Круассан с кремом;
      3. Яблочные профитроли.
  3. Макарони;
    - 1. Ассорти №1;
      2. Ассорти №2;
      3. Ассорти №3.
  4. Пироги;
    - 1. Яблочный пирог;
      2. Ягодный пирог;
      3. Черничный чизкейк;
      4. Клубничный пирог;
      5. Классический чизкейк;
      6. Сливовый пирог.

д) Контакты

Страница с контактами содержит информацию о часах работы, адресе и контактных данных компании.

Требования к средствам создания сайта

Для этого потребуются знания, в первую очередь язык гипертекстовой разметки HTML, а также CSS - каскадные таблицы стилей. С помощью HTML строится каркас будущего сайта, а через CSS настраивается его внешний вид.

Для реализации был выбран визуальный HTML-редактор компании Adobe — Dreamweaver. Одним из главных преимуществ данного редактора является возможность просмотра изменений сайта в процессе его разработки. Так же в программу встроено множество средств для упрощения работы с кодом и таблицей стилей.

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

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

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

Затем располагается превью страницы для простоты отслеживания работы с сайтом. Под этим блоком уже расположена основная рабочая область — код страницы.

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

Все области в программе можно персонализировать и располагать более удобным для пользователя способом.

Стилем или CSS (Cascading Style Sheets, каскадные таблицы стилей) называется набор параметров форматирования, который применяется к элементам документа, чтобы изменить их внешний вид. Возможность работы со стилями издавна включают в развитые издательские системы и текстовые редакторы, тем самым позволяя одним нажатием кнопки придать тексту заданный, заранее установленный вид. Это доступно и создателям сайта, когда цвет, размеры текста и другие параметры хранятся в определенном месте и легко применяются к любому тегу. Еще одним преимуществом стилей является то, что они предлагают намного больше возможностей для форматирования, чем обычный HTML.представляет собой мощную систему, расширяющую возможности дизайна и верстки веб-страниц.

3. Входные данные

HTML. Основной технологией, используемой при разработке большинства сайтов, является язык гипертекстовой разметки HTML (HyperText Markup Language). Большинство элементов HTML являются контейнерами для текста или используются для форматирования текста, при этом есть множество элементов, отвечающих за вставку графических элементов и flash-анимаций. HTML - сравнительно несложный язык, имеющий огромное количество элементов, причем некоторые из них используются очень редко.

Язык гипертекстовой разметки HTML был создан Тимом Бернс-Ли в 1990 году для использования в им же разработанном браузере гипертекста. Но популярной стала вторая версия языка в 1994, когда появился и начал распространяться по всему миру сервис интернета World Wide Web. Тогда же появился ряд браузеров, поддерживающих этот язык (Mosaic, Netscape, Navigator).

В 1996 году популярность получила версия HTML 3.2. Она получилась достаточно удачной, и на ее основе можно создавать неплохие веб-страницы и в наше время.

В 1997 году появился HTML 4 (Dynamic HTML), который используется до сих пор. Создаются лишь незначительные модификации этого языка.

4. Разработка сайта

Сайт кондитерского комбината Вишенка содержит 4 страницы:

Index (главная страница сайта);
Contacts (Контактная информация и адрес);
Products (Каталог и прайс-лист продукции);
About (Краткая информация о компании).

Все используемые изображения на сайте были предоставлены заказчиком или взяты в открытом доступе. Логотип предприятия был создан с использованием Adobe Photoshop. Для более удобного и компактного хранения файлов, используемых сайтом всё содержимое, было расположено в соответствующих папках. Таблица стилей была помещена в папку Content, изображения в папку Image. Наименования для фотографий были сформированы таким образом чтобы при последующей верстке контента сайта не приходилось разбираться в содержимом заново. Например, все элементы каталога имеют название строящиеся следующим образом cat_1_1.jpg, cat обозначает принадлежность к каталогу, первая цифра обозначает блок, в котором находится изображение, а вторая цифра элемент каталога, к которому принадлежит изображение. Все классы так же имеют наименования, которые определяют их принадлежность к элементу страницы.

Описание этапов разработки сайта следует начать с Главной страницы, на которой в последствии будут содержаться все элементы сайта.

Согласно предпочтениям и указаниям заказчика сайт должен иметь размер страниц 1024*768, 1280*1024 без горизонтальной полосы прокрутки и без пустых (белых) полей для основных типов разрешения.

Разработку главной страницы следует начать с создания шапки сайта, в которой будут присутствовать ссылки на остальные страницы сайта.

Рисунок 1. Шапка сайта

В качестве ссылки на главную был выбран логотип сайта, т.к. такое решение показалось достаточно интересным для заказчика. Для того чтобы пользователь понимал на какой странице сайта он находится была принято решение добавить белую, выделяющую активную страницу полосу. Для последующей работы с шапкой она была включена в класс page_head, а логотип в left_head. Логотипу сразу же был присвоен id main_page и гиперссылка на главную страницу. Шапка выполнена таким образом, что при прокрутке страницы вниз она остается в верхней части окна для того, чтобы пользователю не приходилось листать страницу наверх, если он захочет просмотреть другие страницы сайта.

Основные пункты меню располагаются в классе right_head, а все активные ссылки заключены в класс menu. Перечень списка меню включен в теги ul и li для горизонтального перечисления.

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

Рисунок 2. Контент

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

Для реализации блока о нас было создано два класса about_text и about_right, после чего с помощью таблицы стилей были настроены параметры width 35%, min-width 300px, height 300px и float left для того, чтобы текст не накладывался на изображение. Кнопка «Узнать больше» и «Посмотреть все» выполнены в виде рамки, при наведении на которую вся область кнопки заливается оранжевым цветом, данный дизайнерский ход делает элемент более заметным и обозначает, что данная кнопка является активной.

Для заливки кнопок цветом использовался тег таблицы стилей hover, который делает кнопку белой, если на неё не направлен курсор, а с помощью тега cursor: pointer заливает её желтым цветом при наведении курсора мыши в область кнопки. Блок «Продукция» выполнен таким же образом, как и блок «О нас» для поддержания единого стиля страницы.

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

Рисунок 3. Контент и блок обратной связи

Блок обратной связи выполнен с помощью блоков input для обозначения предназначения полей используется тег placeholder=”текст” указанием названия текста поля, чтобы пользователь мог понять какие данные нужно вводить в определенное поле. Весь блок обратной связи объединен в класс write_us и разделен на два подкласса write_left и write_right на которых располагается текст и блок с текстовыми полями соответственно.

В нижней части странице расположен блок footer в котором содержится название компании и дата реализации сайта.

Далее рассмотрим страницу с продукцией компании. На ней расположен каталог с множеством мелких блоков, на которых содержаться изображения, краткое описание и цена продукта. Каждый подраздел ассортимента так же разделен на блоки, в которых идет краткое превью ассортимента, а затем уже сама продукция.

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

Рисунок 4. Продукция

Так как сайт-визитка не является интернет-магазином все представленные блоки не являются активными и на них невозможно нажать. Весь каталог выполнен с помощью классов category, block и item. В классе category располагается подпункт продукции, а в классе block располагаются позиции. В классе item находится сам продукт, его изображение, краткое описание и стоимость.

Рисунок 5. Продукция

После создания всех элементов они были расположены в определенном порядке используя таблицу стилей, для отображения блоков в ней использовались теги display: block и display: flex. Для расположения всех элементов используется блок фиксированного размера, в котором прописываются отступы между блоками, их размеры, стили текста и размеры используемых изображений.

В нижней части страницы так же располагается footer.

Рисунок 6. О компании

Далее рассмотрим страницу с контактной информацией кондитерского комбината. На данной странице содержится информация об адресе, часах работы и контактной информации.

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

Рисунок 7. Контакты

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

Рисунок 8. Контакты

ЗАКЛЮЧЕНИЕ

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

Поставленная цель курсовой работы выполнена в достаточно полном объеме.

В процессе проектирования сайта визитки были получены навыки работы в графических редакторах, способы верстки сайта с помощью таблицы стилей CSS, HTML. Были освоены новые программные средства разработки интернет-сайтов. Также был проведен анализ уже существующих сайтов-визиток, графических редакторов и редакторов HTML.

В результате сравнения уже существующих сайтов были сделаны выводы о возможных дизайнерских решениях и наполнении сайта. Шаблон данного сайта-визитки имеет универсальный дизайн и при определенной верстке может быть использован другими организациями.

Список литературы

Кибардин М.Г., Горбач С.М. РОЛЬ ИНТЕРНЕТ-САЙТА В РАЗВИТИИ БИЗНЕСА // Научное сообщество студентов XXI столетия. ЭКОНОМИЧЕСКИЕ НАУКИ: сб. ст. по мат. XXIII междунар. студ. науч.-практ. конф. № 8(23).
Web-дизайн: HTML, JavaScript и CSS. Карманный справочник./ Гончаров А.Ю. - М.:КУДИЦ-ПРЕСС, 2007. - 320с.
Информационный сайт https://ru.wikipedia.org/wiki/

Приложение

Приложение 1. Главная страница

<html>

<head>

<title>Вишенка</title>

</head>

<body>

</a>

</div>

<ul>

<li><a href="products.html">ПРОДУКЦИЯ</a></li>

<li><a href="about.html">О КОМПАНИИ</a></li>

<li><a href="contacts.html">КОНТАКТЫ</a></li>

</ul>

</div>

</header>

<div class="f_line"><br>Свежий хлеб</div>

<div class="l_line">Простые радости нашей жизни</div>

</div>

О нас

</div>

Кондитерский комбинат «Вишенка» работает с 2016 года. На сегодняшний день занимает лидирующие позиции на московском рынке по производству хлебобулочных и кондитерских изделий. Опираясь на опыт, проверенный годами, предприятие продолжает успешно развиваться

</div>

<div class="element_sub">Узнать больше</div>

</a>

</div>

</div>

</div>

Продукция

</div>

У нас вы можете найти много различных видов хлеба, пирогов, булочек и пирожных — от багетов и круассанов до макарони и улиток с корицей, а также печенье и многое другое.

</div>

<div class="element_sub_left">Посмотреть все</div>

</a>

</div>

<div class="write_w">Напишите нам!</div>

Если вы хотите заказать выпечку для мероприятия, предложить сотрудничество или связаться по другому интересующему вас вопросу, заполните форму связи и мы обязательно ответим!

</div>

<div class="submit_but">Отправить</div>

</div>

Кондитерский комбинат "Вишенка" 2018

</div>

</footer>

</body>

</html>

Приложение 2. Продукция

<html>

<head>

<title>Продукция</title>

</head>

<body>

</a>

</div>

<ul>

<li><a href="products.html" id="active_i">ПРОДУКЦИЯ</a></li>

<li><a href="about.html">О КОМПАНИИ</a></li>

<li><a href="contacts.html">КОНТАКТЫ</a></li>

</ul>

</div>

</header>

<div class="f_line_all">Продукция</div>

</div>

<div class="l_two">Хлеб всему голова! Свежий и ароматный, можно есть просто так, а можно намазать на него масло или повидло.</div>

</div>

<div class="item_name">Бриошь</div>

<div class="item_comment">Традиционный хлеб с кардамоном и тмином.</div>

</div>

<div class="item_name">Злаковый хлеб</div>

<div class="item_comment">Семена льна, подсолнечника, ржаные хлопья, кунжут, тмин. </div>

</div>

<div class="item_name">Заварной хлеб</div>

<div class="item_comment">Дрожжевой хлеб на солодовой закваске. С пряностями.</div>

</div>

<div class="l_one">Пирожные и булочки</div>

<div class="l_two">Лучшие рецепты и продукты - залог хорошей выпечки.</div>

</div>

<div class="item_name">Апельсиновые Кексы</div>

<div class="item_comment">Цедра лимона и апельсина, нотки корицы и мускатного ореха — идеальное сочетание.</div>

</div>

<div class="item_name">Круассан с Кремом</div>

<div class="item_comment">Начинка из нежного ванильного крема в воздушном слоеном тесте. </div>

</div>

<div class="item_name">Яблочные Профитроли</div>

<div class="item_comment">Маленькие булочки из заварного теста с яблочной начинкой и корицей. </div>

</div>

<div class="l_one">Макарони</div>

<div class="l_two">Самые популярные пирожные во Франции. </div>

</div>

<div class="item_name">Ассорти № 1</div>

<div class="item_comment">Макарони со вкусами: апельсин, малина, фисташка.</div>

</div>

<div class="item_name">Ассорти № 2</div>

<div class="item_comment">Макарони со вкусами: яблоко, персик, абрикос.</div>

</div>

<div class="item_name">Ассорти № 3</div>

<div class="item_comment">Макарони со вкусами: лимон, земляника, какао.</div>

</div>

<div class="l_one">Пироги</div>

<div class="l_two">Попробовать один кусочек или взять весь пирог? — Решать вам.</div>

</div>

<div class="item_name">Яблочный Пирог </div>

<div class="item_comment">Фирменный яблочный пирог на песочном тесте.</div>

</div>

<div class="item_name">Ягодный Пирог</div>

<div class="item_comment">Начинка из ягод смородины, малины и брусники.</div>

</div>

<div class="item_name">Черничный Чизкейк</div>

<div class="item_comment">Слой сливочного сыра, ягоды черники и ежевики.</div>

</div>

<div class="item_name">Клубничный Пирог</div>

<div class="item_comment">Сочная клубника в закрытом пироге. Подается с шариком ванильного мороженого. </div>

</div>

<div class="item_comment">Только сыр и ничего лишнего. Подается к основным блюдам.</div>

</div>

<div class="item_name">Сливовый Пирог</div>

<div class="item_comment">Небольшой пирог в виде тарталетки с начинкой из слив.</div>

</div>

Кондитерский комбинат "Вишенка" 2018

</div>

</footer>

</body>

</html>

Приложение 3. О компании

<html>

<head>

<title>О компании</title>

</head>

<body>

</a>

</div>

<ul>

<li><a href="products.html">ПРОДУКЦИЯ</a></li></li>

<li><a href="about.html" id="active_i">О КОМПАНИИ</a></li>

<li><a href="contacts.html">КОНТАКТЫ</a></li>

</ul>

</div>

</header>

<div class="f_line_all">О компании</div>

</div>

</div>

Когда в 2016 году Борис Фадюшин — хозяин кондитерского комбината Вишенка — вернулся из Франции, где он жил последние 6 лет, ему в голову пришла идея основать свой собственный кондитерский магазин. «В Москве немного таких мест, в которых вы можете почувствовать себя не как в кондитерском магазине, а как в гостях у друзей или родственников, у которых в духовке печется ароматный пирог», — говорит Борис. Вскоре было найдено помещение, и уже через полгода пекарня начала свою работу.

</div>

Кондитерский комбинат "Вишенка" 2018

</div>

</footer>

</body>

</html>

Приложение 4. Контакты

<html>

<head>

<title>Контакты</title>

</head>

<body>

</a>

</div>

<ul>

<li><a href="products.html">ПРОДУКЦИЯ</a></li>

<li><a href="about.html">О КОМПАНИИ</a></li>

<li><a href="contacts.html" id="active_i">КОНТАКТЫ</a></li>

</ul>

</div>

</header>

<div class="f_line_all">Контакты</div>

</div>

<div class="c_line_one">Часы работы</div>

<div class="c_line_day">По будням:</div>

<div class="c_line_day">По выходным:</div>

</div>

</div>

<div class="add_one">Адрес</div>

<div class="add_two">г. Москва, Зверинецкая улица, 13</div>

<div class="add_one">Телефон</div>

<div class="add_two">info@vishenka.com</div>

</div>

Кондитерский комбинат "Вишенка" 2018

</div>

</footer>

</body>

</html>

Приложение 5. Таблица стилей

body{

margin: 0;

padding: 0;

}

.page_head{

width: 100%;

min-width: 1000px;

height: 90px;

background-color: black;

display: flex;

text-align: center;

position: fixed;

}

.left_head{

position: absolute;

left: 20%;

height: 85px;

width: 400px;

border-bottom: 5px solid white;

}

.right_head {

position: absolute;

left: 50%;

display: inline;

}

.logo{

width: 150px;

margin-top: -9px;

cursor: pointer;

}

.menu ul{

display: flex;

padding-left: 0;

list-style: none;

margin-top: 20;

}

padding: 1em;

display: block;

text-decoration: none;

font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;

font-size: 16px;

line-height: 1.42857143;

color: #969696;

}

.menu a:hover{

color: white;

transition: 0.5s;

}

#active_i{

color: white;

}

.content{

width: 100%;

min-width: 1000px;

height: auto;

}

.back_img{

min-width: 1000px;

height: 64%;

max-height: 419px;

min-height: 108px;

background-image:

background-size: cover;

background-position: center;

}

.text_img{

width: 100%;

min-width: 1000px;

text-align: center;

color: white;

padding-top: 5%;

}

.f_line{

font-size: 80;

font-weight: 600;

font-family: sans-serif;

}

.l_line{

font-size: 47px;

font-weight: 600;

}

.about_company {

width: 60%;

min-width: 600px;

height: 300px;

margin-top: 100px;

margin-left: 24%;

}

.about_left{

width: 35%;

min-width: 300px;

text-align: right;

float: left;

}

.about{

font-size: 40;

font-family:sans-serif;

margin-bottom: 30px;

}

.about_text{

font-size: 16;

font-family: sans-serif;

}

.about_right{

width: 35%;

min-width: 300px;

height: 300px;

float: left;

margin-left: 50px;

}

.pekar{

width: 110%;

min-width: 300px;

}

.element_sub{

margin-top: 30px;

width: 200px;

height: 30px;

border: 3px solid #fc8e0f;

float: right;

text-align: center;

padding-top: 12px;

font-family:sans-serif;

cursor: pointer;

}

.element_sub:hover{

background-color: #fc8e0f;

color: white;

}

.about_menu {

width: 60%;

min-width: 600px;

height: 300px;

margin-top: 20px;

margin-left: 24%;

}

.pekar_two{

width: 105%;

margin-top: 50px;

}

.about_mm{

margin-top: 60px;

font-size: 40;

font-family:sans-serif;

margin-bottom: 30px;

}

.element_sub_left {

margin-top: 30px;

width: 200px;

height: 30px;

border: 3px solid #fc8e0f;

float: left;

text-align: center;

padding-top: 12px;

font-family:sans-serif;

cursor: pointer;

}

.element_sub_left:hover{

background-color: #fc8e0f;

color: white;

}

.write_us{

width: 100%;

min-width: 1000px;

height: 400px;

margin-top: 50px;

text-align: center;

background-image:

background-position: right;

background-size: cover;

margin-top: 150px;

}

.write_left{

width: 22%;

min-width: 300px;

float: left;

margin-left: 24%;

text-align: left;

margin-top: 30px;

}

.write_right{

width: 35%;

min-width: 300px;

float: left;

display: block;

text-align: left;

margin-top: 50px;

margin-left: 40px;

}

.write_w{

color: white;

font-size: 40;

font-family:sans-serif;

margin-top: 50px;

margin-bottom: 30px;

font-weight: 600;

}

.write_text{

color:white;

font-size: 16;

font-family: sans-serif;

font-weight: 600;

}

.input_write{

color: dimgrey;

width: 450px;

margin-right: 40px;

height: 35px;

padding-left: 20px;

font-size: 14;

margin-bottom: 15px;

font-family: monospace;

}

.input_write_multi{

color: dimgrey;

width: 450px;

margin-right: 40px;

height: 90px;

padding-left: 20px;

font-size: 16;

margin-bottom: 20px;

font-family: monospace;

}

.submit_but{

width: 150px;

text-align: center;

height: 26px;

border: 1px solid darksalmon;

padding-top: 8px;

font-size: 16;

background-color: darksalmon;

font-family: sans-serif;

color: white;

font-weight: 600;

cursor: pointer;

}

.submit_but:hover{

transition: 0.2s;

background-color: #3b3a3f;

border: 1px solid white;

}

.foot_one{

width: 100%;

min-width: 1000px;

height: 40px;

background-color: #282728;

}

.line_line{

width: 100%;

min-width: 1000px;

height: 1px;

background-color: aliceblue;

}

.foot_two{

width: 100%;

min-width: 1000px;

height: 50px;

background-color: #282728;

text-align: center;

color: white;

padding-top: 25px;

font-size: 16;

font-family: sans-serif;

}

.a_all{

color: black;

}

.back_img_products {

width: 100%;

min-width: 1000px;

height: 23%;

max-height: 400px;

min-height: 100px;

background-image

background-size: cover;

background-position: center;

padding-top: 7%

}

.f_line_all{

text-align: center;

font-size: 80;

font-weight: 600;

font-family: sans-serif;

color: white;

}

.category_one{

width: 70%;

min-width: 600px;

margin: auto;

height: 550px;

margin-top: 150px;

display: block;

text-align: center;

}

.l_one{

font-family: 'Roboto Slab',serif;

font-size: 30;

font-weight: bold;

margin-bottom: 20px;

}

.l_two{

font-family: 'Roboto Slab',serif;

font-size: 17;

}

.block_two {

width: 100%;

display: flex;

height: 100%;

margin-bottom: 0;

margin-top: 56px;

}

.item_one{

width: 30%;

height: 400px;

border: 1px solid #efefef;

box-shadow: 1px 1px 3px #c4c4c4;

}

.item_two{

width: 30%;

height: 400px;

border: 1px solid #efefef;

box-shadow: 1px 1px 3px #c4c4c4;

margin-left: 5%;

margin-right: 5%;

}

.item_three{

width: 30%;

height: 400px;

border: 1px solid #efefef;

box-shadow: 1px 1px 3px #c4c4c4;

}

.item_image{

width: 100%;

height: 55%;

background-color: antiquewhite;

}

.item_name {

text-align: center;

height: 8%;

margin-top: 4%;

margin-bottom: 2.5%;

padding-top: 2%;

font-size: 17;

font-weight: 600;

}

.item_price{

text-align: center;

height: 8%;

padding-top: 2%;

font-size: 17;

font-weight: 600;

}

.item_comment{

width: 82%;

margin: auto;

text-align: center;

height: 8%;

padding-top: 2%;

font-size: 17;

}

.image_size{

width: 100%;

height: 100%;

}

.category_last{

width: 70%;

min-width: 600px;

margin: auto;

height: 900px;

margin-top: 150px;

display: block;

text-align: center;

margin-bottom: 230px;

}

.block_two_last{

width: 100%;

display: flex;

height: 50%;

margin-bottom: 0;

margin-top: 56px;

}

.block_two_last_two{

width: 100%;

display: flex;

height: 50%;

margin-bottom: 100px;

}

.back_img_about{

width: 100%;

min-width: 1000px;

height: 23%;

max-height: 400px;

min-height: 100px;

background-image:

background-size: cover;

background-position: center;

padding-top: 7%

}

.back_image_contacts{

width: 100%;

min-width: 1000px;

height: 23%;

max-height: 400px;

min-height: 100px;

background-image:

background-size: cover;

background-position: center;

padding-top: 7%

}

.c_block_one{

width: 60%;

min-width: 600px;

margin: auto;

height: 400px;

margin-top: 100px;

display: flex;

text-align: center;

}

.con_left {

width: 30%;

text-align: center;

margin-left: 15%;

margin-top: 5%

}

.con_right{

width: 60%;

float: left;

}

.con_image{

width: 80%

}

.c_line_one{

font-size: 30;

font-family: sans-serif;

margin-bottom: 30px;

}

.c_line_day{

font-size: 20;

font-weight: 600;

font-family: sans-serif;

margin-bottom: 10px;

}

.c_line_time{

font-size: 20;

font-family: sans-serif;

margin-bottom: 25px;

}

.c_block_two{

width: 100%;

min-width: 600px;

height: 450px;

margin-top: 60px;

text-align: center;

background-color: aqua;

background-image: url(https://lh4.googleusercontent.com/9t4Uds2COmr2fbG2gj0dMk_coMppdm_jDWjycXDDg0Zywv2nLyf2m9MBAUBdVlRYZRn6d1g5DKWv-GLUyyUd=w1920-h974-rw);

background-size: cover;

background-position: center;

padding-top: 5%

}

.block_address{

height: 300px;

width: 39%;

background-color: white;

position:sticky;

left: 220px;

border: 1px solid;

padding-top: 2.5%

}

.add_one{

font-size: 16;

font-family: sans-serif;

font-weight: 600;

margin-top: 4%;

color: #282828;

}

.add_two{

font-size: 15;

font-family: sans-serif;

margin-top: 1%;

color: #282828;

}

.a_block_one{

width: 70%;

height: 600px;

text-align: center;

margin-top: 148px;

display: inline-flex;

margin-left: 6%;

margin-right: 44px;

margin-bottom: -124px;

}

.a_left{

width: 0%;

}

.a_right{

width: 35%;

text-align: left;

margin-left: 100px;

margin-top: 8%;

}

.a_line_one{

font-size: 22px;

font-family: sans-serif;

font-weight: 600;

color: #c68759;

}

.a_text{

font-family: sans-serif;

font-size: 15px;

margin-top: -93px;

margin-right: 275px;

margin-bottom: -254px;

margin-left: 475px;

}