diff --git a/TPSI/savio_gabriele/CSS/es39/savio_esercizio_css_39.css b/TPSI/savio_gabriele/CSS/es39/savio_esercizio_css_39.css index 1b4568c6..0e1fe63b 100644 --- a/TPSI/savio_gabriele/CSS/es39/savio_esercizio_css_39.css +++ b/TPSI/savio_gabriele/CSS/es39/savio_esercizio_css_39.css @@ -44,7 +44,7 @@ button { position: absolute; z-index: 10; bottom: 60px; - left: 70%; + left: 65%; } .image-section { diff --git a/TPSI/savio_gabriele/CSS/es43/savio_esercizio_css_43.css b/TPSI/savio_gabriele/CSS/es43/savio_esercizio_css_43.css new file mode 100644 index 00000000..895a5ffb --- /dev/null +++ b/TPSI/savio_gabriele/CSS/es43/savio_esercizio_css_43.css @@ -0,0 +1,100 @@ +body { + font-family: "Courier New", Courier, monospace; +} + +.container { + position: absolute; + width: 1020px; + border: 1px solid black; + left: 50%; + top: 50%; + transform: translate(-50%,-50%); +} + +.cell_black { + position: absolute; + background-color: #364859; + margin: -15px; + width: 300px; + height: 80px; + top: 70px; + color: white; + text-align: left; + font-size: 30px; + padding-left: 50px; + padding-top: 25px; +} + +.cell_right { + height: 775px; + width: 350px; + margin: 15px; + background-color: #c258eb; + float: left; +} + +.cell1 { + position: relative; + background-color: rgb(111, 217, 184); + color: white; + width: 200px; + height: 150px; + float: left; + margin: 15px; + padding: 20px; +} + +.cell2 { + position: relative; + background-color: #2eb1ff; + color: white; + width: 300px; + height: 150px; + float: left; + margin: 15px; + padding: 20px; +} + +.cell3 { + position: relative; + background-color: #43d9e6; + color: white; + width: 300px; + height: 300px; + float: left; + margin: 15px; + padding: 20px; +} +.cell4 { + position: relative; + background-color: #fe5d5a; + color: white; + width: 200px; + height: 300px; + float: left; + margin: 15px; + padding: 20px; +} + +.cell5 { + position: relative; + background-color: #ffbe4c; + color: white; + width: 570px; + height: 150px; + float: left; + margin: 15px; + padding: 20px; +} + +hr { + border: 5px solid #fff; + width: 30px; + margin-left: 0; +} +h1 { + text-align: end; + position: relative; + left: -20px; + top: -10px; +} diff --git a/TPSI/savio_gabriele/CSS/es43/savio_esercizio_css_43.html b/TPSI/savio_gabriele/CSS/es43/savio_esercizio_css_43.html new file mode 100644 index 00000000..92c7ac0b --- /dev/null +++ b/TPSI/savio_gabriele/CSS/es43/savio_esercizio_css_43.html @@ -0,0 +1,41 @@ + + + + + + + es 34 + + +
+
+
Gruppo
Momay
+
+
+

01

+
+

Write some text here.

+
+
+

02

+
+

Write some text here.

+
+
+

03

+
+

Write some text here.

+
+
+

04

+
+

Write some text here.

+
+
+

05

+
+

Write some text here.

+
+
+ + diff --git a/TPSI/savio_gabriele/CSS/es44/savio_esercizio_css_44.css b/TPSI/savio_gabriele/CSS/es44/savio_esercizio_css_44.css new file mode 100644 index 00000000..95bf6ffe --- /dev/null +++ b/TPSI/savio_gabriele/CSS/es44/savio_esercizio_css_44.css @@ -0,0 +1,23 @@ +.container { + position: absolute; + left: 50%; + top: 10%; + transform: translate(-50%, -50%); + display: flex; + width: 50%; + padding: 5px; + border: #5e5e5e solid 1px; + border-radius: 2px; + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.element { + background-color: #476b98; + border: 1px #6dabba solid; + border-radius: 10px; + padding: 10px; + color: #fff; + font-size: large; +} diff --git a/TPSI/savio_gabriele/CSS/es44/savio_esercizio_css_44.html b/TPSI/savio_gabriele/CSS/es44/savio_esercizio_css_44.html new file mode 100644 index 00000000..71941dcb --- /dev/null +++ b/TPSI/savio_gabriele/CSS/es44/savio_esercizio_css_44.html @@ -0,0 +1,17 @@ + + + + + + + es 44 + + +
+ + + + +
+ + diff --git a/TPSI/savio_gabriele/CSS/es45/savio_esercizio_css_45.css b/TPSI/savio_gabriele/CSS/es45/savio_esercizio_css_45.css new file mode 100644 index 00000000..0f877687 --- /dev/null +++ b/TPSI/savio_gabriele/CSS/es45/savio_esercizio_css_45.css @@ -0,0 +1,29 @@ +body { + font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif; +} +.container { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + display: flex; + width: 45%; + height: 40%; + padding: 8px; + border: #5e5e5e solid 1px; + border-radius: 2px; + display: flex; + flex-direction: row; + align-items: stretch; +} + +.cell { + width: calc(100% / 3); + background-color: #476b98; + border: 1px #6dabba solid; + border-radius: 10px; + padding: 10px; + color: #fff; + font-size: 1.4em; + line-height: 1.8; +} diff --git a/TPSI/savio_gabriele/CSS/es45/savio_esercizio_css_45.html b/TPSI/savio_gabriele/CSS/es45/savio_esercizio_css_45.html new file mode 100644 index 00000000..3d667c1b --- /dev/null +++ b/TPSI/savio_gabriele/CSS/es45/savio_esercizio_css_45.html @@ -0,0 +1,20 @@ + + + + + + + es 44 + + +
+
I am small
+
I have more content than the very small item.
+
+ I have lots of content. So much content that I don't know where it is + all going to go. I'm glad that CSS is pretty good at dealing with + situations where we end up with more words than expected! +
+
+ + \ No newline at end of file diff --git a/TPSI/savio_gabriele/CSS/es46/savio_esercizio_css_46.css b/TPSI/savio_gabriele/CSS/es46/savio_esercizio_css_46.css new file mode 100644 index 00000000..e0a7eae3 --- /dev/null +++ b/TPSI/savio_gabriele/CSS/es46/savio_esercizio_css_46.css @@ -0,0 +1,25 @@ +body { + font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif; +} +.container { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + display: flex; + width: 25%; + height: 30%; + padding: 8px; + border: #6dabba solid 2px; + border-radius: 7px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; +} + +.cell { + background-color: #476b98; + padding: 10px; + color: #fff; +} diff --git a/TPSI/savio_gabriele/CSS/es46/savio_esercizio_css_46.html b/TPSI/savio_gabriele/CSS/es46/savio_esercizio_css_46.html new file mode 100644 index 00000000..093a374d --- /dev/null +++ b/TPSI/savio_gabriele/CSS/es46/savio_esercizio_css_46.html @@ -0,0 +1,14 @@ + + + + + + + es 46 + + +
+
Center me.
+
+ + \ No newline at end of file diff --git a/TPSI/savio_gabriele/CSS/es47/savio_esercizio_css_47.css b/TPSI/savio_gabriele/CSS/es47/savio_esercizio_css_47.css new file mode 100644 index 00000000..834aeb68 --- /dev/null +++ b/TPSI/savio_gabriele/CSS/es47/savio_esercizio_css_47.css @@ -0,0 +1,21 @@ +.container { + width: 450px; + height: 180px; + display: flex; + padding: 20px; + border: 1px solid #ccc; + border-radius: 8px; + flex-wrap: wrap; + align-content: stretch; + justify-items: stretch; +} + +.cell { + margin: 10px; + background-color: #4d7cae; + color: white; + padding: 10px 20px; + border-radius: 10px; + font-size: 16px; + text-align: start; +} diff --git a/TPSI/savio_gabriele/CSS/es47/savio_esercizio_css_47.html b/TPSI/savio_gabriele/CSS/es47/savio_esercizio_css_47.html new file mode 100644 index 00000000..8672edb9 --- /dev/null +++ b/TPSI/savio_gabriele/CSS/es47/savio_esercizio_css_47.html @@ -0,0 +1,23 @@ + + + + + + + Flexbox Example + + +
+
Turnip
+
greens
+
yarrow
+
ricebean
+
rutabaga
+
endive
+
cauliflower
+
sea lettuce
+
kohlrabi
+
amaranth
+
+ + diff --git a/TPSI/savio_gabriele/CSS/es48/savio_esercizio_css_48.css b/TPSI/savio_gabriele/CSS/es48/savio_esercizio_css_48.css new file mode 100644 index 00000000..f54caa40 --- /dev/null +++ b/TPSI/savio_gabriele/CSS/es48/savio_esercizio_css_48.css @@ -0,0 +1,28 @@ +.container { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.grid { + width: 512px; + height: 512px; + display: grid; + grid-template-columns: repeat(4, 1fr); + border: 2px solid; +} + +h2 { + text-align: center; +} + +.cell { + display: flex; + align-items: center; + justify-content: center; + font-size: 20px; + border: 1px solid; + background-color: orange; + text-align: center; +} diff --git a/TPSI/savio_gabriele/CSS/es48/savio_esercizio_css_48.html b/TPSI/savio_gabriele/CSS/es48/savio_esercizio_css_48.html new file mode 100644 index 00000000..f29e48ef --- /dev/null +++ b/TPSI/savio_gabriele/CSS/es48/savio_esercizio_css_48.html @@ -0,0 +1,32 @@ + + + + + + Document + + + +
+

Il gioco de 15

+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+
13
+
14
+
15
+
+
+
+ + diff --git a/TPSI/savio_gabriele/CSS/es49/savio_esercizio_css_49.css b/TPSI/savio_gabriele/CSS/es49/savio_esercizio_css_49.css new file mode 100644 index 00000000..849564bc --- /dev/null +++ b/TPSI/savio_gabriele/CSS/es49/savio_esercizio_css_49.css @@ -0,0 +1,40 @@ +.grid { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 800px; + display: grid; + grid-template-columns: repeat(6, 1fr); + grid-template-rows: repeat(6, 1fr); + text-align: center; +} + +.cell{ + border: 1px solid red; + padding: 10px; +} + +.cell:nth-child(2){ + border: none; +} + +.cell:nth-child(1) { + grid-row: 1 /2; + grid-column: 2 / 5; +} + +.cell:nth-child(4){ + grid-row: 2 /5; + grid-column: 1 / 1; +} + +.cell:nth-child(5){ + grid-row: 2 / 5; + grid-column: 2 / 5; +} + +.cell:last-child{ + grid-row: 5 / 8; + grid-column: 5 / 7; +} \ No newline at end of file diff --git a/TPSI/savio_gabriele/CSS/es49/savio_esercizio_css_49.html b/TPSI/savio_gabriele/CSS/es49/savio_esercizio_css_49.html new file mode 100644 index 00000000..41428114 --- /dev/null +++ b/TPSI/savio_gabriele/CSS/es49/savio_esercizio_css_49.html @@ -0,0 +1,38 @@ + + + + + + Document + + + +
+
1
+
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
+ + diff --git a/TPSI/savio_gabriele/CSS/es50/savio_esercizio_css_50.css b/TPSI/savio_gabriele/CSS/es50/savio_esercizio_css_50.css new file mode 100644 index 00000000..dc432e4d --- /dev/null +++ b/TPSI/savio_gabriele/CSS/es50/savio_esercizio_css_50.css @@ -0,0 +1,18 @@ +.grid { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + display: grid; + gap: 10px; + grid-template-columns: repeat(3, 1fr); +} + +.cell{ + background-color: rgb(41, 41, 41); + color: #fff; + font-size: 40px; + padding: 55px; + width: 120px; + border-radius: 10px; +} \ No newline at end of file diff --git a/TPSI/savio_gabriele/CSS/es50/savio_esercizio_css_50.html b/TPSI/savio_gabriele/CSS/es50/savio_esercizio_css_50.html new file mode 100644 index 00000000..42a62535 --- /dev/null +++ b/TPSI/savio_gabriele/CSS/es50/savio_esercizio_css_50.html @@ -0,0 +1,19 @@ + + + + + + Document + + + +
+
A
+
B
+
C
+
D
+
E
+
F
+
+ + diff --git a/TPSI/savio_gabriele/CSS/es51/savio_esercizio_css_51.css b/TPSI/savio_gabriele/CSS/es51/savio_esercizio_css_51.css new file mode 100644 index 00000000..6807d134 --- /dev/null +++ b/TPSI/savio_gabriele/CSS/es51/savio_esercizio_css_51.css @@ -0,0 +1,27 @@ +.grid { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + display: grid; + width: 650px; + gap: 10px; + grid-template-columns: repeat(3, 1fr); +} + +.cell{ + background-color: rgb(41, 41, 41); + color: #fff; + font-size: 40px; + padding: 55px; + border-radius: 10px; +} + +.cell:nth-child(1){ + grid-column: 1/ 3; +} + +.cell:nth-child(2){ + grid-row: 1 / 3; + grid-column: 3 / 4; +} \ No newline at end of file diff --git a/TPSI/savio_gabriele/CSS/es51/savio_esercizio_css_51.html b/TPSI/savio_gabriele/CSS/es51/savio_esercizio_css_51.html new file mode 100644 index 00000000..3b861e09 --- /dev/null +++ b/TPSI/savio_gabriele/CSS/es51/savio_esercizio_css_51.html @@ -0,0 +1,17 @@ + + + + + + Document + + + +
+
A
+
B
+
C
+
D
+
+ + diff --git a/TPSI/savio_gabriele/CSS/es52/savio_esercizio_css_52.css b/TPSI/savio_gabriele/CSS/es52/savio_esercizio_css_52.css new file mode 100644 index 00000000..d4ef9286 --- /dev/null +++ b/TPSI/savio_gabriele/CSS/es52/savio_esercizio_css_52.css @@ -0,0 +1,34 @@ +.grid { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 700px; + display: grid; + gap: 10px; + grid-template-columns: repeat(4, 1fr); +} + +.cell{ + background-color: rgb(41, 41, 41); + color: #fff; + font-size: 40px; + padding: 55px; + border-radius: 10px; +} + +.cell:nth-child(1){ + grid-column: 1 / 3; +} + +.cell:nth-child(2){ + grid-column: 3 / 5; +} + +.cell:nth-child(4){ + grid-column: 2 / 5; +} + +.cell:last-child{ + grid-column: 1 / 5; +} \ No newline at end of file diff --git a/TPSI/savio_gabriele/CSS/es52/savio_esercizio_css_52.html b/TPSI/savio_gabriele/CSS/es52/savio_esercizio_css_52.html new file mode 100644 index 00000000..88458a31 --- /dev/null +++ b/TPSI/savio_gabriele/CSS/es52/savio_esercizio_css_52.html @@ -0,0 +1,18 @@ + + + + + + Document + + + +
+
A
+
B
+
C
+
D
+
E
+
+ + diff --git a/TPSI/savio_gabriele/CSS/es53/savio_esercizio_css_53.css b/TPSI/savio_gabriele/CSS/es53/savio_esercizio_css_53.css new file mode 100644 index 00000000..b1b3bae3 --- /dev/null +++ b/TPSI/savio_gabriele/CSS/es53/savio_esercizio_css_53.css @@ -0,0 +1,36 @@ +.grid { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 500px; + display: grid; + gap: 20px; + grid-template-columns: repeat(4, 1fr); +} + +.cell { + background-color: rgb(41, 41, 41); + color: #fff; + padding: 10px; + border-radius: 5px; +} + +.cell:nth-child(1) { + grid-column: 1 / 5; + background-color: #999999; +} +.cell:nth-child(2) { + background-color: #444444; +} +.cell:nth-child(3) { + grid-column: 2 / 4; + background-color: #444444; +} +.cell:nth-child(4) { + background-color: #cccccc; +} +.cell:last-child { + grid-column: 1 / 5; + background-color: #999999; +} diff --git a/TPSI/savio_gabriele/CSS/es53/savio_esercizio_css_53.html b/TPSI/savio_gabriele/CSS/es53/savio_esercizio_css_53.html new file mode 100644 index 00000000..48af1869 --- /dev/null +++ b/TPSI/savio_gabriele/CSS/es53/savio_esercizio_css_53.html @@ -0,0 +1,20 @@ + + + + + + Document + + + +
+
Header
+
Sidebar
+
content
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro delectus, a quam animi amet necessitatibus accusantium veritatis laboriosam! Temporibus optio veritatis eum odio totam cumque, et eligendi voluptatem deleniti quas. +
+
Sidebar 2
+
Footer
+
+ + diff --git a/TPSI/savio_gabriele/CSS/es54/savio_esercizio_css_54.css b/TPSI/savio_gabriele/CSS/es54/savio_esercizio_css_54.css new file mode 100644 index 00000000..c9d21466 --- /dev/null +++ b/TPSI/savio_gabriele/CSS/es54/savio_esercizio_css_54.css @@ -0,0 +1,38 @@ +.grid { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 500px; + display: grid; + gap: 20px; + grid-template-columns: 1fr 2fr; + grid-template-rows: 1fr 3fr 1fr; +} + +.cell { + background-color: rgb(41, 41, 41); + color: #fff; + padding: 10px; + border-radius: 5px; +} + +.cell:nth-child(1) { + grid-column: 2 / 4; + background-color: #999999; +} +.cell:nth-child(2) { + grid-column: 1 / 2; + background-color: #444444; +} +.cell:nth-child(3) { + grid-column: 2 / 4; + background-color: #444444; +} +.cell:nth-child(4) { + background-color: #cccccc; +} +.cell:last-child { + grid-column: 1 / 4; + background-color: #999999; +} diff --git a/TPSI/savio_gabriele/CSS/es54/savio_esercizio_css_54.html b/TPSI/savio_gabriele/CSS/es54/savio_esercizio_css_54.html new file mode 100644 index 00000000..0be21b12 --- /dev/null +++ b/TPSI/savio_gabriele/CSS/es54/savio_esercizio_css_54.html @@ -0,0 +1,19 @@ + + + + + + Document + + + +
+
Header
+
Sidebar
+
content
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro delectus, a quam animi amet necessitatibus accusantium veritatis laboriosam! Temporibus optio veritatis eum odio totam cumque, et eligendi voluptatem deleniti quas. +
+
Footer
+
+ +