after Ksenia

kodorvan/perm/system/public/js/pages/main.js

@@ -10,6 +10,7 @@ import("../modules/hotline.mjs").then((module) => {
 	instance.alive = true;
 	instance.wheel = false;
 	instance.delta = 3;
+	instance.step = -0.5;
 
 	// Starting the hotline instance
 	instance.start();

kodorvan/perm/system/public/themes/test/css/blocks/hotline.css

@@ -1,37 +1,65 @@
 section#projects {
-  > h2.title {
+	>h2.title {
 		font-size: 2.4rem;
 		font-family: "Bahnschrift";
 		margin: 0.1em 0 0.2em 0;
 	}
 
 	div.hotline {
-    max-width: 100vw;
+		width: 100vw;
-    max-height: 360px;
+		height: 250px;
-    height: max(16vw, 16vh);
 		display: inline-flex;
 		gap: 15px;
 
 		> :is(article, div) {
 			position: relative;
-      display: flex;
+			min-width: 220px;
-      justify-content: center;
+			max-width: 220px;
-      align-items: center;
+			width: 220px;
-      text-align: centr;
-
-      min-width: 200px;
 			height: 100%;
-      border-radius: 1.125rem;
 			overflow: hidden;
-      background: rgb(0, 0, 0);
+			border-radius: 0.75rem;
 
-      p {
+			h4 {
+				position: absolute;
+				z-index: 50;
+				justify-self: center;
+				bottom: 0.4rem;
+				margin: unset;
+				padding: 0.4rem 1rem 0.3rem;
 				font-family: "Bahnschrift";
-        font-size: 1.8rem;
+				font-size: 1.2rem;
-        font-weight: bold;
+				font-weight: 900;
-        color: #ffffff;
+				color: #fff;
-        text-shadow: 5px 5px 2px rgba(14, 165, 2335, 0.7);
+				text-shadow: 2px 2px 3px #000;
-        text-align: center;
+			}
+
+			img.background {
+				position: absolute;
+				top: 0;
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
+			}
+
+			&:is(.pechatalka) {
+				>img.background {
+					filter: blur(1.5px) brightness(0.8);
+				}
+			}
+
+			&:is(.understyle) {
+				>img.background {
+					object-position: bottom;
+					filter: blur(1px) brightness(0.8);
+				}
+			}
+
+			&:is(.surikov) {
+				>img.background {
+					object-position: bottom;
+					filter: blur(0.4px) brightness(0.8);
+				}
 			}
 		}
 	}

kodorvan/perm/system/public/themes/test/css/header.css

@@ -20,6 +20,7 @@ header {
   }
 
   > a#logotype {
+		margin-top: -0.4rem;
     display: flex;
     flex-direction: column;
     font-size: 1.1rem;

kodorvan/perm/system/views/themes/test/main/blocks/projects.html

@@ -1,48 +1,48 @@
 <section id="projects" class="container unselectable">
-
+	<div id="wrap" class="hotline unselectable">
-	<h2 class="title">Проекты</h2>
+		<article class="pechatalka">
-	<div id="wrap" class="hotline unselectable" data-hotline="true" data-hotline-step="-3" data-hotline-magnetic="center"
+			<h4>ПЕЧАТАЛКА</h4>
-		data-hotline-interval="10">
+			<img class="background" src="/themes/test/images/projects/pechatalka.gif" alt="pechatalka"/>
-
-		<article>
-			<p>ZHARKO</p>
-		</article>
-		<article>
-			<p>STCS</p>
-		</article>
-		<article>
-			<p>BRAINROT</p>
 		</article>
 
-		<article>
+		<article class="understyle">
-			<p>ZHARKO</p>
+			<h4>under.style</h4>
-		</article>
+			<img class="background" src="/themes/test/images/projects/understyle.png" alt="under.style"/>
-		<article>
-			<p>STCS</p>
-		</article>
-		<article>
-			<p>BRAINROT</p>
 		</article>
 
-		<article>
+		<article class="surikov">
-			<p>ZHARKO</p>
+			<h4>Музей-библиотека имени Сурикова</h4>
-		</article>
+			<img class="background" src="/themes/test/images/projects/surikov.png" alt="surikov"/>
-		<article>
-			<p>STCS</p>
-		</article>
-		<article>
-			<p>BRAINROT</p>
 		</article>
 
-		<article>
+		<article class="pechatalka">
-			<p>ZHARKO</p>
+			<h4>ПЕЧАТАЛКА</h4>
-		</article>
+			<img class="background" src="/themes/test/images/projects/pechatalka.gif" alt="pechatalka"/>
-		<article>
-			<p>STCS</p>
-		</article>
-		<article>
-			<p>BRAINROT</p>
 		</article>
 
+		<article class="understyle">
+			<h4>under.style</h4>
+			<img class="background" src="/themes/test/images/projects/understyle.png" alt="under.style"/>
+		</article>
+
+		<article class="surikov">
+			<h4>Музей-библиотека имени Сурикова</h4>
+			<img class="background" src="/themes/test/images/projects/surikov.png" alt="surikov"/>
+		</article>
+
+		<article class="pechatalka">
+			<h4>ПЕЧАТАЛКА</h4>
+			<img class="background" src="/themes/test/images/projects/pechatalka.gif" alt="pechatalka"/>
+		</article>
+
+		<article class="understyle">
+			<h4>under.style</h4>
+			<img class="background" src="/themes/test/images/projects/understyle.png" alt="under.style"/>
+		</article>
+
+		<article class="surikov">
+			<h4>Музей-библиотека имени Сурикова</h4>
+			<img class="background" src="/themes/test/images/projects/surikov.png" alt="surikov"/>
+		</article>
 	</div>
 </section>

kodorvan/perm/system/views/themes/test/main/blocks/statistics.html

@@ -0,0 +1,6 @@
+<section class="statistic">
+  <div class="accordion">
+
+
+  </div>
+</section>

kodorvan/perm/system/views/themes/test/main/index.html

@@ -11,6 +11,7 @@
 
 {% block main %}
 	{% include '/themes/test/main/blocks/introdution.html' %}
+	{% include '/themes/test/main/blocks/statistics.html' %}
 	{% include '/themes/test/main/blocks/projects.html' %}
 	{% include '/themes/test/main/blocks/service.html' %}
 	{% include '/themes/test/main/blocks/advantages.html' %}