STYLING NEW LISTING
NEW.EJS
<%- layout("/layouts/boilerplate") %>
<body>
<div class="row offset-2">
<div class="col-8">
<br /><br />
<h2>Add new listing</h2>
<form method="POST" action="/listings">
<div class="mb-3">
<label for="title" class="form-label">Title</label>
<input
name="listing[title]"
type="text"
placeholder="Enter title"
class="form-control"
/>
</div>
<div class="mb-3">
<label for="description" class="form-label">Description</label
><textarea
name="listing[description]"
type="text"
placeholder="write description"
class="form-control"
></textarea>
</div>
<div class="mb-3">
<label for="image" class="form-label">Image Link</label>
<input
name="listing[image]"
type="text"
placeholder="paste image URL/link"
class="form-control"
/>
</div>
<div class="row">
<div class="mb-3 col-md-4">
<label for="price" class="form-label">Price</label>
<input
name="listing[price]"
type="number"
placeholder="enter price"
class="form-control"
/>
</div>
<div class="mb-3 col-md-8">
<label for="location" class="form-label">Location</label>
<input
name="listing[location]"
type="text"
placeholder="enter location"
class="form-control"
/>
</div>
</div>
<div class="mb-3">
<label for="country" class="form-label">Country</label>
<input
name="listing[country]"
type="text"
placeholder="enter country"
class="form-control"
/>
</div>
<br /><br />
<button class="btn btn-dark add-btn">ADD</button>
<br /><br />
</form>
</div>
</div>
</body>
STYLE.CSS
body{
font-family: "Plus Jakarta Sans", sans-serif !important;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container{
flex:1;
}
.add-btn{
background-color:#fe424d !important;
border: none !important;
}
Comments
Post a Comment