├── img
    ├── bg.jpeg
    ├── emo.png
    ├── mic.png
    ├── more.png
    ├── arrow.png
    ├── camera.png
    ├── heart.png
    ├── phone.png
    ├── video.png
    ├── affichage.png
    ├── check-2.png
    ├── emoji-1.png
    ├── emoji-2.png
    └── cs chapter.png
├── css
    └── style.css
└── index.html


/img/bg.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TalelMejri/ChatBox-CS-chapter-Like-whatsapp/HEAD/img/bg.jpeg


--------------------------------------------------------------------------------
/img/emo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TalelMejri/ChatBox-CS-chapter-Like-whatsapp/HEAD/img/emo.png


--------------------------------------------------------------------------------
/img/mic.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TalelMejri/ChatBox-CS-chapter-Like-whatsapp/HEAD/img/mic.png


--------------------------------------------------------------------------------
/img/more.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TalelMejri/ChatBox-CS-chapter-Like-whatsapp/HEAD/img/more.png


--------------------------------------------------------------------------------
/img/arrow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TalelMejri/ChatBox-CS-chapter-Like-whatsapp/HEAD/img/arrow.png


--------------------------------------------------------------------------------
/img/camera.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TalelMejri/ChatBox-CS-chapter-Like-whatsapp/HEAD/img/camera.png


--------------------------------------------------------------------------------
/img/heart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TalelMejri/ChatBox-CS-chapter-Like-whatsapp/HEAD/img/heart.png


--------------------------------------------------------------------------------
/img/phone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TalelMejri/ChatBox-CS-chapter-Like-whatsapp/HEAD/img/phone.png


--------------------------------------------------------------------------------
/img/video.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TalelMejri/ChatBox-CS-chapter-Like-whatsapp/HEAD/img/video.png


--------------------------------------------------------------------------------
/img/affichage.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TalelMejri/ChatBox-CS-chapter-Like-whatsapp/HEAD/img/affichage.png


--------------------------------------------------------------------------------
/img/check-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TalelMejri/ChatBox-CS-chapter-Like-whatsapp/HEAD/img/check-2.png


--------------------------------------------------------------------------------
/img/emoji-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TalelMejri/ChatBox-CS-chapter-Like-whatsapp/HEAD/img/emoji-1.png


--------------------------------------------------------------------------------
/img/emoji-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TalelMejri/ChatBox-CS-chapter-Like-whatsapp/HEAD/img/emoji-2.png


