init

AnnaKharatova · Apr 9, 2024 · 765751c · 765751c
commit 765751c
Show file tree

Hide file tree

Showing 16 changed files with 199 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,6 @@
+# Проект: Тестовое задание.
+
+ - Тестовое задание компании "PushKeen". Проект написан на чистом html, css и vanilla JavaScript(использование React.js было не целесообразным).
+ - Верстка адаптивная, кроссбраузерная, соответствует макету при ширине экрана 1980*1080.
+ - Используется методология БЭМ и файловая структура BEM-nested.
+ - На странице есть элемент анимированный при помощи CSS.
diff --git a/nojekyll.txt b/nojekyll.txt
diff --git a/src/blocks/floating-element/floating-element.css b/src/blocks/floating-element/floating-element.css
@@ -0,0 +1,31 @@
+@keyframes moveElement {
+    0% {
+        left: 10%;
+        top: 20%;
+    }
+
+    50% {
+        left: 60%;
+        top: 62%;
+    }
+
+    100% {
+        left: 10%;
+        top: 20%;
+    }
+}
+
+.floating-element {
+    position: absolute;
+    top: 57%;
+    left: 50%;
+    width: 45%;
+    height: 20%;
+    background-color: #7075F1;
+    border-radius: 210px;
+    -webkit-transform: translate(-10%, -20%) rotate(30deg);
+    -ms-transform: translate(-10%, -20%) rotate(30deg);
+    transform: translate(-10%, -20%) rotate(30deg);
+    -webkit-animation: moveElement 10s infinite;
+    animation: moveElement 10s infinite;
+}
diff --git a/src/blocks/posts/__container/posts__container.css b/src/blocks/posts/__container/posts__container.css
@@ -0,0 +1,12 @@
+.posts__container {
+    position: relative;
+    padding: 0;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 60px;
+    list-style: none;
+    background-repeat: no-repeat;
+}
diff --git a/src/blocks/posts/__item/_clicked/posts__item_clicked.css b/src/blocks/posts/__item/_clicked/posts__item_clicked.css
@@ -0,0 +1,5 @@
+.posts__item_clicked {
+    -webkit-box-shadow: 0 0 40px rgb(235, 12, 12);
+    box-shadow: 0 0 40px rgb(235, 12, 12);
+    z-index: 3;
+}
diff --git a/src/blocks/posts/__item/posts__item.css b/src/blocks/posts/__item/posts__item.css
@@ -0,0 +1,35 @@
+.posts__item {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    position: relative;
+    padding: 13px 24px;
+    z-index: 2;
+    width: 339px;
+    min-height: 234px;
+    background-color: inherit;
+    border-radius: 25px;
+    -webkit-transition: background-color .3s ease-in-out;
+    transition: background-color .3s ease-in-out;
+    -webkit-box-shadow: 0 0 40px rgba(51, 51, 51, 0.5);
+    box-shadow: 0 0 40px rgba(51, 51, 51, 0.5);
+    -webkit-backdrop-filter: blur(20px);
+    backdrop-filter: blur(20px);
+    text-shadow: none;
+}
+
+.posts__item:hover {
+    background-color: white;
+    -webkit-transform: scale(1.01);
+    transform: scale(1.01);
+    -webkit-box-shadow: 0 0 40px rgba(51, 51, 51, 0.5),
+        0px 4px 4px 0px rgba(51, 51, 51, 0.04);
+    box-shadow: 0 0 40px rgba(51, 51, 51, 0.5),
+        0px 4px 4px 0px rgba(51, 51, 51, 0.04);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+}
+
+.posts__item:hover .posts__text {
+    text-shadow: .5px 3px #ACACAC;
+}
diff --git a/src/blocks/posts/__text/posts__text.css b/src/blocks/posts/__text/posts__text.css
@@ -0,0 +1,6 @@
+.posts__text {
+    font-family: 'Inter', sans-serif;
+    font-weight: 400;
+    margin-bottom: 0;
+    font-size: 12px;
+}
diff --git a/src/blocks/posts/__title/posts__title.css b/src/blocks/posts/__title/posts__title.css
@@ -0,0 +1,11 @@
+.posts__title {
+    font-family: 'Inter', sans-serif;
+    font-weight: 400;
+    font-size: 32px;
+    margin: 0;
+    padding: 0 8px 0 2px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow-wrap: break-word;
+}
diff --git a/src/blocks/posts/posts.css b/src/blocks/posts/posts.css
@@ -0,0 +1,9 @@
+.posts {
+    max-width: 1980px;
+    min-width: 400px;
+    padding: 125px 50px;
+    background-color: #D4D4D4;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    overflow-x: hidden;
+}
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PushKeen test</title>
+    <link rel="stylesheet" href="./pages/index.css">
+    </style>
+</head>
+
+<body class="posts">
+    <ul class="posts__container" id="container"></ul>
+    <div class="floating-element" id="floating"></div>
+    <script type="module" src="./pages/index.js"></script>
+</body>
+
+</html>
diff --git a/src/pages/index.css b/src/pages/index.css
@@ -0,0 +1,9 @@
+@import url(../vendor/fonts.css);
+
+@import url(../blocks/posts/posts.css);
+@import url(../blocks/posts/__container/posts__container.css);
+@import url(../blocks/posts/__item/posts__item.css);
+@import url(../blocks/posts/__item/_clicked/posts__item_clicked.css);
+@import url(../blocks/posts/__title/posts__title.css);
+@import url(../blocks/posts/__text/posts__text.css);
+@import url(../blocks/floating-element/floating-element.css);
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -0,0 +1,35 @@
+import { postsArray } from '../scripts/constants.js'
+
+const container = document.getElementById('container');
+
+postsArray.forEach((item, index) => {
+    const element = document.createElement('li');
+    element.classList.add('posts__item');
+
+    const title = document.createElement('h2');
+    title.classList.add('posts__title');
+    title.textContent = item.title;
+
+    const text = document.createElement('p');
+    text.classList.add('posts__text');
+    text.textContent = item.text;
+
+    element.appendChild(title);
+    element.appendChild(text);
+
+    container.appendChild(element);
+});
+
+const elements = document.querySelectorAll(".posts__item");
+
+document.addEventListener('click', function () {
+    const floating = document.getElementById('floating')
+    floating.classList.add('floating-element__clicked');
+});
+
+elements.forEach(el => {
+    el.addEventListener('click', function () {
+        el.classList.add('posts__item_clicked');
+    });
+})
+
diff --git a/src/scripts/constants.js b/src/scripts/constants.js
diff --git a/src/vendor/fonts.css b/src/vendor/fonts.css
@@ -0,0 +1,8 @@
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(../vendor/fonts/Inter-Regular.woff2) format("woff2"),
+        url(../vendor/fonts/Inter-Regular.woff) format("woff");
+}
diff --git a/src/vendor/fonts/Inter-Regular.woff b/src/vendor/fonts/Inter-Regular.woff
diff --git a/src/vendor/fonts/Inter-Regular.woff2 b/src/vendor/fonts/Inter-Regular.woff2