diff --git a/css/eventos.css b/css/eventos.css index 5247ebe..7812b82 100644 --- a/css/eventos.css +++ b/css/eventos.css @@ -27,12 +27,13 @@ background-color: #fff; } - button { + .btn-send, .btn-modal { font-size: 16px; font-weight: bold; width: 120px; height: 40px; - margin-block: 15px; + margin-bottom: 10px; + margin-top: 15px; border-radius: 5px; cursor: pointer; background-color: #734bd1; @@ -40,6 +41,10 @@ border: none; transition-duration: 0.4s; } + + .btn-modal { + margin-top: 50px; + } button:hover { background-color: #9466ff; @@ -64,15 +69,17 @@ bottom: 0; } - .form { + .form-container { display: none; + flex-direction: column; + justify-content: center; position: absolute; - top: 30vh; + top: 20vh; z-index: 2; background-color: #fff; border-radius: 10px; border: 4px solid #734bd1; - min-height: 0; + min-height: 320px; width: 500px; } @@ -96,6 +103,13 @@ transform: rotate(45deg); } + .send-message { + display: none; + text-align: center; + font-size: 30px; + font-weight: bold; + } + form { padding-left: 10px; } @@ -107,7 +121,7 @@ width: 320px; border-color: #996dff; padding-left: 10px; - font-size: 20PX; + font-size: 18PX; } select { @@ -118,3 +132,14 @@ height: 40px; font-size: 18px; } + + + @media (max-width: 550px) { + .form-container { + width: 90vw; + } + input, select { + width: calc(80vw - 120px); + } + + } diff --git a/paginas/eventos.html b/paginas/eventos.html index 4ee0797..0d95f0b 100644 --- a/paginas/eventos.html +++ b/paginas/eventos.html @@ -40,17 +40,19 @@
-