Add story and something

K0l4s · Sep 2, 2023 · ee1632d · ee1632d
1 parent 9f5102c
commit ee1632d
Show file tree

Hide file tree

Showing 51 changed files with 372 additions and 0 deletions.
diff --git a/image/contact_1.jpg b/image/contact_1.jpg
diff --git a/image/contact_2.jpg b/image/contact_2.jpg
diff --git a/image/contact_3.jpg b/image/contact_3.jpg
diff --git a/image/contact_4.jpg b/image/contact_4.jpg
diff --git a/image/contact_5.jpg b/image/contact_5.jpg
diff --git a/image/down_arrow.png b/image/down_arrow.png
diff --git a/image/friend.png b/image/friend.png
diff --git a/image/gift.png b/image/gift.png
diff --git a/image/group.png b/image/group.png
diff --git a/image/haha.png b/image/haha.png
diff --git a/image/heart.png b/image/heart.png
diff --git a/image/home.png b/image/home.png
diff --git a/image/like.png b/image/like.png
diff --git a/image/live_video.png b/image/live_video.png
diff --git a/image/marketplace.png b/image/marketplace.png
diff --git a/image/page.jpg b/image/page.jpg
diff --git a/image/post_1.jpg b/image/post_1.jpg
diff --git a/image/post_2.jpg b/image/post_2.jpg
diff --git a/image/post_3.png b/image/post_3.png
diff --git a/image/post_4.jpg b/image/post_4.jpg
diff --git a/image/post_5.jpg b/image/post_5.jpg
diff --git a/image/profile.png b/image/profile.png
diff --git a/image/profile1.png b/image/profile1.png
diff --git a/image/profile2.png b/image/profile2.png
diff --git a/image/profile_1.jpg b/image/profile_1.jpg
diff --git a/image/profile_10.png b/image/profile_10.png
diff --git a/image/profile_11.png b/image/profile_11.png
diff --git a/image/profile_12.jpg b/image/profile_12.jpg
diff --git a/image/profile_2.jpg b/image/profile_2.jpg
diff --git a/image/profile_3.jpg b/image/profile_3.jpg
diff --git a/image/profile_4.png b/image/profile_4.png
diff --git a/image/profile_5.png b/image/profile_5.png
diff --git a/image/profile_6.png b/image/profile_6.png
diff --git a/image/profile_7.png b/image/profile_7.png
diff --git a/image/profile_8.png b/image/profile_8.png
diff --git a/image/profile_9.png b/image/profile_9.png
diff --git a/image/saved.png b/image/saved.png
diff --git a/image/shortcuts_1.png b/image/shortcuts_1.png
diff --git a/image/shortcuts_2.jpeg b/image/shortcuts_2.jpeg
diff --git a/image/shortcuts_3.webp b/image/shortcuts_3.webp
diff --git a/image/shortcuts_4.png b/image/shortcuts_4.png
diff --git a/image/shortcuts_5.webp b/image/shortcuts_5.webp
diff --git a/image/story_1.png b/image/story_1.png
diff --git a/image/story_2.jpg b/image/story_2.jpg
diff --git a/image/story_3.jpg b/image/story_3.jpg
diff --git a/image/story_4.png b/image/story_4.png
diff --git a/image/story_5.jpg b/image/story_5.jpg
diff --git a/image/upload.png b/image/upload.png
diff --git a/image/watch.png b/image/watch.png
diff --git a/index.html b/index.html
@@ -41,5 +41,156 @@
 
     </nav>
 
