Анар Лятифов

Question

Node.js
+1 ещё

Простой

Данные в дб запрашиваются до их появления, как заставить ждать?

2 подписчика
более трёх лет назад
168 просмотров

3

ответа

Answer 1 · 2020-04-25 06:18:44

Я конечно не великий дизайнер, но буду более многословен чем мои коллеги так сказать.

Для начала вот что я думаю о текущем дизайне:

Мне кажется что цветовая палитра не плоха, за исключением блока с цитатой, на странице "About", градиент слишком резкий и чёрный цвет шрифта никак не подходит
Шапка слишком простая, попробуйте добавить анимированный фон/слайдер или думаю тут отлично будет смотреться посимвольный вывод "Please rate this page", можете и скомбинировать, но не перегружайте.
Секция "Popular articles". Идея чередовать позицию изображения и карточки в целом выглядит не плохо на бумаге, но после реализации становится понятно: "что-то не так", думаю и вы смотрели на них и думали: "Вроде не плохо, но что-то не так" чуть подробнее об этом будет ниже. Так же тут как по всему сайту есть ещё проблема которую я так же опишу ниже
Градиентный фон "пред-подвальной" части, абсолютно не вписывается в цветовую палитру, я считаю что лучше будет сам подвал сделать больше по высоте и информацию "Have any questions?" и "myemail@gmail.com" перенести в подвал(футер), а отступ сверху соц. иконок в подвале сделать больше раз уж вы дали им такую большую тень при наведении.
Страница "articles". сами по себе такие карточки, не новы, и их давно и успешно используют, тут я лишь хочу отметить, что не стоит делать тень по умолчанию как и тень при наведении столь явной, попробуйте сделать её чуть мягче, и было бы не плохо добавить в них ещё и информацию о дате, авторе, категории и приправить всё это иконками.
Страница "Interesting" по мимо блока с цитатой, о котором я уже говорил, хотелось бы отметить что вы выбрали оттенок синего для тега "b", это не очень хорошая идея так как веб научил людей что текст с оттенком синего это чаще всего ссылка, и человек инстинктивно наводит на нею ожидая этого.

В целом если это работа из числа первых, то поверьте мне могло быть и хуже))

Теперь хочу дать несколько советов и так вот они:

В вашем дизайне повсеместно нарушается одно из основных правил - "правило внутреннего и внешнего", обязательно прогуглите его, материала на эту тему более чем достаточно, как только вы начнёте его применять сами увидите как преобразится сайт, его стоит применять не только на "текстовых блоках но и по отношению ко всем элементам на странице"
Также советую прочитать или посмотреть на ютубе видео про типографику в граф. дизайне. Например это в нём более чем достаточно информации для старта и опять же не забывайте объединять полученные знания.
То о чём я говорил когда описывал секцию "Popular articles". Есть в дизайне такое понятие как "F-паттерн", не буду тут его описывать, есть люди что сделали это за меня и сделали гораздо лучше, когда вы прочтёте про него и объедините эти знания с правилом о котором я говорил выше, вы поймёте, что было не так и почему оно казалось не правильным.
И последнее, не вполне уверен, но кажется что этот сайт вы верстали что называется "из головы". Мой личный опыт показывает что всегда лучше потратить день а то и два на дизайн в программе которая для этого создана и потом просто верстать по шаблону. Для это есть уйма инструментов: Photoshop, Illustrator, Sketch, XD, Figma и тд. Лично я пользуюсь Figma, она бесплатная, доступна всех устройствах и даёт не плохой функционал.

Так или иначе, я уверен найдётся люди что со мной не согласятся, но это что называется ИМХО =)
Надеюсь смог вам помочь. =)

Answer 2 · 2020-04-25 01:22:50

Просто используйте .scrollTop не на окне, а на самом .page__wrapper.

let amountScrolled = 100;

    $(".page__wrapper").scroll(function() {
      if ( $(".page__wrapper").scrollTop() > amountScrolled ) {
        $('.arrow-up').fadeIn('slow');
      } else {
        $('.arrow-up').fadeOut('slow');
      }
    });

    $('.arrow-up').on('click', function() {
      // alert(111);
      $('.page__wrapper').animate({
        scrollTop: 0
      }, 700);
      return false;
    });

Answer 3 · 2020-05-08 20:27:47

Если я вас правильно понял то вам нужно что-то такое:

<h1 class="Name preName">GGG</h1>
<p class="Family preSurname">JJJJJJJ</p>


<form class="container">
  <input type="text" name="profileName" class="newName inputName" placeholder="Имя" value="Текст">
  <input type="text" name="aboutMe" class="newFamily inputSurname" placeholder="Фамилия" value="Текст">
  <button type class="button">Сохранить</button>
</form>

и js:

//Находим элементы "вёрстки"
let name = document.querySelector(".preName")
let surname = document.querySelector(".preSurname")

//Находим инпуты
let inputName = document.querySelector(".inputName")
let inputSurname = document.querySelector(".inputSurname")

// Проверяем если элемент не пуст то его содержимое помещаем в инпут
if (name.innerHTML() !== "") {
    inputName.value = name.innerHTML();
}

// или можно записать ещё короче

inputSurname.value = (surname.innerHTML() !== "") ? surname.innerHTML() : "";

Анар Лятифов

Наибольший вклад в теги

JavaScript

CSS

HTML

Дизайн

Вёрстка

Лучшие ответы пользователя

Оцените дизайн будущего проекта?

Как "налюбить" высоту блока чтобы кнопка заработала?

Как сделать в инпутах текст, через js?

Лучшие вопросы пользователя

Данные в дб запрашиваются до их появления, как заставить ждать?

Как избежать потерю производительности при использовании Google Map?

Войдите на сайт