Subversion Repositories cheapmusic

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
65 - 1 
<!DOCTYPE html>
2 
<html>
3 
<head>
4 
<meta name="viewport" content="width=device-width, initial-scale=1">
5 
<style>
6 
body {
7 
  background: #f1f1f1;
8 
}
9 
 
10 
/* The device with borders */
11 
.tablet {
12 
  position: relative;
13 
  width: 768px;
14 
  height: 1024px;
15 
  margin: auto;
16 
  border: 16px black solid;
17 
  border-top-width: 60px;
18 
  border-bottom-width: 60px;
19 
  border-radius: 36px;
20 
}
21 
 
22 
/* The horizontal line on the top of the device */
23 
.tablet:before {
24 
  content: '';
25 
  display: block;
26 
  width: 60px;
27 
  height: 5px;
28 
  position: absolute;
29 
  top: -30px;
30 
  left: 50%;
31 
  transform: translate(-50%, -50%);
32 
  background: #333;
33 
  border-radius: 10px;
34 
}
35 
 
36 
/* The circle on the bottom of the device */
37 
.tablet:after {
38 
  content: '';
39 
  display: block;
40 
  width: 35px;
41 
  height: 35px;
42 
  position: absolute;
43 
  left: 50%;
44 
  bottom: -65px;
45 
  transform: translate(-50%, -50%);
46 
  background: #333;
47 
  border-radius: 50%;
48 
}
49 
 
50 
/* The screen (or content) of the device */
51 
.tablet .content {
52 
  width: 768px;
53 
  height: 1024px;
54 
  background: white;
55 
  margin: -1px;
56 
}
57 
</style>
58 
</head>
59 
<body>
60 
 
61 
<div class="tablet">
62 
  <div class="content">
63 
    <iframe src="/index.php" style="width:100%;border:none;height:100%" />
64 
  </div>
65 
</div>
66 
 
67 
</body>
68 
</html>