Skip to content

Commit 56c2961

Browse files
PawanSirsatPawanSirsat
committed
Commit
1 parent 1d1f415 commit 56c2961

File tree

2 files changed

+99
-78
lines changed

2 files changed

+99
-78
lines changed

‎09_Check-Box/index.html‎

Lines changed: 9 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -4,94 +4,25 @@
44
<head>
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Your Beautiful Page</title>
8-
<style>
9-
body {
10-
background-color: #f5f5f5;
11-
display: flex;
12-
justify-content: center;
13-
align-items: center;
14-
height: 100vh;
15-
margin: 0;
16-
font-family: sans-serif;
17-
font-size: 23px;
18-
}
19-
20-
span {
21-
display: block;
22-
margin: 20px;
23-
}
24-
25-
.container {
26-
background-color: #fff;
27-
border: 1px solid #ccc;
28-
border-radius: 5px;
29-
padding: 20px;
30-
width: 350px;
31-
text-align: center;
32-
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
33-
}
34-
35-
.container-btn {
36-
display: grid;
37-
justify-content: center;
38-
align-items: center;
39-
margin: 20px 10px;
40-
padding: 10px;
41-
}
42-
43-
button {
44-
background-color: #007bff;
45-
color: #fff;
46-
border: none;
47-
border-radius: 5px;
48-
padding: 10px 20px;
49-
margin: 0 10px;
50-
cursor: pointer;
51-
padding: 10px;
52-
margin: 20px 10px;
53-
font-family: sans-serif;
54-
font-size: 17px;
55-
56-
}
57-
58-
checkbox {
59-
margin: 5px 0;
60-
display: inline;
61-
}
62-
63-
.arrow {
64-
border: solid black;
65-
border-width: 0 3px 3px 0;
66-
display: inline-block;
67-
padding: 5px;
68-
border-radius: 3px;
69-
}
70-
71-
.right {
72-
transform: rotate(-45deg);
73-
-webkit-transform: rotate(-45deg);
74-
}
75-
76-
.left {
77-
transform: rotate(135deg);
78-
-webkit-transform: rotate(135deg);
79-
}
80-
</style>
7+
<title>Checkbox</title>
8+
<link rel="stylesheet" href="./style.css">
819
</head>
8210

8311
<body>
12+
<div class="navbar">
13+
<ul>
14+
<li class="nav-item">Transfer Checked Items To any Direction</li>
15+
</ul>
16+
</div>
8417
<div class="container" id="box1">
85-
<!-- Your content for box1 here -->
8618
</div>
8719

8820
<div class="container-btn">
89-
<button id="right"><i class="arrow right"></i> Right</button>
90-
<button id="left"><i class="arrow left"></i> Left</button>
21+
<button id="right"><i class="arrow right"></i> </button>
22+
<button id="left"><i class="arrow left"></i> </button>
9123
</div>
9224

9325
<div class="container" id="box2">
94-
<!-- Your content for box2 here -->
9526
</div>
9627
<script src="./app.js"></script>
9728
</body>

‎09_Check-Box/style.css‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
body {
2+
background-color: #f5f5f5;
3+
display: flex;
4+
justify-content: center;
5+
align-items: center;
6+
height: 100vh;
7+
margin: 0;
8+
font-family: sans-serif;
9+
font-size: 23px;
10+
}
11+
12+
span {
13+
display: block;
14+
margin: 20px;
15+
}
16+
17+
.container {
18+
background-color: #fff;
19+
border: 1px solid #ccc;
20+
border-radius: 20px;
21+
padding: 20px;
22+
width: auto;
23+
text-align: center;
24+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
25+
}
26+
27+
.container-btn {
28+
display: grid;
29+
justify-content: center;
30+
align-items: center;
31+
margin: 20px 10px;
32+
padding: 10px;
33+
}
34+
35+
button {
36+
background-color: #007bff;
37+
color: #fff;
38+
border: none;
39+
border-radius: 5px;
40+
padding: 10px 20px;
41+
margin: 0 10px;
42+
cursor: pointer;
43+
padding: 10px;
44+
margin: 20px 10px;
45+
font-family: sans-serif;
46+
font-size: 17px;
47+
}
48+
49+
checkbox {
50+
margin: 5px 0;
51+
display: inline;
52+
}
53+
54+
.arrow {
55+
border: solid black;
56+
border-width: 0 3px 3px 0;
57+
display: inline-block;
58+
padding: 5px;
59+
border-radius: 3px;
60+
}
61+
62+
.right {
63+
transform: rotate(-45deg);
64+
-webkit-transform: rotate(-45deg);
65+
}
66+
67+
.left {
68+
transform: rotate(135deg);
69+
-webkit-transform: rotate(135deg);
70+
}
71+
72+
.navbar {
73+
position: fixed;
74+
top: 0;
75+
left: 0;
76+
width: 100%;
77+
background-color: #333;
78+
color: white;
79+
}
80+
81+
.navbar ul {
82+
list-style-type: none;
83+
padding: 0;
84+
}
85+
86+
.nav-item {
87+
padding: 15px;
88+
cursor: pointer;
89+
text-align: center;
90+
}

0 commit comments

Comments
 (0)