Timeline Card and Icon +++

Index.cshtml

<section class="timeline bg-white discus-parallax">
    @{
        int card94Col = 6;
        int card94TotalRow = 2;
        int card94CategoryOrderNumber = 2;
        int sayi94 = 0;

        if (Partial.isCategoryOrderNumber(card94CategoryOrderNumber))
        {
            IEnumerable<Post>
            card94Posts = Partial.PostsOrderNumber(card94CategoryOrderNumber, 0, card94Col, Partial.Order.OrderBy, true, lang);
            Category category94title = Partial.Category(card94CategoryOrderNumber, lang);
            int card94Count = Convert.ToInt32(Math.Ceiling(card94Posts.Count() / Convert.ToDouble(card94TotalRow)));


            <div class="container">
                <div class="text-center">
                    <div class="">
                        <h2>@category94title.CategoryTitle.HtmlEncode()</h2>
                    </div>
                    <div class="titleshadowL"></div>
                    <div class="titleshadowR"></div>
                </div>
                @for (int componen = 0; componen < card94Count; componen++)
                {
                    <div class="row">
                        @foreach (Post comPost in card94Posts.Skip(componen * card94Col).Take(card94Col))
                        {
                            <div class="col-md-@(12 / card94TotalRow) @if (sayi94 % 2 != 0) { <text> text-left </text> } else { <text> text-right icoblock </text> } ">
                                <div class="kutu">
                                    <div class="kenarlik">
                                        <a href="@Partial.PostLink(comPost.PostID)">
                                            <div class="row">
                                                @if (sayi94 % 2 != 0)
                                                {
                                                    <div class="col-sm-2 hidden-xs">
                                                        <div class="kanvas-icondark text-center">
                                                            <div class="icondark-ic">
                                                                <i class="fa fa-angle-double-down" aria-hidden="true"></i>
                                                            </div>
                                                        </div>
                                                    </div>
                                                }
                                                <div class="col-sm-10 col-xs-12">
                                                    <div class="text-content">
                                                        <div class="text-baslik tip-tablo">
                                                            <div class="hucre hucre-ortala">
                                                                <h3>@comPost.PostTitle.HtmlEncode()</h3>
                                                            </div>
                                                        </div>
                                                        <p>@Partial.PostShortContent(comPost.PostID, 170)</p>
                                                    </div>
                                                </div>
                                                @if (sayi94 % 2 == 0)
                                                {
                                                    <div class="col-sm-2 hidden-xs">
                                                        <div class="kanvas-icondark text-center">
                                                            <div class="icondark-ic">
                                                                <i class="fa fa-angle-double-down" aria-hidden="true"></i>
                                                            </div>
                                                        </div>
                                                    </div>
                                                }
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            sayi94++;
                        }
                    </div>
                }
            </div>
        }
    }
</section>

CSS

 .kanvas-icondark {
        border: 1px solid #2f80b8;
    }

    .kanvas-icondark {
        width: 60px;
        height: 60px;
        margin-top: 20px;
        display: inline-block;
        background: #FFFFFF;
        transition: all 0.17s ease-in-out;
        -moz-transition: all 0.17s ease-in-out;
        -webkit-transition: all 0.17s ease-in-out;
        -o-transition: all 0.17s ease-in-out;
    }

        .kanvas-icondark .icondark-ic i {
            color: #FFFFFF;
            line-height: 52px;
            font-size: 35px;
        }

        .kanvas-icondark:hover .icondark-ic {
            background: #FFFFFF;
        }

            .kanvas-icondark:hover .icondark-ic i {
                color: #FAB131;
            }

    .icondark-ic {
        background: #2f80b8;
    }

    .icondark-ic {
        width: 50px;
        height: 50px;
        margin: 4px auto;
    }

    @media (max-width: 568px) {
.hidden-xs {
    display: none!important;
}
}

http://www.anka-international.com.tr/