Good-Production
/
cosmopet-architecture
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Task:7199 | Верстка главной. Блог

Browse Source
pull/36/head
Максим Максимов 1 month ago
parent 81845f1271
commit 17e478c24b
2 changed files with 219 additions and 0 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 157
      wp-content/themes/cosmopet/static/css/new-front-page.css
  2. 62
      wp-content/themes/cosmopet/templates/_pages/new-front-page/main-blog.twig

157
wp-content/themes/cosmopet/static/css/new-front-page.css
Unescape View File

@ -1640,6 +1640,163 @@ font-size: 12px;
color: #121212;
}
/* Main blog */
.main-blog {
padding-bottom: 120px;
}
.main-blog_top {
display: flex;
justify-content: space-between;
align-items: center;
}
.main-blog_top-divider {
width: 401px;
height: 2px;
background: #fff;
opacity: 0.2;
}
.main-blog_top a {
display: flex;
justify-content: center;
align-items: center;
padding: 10px 40px;
border: 2px solid #f4f1f0;
border-radius: 48px;
font-weight: 500;
font-size: 24px;
text-align: center;
color: #f4f1f0;
}
.main-blog_descr {
margin-top: 15px;
font-weight: 500;
font-size: 20px;
color: #f4f1f0;
}
.main-blog_tags {
margin-top: 60px;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 16px;
}
.main-blog_tags-tag {
display: flex;
justify-content: center;
gap: 6px;
border-radius: 28px;
padding: 8px 12px 8px 8px;
background: #fff;
font-weight: 600;
font-size: 14px;
color: #121212;
}
.main-blog_tags-tag img {
width: 15px;
height: 15px;
}
.main-blog_wrapper {
margin-top: 20px;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 25px;
}
.main-blog_wrapper-most {
border-radius: 60px;
padding: 8px;
/* width: 500px; */
min-height: 518px;
background: rgba(18, 18, 18, 0.4);
box-shadow: -3px 9px 31px 0 rgba(0, 0, 0, 0.25);
}
.main-blog_wrapper-most-img {
display: block;
width: 100%;
height: 280px;
object-fit: cover;
object-position: center;
border-radius: 55px;
border: 2px solid #fff;
}
.main-blog_wrapper-most-title {
margin-top: 16px;
margin-left: 8px;
font-weight: 400;
font-size: 24px;
line-height: 130%;
text-transform: uppercase;
color: #fff;
}
.main-blog_wrapper-most-descr {
margin-top: 16px;
margin-left: 8px;
font-weight: 500;
font-size: 16px;
line-height: 150%;
color: #fff;
}
.main-blog_wrapper-most-bottom {
margin-top: 16px;
margin-left: 8px;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 10px;
}
.main-blog_wrapper-most-bottom-img {
width: 25px;
height: 25px;
border-radius: 100%;
}
.main-blog_wrapper-most-bottom-time {
font-weight: 500;
font-size: 14px;
color: #fff;
}
.main-blog_wrapper-items {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px;
}
.main-blog_wrapper-items-item {
border: 2px solid #f4f1f0;
border-radius: 40px;
padding: 24px;
min-height: 247px;
backdrop-filter: blur(55px);
box-shadow: -3px 9px 31px 0 rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
position: relative; /* Для позиционирования псевдоэлемента */
overflow: hidden; /* Чтобы псевдоэлемент не выходил за границы */
}
.main-blog_wrapper-items-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Полупрозрачный чёрный слой */
border-radius: 40px; /* Соответствует border-radius родителя */
z-index: -1; /* Помещаем слой позади контента */
}
.main-blog_wrapper-items-item-title {
font-weight: 400;
margin-left: 8px;
font-size: 16px;
line-height: 130%;
text-transform: uppercase;
color: #fff;
}

62
wp-content/themes/cosmopet/templates/_pages/new-front-page/main-blog.twig
Unescape View File

