قالب سه ستونه بیان :: رایانه فردا

قالب سه ستونه بیان

ویژگی های این قالب :

ریسپانسیو است
دارای فونت زیبای وزیر
دارای سه ستون مجزا
استفاده از کتابخانه بوت استرپ

دریافت کد در ادامه مطلب

کد Html قالب :

کدcss قالب :

@import url('https://cdn.fontcdn.ir/Font/Persian/Vazir/Vazir.css');
body{
    /* background-color: #c9c7ca; */
    background: url('https://8pic.ir/uploads/images22.jpg')  ;
    
    width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
   
}
.card{
    width: 98%;
    margin: 10px;
   
    
}
.card-body{
    font-size: 15px;
    text-align: justify;
    width: 100%;
}

.clear{
    clear: both;
    content: "";
}
*{
    
    font-family:'Vazir','Times New Roman', Times, serif ;
    box-sizing: content-box;
    direction: rtl;
    text-align: right;
    text-decoration: none;
    
    
}
.all{
    width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
   
}
.nav{
    width: 100%;
    color: black;
    
    
    
    display: block;
    margin-left: auto;
    margin-right: auto;
    
    
    
    height: auto;
    
    
}

.menubox ul li a{
    color:black;
}
.menubox ul li{
display: inline-block;
margin: 10px;
}
.boxheader{
    margin-top: 0px;
    width: 100%;
    display: block;
    
    text-align: center;
    padding: 10px;
    background: #7ed5df91;
    border-radius: 0 0 30px 30px;
    font-size: 16px;
    overflow: auto;
}
.boxtitleheader{
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    color:white;
}
.boxtitleheader a{
    color:white;
}
.boxmessage{
    background-color:#7bed9f;
    text-align: center;
    font-size: 15px;
    padding: 2px;
    margin: 10px;
    box-sizing: border-box;
    border-radius: 20px;
}

.row{
    /* background-color: rgba(118, 185, 30, 0.712); */
    width: 100%;
    height: 100%;
    display: block;
    margin: auto;
  
}
.rightpaper2{
    width: 20%;
    float: right;
    
    font-size: 15px;
    
}
.rightpaper{
    width: 55.5%;
    
    float: right;
    
    
    
    
}
.postinrightpaper{
    
    direction: rtl;

}

.leftpaper{
   width: 20%;
   float: right;
    direction: rtl;
  
    font-size: 15px;
    margin-left: 10px;
    
}
.leftpaper ul{
    list-style: none;
}

.post_list_title{
    text-align: center;
    display: block;
    margin: 20px 20px;
    background-color: #dfe4ea;
    border-radius: 10px;
    width: 98%;
    padding:10px;
}
.post{
    width: 100%;
    height: fit-content;
    float: right;
    
    
    
    background-color: #95afc0;
    border-radius: 20px;
    margin: 10px 5px;
    overflow: hidden;
}
.card-body img{
    max-width: 100%;
}
.posttitle{
    width: 90%;
    text-align: center;
    font-size: 18px;
    background-color: #dff9fb;
    margin-bottom: 10px;
    display: block;
    margin: 10px auto;
    border-radius: 20px;
    color: white;
}
.posttitle a{
color: black;
}
.postsummary{
    padding: 10px 20px;
    width: 90%;
    
    border: 1px dotted red;

margin-top: 10px;
    
    border-radius: 10px;
    background-color: white;
    font-size: 15px;
    overflow: hidden;

}
.postsummary img{
    display: block;
    margin: auto;
}
.rightinfo{
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-content: center;
align-self: center;
background-color: #dff9fb;
border-radius: 20px;
width: 98%;
margin: 10px 20px;
padding: 10px;
font-size: 14px;

}
.readmore{
    height: 50px;
    
    margin: 20px;
    margin-bottom: 50px;
    
    float: left;
    padding: 5px;
    border-radius: 10px;
}

.boxpagination{
clear: both;
text-align: center;
background-color: whitesmoke;
	display: block;
margin:10px  auto;
border-radius: 10px;
font-size: 18px;
width: 95%;

padding:10px;

}
.boxpagination a:hover{
	text-decoration:none;
}
.fullcontent a img {
    width: 100%;
    max-height: 100px;
    object-fit: contain;
    margin: 10px;
    display: block;
    
}

.fullcontent{
    
    
    width: 100%;
    height: fit-content;
    background-color:white;
    border: 1px dotted red;
    margin:  auto;
    border-radius: 20px;
    overflow: hidden;
    direction: rtl;
    text-align: justify;
    
    font-size: 15px;
    display: block;
}
.postfullcontent{
padding: 10px;
display: block;
margin: auto;
}

