Дизайн и верстка сайта интернет-магазина суши
интернет-магазин, суши, веб дизайн
Делал еще на заре своей деятельности (апрель 2017). Конечно здесь всё так по-юниорски несовершенно и многое требует переделки, но тогда старался )))
О проекте
Интернет-магазин Заказ и доставка суши в Таллине www.ginza.ee. Работают уже 8 лет. Более 1000 постоянных клиентов. Магазин, в котором самые вкусные суши, нори, инари, нигири в Эстонии!
Задача проекта
- Разработать простой лаконичный дизайн с контрастными цветами и добавлением несложных графических элементов.
- Сверстать Html страницы сайта.
Референсы для дизайна
Япония, акварель, кисти и логотип, который уже был у компании.
Что было сделано
- Разработаны макеты страниц (Photoshop).
- Отрисованы фоны, стикеры, а также набор из 23 иконок для ингредиентов и меню (Photoshop).
- Созданы gif-анимации на 3-х языках для страницы Доставка (Photoshop).
- Адаптивная верстка основных страниц: 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>
Страницы сайта
- Главная
- Карточка товара
- Доставка
- Контакты
- Корзина
Давайте общаться
Я хотел бы поговорить о вашем бизнесе, отправьте мне письмо на make.website.info@gmail.com.
Оставьте свой комментарий!
Комментарии (0)