Вопрос

Доброго времени суток, как можно осуществить данную проблему?
Как показано на картинке, в бордере имеется пространство которое заполнено иконкой, как именно сделать такое пространство? 

1212.png

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Рекомендованные сообщения

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

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

    • Автор: 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 код, то она остаётся на месте.
      И как мне сделать так, чтобы когда место справа не осталось, карточка переместилась на следующий ряд.
      ЗАРАНЕЕ ОГРОМНОЕ СПАСИБО!
    • Автор: AlexanderLebedev
      Имеется слайдер, "//" если удалить эти строки , то все работает. Там collapse от bootstrap, скрыть и показать блок.
      А когда всё на месте, с скрытием, то он показывает так
      Помогите исправить, сложно найти рабочий подобный слайдер. Есть мнение что конфликтуют JS, но как их поставить чтоб всё норм было.
      <!-- Наружная реклама --> <div id="collapse_1" class="collapse" aria-labelledby="heading_1" data-parent="#accordionExample"> // ЭТА УДАЛИТЬ НАДО ЧТОБ РАБОТАЛО <div class="container header"> <div class="row align-items-center"> <div class="card-body card align-items-center bg-lightgrey"> <h5> <img src="http://www.cyberforum.ru/images/header/nar.png" width="105" height="80"> Наружное и внутреннее оформление </h5> </div> </div> <!-- Слайдер --> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="http://www.cyberforum.ru/images/header/logo.png" width="250" height="200"> </div> <div class="swiper-slide"> <img src="http://www.cyberforum.ru/images/header/logo.png" width="250" height="200"> </div> <div class="swiper-slide"> <img src="http://www.cyberforum.ru/images/header/logo.png" width="250" height="200"> </div> <div class="swiper-slide"> <img src="http://www.cyberforum.ru/images/header/logo.png" width="250" height="200"> </div> <div class="swiper-slide"> <img src="http://www.cyberforum.ru/images/header/logo.png" width="250" height="200"> </div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> <!-- Конец слайдера --> </div> </div> // ЭТА УДАЛИТЬ ЧТОБ РАБОТАЛО НАДО <!-- Конец наружной рекламы --> СКРИПТЫ В КОНЦЕ BODY
      <!-- Скрипты --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="js/slider.js"></script> <script type="text/javascript"> var swiper = new Swiper('.swiper-container', { slidesPerView: 3, spaceBetween: 30, loop: false, loopFillGroupWithBlank: false, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', } }); </script> <script src="js/bootstrap.js"></script> <!-- Конец скрипты -->  
      После уменьшении или увеличении страницы всё работает как надо. Что за логика ?