Responsive Box Model Using HTML5 CSS3

Stylish Complete responsive box model design for Website, using HTML5 CSS3. This design is fully responsive. step by step procedure is under below. Please follow the following step to create a good design like this for your website or projects. The video tutorial is also available at our youtube channel.

Step 1:
Write down the below code in your index.html page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Box Model</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
</head>
<body>
    <div class="container">
       
        <div class="box">
            <div class="thumb">
                <img src="323.jpg" alt="">
            </div>
<div class="details">
                <div class="content">
                    <i class="fa fa-home fa-fw" aria-hidden="true"></i>
                    <h3>
Lorem</h3>
<a href="">Read More </a>
                </div>
</div>
</div>

        <div class="box">
            <div class="thumb">
                <img src="323.jpg" alt="">
            </div>
<div class="details">
                <div class="content">
                    <i class="fa fa-user-circle-o" aria-hidden="true"></i>
                    <h3>
Lorem</h3>
<a href="">Read More </a>
                </div>
</div>
</div>

        <div class="box">
            <div class="thumb">
                <img src="323.jpg" alt="img">
            </div>
<div class="details">
                <div class="content">
                    <i class="fa fa-desktop" aria-hidden="true"></i>
                    <h3>
Lorem</h3>
<a href="">Read More </a>
                </div>
</div>
</div>

        <div class="box">
            <div class="thumb">
                <img src="323.jpg" alt="img">
            </div>
<div class="details">
                <div class="content">
                    <i class="fa fa-graduation-cap" aria-hidden="true"></i>
                    <h3>
Lorem</h3>
<a href="">Read More </a>
                </div>
</div>
</div>
</div>
</body>
</html>

Step 2:
Write down the following CSS3 code:

body{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    background: #20024a;
}
.container{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1000px;
    height: 500px;
    display: flex;
}
.container .box{
    position: relative;
    width: 250px;
    height: 500px;
    background: #ccc;
    transition: 0.5s;
}
.container .box:hover{
    transform: scale(1.1);
    z-index: 1;
    box-shadow: 0 5px 20px rgba(0,0,0,1);
}
.container .box .thumb{
    position: absolute;
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.container .box:nth-child(odd) .thumb{
   left: 0;
    bottom: 0;
}
.container .box .thumb img{
    width: 100%;
}
.container .box .details{
    position: absolute;
    width: 100%;
    height: 250px;
    overflow: hidden;
    background: #262626;
}
.container .box:nth-child(even) .details{
   left: 0;
    bottom: 0;
}
.container .box:nth-child(1) .details{
   background: #8553cb;
}
.container .box:nth-child(2) .details{
   background: #fe8f01;
}
.container .box:nth-child(3) .details{
   background: #79d400;
}
.container .box:nth-child(4) .details{
   background: #ff3b34;
}
.container .box .details .content{
    position: absolute;
    top: calc(50% + 16px);
    transform: translateY(-50%);
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    transition: 2.0s;
}
.container .box:hover .details .content{
    top: calc(50%);
}
.container .box .details .content .fa{
    font-size: 80px;
    color: aliceblue;
}
.container .box .details .content h3{
    margin: 0;
    padding: 0;
    padding: 10px 0;
    color: #fff;
}
.container .box .details .content a{
    display: inline-block;
    padding: 5px 20px;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 20px;
    text-decoration: none;
    transition: 0.5s;
    transform: scale(0);
}
.container .box:hover .details .content a{
    transform: scale(1);
}
.container .box .details .content a:hover{
    background: #fff;
    color: #262626;
}
@media (max-width: 1000px){
.container{
    width: 100%;
    height: auto;
    padding: 20px;
    box-sizing: border-box;
    }
.container .box{
    height: 250px;
    }
.container .box .thumb{
     display: none;
    }
}
@media (max-width: 768px){
.container{
    display: initial;
    }
.container .box{
    width: 50%;
    height: 250px;
    float: left;
    }
}
@media (max-width: 480px){
.container{
    top: 0;
    left: 0;
    transform: translate(0);
    }
.container .box{
    width: 100%;
    height: 250px;
    float: none;
    }
}

Step 3:
Download and Add the Fontawesome icon to add the icons.

Your responsive box model is ready to use in your web pages or apps. If there is any problem regarding this topic kindly leave a comment.

Note:

For video tutorial of the said design kindly visit our youtube channel by clicking the link below:

Click here to view Video Tutorial

*If you like it kindly share in your social networks.

Responsive Box Model Using HTML5 CSS3 - Web Design

Post a Comment

Post a Comment

Contact Form