Merge pull request #13 from ViktorSvertoka/user-page

Feat(jsx) Added new functionality

src/pages/UserPage/UserPage.jsx

@@ -0,0 +1,25 @@
+import { Container, Title, Avatar } from "./UserPage.styled";
+
+const UserPage = () => {
+    return (
+      <Container>
+
+        <Title>Profile Settings</Title>
+      <div style={{
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      flexDirection: 'column',
+      marginTop: '40px',
+    }}>
+          <Avatar><svg fill="var(--normal-color)" width="62" height="62"> <use href="../../../src/images/sprite.svg#icon-user"></use> </svg></Avatar>
+          <svg style={{ position: 'relative', top: '-13' }} width="24" height="24"> <use href="../../../src/images/sprite.svg#icon-add-avatar"></use> </svg>
+          <p style={{color: '#EFEDE8'}}>Anna Rybachok</p>
+        <p style={{color: 'var(--normal-color)'}}>User</p>
+        </div>
+
+          </Container>
+  )
+}
+
+export default UserPage;

src/pages/UserPage/UserPage.styled.jsx

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+/* background-color: #040404; */
+`;
+
+export const Title = styled.h2`
+color: #EFEDE8;
+font-family: RobotoBold;
+font-size: 24px;
+line-height: 28px;
+margin-left: 20px;
+margin-top: 110px;
+`;
+
+export const Avatar = styled.div`
+width: 90px;
+height: 90px;
+border-radius: 100px;
+border: 1px solid #E6533C;
+display: flex;
+justify-content: center;
+align-items: center;
+`;
+
+