• ×   Вставлено в виде отформатированного текста.   Восстановить форматирование

      Разрешено не более 75 эмодзи.

    ×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

    ×   Ваш предыдущий контент был восстановлен.   Очистить редактор

    ×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

  • Похожие публикации

    • Автор: Ivan_A
      Здравствуйте. Я начинающий верстальщик сайтов, столкнулся с проблемой при вёрстке карточек товара.
      Код карточки:
      HTML                                                                                                                                                                     
      <div class="product-wrap">   <div class="product-item">     <img src="source/img/test.png">     <div class="product-buttons">       <a href="#" class="button">Купить</a>     </div>   </div>   <div class="product-title">     <a href="">Test</a>     <span class="product-price">₽ 100</span>   </div> </div> ——————————————————————————-
      CSS
      * {box-sizing: border-box;} .product-wrap {   position: absolute;    width: 300px;   margin: 0 auto;   background: white;   padding: 0 0 20px;   text-align: center;   font-size: 14px;    font-family: Lora;   text-transform: uppercase; } .product-item {   position: relative;   overflow: hidden; } .product-wrap img {   display: block;   width: 100%; } .product-buttons {   position: absolute;   left: 0;   top: 0;   width: 100%;   height: 100%;   background: rgba(0, 0, 0, .8);   opacity: 0;   transition: .3s ease-in-out; } .button {    text-decoration: none;   color: #c0a97a;   font-size: 12px;   width: 140px;   height: 40px;   line-height: 40px;   position: absolute;   top: 50%;    left: 50%;   border: 2px solid #c0a97a;   transform: translate(-50%, -50%) scale(0);   transition: .3s ease-in-out; } .button:before {   font-family: FontAwesome;   margin-right: 10px; } .product-item:hover .product-buttons {opacity: 1;} .product-item:hover .button {transform: translate(-50%, -50%) scale(1);} .button:hover {background: black;} .product-title {color: #5e5e5e;} .product-title a {   text-decoration: none;   color: #2e2e2e;   font-weight: 600;   margin: 15px 0 5px;   padding-bottom: 7px;   display: block;   position: relative;   transition: .3s ease-in-out; } .product-title a:after{       content: "";   position: absolute;   width: 40px;   height: 2px;   background: #2e2e2e;   left: 50%;   margin-left: -20px;   bottom: 0;   transition: .3s ease-in-out; } .product-title a:hover {color: #c0a97a;} .product-title:hover a:after {background: #c0a97a;} .product-price {   font-size: 20px;   color: #c0a97a;   font-weight: 700; } —————————————————
      У меня получается карточка.  (скриншот прикреплён)
      Хотелось бы узнать как мне сделать так, чтобы следующая шла с право от неё. Если просто скопировать HTML код, то она остаётся на месте.
      И как мне сделать так, чтобы когда место справа не осталось, карточка переместилась на следующий ряд.
      ЗАРАНЕЕ ОГРОМНОЕ СПАСИБО!
    • Автор: awikong
      Добрый вечер, не могу разобраться как сделать отступы с права и слева внутри div.
      Есть такой код html:
      <div class="footerPanel"> <div class="footerPanelPadding"> Footer </div> </div> И есть такой CSS:
      .footerPanel { position: fixed; bottom: 0; padding: 0 20px 20px 20px; width: 100%; } .footerPanelPadding { width: 100%; background: #2a2c30; } Слева отступ делается, а справа нет. Кто то сталкивался с такой задачей?
      Вот сайт на котором я это делаю: Перейти на сайт
      Там снизу страницы увидите проблему 
    • Автор: Zasadaa
      Здравствуйте,
      Я начинающий специалист в верстке. Знаю HTML и CSS. Изучаю фреймворки и JS.
      Очень хочу реализоваться в сфере Frontend - разработки.

      Готов пройти стажировку ( рассматриваю и не оплачиваемый вариант ), с дальнейшим трудоустройством.

      Буду рад интересным предложениям!
      мой почтовый ящик: mrcojuhari@yandex.ru