Content Box
Here, we create content box using HTML and CSS.
Project Folder Structure
Before we start coding we take a look at the project folder structure. We start by creating a folder called – “Content Box” Inside this folder, we have 2 files. Create these files like below:
- index.html
- style.css
HTML
We create content box using HTML code. Copy the code below and paste it into your index.html file.
<div class="content-box-wrapper">
<div class="c-box">
<h3>c-box 1</h3>
<p>This is a c-box paragraph.</p>
</div>
<div class="c-box">
<h3>c-box 2</h3>
<p>This is a c-box paragraph.</p>
</div>
<div class="c-box">
<h3>c-box 3</h3>
<p>This is a c-box paragraph.</p>
</div>
<div class="c-box">
<h3>c-box 4</h3>
<p>This is a c-box paragraph.</p>
</div>
<div class="c-box">
<h3>c-box 5</h3>
<p>This is a c-box paragraph.</p>
</div>
<div class="c-box">
<h3>c-box 6</h3>
<p>This is a c-box paragraph.</p>
</div>
</div>
CSS
We create content box using CSS code. Copy the code below and paste it into your style.css file.
body{
padding:100px 0;
}
.content-box-wrapper{
display:grid;
grid-template-columns:repeat(3,1fr);
row-gap:50px;
column-gap:50px;
max-width:1200px;
margin:auto;
}
.c-box{
text-align:center;
border: 1px solid #e6e6e6;
padding: 35px;
-webkit-transition: border-color 0.3s ease;
transition: border-color 0.3s ease;
position:relative;
}
.c-box:before{
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-top: 1px solid #1f1f1f;
border-bottom: 1px solid #1f1f1f;
-webkit-transition: all .3s ease;
transition: all .3s ease;
width: 0;
}
.c-box:after{
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-left: 1px solid #1f1f1f;
border-right: 1px solid #1f1f1f;
-webkit-transition: all .3s ease;
transition: all .3s ease;
height: 0;
}
.c-box:hover{
border-color:transparent;
}
.c-box:hover:before{
opacity: 1;
width: 100%;
}
.c-box:hover:after{
opacity: 1;
height: 100%;
}
CODEPEN
Watch Some Other Topics