HTML CODE:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet"type="text/css" href="detail.css"/>
</head>
<body>
<div class="container">
<div class="box">
<div class="content">
<h2>01</h2>
<h3>Service One</h3>
<p>The most difficult thing is the decision to act, the rest is merely tenacity. The fears are paper tigers. You can do anything you decide to do. You can act to change and control your life and the procedure, the process is its own reward.
</p>
<a href="#">Read More</a>
</div>
</div>
<div class="box">
<div class="content">
<h2>02</h2>
<h3>Service One</h3>
<p>The most difficult thing is the decision to act, the rest is merely tenacity. The fears are paper tigers. You can do anything you decide to do. You can act to change and control your life and the procedure, the process is its own reward.
</p>
<a href="#">Read More</a>
</div>
</div>
<div class="box">
<div class="content">
<h2>03</h2>
<h3>Service One</h3>
<p>The most difficult thing is the decision to act, the rest is merely tenacity. The fears are paper tigers. You can do anything you decide to do. You can act to change and control your life and the procedure, the process is its own reward.
</p>
<a href="#">Read More</a>
</div>
</div>
<div class="box">
<div class="content">
<h2>04</h2>
<h3>Service One</h3>
<p>The most difficult thing is the decision to act, the rest is merely tenacity. The fears are paper tigers. You can do anything you decide to do. You can act to change and control your life and the procedure, the process is its own reward.
</p>
<a href="#">Read More</a>
</div>
</div>
</div>
</body>
</html>
CSS CODE: (css file name :detail.css)
body
{
margin: 0px;
padding: 0px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #060c21;
font-family: sans-sarif;
}
.container
{
position: relative;
width: 90%;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
grid-template-row:auto;
grid-gap:0px 40px;
}
.container .box
{
position: relative;
height: 400px;
background: #060c21;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #000;
cursor: pointer;
}
.container .box:before
{
content: '';
position: absolute;
top: -2px;
left: -2px;
height: -2px;
bottom: -2px;
background: #fff;
transform: skew(2deg,2deg);
z-index: -1;
}
.container .box:nth-child(1):before
{
background-image: linear-gradient(315deg,#ff0057,#e64a19);
}
.content
{
position: relative;
padding: 20px;
transform: translatey(40px);
}
.content h2
{
position: absolute;
top: -60px;
right: 20px;
margin: 0px;
padding: 0px;
font-size: 10em;
color: rgba(255,255,255,0.20);
transition: 0.5s;
}
.box:hover .content h2
{
top :-100px;
}
.content h3
{
margin: 0px 0px 10px;
padding: 0px;
font-size: 24px;
font-weight: 400;
color: #fff;
}
.content p
{
position: relative;
margin: 0px;
font-size: 16px;
color: #fff;
}
.content a
{
position: relative;
margin: 0px;
padding: 10px 20px;
text-decoration: none;
border: 1px solid #ff0000;
transition: 0.5s;
display: inline-block;
color: #fff;
transform: translatey(-40px);
visibility: hidden;
opacity: 0;
}
.box:hover .content a
{
transform: translatey(20px);
opacity: 1;
visibility: visible;
}
.box .content a:hover
{
color:#000;
background: #fff;
}
Comments
Post a Comment