HW markup done

src/App.js

@@ -1,20 +1,117 @@
-import './App.scss'
-import logo from './hand.png'
-import React, {useState} from 'react';
+import React from 'react';
+import './App.scss';
 
-function App() {
-    const [move, setMove] = useState("app__img");
+let arrStories = [
+    {
+        name: 'intellectfox',
+        src: 'intellectfox_s3eiyu.jpg',
+    },
+    {
+        name: 'zuck',
+        src: 'zuck_ofva76.jpg'
+    },
+    {
+        name: 'elon mask',
+        src: 'elon.mask_cwjn5g.jpg'
+    },
+    {
+        name: 'tim cook',
+        src: 'tim_cook_ot6eos.jpg'
+    },
+    {
+        name: 'bezos_we8ahw.jpg',
+        src: 'bezos_we8ahw.jpg',
+    }
+];
 
-    const handleClick = () => {
-        setMove(move === "app__img_move" ? "app__img" : "app__img_move")
+const arrHeader = [
+    {
+        src: 'foxgram_logo_te2l4m.svg',
+    },
+    {
+        src: 'notifications_m1be8e.svg'
+    },
+    {
+        src: 'direct_zvkzsg.svg'
+    },
+    {
+        src: 'profile_xr60wq.svg'
     }
+];
 
-    return (
-        <div className="app">
-            <div className="app__header" onClick={handleClick}>
-                Hello world!
-                <img className={move} src={logo}/>
+const Header = () =>
+    <header className="header">
+        <div className="header__container">
+            {arrHeader.map(elem =>
+                <div key={elem.src} className="header__icons">
+                    <img
+                        src={`https://res.cloudinary.com/intellectfox/image/upload/v1629752944/fe/foxgram/header/${elem.src}`}/>
+                </div>
+            )}
+        </div>
+    </header>;
+
+const Stories = () =>
+    <div className="stories_contant stories">
+        {arrStories.map(elem =>
+            <div key={elem.name} className="stories__icons">
+                <img className="stories__img_gr"
+                     src={`https://res.cloudinary.com/intellectfox/image/upload/v1630263824/fe/foxgram/stories/${elem.src}`}/>
+                <div className="stories__icons_name">{elem.name}</div>
             </div>
+        )}
+    </div>;
+
+const HeaderPost = ({authorName, authorImg}) =>
+    <div className="main__headerPosts">
+        <div className="main__logoHeaderContainer">
+            <img
+                src={authorImg}/>
+        </div>
+        <div className="main__textIntellectfoxHeader">{authorName}</div>
+    </div>;
+
+
+const FooterPost = ({quantity, iconName, footerText}) =>
+    <div className="main__footerPosts">
+        <div className="main__likes">
+            <div className="logo_heart"><img
+                src="https://res.cloudinary.com/intellectfox/image/upload/v1629752958/fe/foxgram/posts/like-filled_zurlii.svg"
+                className="heart_img"/>
+                <span className="main__textPostLikes">{quantity}</span><span className="main__markLike">отметок "Нравится"</span>
+            </div>
+        </div>
+        <div className="footer_container">
+            <div className="text_intellectfox_footer">{iconName}</div>
+            <div className="footer_text">{footerText}</div>
+        </div>
+    </div>;
+
+const Post = ({src, likesCount, description, authorName, srcImgAuthor}) =>
+    <div className="main">
+        <HeaderPost authorImg={srcImgAuthor} authorName={authorName}/>
+        <div className="main__containerPosts"><img
+            src={src}/>
+        </div>
+        <FooterPost
+            quantity={likesCount}
+            iconName={authorName}
+            footerText={description}
+        />
+    </div>;
+
+function App() {
+    return (
+        <div className="App">
+            <Header/>
+            <Stories/>
+            <Post
+                srcImgAuthor={'https://res.cloudinary.com/intellectfox/image/upload/v1629752958/fe/foxgram/posts/intellectfox_jq4lbe.svg'}
+                likesCount={23}
+                authorName={'intellectfox'}
+                description={'Топ 8 ошибок начинающих Front-end разработчиков'}
+                src={"https://res.cloudinary.com/intellectfox/image/upload/v1629752958/fe/foxgram/posts/post-1_nm8jbv.jpg"}
+            />
         </div>
     );
 }

src/App.scss

@@ -1,44 +1,141 @@
-@keyframes getMove {
-  0%{
-    transform: rotate(0);
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+@mixin flex($dis, $jst,$al) {
+  display: $dis;
+  justify-content: $jst;
+  align-items: $al;
+}
+$margin: 0 auto;
+
+*{
+  box-sizing: border-box;
+  font-family: 'Roboto', sans-serif;
+}
+
+.header{
+  border: 1px solid #C4C4C4;
+  height: 100px;
+  margin-bottom: 30px;
+
+  &__container{
+    display: flex;
+    justify-content: space-between;
+    width: 640px;
+    margin: 0 auto;
   }
-  25%{
-    transform: rotate(-40deg);
+  &__icons{
+    padding: 21px 28px 16px 0;
   }
-  50%{
-    transform: rotate(30deg);
+}
+
+
+.stories{
+  border: 1px solid #C4C4C4;
+  width: 640px;
+  height: 164px;
+  padding: 30px 0 27px;
+  @include flex(flex, center, center);
+  margin: 0 auto;
+  &__icons{
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    border: 2px;
+    background:linear-gradient(45deg, #EBAF4D, #D60A66);
+    @include flex(flex, center, center);
+    position: relative;
   }
-  75%{
-    transform: rotate(-20deg);
+  &__img_gr{
+    width: 74px;
+    height: 74px;
+    border: 2px solid white;
+    background-color: white;
+    border-radius: 50%;
+    z-index: 1;
+    position: absolute;
   }
-  100%{
-    transform: rotate(0deg);
+  &__icons_name{
+    padding: 118px 0 0 0;
+    @include flex(flex, center, center);
+    width: 78px;
+    position: absolute;
+    font-size: 14px;
   }
 }
 
+.stories_contant{
+  margin-bottom: 30px;
+  justify-content: space-around;
+}
 
-.app{
-  width: 100%;
-  height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-family: Arial;
-  &__header{
+.main{
+  margin-bottom: 30px;
+
+  &__headerPosts{
+    border: 1px solid #C4C4C4;
+    width: 640px;
+    height: 60px;
+    margin: $margin;
+    display: flex;
+  }
+
+  &__logoHeaderContainer{
+    padding: 12px 16px 12px 24px;
+  }
+  &__textIntellectfoxHeader{
+    display: flex;
+    font-weight: 700;
+    justify-content: center;
+    align-items: center;
+  }
+  &__containerPosts{
+    height: 640px;
+    width: 640px;
+    border: 1px solid #C4C4C4;
+    margin: $margin;
     display: flex;
-    font-size: 40px;
   }
-  &__header:hover{
-    color: violet;
-    cursor: pointer;
+  &__footerPosts{
+    height: 113px;
+    width: 640px;
+    border: 1px solid #C4C4C4;
+    margin: $margin;
+    display: flex;
+    flex-direction: column;
+  }
+  &__likes{
+    display: flex;
   }
-  &__img{
-    height: 40px;
-    width: 40px;
+  &__textPostLikes{
+    font-weight: 700;
+    padding: 29px 0 0 0;
   }
-  &__img_move{
-    height: 40px;
-    width: 40px;
-    animation: getMove 3s;
+  &__markLike{
+    font-weight: 700;
+    padding: 29px 0 0 5px;
   }
-}
+
+}
+
+.foxgram_logo{
+  padding: 21px 243px 16px 0;
+}
+.logo_heart{
+  display: flex;
+}
+
+
+.heart_img{
+  padding: 24px 16px 16px 24px;
+}
+.footer_container{
+  display: flex;
+}
+
+.text_intellectfox_footer{
+  font-weight: 700;
+  padding: 0 16px 24px 24px;
+}
+
+.footer_text{
+  flex-direction: row;
+}

src/App.test.js

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react';
-import App from './App';
+import App from './App.js';
 
 test('renders learn react link', () => {
   render(<App />);

src/index.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './App';
+import App from './App.js';
 
 ReactDOM.render(
-    <App />,
+    <App/>,
   document.getElementById('root')
 );