Merge pull request #7 from stepancar-web-programming/dev

Внесены изменения в ветку dev

.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": "eslint-config-standard",
+  "rules": {
+    "no-unused-vars": "off"
+  }
+}

.github/workflows/main.yml

@@ -0,0 +1,24 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - dev
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+      - name: Install dependencies
+        run: npm install
+      - name: Lint CSS
+        run: npm run lint:css
+      - name: Lint JS
+        run: npm run lint:js
+      - name: Run Prettier
+        run: npm run format

.stylelintrc.json

@@ -0,0 +1,9 @@
+{
+  "extends": ["stylelint-config-standard"],
+  "rules": {
+    "selector-pseudo-class-no-unknown": null,
+    "selector-type-no-unknown": null,
+    "property-no-unknown": null,
+    "at-rule-no-unknown": null
+  }
+}

README.md

@@ -0,0 +1 @@
+[Ссылка на сайт](http://kolbaser.ru/)

content.css

@@ -0,0 +1,194 @@
+/* stylelint-disable selector-class-pattern */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background: #f1f4fd;
+}
+
+.container {
+  max-width: 1200px;
+  width: 95%;
+}
+
+.slider-wrapper {
+  position: relative;
+}
+
+.slider-wrapper .slide-button {
+  position: absolute;
+  top: 50%;
+  outline: none;
+  border: none;
+  height: 50px;
+  width: 50px;
+  z-index: 5;
+  color: #fff;
+  display: flex;
+  cursor: pointer;
+  font-size: 2.2rem;
+  background: #000;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transform: translateY(-50%);
+}
+
+.slider-wrapper .slide-button:hover {
+  background: #404040;
+}
+
+.slider-wrapper .slide-button#prev-slide {
+  left: -25px;
+  display: none;
+}
+
+.slider-wrapper .slide-button#next-slide {
+  right: -25px;
+}
+
+.slider-wrapper .image-list {
+  display: grid;
+  grid-template-columns: repeat(10, 1fr);
+  gap: 18px;
+  font-size: 0;
+  list-style: none;
+  margin-top: 100px;
+  margin-bottom: 30px;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.slider-wrapper .image-list::-webkit-scrollbar {
+  display: none;
+}
+
+.slider-wrapper .image-list .image-item {
+  width: 325px;
+  height: 400px;
+  object-fit: cover;
+}
+
+.container .slider-scrollbar {
+  height: 24px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.slider-scrollbar .scrollbar-track {
+  background: #ccc;
+  width: 100%;
+  height: 2px;
+  display: flex;
+  align-items: center;
+  border-radius: 4px;
+  position: relative;
+}
+
+.slider-scrollbar:hover .scrollbar-track {
+  height: 4px;
+}
+
+.slider-scrollbar .scrollbar-thumb {
+  position: absolute;
+  background: #000;
+  top: 0;
+  bottom: 0;
+  width: 50%;
+  height: 100%;
+  cursor: grab;
+  border-radius: inherit;
+}
+
+.slider-scrollbar .scrollbar-thumb:active {
+  cursor: grabbing;
+  height: 8px;
+  top: -2px;
+}
+
+.slider-scrollbar .scrollbar-thumb::after {
+  content: "";
+  position: absolute;
+  inset: -10px 0;
+}
+
+.return-btn {
+  position: fixed;
+  top: 20px;
+  left: 20px;
+  z-index: 1000;
+}
+
+.return-btn img {
+  width: 50px;
+  height: auto;
+}
+
+#scroll-button {
+  position: fixed;
+  top: 30px;
+  left: 96%;
+  transform: translateX(-50%);
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+}
+
+#scroll-button img {
+  width: 50px;
+}
+
+.video-container {
+  display: flex;
+  justify-content: center;
+  margin-top: 150px;
+  margin-bottom: 70px;
+}
+
+video {
+  width: 80%;
+  max-width: 100%;
+  height: auto;
+}
+
+@media only screen and (width <= 1023px) {
+  .slider-wrapper .slide-button {
+    display: none !important;
+  }
+
+  .slider-wrapper .image-list {
+    gap: 10px;
+    margin-bottom: 15px;
+    scroll-snap-type: x mandatory;
+  }
+
+  .slider-wrapper .image-list .image-item {
+    width: 280px;
+    height: 380px;
+  }
+
+  .slider-scrollbar .scrollbar-thumb {
+    width: 20%;
+  }
+
+  .video-container {
+    margin-top: 150px;
+    margin-bottom: 70px;
+  }
+
+  #scroll-button {
+    left: 90%;
+  }
+
+  video {
+    width: 100%;
+  }
+}

