Jump to content

Ivan_A

Neophyte
  • Posts

    2
  • Joined

  • Last visited

Information

  • Sex
    мужской

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

Ivan_A's Achievements

Explorer

Explorer (1/14)

0

Reputation

  1. Здравствуйте. Я начинающий верстальщик сайтов, столкнулся с проблемой при вёрстке карточек товара. Код карточки: 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 код, то она остаётся на месте. И как мне сделать так, чтобы когда место справа не осталось, карточка переместилась на следующий ряд. ЗАРАНЕЕ ОГРОМНОЕ СПАСИБО!
  2. Здравствуйте. Я начинающий верстальщик сайтов, столкнулся с проблемой при вёрстке карточек товара. Код карточки: HTML ——————————————————————————- CSS ————————————————— У меня получается карточка. (скриншот прикреплён) Хотелось бы узнать как мне сделать так, чтобы следующая шла с право от неё. Если просто скопировать HTML код, то она остаётся на месте. И как мне сделать так, чтобы когда место справа не осталось, карточка переместилась на следующий ряд. ЗАРАНЕЕ ОГРОМНОЕ СПАСИБО!
×
×
  • 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