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