Skip to content

Instantly share code, notes, and snippets.

@Nemra1

Nemra1/chat-interface-mobile-only.markdown

Created March 17, 2020 01:07
Show Gist options
  • Save Nemra1/6f0603bf44e737f91d37036a8dbb8c8e to your computer and use it in GitHub Desktop.
Save Nemra1/6f0603bf44e737f91d37036a8dbb8c8e to your computer and use it in GitHub Desktop.
Download ZIP
Chat interface (mobile only)
Raw
index.html
<div class="header">
<div class="container flex">
<a href="#">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/194136/Back.png" alt="back">
</a>
<h1 class="header-title">Discussion</h1>
</div>
</div>
<div class="container">
<div class="people-chat">
<div class="people-picture">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/194136/profile-80.jpg" alt="pic">
</div>
<div class="people-interaction">
<div class="people-infos">
<span class="people-name">Kevin Lanceplaine</span>
<span class="people-hour">8:21 AM</span>
</div>
<div class="people-msg">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint maiores, quibusdam distinctio vero accusantium libero voluptas ea laborum atque dolores nesciunt velit illo iure, obcaecati corporis repellat laboriosam expedita ullam.
</div>
</div>
</div>
<div class="people-chat">
<div class="people-picture">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/194136/profile-80.jpg" alt="pic">
</div>
<div class="people-interaction">
<div class="people-infos">
<span class="people-name">Kathy Payne</span>
<span class="people-hour">8:22 AM</span>
</div>
<div class="people-msg">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint maiores, quibusdam distinctio vero accusantium libero voluptas ea laborum atque dolores nesciunt velit illo iure, obcaecati corporis repellat laboriosam expedita ullam.
</div>
</div>
</div>
<div class="people-chat">
<div class="people-picture">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/194136/profile-80.jpg" alt="pic">
</div>
<div class="people-interaction">
<div class="people-infos">
<span class="people-name">Kevin Lanceplaine</span>
<span class="people-hour">8:24 AM</span>
</div>
<div class="people-msg">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint maiores, quibusdam distinctio vero accusantium libero voluptas ea laborum atque dolores nesciunt velit illo iure, obcaecati corporis repellat laboriosam expedita ullam.
</div>
</div>
</div>
<div class="people-chat">
<div class="people-picture">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/194136/profile-80.jpg" alt="pic">
</div>
<div class="people-interaction">
<div class="people-infos">
<span class="people-name">Jean-Michel</span>
<span class="people-hour">8:33 AM</span>
</div>
<div class="people-msg">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint maiores, quibusdam distinctio vero accusantium libero voluptas ea laborum atque dolores nesciunt velit illo iure, obcaecati corporis repellat laboriosam expedita ullam.
</div>
</div>
</div>
<div class="people-chat">
<div class="people-picture">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/194136/profile-80.jpg" alt="pic">
</div>
<div class="people-interaction">
<div class="people-infos">
<span class="people-name">Usain</span>
<span class="people-hour">8:45 AM</span>
</div>
<div class="people-msg">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint maiores, quibusdam distinctio vero accusantium libero voluptas ea laborum atque dolores nesciunt velit illo iure, obcaecati corporis repellat laboriosam expedita ullam.
</div>
</div>
</div>
<input type="text" placeholder="Tapez votre message ici !">
</div>
Raw
style.sass
@import url('https://fonts.googleapis.com/css?family=Libre+Franklin:400,500,600,700')
body
font-family: 'Libre Franklin', sans-serif
.header
position: relative
height: 64px
background-color: #53558D
width: 100%
.header-title
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
font-weight: 600
color: white
.container
width: 90%
height: 100%
margin: 0 auto
.flex
display: flex
align-items: center
.people-chat
margin-top: 30px
display: flex
justify-content: space-between
.people-picture
border-radius: 3px
overflow: hidden
max-width: 50px
max-height: 50px
min-width: 36px
min-height: 36px
object-fit: fill
img
width: 100%
height: 100%
.people-interaction
width: calc(100% - 80px)
.people-infos
margin-bottom: 10px
.people-name
font-size: 18px
font-weight: 600
.people-hour
font-size: 14px
font-weight: 300
color: #A0A0A2
margin-left: 15px
.people-msg
line-height: 1.5
font-size: 16px
input
width: 100%
margin-top: 40px
border-radius: 3px
height: 45px
box-shadow: none
border: 1px solid #CAD3DF
background-color: #ECEFF4
color: #8493A8
font-size: 16px
font-weight: 300
padding-left: 20px
outline: none
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment