diff --git a/src/styles/partials/container.scss b/src/styles/partials/container.scss index e69de29..9483d53 100644 --- a/src/styles/partials/container.scss +++ b/src/styles/partials/container.scss @@ -0,0 +1,5 @@ +.container { + width: 81.875%; + margin: 40px 0 0 130px; +} + diff --git a/src/styles/partials/form.scss b/src/styles/partials/form.scss index e732854..6b461df 100644 --- a/src/styles/partials/form.scss +++ b/src/styles/partials/form.scss @@ -1,54 +1,113 @@ @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"); +h1 { + width: 100%; + font-weight: 700; + font-size: 32px; +} + input, textarea { border-radius: 8px; } -.form-container { - max-width: 780px; - .form-inputs { - display: flex; - width: 100%; - .input-image-container { - width: 23.81%; - height: 212px; - .input-image-content { - width: 100%; - height: 212px; - border: 2px solid $input-image-border-color; - } - } - .form-input-descricao { - display: flex; - flex-direction: column; - .input-titulo { - width: 79%; - height: 56px; - } - .input-descricao { - width: 417px; - height: 136px; - } - .input-descricao, - .input-titulo { - padding: 10px 16px; - } - } - } -} - textarea::placeholder, textarea, input::placeholder, input, -.input-image-content { +.input-image-container { font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: 0.15px; font-family: "Roboto", sans-serif; + color: $input-text-color; } -// width: 328px; -// height: 56px; +form { + width: 66.157%; + height: 284px; + margin-top: 40px; + .form-container { + .form-inputs { + display: flex; + justify-content: space-between; + width: 100%; + gap: 20px; + .input-image-container { + width: 43.974%; + height: 212px; + border: 2px solid $input-image-border-color; + border-radius: 8px; + display: flex; + justify-content: center; + align-items: center; + position: relative; + background: rgb(255, 255, 255); + overflow: hidden; + &::after { + content: "Imagem"; + text-align: center; + pointer-events: none; + } + .input-image-content { + width: 100%; + height: 212px; + z-index: 1; + opacity: 0; + } + & img { + object-fit: cover; + width: 100%; + height: 100%; + transition: opacity 0.25s ease-in-out; + opacity: 1; + &[src=""] { + opacity: 0; + } + } + } + .form-input-descricao { + display: flex; + flex-direction: column; + width: 53.461%; + height: 284px; + gap: 20px; + .input-titulo { + width: 78%; + height: 56px; + border: 2px solid $input-titulo-border-color; + } + .description-content { + width: 100%; + height: 208px; + .input-descricao { + width: 100%; + height: 136px; + border: 2px solid $input-descrição-border-color; + } + & button { + background: $button-submit-color; + padding: 16px 20px; + border: 1px solid $button-submit-color; + border-radius: 8px; + margin-top: 16px; + font-weight: 700; + font-size: 16px; + color: $text-button-submit-color; + float: right; + } + } + .input-descricao, + .input-titulo { + padding: 10px 16px; + } + } + } + } +} + +.input-image-content, +.input-image-container img { + position: absolute; +} diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss index fdd1aea..5715b26 100644 --- a/src/styles/utils/variables.scss +++ b/src/styles/utils/variables.scss @@ -3,11 +3,9 @@ $background-color: #ffffff; $title-form-color: #000000; $input-image-border-color: #e5e5e5; -$input-image-text-color: #858585; -$input-titulo-color: #d6d6d6; -$input-titulo-text-color: #858585; -$input-descrição-color: #d6d6d6; -$input-descrição-text-color: #858585; +$input-text-color: #858585; +$input-titulo-border-color: #d6d6d6; +$input-descrição-border-color: #d6d6d6; $button-submit-color: #ff5a5f; $text-button-submit-color: #ffffff; $title-list-color: #000000; @@ -15,14 +13,3 @@ $title-item-list-color: #333333; $description-item-list-color: #858585; $slider-ellipse-color: #858585; $slider-arrow-color: #858585; - -// Font-size - -$title-form-font-size: 32px; -$input-image-font-size: 16px; -$input-titulo-font-size: 16px; -$input-descrição-font-size: 16px; -$button-submit-font-size: 16px; -$title-list-font-size: 32px; -$title-item-list-font-size: 24px; -$description-item-list-font-size: 16px; diff --git a/src/templates/index.html b/src/templates/index.html index 3a73a06..5072d65 100644 --- a/src/templates/index.html +++ b/src/templates/index.html @@ -26,8 +26,10 @@
- - +
+ + +