Skip to content

Boodle
Boodle
Commit e49fea0e authored by Felizia Tiburcio's avatar Felizia Tiburcio
Browse files
Options

Rough layout for auction page

parent 470bc040
Show whitespace changes
Inline Side-by-side
Showing with 277 additions and 2 deletions
boodlesite/static/css/styles.css
View file @ e49fea0e
h1 {
background-color: blue;
}
/* nav bar */
nav {
background: black;
top: 0;
width: 100%;
transition: all 0.5s;
position: relative;
z-index: 1;
}
.fixed-nav nav {
position: fixed;
box-shadow 0 5px black;
}
nav ul {
margin: 0;
padding:0;
list-style: none;
display: flex;
}
nav li {
flex: 1;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
li.logo {
max-width: 0;
overflow: hidden;
background: white;
transition: all .5s;
font-weight: 600;
font-size: 30px;
}
li.logo a {
color: black;
}
nav a {
text-decoration: none;
padding: 20px;
display: inline-block;
color: white;
transition: all 0.2s;
}
/* nav bar end */
.footer{
background-color: black;
color: #f8edeb;
display: flex;
justify-content: center;
}
.footer p { flex: 0 1 800px; padding: 8px 24px;}
/* cards */
.cards {
list-style-type: none;
padding: 0;
display: flex;
flex-wrap: wrap;
}
.cards img {
float: left;
display: block;
margin: 10px 15px 10px 0;
object-fit: cover;
width:80px;
height:80px;
border-radius: 100%;
border: 2px dotted black;
shape-outside: circle(50%);
}
.cards li {
background-color: #f0f0f0;
border: 1px dotted #c3a9ff;
margin: 0 10px 20px 10px;
padding: 8px 16px;
border-radius: 5px;
flex: 1 1 480px;
display:flex;
align-items: center;
}
.cards p {
}
/* cards end */
/* auction view */
.product-info{
padding: 8px 16px;
}
/* auction view end */
boodlesite/templates/auction.html 0 → 100644
View file @ e49fea0e
{% extends 'boodlesite\templates\base.html' %}
{% load static %}
{% block title %}Auction{% endblock %}
{% block styles %}
{% endblock %}
{% block content %}
<div class="container">
<div class="row">
<div class="col-lg-7 col-md-6">
product display div
<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://cdn.shopify.com/s/files/1/0502/6421/1616/products/Dream-Valentines-Heart-Beat-Pom-Pom-Beanie_-Limited-Edition-Dream-VD-ALL-Pom-Beanie-Heart_5000x.png?v=1643226660" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://cdn.shopify.com/s/files/1/0502/6421/1616/products/Dream-VD-Black-Pom-Beanie-Heart_5000x.png?v=1643226660" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://cdn.shopify.com/s/files/1/0502/6421/1616/products/Dream-VD-Pink-Pom-Beanie-Heart_5000x.png?v=1643226660" 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>
<!-- <img src="https://thumbs.dreamstime.com/b/toy-teddy-bear-isolated-white-background-40677685.jpg"> -->
</div>
<div class="col-lg-5 col-md-6">
product info div
<div class="product-info" style="border: 2px dotted black;">
<h2>Product Name</h2>
<h4>Product Specifications</h4>
<p>description description description
description description description
description description description
description description description
description description description</p>
</div>
<button class="btn-place-bid">Place Bid</button>
<h1>Latest Bids</h1>
<!-- latest bids / history -->
<ul class="cards">
<li><img src="" alt="">
<p>Alice offered 500!</p>
<p>2 seconds ago</p>
</li>
<li><img src="" alt="">
<p>Bob offered 400!</p>
<p>5 seconds ago</p>
</li>
<li><img src="" alt="">
<p>Charles offered 300!</p>
<p>30 seconds ago</p>
</li>
<li><img src="" alt="">
<p>Charles offered 300!</p>
<p>3 minutes ago</p>
</li>
<li><img src="" alt="">
<p>Charles offered 300!</p>
<p>5 mintues ago</p>
</li>
</div>
</div>
</div>
{% endblock %}
boodlesite/templates/base.html
View file @ e49fea0e
......@@ -5,15 +5,70 @@
<head>
<meta charset="utf-8">
<meta name='viewport' content='width=device-width'>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}">
<title>{% block title %}{% endblock %}</title>
<style>
[class*="col"] {
background-color: pink;
border: 2px dotted black;
}
</style>
</head>
<body>
<nav id="main">
<ul>
<li class="logo"><a href="#">LOST.</a></li>
<li><a href="/">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">My Profile</a></li>
<li><a href="#">My Store</a></li>
</ul>
</nav>
<!-- page content begins here -->
{% block content %}{% endblock %}
{% block scripts %}{% endblock %}
<div class="footer">
<p>footer text here idk </p>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- <script>
// nav bar
const nav = document.querySelector('#main');
const topOfNav = nav.offsetTop;
function fixNav() {
console.log(topOfNav, window.scrollY);
if (window.scrollY >= topOfNav){
document.body.style.paddingTop = 0;
document.body.classList.add('fixed-nav');
} else {
document.body.classList.remove('fixed-nav');
}
}
window.addEventListener('scroll',fixNav);
</script> -->
</body>
</html>
main/urls.py
View file @ e49fea0e
from django.urls import path
from .views import homepage
from .views import *
urlpatterns = [
path('', homepage, name='index'),
path('auction', auction, name='auction'),
path('test',test,name='test'),
]
\ No newline at end of file
main/views.py
View file @ e49fea0e
......@@ -5,4 +5,11 @@ from django.http import HttpResponse
def homepage(request):
return render(request, "boodlesite/templates/index.html")
def auction(request):
return render(request, "boodlesite/templates/auction.html")
def test(request):
return HttpResponse("Hellotest")
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