--------------------------------------------------------------------------------
/img/cs chapter.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TalelMejri/ChatBox-CS-chapter-Like-whatsapp/HEAD/img/cs chapter.png


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
  1 | *{
  2 |     padding: 0;
  3 |     margin: 0;
  4 |     box-sizing: border-box;
  5 |     font-family: 'Times New Roman', Times, serif;
  6 | }
  7 | .container{
  8 |     width: 500px;
  9 |     margin: auto;
 10 | }
 11 | .chat{
 12 |     display: flex;
 13 |     flex-direction: column;
 14 |     height: 100vh;
 15 |     background: #f1f0e8;
 16 | }
 17 | .chat-header{
 18 |     display: flex;
 19 | }
 20 | .profil{
 21 |     width: 100%;
 22 |     background: #036055;
 23 |     display: flex;
 24 |     align-items: center;
 25 |     height: 60px;
 26 |     padding: 0px 10px;
 27 |     position: relative;
 28 | }
 29 | .profil .cs{
 30 |     display: block;
 31 |     width: 40px;
 32 |     position: absolute;
 33 |     top: 12px;
 34 |     cursor: pointer;
 35 |     border-radius: 20px;
 36 | }
 37 | .profil h2{
 38 |     display: inline-block;
 39 |     line-height: 90px;
 40 |     vertical-align: bottom;
 41 |     color: #fff;
 42 |     margin-left: 50px;
 43 |     font-size: 20px;
 44 |     font-weight: 600;
 45 | }
 46 | .profil span{
 47 |     color: #ccc;
 48 |     position: absolute;
 49 |     top: 42px;
 50 |     left: 70px;
 51 |     font-size: 14px;
 52 | }
 53 | .profil .left{
 54 |     flex: 1;
 55 | }
 56 | .right .icon{
 57 |     display: inline-block;
 58 |     width: 25px;
 59 |     margin-left: 8px;
 60 | }
 61 | .chat-box{
 62 |     flex: 1;
 63 |     background-attachment: fixed;
 64 |     background-image: url(/img/bg.jpeg);
 65 |     overflow-y: scroll;
 66 |     padding-left: 20px;
 67 | }
 68 | .chat-footer{
 69 |     display: flex;
 70 |     justify-content: center;
 71 |     align-items: center;
 72 |     border-radius: 60px;
 73 |     position: relative;
 74 |     cursor: pointer;
 75 | }
 76 | .chat-footer textarea{
 77 |     display: block;
 78 |     flex:1;
 79 |     width: 100%;
 80 |     border-radius: 60px;
 81 |     margin: 5px;
 82 |     height: 50px;
 83 |     outline: none;
 84 |     font-size: 19px;
 85 |     padding: 10px;
 86 |     padding-left: 40px;
 87 |     padding-right:90px ;
 88 |     border: 2px solid #ccc;
 89 |     color: #555;
 90 |     resize: none;
 91 | }
 92 | .chat-footer .mic{
 93 |     display: block;
 94 |     width: 45px;
 95 |     height: 45px;
 96 |     margin-top: -3px;
 97 |     margin-right: 18px;
 98 | }
 99 | .chat-footer .emo{
100 |     display: block;
101 |     width: 35px;
102 |     height: 35px;
103 |     position: absolute;
104 |     left: 10px;
105 |     top: 12px;
106 | }
107 | .chat-footer .icons{
108 |     position: absolute;
109 |     right: 100px;
110 |     top: 10px;
111 | }
112 | .chat-footer .icons img{
113 |     display: inline-block;
114 |     width: 35px;
115 |     height: 35px;
116 | }
117 | .chat-r{
118 |     display: flex;
119 | }
120 | .chat-r .sp{
121 |     flex: 1;
122 | }
123 | .chat-l{
124 |     display: flex;
125 | }
126 | .chat-l .sp{
127 |     flex: 1;
128 | }
129 | .chat-box .mess{
130 |     max-width: 300px;
131 |     background-color: #f7fcf6;
132 |     padding: 10px;
133 |     border-radius: 10px;
134 |     margin: 20px 0px;
135 |     cursor: pointer;
136 | }
137 | .chat-box .mess p{
138 |     word-break: break-all;
139 |     font-size: 18px;
140 | }
141 | .chat-box .mess-r{
142 |     background: #e2ffc7;
143 | }
144 | .chat-box .emoji{
145 |     width: 20px; 
146 | }
147 | .chat-box .check{
148 |     float: right;
149 | }
150 | .chat-box .check img{
151 |     width: 20px;
152 | }
153 | .chat-box .check span{
154 |     color: #888;
155 |     font-size: 12px;
156 |     font-weight: 700px;
157 | }
158 | *::-webkit-scrollbar{
159 |     width: 5px;
160 | }
161 | *::-webkit-scrollbar-track{
162 |     background-color: #f1f1f1;
163 | }
164 | *::-webkit-scrollbar-thumb{
165 |     background-color: #aaa;
166 | }
167 | *::-webkit-scrollbar-thumb:hover{
168 |     background-color: #555;
169 | }
170 | .chat-box .img_chat{
171 |     width: 280px;
172 | }
173 | @media screen and (max-width:400px){
174 |     .container{
175 |         width: 376px;
176 |     }
177 | }
178 | 
179 | 
180 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <link rel="icon" href="./img/cs chapter.png" type="image/x-icon">
  8 |     <link rel="stylesheet" href="./css/style.css">
  9 |     <title>IEEE CS Chapter</title>
 10 | </head>
 11 | <body>
 12 |      <div class="container">
 13 |          <div class="chat">
 14 |              <div class="chat-header">
 15 |                     <div class="profil">
 16 |                         <div class="left">
 17 |                             <img src="./img/cs chapter.png" class="cs">
 18 |                             <h2>CS Chapter</h2>
 19 |                             <span>online</span>
 20 |                         </div>
 21 |                         <div class="right">
 22 |                             <img src="./img/video.png" class="icon">
 23 |                             <img src="./img/phone.png"  class="icon">
 24 |                             <img src="./img/more.png"  class="icon">
 25 |                         </div>
 26 |                     </div>
 27 |              </div>
 28 |              <div class="chat-box">
 29 |                 <div class="chat-l">
 30 |                     <div class="mess ">
 31 |                         <p>
 32 |                            Hi,Talel Mejri <img src="./img/heart.png" class="emoji">
 33 |                        </p>
 34 |                        <div class="check">
 35 |                                <span>7:00 PM</span>       
 36 |                        </div>
 37 |                     </div>
 38 |                 </div>
 39 |                  <div class="chat-r">
 40 |                      <div class="sp"></div>
 41 |                      <div class="mess mess-r">
 42 |                          <p>
 43 |                             Hello <img src="./img/heart.png" class="emoji">
 44 |                         </p>
 45 |                         <div class="check">
 46 |                                 <span>7:00 PM</span>
 47 |                                 <img src="./img/check-2.png" >
 48 |                         </div>
 49 |                      </div>
 50 |                  </div>
 51 |                  <div class="chat-l">
 52 |                     <div class="mess ">
 53 |                         <p>
 54 |                             We hope you're having a nice day <img src="./img/emoji-2.png" class="emoji">
 55 |                        </p>
 56 |                        <div class="check">
 57 |                                <span>7:01 PM</span>       
 58 |                        </div>
 59 |                     </div>
 60 |                 </div>
 61 |                  <div class="chat-r">
 62 |                      <div class="sp"></div>
 63 |                      <div class="mess mess-r">
 64 |                          <p>
 65 |                             Thanks i hope that you are having one too  <img src="./img/heart.png" class="emoji">
 66 |                         </p>   
 67 |                         <div class="check">
 68 |                                 <span>7:02 PM</span>
 69 |                                 <img src="./img/check-2.png" >
 70 |                         </div>
 71 |                      </div>
 72 |                  </div>
 73 |                  <div class="chat-l">
 74 |                     <div class="mess ">
 75 |                       <p>  We appreciate the amount of work and efforts that you have put in to help improve this chapter and  help your teammates and we are very honored to announce that you are our member of the month 
 76 |                         Keep up the good work</p><img src="./img/heart.png" class="emoji"><img src="./img/heart.png" class="emoji"><img src="./img/heart.png" class="emoji">
 77 |                         <img src="./img/affichage.png" class="img_chat">
 78 |                        <div class="check">
 79 |                                <span>7:03 PM</span>      
 80 |                        </div>
 81 |                     </div>
 82 |                 </div>
 83 |                  <div class="chat-r">
 84 |                      <div class="sp"></div>
 85 |                      <div class="mess mess-r">
 86 |                          <p>                       
 87 |                             Thank you im very happy and honored to be among this great team and I'm very glad that you guys appreciate the work and efforts i have put with you 💙💙💙
 88 |                         </p>
 89 |                         <div class="check">
 90 |                                 <span>7:04 PM</span>
 91 |                                 <img src="./img/check-2.png" >
 92 |                         </div>
 93 |                      </div>
 94 |                  </div>
 95 |                  <div class="chat-l">
 96 |                     <div class="mess ">
 97 |                         <p>
 98 |                            Thank You  <img src="./img/heart.png" class="emoji"> <img src="./img/heart.png" class="emoji">
 99 |                        </p>
