53 lines
4.2 KiB
Plaintext
53 lines
4.2 KiB
Plaintext
<div layout:fragment="content-top">
|
|
<!-- Content Top (Banner 3 lớp kết hợp Title bài Post) -->
|
|
<div class="content-top">
|
|
<div class="lc--layout-container lc--full">
|
|
<div class="l--layout l--full">
|
|
<div class="lr--layout-region lr--main">
|
|
<div class="cc--component-container cc--homepage-hero">
|
|
<div class="c--component c--homepage-hero"
|
|
style="position: relative; overflow: hidden; height: 100vh; max-height: 38.125rem;">
|
|
|
|
<!-- ====== ẢNH NỀN (Dùng ảnh bài viết hoặc ảnh mặc định) ====== -->
|
|
<img class="static-fallback-image" th:src="${post.featuredImage != null and !post.featuredImage.isEmpty() ? post.featuredImage : 'https://res.cloudinary.com/ipufdhda/image/upload/v1784534008/BANNER-WEB-scaled_yeox4u.jpg'}" th:alt="${post.title}" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;" />
|
|
|
|
<!-- ====== TEXT OVERLAY (Nội dung chữ nằm trên ảnh, Hiển thị Tiêu đề bài viết) ====== -->
|
|
<!-- Thêm một lớp nền mờ (rgba đen) để chữ luôn hiển thị rõ ràng trên mọi hình ảnh -->
|
|
<div class="text-container centered"
|
|
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; display: flex; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.4);">
|
|
<div class="slide-text-container-inner" style="pointer-events: auto; text-align: center; padding: 20px;">
|
|
<div class="f--field f--eyebrow" th:if="${post.category != null}" th:text="${post.category.name}" style="color: white; text-shadow: 0 2px 5px rgba(0,0,0,0.7); margin-bottom: 10px; font-weight: bold; text-transform: uppercase;">
|
|
University News
|
|
</div>
|
|
<div class="f--field f--page-title">
|
|
<h1 class="hero-post-title" th:text="${post.title}">Post Title</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.hero-post-title {
|
|
color: white;
|
|
text-shadow: 0 2px 5px rgba(0,0,0,0.7);
|
|
line-height: 1.2;
|
|
margin: 0 auto;
|
|
max-width: 1000px;
|
|
font-size: 3.5rem;
|
|
}
|
|
@media (max-width: 1024px) {
|
|
.hero-post-title { font-size: 2.8rem; max-width: 800px; }
|
|
}
|
|
@media (max-width: 768px) {
|
|
.hero-post-title { font-size: 2.2rem; max-width: 600px; }
|
|
}
|
|
@media (max-width: 480px) {
|
|
.hero-post-title { font-size: 1.8rem; }
|
|
}
|
|
</style>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |