Оцените, пожалуйста, лэндинг.

[Алеся]

Всем привет! Оцените, пожалуйста, лэндинг https://alesia-k.github.io/AXIT-template/.

Не буду конкретно описывать на что хочу, чтобы вы обратили внимание. Как говорится, it's up to you.

Буду благодарна советам, нахождению ошибок и конструктивной критике.

Интересует как, на ваш взгляд, я реализовала гибкость конструкций при изменении объёма текста или подстановки других картинок, например.

И в общем, хочется услышать мнение по любым моментам.

 

Заранее спасибо!

 

Edited December 9, 2021 by Алеся

[maxik]

Косяк... в футере стоит копирайт = © 2015 Axure Themes... а что обсуждать - чужой макет и версту... ну поправили вы что-то = теперь вы гуру.... извините за конструктив.... 

[Алеся]

2 часа назад, maxik сказал:

Косяк... в футере стоит копирайт = © 2015 Axure Themes... а что обсуждать - чужой макет и версту... ну поправили вы что-то = теперь вы гуру.... извините за конструктив.... 

В чём проблема верстать обычный шаблон, в котором есть знак копирайта? Он присутствует во многих пробных макетах. Это обычная реализация ПО ПРОБНОМУ МАКЕТУ. Моя работа от начала до конца. То, что в макете присутствует знак копирайта не означает, что вёрстка чужая. Раз вы считаете меня гуру, спасибо вам за такую высокую оценку.

Edited December 10, 2021 by Алеся

[maxik]

Алеся... я все понимаю... но если это Ваша тема (диз и верстка) то +10000 в карму... На скрине диз и верста (моя)... Оцените свои возможности по сложности для Вас...

[Алеся]

3 часа назад, maxik сказал:

Алеся... я все понимаю... но если это Ваша тема (диз и верстка) то +10000 в карму... На скрине диз и верста (моя)... Оцените свои возможности по сложности для Вас...

Я выложила проект, чтобы опытные люди поделились советами как и что можно улучшить/изменить, а не для того, чтобы демонстрировать его с позиции супер масштабного и сложнейшего проекта. Мы здесь учимся и раздел "обсуждение работ" создан для получения советов, а не для сравнения или хвастовства. Возможно, я ошиблась, решив что этот сайт и данный раздел в частности созданы именно для этого. Учту.

Edited December 11, 2021 by Алеся

[maxik]

а простите... что обсуждать... стандартные блоки... как оценить вашу работу... ну да норм... если бы вы предоставили что вы изменили - тогда вы бы получили разбор полетов... сейчас - это не лейдинг.. Нет подключённых JS = скролл, табы и прочее например типовые иконки...  напишите что вы конкретно сделали = было-стало.... Я выставил свои скрины за которые я уверен что делал и верстал сам, а не брал чужой код.... Если есть желание потренироваться - могу выслать вам макет лейдинга - вот и сверстаете с нуля....

[npofopr]

1 час назад, maxik сказал:

а простите... что обсуждать... стандартные блоки... как оценить вашу работу... ну да норм... если бы вы предоставили что вы изменили - тогда вы бы получили разбор полетов... сейчас - это не лейдинг..

Вы кажется вообще не понимаете суть раздела. Если для вас нечего оценивать, можно промолчать. 
И предъявлять необоснованные претензии, также не стоит. Не верите в работу других людей, не надо.

 

 

10.12.2021 в 00:26, Алеся сказал:

И в общем, хочется услышать мнение по любым моментам.

Кажется в конструкции .container > .#__inner можно избавиться от .container или как то иначе сделать. 
Есть ощущение что 2 дива излишни. 

Тут я бы стили унифицировал, чтобы не было разных паддингов под разные иконки. 
Иконку вполне можно центровать через тот же absolute или флексами. Ограничив максимальные размеры. 

 

Подумайте, что будет, если вставить горизонтальное или вертикальное фото. 
object-fit можно добавить. 

 

Ссылка отправки обычно идёт внутри формы. 
Ну и обычно это не ссылка, а кнопка. 

 

Пока что, если бегло, всё. 

 

 

 

 

[maxik]

1 час назад, npofopr сказал:

