Skip to content

Дубровин Алексей #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Griboedoff wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Дубровин Алексей #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
db81940
mobile first
Griboedoff Mar 28, 2018
9f32904
tablet second
Griboedoff Mar 29, 2018
f44f5ea
desktop third
Griboedoff Mar 29, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion .htmllintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@
"spec-char-escape": true,
"tag-bans": [
"b",
"i",
Copy link
Copy Markdown

@evgenymarkov evgenymarkov Apr 16, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

???
Лучше не использовать <i> если ты просто хочешь написать что-то курсивом. Для этого либо примени стили, либо тэг <em>.

"u",
"center",
"style",
Expand Down
88 changes: 88 additions & 0 deletions header.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
.header
{
grid-area: h;
padding: 5px 10px 10px;
display: grid;
background-color: #fff;
}

.header__title
{
grid-area: t;
font-size: 25px;
margin: 0;
}

.header__burger
{
display: none !important;
}

.search
{
grid-area: s;
width: 100%;
display: flex;
}

.search__input,
.search__button
{
box-sizing: border-box;
border: 1px solid #e8e8e8;
height: 30px;
}

.search__input
{
width: 90%;
}

.search__button
{
background-color: #e8e8e8;
}

.header__search-icon
{
display: none !important;
}

@media screen and (min-width: 601px)
{
.header
{
grid-template-areas: 't s';
}
}

@media screen and (min-width: 601px) and (max-width: 850px)
{
.search
{
display: none;
}

.header__search-icon
{
display: block !important;
position: absolute;
top: 10px ;
right: 10px;
}
}

@media screen and (max-width: 600px)
{
.header
{
grid-template-areas: 't b' 's s';
}

.header__burger
{
grid-area: b;
margin: auto 0 auto auto;
display: block !important;
}
}
56 changes: 56 additions & 0 deletions index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
@import 'header.css';
@import 'suggest.css';
@import 'navigation.css';
@import 'order.css';
@import 'items.css';
@import 'item.css';

body
{
margin: 0;
font: 17px sans-serif;
background-color: #f6f6f6;
}

main
{
display: grid;
padding: 20px;
grid-row-gap: 10px;
width: 100%;
box-sizing: border-box;
}

.link
{
color: #3072c4;
text-decoration: none;
}

@media screen and (min-width: 851px)
{
main
{
grid-template-areas: 'n l s' '. l .' '. o .';
grid-column-gap: 5px;
justify-items: center;

}
}

@media screen and (min-width: 601px) and (max-width: 850px)
{
main
{
grid-template-areas: 'n' 'l' 's' 'o';
}
}

@media screen and (max-width: 600px)
{
main
{
grid-template-areas: 's' 'l' 'o';
justify-items: center;
}
}
110 changes: 110 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,119 @@
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Задача «Тим слишком занят»</title>
<link rel="stylesheet" href="./index.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css"
integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1"
crossorigin="anonymous">
<script src="index.js"></script>
</head>
<body>
<header class="header">
<h2 class="header__title">Билли.Маркет</h2>
<i class="fas fa-bars header__burger"></i>
<div class="search">
<input class="search__input" type="text" title="search">
<button class="search__button">Найти</button>
</div>
<i class="header__search-icon fas fa-search"></i>
</header>
<main>
<nav class="navigation">
<span class="navigation__close">✕</span>
<a class="link navigation__link" href="">Морские ракушки</a>
<a class="link navigation__link" href="">Сувениры из Тайланда</a>
<a class="link navigation__link" href="">Автомобили Tesla</a>
<a class="link navigation__link" href="">Марки из разных стран</a>
<a class="link navigation__order" href="">Заказать сувенир</a>
</nav>
<section class="items">
<div class="item">
<img src="./static/thermokruzhkus.jpg" width="200" alt="Термокружкус" class="item__image">
<div class="item__description">
<a class="link item__name">Термокружкус «Батарейка»</a>
<span class="item__price">799 ₽</span>
<div class="item__rating">
<span class="item__rating-value">4.5</span>
<span class="item__rating-reviews">123 отзыва</span>
</div>
</div>
</div>
<div class="item">
<img src="./static/chesalka.jpg" width="200" alt="Чесалка" class="item__image">
<div class="item__description">
<a class="link item__name">Чесалка</a>
<span class="item__price">1000 ₽</span>
<div class="item__rating">
<span class="item__rating-value">3.0</span>
<span class="item__rating-reviews">2 отзыва</span>
</div>
</div>
</div>
<div class="item">
<img src="./static/rozetkus.jpg" width="200" alt="Розеткус" class="item__image">
<div class="item__description">
<a class="link item__name">Удлиннитель «Розеткус»</a>
<span class="item__price">2000 ₽</span>
<div class="item__rating">
<span class="item__rating-value">4.0</span>
<span class="item__rating-reviews">1321 отзыв</span>
</div>
</div>
</div>
<div class="item">
<img src="./static/tesla.jpeg" width="200" alt="Tesla X" class="item__image">
<div class="item__description">
<a class="link item__name">Tesla X</a>
<span class="item__price">1231232 ₽</span>
<div class="item__rating">
<span class="item__rating-value">5.0</span>
<span class="item__rating-reviews">1 отзыв</span>
</div>
</div>
</div>
</section>
<aside class="suggest">
<h4 class="suggest__title">Популярные товары</h4>
<div class="suggest__items">
<a class="link" href="">Tesla X</a>
<a class="link" href="">Tesla S</a>
<a class="link" href="">Falcon Heavy</a>
</div>
</aside>
<form class="order">
<h3 class="order__title">Заказать сувенир</h3>
<label for="count" class="order__row">
<span class="order__row-title">Количество</span>
<input type="text" class="order__input" id="count">
</label>
<label for="city" class="order__row">
<span class="order__row-title">Город</span>
<select class="order__input" id="city">
<option>-</option>
<option>Москва</option>
<option>Екатеринбург</option>
<option>Териберка</option>
</select>
</label>
<label for="email" class="order__row">
<span class="order__row-title">E-mail</span>
<input type="email" class="order__input" id="email">
</label>
<label for="telephone" class="order__row">
<span class="order__row-title">Телефон</span>
<input type="tel" class="order__input" id="telephone">
</label>
<label for="date" class="order__row">
<span class="order__row-title">Дата</span>
<input type="date" class="order__input" id="date">
Copy link
Copy Markdown

@evgenymarkov evgenymarkov Apr 16, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

type="date" поддерживается очень ограниченно
Чинить не призываю, но стоит иметь в виду.

</label>
<div class="order__buttons">
<button class="order__button">Сбросить</button>
<button class="order__button">Заказать</button>
</div>
</form>
</main>
</body>
</html>
29 changes: 29 additions & 0 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
window.onload = () => {
const burgerMenu = document.querySelector('.header__burger');
const navigationClose = document.querySelector('.navigation__close');
const navigation = document.querySelector('.navigation');
const search = document.querySelector('.search');
const searchInput = document.querySelector('.search__input');
const searchIcon = document.querySelector('.header__search-icon');

burgerMenu.onclick = () => {
navigation.style.display = 'flex';
};

navigationClose.onclick = () => {
navigation.style.display = 'none';
};

searchIcon.onclick = () => {
search.style.display = 'flex';
searchIcon.classList.remove('fa-search');
};

searchInput.onblur = () => {
Copy link
Copy Markdown

@evgenymarkov evgenymarkov Apr 16, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Нужно дополнительно включать фокус на строку поиска после нажатия на кнопку

const width = document.documentElement.clientWidth;
if (width > 600 && width <= 850) {
search.style.display = 'none';
searchIcon.classList.add('fa-search');
}
};
};
Copy link
Copy Markdown

@evgenymarkov evgenymarkov Apr 16, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Не реализован свайп

50 changes: 50 additions & 0 deletions item.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
.item
{
display: flex;
flex-direction: column;
background-color: #fff;
padding: 20px;
align-items: center;
margin: 2px;
box-sizing: border-box;
width: 300px;
height: 320px;
justify-content: space-between;
}

.item__description
{
display: flex;
flex-direction: column;
text-align: left;
width: 100%;
}

.item__price
{
font-weight: bold;
}

.item__rating-value
{
position: relative;
background-color: #569f20;
padding: 1px;
width: 35px;
height: 20px;
box-sizing: border-box;
}

.item__rating-reviews
{
font-size: .7em;
color: #9d9d9d;
}

@media screen and (min-width: 601px) and (max-width: 850px)
{
.item
{
flex-grow: 1;
}
}
31 changes: 31 additions & 0 deletions items.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
.items
{
grid-area: l;
display: flex;
align-items: center;
}

@media screen and (min-width: 851px)
{
.items
{
width: 610px;
}
}

@media screen and (min-width: 601px)
{
.items
{
flex-wrap: wrap;
flex-direction: row;
}
}

@media screen and (max-width: 600px)
{
.items
{
flex-direction: column;
}
}
Loading