Skip to content

Boodle
Boodle
Commit 6490aeba authored by Martina Reyes's avatar Martina Reyes
Browse files
Options

Added placeholder pictures. Did layout for homepage. Made coming soon and... 

Added placeholder pictures. Did layout for homepage. Made coming soon and happening now sections responsive.
parent e49fea0e
Show whitespace changes
Inline Side-by-side
Showing with 154 additions and 3 deletions
boodlesite/static/css/styles.css
View file @ 6490aeba
body {
display: flex;
flex-direction: column;
margin: 0 auto;
height: 100%;
font-size: 11pt;
color: #3d3838;
}
h1 {
background-color: blue;
}
......@@ -64,6 +73,38 @@ nav {
.footer p { flex: 0 1 800px; padding: 8px 24px;}
/* homepage happening now */
@media(max-width:480px){
.event-container{
display: flex;
flex-direction: column;
}
.event{ flex: 1 1 auto; }
}
.event-container{
display: flex;
justify-content: center;
background-color: #ffc2c2;
padding: 8px;
border: 2px solid black;
}
.event {
flex: 0 1 240px;
margin: 8px;
background-color: white;
}
.event img {
max-width: 100%;
object-fit:cover;
}
.event-text{ padding: 16px; text-align: center; }
/* cards */
.cards {
......@@ -102,7 +143,6 @@ nav {
}
/* cards end */
/* auction view */
......
boodlesite/templates/index.html
View file @ 6490aeba
......@@ -7,5 +7,116 @@
{% endblock %}
{% block content %}
<h1 id="h1">Hello World, love Boodle</h1>
<div id="container-fluid">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<h1>About</h1>
<div class="container">
<div class="row">
<div class="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>
</div>
<div class="col">
<img src="../static/media/dancinginthekitchen.jpg">
</div>
</div>
<h1 class="header">HAPPENING NOW!!</h1>
<div class="event-container">
<div class="event">
<img src="../static/media/beast.jpg" alt="pastel pink flower on pastel blue background">
<div class="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>
<div class="event">
<img src="../static/media/beast.jpg" alt="pastel pink flower on pastel blue background">
<div class="event-text">
<h3 class="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 class="event">
<img src="../static/media/beast.jpg" alt="pastel pink flower on pastel blue background">
<div class="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>
<div class="event">
<img src="../static/media/beast.jpg" alt="pastel pink flower on pastel blue background">
<div class="event-text">
<h3 class="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>
</div>
<h1 class="header">HAPPENING SOON!!</h1>
<div class="happening-soon">
<div class="event-container">
<div class="event">
<img src="../static/media/beast.jpg" alt="pastel pink flower on pastel blue background">
<div class="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>
<div class="event">
<img src="../static/media/beast.jpg" alt="pastel pink flower on pastel blue background">
<div class="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>
<div class="event">
<img src="../static/media/beast.jpg" alt="pastel pink flower on pastel blue background">
<div class="event-text">
<h3 class="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 class="event">
<img src="../static/media/beast.jpg" alt="pastel pink flower on pastel blue background">
<div class="event-text">
<h3 class="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>
{% endblock %}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment