styling offer page
This commit is contained in:
parent
75142b9347
commit
db9316b580
2 changed files with 37 additions and 29 deletions
|
@ -27,3 +27,13 @@ $primary: darken(#005035, 20%);
|
|||
.listings-container {
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.img-container {
|
||||
width: 50%;
|
||||
min-width: 20rem;
|
||||
}
|
||||
|
||||
.offer-info {
|
||||
width: 50%;
|
||||
min-width: 20rem;;
|
||||
}
|
|
@ -3,19 +3,18 @@
|
|||
{% block body %}
|
||||
<h1 class="mb-3">{{ offer.title }}</h1>
|
||||
|
||||
<div class="media">
|
||||
<img class="mr-3 w-25 rounded" alt="Generic placeholder image" src="{{ asset('uploads/photos/' ~ offer.photofilename) }}">
|
||||
<div class="media-body">
|
||||
<h3>
|
||||
Description
|
||||
</h3>
|
||||
<p>
|
||||
{{ offer.description }}
|
||||
</p>
|
||||
<h3>
|
||||
From
|
||||
</h3>
|
||||
<div class="offer d-flex flex-wrap justify-content-around">
|
||||
<div class="p-3 img-container">
|
||||
<img class="mb-3 img-fluid rounded" alt="Generic placeholder image" src="{{ asset('uploads/photos/' ~ offer.photofilename) }}">
|
||||
</div>
|
||||
<div class="offer-info p-3">
|
||||
<h3>Description</h3>
|
||||
<p>{{ offer.description }}</p>
|
||||
<h3>From</h3>
|
||||
<p>{{ offer.byUser }} in {{ offer.zipCode }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Wishes</h3>
|
||||
<p>{{ offer.byUser }} would like some of the following in return:</p>
|
||||
<div class="mb-3">
|
||||
|
@ -31,6 +30,5 @@
|
|||
</ul>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary">Offer trade</button>
|
||||
{% endblock %}
|
Reference in a new issue