119 lines
4.9 KiB
Plaintext
119 lines
4.9 KiB
Plaintext
@using static ConstructorApp.EntityLayer.Entities.Project
|
||
@model List<ResultProjectDto>
|
||
|
||
<section class="section novi-background bg-cover section-lg section-inset-2 bg-gray-100" id="project">
|
||
<div class="container">
|
||
<div class="caption-classic">
|
||
<div class="caption-classic-group">
|
||
<h1 class="caption-classic-title wow fadeInLeft">Proje<span class="font-weight-light">ler</span></h1>
|
||
<p class="caption-classic-text wow fadeInRight">
|
||
Aşağıda, benzersiz mimari yaklaşımımızla çok sayıda ödüle layık görülen son projelerimize göz atabilirsiniz.
|
||
</p>
|
||
</div>
|
||
<div class="caption-classic-decor wow blurIn"></div>
|
||
</div>
|
||
|
||
<!-- Owl Carousel-->
|
||
<div class="owl-carousel owl-style-1" data-autoplay="true" data-autoplay-timeout="10000" data-autoplay-hover-pause="true" data-items="1" data-margin="30" data-xl-margin="90" data-nav="true" data-dots="true" data-mouse-drag="false" data-smart-speed="600">
|
||
@foreach (var project in Model.Where(x => x.IsActive))
|
||
{
|
||
<article class="project-mary">
|
||
<div class="project-mary-figure">
|
||
<a href="/projeler/@project.Slug">
|
||
<img src="@project.CoverUrl" alt="@project.Title" width="775" height="524" />
|
||
</a>
|
||
|
||
<!-- Ribbon Start -->
|
||
<div class="ribbon-wrapper">
|
||
<div class="ribbon
|
||
@(project.Status == ProjectStatus.Completed ? "bg-success text-white" :
|
||
project.Status == ProjectStatus.Planned ? "bg-warning text-white" :
|
||
project.Status == ProjectStatus.UnderConstruction ? "bg-secondary text-dark" :
|
||
"bg-secondary text-white")">
|
||
@(project.Status == ProjectStatus.Completed ? "Teslimatta" :
|
||
project.Status == ProjectStatus.Planned ? "Tanıtımda" :
|
||
project.Status == ProjectStatus.UnderConstruction ? "İnşaatta" :
|
||
"Durum Belirsiz")
|
||
</div>
|
||
</div>
|
||
<!-- Ribbon End -->
|
||
|
||
|
||
|
||
|
||
<div class="project-mary-link-wrap">
|
||
<a class="project-mary-link mdi mdi-magnify" data-lightgallery="item" href="@project.CoverUrl">
|
||
<img src="@project.CoverUrl" alt="@project.Title" width="775" height="524" />
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="project-mary-content">
|
||
<ul class="project-mary-panel">
|
||
<li class="project-mary-panel-item">
|
||
<time class="project-mary-time" datetime="@project.Date.ToString("yyyy-MM-dd")">
|
||
@project.Date.ToString("MMMM dd, yyyy")
|
||
</time>
|
||
</li>
|
||
<li class="project-mary-panel-item">
|
||
<div class="project-mary-tag">@project.Title</div>
|
||
</li>
|
||
</ul>
|
||
<h3 class="project-mary-title">
|
||
<a href="/projeler/@project.Slug">@project.Location</a>
|
||
</h3>
|
||
<p class="project-mary-text">@project.ShortDescription</p>
|
||
</div>
|
||
</article>
|
||
}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<style>
|
||
.ribbon-wrapper {
|
||
position: absolute;
|
||
top: 0px; /* Görselin içine doğru yukarıdan mesafe */
|
||
right: 0px; /* Görselin içine doğru sağdan mesafe */
|
||
overflow: hidden;
|
||
width: 100px;
|
||
height: 100px;
|
||
z-index: 10;
|
||
}
|
||
|
||
.ribbon {
|
||
position: absolute;
|
||
display: block;
|
||
width: 140px; /* Ribbon genişliği */
|
||
padding: 10px 0; /* Ribbon yüksekliği */
|
||
font-size: 16px; /* Yazı boyutu */
|
||
text-align: center;
|
||
color: #fff;
|
||
transform: rotate(45deg); /* Sağ üst köşeden çapraz */
|
||
top: 20px; /* Ribbon'un görselin içine kayması için ayar */
|
||
right: -30px; /* Görselin içine konumlandırma */
|
||
z-index: 11;
|
||
}
|
||
|
||
.ribbon.bg-success {
|
||
background-color: #28a745 !important;
|
||
}
|
||
|
||
.ribbon.bg-warning {
|
||
background-color: #ffc107 !important;
|
||
}
|
||
|
||
.ribbon.bg-info {
|
||
background-color: #17a2b8 !important;
|
||
}
|
||
|
||
.ribbon.bg-secondary {
|
||
background-color: #6c757d !important;
|
||
}
|
||
|
||
|
||
.text-secondary {
|
||
color: white !important; /* Tüm text-secondary sınıfları beyaz yapılır */
|
||
}
|
||
</style>
|