Merge branch '11-hall_of_fame' into 11-hall_of_fame_social_preview_Ig…

…orFromUA
MastersAcademy · Mar 18, 2024 · 2fa502e · 2fa502e
2 parents a1c67f2 + af0006b
commit 2fa502e
Show file tree

Hide file tree

Showing 11 changed files with 12,615 additions and 40 deletions.
diff --git a/docs/SerhiiNSN/index.html b/docs/SerhiiNSN/index.html
@@ -80,13 +80,13 @@ <h1 class="tittle">About me</h1>
             <div class="footer__container">
                 <div class="footer__social">
                     <a href="https://www.facebook.com/profile.php?id=100011383900387&locale=uk_UA">
-                        <img src="img/Footer/face.svg" alt="facebook">
+                        <img src="./img/Footer/face.svg" alt="facebook">
                     </a>
                     <a href="https://www.linkedin.com/in/%D1%81%D0%B5%D1%80%D0%B3%D1%96%D0%B9-%D0%BD%D0%BE%D1%81%D0%BA%D0%BE%D0%B2-54148928a/">
-                        <img src="img/Footer/linkdn.svg" alt="linkedin">
+                        <img src="./img/Footer/linkdn.svg" alt="linkedin">
                     </a>
                     <a href="https://www.instagram.com/yasnyy.sirius/">
-                        <img src="img/Footer/inst.svg" alt="instagram">
+                        <img src="./img/Footer/inst.svg" alt="instagram">
                     </a>
                 </div>
                 <div class="footer__text">

diff --git a/docs/index.html b/docs/index.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
     <meta charset="UTF-8">
     <meta name="viewport"
@@ -27,14 +26,14 @@
         content="student projects created on the course «Front-End for Beginners 2023» by Master of Academy">
     <meta name="description"
         content="student projects created on the course «Front-End for Beginners 2023» by Master of Academy">
-    <link rel="stylesheet" href="./src/styles/styles.css">
+    <link rel="stylesheet" href="./src/styles/card.css">
     <link rel="stylesheet" href="./src/styles/style.css">
     <link rel="icon" type="image/x-icon" href="./src/favicon.png">
     <title>Hall of Fame</title>
 </head>
-
 <body>
     <div class="wrapper">
+        <div id="top" data-lift_point></div>
         <header class="head">
             <nav class="header__menu">
                 <a href="https://www.mastersacademy.education/frontend-for-beginners-it" class="header__logo">
@@ -108,8 +107,7 @@ <h2 class="card__title" data-template-project-name>Project Pokemon</h2>
                             </p>
                         </div>
                     </div>
-                    <div class="card__social">
-                    </div>
+                    <div class="card__social"></div>
                     <form class="card__btn-form" action="#" target="./blank" data-template-form>
                         <button type="submit" class="card__btn-button">visit site</button>
                     </form>
@@ -123,32 +121,22 @@ <h2 class="card__title" data-template-project-name>Project Pokemon</h2>
                     <div class="social__img-instagram social__img">
                     </div>
                 </a>
-            </template>
-            <template>
                 <a href="#" class="social__link">
                     <div class="social__img-facebook social__img">
                     </div>
                 </a>
-            </template>
-            <template>
                 <a href="#" class="social__link">
                     <div class="social__img-linkedIn social__img">
                     </div>
                 </a>
-            </template>
-            <template>
                 <a href="#" data-telegram class="social__link">
                     <div class="social__img-telegram social__img">
                     </div>
                 </a>
-            </template>
-            <template>
                 <a href="#" class="social__link">
                     <div class="social__img-gmail social__img">
                     </div>
                 </a>
-            </template>
-            <template>
                 <a href="#" class="social__link">
                     <div class="social__img-github social__img">
                     </div>
@@ -185,5 +173,4 @@ <h2 class="footer__title">Made with 💗 on course 'Frontend for beginners' from
     <script src="./src/js/header.js"></script>
     <script type="module" src="./src/js/cards.js"></script>
 </body>
-
-</html>
+</html>
diff --git a/docs/kostiantyn.nosatskyi/PokemonProject/index.html b/docs/kostiantyn.nosatskyi/PokemonProject/index.html
@@ -57,9 +57,9 @@ <h1 class="title__txt">About me</h1>
             <footer>
                 <div class="footer__container">
                     <div class="footer__social-img">
-                        <img class="social-img" src="img/facebook.png" alt="facebook">
-                        <img class="social-img" src="img/linkedin.png" alt="linkedin">
-                        <img class="social-img" src="img/instagram.png" alt="instagram">
+                        <img class="social-img" src="./img/facebook.png" alt="facebook">
+                        <img class="social-img" src="./img/linkedin.png" alt="linkedin">
+                        <img class="social-img" src="./img/instagram.png" alt="instagram">
                     </div>
                     <div class="footer__txt">
                         <span class="footer__main-txt">Made with

