Jump to content

Можно ли отдавать работу заказчику?


alxick
 Share

Recommended Posts

Добрый день.

Хочется услышать мнение опытных верстальщиков - можно ли отдавать такую работу условному заказчику?

Есть ли грубые ляпы? Пора уже брать реальные заказы, или пока еще потренироваться на кошках?

Верстал интернет-магазин с бесплатного макета:

в архиве http://gfile.ru/atIs

на сайте http://www.freepsd.w...zina-elwau.html

HTML:

http://popugaev38.ru/index.html

http://popugaev38.ru/object.html

http://popugaev38.ru/catalog.html

http://popugaev38.ru/contacts.html

CSS:

http://popugaev38.ru/css/style.css

JS:

http://popugaev38.ru/js/main.js

Edited by alxick
Link to comment
Share on other sites

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

Картинки товара - явно ссылки, либо в корзину, либо в подробное описание.

Ховеры ссылок хочется.

Уберите счетчики, если нужна стата - есть скрытые.

ссылки на мыла - всегда mailto:

При наведении на "купить" пальца не появляется.

Зачем подчеркнут h2???

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

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

В Контактах как-то скучновато

В общем, не сочтите за грубость, удачи и успехов.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Уберите счетчики, если нужна стата - есть скрытые.

Зачем подчеркнут h2???

В Контактах как-то скучновато

Это в шаблоне так)

Ховеры ссылок хочется.

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

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

Большое спасибо за подробный ответ.

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

Спасибо. Совсем забыл про это.

Link to comment
Share on other sites

На этой странице http://popugaev38.ru/object.html

- в галерее у первой картинки нету левой рамки (браузер Хром)

Не понял, о какой рамке речь?

- внизу в "Подобные товары" названия товара и цены просятся в центр.

Это в макете так.

а почему в левом меню-каталоге разные расстояния по вертикали между пунктами?

может это кагБэ такой способ, обозначить то что эти пункты содержат подпункты? )))))

Можно сказать и так. Я сделал подменю только у первых трех пунктов. Если добавить подменю остальным - расстояние везде будет одинаковое.

Link to comment
Share on other sites

я бы поправила:

1. названия классов, у вас двухколоночный макет, с левой стороны колонка называется - left_ col, а справа center, может в вашем случае right_col? center по моему лучше использовать когда речь идет о выравнивании элементов.

Хлебные крошки - вроде так и называют - breadcrumbs, а не way, не правильное название для описание товара - object.

так же такие названия - in, out, write...

2. иконки спрайтом, нет смысла делать их тегом ИМГ.

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

...

Link to comment
Share on other sites

я бы поправила:

1. названия классов, у вас двухколоночный макет, с левой стороны колонка называется - left_ col, а справа center, может в вашем случае right_col? center по моему лучше использовать когда речь идет о выравнивании элементов.

Хлебные крошки - вроде так и называют - breadcrumbs, а не way, не правильное название для описание товара - object.

так же такие названия - in, out, write...

2. иконки спрайтом, нет смысла делать их тегом ИМГ.

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

...

Спасибо большое. Буду исправлять)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Mondeus
      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. 
      .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  

    • By zeiger2
      Здравствуйте! У меня стоит задача, что при наведении на блок li строка должна поменять цвет, в том числе и картинка. Я меняю картинку с помощью 
      background-image: none;     background: url(../img/check_icon_red.png) left no-repeat;   Но теперь картинка позицианируется не там где должна, её можно поставить на место только вручную, через -100px. Нужно поставить ровно туда, где она была. Должна быть в одном ряду с другими
    • By Mix9
      есть див с 5 img, при уменьшении экрана див выходит за него. Я добавил overflow: auto для этого div в надежде на то, что я смогу прокручивать фотки с помощью скроллбара, однако даже с ним почему-то я не вижу часть фоток которые вышли за границу. Что с этим можно сделать? класс video повторяется 5 раз, я тут оставил только 1 
      .content{ width: 90%; background-color: #333; } .video{ margin: 0px 4px 0px 4px; width: 310; display: flex; flex-direction:column; } .video_button_text{ margin-top: 10px; display: flex; flex-direction: row; font-size: 20px; color: white; } .video_text_div{ display: inline-block; width: 250px; } .video_text{ text-align: justify-all; margin: 0px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .slidan_videos{ margin: 0px 10px 0px 20px; overflow: auto; width: auto; margin-bottom: 50px; display: flex; flex-direction: row; justify-content: space-around; } <div class="content"> <div class = slidan_videos> <div class = video> <div> <a href = 'ссылка'><img class="img" src=""картинка"></a> </div> <div class = video_button_text> <div class = avatarka_div> <a href="ссылка" target="_blank"><img class = avatarka src="картинка"></a> </div> <div class = video_text_div> <p class = video_text><a href="ссылка">текст</a></p> </div> </div> </div>
    • By ilya1203
      Прошу помочь с заданием:
      Написать файл скрипта, который генерирует три числа, соответствующие значениям высоты, длины и ширины комнаты. Отобразить в консоли:
      a.Площадь стен комнаты
      b.Объём комнаты
      c.*Объём комнаты за вычетом случайно сгенерированного количества чисел, которые определяет объёмы случайно зашедших в комнату людей.
      (в итоге запустит скрипт последством консоли)
      (заранее огромное спасибо)
    • By Kaido
      Использую готовый плагин для модальных окон(от MaxGraph). Проблема в том, что когда у меня открыто два модальных окна, для примера Форма + Политика конфендициальности, и мне нужно закрыть политику вместе с ней закрывается и другое модальное окно. В JS я не сильно разбираюсь(собственно из за этого и использую готовый плагин), можете помочь кто работал с этим плагином? Я примерно понимаю как он работает, но реализовать чтобы закрывалось только одно не получается.
       
        <div class="content"> <button class="modal-btn" data-path="first" data-animation="fadeInUp" data-speed="1500">Открыть окно 1</button> </div> <div class="modal"> <div class="modal__wrapp" data-target="first"> <div class="modal__content"> <button class="modal__close">Закрыть</button> модальное окно <button data-path="policy">Политика</button> </div> </div> <div class="modal__wrapp" data-target="policy"> <div class="modal__content"> <button class="modal__close">Закрыть</button> политика </div> </div> </div> .modal { --transition-time: 0.3s; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1000; cursor: pointer; overflow-y: auto; overflow-x: hidden; text-align: center; opacity: 0; visibility: hidden; transition: opacity var(--transition-time), visibility var(--transition-time); } .modal__wrapp { display: none; cursor: default; width: fit-content; height: fit-content; } .modal__content{ position: absolute; left: 500px; width: 500px; height: 500px; display: flex; color: white; flex-direction: column; text-align: left; background-color: #000; } .modal__content button{ width: 200px; height: 50px; margin: 50px 0; } .modal.is-open { opacity: 1; visibility: visible; transition: opacity var(--transition-time), visibility var(--transition-time); } .modal__wrapp.modal-open { display: flex; } .disable-scroll { position: relative; overflow: hidden; height: 100vh; position: fixed; left: 0; top: 0; width: 100%; } .fade { opacity: 0; transition: opacity var(--transition-time); } .fade.animate-open { opacity: 1; transition: opacity var(--transition-time); } .fadeInUp { opacity: 0; transform: translateY(vw(-100)); transition: opacity var(--transition-time), transform var(--transition-time); } .fadeInUp.animate-open { opacity: 1; transform: translateY(0); transition: opacity var(--transition-time), transform var(--transition-time); } .modal__wrapp[data-target="policy"] .modal__content{ left: 1050px; background-color: #000; opacity: .5; } class Modal { constructor(options) { let defaultOptions = { isOpen: () => {}, isClose: () => {}, } this.options = Object.assign(defaultOptions, options); this.modal = document.querySelector('.modal'); this.speed = false; this.animation = false; this.isOpen = false; this.modalContainer = false; this.previousActiveElement = false; this.fixBlocks = document.querySelectorAll('.fix-block'); this.focusElements = [ 'a[href]', 'input', 'button', 'select', 'textarea', '[tabindex]' ]; this.events(); } events() { if (this.modal) { document.addEventListener('click', function(e){ const clickedElement = e.target.closest('[data-path]'); if (clickedElement) { let target = clickedElement.dataset.path; let animation = clickedElement.dataset.animation; if (clickedElement.classList.contains('modal-close')) { this.close(); } let speed = clickedElement.dataset.speed; this.animation = animation ? animation : 'fade'; this.speed = speed ? parseInt(speed) : 300; this.modalContainer = document.querySelector(`[data-target="${target}"]`); this.open(); return; } if (e.target.closest('.modal__close')) { this.close(); return; } }.bind(this)); window.addEventListener('keydown', function(e) { if (e.keyCode == 27) { if (this.isOpen) { this.close(); } } if (e.keyCode == 9 && this.isOpen) { this.focusCatch(e); return; } }.bind(this)); this.modal.addEventListener('click', function(e) { if (!e.target.classList.contains('modal__wrapp') && !e.target.closest('.modal__wrapp') && this.isOpen) { this.close(); } }.bind(this)); } } open() { this.previousActiveElement = document.activeElement; this.modal.style.setProperty('--transition-time', `${this.speed / 1000}s`); this.modal.classList.add('is-open'); this.disableScroll(); this.modalContainer.classList.add('modal-open'); this.modalContainer.classList.add(this.animation); setTimeout(() => { this.options.isOpen(this); this.modalContainer.classList.add('animate-open'); this.isOpen = true; this.focusTrap(); }, this.speed); } close() { if (this.modalContainer) { this.modalContainer.classList.remove('animate-open'); this.modalContainer.classList.remove(this.animation); this.modal.classList.remove('is-open'); this.modalContainer.classList.remove('modal-open'); this.enableScroll(); this.options.isClose(this); this.isOpen = false; this.focusTrap(); } } focusCatch(e) { const focusable = this.modalContainer.querySelectorAll(this.focusElements); const focusArray = Array.prototype.slice.call(focusable); const focusedIndex = focusArray.indexOf(document.activeElement); if (e.shiftKey && focusedIndex === 0) { focusArray[focusArray.length - 1].focus(); e.preventDefault(); } if (!e.shiftKey && focusedIndex === focusArray.length - 1) { focusArray[0].focus(); e.preventDefault(); } } focusTrap() { const focusable = this.modalContainer.querySelectorAll(this.focusElements); if (this.isOpen) { focusable[0].focus(); } else { this.previousActiveElement.focus(); } } disableScroll() { let pagePosition = window.scrollY; this.lockPadding(); document.body.classList.add('disable-scroll'); document.body.dataset.position = pagePosition; document.body.style.top = -pagePosition + 'px'; } enableScroll() { let pagePosition = parseInt(document.body.dataset.position, 10); this.unlockPadding(); document.body.style.top = 'auto'; document.body.classList.remove('disable-scroll'); window.scroll({ top: pagePosition, left: 0 }); document.body.removeAttribute('data-position'); } lockPadding() { let paddingOffset = window.innerWidth - document.body.offsetWidth + 'px'; this.fixBlocks.forEach((el) => { el.style.paddingRight = paddingOffset; }); document.body.style.paddingRight = paddingOffset; } unlockPadding() { this.fixBlocks.forEach((el) => { el.style.paddingRight = '0px'; }); document.body.style.paddingRight = '0px'; } } const modal = new Modal({ isOpen: (modal) => { console.log(modal); console.log('opened'); }, isClose: () => { console.log('closed'); }, });  
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy