@{
int card77Col = 4;
int card77TotalRow = 1;
int card77categoryOrderNumber = 3;
if (Partial.isCategoryOrderNumber(card77categoryOrderNumber))
{
Category sub77Category = Partial.Category(card77categoryOrderNumber, lang);
IEnumerable<Category>
categories77 = Partial.CategorySubOrderNumber(card77categoryOrderNumber, lang);
int card77Count = Convert.ToInt32(Math.Ceiling(categories77.Count() / Convert.ToDouble(card77Col)));
int sayi = 0;
<div class="section-full p-tb80 bg-white bg-repeat square_shape2 inner-page-padding" style="background-image:url(@sub77Category.CategoryImage)">
<div class="container">
<div class="section-head ">
<div class="mt-separator-outer separator-center">
<div class="mt-separator">
<h2 class="text-uppercase sep-line-one ">@sub77Category.CategoryTitle.HtmlEncode()</h2>
</div>
</div>
</div>
<div class="section-content">
@for (int componen = 0; componen < card77TotalRow; componen++)
{
<div class="row">
@foreach (Category comCategory in categories77.Skip(componen * card77Col).Take(card77Col))
{
sayi++;
<div class="col-md-3 col-sm-6">
<div class="mt-icon-box-wraper m-b30">
<div class="relative icon-count-2 bg-gray p-a30 p-tb50">
<span class="icon-count-number">@sayi</span>
<div class="icon-md inline-icon m-b15 text-primary scale-in-center">
<span class="icon-cell">
<img alt="" src="@comCategory.CategoryImage">
</span>
</div>
<div class="icon-content">
<h4 class="mt-tilte m-b25">
@comCategory.CategoryTitle.HtmlEncode()
</h4>
<p>@Partial.CategoryShortContent(comCategory.CategoryID, 105)</p>
</div>
</div>
</div>
</div>
}
</div>
}
</div>
</div>
</div>
}
}
@{
int card78Col = 4;
int card78TotalRow = 1;
int card78categoryOrderNumber = 3;
if (Partial.isCategoryOrderNumber(card78categoryOrderNumber))
{
Category Categorytitle = Partial.Category(card78categoryOrderNumber, lang);
IEnumerable<Post>
PostsOrderNumber = Partial.PostsOrderNumber(card78categoryOrderNumber, 0, card78Col * card78TotalRow, Partial.Order.OrderBy, true, lang);
int card78Count = Convert.ToInt32(Math.Ceiling(PostsOrderNumber.Count() / Convert.ToDouble(card78Col)));
int sayi = 0;
<div class="section-full p-tb80 bg-white bg-repeat square_shape2 inner-page-padding" style="background-image:url(@Categorytitle.CategoryImage)">
<div class="container">
<div class="section-head ">
<div class="mt-separator-outer separator-center">
<div class="mt-separator">
<h2 class="text-uppercase sep-line-one ">@Categorytitle.CategoryTitle.HtmlEncode()</h2>
</div>
</div>
</div>
<div class="section-content">
@for (int componen = 0; componen < card78Count; componen++)
{
<div class="row">
@foreach (Post comPost in PostsOrderNumber.Skip(componen * card78Col).Take(card78Col))
{
sayi++;
<div class="col-md-3 col-sm-6">
<div class="mt-icon-box-wraper m-b30">
<div class="relative icon-count-2 bg-gray p-a30 p-tb50">
<span class="icon-count-number">@sayi</span>
<div class="icon-md inline-icon m-b15 text-primary scale-in-center">
<span class="icon-cell">
<img alt="" src="@comPost.PostImage">
</span>
</div>
<div class="icon-content">
<h4 class="mt-tilte m-b25">
@comPost.PostTitle.HtmlEncode()
</h4>
<p>@Partial.PostShortContent(comPost.PostID, 105)</p>
</div>
</div>
</div>
</div>
}
</div>
}
</div>
</div>
</div>
}
}
/* Karayel - Companent - Süreç Nasıl İşliyor */
.bg-gray {
background-color: #f6f7f8;
}
.p-tb80 {
padding-bottom: 80px;
padding-top: 80px;
}
.p-tb50 {
padding-bottom: 50px;
padding-top: 50px;
}
.p-a30 {
padding: 30px;
}
.m-b30 {
margin-bottom: 30px;
}
.icon-md {
width: 60px;
}
.icon-xld, .icon-xl, .icon-lg, .icon-md, .icon-sm, .icon-xs {
display: inline-block;
text-align: center;
}
/*-------------------------------------
2. Count Section
-------------------------------------*/
.icon-count-2 {
position: relative;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.icon-count-2:after {
position: absolute;
content: '';
left: 10px;
right: 10px;
top: -10px;
height: 10px;
background-color: #0054a6;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.icon-count-2 span.icon-count-number {
position: absolute;
right: 20px;
top: 20px;
font-size: 120px;
font-weight: 800;
text-align: end;
color: rgba(177, 177, 177, 0.7);
opacity: 0.3;
line-height: 120px;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.icon-count-2:hover {
background-color: #fff;
-webkit-box-shadow: 0 10px 30px 0 rgba(50,50,50,.16);
box-shadow: 0 10px 30px 0 rgba(50,50,50,.16);
}
.icon-count-2:hover span.icon-count-number {
color: #0054a6;
opacity: 1;
}
.icon-count-2:hover:after {
top: 0px;
left: 0px;
right: 0px;
}
.section-head h2 {
margin-top: 0;
font-family: 'Roboto', sans-serif;
}
h2 {
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 2rem;
line-height: 44px;
color: #1a1a1a;
}
.mt-icon-box-wraper .mt-tilte {
margin-top: 0;
}
.mt-box, .mt-info, .mt-tilte, .mt-tilte-inner {
position: relative;
}
h4 {
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 23px;
color: #1a1a1a;
}
h1, h2, h3, h4, h5, h6 {
margin-bottom: 24px;
}
.sep-line-one:before {
width: 30px;
left: -40px;
top: 22px;
}
.sep-line-one:after {
width: 30px;
right: -40px;
top: 22px;
}
/*-------------------------------------
Title separators
-------------------------------------*/
.mt-separator-outer { overflow:hidden;}
/*Separator defualt*/
.mt-separator-outer.separator-left{text-align:left;}
.mt-separator-outer.separator-right{text-align:right;}
.mt-separator-outer.separator-center{text-align:center}
/* .mt-separator-outer.separator-left .mt-separator{margin-left:60px;} */
/* .mt-separator-outer.separator-left .mt-separator::after {display:none;} */
/* .mt-separator-outer.separator-left .mt-separator .sep-line-one::after {display:none;} */
/* .mt-separator-outer.separator-right .mt-separator{margin-right:60px;} */
/* .mt-separator-outer.separator-right .mt-separator::before {display:none;} */
/* .mt-separator-outer.separator-right .mt-separator .sep-line-one::before {display:none;} */
.mt-separator{
display:inline-block;
margin-top:0px;
font-weight:500;
font-size:18px;
margin-bottom:30px;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.mt-separator,.sep-line-one,.sep-line-two{
position:relative;
}
.mt-separator:after,
.sep-line-one:after,
.mt-separator:before,
.sep-line-one:before{
-moz-transition: width 0.3s ease-in-out;
-o-transition: width 0.3s ease-in-out;
-webkit-transition: width 0.3s ease-in-out;
transition: width 0.3s ease-in-out;
}
.mt-separator:after,
.sep-line-one:after{ position: absolute; content: ''; background-color: #0054a6; height: 2px;}
.mt-separator:after{ width: 50px; right: -60px; top: 12px;}
.sep-line-one:after{ width: 30px; right: -40px; top: 22px;}
/*.sep-line-two:after{ width: 30px; right: -40px; top: 8px;}*/
.mt-separator:before,
.sep-line-one:before{ position: absolute; content: ''; background-color: #0054a6; height: 2px;}
.mt-separator:before{ width: 50px; left: -60px; top: 12px;}
.sep-line-one:before{ width: 30px; left: -40px; top: 22px;}
/*.sep-line-two:before{ width: 30px; left: -40px; top: 8px;}*/
.section-head:hover .mt-separator:after{ width: 30px;}
.section-head:hover .sep-line-one:after{ width: 35px;}
.section-head:hover .mt-separator:before{ width: 30px;}
.section-head:hover .sep-line-one:before{ width: 35px;}
@media only screen and (max-width: 768px){
.mt-separator h1,
.mt-separator h2,
.mt-separator h3{
font-size:24px;
margin-bottom:0px;
}
}
https://www.karayeltasarim.com/tr
Sosyal Ağ