the profile page is creating. part 1

src/conteiners/events/Events.js

@@ -17,7 +17,7 @@ export class Events extends React.Component {
 
     render() {
         const { events, getAllEvents } = this.props;
-        console.log(events);
+        //console.log(events);
         return (
             <>
                 <Sidebar />

src/conteiners/profile/Profile.js

@@ -3,18 +3,78 @@ import { connect } from "react-redux";
 
 import './profile.scss';
 
+import manAvatar from '../../assets/img/man.svg';
+import womanAvatar from '../../assets/img/woman.svg';
+
 import Sidebar from '../../components/sidebar/Sidebar';
 
 export class Profile extends React.Component {
     render() {
     console.log('profileUser',JSON.parse(localStorage.user).user);
+    const user = JSON.parse(localStorage.user).user;
     
         return (
             <>
                 <Sidebar/>
-                <div className="container-wrap events">
+                <div className="container-wrap events profile">
                     <div className="caption-page">
-                        <h2>Profile page</h2>
+                        <h5>Profile page</h5>
+                        <h2>{ user.name }</h2>
+                    </div>
+                </div>
+                <div className="container-wrap">
+                    <div className="profile-card">
+                        <div className="avatar">
+                            {
+                                <img src={user.sex === "female" ? womanAvatar :manAvatar } alt="avatar" />
+                            }
+                        </div>
+                        <div className="user-info">
+                            <div className="item">
+                                <span className="cap">Name:</span>
+                                <span className="info">{user.name}</span>
+                            </div>
+                            <div className="item">
+                                <span className="cap">E-mail:</span>
+                                <span className="info">{user.email}</span>
+                            </div>
+                            <div className="item">
+                                <span className="cap">Phone:</span>
+                                <span className="info">{user.phone}</span>
+                            </div>
+                            <div className="item">
+                                <span className="cap">Gender:</span>
+                                <span className="info">{user.sex}</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="profile-tabs-wrap">
+                        <div className="tabs-main">
+                            <input id="tab1" type="radio" name="tabs" checked readOnly hidden/>
+                            <label htmlFor="tab1">History</label>
+
+                            <input id="tab2" type="radio" name="tabs" readOnly hidden/>
+                            <label htmlFor="tab2">Settings</label>
+
+                            <div className="tab-item" id="content1">
+                                <p>
+                                    Jerky jowl pork chop tongue, kielbasa shank venison. Capicola shank pig ribeye leberkas filet mignon brisket beef kevin tenderloin porchetta. Capicola fatback venison shank kielbasa, drumstick ribeye landjaeger beef kevin tail meatball pastrami prosciutto pancetta. Tail kevin spare ribs ground round ham ham hock brisket shoulder. Corned beef tri-tip leberkas flank sausage ham hock filet mignon beef ribs pancetta turkey.
+                                </p>
+                                <p>
+                                    Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin.
+                                </p>
+                            </div>
+
+                            <div className="tab-item" id="content2">
+                                <p>
+                                    Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin.
+                                </p>
+                                <p>
+                                    Jerky jowl pork chop tongue, kielbasa shank venison. Capicola shank pig ribeye leberkas filet mignon brisket beef kevin tenderloin porchetta. Capicola fatback venison shank kielbasa, drumstick ribeye landjaeger beef kevin tail meatball pastrami prosciutto pancetta. Tail kevin spare ribs ground round ham ham hock brisket shoulder. Corned beef tri-tip leberkas flank sausage ham hock filet mignon beef ribs pancetta turkey.
+                                </p>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </>

src/conteiners/profile/profile.scss

@@ -1 +1,159 @@
 @import "../../styles/variables";
+
+.profile {
+    padding-bottom: 0;
+
+    .caption-page {
+        padding: 10rem 0 5rem;
+    }
+
+    h5 {
+        color: $color-mint;
+        font-size: 1.8rem;
+        margin-bottom: 2rem;
+    }
+
+    &-card {
+        display: flex;
+        flex-wrap: wrap;
+        padding: 5rem 0 10rem;
+        //border-bottom: 1px solid $color-mint;
+
+        .avatar {
+            width: 280px;
+            margin-right: 5rem;
+    
+            img {
+                width: 100%;
+            }
+        }
+
+        .user-info {
+            padding-left: 10rem;
+            border-left: 1px solid $color-mint;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            flex-grow: 1;
+
+            .item {
+                font-size: 1.8rem;
+                color: $color-black;
+                padding: 1rem 0;
+                font-weight: $normal;
+
+                span {
+                    display: inline-block;
+                }
+
+                .cap {
+                    width: 7rem;
+                }
+
+                .info {
+                    padding-left: 2rem;
+                    font-weight: $bold
+                }
+            }
+        }
+    }
+
+    &-tabs-wrap {
+        padding-bottom: 5rem;
+        text-align: center;
+
+        .tabs-main {
+            max-width: 100%;
+    
+            .tab-item {
+                display: none;
+                padding: 2rem;
+                border: 1px solid $color-mint;
+                border-bottom: 0;
+                text-align: left;
+            }
+    
+            label {
+                display: inline-block;
+                margin: 0 0 -1px;
+                padding: 1.5rem 5rem;
+                font-weight: $semi-bold;
+                text-align: center;
+                color: $color-grey-3;
+                border: 1px solid transparent;
+                font-size: 1.6rem;
+                width: 30%;
+    
+                &:hover {
+                    color: $color-mint;
+                    cursor: pointer;
+                }
+            }
+    
+            input:checked + label {
+                color: $color-blue;
+                border: 1px solid $color-mint;
+                border-top: 3px solid $color-mint;
+                border-bottom: 1px solid $color-white;
+            }
+    
+            #tab1:checked ~ #content1,
+            #tab2:checked ~ #content2 {
+                display: block;
+            }
+        }
+    }
+
+    @media screen and (max-width: $medium) {
+        h5 {
+            text-align: center;
+        }
+    }
+
+    @media screen and (max-width: $small) {
+        &-card {
+            justify-content: center;
+
+            .avatar {
+                width: 180px;
+                margin-right: 0;
+                margin-bottom: 2rem;
+            }
+
+            .user-info {
+                width: 100%;
+                border-left: 0;
+                padding-left: 0;
+                padding-top: 3rem;
+                border-top: 1px solid $color-mint;
+
+                .item {
+                    display: flex;
+                    
+                    span {
+                        display: block;
+                    }
+
+                    .cap {
+                        text-align: right;
+                        padding-right: 0.5rem;
+                        width: 35%;
+                    }
+
+                    .info  {
+                        padding-left: 0.5rem;
+                        width: 65%;
+                    }
+                }
+            }
+        }
+        &-tabs-wrap {
+            .tabs-main {
+                label {
+                    padding: 1.5rem;
+                    width: 50%;
+                }
+            }
+        }        
+    }
+}

src/styles/variables.scss

@@ -5,6 +5,7 @@ $color-black: #000000;
 $color-grey-light: #eeeeee;
 $color-mint: #5acec2;
 $color-grey-2: #f5f5f5;
+$color-grey-3: #aabbcc;
 
 //font-weight
 $light: 300;