.info{
    background-color: #a4b0beb4;
    border-radius: 20px;
    margin: 10px auto;
}
.infoimg{
width: 99%;
height: auto;
margin: 10px auto;
}
.comments{
    display: block;
    background-color:rgba(245, 245, 245, 0.781);
    width: 98%;
    height: auto;
    padding: 2px;
    border-radius: 30px;
    margin: 10px 20px;
    font-size: 14px;
    text-align: justify;
    direction: rtl;

}
.infodescription{
    padding: 10px;
    margin: 10px auto;
    text-align: justify;
    direction: rtl;
    display: block;

}
.infotitle{
    text-align: center;
    padding: 5px;
    margin: 20px 10px;
    background-color: #dff9fb;
    border-radius: 10px;
    color: black;
}
.infocontent{
    text-align: center;
    margin: 10px auto;
    padding: 10px;
    color: white;
    background-color: #badc58;
    border-radius: 20px;
   
    
}
.infocontentright{
    text-align: center;
    margin: 10px auto;
    padding: 10px;
    color: white;
    background-color: #badc58;
    border-radius: 20px;
}
.comment-avatar{
    float: right;
    width: 100px;
    height: 100px;
    margin: 5px 10px;
    border-radius: 50%;
    
}
.comment-main-level{
    background-color: #44bba18a;
    border-radius: 20px;
    margin: 5px 10px;
}
/* .comments-container{
    background: white;
    display: block;
    margin: 30px auto;
} */
.titlecomment{
    text-align: center;
    padding: 10px ;
    font-size: 20px;
    background-color: rgba(128, 255, 0, 0.705);
    width: 90%;
    display: block;
    margin: 10px auto;
    border-radius: 30px;
}

.comments-list-reply-list{
    background-color: #f6e58d;
    border-radius: 20px;
    margin: 10px;
}
.comment_add_form{
    background-color: #ecf0f1;
    font-size: 14px;
    padding: 5px;
    margin: 20px;
    border-radius: 10px;
    width: 98%;

}
.comment-content{
    
    clear: both;
    padding: 10px;
    direction: rtl;
    margin: 20px auto;
    text-align: right;
    
    
}
.reply{
    background-color: #7bed9f;
}
.comment-name{
    float: right;
    padding: 2px;
    margin: 2px;
    font-size: 14px;
}
.right{
    float: right;
    padding-right: 10px;
    
}
.left{
    float: left;
    padding-left: 10px;
    
}
/* @media screen and (max-width:1140px) {
    .leftpaper {
        
        width: 30%;
        margin: 10px;
        
    }
    .rightpaper{
        width: 65%;
        margin: 10px;
    }
} */

/* @media screen and (max-width:720px) {
    .leftpaper , .rightpaper{
        
        width: 100%;
        
       
    }
    .post{
        display: block;
        margin: auto;
        
    }
    .leftpaper::after , .rightpaper::after{
        clear: both;
    }
    .menubox ul li{
        display: block;
        text-align: center;
        font-size: 15px;
        
    }
    .posttitle{
        font-size: 15px;
        width: 100%;
        display: block;
        margin: auto;
    }
    
} */
/* .send_comment{
    display: block;
    width: 100%;
    height: auto;
    float: left;
    font-size: 10px;
} */
.menubox ul li{
    font-size: 15px;
    
}
.menubox ul {
    direction: rtl;
}
.menubox ul li a:hover{
    
    border-radius: 20px;
}
.footer{
    display: block;
    box-sizing: border-box;
    background-color: #273c75b2;
    border-radius: 10px;
    padding: 10px;
    width: 100%;
    height: 35px;
    font-size: 13px;
    margin-top: 10px;
    overflow: hidden;
   color: white;
   
}
.footer .left{
    background-color: white;
    border-radius: 15px;
}
.footer .left:hover {
    background-color: rgba(28, 219, 92, 0.815);
    border-radius: 20px;
}
.footer .right:hover{
    background-color: rgba(28, 219, 92, 0.815);
    border-radius: 20px;
}
.footer a:hover{

border-radius: 20px;
}
a:hover{
    
    border-radius: 10px;
}
a:active{
    color: #e74c3c;
}
.tags{
    background-color: rgba(0, 255, 13, 0.767);
    border-radius: 10px;
    margin: 2px;
}
.like{
    float: left;
    display: flex;
    flex-direction: column;
    margin: 10px;
    
}
.like img{
    border-radius: 30px;
    background-color: none;
    float: left;
    margin: 10px;
}

.infocontent a{
    color: white;
}
.infocontentright a{
    color: white;
}

img{
    max-height:350px;
    object-fit: contain;
    display: block;
    margin: auto;
    max-width: 100%;
}
video{
    display: block;
    margin: auto;
}
.card {
    text-decoration: none;
}
@media screen and (max-width:800px) {
    .postinrightpaper{
        
        height: fit-content;
    }
    .postfullcontent{
        padding: 10px;
        
        width: 100%;
    }

.comment_add_form{
        font-size: 9px;
        
    }
    
    .rightpaper , .leftpaper,.rightpaper2{
    width: 97.9%;
    height: max-content;
    display: block;
    
    } 
    
   
    .post{
        width: 100%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

.menubox{
      overflow: auto; 
      font-size: 13px;
      display: block;
      margin-left: auto;
      margin-right: auto;
    }

.boxpagination{
        font-size: 15px;
    }
   body{
       width: 100%;
   }
   .all{
       width: 100%;
   }
  
   .rightinfo{
       font-size: 12px;
   }
   img{
    max-height:200px;
    object-fit: contain;
    display: block;
    margin: auto;
    width: 100%;
   }
   .comment_add_form{
       font-size: 9px;
   }
 
}

.card-body a:hover{
	text-decoration: none;
}
.card-body textarea{
	display:block;
	margin:auto;
}
.rightinfo a:hover{
	text-decoration: none;
}
a:hover{
	text-decoration: none;
}
.card-header a:hover{
    text-decoration: none;
}
.footer a:hover{
    text-decoration: none;
}

نحوهی تغییر قالب بیان :