<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css box creative  design</title>
</head>
<body>




<div class="container">


<div class="box">
<div class="content">

<h1>01</h1>

<h2>service 01</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, quibusdam. Accusamus qui, nobis, nulla consectetur facilis provident sed reiciendis, necessitatibus corporis aliquam culpa eum, itaque nesciunt possimus esse dicta perspiciatis.</p>
<a href="">read more</a>
</div>
</div>

<div class="box">
<div class="content">
<h1>02</h1>
<h2>service 02</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, quibusdam. Accusamus qui, nobis, nulla consectetur facilis provident sed reiciendis, necessitatibus corporis aliquam culpa eum, itaque nesciunt possimus esse dicta perspiciatis.</p>
<a href="">read more</a>
</div>
</div>




<div class="box">
<div class="content">
<h1>03</h1>
<h2>service 03</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, quibusdam. Accusamus qui, nobis, nulla consectetur facilis provident sed reiciendis, necessitatibus corporis aliquam culpa eum, itaque nesciunt possimus esse dicta perspiciatis.</p>
<a href="">read more</a>
</div>
</div>


<div class="box">
<div class="content">
<h1>04</h1>
<h2>service 04</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, quibusdam. Accusamus qui, nobis, nulla consectetur facilis provident sed reiciendis, necessitatibus corporis aliquam culpa eum, itaque nesciunt possimus esse dicta perspiciatis.</p>
<a href="">read more</a>
</div>
</div>


</div>



</body>
</html>

*{ padding: 0px; margin: 0px; font-family: sans-serif;}

body{ background-color: #021017; padding: 100px 50px;   }


.box {
    justify-content: center;
    align-items: center;
    width: calc(24% - 16px );
    display: inline-flex;
    margin-right: 33px;
}

.box p {
    line-height: 25px;
    text-align: justify;
    font-size: 15px;
    margin: 18px 0px;
}
.content h1 {
    text-align: center;
    font-size: 100px;
    color: #1d1d1d;
}
.content h2 {
    text-align: left;
    font-size: 34px;
    text-transform: capitalize;
    margin: 0px;
    color: #ffffff;
}
.box a {
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid #fff;
    padding: 11px 20px;
    margin: 5px 0px;
    display: inline-block;
    transition: 0.4s;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-36px);
}



.box:last-child {
margin: 0px;
}

.box .content {
    padding: 20px;
    background-color: #021017;
    color: #fff;
    min-height: 200px;
    position: relative;
    transition: 0.4s;
}
.box .content:before {
display: block;
content: "";
position: absolute;
top: -2px;
left: -2px;
bottom: -2px;
background-color: red;
right: -2px;
z-index: -1;
transform: skew(2deg, 2deg);
}


.box .content:after {
display: block;
content: "";
position: absolute;
top: 0px;
left: 0px; width: 50%; height: 100%;
bottom: 0px;
background:rgba(255,255,255,0.02);
right: 0px; z-index: -1;

}



.box .content:hover a{transition: 0.4s;
    visibility: visible;
    opacity: 1;
    transform: translateY(0px);}





 .box:nth-child(1) .content:before {background: linear-gradient(315deg, #89ff00, #00bcd4);}
.box:nth-child(2) .content:before {
    background: linear-gradient(315deg, #7f00ff, #E91E63);
}
.box:nth-child(3) .content:before {
    background: linear-gradient(315deg, #FF9800, #00afff);
}

.box:nth-child(4) .content:before {
    background: linear-gradient(315deg, #ff0000, #16ff00);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.