MAKALE

@{
    int card4Col = 4;
    int card4TotalRow = 3;
    int card4CategoryID = 1;

    if (Partial.isCategoryID(card4CategoryID))
    {
        IEnumerable<Post> card4Category = Partial.PostsID(card5CategoryID, 0, 100, Partial.Order.OrderBy, false);
        Category card44Category = Partial.Category(card4CategoryID);
        int card4Count = Convert.ToInt32(Math.Ceiling(card4Category.Count() / Convert.ToDouble(card4Col)));
        <div class="container-fluid bg-white pb-3 d-none d-sm-block">
            <div class="container">
                @for (int componen = 0; componen < card4Count; componen++)
                {
                    <div class="row">
                        @foreach (Post comCategory in card4Category.Skip(componen * card4Col).Take(card4Col))
                        {
                            <div class="col-md-@(12 / card4Col) col-lg-@(12 / card4Col) pb-3 mt-2">
                                <div class="card discus-card-custom bg-white border-white border-0">
                                    <a href="@Partial.PostLink(comCategory.PostID)" class="discus-card-photo">
                                        <div class="discus-card-custom-img" style="background-image: url(@comCategory.PostImage);"></div>
                                    </a>
                                    <div class="card-body">
                                        <h4 class="card-title">@comCategory.PostTitle.HtmlEncode()</h4>
                                        <p class="card-text">@Partial.PostShortContent(comCategory.PostID,105)</p>
                                    </div>
                                    <div class="card-footer" style="background: inherit; border-color: inherit;">
                                        <a href="@Partial.PostLink(comCategory.PostID)" class="btn btn-primary">@Partial.Translate("Devami", lang)</a>
                                    </div>
                                </div>
                            </div>
                        }
                    </div>
                }
            </div>
        </div>
    }
}

KATEGORİ

eklenecek

CSS

/*gradient card*/
a {
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}
a:hover,
a:focus,
a:active {
  text-decoration: none;
}
.btn {
  text-transform: uppercase;
}
.btn.btn-lg {
  padding: 6px 30px;
}
.thumbnail-title {
  font-size: 20px;
  margin-top: 5px;
}
.img-thumb-bg {
  padding: 0;
  overflow: hidden;
  min-height: 300px;
  position: relative;
  border-radius: 3px;
  background-position: center;
  background-color: transparent;
  background-size: cover;
}
.img-thumb-bg p {
  color: #000;
  margin-bottom: 0;
  line-height: 16px;
}
.img-thumb-bg .overlay {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  transition: all 0.3s ease-in-out;
  background: rgba(255, 255, 255, 0);
  background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 40%, #ffffff 90%);
  background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 40%, #ffffff 90%);
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 40%, #ffffffffffff 9090%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 40%, #ffffff 90%);
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 40%, #ffffff 90%);
  background: -webkit-gradient(left top, left bottom, color-stop(40%, rgba(255, 255, 255, 0)), color-stop(90%, #ffffff));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
}
.img-thumb-bg .caption {
  bottom: -5px;
  height: 100px;
  font-size: 12px;
  position: absolute;
  padding: 0 20px 20px;
  transition: all 0.3s ease-in-out;
}
.img-thumb-bg .caption .tag a {
  color: #000;
  padding: 0 5px;
  font-size: 12px;
  border-radius: 2px;
  display: inline-block;
  text-transform: uppercase;
  background-color: #2980B9;
}
.img-thumb-bg .caption .title {
  margin-top: 5px;
  font-size: 18px;
  line-height: 20px;
  text-transform: uppercase;
}
.img-thumb-bg .caption .title a {
  color: #000;
}
.img-thumb-bg .caption .title a:hover {
  color: #2980B9;
}
.img-thumb-bg .caption .meta-data {
  display: none;
  color: #777;
  font-size: 12px;
  line-height: 12px;
  margin-top: 10px;
}
.img-thumb-bg .caption .meta-data a {
  color: #777;
}
.img-thumb-bg .caption .meta-data a .fa {
  color: #2980B9;
}
.img-thumb-bg .caption .meta-data a:hover {
  color: #2980B9;
}
.img-thumb-bg .caption .content {
  display: none;
}
.img-thumb-bg:hover .overlay {
  background: rgba(255, 255, 255, 0.8);
}
.img-thumb-bg:hover .caption {
  bottom: 60px;
}
.img-thumb-bg:hover .caption .meta-data {
  display: block;
}
.img-thumb-bg:hover .caption .content {
  display: block;
}
/*gradient card*/


/* title */
.big-title3 {
    margin-bottom: 3em;
    margin-top:1em;
}
h3.big_title3 {
	color: #212121;
	font-size: 3.5em;
	font-weight: 700;
	margin: 0 auto;
	text-shadow: 2px 2px 2px rgba(179, 171, 171, 0.8);
	-webkit-text-shadow: 2px 2px 2px rgba(179, 171, 171, 0.8);
	-moz-text-shadow: 2px 2px 2px rgba(179, 171, 171, 0.8);
	-o-text-shadow: 2px 2px 2px rgba(179, 171, 171, 0.8);
	-ms-text-shadow: 2px 2px 2px rgba(179, 171, 171, 0.8);
	letter-spacing: 1px;
	position: relative;
}
p.title-para3 {
    color: var(--grey);
    display: block;
    margin: .5em 0 1em;
    letter-spacing: 6px;
    font-size: 0.9em;
}
h3.big_title3:after {
    content: '';
    background: var(--mavi);
    height: 4px;
    width: 27%;
    position: absolute;
    top: 160%;
    left: 36%;
}
/* title */

https://ugurhaliyikama.com.tr