Create a blog template using HTML and CSS : the article section

in this chapter, we will see how to create the article section of our blog, you will need some images for the blog post's card. we will also use FONTAWESOME for the icons.
before you start this chapter i recommend you to visit the previous chapter to see how to make the header.
link :  previous 

so let's start.

first of all, we will need to create the last chapter div and styling it.

<div class="last_article">
                <img src="img_ressource/ilya-pavlov-87438-unsplash.jpg">
                
                <div class="text">
                    <h1>this is your title</h1>
                    
                    <ul>
                        <li><i class="fas fa-user"></i> article writer</li>
                        <li><i class="fas fa-clock"></i> 01 Mai 2019</li>
                    </ul>
                    
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac pellentesque felis. Nunc placerat, lorem quis egestas varius, metus elit malesuada lectus, hendrerit rhoncus metus nunc ut massa. Integer at blandit lectus, vel efficitur eros. Vivamus nec mi sapien. Mauris mollis velit et erat posuere, vel venenatis lectus gravida. Integer diam eros, euismod eget mi vel, pharetra tristique augue. Aenean mattis efficitur metus, auctor tempor lorem accumsan eu. Aenean interdum tempus felis ac varius. Aenean lobortis suscipit elementum. Sed vehicula, orci eget finibus lacinia, leo neque semper leo, ac ullamcorper magna ex vel nisi. Nullam sit amet diam nisl.
                    </p>
                
                </div>
            
            </div>

now let's put the style

.last_article{
    position: relative;
    height: 500px;
    width: 100%;
    overflow: hidden;
    background-color: #fff;
    border-radius: 10px;
    transform: scale(.9);
    transition: .3s;
    box-shadow: 0 2px 8px rgba(64,64,64,.3);
}

.last_article img{
    width: 50%;
    height: 100%;
    float: left;
    margin-right: 10px;
}

.last_article .text{
    padding: 30px;
    margin: 10px;
    color: #212121;
}
.last_article .text ul li{
    display: inline-block;
    margin-right: 15px;
    margin-bottom: 15px;
    margin-top: 15px;
}
.last_article .text h1{
    font-size: 2.3rem;
    text-transform: uppercase;
}

.last_article .text p{
    font-size: 1.3rem;
}
.last_article:hover{
    transform: scale(.95);
}

after that let's make the box, we will make a model and copy them because it has the same style and the same properties.

<div class="Box_container">
            
                <div class="box">
                    <img src="img_ressource/rawpixel-589076-unsplash.jpg">
                    <div class="box_text">
                        <h1>this is your title</h1>
                    
                    <ul>
                        <li><i class="fas fa-user"></i> article writer</li>
                        <li><i class="fas fa-clock"></i> 01 Mai 2019</li>
                    </ul>
                    
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac pellentesque felis. Nunc placerat, lorem quis egestas varius, metus elit malesuada lectus, hendrerit rhoncus metus nunc ut massa. Integer at blandit lectus, vel efficitur eros. Vivamus nec mi sapien. Mauris mollis velit et erat posuere, vel venenatis lectus gravida. Integer diam eros, euismod eget mi vel, pharetra tristique augue. Aenean mattis efficitur metus, auctor tempor lorem accumsan eu. Aenean interdum tempus felis ac varius. Aenean lobortis suscipit elementum. 
                    </p>
                    
                    </div>
                
                </div>

         </div>

and let put the style

.Box_container{
    position: relative;
    clear: both;
    margin: 30px;
}

.Box_container .box{
    
    width: 30%;
    float: left;
    overflow: auto;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(64,64,64,.3);
    margin: 0 1.6%;
    transform: scale(.9);
    transition: .3s;
    background-color: #fff;
}

.Box_container .box img{
    width: 100%;
    height: 180px;
}

.Box_container .box .box_text{
    padding: 15px 10px;
    color: #212121;
}
.Box_container .box .box_text h1{
    text-transform: uppercase;
}
.Box_container .box .box_text  ul li{
    display: inline-block;
    margin-right: 15px;
    margin-bottom: 15px;
    margin-top: 15px;
}

.Box_container .box .box_text p{
    font-size: 1.1rem;
    line-height: 26px;
    height: 300px;
}


.box:hover{
transform: scale(.95);
}

now that we saw how to create every element I will give you the full code sources.

<!DOCTYPE HTML>

<html>
    <head>
        <title>Doctor Code Blog</title>
        <link rel="stylesheet" href="style/main.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    </head>
    
    <body>
       <header>
        <img src="img_ressource/logodc.png">
       </header>
        
        
        <nav>
            <div class="menu">
                <ul>
                    <li><a href="#">Articles</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </div>
            
            <div class="responcive_menu">
                <img class="btn" src="img_ressource/btn.png">
                <ul>
                    <li><a href="#">Articles</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </div>
        
        </nav>
        
        
        
        <div class="container">
            <div class="last_article">
                <img src="img_ressource/ilya-pavlov-87438-unsplash.jpg">
                
                <div class="text">
                    <h1>this is your title</h1>
                    
                    <ul>
                        <li><i class="fas fa-user"></i> article writer</li>
                        <li><i class="fas fa-clock"></i> 01 Mai 2019</li>
                    </ul>
                    
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac pellentesque felis. Nunc placerat, lorem quis egestas varius, metus elit malesuada lectus, hendrerit rhoncus metus nunc ut massa. Integer at blandit lectus, vel efficitur eros. Vivamus nec mi sapien. Mauris mollis velit et erat posuere, vel venenatis lectus gravida. Integer diam eros, euismod eget mi vel, pharetra tristique augue. Aenean mattis efficitur metus, auctor tempor lorem accumsan eu. Aenean interdum tempus felis ac varius. Aenean lobortis suscipit elementum. Sed vehicula, orci eget finibus lacinia, leo neque semper leo, ac ullamcorper magna ex vel nisi. Nullam sit amet diam nisl.
                    </p>
                
                </div>
            
            </div>
            
            
            
            
            <div class="Box_container">
            
                <div class="box">
                    <img src="img_ressource/rawpixel-589076-unsplash.jpg">
                    <div class="box_text">
                        <h1>this is your title</h1>
                    
                    <ul>
                        <li><i class="fas fa-user"></i> article writer</li>
                        <li><i class="fas fa-clock"></i> 01 Mai 2019</li>
                    </ul>
                    
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac pellentesque felis. Nunc placerat, lorem quis egestas varius, metus elit malesuada lectus, hendrerit rhoncus metus nunc ut massa. Integer at blandit lectus, vel efficitur eros. Vivamus nec mi sapien. Mauris mollis velit et erat posuere, vel venenatis lectus gravida. Integer diam eros, euismod eget mi vel, pharetra tristique augue. Aenean mattis efficitur metus, auctor tempor lorem accumsan eu. Aenean interdum tempus felis ac varius. Aenean lobortis suscipit elementum. 
                    </p>
                    
                    </div>
                
                </div>
                
                
                
                <div class="box">
                    <img src="img_ressource/rawpixel-589076-unsplash.jpg">
                    <div class="box_text">
                        <h1>this is your title</h1>
                    
                    <ul>
                        <li><i class="fas fa-user"></i> article writer</li>
                        <li><i class="fas fa-clock"></i> 01 Mai 2019</li>
                    </ul>
                    
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac pellentesque felis. Nunc placerat, lorem quis egestas varius, metus elit malesuada lectus, hendrerit rhoncus metus nunc ut massa. Integer at blandit lectus, vel efficitur eros. Vivamus nec mi sapien. Mauris mollis velit et erat posuere, vel venenatis lectus gravida. Integer diam eros, euismod eget mi vel, pharetra tristique augue. Aenean mattis efficitur metus, auctor tempor lorem accumsan eu. Aenean interdum tempus felis ac varius. Aenean lobortis suscipit elementum. 
                    </p>
                    
                    </div>
                
                </div>
                
                
                <div class="box">
                    <img src="img_ressource/rawpixel-589076-unsplash.jpg">
                    <div class="box_text">
                        <h1>this is your title</h1>
                    
                    <ul>
                        <li><i class="fas fa-user"></i> article writer</li>
                        <li><i class="fas fa-clock"></i> 01 Mai 2019</li>
                    </ul>
                    
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac pellentesque felis. Nunc placerat, lorem quis egestas varius, metus elit malesuada lectus, hendrerit rhoncus metus nunc ut massa. Integer at blandit lectus, vel efficitur eros. Vivamus nec mi sapien. Mauris mollis velit et erat posuere, vel venenatis lectus gravida. Integer diam eros, euismod eget mi vel, pharetra tristique augue. Aenean mattis efficitur metus, auctor tempor lorem accumsan eu. Aenean interdum tempus felis ac varius. Aenean lobortis suscipit elementum. 
                    </p>
                    
                    </div>
                
                </div>
            
            </div>
            
        
        
        
        </div>

    </body>
    
    <script type="text/javascript" src="script/responsive_menu.js"></script>
