Ответы пользователя по тегу CSS
  • Как выровнять цены с помощью css?

    @LazarchukNazar
    Джаваскриптизер
    Самый простой вариант, это сделать в контейнере с назвой (там где написано адидас)
    ...
    position: relative;
    padding-bottom: ...;

    а цену указать так:
    ...
    position: absolute;
    bottom: 0;

    Я недавно делал так в проекте, можешь посмотреть тут
    Ответ написан
  • Как сверстать подобное (скрин прикреплен)?

    @LazarchukNazar
    Джаваскриптизер
    Это легко делаеться через псевдоелементы. Что я имею ввиду: Желтый квадрат на самом деле имеет бордер (обводку) только с трех сторон, четвертая же сделана визуальными елементами, которые позиционируються абсолютом
    .квадрат {
    position: relative; // или absolute
    border: 4px solid yellow;
    border-left: none;
    width: ...;
    height: ...;
    }
    .квадрат::before, .квадрат::after {
      content: "";
      position: absolute;
      left: 0;
      width: 4px;
      background: yellow;
    }
    .квадрат::before {
      top: 0;
      height: ...;
    }
    .квадрат::after{
      bottom: 0;
      height: ...;
    }
    Ответ написан
  • Как сделать редактирование профиля в окне?

    @LazarchukNazar
    Джаваскриптизер
    Для начала, в форму необходимо добавить поля для редактирования в форму и заполнить их атрибут defaultValue через JS:
    <form class="form" id="form">
                <button class="profile__buttonClose"></button>
              
              <label>
                Имя
                <input type="text" name="firstname"/>
              </label>
              <label>
                Описание
                <input type="text" name="description"/>
              </label>
    
              
                <button class="form__sumbit-button" type="submit">
                    <h3 class="form__save">Сохранить</h3>
    
                </button>
            </form>

    document.querySelector('input[name="firstname"]').defaultValue = 'Старое значение поля Firstname'
    document.querySelector('input[name="description"]').defaultValue = 'Старое значение поля Description'

    Далее, необходимо сделать нужный запрос. Если перезагрузка сайта нужна, тогда просто указываем адресс в атрибутах
    <form action="..." method="..." ... >. Но если нужен асинхронный запрос, тогда делаем его через JS (в таком случае это называют AJAX), для этого можно найти сотни-тысяч примеров на codepen
    document.querySelector('form').addEventListener('submit', (e) => {
      e.preventDefault();
      const firstname = document.querySelector('input[name="firstname"]').value;
      const description= document.querySelector('input[name="description"]').value;
      fetch('....', { body: JSON.stringify({ firstname, description}) }) // как-то так примерно, тут от ситуации
    });
    Ответ написан