React Product Cards

Developer
Raj K Singh
Size
5,225 Kb
Views
22,264
  1. React Product Cards Previews
  2. React Product Cards HTML Codes
  3. React Product Cards CSS Codes
  4. React Product Cards JS Codes

How do I make an react product cards?

What is a react product cards? How do you make a react product cards? This script and codes were developed by Raj K Singh on 28 September 2022, Wednesday.

React Product Cards Previews
IQ Test

React Product Cards - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>React Product Cards</title> <link href='https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,400italic,500,500italic,700,700italic,900,900italic,100italic,100' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.1.2/css/material-design-iconic-font.min.css">
<link href="//cdn.muicss.com/mui-0.6.0/css/mui.min.css" rel="stylesheet" type="text/css" />
<script src="//cdn.muicss.com/mui-0.6.0/js/mui.min.js"></script> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="app"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

React Product Cards - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { font-family: 'Roboto'; font-size: 16px; line-height: 1.4; background-color: #d8e0e5;
}
.container{
padding: 0; margin: 0; list-style: none; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; justify-content: space-around;
}
.flexItem { padding: 10px;
}
.card { position: relative; overflow: hidden; width: 300px; background-color: #fff; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); transition: box-shadow 0.3s;
}
.card a { color: inherit; text-decoration: none;
}
.card:hover { box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.3);
}
.cardDate { position: absolute; top: 20px; right: 20px; width: 45px; height: 45px; padding-top: 10px; color: #FFF; text-align: center; line-height: 13px; font-weight: bold; background-color: #cc0000; border-radius: 50%;
}
.cardDateDay { display: block; font-size: 14px;
}
.cardDateMonth { display: block; font-size: 10px; text-transform: uppercase;
}
.cardThumb { display: flex; justify-content: center; /* align horizontal */ align-items: center; /* align vertical */ height: 235px; overflow: hidden; background-color: #fff transition: height 0.3s;
}
.cardThumb img { width: auto; height: 235px; opacity: 1; transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, transform 0.3s;
}
.card:hover .cardThumb img { opacity: 0.6; -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2);
}
.card:hover .cardThumb { height: 90px;
}
.cardBody { position: relative; padding: 20px; height: 185px; transition: height 0.3s;
}
.card:hover .cardBody { height: 330px;
}
.cardCategory { position: absolute; left: 0; top: -25px; height: 25px; padding: 0 15px; color: #FFF; font-size: 11px; line-height: 25px; text-transform: uppercase; background-color: #cc0000;
}
.cardTitle { margin: 0; padding: 0 0 10px 0; font-size: 22px; color: #000; font-weight: 300;
}
.card:hover .cardTitle { -webkit-animation: titleBlur 0.3s; animation: titleBlur 0.3s;
}
.cardSubtitle { margin: 0; padding: 0 0 10px 0; font-size: 1em; font-weight: 400; text-trans color: #666C74;
}
.card:hover .cardSubtitle { -webkit-animation: subtitleBlur 0.3s; animation: subtitleBlur 0.3s;
}
.cardDescription { position: absolute; left: 20px; right: 20px; bottom: 65px; margin: 0; padding: 0; color: #666C74; font-size: 12px; line-height: 27px; opacity: 0; transition: opacity 0.2s, -webkit-transform 0.2s; transition: opacity 0.2s, transform 0.2s; transition-delay: 0s; -webkit-transform: translateY(25px); -ms-transform: translateY(25px); transform: translateY(25px);
}
.card:hover .cardDescription { opacity: 1; transition-delay: 0.1s; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);
}
.cardFooter { position: absolute; text-align: right; bottom: 0; left: 20px; right: 20px; font-size: 1em;
}
.cardFooter .icon--comment { margin-left: 12px;
}
.icon { display: inline-block; vertical-align: middle; margin-right: 2px;
}
.icon--comment { width: 14px; height: 14px; margin-top: -2px;
}
.icon--price { witdh: 12px; margin-top: -2px; color: #cc0000; font-weight: 500;
}
@-webkit-keyframes titleBlur { 0% { opacity: 0.6; text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.6); } 100% { opacity: 1; text-shadow: 0px 5px 5px transparent; }
}
@keyframes titleBlur { 0% { opacity: 0.6; text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.6); } 100% { opacity: 1; text-shadow: 0px 5px 5px transparent; }
}
@-webkit-keyframes subtitleBlur { 0% { opacity: 0.6; text-shadow: 0px 5px 5px rgba(255, 140, 0, 0.6); } 100% { opacity: 1; text-shadow: 0px 5px 5px rgba(255, 140, 0, 0); }
}
@keyframes subtitleBlur { 0% { opacity: 0.6; text-shadow: 0px 5px 5px rgba(255, 140, 0, 0.6); } 100% { opacity: 1; text-shadow: 0px 5px 5px rgba(255, 140, 0, 0); }
}

