Skip to content

Commit e49eeb6

Browse files
zonayedpcazonayedpca
committed
DOM
0 parents  commit e49eeb6

File tree

4 files changed

+110
-0
lines changed

4 files changed

+110
-0
lines changed

‎index.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Selecting Elements - JavaScript DOM Manipulation</title>
6+
<link rel="stylesheet" href="style.css">
7+
</head>
8+
<body>
9+
<div class="wrapper">
10+
<div class="boxes">
11+
<div id="box1" class="box" data-atr="box1" data-extra="attrToRemove">
12+
<h4>Box 1</h4>
13+
</div>
14+
<div id="box2" class="box" data-atr="box2">
15+
<h4>Box 2</h4>
16+
</div>
17+
<div id="box3" class="box" data-atr="box3">
18+
<h4>Box 3</h4>
19+
Lorem ipsum <strong>dolor sit</strong> <p>amet, <em>consectetur</em> adipisicing elit, <strong>sed do eiusmod</strong> tempor incididunt ut labore et dolore magna aliqua</p>
20+
</div>
21+
<div id="box4" class="box" data-atr="box4">
22+
<h4>Box 4</h4>
23+
<ul>
24+
<li>About this document</li>
25+
<li><a href="#">JavaScript DOM Manipulation</a></li>
26+
<li><a href="#">Learn With Zonayed</a></li>
27+
</ul>
28+
</div>
29+
</div>
30+
</div>
31+
<script src="script.js" charset="utf-8"></script>
32+
</body>
33+
</html>

‎script-before.js

Whitespace-only changes.

‎script.js

Whitespace-only changes.

‎style.css

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: 'consolas', monospace;
9+
background-color: #e3e3e3;
10+
}
11+
12+
.wrapper {
13+
display: flex;
14+
margin: 0 auto;
15+
width: 460px;
16+
align-items: center;
17+
height: 100vh;
18+
}
19+
20+
.boxes {
21+
width: 100%;
22+
}
23+
24+
.box {
25+
background-color: #333;
26+
color: #fff;
27+
border-radius: 4px;
28+
margin: 15px 0;
29+
padding: 25px;
30+
width: 100%;
31+
text-align: center;
32+
-webkit-box-shadow: 0 5px 30px hsla(224,8%,64%,.25);
33+
box-shadow: 0 5px 30px hsla(224,8%,64%,.25);
34+
}
35+
36+
.box h4 {
37+
font-weight: bolder;
38+
text-transform: uppercase;
39+
font-size: 28px;
40+
}
41+
42+
.box ul {
43+
list-style: none;
44+
}
45+
46+
.box ul li {
47+
margin: 5px 0;
48+
}
49+
50+
.box ul li a {
51+
display: inline-block;
52+
text-decoration: none;
53+
background-color: #fff;
54+
color: #333;
55+
padding: 2px 5px;
56+
border-radius: 4px;
57+
}
58+
59+
#box1 {
60+
background-color: #F44336;
61+
}
62+
63+
#box2 {
64+
background-color: #9C27B0;
65+
}
66+
67+
#box3 {
68+
background-color: #3F51B5;
69+
}
70+
71+
#box4 {
72+
background-color: #4CAF50;
73+
}
74+
75+
.black-bg {
76+
background-color: #000;
77+
}

0 commit comments

Comments
 (0)