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 | } |