diff --git a/docs/src/images/sprite.svg b/docs/src/images/sprite.svg
diff --git a/docs/src/images/up-arrow-svgrepo-com.svg b/docs/src/images/up-arrow-svgrepo-com.svg
diff --git a/docs/src/js/cards.js b/docs/src/js/cards.js
@@ -7,15 +7,26 @@ const cardTemplateName = cardTemplate.content.querySelector('[data-template-name
 const cardTemplateProjectName = cardTemplate.content.querySelector('[data-template-project-name]');
 const cardTemplateImage = cardTemplate.content.querySelector('[data-template-image]');
 const cardTemplateForm = cardTemplate.content.querySelector('[data-template-form]');
-const cardSocialTelegram = cardTemplate.content.querySelector('[data-telegram]');
+// const cardSocialTelegramLink = cardTemplate.content.querySelector('[data-telegram-link]');
+// const cardSocialGithubLink = cardTemplate.content.querySelector('[data-github-link]');
+// const cardSocialGmailLink = cardTemplate.content.querySelector('[data-gmail-link]');
+
+// function addSocialLinks(link, object, field) {
+//     if (field in object.links) {
+//         link.href = object.links[field];
+//     } else {
+//         link.removeAttribute('href');
+//     }
+// }
 
 developers.forEach((element) => {
     cardTemplateName.innerText = `${element.firstName} ${element.lastName}`;
     cardTemplateForm.action = element.action;
     cardTemplateProjectName.innerText = element.project;
     cardTemplateImage.src = element.image;
-    cardSocialTelegram && (cardSocialTelegram.href = element.telegram);
+    // addSocialLinks(cardSocialTelegramLink, element, 'telegram');
+    // addSocialLinks(cardSocialGithubLink, element, 'github');
+    // addSocialLinks(cardSocialGmailLink, element, 'gmail');
     const cardEl = cardTemplate.content.cloneNode(true);
-
     cardContainer.append(cardEl);
 });
diff --git a/docs/src/js/developers.js b/docs/src/js/developers.js
@@ -4,84 +4,183 @@ export const developers = [
         lastName: 'Sharova',
         action: './rogerosha/index.html',
         project: 'Project Pokemons',
-        image: './src/img/title_pokemon.png',
+        image: 'src/img/title_pokemon.png',
+        links: {
+            telegram: 'https://www.t.me/rogerosha',
+            github: 'https://www.github.com/rogerosha',
+        },
     },
     {
         firstName: 'Kostiantyn',
         lastName: 'Nosatskyi',
         action: './kostiantyn.nosatskyi/PokemonProject/index.html',
         project: 'Project Pokemons',
-        image: './src/img/title_pokemon.png',
-        telegram: 'https://t.me/kostyaa_n',
+        image: 'src/img/title_pokemon.png',
+        links: {
+            telegram: 'https://t.me/kostyaa_n',
+            github: 'https://github.com/NosatskyiK',
+        },
     },
     {
         firstName: 'Max',
         lastName: 'Snischuk',
         action: './snischuk/index.html',
         project: 'Project Pokemons',
-        image: './src/img/title_pokemon.png',
+        image: 'src/img/title_pokemon.png',
+        links: {
+            telegram: 'https://t.me/max_snischuk',
+            github: 'https://github.com/snischuk',
+        },
     },
     {
         firstName: 'Rostyslav',
         lastName: 'Vyshemirskyi',
         action: './rooosss/index.html',
         project: 'Project Pokemons',
-        image: './src/img/title_pokemon.png',
+        image: 'src/img/title_pokemon.png',
+        links: {
+            telegram: 'https://t.me/Rohanskyi',
+            github: 'https://github.com/Rooosss',
+        },
     },
     {
         firstName: 'Ihor',
         lastName: 'Zapisochniy',
         action: './IgorFromUA/index.html',
         project: 'Project Games',
-        image: './src/img/games.jpg',
+        image: 'src/img/games.jpg',
+        links: {
+            github: 'https://github.com/IgorFromUA',
+            linkedIn: 'https://www.linkedin.com/in/ihor-zapisochnyi-751b9424b/',
+        },
     },
     {
         firstName: 'Artur',
         lastName: 'Kobyliatsky',
         action: './Allocene/index.html',
         project: 'Project Games',
-        image: './src/img/games.jpg',
+        image: 'src/img/games.jpg',
+        links: {
+            github: 'https://github.com/Allocene',
+            linkedIn: 'https://www.linkedin.com/in/artur-kobylatsky/',
+        },
     },
     {
         firstName: 'Serhii',
         lastName: 'Noskov',
         action: './SerhiiNSN/index.html',
         project: 'Project Games',
-        image: './src/img/games.jpg',
+        image: 'src/img/games.jpg',
+        links: {
+            telegram: 'https://t.me/sergo_sj',
+        },
     },
     {
         firstName: 'Dmytro',
         lastName: 'Shevchenko',
         action: './dmytro-shevchenko1/GamesProject/index.html',
         project: 'Project Games',
-        image: './src/img/games.jpg',
+        image: 'src/img/games.jpg',
+        links: {
+            github: 'https://github.com/dmytro-shevchenko1',
+            facebook: 'https://www.facebook.com/profile.php?id=100086849614305',
+        },
     },
     {
         firstName: 'Sviatoslav',
         lastName: 'Taranenko',
         action: './SviatoslavTaranenko/index.html',
         project: 'Project Games',
-        image: './src/img/games.jpg',
+        image: 'src/img/games.jpg',
+        links: {
+            github: 'https://github.com/SviatoslavTaranenko',
+            instagram: 'https://www.instagram.com/sviat_taranenko',
+        },
     },
     {
         firstName: 'Mariia',
         lastName: 'Demchenko',
         action: './demasha0908/index.html',
         project: 'Project Games',
-        image: './src/img/games.jpg',
+        image: 'src/img/games.jpg',
+        links: {
+            instagram: 'https://www.instagram.com/mary.demch/',
+        },
     },
     {
         firstName: 'Andrii',
         lastName: 'Morozov',
         action: './AndriiMorozov88/about.html',
         project: 'Project Games',
-        image: './src/img/games.jpg',
+        image: 'src/img/games.jpg',
+        links: {
+            telegram: 'https://t.me/slonyara8888',
+            github: 'https://github.com/AndriiMorozov88',
+        },
     },
     {
         firstName: 'Bogdan',
         lastName: 'Yatsentiuk',
         action: './Bogdandrummer/index.html',
         project: 'Project Games',
-        image: './src/img/games.jpg',
+        image: 'src/img/games.jpg',
+        links: {
+            github: 'https://github.com/Bogdandrummer',
+            linkedIn: 'https://www.linkedin.com/in/%D0%B1%D0%BE%D0%B3%D0%B4%D0%B0%D0%BD-%D1%8F%D1%86%D0%B5%D0%BD%D1%82%D1%8E%D0%BA-841247270/',
+        },
+    },
+    {
+        firstName: 'David',
+        lastName: 'Tereshchenko',
+        action: './DavidTereshchenko/index.html',
+        project: 'Project Games',
+        image: 'src/img/games.jpg',
+        links: {
+            telegram: 'https://t.me/davidka_T',
+            github: 'https://github.com/DavidTereshchenko',
+        },
+    },
+    {
+        firstName: 'Taras',
+        lastName: 'Bobov',
+        action: './LotusElize/index.html',
+        project: 'Project Games',
+        image: 'src/img/games.jpg',
+        links: {
+            github: 'https://github.com/LotusElize',
+        },
+    },
+    {
+        firstName: 'Lesia',
+        lastName: 'Turuta',
+        action: './lesiaturuta/PokemonProject/login.html',
+        project: 'Project Pokemons',
+        image: 'src/img/title_pokemon.png',
+        links: {
+            github: 'https://github.com/lesiaturuta',
+            facebook: 'https://www.facebook.com/lesia.turuta',
+        },
+    },
+    {
+        firstName: 'Vladyslav',
+        lastName: 'Brusentsov',
+        action: './vBrusentsov/index.html',
+        project: 'Project Games',
+        image: 'src/img/games.jpg',
+        links: {
+            telegram: 'https://t.me/Arconiel',
+            github: 'https://github.com/vBrusentsov',
+        },
+    },
+    {
+        firstName: 'Igor',
+        lastName: 'Orel',
+        action: './igor0806/GamesProject/index.html',
+        project: 'Project Games',
+        image: 'src/img/games.jpg',
+        links: {
+            github: 'https://github.com/igor0806',
+            facebook: 'https://www.facebook.com/profile.php?id=100009665057721',
+        },
     },
 ];
diff --git a/docs/src/js/header.js b/docs/src/js/header.js
@@ -1,8 +1,32 @@
 const burgerButton = document.querySelector('[data-burger]');
 const dataMenuList = document.querySelector('[data-menu__list]');
+const liftUp = document.querySelector('[data-lift_up]');
+const liftPoint = document.querySelector('[data-lift_point]');
+
 const burgerAction = () => {
     if (dataMenuList.style.display === '' || dataMenuList.style.display === 'none') {
         dataMenuList.classList.toggle('d__flex');
     }
 };
+
+const checkScroll = () => {
+    if (window.scrollY > 500 && window.innerWidth < 602) {
+        liftUp.style.right = '7';
+    } else {
+        liftUp.style.right = '-50';
+    }
+};
+const arrowAppearance = () => {
+    if (window.innerWidth < 602 || window.innerWidth > 602) {
+        checkScroll();
+    }
+};
+
+const handleButtonClick = () => {
+    liftPoint.scrollIntoView({ block: 'center', behavior: 'smooth' });
+};
+
+liftUp.addEventListener('click', handleButtonClick);
+window.addEventListener('resize', arrowAppearance);
+window.addEventListener('scroll', arrowAppearance);
 burgerButton.addEventListener('click', burgerAction);
diff --git a/docs/src/styles/styles.css → docs/src/styles/card.css b/docs/src/styles/styles.css → docs/src/styles/card.css