Skip to content

Commit feac63e

Browse files
nilajcodernilajcoder
committed
demo div Boxes Button
1 parent 01cd07e commit feac63e

4 files changed

Lines changed: 72 additions & 0 deletions

File tree

‎Demo Div/img1.jpg‎

15.5 KB
Loading

‎Demo Div/img2.jpg‎

30.7 KB
Loading

‎Demo Div/index.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Document</title>
7+
<link rel="stylesheet" href="style.css"/>
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="top-row">
12+
<div class="box"><img src="img1.jpg" alt="Image 1"></div>
13+
<button class="action-button">Button 1</button>
14+
<div class="box"><img src="img1.jpg" alt="Image 2"></div>
15+
<button class="action-button">Button 2</button>
16+
<div class="box"><img src="img1.jpg" alt="Image 3"></div>
17+
<button class="action-button">Button 3</button>
18+
<div class="box"><img src="img1.jpg" alt="Image 4"></div>
19+
<button class="action-button">Button 4</button>
20+
</div>
21+
22+
<div class="bottom-row">
23+
<div class="box"><img src="img1.jpg" alt="Image 5"></div>
24+
<button class="action-button">Button 5</button>
25+
<div class="box"><img src="img1.jpg" alt="Image 6"></div>
26+
<button class="action-button">Button 6</button>
27+
<div class="box"><img src="img1.jpg" alt="Image 7"></div>
28+
<button class="action-button">Button 7</button>
29+
<div class="box"><img src="img1.jpg" alt="Image 8"></div>
30+
<button class="action-button">Button 8</button>
31+
</div>
32+
</div>
33+
</body>
34+
</html>

‎Demo Div/style.css‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
.container {
2+
display: flex;
3+
flex-direction: column;
4+
align-items: flex-start;
5+
gap: 100px; /* Gap between elements */
6+
}
7+
8+
.top-row,
9+
.bottom-row {
10+
display: flex;
11+
align-items: center;
12+
gap: 10px; /* Gap between boxes and buttons */
13+
}
14+
15+
.box {
16+
width: 200px; /* Adjust the width of each box */
17+
height: 271px; /* Adjust the height of each box */
18+
border: 1px solid #000;
19+
box-sizing: border-box;
20+
margin: 10px; /* Adds a margin around each box */
21+
display: flex;
22+
justify-content:center;
23+
align-items: center;
24+
}
25+
26+
.action-button {
27+
padding: 8px 16px;
28+
background-color: #3498db;
29+
color: #fff;
30+
border: none;
31+
border-radius: 4px;
32+
cursor: pointer;
33+
font-size: 14px;
34+
align-items: end;
35+
}
36+
37+
38+

0 commit comments

Comments
 (0)