Вы кажется вообще не понимаете суть раздела. Если для вас нечего оценивать, можно промолчать. 
И предъявлять необоснованные претензии, также не стоит. Не верите в работу других людей, не надо.

Вы так же берете чужие макету и выставляете = аля я сделал.... ну давай переставим блоки местами... Про суть раздела - выставляете оригинальные работы = тогда есть что обсуждать... Посмотри CSS и ответь про название класса и наследие = banner__column column--title = Это БЭМ... и сомневаюсь что автор поста сама писала код.... 

1 час назад, npofopr сказал:

object-fit

))))... а она знает что это... а про свойство (fill, contain, cover, scale-down) видимо то же....

1 час назад, npofopr сказал:

Ссылка отправки обычно идёт внутри формы. 

Да.. и это кнопка и она не должна выходить из блока <form></form>

[Алеся]

2 часа назад, npofopr сказал:

Вы кажется вообще не понимаете суть раздела. Если для вас нечего оценивать, можно промолчать. 
И предъявлять необоснованные претензии, также не стоит. Не верите в работу других людей, не надо.

 

 

Кажется в конструкции .container > .#__inner можно избавиться от .container или как то иначе сделать. 
Есть ощущение что 2 дива излишни. 

Тут я бы стили унифицировал, чтобы не было разных паддингов под разные иконки. 
Иконку вполне можно центровать через тот же absolute или флексами. Ограничив максимальные размеры. 

 

Подумайте, что будет, если вставить горизонтальное или вертикальное фото. 
object-fit можно добавить. 

 

Ссылка отправки обычно идёт внутри формы. 
Ну и обычно это не ссылка, а кнопка. 

 

Пока что, если бегло, всё. 

 

 

 

 

Спасибо вам! Замечания проработаю.

[npofopr]

18 часов назад, maxik сказал:

))))... а она знает что это... а про свойство (fill, contain, cover, scale-down) видимо то же....

А должна? Она и многие тут как раз за тем, чтобы выслушать. И учиться дальше. 

Ваша задача, раз вы умнее, подсказать, помочь, наставить. Не хотите, сомневаетесь, проходите дальше. 

[maxik]

Если Алеся... хочет учиться... и если есть желание.. я предоставлю тестовый блок и буду подсказывать как и что... может и ты поучаствуешь как профи в этом????... Слабо.....

[npofopr]

16 часов назад, maxik сказал:

Если Алеся... хочет учиться... и если есть желание.. я предоставлю тестовый блок и буду подсказывать как и что... может и ты поучаствуешь как профи в этом????... Слабо.....

*рука_лицо* просто. Предоставь. Мне уже просто интересно) 

Хотя бы узнаю, что ты подразумеваешь под "блоком")

[maxik]

14.12.2021 в 09:28, npofopr сказал:

Хотя бы узнаю, что ты подразумеваешь под "блоком")

Вам известно что такое Блочная модель....)))

Вот вам типичная структура блоков, а теперь предлагаю подумать как сверстать мобильную версию используя только @media....

[npofopr]

Вы шутите? 

1. desktop пишется через K

2. В типичной структуре обычно sidebar не ставят выше шапки. 

3. https://jsfiddle.net/npofopr/qkcabj8w/ 

 

Свой вариант покажите? 

[maxik]

16.12.2021 в 16:23, npofopr сказал:

Вы шутите? 

1. desktop пишется через K

2. В типичной структуре обычно sidebar не ставят выше шапки. 

3. https://jsfiddle.net/npofopr/qkcabj8w/ 

 

Свой вариант покажите? 

1. desktop пишется через K = принято....)))

2. а вот такая версия мобильная, считайте что это меню))))

3. GRID рулит.... Давно отказался от Bootstrap)))....

В моем варианте sidebar - имеет ширину в px - тк на разных медиа есть возможность управлять шириной....

Пи.Си = главное чтоб кому -то это пригодится и чтоб понимали что такое = grid-template-areas и как это работает в медиа-запросах....

Скрытый текст

<!doctype html>

<html lang="ru">

<title>Example</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

* {box-sizing: border-box;}

@-ms-viewport {width: device-width;}

