Ivan_A
-
Posts
2 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by 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 код, то она остаётся на месте.
И как мне сделать так, чтобы когда место справа не осталось, карточка переместилась на следующий ряд.
ЗАРАНЕЕ ОГРОМНОЕ СПАСИБО!
Вёрстка сетки товаров.
in HTML Coding
Posted
Здравствуйте. Я начинающий верстальщик сайтов, столкнулся с проблемой при вёрстке карточек товара.
Код карточки:
HTML
——————————————————————————-
CSS
—————————————————
У меня получается карточка. (скриншот прикреплён)
Хотелось бы узнать как мне сделать так, чтобы следующая шла с право от неё. Если просто скопировать HTML код, то она остаётся на месте.
И как мне сделать так, чтобы когда место справа не осталось, карточка переместилась на следующий ряд.
ЗАРАНЕЕ ОГРОМНОЕ СПАСИБО!