Rough layout for auction page

boodlesite/static/css/styles.css

 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

+{% 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

@@ -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

 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

@@ -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")
+
+