Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- [dohtml]
- <link href="https://fonts.googleapis.com/css?family=Montseratt:800|Muli:700,800|Roboto:100,300,400,500" rel="stylesheet">
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
- <style>
- #iphone8 {
- width: 350px;
- height: 700px;
- background: url(https://i.imgur.com/4Ksn4Rd.png);
- background-size: 350px;
- position: relative;
- }
- #iphone8 ::-webkit-scrollbar {
- width: 1px;
- }
- #iphone8 ::-webkit-scrollbar-track {
- background: #fff;
- border: 0.5px solid #fff;
- }
- #iphone8 ::-webkit-scrollbar-thumb {
- background: #fff;
- border: 0.5px solid #fff;
- border-radius: 10px;
- }
- #iphone8 .base{
- position: relative;
- overflow: hidden;
- width: 297px;
- height: 526px;
- top: 83px;
- left: 0px;
- background: #fff;
- border: 2px solid #222;
- border-radius: 2px;
- }
- #iphone8 .base .topbar{
- position: relative;
- width: 295px;
- height: 17px;
- top: 0px;
- background: #fff;
- padding-top: 0px;
- opacity: 0.97;
- }
- #iphone8 .topbar .fa{
- color: #000;
- font-size: 6px;
- margin-left: 1px;
- letter-spacing: 0px;
- }
- #iphone8 d{
- color: #000;
- font-size: 10px;
- font-family: 'Roboto', sans-serif;
- font-weight: 500;
- letter-spacing: -0.5px;
- line-height: 10px;
- }
- #iphone8 .iconbar{
- position: relative;
- width: 297px;
- height: 107px;
- top: 0px;
- background: #fff;
- border-bottom: 0.5px solid #cacaca;
- opacity: 0.97;
- }
- #iphone8 .icon{
- position: relative;
- top: 7px;
- }
- #iphone8 .alias{
- color: #000;
- font-size: 10px;
- font-family: 'Roboto', sans-serif;
- font-weight: 500;
- padding-top: 13px;
- letter-spacing: 0px;
- line-height: 12px;
- }
- #iphone8 .left{
- position: absolute;
- top: 7px;
- left: 3px;
- background: transparent;
- width: 30px;
- height: 30px;
- font-size: 27px;
- color: #007aff;
- }
- #iphone8 .right{
- position: absolute;
- top: 10px;
- right: 12px;
- background: #fff;
- border-radius: 100px;
- border: 0.5px solid #007aff;
- padding: 4px 7px 3px 7px;
- font-size: 11px;
- color: #007aff;
- }
- #iphone8 .message-base{
- position: absolute;
- width: 295px;
- height: 335px;
- top: 0px;
- background: #fff;
- overflow: auto;
- padding-top: 140px;
- line-height: 12px;
- }
- #iphone8 .message-base c{
- color: #aaa;
- font-size: 10px;
- font-family: 'Roboto', sans-serif;
- font-weight: 500;
- letter-spacing: 0px;
- line-height: 12px;
- }
- #iphone8 .bubble-box{
- width: 295px;
- margin-bottom: -20px;
- background: transparent;
- }
- #iphone8 .bubble-right{
- position: relative;
- width: 120px;
- right: -7px;
- padding: 8px 15px;
- background: #007aff;
- color: #fff;
- font-size: 10px;
- font-family: 'Roboto', sans-serif;
- font-weight: 500;
- letter-spacing: 0px;
- line-height: 12px;
- text-align: left;
- border-radius: 50px 50px 0px 50px;
- margin-bottom: 5px;
- }
- #iphone8 .icon-right{
- position: relative;
- width: 45px;
- height: 45px;
- top: -35px;
- right: -112px;
- background-image: url(https://i.imgur.com/YguYMNM.gif);
- background-size: 45px;
- border-radius: 100px;
- }
- #iphone8 .bubble-left{
- position: relative;
- width: 120px;
- left: -3px;
- padding: 8px 15px;
- background: #e5e5e5;
- color: #222;
- font-size: 10px;
- font-family: 'Roboto', sans-serif;
- font-weight: 500;
- letter-spacing: 0px;
- line-height: 12px;
- text-align: left;
- border-radius: 50px 50px 50px 0px;
- margin-bottom: 5px;
- }
- #iphone8 .bubble-left .fa{
- font-size: 20px;
- color: #777;
- letter-spacing: 0px;
- }
- #iphone8 .icon-left{
- position: relative;
- width: 45px;
- height: 45px;
- top: -35px;
- left: -110px;
- background-image: url(https://i.imgur.com/Zaa2xIy.gif);
- background-size: 45px;
- border-radius: 100px;
- }
- #iphone8 .text-field{
- position: absolute;
- width: 200px;
- height: 33px;
- bottom: 7px;
- right: 10px;
- background: #fff;
- border: 0.5px solid #cacaca;
- padding-top: 0px;
- opacity: 0.97;
- border-radius: 50px;
- box-shadow: 1px 1px #f7f7f7;
- }
- #iphone8 .text-field .fa{
- color: #aaa;
- font-size: 18px;
- margin-top: 9px;
- margin-right: -163px;
- }
- #iphone8 .symbols{
- position: absolute;
- width: 200px;
- height: 35px;
- bottom: 0px;
- left: 5px;
- background: #fff;
- padding-top: 0px;
- opacity: 0.97;
- text-align: left;
- }
- #iphone8 .symbols .fa{
- color: #aaa;
- font-size: 21px;
- margin-left: 11px;
- letter-spacing: 0px;
- }
- #iphone8 .lockscreen{
- position: absolute;
- overflow: hidden;
- width: 297px;
- height: 526px;
- top: 0px;
- right: 0px;
- background-image: url(https://i.imgur.com/Co9ioq3.png);
- background-size: 297px;
- -webkit-transition: 1s ease-in 1s;
- transition: 1s ease-in 1s;
- }
- #iphone8:hover .lockscreen{
- right: -297px;
- -webkit-transition: 1s ease-in .2s;
- transition: 1s ease-in .2s;
- }
- #iphone8 .lockscreen .fa{
- color: #fff;
- letter-spacing: 0px;
- }
- #iphone8 .lockscreen .topbar{
- background: transparent;
- opacity: 1;
- top: -3px;
- position: absolute;
- letter-spacing: 0px;
- }
- #iphone8 .lockscreen e{
- color: #fff;
- font-size: 10px;
- font-family: 'Roboto', sans-serif;
- font-weight: 500;
- letter-spacing: -0.5px;
- line-height: 10px;
- }
- #iphone8 .time{
- position: absolute;
- background: transparent;
- width: 297px;
- height: 100px;
- top: 55px;
- right: 0px;
- color: #fff;
- font-size: 66px;
- font-family: 'Roboto', sans-serif;
- font-weight: 100;
- letter-spacing: -1px;
- line-height: 66px;
- }
- #iphone8 .date{
- position: absolute;
- background: transparent;
- width: 297px;
- height: 100px;
- top: 124px;
- right: 0px;
- color: #fff;
- font-size: 13px;
- font-family: 'Roboto', sans-serif;
- font-weight: 400;
- letter-spacing: 0px;
- line-height: 13px;
- }
- #iphone8 .unlock{
- position: absolute;
- background: transparent;
- width: 297px;
- height: 100px;
- top: 455px;
- right: 0px;
- color: #fff;
- font-size: 15.5px;
- font-family: 'Roboto', sans-serif;
- font-weight: 300;
- letter-spacing: 0px;
- line-height: 16px;
- opacity: 0.6;
- }
- </style>
- <center>
- <div id='iphone8'>
- <div class='base'>
- <div class='message-base'>
- <c>iMessage <br> Today 4.56 AM</c> <p>
- <div class='bubble-box'>
- <div class='bubble-right'>hi there !</div>
- <div class='icon-right'></div>
- </div>
- <div class='bubble-box'>
- <div class='bubble-left'>hi too!! how're you doing?</div>
- <div class='icon-left'></div>
- </div>
- <div class='bubble-box'>
- <div class='bubble-right'>well, i'm doing so great these days! thanks for asking :)</div>
- <div class='bubble-right'>how about you?</div>
- <div class='icon-right'></div>
- </div>
- <div class='bubble-box'>
- <div class='bubble-left'>so, you can type anything you want here. </div>
- <div class='icon-left'></div>
- </div>
- <div class='bubble-box'>
- <div class='bubble-right'>in this bubble too!</div>
- <div class='icon-right'></div>
- </div>
- <div class='bubble-box'>
- <div class='bubble-left'><i class='fa fa-ellipsis-h'></i></div>
- <div class='icon-left'></div>
- </div>
- </div>
- <div class='symbols'><i class='fa fa-camera'></i><i class='fa fa-adn' style="font-size:25px;"></i></div>
- <div class='text-field'><i class='fa fa-microphone'></i></div>
- <div class='topbar'>
- <i class='fa fa-circle'></i><i class='fa fa-circle'></i><i class='fa fa-circle'></i><i class='fa fa-circle-o'></i><i class='fa fa-circle-o' style="margin-right:-1px;"></i>
- <d>Verizon</d><i class='fa fa-wifi' style="font-size:11px;margin-right:38px;margin-left:3px;"></i>
- <d style="margin-right:77px;">12.34 AM</d>
- <d>100%</d><i class='fa fa-battery' style="margin-left:2px;font-size:12px;"></i>
- </div>
- <div class='iconbar'>
- <div class='icon'>
- <a href="http://shadowplayers.jcink.net/index.php?showuser=95" title="hanie ©">
- <img src="https://i.imgur.com/Zaa2xIy.gif" style="width:70px;border-radius:100px;"></a>
- </div>
- <div class='alias'>Pearl</div>
- <div class='left'><i class='fa fa-angle-left'></i></div>
- <div class='right'><i class='fa fa-info'></i></div>
- </div>
- <div class='lockscreen'>
- <div class='topbar'>
- <i class='fa fa-circle'></i><i class='fa fa-circle'></i><i class='fa fa-circle'></i><i class='fa fa-circle-o'></i><i class='fa fa-circle-o' style="margin-right:-1px;"></i>
- <e>Verizon</e><i class='fa fa-wifi' style="font-size:11px;margin-right:35px;margin-left:3px;"></i>
- <i class='fa fa-window-minimize' style="opacity:0.6;margin-right:90px;margin-left:13px;font-size:20px;"></i>
- <e>100%</e><i class='fa fa-battery' style="margin-left:2px;font-size:12px;"></i>
- </div>
- <div class='time'>12:34 </div>
- <div class='date'>Tuesday, January 30 </div>
- <div class='unlock'>
- <i class='fa fa-angle-right' style='margin-right:10px;font-size:18px;'></i>slide to unlock
- <p><i class='fa fa-window-minimize' style="opacity:0.7;font-size:20px;"></i>
- </div>
- </div>
- </div>
- </div>
- </center>
- [/dohtml]
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement