Jump to content

Оцените мой не первый сайт


WebNewbe
 Share

Recommended Posts

Здравствуйте. Оцените пожалуйста данную верстку. Судить строго! 
https://alex2033.github.io/
Использовал: сетку с поддержкой флексов (Flexbox Grid)
На данный момент пока самый сложный макет, который верстал.
Реализованы:
- слайдеры

- плавные переходы по ссылкам на якори

- адаптивное меню Toggle(специально верхнюю часть хедера делал через флоаты, т.к. с флексами Toggle несколько конфликтует)
- табы

- scroll up

- всплывающие окна

и прочее
 

Link to comment
Share on other sites

  On 9/19/2017 at 7:45 PM, andrey7287 said:

Transition надо на исходное состояние вешать а не на ховер, чтоб вот такой фигни как у тебя сейчас не было.

Expand  

Уточните, о какой секции идет речь?

Edited by WebNewbe
Link to comment
Share on other sites

  On 9/19/2017 at 8:04 PM, WebNewbe said:

Уточните, о какой секции идет речь?

Expand  

Вот наглядный пример : 

 

4pp9WhZ0RfCZNEJNPFkhNg.png

При переносе свойства "transition" с состояния "hover" в дефолтный стиль ссылки  , плавность не будет пропадать при отведении мышки с элемента меню.

Edited by DevChristmas
  • Like 1
Link to comment
Share on other sites

  On 9/19/2017 at 7:45 PM, andrey7287 said:

Transition надо на исходное состояние вешать а не на ховер, чтоб вот такой фигни как у тебя сейчас не было.

Expand  

 

  On 9/20/2017 at 3:13 AM, DevChristmas said:

Вот наглядный пример : 

 

4pp9WhZ0RfCZNEJNPFkhNg.png

При переносе свойства "transition" с состояния "hover" в дефолтный стиль ссылки  , плавность не будет пропадать при отведении мышки с элемента меню.

Expand  

свойство transition был перемещен с ховера на сами элементы для всех элементов. Какие еще есть замечания?

Link to comment
Share on other sites

Да это было не замечание , я просто поддержал слова Андрея.

  On 9/19/2017 at 7:45 PM, andrey7287 said:

Transition надо на исходное состояние вешать а не на ховер, чтоб вот такой фигни как у тебя сейчас не было.

Expand  

Transition и на hover иногда ставится.

Edited by DevChristmas
Link to comment
Share on other sites

Почему-то вспомнилась серия роликов "Джедай верстки" с канала webdesignmaster. Стиль верстки чем-то похож. Вот что привлекло внимание: 

1) Путаница с методологией именования классов. Где-то БЭМ (ссылки в меню), где-то без БЭМа. Нужно выбрать какую-то одну методологию и придерживаться только ее

2) Смешивается оформление и содержание. html код можно сократить в несколько раз:

- Для декоративной линии под заголовком не нужно делать отдельный div в разметке.

- Пять вложенных элементов в разметке для стилизации декоративной иконки с якорем -- это перебор.

- Декоративные линии с красной точкой посередине под заголовком, которые верстаются как div с тремя span'ами, один из которых содержит инлайн-svg (красную точку) -- это слишком сложно. 

- Декоративные треугольники через svg -- это слишком сложно. Размещение неконтентного декоративного элемента (красный треугольник в блоге) по вертикальному центру через align-self + position:absolute -- это весьма необычное сочетание, которое, вдобавок, не работает в IE11. Достаточно абсолютного позиционирования и одного псевдоэлемента (треугольники делаются через border).  

3) В IE11 появляется горизонтальный скролл из-за svg-элемента в разделе team, который растягивает контейнер в ширину. Нужно что-нибудь типа oveflow:hidden на родительском элементе.

4) На ширине 992 пикселя контейнер выходит за пределы блока-родителя (section) в результате чего образуется уродливая белая полоса справа.

Edited by Tilonorrinco
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.*Объём комнаты за вычетом случайно сгенерированного количества чисел, которые определяет объёмы случайно зашедших в комнату людей.
      (в итоге запустит скрипт последством консоли)
      (заранее огромное спасибо)
×
×
  • 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