Skip to content

Commit 83786d7

Browse files
mattolivrmattolivr
committed
2-DR1-TP1.06
1 parent 4e35468 commit 83786d7

File tree

3 files changed

+101
-1
lines changed

3 files changed

+101
-1
lines changed

‎2-desenvolvimento-front-end/DR1-mobile-first-ui/DR1-TP1.05/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<li>Item 2</li>
1515
<li>Item 3</li>
1616
</ul>
17-
<!-- Ex 11 -->
17+
<!-- Ex 13 -->
1818
<ul id="segundo">
1919
<li>Item 1</li>
2020
<li>Item 2</li>

‎2-desenvolvimento-front-end/DR1-mobile-first-ui/DR1-TP1.06/index.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
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+
<link rel="stylesheet" href="./style.css">
7+
<title>DR1-TP1.06</title>
8+
</head>
9+
<body>
10+
<main>
11+
<!-- Ex 14 -->
12+
<ul id="primeiro">
13+
<li>Item 1</li>
14+
<li>Item 2</li>
15+
<li>Item 3</li>
16+
<li>Item 4</li>
17+
<li>Item 5</li>
18+
<li>Item 6</li>
19+
<li>Item 7</li>
20+
<li>Item 8</li>
21+
<li>Item 9</li>
22+
<li>Item 10</li>
23+
<li>Item 11</li>
24+
<li>Item 12</li>
25+
</ul>
26+
<!-- Ex 15 -->
27+
<ul id="segundo">
28+
<li>Item 1</li>
29+
<li>Item 2</li>
30+
<li>Item 3</li>
31+
<li>Item 4</li>
32+
<li>Item 5</li>
33+
<li>Item 6</li>
34+
<li>Item 7</li>
35+
</ul>
36+
<!-- Ex 16 -->
37+
<ul id="terceiro">
38+
<li>Item 1</li>
39+
<li>Item 2</li>
40+
<li>Item 3</li>
41+
<li>Item 4</li>
42+
<li>Item 5</li>
43+
<li>Item 6</li>
44+
<li>Item 7</li>
45+
<li>Item 8</li>
46+
<li>Item 9</li>
47+
</ul>
48+
</main>
49+
</body>
50+
</html>

‎2-desenvolvimento-front-end/DR1-mobile-first-ui/DR1-TP1.06/style.css‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
body {
2+
background-color: #333333;
3+
color: #ffffff;
4+
font-family: Verdana, Geneva, Tahoma, sans-serif;
5+
}
6+
7+
main {
8+
border: 1px solid #494949;
9+
padding: 16px;
10+
border-radius: 8px;
11+
}
12+
13+
ul {
14+
list-style-type: none;
15+
padding: 0;
16+
17+
display: grid;
18+
gap: 8px;
19+
20+
&#primeiro {
21+
grid-template-columns: 1fr 1fr 1fr 1fr;
22+
grid-template-rows: 80px 80px 80px;
23+
}
24+
25+
&#segundo {
26+
grid-template-columns: 1fr 1fr 1fr;
27+
grid-auto-rows: 80px;
28+
29+
li:nth-child(1) {
30+
grid-column: span 2;
31+
border: 1px solid rgb(156, 60, 60);
32+
}
33+
34+
li:nth-child(2) {
35+
grid-row: span 2;
36+
border: 1px solid rgb(60, 82, 156);
37+
}
38+
}
39+
40+
&#terceiro {
41+
grid-template-columns: 1fr 3fr 2fr;
42+
grid-auto-rows: 80px;
43+
}
44+
}
45+
46+
li {
47+
background-color: #3a3a3a;
48+
padding: 12px 16px;
49+
border-radius: 6px;
50+
}

0 commit comments

Comments
 (0)