Attractive Card Effect for website in html with css
This is attractive card in html with css. we
providing good design for developing website.
We try to Provide best designing with Accurate and
simple code.
How to design attractive card effect with mouse hover using html and css ?
Free Cards Effect in HTML with CSS
<!DOCTYPE html>
<html>
<head>
<meta
charset='utf-8'>
<meta
http-equiv='X-UA-Compatible' content='IE=edge'>
<title>card Design</title>
<meta
name='viewport' content='width=device-width, initial-scale=1'>
<meta
name="viewport" content="width=device-width,
initial-scale=1.0">
<link
rel='stylesheet' type='text/css' media='screen' href='main.css'>
<link
rel='stylesheet' type='text/css' media='screen' href='card.css'>
<script
src='main.js'></script>
</head>
<body>
<div
class="container">
<div
class="card">
<div class="cardtop"></div>
<div class="cardImage"></div>
<div class="cardContain">
<h1 class="name">Alice zed</h1>
<p class="About">Lorem
ipsum dolor sit amet consectetur adipisicing elit. Laudantium esse sed ipsa?
Alias, incidunt doloribus?</p>
<button class="cardButton">contact</button>
</div>
</div>
<div
class="card2">
<div class="cardtop2"></div>
<div class="cardImage2"></div>
<div class="cardContain2">
<h1 class="name2">Alice zed</h1>
<p class="About2">Lorem ipsum dolor sit amet
consectetur adipisicing elit. Laudantium esse sed ipsa? Alias, incidunt
doloribus?</p>
<button class="cardButton2">contact</button>
</div>
</div>
<div
class="card3">
<div class="cardtop3"></div>
<div class="cardImage3"></div>
<div class="cardContain3">
<h1 class="name3">Alice zed</h1>
<p class="About3">Lorem ipsum dolor sit amet consectetur
adipisicing elit. Laudantium esse sed ipsa? Alias, incidunt
doloribus?</p>
<button class="cardButton3">contact</button>
</div>
</div>
</div>
</body>
</html>
|
Download cards code then Click Here:-
0 coment�rios: