Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <a href="javascript:;">switch device</a>
  <div class="device macbook">
    <div class="monitor">
      <div class="camera"></div>
      <div class="screen"></div>
    </div>
    <div class="keyboard">
      <div class="button"></div>
      <div class="body"></div>
    </div>
  </div>
</body>
</html>
​
 
.device *{
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
body{
  background:#aaa;
  padding:30px 0 0;
  text-align:center;
}
a{
  display:inline-block;
  height:30px;
  padding:0 20px;
  line-height:30px;
  text-decoration:none;
  color:#333;
  background:#fff;
  border-radius:2px;
}
a:hover{
  background:#333;
  color:#fff
}
.device{
  position:relative;
  margin:20px auto 0;
  width:100%;
}
.monitor {
  top:0;
  left:50%;
  position:absolute;
  background:#fff;
}
.screen {
  background:#333;
}
.camera{
  background:#333;
  border-radius:50%;
}
.keyboard{
  position:absolute;
  background:#fff;
  left:50%;
}
.body{
  background:#fff;
}
.button{
  background:#ccc;
}
.macbook .monitor {
  margin:0 0 0 -123px;
  width:246px;
  height:170px;
  border-radius:7px;
}
.macbook .screen {
  width:228px;
  height:142px;
  margin: 3px auto 0;
}
.macbook .camera{
  width:4px;
  height:4px;
  margin:3px auto 0;
}
.macbook .keyboard{
  width:300px;
  height:5px;
  margin:0 0 0 -150px;
  top:165px;
}
.macbook .body{
  width:300px;
  height:5px;
  margin:1px 0 0;
  border-radius:0 0 12px 12px / 0 0 5px 5px;
}
.macbook .button{
  width:42px;
  height:4px;
  margin:0 auto;
  border-radius:0 0 4px 4px;
}
/*--------*/
​
.iphone .monitor{
  margin:0 0 0 -45px;
  width:90px;
  height:180px;
  border-radius:12px;
}
.iphone .screen{
  width:78px;
  height:116px;
  margin:12px auto 0;
}
.iphone .camera{
  border-radius:2px;
  width:18px;
  height:4px;
  margin:16px auto 0;
}
.iphone .keyboard{
  width:90px;
  height:20px;
  top:148px;
  margin:0 0 0 -45px;
}
.iphone .body{
  width:90px;
  height:12px;
  border-radius:0 0 12px 12px;
}
.iphone .button{
  width:14px;
  height:14px;
  margin:6px auto 0;
  border-radius:50%;
}
​
 
$(document).ready(function(){
  $("a").click(function(){
    $(".device").toggleClass("macbook");
    $(".device").toggleClass("iphone");
//     $(".iphone").removeClass("iphone").addClass("macbook");
  });
});
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
olegmilpro
0viewers