<divclass="title-container"><h1> About Us </h1></div>
<divclass="container-fluid">
<divclass="row">
<divclass="col">
<p>Boodle was founded by 4 amaing talented software engineers, who are college studyents based in Metro Manila who go to Ateneo de Manila University. </p>
<divclass="title-container"><h1> Happening Now </h1></div>
<h1class="header">HAPPENING NOW!!</h1>
<divclass="event-container">
{% if auctions_now %}
{% for auction in auctions_now %}
<divclass="event">
<imgsrc="../static/media/beast.jpg"alt="pastel pink flower on pastel blue background">
<divclass="event-text">
<h3>Soft Tones</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et dolor non leo porta ornare ac nec orci. Sed porta elementum nunc, sit amet consequat leo aliquam ac.</p>
<imgsrc="../static/media/beast.jpg"alt="pastel pink flower on pastel blue background">
<divclass="event-text">
<h3class="event-title">Soft Tones</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et dolor non leo porta ornare ac nec orci. Sed porta elementum nunc, sit amet consequat leo aliquam ac.</p>
<ahref="{% url 'auctionid' auction.auctionid %}">
<h3>{{ auction.title }}</h3>
</a>
<p>{{ auction.info }}</p>
</div>
</div>
{% endfor %}
{% else %}
<h3> no auctions happening yet.</h3>
{% endif %}
<divclass="event">
<imgsrc="../static/media/beast.jpg"alt="pastel pink flower on pastel blue background">
<divclass="event-text">
<h3>Soft Tones</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et dolor non leo porta ornare ac nec orci. Sed porta elementum nunc, sit amet consequat leo aliquam ac.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et dolor non leo porta ornare ac nec orci. Sed porta elementum nunc, sit amet consequat leo aliquam ac.</p>
<ahref="{% url 'auctionid' auction.auctionid %}">
<h3>{{ auction.title }}</h3>
</a>
<p>{{ auction.info }}</p>
</div>
</div>
{% endfor %}
{% else %}
<h3> no auctions happening soon.</h3>
{% endif %}
</div>
</div>
</div>
<h1class="header">HAPPENING SOON!!</h1>
<divclass="happening-soon">
<divclass="event-container">
<divclass="event">
<imgsrc="../static/media/beast.jpg"alt="pastel pink flower on pastel blue background">
<divclass="event-text">
<h3>Soft Tones</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et dolor non leo porta ornare ac nec orci. Sed porta elementum nunc, sit amet consequat leo aliquam ac.</p>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.event-container').slick({
dots:true,
infinite:false,
speed:300,
slidesToShow:4,
slidesToScroll:4,
responsive:[
{
breakpoint:1024,
settings:{
arrows:true,
slidesToShow:3,
slidesToScroll:3,
infinite:true,
dots:true
}
},
{
breakpoint:600,
settings:{
arrows:true,
<divclass="event">
<imgsrc="../static/media/beast.jpg"alt="pastel pink flower on pastel blue background">
<divclass="event-text">
<h3>Soft Tones</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et dolor non leo porta ornare ac nec orci. Sed porta elementum nunc, sit amet consequat leo aliquam ac.</p>
</div>
</div>
<divclass="event">
<imgsrc="../static/media/beast.jpg"alt="pastel pink flower on pastel blue background">
<divclass="event-text">
<h3class="event-title">Soft Tones</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et dolor non leo porta ornare ac nec orci. Sed porta elementum nunc, sit amet consequat leo aliquam ac.</p>
</div>
</div>
<divclass="event">
<imgsrc="../static/media/beast.jpg"alt="pastel pink flower on pastel blue background">
<divclass="event-text">
<h3class="event-title">Soft Tones</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et dolor non leo porta ornare ac nec orci. Sed porta elementum nunc, sit amet consequat leo aliquam ac.</p>
</div>
</div>
</div>
</div>
slidesToShow:2,
slidesToScroll:2
}
},
{
breakpoint:480,
settings:{
arrows:true,
slidesToShow:1,
slidesToScroll:1
}
}
// You can unslick at a given breakpoint now by adding: