anacarolinaduartecavalcante/challenge-tourist-attractions-ana-carolina-duarte-cavalcante
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Entrega do Desafio #1

Merged
anacarolinaduartecavalcante merged 29 commits from feature/challenge-tourist-attractions into develop 2022-11-28 17:16:05 +00:00
Conversation 0 Commits 29 Files Changed 21 +107 -54
4 changed files with 107 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit e286dec4b5 - Show all commits

5
src/styles/partials/container.scss
View File

@ -0,0 +1,5 @@
.container {
width: 81.875%;
margin: 40px 0 0 130px;
}

95
src/styles/partials/form.scss
View File

@ -1,34 +1,102 @@
@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"); @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, input,
textarea { textarea {
border-radius: 8px; border-radius: 8px;
} }
textarea::placeholder,
textarea,
input::placeholder,
input,
.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;
}
form {
width: 66.157%;
height: 284px;
margin-top: 40px;
.form-container { .form-container {
max-width: 780px;
.form-inputs { .form-inputs {
display: flex; display: flex;
justify-content: space-between;
width: 100%; width: 100%;
gap: 20px;
.input-image-container { .input-image-container {
width: 23.81%; width: 43.974%;
height: 212px; 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 { .input-image-content {
width: 100%; width: 100%;
height: 212px; height: 212px;
border: 2px solid $input-image-border-color; 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 { .form-input-descricao {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 53.461%;
height: 284px;
gap: 20px;
.input-titulo { .input-titulo {
width: 79%; width: 78%;
height: 56px; height: 56px;
border: 2px solid $input-titulo-border-color;
} }
.description-content {
width: 100%;
height: 208px;
.input-descricao { .input-descricao {
width: 417px; width: 100%;
height: 136px; 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-descricao,
.input-titulo { .input-titulo {
@ -37,18 +105,9 @@ textarea {
} }
} }
} }
textarea::placeholder,
textarea,
input::placeholder,
input,
.input-image-content {
font-weight: 400;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.15px;
font-family: "Roboto", sans-serif;
} }
// width: 328px; .input-image-content,
// height: 56px; .input-image-container img {
position: absolute;
}

19
src/styles/utils/variables.scss
View File

@ -3,11 +3,9 @@
$background-color: #ffffff; $background-color: #ffffff;
$title-form-color: #000000; $title-form-color: #000000;
$input-image-border-color: #e5e5e5; $input-image-border-color: #e5e5e5;
$input-image-text-color: #858585; $input-text-color: #858585;
$input-titulo-color: #d6d6d6; $input-titulo-border-color: #d6d6d6;
$input-titulo-text-color: #858585; $input-descrição-border-color: #d6d6d6;
$input-descrição-color: #d6d6d6;
$input-descrição-text-color: #858585;
$button-submit-color: #ff5a5f; $button-submit-color: #ff5a5f;
$text-button-submit-color: #ffffff; $text-button-submit-color: #ffffff;
$title-list-color: #000000; $title-list-color: #000000;
@ -15,14 +13,3 @@ $title-item-list-color: #333333;
$description-item-list-color: #858585; $description-item-list-color: #858585;
$slider-ellipse-color: #858585; $slider-ellipse-color: #858585;
$slider-arrow-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;

2
src/templates/index.html
View File

@ -26,11 +26,13 @@
</div> </div>
<div class="form-input-descricao"> <div class="form-input-descricao">
<input type="text" placeholder="Título" data-test="input-titulo" class="input-titulo" name="item-title"> <input type="text" placeholder="Título" data-test="input-titulo" class="input-titulo" name="item-title">
<div class="description-content">
<textarea placeholder="Descrição" class="input-descricao" data-test="input-descricao" name="item-description" rows="10" cols="30"></textarea> <textarea placeholder="Descrição" class="input-descricao" data-test="input-descricao" name="item-description" rows="10" cols="30"></textarea>
<button type="submit" data-test="button-submit">Adicionar</button> <button type="submit" data-test="button-submit">Adicionar</button>
</div> </div>
</div> </div>
</div> </div>
</div>
</form> </form>
</section> </section>
</main> </main>