content.html

@@ -0,0 +1,59 @@
+<!doctype html>
+<html lang="ru">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Котики!!!</title>
+    <link rel="shortcut icon" href="images/favicon.png" type="image/png" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0"
+    />
+    <link rel="stylesheet" href="content.css" />
+    <script src="script.js" defer></script>
+  </head>
+  <body>
+    <div class="container">
+      <a href="index.html" class="return-btn">
+        <img src="res/home.png" alt="Вернуться на главную" />
+      </a>
+      <div class="slider-wrapper" id="slider1">
+        <button id="prev-slide" class="slide-button material-symbols-rounded">
+          chevron_left
+        </button>
+        <ul class="image-list"></ul>
+        <button id="next-slide" class="slide-button material-symbols-rounded">
+          chevron_right
+        </button>
+        <div class="slider-scrollbar">
+          <div class="scrollbar-track">
+            <div class="scrollbar-thumb"></div>
+          </div>
+        </div>
+      </div>
+      <div class="slider-wrapper" id="slider2">
+        <button id="prev-slide" class="slide-button material-symbols-rounded">
+          chevron_left
+        </button>
+        <ul class="image-list"></ul>
+        <button id="next-slide" class="slide-button material-symbols-rounded">
+          chevron_right
+        </button>
+        <div class="slider-scrollbar">
+          <div class="scrollbar-track">
+            <div class="scrollbar-thumb"></div>
+          </div>
+        </div>
+      </div>
+      <button id="scroll-button" onclick="scrollToBottom()">
+        <img src="res/down.png" alt="Scroll Down" />
+      </button>
+      <div class="video-container">
+        <video controls poster="res/post.jpg">
+          <source src="res/video.mp4" type="video/mp4" />
+          Your browser does not support the video tag.
+        </video>
+      </div>
+    </div>
+  </body>
+</html>

index.html

@@ -0,0 +1,47 @@
+<!doctype html>
+<html lang="ru">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Про меня</title>
+    <link rel="shortcut icon" href="res/me.png" type="image/png" />
+
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css"
+    />
+
+    <link rel="stylesheet" href="style.css" />
+  </head>
+
+  <body>
+    <div class="hero">
+      <div class="container hero-container">
+        <div class="hero-about">
+          <h1 class="hero-title">Артем</h1>
+          <p class="hero-description">
+            Привет, я учусь в ИТМО. Можете написать мне в
+            <a class="hero-description__link" href="https://t.me/cumsayhello"
+              >телеграм.</a
+            >
+          </p>
+
+          <p class="hero-description">
+            Я очень люблю котиков, поэтому
+            <a class="hero-description__link" href="content.html">тут</a>
+            вы можете посмотреть видео и полистать фото c ними...
+          </p>
+        </div>
+
+        <div class="hero-box">
+          <img class="hero-box__img" src="res/me.png" alt="Это я" />
+        </div>
+      </div>
+    </div>
+  </body>
+</html>

package.json

@@ -0,0 +1,20 @@
+{
+  "name": "visit",
+  "version": "1.0.0",
+  "description": "[Ссылка на сайт](http://kolbaser.ru/)",
+  "main": "script.js",
+  "scripts": {
+    "lint:css": "stylelint --fix --ignore-path .gitignore *.css",
+    "lint:js": "eslint . --fix",
+    "format": "prettier --write \"**/*.html\" \"**/*.json\""
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "eslint": "^8.57.0",
+    "eslint-config-standard": "^17.1.0",
+    "prettier": "^3.2.5",
+    "stylelint": "^16.2.1",
+    "stylelint-config-standard": "^36.0.0"
+  }
+}