Bootstrap snippet: Fashion products

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container"> <div class="row"> <div class="col-sm-12 col-md-4"> <div class="fashion decor-default" data-height-col="" style="height: 400px;"> <img src="http://91.234.35.26/iwiki-admin/v1.0.0/admin/img/thumbs/400.png" alt="image" class="fashion-img"> <div class="fashion-name">Dress</div> <div class="fashion-brand">Calvin Clein</div> <div class="fashion-price">135$</div> <div class="fashion-raiting"></div> </div> </div> <div class="col-sm-12 col-md-4"> <div class="fashion decor-default" data-height-col="" style="height: 400px;"> <img src="http://91.234.35.26/iwiki-admin/v1.0.0/admin/img/thumbs/400.png" alt="image" class="fashion-img"> <div class="fashion-name">Dress</div> <div class="fashion-brand">Calvin Clein</div> <div class="fashion-price">135$</div> <div class="fashion-raiting"></div> </div> </div> <div class="col-sm-12 col-md-4"> <div class="fashion decor-default" data-height-col="" style="height: 400px;"> <img src="http://91.234.35.26/iwiki-admin/v1.0.0/admin/img/thumbs/400.png" alt="image" class="fashion-img"> <div class="fashion-name">Dress</div> <div class="fashion-brand">Calvin Clein</div> <div class="fashion-price">135$</div> <div class="fashion-raiting"></div> </div> </div> </div> </div>
body{margin-top:20px;} .fashion { overflow: hidden; font-size: 20px; line-height: 24px; position: relative; display: flex; flex-direction: row; justify-content: center; } .decor-default { background-color: #ffffff; } .fashion-img { width: auto; height: auto; } .fashion-name { position: absolute; left: 20px; bottom: 56px; } .fashion-brand { position: absolute; left: 20px; bottom: 20px; } .fashion-price { position: absolute; right: 20px; bottom: 56px; } .fashion-raiting { position: absolute; right: 20px; bottom: 20px; width: 85px; height: 18px; background: url("http://91.234.35.26/iwiki-admin/v1.0.0/admin/img/icon-75.png") repeat-x 100% 50%; }
Dey-Dey

Fashion products

Dey-Dey
  Apr 10th, 19:30
93 Views