React Product Cards - Script Codes JS Codes

"use strict";
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
/* * A simple React component */
var Application = function (_React$Component) { _inherits(Application, _React$Component); function Application() { _classCallCheck(this, Application); return _possibleConstructorReturn(this, _React$Component.apply(this, arguments)); } Application.prototype.render = function render() { return React.createElement("div", { className: "flexItem" }); }; return Application;
}(React.Component);
var data = [{ src: "http://www.thinkgeek.com/images/products/zoom/16d9_star_trek_tng_uniform_tee.jpg", productSrc: "", cat: 'FEATURED', title: 'Star Trek TNG Uniform Tee', sub: 'Captain on the Bridge!', desc: 'Dress like your favorite Enterprise-D crew member! The Star Trek: The Next Generation uniform t-shirts are constructed just for this purpose, the high quality Picard would demand from his crew. Pips and sparkly comm badges are screen-printed on.', price: '19.99', buyURL: "http://www.thinkgeek.com/product/16d9"
}, { src: "http://www.thinkgeek.com/images/products/zoom/dad.jpg", productSrc: "http://www.thinkgeek.com/product/6c49/", cat: 'FEATURED', title: 'Binary Dad', sub: 'OMG! I' + String.fromCharCode(39) + 'M 4LL GR0W|\| UP!', desc: 'It is the natural evolution of things. We wreak havoc as kids, we grow up, get jobs (hopefully) and sometimes have kids of our own and complete the cycle to adulthood. Ok well maybe not the adult part...', price: '9.99', buyURL: "http://www.thinkgeek.com/product/6c49/"
}, { src: "http://www.thinkgeek.com/images/products/zoom/itpo_han_man_tee_mb.jpg", productSrc: "http://www.thinkgeek.com/product/itpo/", cat: 'FEATURED', title: 'Han the Man Tee', sub: 'Who' + String.fromCharCode(39) + 's Scruffy Looking?', desc: 'Check it. It' + String.fromCharCode(39) + 's a product on our site where Han is NOT frozen in carbonite! Quick. Snatch it up before the tibanna gas seeps in and immobilizes this one, too.', price: '19.99', buyURL: "http://www.thinkgeek.com/product/itpo/"
}];
/* * Render the above component into the div#app */
React.render(React.createElement( "div", { className: "container" }, data.map(function (dataPoint) { return React.createElement(Application, { data: dataPoint }); })
), document.getElementById('app'));
React Product Cards - Script Codes
React Product Cards - Script Codes
Home Page Home
Developer Raj K Singh
Username rajinwonderland
Uploaded September 28, 2022
Rating 3
Size 5,225 Kb
Views 22,264
Do you need developer help for React Product Cards?

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!

Raj K Singh (rajinwonderland) Script Codes
Name
Novvum animated
FileStack Viewer Preview
Parallax Effect Novvum Values
React-MDL example
React CardStack
Cool Timeline
Card Unstack
Star Wars Rebel Pilot Track Jacket
MarvelAnimated
Swiper
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!