stepancar-web-programming · stepancar · Mar 3, 2024 · Feb 26, 2024 · Feb 28, 2024 · Feb 28, 2024
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -0,0 +1,20 @@
+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
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -0,0 +1,3 @@
+{
+    "extends": ["stylelint-config-standard"]
+}
diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+[Ссылка на сайт](http://kolbaser.ru/)
diff --git a/content.css b/content.css
@@ -0,0 +1,189 @@
+* {
+  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: absolute;
+  bottom: 20px;
+  left: 50%;
+  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;
+  }
+
+  video {
+    width: 100%;
+  }
+}
diff --git a/content.html b/content.html
@@ -0,0 +1,56 @@
+<!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">
+        <button id="prev-slide" class="slide-button material-symbols-rounded">
+          chevron_left
+        </button>
+        <ul class="image-list">
+          <img class="image-item" src="res/1.jpg" alt="img-1" />
+          <img class="image-item" src="res/2.jpg" alt="img-2" />
+          <img class="image-item" src="res/3.jpg" alt="img-3" />
+          <img class="image-item" src="res/4.jpg" alt="img-4" />
+          <img class="image-item" src="res/5.jpg" alt="img-5" />
+          <img class="image-item" src="res/6.jpg" alt="img-6" />
+          <img class="image-item" src="res/7.jpg" alt="img-7" />
+          <img class="image-item" src="res/8.jpg" alt="img-8" />
+          <img class="image-item" src="res/9.jpg" alt="img-9" />
+          <img class="image-item" src="res/10.jpg" alt="img-10" />
+        </ul>
+        <button id="next-slide" class="slide-button material-symbols-rounded">
+          chevron_right
+        </button>
+      </div>
+      <div class="slider-scrollbar">
+        <div class="scrollbar-track">
+          <div class="scrollbar-thumb"></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>
diff --git a/index.html b/index.html
@@ -0,0 +1,45 @@
+<!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-link" href="https://t.me/cumsayhello">телеграм.</a>
+          </p>
+
+          <p class="hero-description">
+            Я очень люблю котиков, поэтому
+            <a class="hero-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>
diff --git a/package.json b/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "visit",
+  "version": "1.0.0",
+  "description": "[Ссылка на сайт](http://kolbaser.ru/)",
+  "main": "script.js",
+  "scripts": {
+    "lint:css": "stylelint --fix --ignore-path .gitignore *.css"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "stylelint": "^16.2.1",
+    "stylelint-config-standard": "^36.0.0"
+  }
+}
diff --git a/res/1.jpg b/res/1.jpg
diff --git a/res/10.jpg b/res/10.jpg
diff --git a/res/2.jpg b/res/2.jpg
diff --git a/res/3.jpg b/res/3.jpg
diff --git a/res/4.jpg b/res/4.jpg
diff --git a/res/5.jpg b/res/5.jpg
diff --git a/res/6.jpg b/res/6.jpg
diff --git a/res/7.jpg b/res/7.jpg
diff --git a/res/8.jpg b/res/8.jpg
diff --git a/res/9.jpg b/res/9.jpg
diff --git a/res/down.png b/res/down.png
diff --git a/res/home.png b/res/home.png
diff --git a/res/me.png b/res/me.png
diff --git a/res/post.jpg b/res/post.jpg
diff --git a/res/video.mp4 b/res/video.mp4
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		[Ссылка на сайт](http://kolbaser.ru/)