Здравствуйте. Оцените пожалуйста адаптивную верстку.

[RomaRoman]

http://verstkaaaa.esy.es/

 

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

Оцените пожалуйста код, хочу писать НЕ г*овно-код. Адаптивность. Для адаптива использовал сетку бутстрап и медиа запросы.

Посмотрите на ховер эффекты, на дизайн особо не смотрите, макет нагуглил и чуток поменял оформление, в дизайне не силен вообще.

Формы рабочие, в письме указывается откуда прислали, сверху, снизу или с попап окна( попап окно одно, на кнопке get start now)

 

 

https://developers.google.com/speed/pagespeed/insights/?hl=ru&url=http%3A%2F%2Fverstkaaaa.esy.es%2F&tab=mobile

 

Делаю себе сейчас портфолио, это первая работа. Не стыдно такое будет показывать заказчикам?

 

Спасибо за внимание.

[Vlad]

При наведении на любой plan правый блок его перекрывает, что явно выглядит ошибочно.

[Bassline]

Хорошо бы завести привычку тестировать свои работы (если нет команды тестеров) http://prntscr.com/94ycb3

[RomaRoman]

При наведении на любой plan правый блок его перекрывает, что явно выглядит ошибочно.

 

В фоксе нормально отображается а в хроме перекрывают друг друга, да. Наверное придется дать индивидуально классы и z-index.

 

Хорошо бы завести привычку тестировать свои работы (если нет команды тестеров) http://prntscr.com/94ycb3

 

Всегда найдется что-то, что упустил =\

 

Кстати верстал вроде как кросбраузерно, но в браузере майкрософта вылезло пара багов, а вот сафари вообще убил, там даже шрифты криво-косо выглядят.

 

Всем спасибо за комментарии.

[panteriya]

Не понравилось:
Эффект при наведении на кнопку "GET START NOW". Мне кажется она очень резко выделяется, может как то помягче сделать... я бы первым делом поменяла цвет рамки, а дальше только экспериментировать)
На ширине 992px что-то не так с формой. Поля для ввода широкие, кнопка тоже широкая, но чуть меньше... что-то у них не так с размерами. Как вариант, можно сделать поля под размер кнопки.

[RomaRoman]

Не понравилось: Эффект при наведении на кнопку "GET START NOW". Мне кажется она очень резко выделяется, может как то помягче сделать... я бы первым делом поменяла цвет рамки, а дальше только экспериментировать) На ширине 992px что-то не так с формой. Поля для ввода широкие, кнопка тоже широкая, но чуть меньше... что-то у них не так с размерами. Как вариант, можно сделать поля под размер кнопки.

 

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

 

В microsoft edge почему-то ховеры криво работают, текст в тегах <p> в некоторых блоках не должен никак реагировать, а он "промигивает". Это можно как-то поправить?

И не пойму чего так криво все в сафари выглядит, даже иконки font awesome, но они же векторные. Или это из-за моего монитора мб так?(1920х1200)

Там еще в инпутах иконки смещены, но это я поправлю при помощи магического скрипта

<script> 

if(cBrowser()=="firefox") { 

jQuery('span.time p').css('background','none');jQuery('span.time p').css('color','rgb(174, 207, 107)'); 

} 

if(cBrowser()=="firefox") { 

jQuery('.mec').css('background','none');jQuery('.mec').css('color','rgb(174, 207, 107)'); 

} 

 

 

 

 

function cBrowser() { 

var ua = navigator.userAgent; 

var bName = function () { 

if (ua.search(/MSIE/) > -1) return "ie"; 

if (ua.search(/Firefox/) > -1) return "firefox"; 

if (ua.search(/Opera/) > -1) return "opera"; 

if (ua.search(/Chrome/) > -1) return "chrome"; 

if (ua.search(/Safari/) > -1) return "safari"; 

if (ua.search(/Konqueror/) > -1) return "konqueror"; 

if (ua.search(/Iceweasel/) > -1) return "iceweasel"; 

if (ua.search(/SeaMonkey/) > -1) return "seamonkey";}(); 

 

return bName; 

} 

 

</script>

Или может кто-нибудь подскажет более простой способ?

 

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

Для сафари кажется нужно указывать required="false", но тогда в IE будут проблемы, если не ошибаюсь.

И как индивидуально прописать не знаю, если бы это было css свойство то воспользовался бы скриптом выше. Может быть есть подобный скрипт для html?

Edited November 21, 2015 by RomaRoman

[panteriya]

Я, к сожалению подсказать по html, css, javascript ничего не могу. Мне легче видеть проблемы внешне, на глаз, а с кодами работать, мне ещё самой учиться и практиковаться.

[atlanta]

вёрстка на bootstrap - ток что проблем быть не должно - вот свою работу - с текстового документа - до полной готовности - можете так ?