html {box-sizing: border-box; -ms-overflow-style: scrollbar; font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; overflow-x: hidden; height: 100%; margin: 0;}

*, *::before, *::after {box-sizing: inherit;}

body {height: 100%; font-weight:normal !important; background:#fff; padding:0; color:#333; font-size:16px; margin: 0;}

#page {display: grid; color:#fff; grid-template-areas: "header header header" "nav article article" "footer footer footer"; grid-template-rows: 50px 1fr 50px; grid-template-columns: 300px 1fr; grid-row-gap: 12px; grid-column-gap: 12px; height: 100vh; margin: 0 auto; max-width: 1600px;}

#pageHeader {grid-area: header; background: red; padding:0 12px;}

#pageFooter {grid-area: footer; background: black; padding:0 12px;}

#mainArticle {grid-area: article; background: white; color:#000;}

#mainNav {grid-area: nav; background: #336699; padding:0 12px;}

.grid {display: grid; grid-template-columns: repeat(9, 1fr); grid-column-gap: 12px; grid-row-gap: 12px;}

img {width: 100%; display: block;}

.element {display: grid; grid-template-columns: 398px 1fr; grid-column-gap: 12px; grid-row-gap: 12px; margin-bottom:12px;}

.flex-center {-ms-flex-align: center !important; align-items: center !important; flex: 1 100%;}

@media all and (max-width: 1000px) {

#page {grid-template-columns: 200px 1fr;}

.grid {display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 12px; grid-row-gap: 12px;}

.element {display: grid; grid-template-columns: 40% 1fr; grid-column-gap: 12px; grid-row-gap: 12px;}

}

@media all and (max-width: 575px) {

#page {grid-template-areas: "nav" "header" "article" "footer"; grid-template-rows: 50px 50px 1fr 50px; grid-template-columns: 1fr;}

.grid {display: grid; grid-template-columns: repeat(2, 1fr); margin-left:12px; margin-right:12px; grid-column-gap: 12px; grid-row-gap: 12px;}

.element {display: grid; grid-template-columns: 1fr; margin-left:12px; margin-right:12px; grid-column-gap: 12px; grid-row-gap: 12px;}

}

</style>

<body>

<section id="page">

<header id="pageHeader">Header</header>

<article id="mainArticle">

<section class="element flex-center">

<div style="background:#ddd;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

<div style="background:#ddd;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nisl dolor, gravida sed efficitur at, tempus nec libero. Aliquam vel massa lectus. In quis auctor justo, id luctus justo. Praesent feugiat velit a nulla convallis, non commodo nulla tempor. Quisque mollis nunc sit amet tortor auctor, eu faucibus orci egestas. Nulla quis sollicitudin erat. Sed vel sapien nec est sagittis finibus vel eu neque.</div>

</section>

<section class="grid">

<div><img src="https://via.placeholder.com/350"/></div>

<div><img src="https://via.placeholder.com/350"/></div>

<div><img src="https://via.placeholder.com/350"/></div>

<div><img src="https://via.placeholder.com/350"/></div>

<div><img src="https://via.placeholder.com/350"/></div>

<div><img src="https://via.placeholder.com/350"/></div>

<div><img src="https://via.placeholder.com/350"/></div>

<div><img src="https://via.placeholder.com/350"/></div>

<div><img src="https://via.placeholder.com/350"/></div>

<div><img src="https://via.placeholder.com/350"/></div>

<div><img src="https://via.placeholder.com/350"/></div>

<div><img src="https://via.placeholder.com/350"/></div>

<div><img src="https://via.placeholder.com/350"/></div>

<div><img src="https://via.placeholder.com/350"/></div>

<div><img src="https://via.placeholder.com/350"/></div>

<div><img src="https://via.placeholder.com/350"/></div>

<div><img src="https://via.placeholder.com/350"/></div>

<div><img src="https://via.placeholder.com/350"/></div>

<div><img src="https://via.placeholder.com/350"/></div>

<div><img src="https://via.placeholder.com/350"/></div>

</section>

</article>

<nav id="mainNav">Nav</nav>

<footer id="pageFooter">Footer</footer>

</section>

</body>

</html>