bootdey shopping items


/ Published in: HTML
Save to your folder(s)

bootdey bootstrap code snippet shopping items


Copy this code and paste it in your HTML
  1. <div class="shop-items">
  2. <div class="container-fluid">
  3. <div class="row">
  4. <div class="col-md-3 col-sm-6">
  5. <!-- Restaurant Item -->
  6. <div class="item">
  7. <!-- Item's image -->
  8. <img class="img-responsive" src="http://lorempixel.com/200/200/food/1/" alt="">
  9. <!-- Item details -->
  10. <div class="item-dtls">
  11. <!-- product title -->
  12. <h4><a href="#">Lorem product</a></h4>
  13. <!-- price -->
  14. <span class="price lblue">$23.00</span>
  15. </div>
  16. <!-- add to cart btn -->
  17. <div class="ecom bg-lblue">
  18. <a class="btn" href="#">Add to cart</a>
  19. </div>
  20. </div>
  21. </div>
  22. <div class="col-md-3 col-sm-6">
  23. <!-- Restaurant Item -->
  24. <div class="item">
  25. <!-- Item's image -->
  26. <img class="img-responsive" src="http://lorempixel.com/200/200/food/2/" alt="">
  27. <!-- Item details -->
  28. <div class="item-dtls">
  29. <!-- product title -->
  30. <h4><a href="#">Creas Product</a></h4>
  31. <!-- price -->
  32. <span class="price lblue">$13.00</span>
  33. </div>
  34. <!-- add to cart btn -->
  35. <div class="ecom bg-lblue">
  36. <a class="btn" href="#">Add to cart</a>
  37. </div>
  38. </div>
  39. </div>
  40. <div class="col-md-3 col-sm-6">
  41. <!-- Restaurant Item -->
  42. <div class="item">
  43. <!-- Item's image -->
  44. <img class="img-responsive" src="http://lorempixel.com/200/200/food/3/" alt="">
  45. <!-- Item details -->
  46. <div class="item-dtls">
  47. <!-- product title -->
  48. <h4><a href="#">Product lore</a></h4>
  49. <!-- price -->
  50. <span class="price lblue">$29.00</span>
  51. </div>
  52. <!-- add to cart btn -->
  53. <div class="ecom bg-lblue">
  54. <a class="btn" href="#">Add to cart</a>
  55. </div>
  56. </div>
  57. </div>
  58. <div class="col-md-3 col-sm-6">
  59. <!-- Restaurant Item -->
  60. <div class="item">
  61. <!-- Item's image -->
  62. <img class="img-responsive" src="http://lorempixel.com/200/200/food/4/" alt="">
  63. <!-- Item details -->
  64. <div class="item-dtls">
  65. <!-- product title -->
  66. <h4><a href="#">Break Prod</a></h4>
  67. <!-- price -->
  68. <span class="price lblue">$15.00</span>
  69. </div>
  70. <!-- add to cart btn -->
  71. <div class="ecom bg-lblue">
  72. <a class="btn" href="#">Add to cart</a>
  73. </div>
  74. </div>
  75. </div>
  76. </div>
  77. <div class="row">
  78. <div class="col-md-3 col-sm-6">
  79. <!-- Restaurant Item -->
  80. <div class="item">
  81. <!-- Item's image -->
  82. <img class="img-responsive" src="http://lorempixel.com/200/200/food/5/" alt="">
  83. <!-- Item details -->
  84. <div class="item-dtls">
  85. <!-- product title -->
  86. <h4><a href="#">Product name</a></h4>
  87. <!-- price -->
  88. <span class="price lblue">$31.00</span>
  89. </div>
  90. <!-- add to cart btn -->
  91. <div class="ecom bg-lblue">
  92. <a class="btn" href="#">Add to cart</a>
  93. </div>
  94. </div>
  95. </div>
  96. <div class="col-md-3 col-sm-6">
  97. <!-- Restaurant Item -->
  98. <div class="item">
  99. <!-- Item's image -->
  100. <img class="img-responsive" src="http://lorempixel.com/200/200/food/6/" alt="">
  101. <!-- Item details -->
  102. <div class="item-dtls">
  103. <!-- product title -->
  104. <h4><a href="#">Moremore</a></h4>
  105. <!-- price -->
  106. <span class="price lblue">$25.00</span>
  107. </div>
  108. <!-- add to cart btn -->
  109. <div class="ecom bg-lblue">
  110. <a class="btn" href="#">Add to cart</a>
  111. </div>
  112. </div>
  113. </div>
  114. <div class="col-md-3 col-sm-6">
  115. <!-- Restaurant Item -->
  116. <div class="item">
  117. <!-- Item's image -->
  118. <img class="img-responsive" src="http://lorempixel.com/200/200/food/7/" alt="">
  119. <!-- Item details -->
  120. <div class="item-dtls">
  121. <!-- product title -->
  122. <h4><a href="#">LoreMon</a></h4>
  123. <!-- price -->
  124. <span class="price lblue">$20.00</span>
  125. </div>
  126. <!-- add to cart btn -->
  127. <div class="ecom bg-lblue">
  128. <a class="btn" href="#">Add to cart</a>
  129. </div>
  130. </div>
  131. </div>
  132. <div class="col-md-3 col-sm-6">
  133. <!-- Restaurant Item -->
  134. <div class="item">
  135. <!-- Item's image -->
  136. <img class="img-responsive" src="http://lorempixel.com/200/200/food/8/" alt="">
  137. <!-- Item details -->
  138. <div class="item-dtls">
  139. <!-- product title -->
  140. <h4><a href="#">Nagthih</a></h4>
  141. <!-- price -->
  142. <span class="price lblue">$11.00</span>
  143. </div>
  144. <!-- add to cart btn -->
  145. <div class="ecom bg-lblue">
  146. <a class="btn" href="#">Add to cart</a>
  147. </div>
  148. </div>
  149. </div>
  150. </div>
  151. </div>
  152. </div>
  153.  
  154. /* Background color classes */
  155. .bg-white {
  156. background-color: #ffffff !important;
  157. }
  158. .bg-grey {
  159. background-color: #eeeeee !important;
  160. }
  161. .bg-black {
  162. background-color: #555555 !important;
  163. }
  164. .bg-red {
  165. background-color: #f75353 !important;
  166. }
  167. .bg-green {
  168. background-color: #51d466 !important;
  169. }
  170. .bg-lblue {
  171. background-color: #32c8de !important;
  172. }
  173. .bg-blue {
  174. background-color: #609cec !important;
  175. }
  176. .bg-orange {
  177. background-color: #f78153 !important;
  178. }
  179. .bg-yellow {
  180. background-color: #fcd419 !important;
  181. }
  182. .bg-purple {
  183. background-color: #cb79e6 !important;
  184. }
  185. .bg-rose {
  186. background-color: #ff61e7 !important;
  187. }
  188. .bg-brown {
  189. background-color: #d08166 !important;
  190. }
  191.  
  192. /* Button classes */
  193. .btn {
  194. border-radius: 2px;
  195. position: relative;
  196. }
  197. .btn.btn-no-border {
  198. border: 0px !important;
  199. }
  200. /* Button colors */
  201. .btn.btn-white {
  202. background: #ffffff;
  203. color: #666666;
  204. border: 1px solid #dddddd;
  205. }
  206. .btn.btn-white:hover,
  207. .btn.btn-white:focus,
  208. .btn.btn-white.active,
  209. .btn.btn-white:active {
  210. background: #f7f7f7;
  211. color: #666666;
  212. }
  213. .btn.btn-grey {
  214. background: #eeeeee;
  215. color: #666666;
  216. border: 1px solid #d5d5d5;
  217. }
  218. .btn.btn-grey:hover,
  219. .btn.btn-grey:focus,
  220. .btn.btn-grey.active,
  221. .btn.btn-grey:active {
  222. background: #d5d5d5;
  223. color: #999;
  224. }
  225. .btn.btn-black {
  226. color: #ffffff;
  227. background: #666666;
  228. border: 1px solid #4d4d4d;
  229. }
  230. .btn.btn-black:hover,
  231. .btn.btn-black:focus,
  232. .btn.btn-black.active,
  233. .btn.btn-black:active {
  234. background: #4d4d4d;
  235. color: #ffffff;
  236. }
  237. .btn.btn-red {
  238. color: #ffffff;
  239. background: #ed5441;
  240. border: 1px solid #e52d16;
  241. }
  242. .btn.btn-red:hover,
  243. .btn.btn-red:focus,
  244. .btn.btn-red.active,
  245. .btn.btn-red:active {
  246. color: #ffffff;
  247. background: #e52d16;
  248. }
  249. .btn.btn-green {
  250. color: #ffffff;
  251. background: #51d466;
  252. border: 1px solid #30c247;
  253. }
  254. .btn.btn-green:hover,
  255. .btn.btn-green:focus,
  256. .btn.btn-green.active,
  257. .btn.btn-green:active {
  258. background: #30c247;
  259. color: #ffffff;
  260. }
  261. .btn.btn-lblue {
  262. color: #ffffff;
  263. background: #32c8de;
  264. border: 1px solid #1faabe;
  265. }
  266. .btn.btn-lblue:hover,
  267. .btn.btn-lblue:focus,
  268. .btn.btn-lblue.active,
  269. .btn.btn-lblue:active {
  270. background: #1faabe;
  271. color: #ffffff;
  272. }
  273. .btn.btn-blue {
  274. color: #ffffff;
  275. background: #609cec;
  276. border: 1px solid #3280e7;
  277. }
  278. .btn.btn-blue:hover,
  279. .btn.btn-blue:focus,
  280. .btn.btn-blue.active,
  281. .btn.btn-blue:active {
  282. background: #3280e7;
  283. color: #ffffff;
  284. }
  285. .btn.btn-orange {
  286. color: #ffffff;
  287. background: #f8a841;
  288. border: 1px solid #f69110;
  289. }
  290. .btn.btn-orange:hover,
  291. .btn.btn-orange:focus,
  292. .btn.btn-orange.active,
  293. .btn.btn-orange:active {
  294. background: #f69110;
  295. color: #ffffff;
  296. }
  297. .btn.btn-yellow {
  298. background: #fcd419;
  299. color: #ffffff;
  300. border: 1px solid #dfb803;
  301. }
  302. .btn.btn-yellow:hover,
  303. .btn.btn-yellow:focus,
  304. .btn.btn-yellow.active,
  305. .btn.btn-yellow:active {
  306. background: #dfb803;
  307. color: #ffffff;
  308. }
  309. .btn.btn-purple {
  310. background: #cb79e6;
  311. color: #ffffff;
  312. border: 1px solid #ba4ede;
  313. }
  314. .btn.btn-purple:hover,
  315. .btn.btn-purple:focus,
  316. .btn.btn-purple.active,
  317. .btn.btn-purple:active {
  318. background: #ba4ede;
  319. color: #ffffff;
  320. }
  321. .btn.btn-rose {
  322. background: #ff61e7;
  323. color: #ffffff;
  324. border: 1px solid #ff2edf;
  325. }
  326. .btn.btn-rose:hover,
  327. .btn.btn-rose:focus,
  328. .btn.btn-rose.active,
  329. .btn.btn-rose:active {
  330. background: #ff2edf;
  331. color: #ffffff;
  332. }
  333. .btn.btn-brown {
  334. background: #d08166;
  335. color: #ffffff;
  336. border: 1px solid #c4613f;
  337. }
  338. .btn.btn-brown:hover,
  339. .btn.btn-brown:focus,
  340. .btn.btn-brown.active,
  341. .btn.btn-brown:active {
  342. background: #c4613f;
  343. color: #ffffff;
  344. }
  345.  
  346. .shop-items{
  347. max-width:1150px;
  348. margin:10px auto;
  349. padding:0px 20px;
  350. }
  351. .shop-items .item {
  352. position: relative;
  353. max-width: 360px;
  354. margin: 15px auto;
  355. padding: 5px;
  356. text-align: center;
  357. border-radius: 4px;
  358. overflow: hidden;
  359. border:2px solid #eee;
  360. }
  361. .shop-items .item:hover{
  362. border:2px solid #32c8de;
  363. }
  364. .shop-items .item img {
  365. width: 100%;
  366. max-width: 360px;
  367. margin: 0 auto;
  368. border: 1px solid #eee;
  369. border-radius: 3px;
  370. }
  371. .shop-items .item .item-dtls h4 {
  372. margin-top: 13px;
  373. margin-bottom: 10px;
  374. text-transform: uppercase;
  375. }
  376. .shop-items .item .item-dtls .price {
  377. display: block;
  378. margin-bottom: 13px;
  379. font-size: 25px;
  380. }
  381. .shop-items .item .ecom {
  382. position: absolute;
  383. top: 100%;
  384. left: 0;
  385. width: 100%;
  386. padding-bottom:10px;
  387. padding-top: 10px;
  388. -webkit-transition: all 0.35s ease-in;
  389. -moz-transition: all 0.35s ease-in;
  390. -ms-transition: all 0.35s ease-in;
  391. -o-transition: all 0.35s ease-in;
  392. transition: all 0.35s ease-in;
  393. }
  394. .shop-items .item:hover .ecom {
  395. margin-top: -50px;
  396. }
  397. .shop-items .item .ecom a.btn{
  398. border:1px solid #fff;
  399. color:#fff;
  400. background:transparent;
  401. -webkit-transition: all 0.35s ease-in;
  402. -moz-transition: all 0.35s ease-in;
  403. -ms-transition: all 0.35s ease-in;
  404. -o-transition: all 0.35s ease-in;
  405. transition: all 0.35s ease-in;
  406. }
  407. .shop-items .item .ecom a.btn:hover{
  408. background:#fff;
  409. color:#777;
  410. }

URL: http://bootdey.com/snippets/view/shopping-items-275

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.