diff --git a/README.md b/README.md deleted file mode 100644 index 8a66e2b..0000000 --- a/README.md +++ /dev/null @@ -1 +0,0 @@ -[Ссылка на сайт](http://kolbaser.ru/) diff --git a/content.css b/content.css deleted file mode 100644 index 687440b..0000000 --- a/content.css +++ /dev/null @@ -1,173 +0,0 @@ -* { - 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; - left: 0; - right: 0; - top: -10px; - bottom: -10px; -} - -.return-btn { - position: fixed; - top: 20px; - left: 20px; - z-index: 1000; -} - -.return-btn img { - width: 50px; - height: auto; - border: none; -} - -#scrollButton { - position: absolute; - bottom: 20px; - left: 50%; - transform: translateX(-50%); - background-color: transparent; - border: none; - cursor: pointer; -} - -#scrollButton 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 (max-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 deleted file mode 100644 index 18d667a..0000000 --- a/content.html +++ /dev/null @@ -1,56 +0,0 @@ - - - - - - Котики!!! - - - - - - -
- - Вернуться на главную - -
- - - -
-
-
-
-
-
- -
- -
-
- - diff --git a/index.html b/index.html deleted file mode 100644 index d66f3c1..0000000 --- a/index.html +++ /dev/null @@ -1,45 +0,0 @@ - - - - - - Про меня - - - - - - - - - - -
-
-
-

Артем

-

- Привет, я учусь в ИТМО. Можете написать мне в - телеграм... -

- -

- А еще я очень люблю котиков, поэтому - тут - вы можете посмотреть видео и полистать фото c ними... -

-
- -
- Это я -
-
-
- - diff --git a/res/1.jpg b/res/1.jpg deleted file mode 100644 index 4253de7..0000000 Binary files a/res/1.jpg and /dev/null differ diff --git a/res/10.jpg b/res/10.jpg deleted file mode 100644 index 87e126a..0000000 Binary files a/res/10.jpg and /dev/null differ diff --git a/res/2.jpg b/res/2.jpg deleted file mode 100644 index c4e6d98..0000000 Binary files a/res/2.jpg and /dev/null differ diff --git a/res/3.jpg b/res/3.jpg deleted file mode 100644 index e34b380..0000000 Binary files a/res/3.jpg and /dev/null differ diff --git a/res/4.jpg b/res/4.jpg deleted file mode 100644 index fbbaaff..0000000 Binary files a/res/4.jpg and /dev/null differ diff --git a/res/5.jpg b/res/5.jpg deleted file mode 100644 index 6537058..0000000 Binary files a/res/5.jpg and /dev/null differ diff --git a/res/6.jpg b/res/6.jpg deleted file mode 100644 index 05a3282..0000000 Binary files a/res/6.jpg and /dev/null differ diff --git a/res/7.jpg b/res/7.jpg deleted file mode 100644 index 7cacda4..0000000 Binary files a/res/7.jpg and /dev/null differ diff --git a/res/8.jpg b/res/8.jpg deleted file mode 100644 index e34d500..0000000 Binary files a/res/8.jpg and /dev/null differ diff --git a/res/9.jpg b/res/9.jpg deleted file mode 100644 index aecc770..0000000 Binary files a/res/9.jpg and /dev/null differ diff --git a/res/down.png b/res/down.png deleted file mode 100644 index 62770a0..0000000 Binary files a/res/down.png and /dev/null differ diff --git a/res/home.png b/res/home.png deleted file mode 100644 index 37a5efd..0000000 Binary files a/res/home.png and /dev/null differ diff --git a/res/me.png b/res/me.png deleted file mode 100644 index 8182511..0000000 Binary files a/res/me.png and /dev/null differ diff --git a/res/post.jpg b/res/post.jpg deleted file mode 100644 index 9f5f565..0000000 Binary files a/res/post.jpg and /dev/null differ diff --git a/res/video.mp4 b/res/video.mp4 deleted file mode 100644 index 966f1b9..0000000 Binary files a/res/video.mp4 and /dev/null differ diff --git a/script.js b/script.js deleted file mode 100644 index 099a864..0000000 --- a/script.js +++ /dev/null @@ -1,76 +0,0 @@ -const initSlider = () => { - const imageList = document.querySelector(".slider-wrapper .image-list"); - const slideButtons = document.querySelectorAll( - ".slider-wrapper .slide-button" - ); - const sliderScrollbar = document.querySelector( - ".container .slider-scrollbar" - ); - const scrollbarThumb = sliderScrollbar.querySelector(".scrollbar-thumb"); - const maxScrollLeft = imageList.scrollWidth - imageList.clientWidth; - - scrollbarThumb.addEventListener("mousedown", (e) => { - const startX = e.clientX; - const thumbPosition = scrollbarThumb.offsetLeft; - const maxThumbPosition = - sliderScrollbar.getBoundingClientRect().width - - scrollbarThumb.offsetWidth; - - const handleMouseMove = (e) => { - const deltaX = e.clientX - startX; - const newThumbPosition = thumbPosition + deltaX; - const boundedPosition = Math.max( - 0, - Math.min(maxThumbPosition, newThumbPosition) - ); - const scrollPosition = - (boundedPosition / maxThumbPosition) * maxScrollLeft; - - scrollbarThumb.style.left = `${boundedPosition}px`; - imageList.scrollLeft = scrollPosition; - }; - const handleMouseUp = () => { - document.removeEventListener("mousemove", handleMouseMove); - document.removeEventListener("mouseup", handleMouseUp); - }; - document.addEventListener("mousemove", handleMouseMove); - document.addEventListener("mouseup", handleMouseUp); - }); - - slideButtons.forEach((button) => { - button.addEventListener("click", () => { - const direction = button.id === "prev-slide" ? -1 : 1; - const scrollAmount = imageList.clientWidth * direction; - imageList.scrollBy({ left: scrollAmount, behavior: "smooth" }); - }); - }); - - const handleSlideButtons = () => { - slideButtons[0].style.display = imageList.scrollLeft <= 0 ? "none" : "flex"; - slideButtons[1].style.display = - imageList.scrollLeft >= maxScrollLeft ? "none" : "flex"; - }; - - const updateScrollThumbPosition = () => { - const scrollPosition = imageList.scrollLeft; - const thumbPosition = - (scrollPosition / maxScrollLeft) * - (sliderScrollbar.clientWidth - scrollbarThumb.offsetWidth); - scrollbarThumb.style.left = `${thumbPosition}px`; - }; - - imageList.addEventListener("scroll", () => { - updateScrollThumbPosition(); - handleSlideButtons(); - }); -}; - -function scrollToBottom() { - window.scrollTo({ - top: document.body.scrollHeight, - behavior: "smooth", - }); -} - -window.addEventListener("resize", initSlider); -window.addEventListener("load", initSlider); diff --git a/style.css b/style.css deleted file mode 100644 index b542bb1..0000000 --- a/style.css +++ /dev/null @@ -1,223 +0,0 @@ -*, -::before, -::after { - box-sizing: border-box; -} - -body { - margin: 0; - font-family: "Montserrat", sans-serif; -} - -img { - width: 100%; - height: 100%; -} - -h1, -h2, -h3 { - margin: 0; -} - -.header { - width: 100%; - padding: 15px 0; - - display: flex; - justify-content: center; - align-items: center; - - font-size: 24px; - font-weight: 300; - color: gray; -} - -.hero { - min-height: 100vh; - display: flex; - justify-content: center; - align-items: center; -} - -.container { - max-width: 1230px; - width: 100%; - margin: 0 auto; - padding: 0 15px; -} - -.hero__container { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); - grid-gap: 20px; -} - -.hero__about { - display: flex; - flex-direction: column; - justify-content: center; -} - -.hero__title { - font-size: 48px; - line-height: 1.1; - - margin-bottom: 20px; -} - -.hero__prof { - color: #4facfe; - white-space: nowrap; -} - -.hero__subtitle { - font-size: 32px; - font-weight: 400; -} - -.hero__links { - display: flex; -} - -.hero__link { - margin-top: 50px; - color: #000; -} - -.hero__link:hover { - color: #4facfe; -} - -.hero__box { - max-width: 500px; - justify-self: center; - overflow: hidden; - border: 10px solid #fff; - - background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%); - - animation: ava-animate 5s infinite alternate; - box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.5); -} - -.hero__box-img { - animation: ava-bg 3s infinite alternate; -} - -.slider { - max-width: 90%; - position: relative; - margin: auto; - height: 300px; -} - -.slider .item img { - object-fit: cover; - width: 100%; - height: 300px; -} - -.slider .previous, -.slider .next { - cursor: pointer; - position: absolute; - top: 50%; - width: auto; - margin-top: -22px; - padding: 16px; - color: white; - font-weight: bold; - font-size: 16px; - transition: 0.6s ease; - border-radius: 0 3px 3px 0; -} -.slider .next { - right: 0; - border-radius: 3px 0 0 3px; -} - -.slider .previous:hover, -.slider .next:hover { - background-color: rgba(0, 0, 0, 0.2); -} - -/* Анимация слайдов: */ -.slider .item { - animation-name: fade; - animation-duration: 1.5s; -} - -@keyframes fade { - from { - opacity: 0.4; - } - to { - opacity: 1; - } -} - -@media screen and (max-width: 978px) { - .hero { - padding-top: 30px; - } - - .hero__container { - grid-row-gap: 20px; - } - - .hero__title { - font-size: 28px; - margin-bottom: 10px; - } - - .hero__subtitle { - font-size: 22px; - font-weight: 400; - } - - .hero__description { - font-size: 14px; - } - - .hero__about { - text-align: center; - } - - .hero__links { - justify-content: center; - } - - .hero__box { - max-width: 350px; - justify-self: center; - } -} - -@keyframes ava-animate { - 0% { - border-radius: 62% 38% 72% 28% / 67% 32% 68% 33%; - } - - 40% { - border-radius: 37% 63% 53% 47% / 67% 32% 68% 33%; - } - - 60% { - border-radius: 23% 77% 39% 61% / 78% 54% 46% 22%; - } - - 100% { - border-radius: 18% 82% 24% 76% / 43% 54% 46% 57%; - } -} - -@keyframes ava-bg { - from { - backdrop-filter: hue-rotate(0); - } - - to { - backdrop-filter: hue-rotate(90deg); - } -}