@ -0,0 +1,62 @@
<section class="main-blog">
<div class="new-container">
<div class="main-blog_top">
<h2 class="main-food_title">Блог</h2>
<div class="main-blog_top-divider"></div>
<a href="/blog">Все статьи</a>
</div>
<p class="main-blog_descr">О здоровье домашних животных, биотехнологиях и экологии</p>
<div class="main-blog_tags">
<a href="#" class="main-blog_tags-tag"><img src="/wp-content/uploads/2025/07/❤️.png" alt="blog-icon"> BSF</a>
<a href="#" class="main-blog_tags-tag"><img src="/wp-content/uploads/2025/07/🔬.png" alt="blog-icon"> Биотехнологии</a>
<a href="#" class="main-blog_tags-tag"><img src="/wp-content/uploads/2025/07/frame-1321316096.png" alt="blog-icon"> Здоровье</a>
<a href="#" class="main-blog_tags-tag"><img src="/wp-content/uploads/2025/07/📖.png" alt="blog-icon"> История</a>
<a href="#" class="main-blog_tags-tag"><img src="/wp-content/uploads/2025/07/🧪.png" alt="blog-icon"> Наука</a>
<a href="#" class="main-blog_tags-tag"><img src="/wp-content/uploads/2025/07/🗞️.png" alt="blog-icon"> Новости</a>
<a href="#" class="main-blog_tags-tag"><img src="/wp-content/uploads/2025/07/👀.png" alt="blog-icon"> Обзоры</a>
<a href="#" class="main-blog_tags-tag"><img src="/wp-content/uploads/2025/07/💪🏻.png" alt="blog-icon"> Развитие</a>
<a href="#" class="main-blog_tags-tag"><img src="/wp-content/uploads/2025/07/🚀.png" alt="blog-icon"> Тренды</a>
</div>
<div class="main-blog_wrapper">
<div class="main-blog_wrapper-most">
<img src="/wp-content/uploads/2025/07/rectangle-23.png" alt="most-read" class="main-blog_wrapper-most-img">
<div class="main-blog_wrapper-most-title">Как рассчитать дневную порцию корма для кошки?</div>
<p class="main-blog_wrapper-most-descr">Составили гид по дозировкам для сторонников индивидуального подхода. Если вы с утра насыплете полную миску корма</p>
<div class="main-blog_wrapper-most-bottom">
<img src="/wp-content/uploads/2025/06/korovkina.png" class="main-blog_wrapper-most-bottom-img" alt="author">
<div class="main-blog_wrapper-most-bottom-time">время чтения: <span>9</span> мин</div>
</div>
</div>
<div class="main-blog_wrapper-items">
<div class="main-blog_wrapper-items-item" style="background:url('/wp-content/uploads/2025/04/320h180-52-768x432.jpg.webp');background-size:cover;background-position:center;">
<div class="main-blog_wrapper-items-item-title">Краткая история кормов: от хлебных корок до лечебных рационов</div>
<div class="main-blog_wrapper-most-bottom">
<img src="/wp-content/uploads/2025/06/korovkina.png" class="main-blog_wrapper-most-bottom-img" alt="author">
<div class="main-blog_wrapper-most-bottom-time">время чтения: <span>9</span> мин</div>
</div>
</div>
<div class="main-blog_wrapper-items-item" style="background:url('/wp-content/uploads/2025/04/320h180-52-768x432.jpg.webp');background-size:cover;background-position:center;">
<div class="main-blog_wrapper-items-item-title">Краткая история кормов: от хлебных корок до лечебных рационов</div>
<div class="main-blog_wrapper-most-bottom">
<img src="/wp-content/uploads/2025/06/korovkina.png" class="main-blog_wrapper-most-bottom-img" alt="author">
<div class="main-blog_wrapper-most-bottom-time">время чтения: <span>9</span> мин</div>
</div>
</div>
<div class="main-blog_wrapper-items-item" style="background:url('/wp-content/uploads/2025/04/320h180-52-768x432.jpg.webp');background-size:cover;background-position:center;">
<div class="main-blog_wrapper-items-item-title">Вечно голодная кошка: 8 способов решить проблему</div>
<div class="main-blog_wrapper-most-bottom">
<img src="/wp-content/uploads/2025/06/korovkina.png" class="main-blog_wrapper-most-bottom-img" alt="author">
<div class="main-blog_wrapper-most-bottom-time">время чтения: <span>9</span> мин</div>
</div>
</div>
<div class="main-blog_wrapper-items-item" style="background:url('/wp-content/uploads/2025/04/320h180-52-768x432.jpg.webp');background-size:cover;background-position:center;">
<div class="main-blog_wrapper-items-item-title">Вечно голодная кошка: 8 способов решить проблему</div>
<div class="main-blog_wrapper-most-bottom">
<img src="/wp-content/uploads/2025/06/korovkina.png" class="main-blog_wrapper-most-bottom-img" alt="author">
<div class="main-blog_wrapper-most-bottom-time">время чтения: <span>9</span> мин</div>
</div>
</div>
</div>
</div>
</p>
</section>
Write Preview
Loading…
Cancel
Save