Дизайн и верстка сайта интернет-магазина суши

интернет-магазин, суши, веб дизайн

Перейти на сайт

Делал еще на заре своей деятельности (апрель 2017). Конечно здесь всё так по-юниорски несовершенно и многое требует переделки, но тогда старался )))

 О проекте

Интернет-магазин Заказ и доставка суши в Таллине www.ginza.ee. Работают уже 8 лет. Более 1000 постоянных клиентов. Магазин, в котором самые вкусные суши, нори, инари, нигири в Эстонии!

 Задача проекта

  1. Разработать простой лаконичный дизайн с контрастными цветами и добавлением несложных графических элементов.
  2. Сверстать Html страницы сайта. 

 Референсы для дизайна

Япония, акварель, кисти и логотип, который уже был у компании.

 Что было сделано

  1. Разработаны макеты страниц (Photoshop).
  2. Отрисованы фоны, стикеры, а также набор из 23 иконок для ингредиентов и меню (Photoshop).
  3. Созданы gif-анимации на 3-х языках для страницы Доставка (Photoshop).
  4. Адаптивная верстка основных страниц: Html, Css, jQuery (Atom).

На сайте реализованы:

  • навигационное меню;
  • на главной странице: Slick слайдер с акциям, Slick карусель для ингредиентов;
  • каталог товаров: вкладки, карточки товаров;
  • модальные окна Lightbox;
  • панель сообщения пользователям (появляется вверху страницы);
  • страница товара: всплывающие окна-подсказки, Slick слайдер рекомендуемых товаров, кнопки соцсетей от Яндекса;
  • корзина, окно с краткой корзиной, мультиязычный air-datepicker для выбора даты при оформлении заказа;
  • контакты: форма обратной связи, Google карта;
  • иконки Font-awesome;
  • 3 языка.

 Сайт адаптирован для мобильных устройств и планшетов.

 UI-элементы сайта

Подключенные jQuery плагины

Slick slider

<!-- Slider -->
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.slider_main').slick({
autoplay: true,
dots: true,
autoplaySpeed: 3500
});
$('.slider_ingredients').slick({
slidesToShow: 5,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
responsive: [
{
breakpoint: 800,
settings: {
slidesToShow: 4
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 3
}
}
]
});
});
</script>

Air-datepicker

<link href="air-datepicker/dist/css/datepicker.min.css" rel="stylesheet" type="text/css">
<script src="air-datepicker/dist/js/datepicker.min.js"></script>
<script>
$.fn.datepicker.language['ru'] = {
days: ['Воскресенье','Понедельник','Вторник','Среда','Четверг','Пятница','Суббота'],
daysShort: ['Вос','Пон','Вто','Сре','Чет','Пят','Суб'],
daysMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
months: ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
monthsShort: ['Янв','Фев','Мар','Апр','Май','Июн','Июл','Авг','Сен','Окт','Ноя','Дек'],
today: 'Сегодня',
clear: 'Очистить',
dateFormat: 'dd.mm.yyyy',
timeFormat: 'hh:ii',
firstDay: 1
};
$('.my-datepicker').datepicker({
language: 'ru'
})
var form = document.getElementById('cartform');
form.noValidate = true;
form.addEventListener('submit', function(event) {
if (!event.target.checkValidity()) {
event.preventDefault();
alert('Пожалуйста, заполните обязательные поля!');
}
}, false);
</script>

 Страницы сайта

  • Главная
  • Карточка товара
  • Доставка
  • Контакты
  • Корзина
Главная страница сайта интернет магазина
Страница товара магазина суши
Html верстка: страница доставки
Верстка страницы Контакты
Страница корзины и оформления заказа

Адаптивная верстка сайта

Дизайн и верстка сайта интернет-магазина суши
Адаптивная верстка сайта интернет-магазина
Интернет магазин суши Разработка магазина суши

Оставьте свой комментарий!


Разрешённые теги: <b><i><br>


Комментарии (0)

 

Давайте общаться

Я хотел бы поговорить о вашем бизнесе, отправьте мне письмо на make.website.info@gmail.com.