Merge pull request #44 from Ayush-kr-giga/main

working message section
abhrajit2004 · Oct 19, 2024 · ee37423 · ee37423
2 parents f4b396a + 574d318
commit ee37423
Show file tree

Hide file tree

Showing 4 changed files with 144 additions and 6 deletions.
diff --git a/Images/bill_gates.jpeg b/Images/bill_gates.jpeg
diff --git a/css/messages.css b/css/messages.css
@@ -1,14 +1,16 @@
 #messages{
     z-index: 5;
     position: fixed;
-    height: 60px;
+    height: 600px;
     width: 400px;
     /* background-color: yellow; */
-    display: flex;
-    align-items: center;
+    /* display: flex; */
+    /* align-items: center; */
     /* justify-content: center; */
+    /* padding-top: 5px; */
 
     background-color: black;
+    /* border:2px solid white; */
     border-top: 0.6px solid rgb(25, 25, 25);
     border-left: 0.6px solid rgb(25, 25, 25);
     border-right: 0.6px solid rgb(25, 25, 25);
@@ -17,11 +19,78 @@
     border-style: outset;
     left:72%;
     top:93%;
-
+    transition: 0.5s;
+
+}
+#messages_topper{
+    height: 60px;
+    width: 400px;
+    display: flex;
+    align-items: center;
+
+}
+
+.message_content{
+
+
+    height: 80px;
+    width: 390px;
+    display: flex;
+    margin: 2px;
+    align-items: center;
+    background-color: black;
+    transition: all 0.3s;
+
+
 
 }
 
-#messages span{
+.message_profile{
+
+    height: auto; 
+    max-width: 15%;
+    border-radius: 50%;
+
+}
+.message_content:hover{
+    background-color: rgb(33, 34, 35);
+}
+
+.message_msg{
+    /* background-color: rgb(214, 27, 27); */
+    height: 70px;
+    width: 315px;
+    margin-left: 15px;
+
+}
+.message_name{
+
+    font-size: 15px;
+    font-weight: 900;
+
+
+}
+
+.message_mail{
+    font-size: 10px;
+    color: gray;
+    margin-left: 15px;
+
+
+}
+.date{
+    font-size: 10px;
+    color: gray;
+    margin-left: 15px;
+
+}
+
+.msg{
+
+    margin:4px 0 0 5px;
+    color: rgb(151, 146, 146);
+}
+#messgaes_top_span{
     margin-left: 10px;
     font-size: 20px;
     font-style: bold;
@@ -47,4 +116,13 @@
     margin-left: 13px;
     transform: rotate(270deg);
 
+}
+
+#img_messages3{
+    filter: invert(1);
+    height: auto; 
+    max-width: 5%;
+    margin-left: 13px;
+    transform: rotate(90deg);
+    display: none;
 }
diff --git a/index.html b/index.html
@@ -11,15 +11,35 @@
     />
     <link rel="stylesheet" href="css/output.css" />
     <link rel="stylesheet" href="css/messages.css">
+    <script src="messages.js"></script> 
   </head>
   <body class="bg-black min-h-screen text-white">
 
 
     <!-- messgaes start -->
     <div id="messages">
-      <span>Messages</span>
+     <div id="messages_topper">
+      <span id="messgaes_top_span" >Messages</span>
       <img src="messages.png" alt="" id="img_messages1">
       <img src="expand.png" alt="" id="img_messages2">
+      <img src="expand.png" alt="" id="img_messages3">
+    </div> 
+
+    <div class="message_content">
+      <img src="Images/bill_gates.jpeg" alt="" class="message_profile">
+
+      <div class="message_msg">
+
+        <span class="message_name">Bill Gates</span>
+        <span class="message_mail">[email protected]</span>
+
+        <span class="date">19 Oct,2024</span>
+        <p class="msg">Hi Abhrajit , wanna work together?</p>
+
+
+      </div>
+
+    </div>
 
     </div> 
 
@@ -471,5 +491,32 @@ <h1 class="text-xl font-bold p-3">Who to follow</h1>
         </div>
       </div>
     </div>
+
+
+  <script>
+
+var up_button=document.getElementById('img_messages2');
+
+var down_button=document.getElementById('img_messages3');
+
+var messages=document.getElementById('messages');
+
+// var form1=document.getElementById('form1');
+
+up_button.onclick=function(){
+
+    messages.style.top='43%';
+    up_button.style.display="none";
+    down_button.style.display="flex";
+}
+
+down_button.onclick=function(){
+
+messages.style.top='93%';
+up_button.style.display="flex";
+down_button.style.display="none";
+}
+
+  </script>  
   </body>
 </html>
diff --git a/messages.js b/messages.js
@@ -0,0 +1,13 @@
+var up_button=document.getElementById('img_messages2');
+
+var down_button=document.getElementById('img_messages3');
+
+var messages=document.getElementById('messages');
+
+// var form1=document.getElementById('form1');
+
+messages.onclick=function(){
+
+    messages.style.position='relative';
+    messages.style.top='43%';
+}