Chat interface (mobile only)

chat-interface-mobile-only.markdown

Chat interface (mobile only)

A Pen by Guillaume Lebelt on CodePen.

License.

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>

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