Entrega do Desafio #1
@ -1,19 +1,39 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com"/>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
|
||||
|
||||
<meta charset="UTF-8"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
|
||||
<title>Challenge Tourist Attractions</title>
|
||||
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com"/>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"/>
|
||||
<link rel="stylesheet" href="../dist/main.css"/>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<main>
|
||||
<section class="container">
|
||||
<h1 data-test=""title-form>Adicionar um Ponto Turístico</h1>
|
||||
<form>
|
||||
<div class="form-container">
|
||||
<div class="form-inputs">
|
||||
<div class="input-image-container" data-test="input-image">
|
||||
<input type="file" accept="image/*" class="input-image-content"/>
|
||||
<img src="" alt="">
|
||||
</div>
|
||||
<div class="form-input-descricao">
|
||||
<input type="text" placeholder="Título" data-test="input-titulo" class="input-titulo" name="item-title">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
@ -0,0 +1,29 @@
|
||||
@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");
|
||||
|
||||
.form-inputs {
|
||||
display: flex;
|
||||
.form-input-descricao {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.input-titulo {
|
||||
width: 79%;
|
||||
height: 56px;
|
||||
}
|
||||
.input-descricao,
|
||||
.input-titulo {
|
||||
padding: 10px 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
Loading…
Reference in New Issue
Block a user