Icon Timeline (İki Bölümlü)

Anasayfa → Temalar→ Menü Örnekleri→ Icon Timeline (İki Bölümlü)

HTML

<section class="icon-split-timeline">
<div class="container">
<div class="col-md-12 text-center">
<div class="row ist-header">
<h2 class="text-uppercase text-bold">HAKKIMIZDA</h2>
<p>Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacı, sürekli 'buraya metin gelecek, buraya metin gelecek' yazmaya kıyasla daha dengeli bir harf dağılımı sağlayarak okunurluğu artırmasıdır.</p>
</div>
</div>
<div class="col-md-12">
<div class="row">
<div class="col-md-6 text-right iconblock">
<a href="#">
<div class="col-xs-10">
<h3 class="text-uppercase">Müzik Nedir?</h3>
<p>Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacı, sürekli 'buraya metin gelecek, buraya metin gelecek' yazmaya kıyasla daha dengeli bir harf dağılımı sağlayarak okunurluğu...</p>
</div>
<div class="col-xs-2">
<div class="t-icon">
<i class="fa fa-angle-double-down" aria-hidden="true"></i>
 </div>
</div>
</a>
</div>
<div class="col-md-6 text-left iconblock">
<a href="#">
<div class="col-xs-2">
<div class="t-icon">
<i class="fa fa-angle-double-down" aria-hidden="true"></i>
</div>
</div>
<div class="col-xs-10">
<h3 class="text-uppercase">Müzik Emektir</h3>
<p>Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacı, sürekli 'buraya metin gelecek, buraya metin gelecek' yazmaya kıyasla daha dengeli bir harf dağılımı sağlayarak okunurluğu...</p>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-md-6 text-right iconblock">
<a href="#">
<div class="col-xs-10">
<h3 class="text-uppercase">Müzik Sevgidir</h3>
<p>Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacı, sürekli 'buraya metin gelecek, buraya metin gelecek' yazmaya kıyasla daha dengeli bir harf dağılımı sağlayarak okunurluğu...</p>
</div>
<div class="col-xs-2">
<div class="t-icon">
<i class="fa fa-angle-double-down" aria-hidden="true"></i>
</div>
</div>
</a>
</div>
<div class="col-md-6 text-left iconblock">
<a href="#">
<div class="col-xs-2">
<div class="t-icon">
<i class="fa fa-angle-double-down" aria-hidden="true"></i>
</div>
</div>
<div class="col-xs-10">
<h3 class="text-uppercase">Müzik Nedir?</h3>
<p>Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacı, sürekli 'buraya metin gelecek, buraya metin gelecek' yazmaya kıyasla daha dengeli bir harf dağılımı sağlayarak okunurluğu...</p>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-md-6 text-right iconblock">
<a href="#">
<div class="col-xs-10">
<h3 class="text-uppercase">Müzik Emektir</h3>
<p>Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacı, sürekli 'buraya metin gelecek, buraya metin gelecek' yazmaya kıyasla daha dengeli bir harf dağılımı sağlayarak okunurluğu...</p>
</div>
<div class="col-xs-2">
<div class="t-icon">
<i class="fa fa-angle-double-down" aria-hidden="true"></i>
</div>
</div>
</a>
</div>
<div class="col-md-6 text-left iconblock">
<a href="#">
<div class="col-xs-2">
<div class="t-icon">
<i class="fa fa-angle-double-down" aria-hidden="true"></i>
</div>
</div>
<div class="col-xs-10">
<h3 class="text-uppercase">Müzik Sevgidir</h3>
<p>Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacı, sürekli 'buraya metin gelecek, buraya metin gelecek' yazmaya kıyasla daha dengeli bir harf dağılımı sağlayarak okunurluğu...</p>
</div>
</a>
</div>
</div>
</div>
</div>
</section>

CSHTML (Kategori ve Makaleleri)

