Jump to content

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


Алеся
 Share

Recommended Posts

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

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

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

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

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

 

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

 

Edited by Алеся
Link to comment
Share on other sites

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

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

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

Edited by Алеся
Link to comment
Share on other sites

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

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

z7.jpg

z9.jpg

z8.jpg

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

Edited by Алеся
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

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

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

 

 

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

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

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

image.png

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

 

image.png

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

 

image.png

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

 

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

 

 

 

 

  • Like 1
Link to comment
Share on other sites

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

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

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

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

object-fit

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

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

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

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

Link to comment
Share on other sites

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

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

 

 

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

image.png

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

 

image.png

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

 

image.png

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

 

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

 

 

 

 

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

Link to comment
Share on other sites

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

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

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

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

Link to comment
Share on other sites

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

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

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

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

Link to comment
Share on other sites

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

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

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

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

888.jpg

Link to comment
Share on other sites

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>

 

 

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

  • Обсуждения

    • Вот тут есть актуальный список бесплатных тестов с сертификацией https://www.classcentral.com/report/free-certificates/ Обратите внимание на HackerRank, там есть тест с сертификацией непосредственно по CSS
    • Нужно сверстать по картинке меню-бар. Не получается сделать вот это поле поиска <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <style> .nav {     display: flex;     list-style-type: none;     padding-left: 0;     font-size: 17px;     text-transform: uppercase; } .nav > li > a {     color: #fff;     text-decoration: none; } .nav > li {     padding-left: 29px;     margin-left: 30px; } .header {     display: flex;     background-color: #31485b;     justify-content: space-between;     align-items: center; }   .sidebar {     width: 410px;     display: block;     padding-right: 20px;     margin: auto;     margin-left: 250px; }   ul.nav li a:hover {     background-color: #687c8d;     padding: 17.2px 35px; }   input[type="text"], input[type="search"] {   background-color: #687c8d;   width: 60%;   padding: 8px;   margin: 0 50px }   input[type="search"] {     color: #31485b;     font-style: italic; }     </style> </head> <body>     <div class="header">                 <ul class="nav">                     <li class="s1"><a href="#">Главная</a></li>                     <li><a href="#">Блог</a></li>                     <li><a href="#">Сервисы</a></li>                     <li><a href="#">Онлайн-профессии</a></li>                     <li><a href="#">О сайте</a></li>                 </ul>                                 <div class="sidebar">                     <form method="post" action="#" id="search_form" >                       <input type="search" name="search_field" placeholder="Поиск" />                     </form>                   </div>     </div> </body> </html>  
    • ЭЭ, а почему оно должно удалять? Может стоило повесить событие на эту кнопку и указать, что при это должно происходить?
    • например -R не будет качать указанные файлы если вы знаете список нужных вам файлов, проще их указать или можно написать парсер
    • выкладывайте код в песочнице, так будет проще У вас media подключается до blocks/header, по этому правила из blocks/header перекрывают media сверху вниз в css пишите tag .class ... @media и не будет у вас подобных проблем  
×
×
  • 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