Product card slider design css html js
How to make a slider and a beautiful product card design in HTML CSS JS - Video instruction and source code.
HTML code
<!--doctype html-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Marvel Slider</title>
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="css/lightslider.css"/>
<!--Jquery-->
<script type="text/javascript" src="js/JQuery3.3.1.js"></script>
<script type="text/javascript" src="js/lightslider.js"></script>
</head>
<body>
<div class="container">
<!--slider--->
<ul id="autoWidth" class="cs-hidden">
<!--1--->
<li class="item-a">
<!--slider-box-->
<div class="box">
<p class="marvel">MARVEL</p>
<!--model-->
<img class="model" src="img/Ant-Man.png">
<!--details-->
<div class="details">
<!--logo-character-->
<img class="logo" src="img/AntMan-logo.png" style="height: auto;" width="100px">
<!--character-details-->
<p>Bruce Bayne invite deadpool to kill the enemy how make distrub bat To the Kill The Anymens How MaKE him will be ie.</p>
</div>
</div>
</li>
<!--2--->
<li class="item-a">
<!--slider-box-->
<div class="box">
<p class="marvel">MARVEL</p>
<!--model-->
<img class="model" src="img/DeadPool.png">
<!--details-->
<div class="details">
<!--logo-character-->
<img class="logo" src="img/Deadpool-logo.png">
<!--character-details-->
<p>Bruce Bayne invite deadpool to kill the enemy how make distrub bat To the Kill The Anymens How MaKE him will be ie.</p>
</div>
</div>
</li>
<!--3--->
<li class="item-a">
<!--slider-box-->
<div class="box">
<p class="marvel">MARVEL</p>
<!--model-->
<img class="model" src="img/SpiderMan.png">
<!--details-->
<div class="details">
<!--logo-character-->
<img class="logo" src="img/SpiderMan-logo.png">
<!--character-details-->
<p>Bruce Bayne invite deadpool to kill the enemy how make distrub bat To the Kill The Anymens How MaKE him will be ie.</p>
</div>
</div>
</li>
<!--4--->
<li class="item-a">
<!--slider-box-->
<div class="box">
<p class="marvel">MARVEL</p>
<!--model-->
<img class="model" src="img/Venom.png">
<!--details-->
<div class="details">
<!--logo-character-->
<img class="logo" src="img/Venom-logo.png">
<!--character-details-->
<p>Bruce Bayne invite deadpool to kill the enemy how make distrub bat To the Kill The Anymens How MaKE him will be ie.</p>
</div>
</div>
</li>
<!--5--->
<li class="item-a">
<!--slider-box-->
<div class="box">
<p class="marvel">MARVEL</p>
<!--model-->
<img class="model" src="img/Thor.png">
<!--details-->
<div class="details">
<!--logo-character-->
<img class="logo" src="img/Thor-logo.png">
<!--character-details-->
<p>Bruce Bayne invite deadpool to kill the enemy how make distrub bat To the Kill The Anymens How MaKE him will be ie.</p>
</div>
</div>
</li>
<!--6--->
<li class="item-a">
<!--slider-box-->
<div class="box">
<p class="marvel">MARVEL</p>
<!--model-->
<img class="model" src="img/IronMan.png">
<!--details-->
<div class="details">
<!--logo-character-->
<img class="logo" src="img/IronMan-logo.png">
<!--character-details-->
<p>Bruce Bayne invite deadpool to kill the enemy how make distrub bat To the Kill The Anymens How MaKE him will be ie.</p>
</div>
</div>
</li>
</ul>
</div>
<script src="js/script.js" type="text/javascript"></script>
</body>
</html>
CSS code
@charset "utf-8";
/* CSS Document */
body{
margin:0px;
padding:0px;
}
ul{
list-style:none;
}
a{
text-decoration:none;
}
.container{
width:100%;
height: 100vh;
background-color:#a4152c;
display:flex;
justify-content: center;
align-items: center;
}
.box{
width:350px;
height:610px;
background-color:#1e1e26;
border-radius: 10px;
box-shadow: 2px 10px 12px rgba(0,0,0,0.5);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
margin: 20px 10px;
}
.model{
height: 350px;
max-height: 100%;
max-width: 100%;
}
.details{
display: flex;
flex-direction: column;
align-items: center;
width: 300px;
}
.details p{
font-family: calibri;
font-weight: bold;
color:#6a6a74;
text-align: center;
margin-top: 20px;
}
.marvel{
color:#32323e;
font-weight: bold;
letter-spacing: 2px;
font-family: bebas kai;
font-size: 25px;
}
.logo{
height: 60px;
}
.box:hover{
background-color: #17171d;
transform-style: preserve-3d;
transform: scale(1.02);
transition: all ease 0.3s;
}
.box:hover .marvel{
color:#c0292b;
transition: all ease 0.5s;
}
/*--responsive for mobile phone--*/
@media(max-width:720px){
.box{
width: 94%;
height: 500px;
}
.model{
height:250px;
}
.details p{
font-size: 16px;
width: 250px;
}
}
JS code
// JavaScript Document
$(document).ready(function() {
$('#autoWidth').lightSlider({
autoWidth:true,
loop:true,
onSliderLoad: function() {
$('#autoWidth').removeClass('cS-hidden');
}
});
});
The archive with the files can be downloaded from the link
on the site are taken from open sources. The site does not contain files for download. All links to files from open sources.
Owners of copyrights to the material may request removal of the post from the site.
Comments (0)