<section class="icon-split-timeline">
<div class="container">
@{
MakaleKategori iconsplitKategori = Partial.Kategori(1, dilk);
IEnumerable<Makale> iconsplitMakaleler = Partial.MakalelerID(iconsplitKategori.MakaleKategoriID, 0, 6, "sira", false);
int iconsplitmakalesay = iconsplitMakaleler.Count();
int iconsplitdonugsay = Convert.ToInt32(Math.Ceiling(iconsplitmakalesay / Convert.ToDouble(2)));
int iconsplitsayac = 1;
<div class="col-md-12 text-center">
<div class="row ist-header">
<h2 class="text-uppercase text-bold">@iconsplitKategori.MakaleKategoriAdi.HtmlEncode()</h2>
@MvcHtmlString.Create(iconsplitKategori.MakaleKategoriAciklama)
</div>
</div>
<div class="col-md-12">
@for (int i = 0; i < iconsplitdonugsay; i++)
{
<div class="row">
@foreach (Makale makalem in iconsplitMakaleler.Skip(i * 2).Take(2))
{
if (iconsplitsayac % 2 == 0)
{
<div class="col-md-6 text-left iconblock">
<a href="@Partial.MakaleLink(makalem.MakaleID)">
<div class="col-xs-2">
<div class="t-icon">
<i class="fa fa-angle-double-down" aria-hidden="true"></i>
</div>
</div>
<div class="col-xs-10">
<h3 class="text-uppercase">@makalem.MakaleBaslik.HtmlEncode()</h3>
<p>@Partial.MakaleOzeti(makalem.MakaleID, 230)</p>
</div>
</a>
</div>
}
else
{
<div class="col-md-6 text-right iconblock">
<a href="@Partial.MakaleLink(makalem.MakaleID)">
<div class="col-xs-10">
<h3 class="text-uppercase">@makalem.MakaleBaslik.HtmlEncode()</h3>
<p>@Partial.MakaleOzeti(makalem.MakaleID, 230)</p>
</div>
<div class="col-xs-2">
<div class="t-icon">
<i class="fa fa-angle-double-down" aria-hidden="true"></i>
</div>
</div>
</a>
</div>
}
iconsplitsayac++;
}
</div>
}
</div>
}
</div>
</section>

CSHTML (Kategori ve Alt Kategorileri)


<section class="icon-split-timeline">
<div class="container">
@{
MakaleKategori iconsplitKategori = Partial.Kategori(1, dilk);
IEnumerable<MakaleKategori> iconsplitMakaleler = Partial.KategorilerAltID(iconsplitKategori.MakaleKategoriID);
int iconsplitmakalesay = iconsplitMakaleler.Count();
int iconsplitdonugsay = Convert.ToInt32(Math.Ceiling(iconsplitmakalesay / Convert.ToDouble(2)));
int iconsplitsayac = 1;
<div class="col-md-12 text-center">
<div class="row ist-header">
<h2 class="text-uppercase text-bold">@iconsplitKategori.MakaleKategoriAdi.HtmlEncode()</h2>
@MvcHtmlString.Create(iconsplitKategori.MakaleKategoriAciklama)
</div>
</div>
<div class="col-md-12">
@for (int i = 0; i < iconsplitdonugsay; i++)
{
<div class="row">
@foreach (MakaleKategori kategorim in iconsplitMakaleler.Skip(i * 2).Take(2))
{
if (iconsplitsayac % 2 == 0)
{
<div class="col-md-6 text-left iconblock">
<a href="@Partial.KategoriLink(kategorim.MakaleKategoriID)">
<div class="col-xs-2">
<div class="t-icon">
<i class="fa fa-angle-double-down" aria-hidden="true"></i>
</div>
</div>
<div class="col-xs-10">
<h3 class="text-uppercase">@kategorim.MakaleKategoriAdi.HtmlEncode()</h3>
@MvcHtmlString.Create(kategorim.MakaleKategoriAciklama)
</div>
</a>
</div>
}
else
{
<div class="col-md-6 text-right iconblock">
<a href="@Partial.KategoriLink(kategorim.MakaleKategoriID)">
<div class="col-xs-10">
<h3 class="text-uppercase">@kategorim.MakaleKategoriAdi.HtmlEncode()</h3>
@MvcHtmlString.Create(kategorim.MakaleKategoriAciklama)
</div>
<div class="col-xs-2">
<div class="t-icon">
<i class="fa fa-angle-double-down" aria-hidden="true"></i>
</div>
</div>
</a>
</div>
}
iconsplitsayac++;
}
</div>
}
</div>
}
</div>
</section>

Baz Alınan: Sanatalya

Menü Örnekleri

Discus CMS (İçerik Yönetim Sistemi), ASP.NET MVC, C# ve LinQ kullanılarak yazılmış bir kişisel yayın sistemidir. Discus bir CMS (Content Management System / İçerik Yönetim Sistemi)'dir. Bu niteliği ile sadece makale yazma ve düzenleme veya blog sistemi olarak değil, her türlü içeriğin düzenlenip yayımlanabileceği bir platform olduğu anlamına gelmektedir. Google tarafından çok hızlı indexlenir ve sayfa açılışları hızlıdır. Discus yeni bir yazılımdır, kökleri ve gelişimi 2008'e kadar uzanır.

© 2024, ASP.NET MVC CMS (Content Management System / İçerik Yönetim Sistemi). Tüm Hakları Saklıdır.

web tasarım antalya