diff --git a/exercicio1/style.css b/exercicio1/style.css index 35af80d..75012e2 100644 --- a/exercicio1/style.css +++ b/exercicio1/style.css @@ -1,17 +1,19 @@ #texto-fonte-root{ - + font-size: 3rem; } #texto-paddings-verticais{ - + padding: 2rem 0; } #altura-porcentagem-comprimento{ - + height: 20vw; + background-color: aqua; } #comprimento-metade-altura{ - + width: 50vw; + background-color: lightcoral; } .container{ @@ -21,13 +23,15 @@ } #fonte-setenta{ - + font-size: 70%; } #comprimento-pai{ - + width: 10%; + background-color: yellowgreen; } #altura-pai{ - + height: 10%; + background-color: aquamarine; } \ No newline at end of file diff --git a/exercicio2/style.css b/exercicio2/style.css index e69de29..1faceea 100644 --- a/exercicio2/style.css +++ b/exercicio2/style.css @@ -0,0 +1,42 @@ +*{ + padding: 0; + margin: 0; +} + +main{ + display: grid; + grid-template-columns: repeat(3, 1fr); + height: 100vh; +} + +section{ + border: 1px solid black; + font-size: 4rem; +} + +/* tablets */ +@media screen and (min-device-width: 481px) and (max-device-width: 800px){ + main{ + background-color: yellowgreen; + grid-template-columns: repeat(2, 1fr); + } + + section{ + font-size: 2rem; + } + +} + +/* celulares */ +@media screen and (max-device-width: 480px){ + main{ + background-color: lightcoral; + grid-template-columns: 1fr; + } + + section{ + border: 2px solid yellow; + font-size: 1rem; + } + +} \ No newline at end of file diff --git a/fixacao/styles.css b/fixacao/styles.css index cac900b..ae815da 100644 --- a/fixacao/styles.css +++ b/fixacao/styles.css @@ -1,48 +1,48 @@ * { - padding: 0; - margin: 0; - font-family: Helvetica, sans-serif; - } - - header { - background-color: #4986b8; - color: white; - height: 40px; - padding: 20px; - width: 100%; - } - - main { - height: 77vh; - max-width: 800px; - display: flex; - flex-direction: row; - margin: 20px auto; - gap: 10px; - } - - main aside, - main section { - padding: 10px; - } - - .left { - background-color: moccasin; - } - - section { - background-color: aliceblue; - } - - .right { - background-color: mistyrose; - } - - footer { - position: absolute; - bottom: 0; - background-color: black; - color: white; - padding: 20px; - width: 100%; - } \ No newline at end of file + padding: 0; + margin: 0; + font-family: Helvetica, sans-serif; +} + +header { + background-color: #4986b8; + color: white; + height: 40px; + padding: 20px; + width: 100%; +} + +main { + height: 77vh; + max-width: 800px; + display: flex; + flex-direction: row; + margin: 20px auto; + gap: 10px; +} + +main aside, +main section { + padding: 10px; +} + +.left { + background-color: moccasin; +} + +section { + background-color: aliceblue; +} + +.right { + background-color: mistyrose; +} + +footer { + position: absolute; + bottom: 0; + background-color: black; + color: white; + padding: 20px; + width: 100%; +} \ No newline at end of file