SHOW:
|
|
- or go back to the newest paste.
1 | - | .tabs { |
1 | + | root { |
2 | - | position: relative; |
2 | + | display: block; |
3 | - | width: 680px; |
3 | + | |
4 | - | min-height: 350px; |
4 | + | /*Membuat bentuk dari kotak1 samapai kotak 7*/ |
5 | - | margin: 1.2em auto 1em auto; |
5 | + | #kotak1{ |
6 | width:1000px;/*Lebar kotak*/ | |
7 | - | .tabs .tab { |
7 | + | height:1090px;/*Tinggi kotak*/ |
8 | - | display: inline-block; |
8 | + | border:1px solid #cdcdcd; /*Border kotak*/ |
9 | - | margin: 0 -1px; |
9 | + | background:#f0f3f6;/*Background/warna kotak*/ |
10 | margin:auto;/*Supaya kotak berada di tengah*/ | |
11 | - | .tabs .tab label { |
11 | + | |
12 | - | position: relative; |
12 | + | #kotak2{ |
13 | - | margin: 0; |
13 | + | width:960px; |
14 | - | background: #dadada; |
14 | + | height:150px; |
15 | - | border: 1px solid #ccc; |
15 | + | border:1px solid #cdcdcd; |
16 | - | border-bottom: none; |
16 | + | background:#639fce; |
17 | - | -moz-border-radius:.5em; |
17 | + | margin:auto; |
18 | - | -webkit-border-radius:.5em; |
18 | + | margin-top:5px;/*jarak kotak dengan kotak diatasnya di beri 5px*/ |
19 | - | -khtml-border-radius:.5em; |
19 | + | |
20 | - | border-radius:.5em; |
20 | + | #kotakslider |
21 | - | padding: .5em .6em; |
21 | + | { |
22 | - | font-weight: 700; |
22 | + | width:960px; |
23 | - | cursor: pointer; |
23 | + | height:360px; |
24 | border:1px solid #cdcdcd; | |
25 | - | .tabs .tab [type=radio] { |
25 | + | |
26 | - | display: none; |
26 | + | margin:auto; |
27 | margin-top:5px;/*jarak kotak dengan kotak diatasnya di beri 5px*/ | |
28 | - | .tabs .tab [type=radio]:checked ~ label { |
28 | + | |
29 | - | background: #d8fbda; |
29 | + | #kotak4{ |
30 | - | border-bottom: 1px solid white; |
30 | + | width:960px; |
31 | - | text-decoration: underline; |
31 | + | height:500px; |
32 | border:1px solid #cdcdcd; | |
33 | - | .tabs .tab [type=radio]:checked ~ label ~ .content { |
33 | + | background:#639fce; |
34 | - | display: block; |
34 | + | margin:auto; |
35 | margin-top:5px; | |
36 | - | .tabs .tab .content { |
36 | + | |
37 | - | display:none; |
37 | + | #kotak5{ |
38 | - | position: absolute; |
38 | + | width:240px; |
39 | - | top: 1.7em; |
39 | + | height:485px; |
40 | - | left: 0; |
40 | + | border:1px solid #cdcdcd; |
41 | - | right: 0; |
41 | + | background:#e6e2e2; |
42 | - | background: #fdfdee; |
42 | + | float:left;/*Supaya kotak berada di pinggir kiri*/ |
43 | - | border: 1px solid #ccc; |
43 | + | margin-left:5px; |
44 | - | padding: .3em .8em; |
44 | + | margin-top:5px; |
45 | } | |
46 | #kotak6{ | |
47 | width:700px; | |
48 | height:485px; | |
49 | border:1px solid #cdcdcd; | |
50 | background:#e6e2e2; | |
51 | float:left; | |
52 | margin-left:5px; | |
53 | margin-top:5px; | |
54 | margin-right:5px; | |
55 | } | |
56 | #kotak7{ | |
57 | width:960px; | |
58 | height:30px; | |
59 | border:1px solid #cdcdcd; | |
60 | background:#2fb075; | |
61 | margin:auto; | |
62 | margin-top:5px; | |
63 | } |