diff --git a/css/cronometro.css b/css/cronometro.css index 09e3de7..bc2d3ff 100644 --- a/css/cronometro.css +++ b/css/cronometro.css @@ -121,41 +121,6 @@ header a{ color: white; } -/* estilos para telas grandes */ - -/* media query para telas médias (tablets, etc.) */ -@media (max-width: 1024px) { - .containerCronometro { - width: 90%; /* reduzindo um pouco a largura para telas médias */ - } - - .tempoCronometro { - font-size: 1.5rem; /* reduzindo o tamanho da fonte para telas médias */ - } -} - -/* media query para telas pequenas (smartphones, etc.) */ -@media (max-width: 768px) { - .containerCronometro { - width: 95%; /* reduzindo ainda mais a largura para telas pequenas */ - height: 40vh; /* reduzindo a altura para telas pequenas */ - } - - .tempoCronometro { - margin-top: 28%; - font-size: 2rem; /* reduzindo ainda mais o tamanho da fonte para telas pequenas */ - } - - /* ajustes adicionais para os botões */ - .start-btn, - .pause-btn, - .stop-btn { - padding: 0.7rem 1.1rem; /* ajustando para tamanhos de tela ainda menores */ - font-size: 1.5rem; /* ajustando para tamanhos de tela ainda menores */ - } -} - - /*---=footer do site=---*/ footer{ min-height: 50px; @@ -194,3 +159,48 @@ footer{ color: black; text-decoration: underline; } + +/* estilos para telas grandes */ + +/* media query para telas médias (tablets, etc.) */ +@media (max-width: 1024px) { + .containerCronometro { + width: 90%; /* reduzindo um pouco a largura para telas médias */ + } + + .tempoCronometro { + font-size: 1.5rem; /* reduzindo o tamanho da fonte para telas médias */ + } + header{ + height: 10%; + } + footer{ + height: 10%; + flex-direction: column; + justify-content: space-evenly; + } + .repositorio{ + position: relative; + } +} + +/* media query para telas pequenas (smartphones, etc.) */ +@media (max-width: 768px) { + .containerCronometro { + width: 95%; /* reduzindo ainda mais a largura para telas pequenas */ + height: 40vh; /* reduzindo a altura para telas pequenas */ + } + + .tempoCronometro { + margin-top: 28%; + font-size: 2rem; /* reduzindo ainda mais o tamanho da fonte para telas pequenas */ + } + + /* ajustes adicionais para os botões */ + .start-btn, + .pause-btn, + .stop-btn { + padding: 0.7rem 1.1rem; /* ajustando para tamanhos de tela ainda menores */ + font-size: 1.5rem; /* ajustando para tamanhos de tela ainda menores */ + } +} \ No newline at end of file diff --git a/html/cronometro.html b/html/cronometro.html index a06b16e..0430daa 100644 --- a/html/cronometro.html +++ b/html/cronometro.html @@ -20,7 +20,6 @@ - CRONÔMETRO: @@ -39,7 +38,7 @@ 00:00:00 - +