-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
55 lines (55 loc) · 1.37 KB
/
index.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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.parent {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 20px;
grid-row-gap: 20px;
height: 590px;
width: 90%;
margin: auto;
}
.parent div {
background-color: blue;
}
.div1 {
grid-area: 1 / 1 / 3 / 2;
}
.div2 {
grid-area: 1 / 2 / 2 / 3;
}
.div3 {
grid-area: 1 / 3 / 2 / 5;
}
.div4 {
grid-area: 2 / 2 / 3 / 4;
}
.div5 {
grid-area: 2 / 4 / 3 / 5;
}
</style>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="parent">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
</div>
<p>
Parrafo Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem eius, earum iusto beatae velit odio magnam, soluta nam illum error labore iste rem quis assumenda repellendus iure! Veniam, in laborum?
</p>
<p>
parrafo 2
</p>
</body>
</html>