html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="container">
<div class="item1">
<img src="https://preview.redd.it/who-is-arguably-the-most-famous-cartoon-character-of-all-v0-1y8q3zvs2rzb1.jpg?width=640&crop=smart&auto=webp&s=034ac2ac2f2bee11cdd0d1ed6e64ea770110f550" alt="" />
<h1>hello world</h1>
<p>
simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived
not only five centuries, but also the leap into electronic
</p>
<button>order now</button>
</div>
<div class="item1">
<img src="https://img.freepik.com/free-photo/cute-ai-generated-cartoon-bunny_23-2150288885.jpg" alt="" />
<h1>hello world</h1>
<p>
simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: #08f30863;
}
.container{
width: 80vw;
margin: 0 auto;
display: grid;
grid-template-rows: repeat(auto-fit, minmax(4, 1fr));
grid-template-columns: repeat(auto-fit, minmax(4, 1fr));
gap: 10px;
}
.item1{
border: 2px solid red;
}
.item1 img{
display: flex;
justify-content: center;
max-width: 100%;
max-height: 100%;
margin: 0 auto;
}
.item1 h1{
text-align: center;
Enter to Rename, Shift+Enter to Preview
js
js
1
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run