Bootstrap - shop item
How do I make an bootstrap - shop item?
Basic bootstrap 2.3.0 HTML + CSS + JS and background from subtle patterns + Icon font from Font Awesome + shop item preview based on tutorial on designmodo.com. What is a bootstrap - shop item? How do you make a bootstrap - shop item? This script and codes were developed by Maksim Surguy on 12 September 2022, Monday.
Bootstrap - shop item Previews
Bootstrap - shop item - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bootstrap - shop item</title> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:600,700' rel='stylesheet' type='text/css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body {
background-image: url(https://subtlepatterns.com/patterns/kindajean.png);
}
.block {
// display: block; //position: relative; //width: 295px; //border-radius: 5px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.product { display: block; position: relative;
}
.product img { width: 100%; border-top-left-radius: 5px; border-top-right-radius: 5px;
}
.info { display: block; position: relative; padding: 20px;
}
.details { border-top: 1px solid #e5e5e5; padding: 18px 20px;
}
.buttons { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-top-left-radius: 5px; border-top-right-radius: 5px; background: rgba(255, 255, 255, .5); opacity: 0; -webkit-transition: opacity .25s ease-in; -ms-transition: opacity .25s ease-in; -moz-transition: opacity .25s ease-in; -o-transition: opacity .25s ease-in; transition: opacity .25s ease-in;
}
.product:hover .buttons, .product:hover a { opacity: 1;
}
.buttons a { display: block; position: absolute; left: 50px; width: 155px; border-radius: 2px; //padding: 15px 10px 15px 65px; //font-family: Helvetica, sans-serif; text-transform: uppercase; color: #fff; text-decoration: none; opacity: 0;
}
a.buy { top: 20%;
}
a.preview { bottom: 20%;
}
.info::after { display: block; position: absolute; top: -8px; left: 23px; content: ""; width: 15px; height: 15px; background: #fff; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);
}
.info h4 { position: relative; padding: 0 0 20px 0; margin: 0 0 20px 0; font-family: "Open Sans", sans-serif; font-weight: 700; font-size: 19px; line-height: 25px; color: #372f2b; letter-spacing: -1px;
}
.info h4::after { display: block; position: absolute; bottom: 0px; content: ""; width: 40px; height: 2px; background: #3b86c4;
}
.info .description { display: block; padding-bottom: 20px; font-family: "Open Sans", sans-serif; font-size: 14px; font-weight: 600; color: #5f5f5f;
}
.info .price { font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; color: #372f2b; line-height: 26px;
}
.time { font-family: "Open Sans", sans-serif; font-size: 14px; font-weight: 700; color: #372f2b; background: url("../img/clock-icon.png") no-repeat; background-position: 0 2px;
}
.rating { unicode-bidi: bidi-override; direction: rtl; font-size: 15px;
}
.rating span.star { font-family: FontAwesome; font-weight: 400; font-style: normal; display: inline-block;
}
.rating span.star:hover { cursor: pointer;
}
.rating span.star:before { content: "\f006"; padding-right: 5px; color: #999;
}
.rating span.star:hover:before, .rating span.star:hover ~ span.star:before { content: "\f005"; color: #e3cf7a;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <br>
<div class="container"> <div class="row"> <div class="block span3"> <div class="product"> <img src="http://placehold.it/295x190/333333/FFFFFF"> <div class="buttons"> <a class="buy btn btn-large btn-info" href="#"><i class="icon-shopping-cart"></i> Add to Cart</a> <a class="preview btn btn-large btn-info" href="#"><i class="icon-eye-open"></i> View item</a> </div> </div> <div class="info"> <h4>Armillaria luteobubalina is a species of mushroom</h4> <span class="description"> Rwanda is a country in central and eastern Africa located a few degrees south of the Ecuator. </span> <span class="price">$62.97</span> <a class="btn btn-info pull-right" href="#"><i class="icon-shopping-cart"></i> Buy Now</a> </div> <div class="details"> <span class="time"><i class="icon-time"></i> 12 hours ago</span> <span class="rating pull-right"> <span class="star"></span> <span class="star"></span> <span class="star"></span> <span class="star"></span> <span class="star"></span> </span> </div> </div> </div>
</div>
</body>
</html>
Bootstrap - shop item - Script Codes CSS Codes
body {
background-image: url(https://subtlepatterns.com/patterns/kindajean.png);
}
.block {
// display: block; //position: relative; //width: 295px; //border-radius: 5px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.product { display: block; position: relative;
}
.product img { width: 100%; border-top-left-radius: 5px; border-top-right-radius: 5px;
}
.info { display: block; position: relative; padding: 20px;
}
.details { border-top: 1px solid #e5e5e5; padding: 18px 20px;
}
.buttons { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-top-left-radius: 5px; border-top-right-radius: 5px; background: rgba(255, 255, 255, .5); opacity: 0; -webkit-transition: opacity .25s ease-in; -ms-transition: opacity .25s ease-in; -moz-transition: opacity .25s ease-in; -o-transition: opacity .25s ease-in; transition: opacity .25s ease-in;
}
.product:hover .buttons, .product:hover a { opacity: 1;
}
.buttons a { display: block; position: absolute; left: 50px; width: 155px; border-radius: 2px; //padding: 15px 10px 15px 65px; //font-family: Helvetica, sans-serif; text-transform: uppercase; color: #fff; text-decoration: none; opacity: 0;
}
a.buy { top: 20%;
}
a.preview { bottom: 20%;
}
.info::after { display: block; position: absolute; top: -8px; left: 23px; content: ""; width: 15px; height: 15px; background: #fff; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);
}
.info h4 { position: relative; padding: 0 0 20px 0; margin: 0 0 20px 0; font-family: "Open Sans", sans-serif; font-weight: 700; font-size: 19px; line-height: 25px; color: #372f2b; letter-spacing: -1px;
}
.info h4::after { display: block; position: absolute; bottom: 0px; content: ""; width: 40px; height: 2px; background: #3b86c4;
}
.info .description { display: block; padding-bottom: 20px; font-family: "Open Sans", sans-serif; font-size: 14px; font-weight: 600; color: #5f5f5f;
}
.info .price { font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; color: #372f2b; line-height: 26px;
}
.time { font-family: "Open Sans", sans-serif; font-size: 14px; font-weight: 700; color: #372f2b; background: url("../img/clock-icon.png") no-repeat; background-position: 0 2px;
}
.rating { unicode-bidi: bidi-override; direction: rtl; font-size: 15px;
}
.rating span.star { font-family: FontAwesome; font-weight: 400; font-style: normal; display: inline-block;
}
.rating span.star:hover { cursor: pointer;
}
.rating span.star:before { content: "\f006"; padding-right: 5px; color: #999;
}
.rating span.star:hover:before, .rating span.star:hover ~ span.star:before { content: "\f005"; color: #e3cf7a;
}
| Developer | Maksim Surguy |
| Username | msurguy |
| Uploaded | September 12, 2022 |
| Rating | 3 |
| Size | 3,952 Kb |
| Views | 22,264 |
Do you need developer help for Bootstrap - shop item?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Maksim Surguy (msurguy) Script Codes
| Name | Size |
| Google maps new styling | 9,064 Kb |
| Ladda Bootstrap 3 | 3,476 Kb |
| Interactive card | 7,540 Kb |
| Magnetic particles - iOS version | 12,973 Kb |
| Dynamic SVG poster | 9,757 Kb |
| Polygon background generator | 3,963 Kb |
| Sort algorithms illustrated | 8,214 Kb |
| Lightning In JS | 15,349 Kb |
| Background Blur plugin | 7,809 Kb |
| Coolest clock ever | 2,503 Kb |
Create amazing web content with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Simple blog concept | Drew_mc | 2,666 Kb |
| Simple, flat contact form | Zeaklous | 2,719 Kb |
| Virtual vinyl | Davidpanik | 3,474 Kb |
| Cars going | Netoguimaraes | 1,699 Kb |
| Christ the Redeemer | Prashantsani | 2,208 Kb |
| Barber Shop | Bhlaird | 6,270 Kb |
| Incremental game | Eprouver | 5,868 Kb |
| A Pen by Xand0r | Xand0r | 1,928 Kb |
| Vertically rotating text with CSS | Nopr | 2,141 Kb |
| Flying Bee | Pwsm50 | 3,711 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!