phonesim

 
Textarea editor mode
JS Bin features
Getting started
Keyboard Shortcuts
Exporting/importing gist
 
Pro features
Private bins
Vanity URLs
Upgrade to pro now
 
Blog
The Return and The Refactor
Help
How to customise the editor settings
How to add more libraries to the library list
 
Donate to JS Bin ❤
Support JS Bin to keep the project open source & MIT for all
Follow @js_bin on twitter
By using JS Bin you agree to our legal terms
 
“Everyone should learn how to program a computer because it teaches you how to think” —
Steve Jobs

None
-
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
​
<title>PhoneSim — Telefon Simülasyonu</title>
​
<style>
*{
    box-sizing:border-box;
}
​
body{
    margin:0;
    background:#111;
    color:#fff;
    font-family:Arial,sans-serif;
    display:flex;
    justify-content:center;
    min-height:100vh;
}
​
.phone{
    width:min(100vw,430px);
    height:100vh;
    background:linear-gradient(160deg,#18233a,#101522);
    overflow:hidden;
}
​
.status{
    height:32px;
    padding:8px 15px;
    font-size:12px;
    display:flex;
    justify-content:space-between;
}
​
.screen{
    height:calc(100% - 32px);
    overflow:auto;
    padding:14px 14px 30px;
}
​
h1{
    font-size:25px;
    margin:8px 0 5px;
}
​
h2{
    margin-top:5px;
}
​
h3{
    margin-top:5px;
}
​
.sub{
    font-size:13px;

anonymous
17 Aug