code

blog-title {

}
.blog-text {

}
.blog-user {
    color: #8c8c8c;
    font-family: Roboto;
}

.grid-container-blog {
    display: grid;
    grid-template-columns: 25% 50% 25%;
    grid-template-areas:
            'header header header'
            'Blank_left main Blank_right'
            'footer footer footer';
}
.header-blog {
    grid-area: header;
    width: 100%;
    height: 7vh;
    background-color: #2b2b2b;
}
.info-blog-left {
    grid-area: Blank_left;
    background-color: grey;
    width: 100%;
    height: 93vh;
    position: static;
}
.info-blog-right {
    grid-area: Blank_right;
    background-color: grey;
    width: 100%;
    height: 100%;
    position: static;
}
.main-blog {
    background-color: #ededed;
    grid-area: main;
    width: 100%;
    text-align: center;
}
.post {
    border: 1px solid black;
    margin: 2%;
    display: inline-block;
    width: 40%;
    height: 20%;
    padding: 1%;
}
.footer-blog {
    grid-area: footer;
    width: 100%;
}
.content-left-box {
    width: 100%;
    text-align: center;
    color: white;
}
.content-right-box {
    width: 100%;
    text-align: center;
    color: white;
}
.content-left-box-second {
    display: inline-block;
    width: 70%;
}
.content-right-box-second {
    display: inline-block;
    width: 70%;
}
.content-right-box a {
    display: inline-block;
}
.content-left-box a {
    display: inline-block;
}
.content-left-box a, .content-right-box a{
    border: 1px solid black;
    padding: 10px;
    margin: 10px;
    width: 300px;
    text-decoration: none;
    color: black;
    font-size: 35px;
    font-family: Arial;
}
.content-left-box a:hover, .content-right-box a:hover{
    border: 1px solid #b7b7b7;
    padding: 10px;
    margin: 10px;
    width: 300px;
    text-decoration: none;
    color: #b7b7b7;
    font-size: 35px;
    font-family: Arial;
}
.navbar-blog ul li {
    display: inline-block;
}
.navbar-blog ul li a {
    text-decoration: none;
    color: #fff;
    font-family: Roboto;
    font-size: 28px;
    padding: 20px;

}
    .blog-link:after {
        content: '';
        display: block;
        width: 0;
        height: 2px;
        background-color: #fff;
        transition: width .3s;
    }
    .blog-link:hover::after {
        width: 100%;
        transition: width .3s;
    }