<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/iamfederico/pen/Lkjqod?limit=all&page=27&q=mobile" />
<link href='https://fonts.googleapis.com/css?family=Karla:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css'>
<style class="cp-pen-styles">
/* Improve Typography with CSS
*, *:before, *:after {
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
font-feature-settings: "kern";
font-kerning: normal;
box-sizing: border-box;
}
html.touch *,html.touch *:before,html.touch *:after {
text-rendering: optimizeSpeed;
}
html {
font-size: 62.5%;
}
body {
font-size: 1.5rem;
user-select: text;
}
*/
body {
background: rgba(0, 0, 0, 0.03);
font-family: 'Karla', sans-serif;
}
.mainbox {
width: 375px;
height: 667px;
margin-left: auto;
margin-right: auto;
margin-bottom: 50px;
background-color: #000;
-webkit-box-shadow: 0px 0px 71px -10px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 71px -10px rgba(0,0,0,0.3);
box-shadow: 0px 0px 71px -10px rgba(0,0,0,0.3);
position: relative;
}
.toppreheader {
width: 100%;
height: 64px;
position: relative;
text-align: center;
color:#FFF;
font-size: 17px;
padding-top: 30px;
}
.topleftmenu {
width: 0;
height: 0;
border-top: 5px solid transparent;
border-right: 7px solid #FFF;
border-bottom: 5px solid transparent;
position: absolute;
left: 20px;
top: 37px;
}
.moreoptions {
width: 6px;
height: 6px;
background-color: #FFF;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
position: absolute;
display: block;
content: '';
right: 21px;
bottom: 15px;
}
.moreoptions:after {
width: 6px;
height: 6px;
background-color: #FFF;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
position: absolute;
display: block;
content: '';
right: 0;
bottom: 11px;
}
.insidebox {
background: rgba(0,145,229,1);
background: -moz-linear-gradient(45deg, rgba(0,145,229,1) 0%, rgba(0,145,229,1) 66%, rgba(0,162,255,1) 66%, rgba(0,162,255,1) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(0,145,229,1)), color-stop(66%, rgba(0,145,229,1)), color-stop(66%, rgba(0,162,255,1)), color-stop(100%, rgba(0,162,255,1)));
background: -webkit-linear-gradient(45deg, rgba(0,145,229,1) 0%, rgba(0,145,229,1) 66%, rgba(0,162,255,1) 66%, rgba(0,162,255,1) 100%);
background: -o-linear-gradient(45deg, rgba(0,145,229,1) 0%, rgba(0,145,229,1) 66%, rgba(0,162,255,1) 66%, rgba(0,162,255,1) 100%);
background: -ms-linear-gradient(45deg, rgba(0,145,229,1) 0%, rgba(0,145,229,1) 66%, rgba(0,162,255,1) 66%, rgba(0,162,255,1) 100%);
background: linear-gradient(45deg, rgba(0,145,229,1) 0%, rgba(0,145,229,1) 66%, rgba(0,162,255,1) 66%, rgba(0,162,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0091e5', endColorstr='#00a2ff', GradientType=1 );
width: 100%;
height: 603px;
}
.newnotification {
width: 50%;
height: 70px;
margin-left: auto;
margin-right: auto;
background-color: transparent;
text-align:center;
color: #FFF;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 0.1em;
}
.clock {
margin-right: 10px;
margin-top: 17px;
width: 23px;
height: 23px;
background-color: #FFF;
position: relative;
display: inline-block;
content: '';
left: 0%;
top: 8%;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
.clock:before {
content: "";
width: 8px;
height: 3px;
background-color: #118BFF;
position: absolute;
top: 11px;
left: 9px;
}
.clock:after {
content: "";
width: 3px;
height: 8px;
background-color: #118BFF;
position: absolute;
top: 6px;
left: 9px;
}
.leftimgmessage {
width: 80%;
margin-left: auto;
margin-right: auto;
margin-bottom: 25px;
height: 18%;
}
.leftimgmessage img {
width: 15%;
float:left;
}
.newmessagebox {
float:left;
width: 75%;
height: 102px;
background-color: #FFF;
position: relative;
-webkit-box-shadow: 0px 15px 35px 10px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 15px 35px 10px rgba(0,0,0,0.25);
box-shadow: 0px 15px 35px 10px rgba(0,0,0,0.25);
}
.newmessage {
width: 100%;
height: 75px;
background-color: #FFF;
float: left;
padding: 24px;
}
.newmessagetimer {
width: 75%;
height: 27px;
position: absolute;
bottom: 0;
left: 0;
padding: 0 0 31px 24px;
font-weight: 700;
color: #9C6C6A;
font-size: 10px;
letter-spacing: 0.02em
}
.rightimgmessage {
width: 80%;
margin-left: auto;
margin-right: auto;
margin-bottom: 25px;
height: 18%;
}
.rightimgmessage img {
width: 15%;
float:right;
}
.messagebox {
float:right;
width: 85%;
height: 102px;
background-color: #FFF;
position: relative;
-webkit-box-shadow: 0px 15px 35px 10px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 15px 35px 10px rgba(0,0,0,0.25);
box-shadow: 0px 15px 35px 10px rgba(0,0,0,0.25);
}
.message {
width: 100%;
height: 75px;
background-color: #FFF;
float: left;
padding: 24px;
}
.messagetimer {
width: 75%;
height: 27px;
position: absolute;
bottom: 0;
left: 0;
padding: 0 0 31px 24px;
font-weight: 700;
color: #9C6C6A;
font-size: 10px;
letter-spacing: 0.02em
}
.leftimgmessage:nth-child(4) {
width: 80%;
margin-left: auto;
margin-right: auto;
margin-bottom: 25px;
height: 8%;
position: relative;
}
.writingamessage span,
.writingamessage span:before,
.writingamessage span:after {
width: 8px;
height: 8px;
background: #99ACCC;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
float: right;
position: absolute;
left: 80px;
top: 19px;
content: '';
}
.writingamessage span:before {
background: #FDAEAA;
left: -13px;
top: 0px;
}
.writingamessage span:after {
background: #64A2D3;
left: 13px;
top: 0;
}
.bottomheader {
width: 100%;
height: 54px;
position: absolute;
color:#FFF;
font-size: 16px;
padding-top: 17px;
padding-left: 62px;
background-color: #000;
bottom: 0px;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.cameraupload {
height: 3px;
width: 35px;
position: absolute;
display: block;
content: '';
z-index: 900;
left: 22px;
top: 23px;
}
.cameraupload span,
.cameraupload span:before {
width: 20px;
height: 15px;
background-color: #FFF;
position: absolute;
display: block;
content: '';
}
.cameraupload span:before {
top: -2px;
left: 7px;
width: 6px;
}
.cameraupload span:after {
width: 6px;
height: 6px;
background-color: #000;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
position: absolute;
display: block;
content: '';
left: 37%;
top: 28%;
}
.followbutton {
position:absolute;
bottom:26px;
right: 25px
}
.sendmsg {
border-top: 10px solid transparent;
border-left: 25px solid #000;
border-bottom: 10px solid transparent;
position: absolute;
left: 18px;
top: 18px;
width: 0;
height: 0;
z-index: 100;
}
.sendmsg span {
position: absolute;
right: 50px;
top: -1px;
width: 6px;
height: 3px;
background-color: #FFBDB8;
z-index: 200;
}
.outsidetoptext {
font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
text-align: center;
margin: 4% 20% 2% 20%;
}
.outsidetoptext p:last-child {
font-weight: bold;
}
.outsidebottomtext {
font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
text-align: center;
margin: 0 0 4% 0;
}
/* overwrite of some css style from materialize.css */
.invipink {
background-color: #ffbdb8;
}
.invipink:hover {
background-color: #dba29d;
}
</style></head><body>
<div class="outsidetoptext">
<p>Mobile screen all in CSS, inspired from the free UI kit by Invisionapp called "Chat" (resources links at the bottom)</p>
<p>coded by <a href="http://federicoespinosa.com/" target="_blank">Federico Espinosa</a></p>
<p>screen 1-6 chat message</p>
</div>
<div class="mainbox">
<div class="toppreheader">
<div class="topleftmenu">
</div>
Catherina, Federico
<div class="moreoptions"></div>
</div>
<div class="insidebox">
<div class="newnotification">
<div class="clock"></div>
Today at 4:55pm</div>
<div class="leftimgmessage">
<img src="http://i.imgsafe.org/e49ddc6.png">
<div class="newmessagebox">
<div class="newmessage">
Hola! Como estas? Are we good for Wednesday?
</div>
<div class="newmessagetimer">
6 minutes ago
</div>
</div>
</div>
<div class="rightimgmessage">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/472983/profile/profile-80_1.jpg" alt="Federico Espinosa">
<div class="messagebox">
<div class="message">
For sure I will be there! Count on me :)
</div>
<div class="messagetimer">
5 minutes ago
</div>
</div>
</div>
<div class="leftimgmessage">
<img src="http://i.imgsafe.org/e49ddc6.png">
<div class="writingamessage">
<span></span>
</div>
</div>
<div class="followbutton">
<a class="btn-floating btn-large waves-effect waves-light invipink right">
<i class="sendmsg material-icons black-text"><span></span></i>
</a>
</div>
<div class="bottomheader">
<div class="cameraupload">
<span></span>
</div>
Type message...
</div>
</div> <!-- Close .insidebox -->
</div> <!-- Close .mainbox -->
<div class="outsidebottomtext">
<p>Resources links:</p>
<p><a href="http://www.invisionapp.com/chat" target="_blank">Free UI kit "Chat" by Invisionapp</a></p>
<p><a href="https://www.google.com/fonts/specimen/Karla" target="_blank">Google web font "Karla"</a></p>
<p><a href="http://materializecss.com/" target="_blank">Materialize framework</a></p>
<p>Coded by <a href="http://federicoespinosa.com/" target="_blank">Federico Espinosa</a></p>
</div>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js'></script>
</body></html>
