Blog

css/style.css

@@ -0,0 +1,485 @@
+@font-face {
+    font-family: 'Helvetica Neue Light';
+    src: url('../fonts/HelveticaNeue-Light.otf');
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Helvetica Neue Bold';
+    src: url('../fonts/HelveticaNeue-Bold.otf');
+    font-weight: normal;
+    font-style: normal;
+}
+
+* {
+  -webkit-tap-highlight-color: transparent !important;
+}
+
+.fade-in {
+  opacity: 0;
+  transition: opacity 0.8s ease, transform 0.8s ease;
+}
+
+.fade-in.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.news {
+    font-family: 'Helvetica Neue Light', sans-serif;
+    margin-top: 100px;
+    padding: 0vh 6vw;
+    min-width: 320px;
+    letter-spacing: normal;
+}
+
+.news-title,
+.footer-links,
+.footer-copyright {
+    font-family: 'Helvetica Neue Light', sans-serif;
+    letter-spacing: normal;
+}
+
+.footer-copyright {
+    margin-top: 30px;
+    margin-bottom: 50px;
+    display: flex;
+    flex-direction: column;
+    gap: 0px;
+}
+
+.footer-copyright a {
+    position: relative;
+    text-decoration: none;
+    font-size: 20px;
+    color: #000;
+    white-space: nowrap;
+    line-height: 1; 
+    display: inline-block; 
+    padding-bottom: 2px;
+}
+
+.footer-copyright a::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: -3px; 
+    width: 100%;
+    height: 1px;
+    background-color: #000; /* цвет линии */
+    transform: scaleX(0);
+    transform-origin: left;
+    transition: transform 0.3s ease-in-out;
+}
+
+.footer-copyright a:hover::after {
+    transform: scaleX(1);
+}
+
+.news-title span {
+    color: #9c9c9c;
+    letter-spacing: normal;
+}
+
+.news-cards {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+    row-gap: 50px;
+}
+
+.news-card-image {
+    width: 100%;  
+    height: auto; 
+    overflow: hidden;
+}
+
+.news-card-image img {
+    width: 100%;
+    height: auto; 
+    object-fit: cover; 
+}
+
+.news-card-data {
+    font-size: 20px;
+    padding: 0;
+    margin: 0;
+    padding-top: 10px;
+    letter-spacing: normal;
+}
+
+.news-card-title {
+    font-size: 34px;
+    padding: 20px 0px;
+    margin: 0;
+    letter-spacing: normal;
+}
+
+.news-card-desc {
+    font-size: 25px;
+    color: #707070;
+    padding: 0;
+    margin: 0;
+    letter-spacing: normal;
+}
+
+/* Адаптив страницы "news.html"*/
+
+@media (max-width: 1100px) {
+    .news-card-data {
+        font-size: 16px;
+    }
+
+    .news-card-title {
+        font-size: 24px;
+    }
+    .news-card-desc {
+        font-size: 20px;
+    }
+}
+
+@media (max-width: 700px) {
+    .news-cards {
+        grid-template-columns: 1fr;
+    }
+
+    .news-card-title {
+        padding: 15px 0px;
+    }
+}
+
+@media (max-width: 600px) {
+    .footer-copyright a {
+        font-size: 16px;
+    }
+}
+
+@media (max-width: 500px) {
+    .news-card-data {
+        font-size: 14px;
+    }
+
+    .news-card-title {
+        font-size: 20px;
+    }
+
+    .news-card-desc {
+        font-size: 16px;
+    }
+}
+
+@media (max-width: 400px) {
+    .footer-copyright a {
+        font-size: 14px;
+    }
+}
+
+/* Страница "news-info.html" */
+
+.news-info {
+    font-family: 'Helvetica Neue Light', sans-serif;
+    margin-top: 100px;
+    padding: 0vh 6vw;
+    min-width: 320px;
+    letter-spacing: normal;
+}
+
+.news-info-desc {
+    font-size: 30px;
+}
+
+.news-image {
+    width: 100%;  
+    height: auto; 
+    overflow: hidden;
+}
+
+.news-image img {
+    width: 100%;
+    height: auto; 
+    object-fit: cover; 
+}
+
+.news-content {
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+}
+
+.news-content video {
+    border-radius: 20px;
+}
+
+.news-pagination {
+    margin-top: 50px;
+    min-width: 320px;
+    gap: 20px;
+}
+
+.news-pagination-title {
+    font-family: 'Helvetica Neue Light', sans-serif !important;
+    letter-spacing: normal !important;
+}
+
+.news-info-text-container {
+    border-bottom: 1px solid #707070;
+    padding: 10px 0px;
+}
+
+.news-info-text-container:last-child {
+    border-bottom: none;
+}
+
+.news-info-text-container:first-child {
+    border-top: 1px solid #707070;
+}
+
+.news-info-text-title {
+    font-weight: bold;
+}
+
+.news-info-text-list {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.news-info-text-subtitle {
+    font-weight: bold;
+    font-size: 24px;
+}
+
+/* Адаптив страницы "news-info.html" */
+
+@media (max-width: 1100px) {
+    .news-info-desc {
+        font-size: 24px;
+    }
+
+    .news-info-text-subtitle {
+        font-size: 20px;
+    }
+
+    .news-info-data {
+        font-size: 20px;
+    }
+}
+
+@media (max-width: 1024px) {
+    .news-info {
+        margin-top: 170px;
+    }
+}
+
+@media (max-width: 767px) {
+    .news-title {
+        font-size: 40px;
+    }
+
+    .item-pagination-title {
+        font-size: 18px !important;
+    }
+
+    .item-pagination-link--next .item-pagination-icon {
+        padding-left: 15px;
+    }
+
+    .item-pagination-link .item-pagination-icon {
+        padding-right: 15px;
+    }
+}
+
+@media (max-width: 700px) {
+    .news-info {
+        margin-top: 130px;
+    }
+
+    .news-info-desc {
+        font-size: 20px;
+    }
+
+    .news-info-text-subtitle {
+        font-size: 18px;
+    }
+}
+
+.header-nav-item a {
+    font-family: 'Helvetica Neue Light', sans-serif !important;
+    font-weight: 400 !important;
+    text-transform: uppercase;
+}
+
+
+
+
+
+/* Cookie banner */
+
+.cookie-banner-wrapper {
+  position: fixed;
+  bottom: 40px;
+  left: 0;
+  width: 100%;
+  z-index: 99999;
+  pointer-events: none;
+}
+
+.cookie-container {
+    padding: 0px 80px 0px 80px;
+    max-width: 1920px;
+    margin: 0 auto;
+    position: relative;
+    width: 100%;
+}
+
+.cookie-banner {
+    pointer-events: auto;
+    max-width: 533px;
+    width: 100%;
+    background-color: #fff;
+    border: 1px solid #707070;
+
+    z-index: 2000;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 16px;
+    padding: 24px 40px;
+}
+
+.cookie-banner.hidden {
+    display: none;
+}
+
+.cookie-title {
+    font-family: 'Helvetica Neue Bold', sans-serif;
+    font-size: 32px;
+    line-height: 100%;
+    letter-spacing: -0.04em;
+}
+
+.cookie-text {
+    font-family: 'Helvetica Neue Light', sans-serif;
+    font-size: 18px;
+    line-height: 110%;
+}
+
+.cookie-text span {
+    color: #707070;
+    text-decoration: underline;
+}
+
+.cookie-text span a {
+    transition: all 0.3s ease;
+}
+
+.cookie-text span a:hover {
+    color: #707070;
+}
+
+.cookie-banner-btn {
+    background-color: #111;
+    border: none;
+    border-radius: 16px;
+    color: white;
+    cursor: pointer;
+    width: 100%;
+    font-family: 'Helvetica Neue Medium', sans-serif;
+    font-size: 18px;
+    text-transform: uppercase;
+    padding: 19px 0px;
+    transition: opacity 0.3s ease;
+}
+
+.cookie-banner-btn:hover {
+    opacity: 0.8;
+}
+
+/* Подсветка пункта Cookie */
+
+.highlighted {
+  color: #707070;    
+  transition: color 0.5s ease;
+}
+
+#cookies {
+  scroll-margin-top: 200px; 
+}
+
+/* Адаптив Cookie banner */
+
+@media (max-width: 1600px) {
+    .cookie-container {
+        padding: 0px 40px 0px 40px;
+    }
+
+    .cookie-banner {
+        left: 40px;
+    }
+}
+
+@media (max-width: 1200px) {
+    .cookie-banner {
+        padding: 10px 16px 20px 16px;
+        max-width: 375px;
+    }
+
+    .cookie-title {
+        font-size: 22px;
+    }
+
+    .cookie-text {
+        font-size: 14px;
+    }
+
+    .cookie-banner-btn {
+        padding: 16px 0px;
+    }
+}
+
+@media (max-width: 1000px) {
+    .cookie-container {
+        padding: 0px 16px 0px 16px;
+    }
+
+    .cookie-banner {
+        left: 16px;
+    }
+}
+
+@media (max-width: 500px) {
+    .cookie-banner-wrapper {
+        bottom: 0;
+        left: 0;
+        right: 0;
+        padding: 0;              
+        pointer-events: none;    
+    }
+
+    .cookie-container {
+        padding: 0;
+        width: 100%;
+        max-width: 100%;
+    }
+
+    .cookie-banner {
+        box-sizing: border-box;            
+        width: 100%;
+        max-width: 100%;
+        margin: 0;                       
+        border-radius: 0;
+        border-top-left-radius: 16px;
+        border-top-right-radius: 16px;
+        padding: 16px;                      
+        display: flex;
+        flex-direction: column;             
+        gap: 12px;                          
+        pointer-events: auto;
+    }
+
+
+
+ 
+}
+

index.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Accept-CH" content="Sec-CH-UA-Platform-Version, Sec-CH-UA-Model" /><link rel="icon" type="image/x-icon" href="https://images.squarespace-cdn.com/content/v1/6840de7c94ebb26cd81cbad2/9b89c62f-392b-4ac4-8095-c2c91690f14d/favicon.ico?format=100w"/>
+    <link rel="icon" href="images/favicon.ico">
+    <link rel="stylesheet" href="css/fonts.css">
+    <title>Blog - Навигация по сайту</title>
+    <style>
+        body {
+            background-color: black;
+            color: #fff;
+            font-weight: 300;
+        }
+
+        a {
+            text-decoration: none;
+            color: #fff;
+            font-size: clamp(18px, 5vw, 40px);
+            transition: all 0.3s ease;
+        }
+
+        a:hover {
+            color: #9c9c9c;
+        }
+
+        .container {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            text-align: left;
+        }
+
+        .container h1 {
+            font-size: clamp(32px, 8vw, 70px);
+            font-weight: 300;
+        }
+
+        .links {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            gap: 10px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="content">
+            <h1>Blog</h1>
+
+            <div class="links">
+                <a href="news.html" target="_blank">1. Новости</a>
+                <a href="news-1.html" target="_blank">2. Новость</a>
+                <a href="about.html" target="_blank">3. О проекте</a>
+                <a href="contact.html" target="_blank">4. Контакты</a>
+                <a href="404.html" target="_blank">5. 404</a>
+            </div>
+        </div>
+    </div>
+</body>
+</html>

js/script.js

@@ -0,0 +1,54 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const elements = document.querySelectorAll('.fade-in');
+
+  const observer = new IntersectionObserver((entries, obs) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        entry.target.classList.add('visible');
+        obs.unobserve(entry.target);
+      }
+    });
+  }, { threshold: 0.1 });
+
+  elements.forEach(el => observer.observe(el));
+});
+
+
+// Cookie banner
+
+const cookieBanner = document.getElementById("cookie-consent-banner");
+
+if (cookieBanner) {
+  const button = document.getElementById("cookie-consent-button");
+  const consentKey = "cookieConsent";
+  const consentValue = "accepted";
+  const cookieName = "cookie_consent";
+
+  function hasConsent() {
+    if (localStorage.getItem(consentKey) === consentValue) {
+      return true;
+    }
+    const match = document.cookie.match(
+      new RegExp("(?:^|; )" + cookieName + "=([^;]*)")
+    );
+    return match && match[1] === consentValue;
+  }
+
+  // Сохраняем согласие
+  function setConsent() {
+    localStorage.setItem(consentKey, consentValue);
+    const d = new Date();
+    d.setTime(d.getTime() + 365 * 24 * 60 * 60 * 1000);
+    document.cookie = `${cookieName}=${consentValue};expires=${d.toUTCString()};path=/`;
+  }
+
+  // Показываем баннер, если нет согласия
+  if (!hasConsent()) {
+    cookieBanner.classList.remove("hidden");
+
+    button.addEventListener("click", () => {
+      setConsent();
+      cookieBanner.classList.add("hidden");
+    });
+  }
+}