diff --git a/wp-content/themes/cosmopet/static/css/new-front-page.css b/wp-content/themes/cosmopet/static/css/new-front-page.css index a3efd09..9bf071a 100644 --- a/wp-content/themes/cosmopet/static/css/new-front-page.css +++ b/wp-content/themes/cosmopet/static/css/new-front-page.css @@ -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; +} + + + + diff --git a/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-blog.twig b/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-blog.twig index e69de29..7665968 100644 --- a/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-blog.twig +++ b/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-blog.twig @@ -0,0 +1,62 @@ +
+
+
+

Блог

+
+ Все статьи +
+

О здоровье домашних животных, биотехнологиях и экологии

+ +
+
+ most-read +
Как рассчитать дневную порцию корма для кошки?
+

Составили гид по дозировкам для сторонников индивидуального подхода. Если вы с утра насыплете полную миску корма

+
+ author +
время чтения: 9 мин
+
+
+
+
+
Краткая история кормов: от хлебных корок до лечебных рационов
+
+ author +
время чтения: 9 мин
+
+
+
+
Краткая история кормов: от хлебных корок до лечебных рационов
+
+ author +
время чтения: 9 мин
+
+
+
+
Вечно голодная кошка: 8 способов решить проблему
+
+ author +
время чтения: 9 мин
+
+
+
+
Вечно голодная кошка: 8 способов решить проблему
+
+ author +
время чтения: 9 мин
+
+
+
+
+

+
\ No newline at end of file