CSS Card Hover Effects for e-commerce site | Html & CSS | 3D image
Planics Devloper provides you web
designs it’s really used for site.
We are giving HTML,CSS,BootStrap,JavaScript,PHP.
If you want to design card or something then click here and get latest design free Click here
How to design Best Product card in2020?
Here we show you how to design best attractive
card for e-commerce website so please check it out in YouTube.
Free Cards Effect in HTML with CSS
How to design attractive card with mouse hover effect ?
nike.html
<!DOCTYPE html>
<html>
<head>
<meta
charset='utf-8'>
<meta
http-equiv='X-UA-Compatible' content='IE=edge'>
<title>nike Shoes</title>
<meta
name='viewport' content='width=device-width, initial-scale=1'>
<link
rel='stylesheet' type='text/css' media='screen' href='main.css'>
<link
rel='stylesheet' type='text/css' media='screen' href='nike.css'>
<script
src='main.js'></script>
</head>
<body>
<div
class="container">
<div
class="card">
<div class="shoes-image">
<img src="images/nike1.png" alt="">
</div>
<div class="shoes-info">
<h1>Nike red shoes</h1>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Vero hic eum esse repudiandae, excepturi recusandae.</p>
<br>
<h3>Price : 3000</h3>
<br>
<button class="btn-buy">Buy</button>
<button class="btn-more">More</button>
</div>
</div>
<div
class="card">
<div class="shoes-image">
<img src="images/nike2.png" alt="">
</div>
<div class="shoes-info">
<h1>Nike
red shoes</h1>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Vero hic eum esse repudiandae, excepturi recusandae.</p>
<br>
<h3>Price : 3000</h3>
<br>
<button class="btn-buy">Buy</button>
<button class="btn-more">More</button>
</div>
</div>
</div>
</body>
</html>
|
How to set video in background in homepage using html and css?
nike.css
*
{
margin: 00px;
padding:00px;
}
.container
{
height: 100vh;
width: 100%;
justify-content:
space-evenly;
align-items:
center;
position:
relative;
display:flex;
top:200px;
}
.container .card
{
height: 220px;
width:400px;
background:linear-gradient(to right,#ee0979,#ff6a00);
color:white;
border-radius:10px;
box-shadow: 0px
0px 15px gray;
transition: .3s;
}
.container .card:hover
{
margin-top:
-10px;
}
img
{
height: 150px;
width:130px;
position:
relative;
top:-30px;
transform:
rotate(30deg);
}
.shoes-image
{
height: 100px;
width:100px;
background-color: #faf3dd;
border-radius:
50%;
position:
relative;
top:50px;
left:-50px;
}
.shoes-info
{
margin-left:
80px;
position:
relative;
top:-90px;
}
.btn-buy,.btn-more
{
border:none;
border-radius:10px;
width:90px;
padding:10px;
transition:.8s;
margin-left:
ease-in-out .8s;
margin-left:
10px;
}
.btn-buy:hover
{
background:linear-gradient(to right,#ee0979,#ff6a00);
transition:.8s;
}
|
0 coment�rios: