load

Author: ArtemFedorchuk

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "git.ignoreLimitWarning": true
+}

src/components/Friends/Friend/Friend.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import f from './../Friend/Friend.module.css'
+
+const Friend = (props) => {
+    return (
+        <div>
+            <div className={f.user}>
+                <img src="http://klakson18.ru/wp-content/uploads/2016/12/06.png" alt="user"/>
+            </div>
+        </div>
+    )
+}
+
+export default Friend

src/components/Friends/Friend/Friend.module.css

@@ -0,0 +1,10 @@
+.user{
+    margin-top: 15px;
+}
+
+.user img{
+    width: 25px;
+    border-radius: 50%;
+    background: rgb(31, 159, 217);
+    padding: 5px;
+}

src/components/Friends/Friends.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import f from './../Friends/Friends.module.css'
+import { NavLink } from "react-router-dom"
+import Friend from './Friend/Friend'
+
+const Friends = (props) => {
+    return(
+        <div>
+            <div className={f.friends}>
+            <h1>***</h1>
+                <NavLink to="/Friends" activeClassName={f.activeLink}>Friends</NavLink>
+                <div className={f.friend__wraper}>
+                    <Friend />
+                    <Friend />
+                    <Friend />
+                </div>
+            </div>
+        </div>
+    )
+} 
+export default Friends

src/components/Friends/Friends.module.css

@@ -0,0 +1,34 @@
+.activeLink {
+    color: rgb(31, 159, 217);
+}
+
+/* a {
+    display: block;
+    color: white;
+    font-size: 20px;
+    font-family: serif;
+    text-transform: uppercase;
+    transition: 0.5s ease;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    letter-spacing: 4px;
+} */
+
+a:hover {
+    color: rgb(31, 159, 217);
+    font-size: 22px;
+    letter-spacing: 5px;
+}
+
+.friends{
+    margin-top: 35px;
+}
+.friends h1{
+    color: red
+}
+
+.friend__wraper{
+    display: flex;
+    justify-content: space-around;
+}
+

src/components/Header/Header.module.css

@@ -4,6 +4,6 @@
     padding: 1em;
   }
 
-  img{
+  .header img{
     width: 140px;
   }

src/components/Navbar/FriendsNav/Friend/Friend.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import f from './../Friend/Friend.module.css'
+
+const Friend = (props) => {
+    return (
+        <div>
+            <div className={f.user}>
+                <img src="http://klakson18.ru/wp-content/uploads/2016/12/06.png" alt="user"/>
+            </div>
+        </div>
+    )
+}
+
+export default Friend

src/components/Navbar/FriendsNav/Friend/Friend.module.css

@@ -0,0 +1,10 @@
+.user{
+    margin-top: 15px;
+}
+
+.user img{
+    width: 25px;
+    border-radius: 50%;
+    background: rgb(31, 159, 217);
+    padding: 5px;
+}

src/components/Navbar/FriendsNav/FriendsNav.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import f from './../FriendsNav/FriendsNav.module.css'
+import { NavLink } from "react-router-dom"
+import Friend from './Friend/Friend'
+
+const FriendsNav = (props) => {
+    return(
+        <div>
+            <div className={f.friends}>
+            <hr/>
+                <NavLink to="/Friends" activeClassName={f.activeLink}>Friends</NavLink>
+                <div className={f.friend__wraper}>
+                    <Friend />
+                    <Friend />
+                    <Friend />
+                </div>
+            </div>
+        </div>
+    )
+} 
+export default FriendsNav

src/components/Navbar/FriendsNav/FriendsNav.module.css

@@ -0,0 +1,33 @@
+.activeLink {
+    color: rgb(31, 159, 217);
+}
+
+/* a {
+    display: block;
+    color: white;
+    font-size: 20px;
+    font-family: serif;
+    text-transform: uppercase;
+    transition: 0.5s ease;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    letter-spacing: 4px;
+} */
+
+a:hover {
+    color: rgb(31, 159, 217);
+    font-size: 22px;
+    letter-spacing: 5px;
+}
+
+.friends{
+    margin-top: 35px;
+}
+.friends h1{
+    color: red
+}
+
+.friend__wraper{
+    display: flex;
+    justify-content: space-around;
+}

src/components/Navbar/Navbar.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import n from './Navbar.module.css';
 import { NavLink } from "react-router-dom";
+import FriendsNav from './FriendsNav/FriendsNav';
 
 const Navbar = () => {
     return (
@@ -20,6 +21,9 @@ const Navbar = () => {
             <div className="nav__item">
                 <NavLink to="/Setting" activeClassName={n.activeLink}>Setting</NavLink>
             </div>
+            <div className="nav__item">
+                <FriendsNav />
+            </div>
         </nav>
     );
 }