+    <!--------------main---------->
+
+    <div class="main">
+
+        <!--left-->
+
+        <div class="left">
+
+            <div class="img">
+                <img src="image/profile.jpg" alt="profile">
+                <p>Kolas</p>
+            </div>
+
+            <div class="img">
+                <img src="image/friend.png" alt="profile">
+                <p>Friends</p>
+            </div>
+
+            <div class="img">
+                <img src="image/saved.png" alt="profile">
+                <p>Saved</p>
+            </div>
+
+            <div class="img">
+                <img src="image/group.png" alt="profile">
+                <p>Groups</p>
+            </div>
+
+            <div class="img">
+                <img src="image/marketplace.png" alt="profile">
+                <p>Marketplace</p>
+            </div>
+
+            <div class="img">
+                <img src="image/watch.png" alt="profile">
+                <p>Watch</p>
+            </div>
+
+            <div class="img">
+                <img src="image/down_arrow.png" alt="profile">
+                <p>More</p>
+            </div>
+            <hr>
+
+            <h2>You shortcuts</h2>
+            <p class="edit">Edit</p>
+
+            <div class="shortcuts">
+                <img src="image/shortcuts_1.png" alt="">
+                <p>MOBILE GAMES</p>
+            </div>
+
+            <div class="shortcuts">
+                <img src="image/shortcuts_2.png" alt="">
+                <p>Online Education</p>
+            </div>
+
+            <div class="shortcuts">
+                <img src="image/shortcuts_3.webp" alt="">
+                <p>Food Lovers</p>
+            </div>
+
+            <div class="shortcuts">
+                <img src="image/shortcuts_4.png" alt="">
+                <p>Social Media</p>
+            </div>
+
+            <div class="shortcuts">
+                <img src="image/shortcuts_5.webp" alt="">
+                <p>PC Shop</p>
+            </div>
+            <div class="shortcuts">
+                <img src="image/down_arrow.png" alt="">
+                <p>See more</p>
+            </div>
+        </div>
+
+        <!--center-->
+
+        <div class="center">
+            <div class="top_box">
+
+                <div class="my_story_card">
+
+                    <img src="image/profile.jpg" alt="">
+                    <div class="story_upload">
+                        <img src="image/upload.png" alt="">
+                        <p class="story_tag">Create story</p>
+                    </div>
+                </div>
+
+                <div class="story_card">
+                    <img src="image/story_1.png">
+
+                    <div class="story_profile">
+                        <img src="image/profile_1.jpg">
+                        <div class="circle"></div>
+                    </div>
+
+                    <div class="story_name">
+                        <p class="name">Helle</p>
+                    </div>
+                </div>
+
+                <div class="story_card">
+                    <img src="image/story_2.jpg">
+
+                    <div class="story_profile">
+                        <img src="image/profile2.png">
+                        <div class="circle"></div>
+                    </div>
+
+                    <div class="story_name">
+                        <p class="name">Mona Katanas</p>
+                    </div>
+                </div>
+
+                <div class="story_card">
+                    <img src="image/story_3.jpg">
+
+                    <div class="story_profile">
+                        <img src="image/profile_11.png">
+                        <div class="circle"></div>
+                    </div>
+
+                    <div class="story_name">
+                        <p class="name">Charith Disanayaka</p>
+                    </div>
+                </div>
+
+                <div class="story_card">
+                    <img src="image/story_5.jpg">
+
+                    <div class="story_profile">
+                        <img src="image/profile_10.png">
+                        <div class="circle"></div>
+                    </div>
+
+                    <div class="story_name">
+                        <p class="name">Rugie</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!--right-->
+
+        <div class="right"></div>
+
+    </div>
+
 </body>
 </html>
diff --git a/style.css b/style.css
@@ -7,6 +7,7 @@
 nav{
     width: 100%;
     height: 60px;
+    top:0;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -95,3 +96,223 @@ nav .right img{
     line-height: 45px;
     cursor: pointer;
 }
+
+
+/*------------main--------------*/
+
+.main{
+    display: flex;
+    margin-top: 60px;
+    background-color: #f5f5f5;
+}
+
+.main .left{
+    width: 25%;
+    height: 92vh;
+    overflow: hidden;
+    overflow-y: scroll;
+    background: #f5f5f5;
+    padding: 20px 6px 5px 10px;
+    position: fixed;
+}
+
+.main .left::-webkit-scrollbar{
+    width: 7px;
+}
+
+.main .left::-webkit-scrollbar-thumb{
+    border-radius: 20px;
+    background: #f5f5f5;
+}
+
+.main .left:hover::-webkit-scrollbar-thumb{
+    background: #cccccc;
+}
+
+.main .left .img{
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    transition: 0.2s;
+}
+
+.main .left .img:hover{
+    background: #e3e3e3;
+}
+
+.main .left .img img{
+    width: 40px;
+    height: 40px;
+    object-fit: cover;
+    object-position: center;
+    border-radius: 50%;
+    margin: 8px 15px 8px 0;
+}
+
+.main .left hr{
+    width: 100%;
+    height: 1px;
+    border: 0;
+    background: #cccccc;
+    margin: 10px 0
+}
+
+.main .left h2{
+    font-size: 18px;
+    color:#919191;
+    margin: 5px 0;
+}
+
+.main .left .edit{
+    color: #45abff;
+    font-size: 15px;
+    float: right;
+    position: relative;
+    bottom: 23px;
+    cursor: pointer;
+    opacity: 0;
+}
+
+.main .left:hover .edit{
+    opacity: 1;
+}
+
+.main .left .shortcuts{
+    display: flex;
+    align-items: center;
+    transition: 0.2s;
+}
+
+.main .left .shortcuts:hover{
+    background: #e3e3e3;
+    cursor: pointer;
+}
+
+.main .left .shortcuts img{
+    width: 40px;
+    height: 40px;
+    object-fit: cover;
+    object-position: center;
+    border-radius: 10px;
+    margin: 8px 15px 8px 0;
+}
+
+.main .center{
+    width: 50px;
+    height: auto;
+    padding: 20px 20px 0 20px;
+    background: #f5f5f5;
+    margin-left: 25%;
+}
+
+.main .center::-webkit-scrollbar{
+    width: 0;
+}
+
+.main .center .top_box{
+    width: 100px;
+    height: 260px;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;;
+}
+
+.main .center .top_box .my_story_card{
+    width: 135px;
+    height: 250px;
+    overflow: hidden;
+    margin: 0 auto;
+    box-shadow: 0 1px 8px rgba(0,0,0,0.2);
+    border-radius: 10px;
+    cursor: pointer;
+    margin-right: 5px;
+}
+
+.main .center .top_box .my_story_card img{
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+}
+
+.main .center .top_box .my_story_card .story_upload{
+    width: 100%;
+    height: 60px;
+    background: #fff;
+    position: relative;
+    bottom: 50px;
+    cursor: pointer;
+}
+
+.main .center .top_box .my_story_card .story_upload img{
+    width: 30px;
+    height: 30px;
+    display: flex;
+    margin: 0 auto;
+    position: relative;
+    bottom: 15px;
+    border-radius: 50%;
+}
+.main .center .top_box .my_story_card .story_upload .story_tag{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    bottom: 10px;
+    font-weight: bold;
+    font-size: 14px;
+}
+
+.main .center .top_box .story_card{
+    width: 135px;
+    height: 250px;
+    overflow: hidden;
+    margin: 0 auto;
+    box-shadow: 0 1px 8px rgba(0,0,0,0.2);
+    border-radius: 10px;
+    margin-right: 5px;
+    margin-left: 5px;
+    cursor: pointer;
+}
+
+.main .center .top_box .story_card img{
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+}
+
+.main .center .top_box .story_card .story_profile{
+    position: relative;
+    bottom:240px;
+    margin-left: 10px;
+}
+
+.main .center .top_box .story_card .story_profile img{
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: 4px solid #45abff;
+}
+
+.main .center .top_box .story_card .story_pofile .circle{
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: #27cc37;
+    border: 2px solid #fff;
+    position: relative;
+    bottom: 15px;
+    left:25px;
+}
+
+.main .center .top_box .story_card .story_name{
+    position: relative;
+    bottom: 100px;
+    padding: 0 10px;
+}
+
+.main .center .top_box .story_card .story_name .name{
+    font-weight: bold;
+    color:#fff;
+    font-size: 14px;
+}