100 |                        <div class="check">
101 |                                <span>7:05 PM</span>            
102 |                        </div>
103 |                     </div>
104 |                 </div>
105 |                  <div class="chat-r">
106 |                      <div class="sp"></div>
107 |                      <div class="mess mess-r">
108 |                          <p>
109 |                             Have a good night 💙💙💙
110 |                         </p>
111 |                         <div class="check">
112 |                                 <span>7:05 PM</span>
113 |                                 <img src="./img/check-2.png" >
114 |                         </div>
115 |                      </div>
116 |                  </div>
117 |                  <div class="chat-l">
118 |                     <div class="mess ">
119 |                         <p>
120 |                            <img src="./img/heart.png" class="emoji"> <img src="./img/heart.png" class="emoji">
121 |                        </p>
122 |                        <div class="check">
123 |                                <span>7:05 PM</span>             
124 |                        </div>
125 |                     </div>
126 |                 </div>
127 |              </div>
128 |              <div class="chat-footer">
129 |                  <img src="./img/emo.png" class="emo">
130 |                  <textarea placeholder="type a message"></textarea>
131 |                 <div class="icons">
132 |                     <img src="./img/camera.png" >
133 |                 </div>    
134 |                 <img src="./img/mic.png" class="mic">
135 |             </div>
136 |          </div>
137 |      </div> 
138 | </body>
139 | </html>


--------------------------------------------------------------------------------