</html>

and the CSS file

*{
    margin: 0;
    padding: 0;
    outline: 0;
}

body{
    background-color: #F4F8FB;
}

header{
    position: relative;
    background: url('../img_ressource/redacteur-web-auto-entrepreneur-relation-entreprises.jpg');
    background-position: center;
    background-size: cover;
}
header img{
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

nav{
    position: relative;
    background-color: #212121;
    border-bottom: 2px solid #F65757;
}

nav .menu{
    margin: 0;
    position: relative;
    padding: 15px;
}

nav .menu ul{
    text-align: center;
}

nav .menu ul li{
    display: inline-block;
    margin-right: 50px;
}

nav ul li a{
    text-transform: uppercase;
    text-decoration: none;
    color: #fafafa;
    font-size: 1.2rem;
    transition: .4s;
}

nav ul li a:hover{
    color: #F65757;
}

/* i will make the responsive menu invisible */

nav .responcive_menu{
    display: none;
    padding: 15px;
}
nav .responcive_menu img{
    width: 40px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
nav .responcive_menu ul{
    text-align: center;
    width: 100%;
    padding: 15px 0;
}
nav .responcive_menu ul li{
    margin: 15px 0;
}

@media screen and (max-width : 620px){
    
    nav .menu{
        display: none;
        
    }
    
    nav .responcive_menu{
        display: block;
    }
    nav .responcive_menu ul{
        display: none;
    }
}
.container{
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
}

.last_article{
    position: relative;
    height: 500px;
    width: 100%;
    overflow: hidden;
    background-color: #fff;
    border-radius: 10px;
    transform: scale(.9);
    transition: .3s;
    box-shadow: 0 2px 8px rgba(64,64,64,.3);
}

.last_article img{
    width: 50%;
    height: 100%;
    float: left;
    margin-right: 10px;
}

.last_article .text{
    padding: 30px;
    margin: 10px;
    color: #212121;
}
.last_article .text ul li{
    display: inline-block;
    margin-right: 15px;
    margin-bottom: 15px;
    margin-top: 15px;
}
.last_article .text h1{
    font-size: 2.3rem;
    text-transform: uppercase;
}

.last_article .text p{
    font-size: 1.3rem;
}
.last_article:hover{
    transform: scale(.95);
}


.Box_container{
    position: relative;
    clear: both;
    margin: 30px;
}

.Box_container .box{
    
    width: 30%;
    float: left;
    overflow: auto;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(64,64,64,.3);
    margin: 0 1.6%;
    transform: scale(.9);
    transition: .3s;
    background-color: #fff;
}

.Box_container .box img{
    width: 100%;
    height: 180px;
}

.Box_container .box .box_text{
    padding: 15px 10px;
    color: #212121;
}
.Box_container .box .box_text h1{
    text-transform: uppercase;
}
.Box_container .box .box_text  ul li{
    display: inline-block;
    margin-right: 15px;
    margin-bottom: 15px;
    margin-top: 15px;
}

.Box_container .box .box_text p{
    font-size: 1.1rem;
    line-height: 26px;
    height: 300px;
}


.box:hover{
transform: scale(.95);
}

i hope that you liked this project. wait for us for a new project
this is the third part link : Create a blog template using HTML and CSS : the footer