Skip to content

Commit fc1ad3e

Browse files
ahmad-sa3dahmad-sa3d
committed
add options section to index.html
1 parent aae0be5 commit fc1ad3e

File tree

2 files changed

+91
-10
lines changed

2 files changed

+91
-10
lines changed

‎css/style.css

Lines changed: 47 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@ body{
88
}
99

1010
.container{
11-
/* background: #f5f5f5;*/
11+
/*background: #f5f5f5;*/
1212
width: 590px;
1313
margin: 50px auto;
1414
padding: 10px;
1515
}
1616

17-
.container:before, .container:after{
17+
.clear-fix:before, .clear-fix:after{
1818
content: "";
1919
display: table;
2020
clear: both;
@@ -27,12 +27,12 @@ label{
2727
color: #888;
2828
}
2929

30-
body div {
30+
.block {
3131
width: 250px;
3232
background: #ededed;
3333
padding: 4px 10px;
3434
float: left;
35-
height: 200px;
35+
/*height: 300px;*/
3636
margin: 10px;
3737
border: 1px solid #ccc;
3838
border-radius: 4px;
@@ -50,4 +50,47 @@ div h4
5050
margin: 10px 0 20px;
5151
text-transform: uppercase;
5252
letter-spacing: 3px;
53+
}
54+
55+
.info
56+
{
57+
margin-top: 20px;
58+
border: 1px solid #bbb;
59+
border-radius: 8px;
60+
height: 120px;
61+
background: rgba( 200, 200, 200, .2 );
62+
box-shadow: inset 0px 0px 6px 2px rgba( 150, 150, 150, .2 );
63+
padding: 8px;
64+
text-align: center;
65+
}
66+
67+
.info:before{
68+
content: 'Options';
69+
color: #999;
70+
letter-spacing: 2px;
71+
text-transform: uppercase;
72+
}
73+
74+
ul{
75+
padding: 0px;
76+
list-style-type: none;
77+
/*text-align: center;*/
78+
}
79+
80+
li{
81+
color: rgb( 100, 100, 100 );
82+
float: left;
83+
width: 50%;
84+
padding: 2px 0;
85+
font: normal 12px monaco, Georgia, Arial;
86+
}
87+
88+
li span{
89+
color: rgb( 106, 152, 60);
90+
}
91+
92+
li span:before
93+
{
94+
content:" : ";
95+
color: #999;
5396
}

‎index.html

Lines changed: 44 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -81,34 +81,72 @@
8181

8282
<body>
8383

84-
<section class="container">
84+
<section class="container clear-fix">
8585

86-
<div class="gender">
86+
<div class="gender block">
8787
<h4>Select Gender</h4>
8888

8989
<label for="gender">Male </label><input type="radio" name="gender" value="male" ><br />
9090
<label >Female </label><input type="radio" name="gender" value="female" ><br />
9191
<label >Select </label><input type="radio" name="gender" value="select" checked >
92+
93+
<div class="info">
94+
<ul class="clear-fix">
95+
<li>Theme<span>light</span></li>
96+
<li>blobOffset<span>0</span></li>
97+
<li>autoStick<span>true</span></li>
98+
</ul>
99+
</div>
92100

93101
</div>
94-
<div class="level">
102+
<div class="level block">
95103
<h4>Level</h4>
96104

97105
<label >level 1 </label><input type="radio" name="level" value="level1" ><br />
98-
<label >level2 </label><input type="radio" name="level" value="level2" checked >
106+
<label >level 3 </label><input type="radio" name="level" value="level2" disabled >
107+
<label >level 3 </label><input type="radio" name="level" value="level3" checked >
108+
109+
<div class="info">
110+
<ul class="clear-fix">
111+
<li>Theme<span>flat</span></li>
112+
<li>blobOffset<span>1</span></li>
113+
</ul>
114+
</div>
99115
</div>
100-
<div class="permissions">
116+
117+
<div class="permissions block">
101118
<h4>Permissions</h4>
102119

103120
<label >Access CP</label><input type="checkbox" name="access_cp" value="access_cp"><br />
104121
<label >Manage Users </label><input type="checkbox" name="manage_users" value="manage_users" checked >
122+
123+
<div class="info">
124+
<ul class="clear-fix">
125+
<li>width<span>44</span></li>
126+
<li>height<span>16</span></li>
127+
<li>Theme<span>dark</span></li>
128+
<li>blobOffset<span>2</span></li>
129+
<li>autoStick<span>true</span></li>
130+
<li>onText<span>YES</span></li>
131+
<li>offText<span>NO</span></li>
132+
</ul>
133+
</div>
105134
</div>
106135

107-
<div class="delete">
136+
<div class="delete block">
108137
<h4>Delete users</h4>
109138

110139
<label >user1 </label><input type="checkbox" name="users_id[]" value="1" checked /><br />
111140
<label >user2 </label><input type="checkbox" name="users_id[]" value="2" />
141+
142+
<div class="info">
143+
<ul class="clear-fix">
144+
<li>Theme<span>modern</span></li>
145+
<li>inputs<span>true</span></li>
146+
<li>onText<span>Del</span></li>
147+
<li>offText<span>NO</span></li>
148+
</ul>
149+
</div>
112150
</div>
113151

114152
</section>

0 commit comments

Comments
 (0)