-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
bb2b905
commit e3f36b2
Showing
2 changed files
with
66 additions
and
178 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -4,39 +4,32 @@ | |
| <!-- Required meta tags --> | ||
| <meta charset="utf-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
|
|
||
| <!-- CSS --> | ||
| <link | ||
| href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" | ||
| rel="stylesheet" | ||
| integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" | ||
| crossorigin="anonymous" | ||
| /> | ||
| <link | ||
| rel="stylesheet" | ||
| href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" | ||
| /> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" /> | ||
| <link | ||
| href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap" | ||
| rel="stylesheet" | ||
| /> | ||
| <link | ||
| rel="stylesheet" | ||
| href="path/to/font-awesome/css/font-awesome.min.css" | ||
| href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" | ||
| /> | ||
|
|
||
| <style> | ||
| @import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css); | ||
| :root { | ||
| --bs-font-sans-serif: 'DM Sans', sans-serif; | ||
| --bs-font-sans-serif: "DM Sans", sans-serif; | ||
| } | ||
|
|
||
| @media (min-width: 576px) { | ||
| body { | ||
| background: #e0e0e0; | ||
| } | ||
|
|
||
| .card { | ||
| border: 3px solid rgb(255, 218, 185); | ||
| border: 0; | ||
| box-shadow: rgb(0 0 0 / 5%) 0px 10px 20px; | ||
| border-radius: 10px; | ||
| } | ||
|
|
@@ -46,131 +39,47 @@ | |
| height: 20vw; | ||
| object-fit: cover; | ||
| } | ||
| .dropdown-content { | ||
| display: none; | ||
| position: absolute; | ||
| background-color: #f9f9f9; | ||
| min-width: 160px; | ||
| box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); | ||
| z-index: 1; | ||
| } | ||
|
|
||
| .dropdown-content a { | ||
| color: black; | ||
| padding: 12px 16px; | ||
| text-decoration: none; | ||
| display: block; | ||
| } | ||
|
|
||
| .dropdown-content a:hover { | ||
| background-color: #f1f1f1; | ||
| } | ||
|
|
||
| .dropdown:hover .dropdown-content { | ||
| display: block; | ||
| } | ||
|
|
||
| /* css code for footer */ | ||
| footer { | ||
| bottom: 0; | ||
| left: 0; | ||
| right: 0; | ||
| background: #111; | ||
| height: auto; | ||
| width: auto; | ||
| padding-top: 40px; | ||
| } | ||
| .footer-content { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| flex-direction: column; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .socials { | ||
| list-style: none; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| margin: 1rem 0 3rem 0; | ||
| } | ||
| .socials li { | ||
| margin: 0 10px; | ||
| } | ||
| .socials a { | ||
| text-decoration: none; | ||
| color: #fff; | ||
| border: 1.1px solid white; | ||
| padding: 5px; | ||
|
|
||
| border-radius: 50%; | ||
| } | ||
| .socials a i { | ||
| font-size: 1.1rem; | ||
| width: 20px; | ||
| transition: color 0.4s ease; | ||
| } | ||
| .socials a:hover i { | ||
| color: aqua; | ||
| } | ||
| } | ||
| </style> | ||
|
|
||
| <title>Book Store</title> | ||
| <title>Artisan Place</title> | ||
| </head> | ||
| <body> | ||
| <div class="container-fluid"> | ||
| <nav class="navbar bg-white navbar-light shadow p-3"> | ||
| <span class="navbar-brand m-0 h4 fw-bold store">Book Store</span> | ||
| <span class="nav-link border rounded-pill bg-light"> | ||
| <span id="balance">0</span> | ||
| cUSD | ||
| </span> | ||
| </nav> | ||
| <div class="alert alert-warning sticky-top mt-2" role="alert"> | ||
| <span id="notification">⌛ Loading...</span> | ||
| </div> | ||
| <div class="mb-4" style="margin-top: 4em"> | ||
| <a | ||
| class="btn btn-dark rounded-pill" | ||
| data-bs-toggle="modal" | ||
| data-bs-target="#addModal" | ||
| > | ||
| Add Book | ||
| </a> | ||
| </div> | ||
| <main id="marketplace" class="row"></main> | ||
| </div> | ||
|
|
||
| <!-- start of modal that shows book details --> | ||
| <div | ||
| class="modal fade" | ||
| id="addModal1" | ||
| tabindex="-1" | ||
| aria-labelledby="newProductModalLabel" | ||
| aria-hidden="true" | ||
| data-bs-backdrop="static" | ||
| data-bs-keyboard="false" | ||
| > | ||
| <div class="modal-dialog"> | ||
| <div class="modal-content"> | ||
| <div class="modal-header"> | ||
| <h5 class="modal-title" id="newProductModalLabel">Details</h5> | ||
| <body> | ||
| <div class="container mt-2" style="max-width: 72em"> | ||
|
|
||
| <button | ||
| type="button" | ||
| class="btn-close" | ||
| data-bs-dismiss="modal" | ||
| aria-label="Close" | ||
| ></button> | ||
| </div> | ||
| <div class="modal-body" id="modalHeader"></div> | ||
| <nav class="navbar bg-white navbar-light"> | ||
| <div class="container-fluid"> | ||
| <span class="navbar-brand m-0 h4 fw-bold">Artisan Place</span> | ||
| <form class="d-flex"> | ||
| <input class="form-control me-2 couponcode" type="search" placeholder="Enter coupon code" aria-label="Search"> | ||
| <button class="btn btn-outline-success w-100 couponbutton" type="submit">Apply Discount</button> | ||
| </form> | ||
| <span class="nav-link border rounded-pill bg-light"> | ||
| <span id="balance">0</span> | ||
| cUSD | ||
| </span> | ||
| </div> | ||
| </nav> | ||
|
|
||
| <div class="alert alert-warning sticky-top mt-2" role="alert"> | ||
| <span id="notification">⌛ Loading...</span> | ||
| </div> | ||
|
|
||
| <div class="mb-4" style="margin-top: 4em"> | ||
| <a | ||
| class="btn btn-dark rounded-pill" | ||
| data-bs-toggle="modal" | ||
| data-bs-target="#addModal" | ||
| > | ||
| Add Artisan | ||
| </a> | ||
| </div> | ||
|
|
||
| <main id="marketplace" class="row"></main> | ||
| </div> | ||
| <!-- end of modal --> | ||
| <!--Modal--> | ||
|
|
||
| <!--Modal--> | ||
| <div | ||
| class="modal fade" | ||
| id="addModal" | ||
|
|
@@ -181,7 +90,7 @@ <h5 class="modal-title" id="newProductModalLabel">Details</h5> | |
| <div class="modal-dialog"> | ||
| <div class="modal-content"> | ||
| <div class="modal-header"> | ||
| <h5 class="modal-title" id="newProductModalLabel">New Book</h5> | ||
| <h5 class="modal-title" id="newArtisanModalLabel">New Artisan</h5> | ||
| <button | ||
| type="button" | ||
| class="btn-close" | ||
|
|
@@ -195,9 +104,9 @@ <h5 class="modal-title" id="newProductModalLabel">New Book</h5> | |
| <div class="col"> | ||
| <input | ||
| type="text" | ||
| id="newProductName" | ||
| id="newArtisanName" | ||
| class="form-control mb-2" | ||
| placeholder="Enter name of book" | ||
| placeholder="Enter name of artisan" | ||
| /> | ||
| </div> | ||
| <div class="col"> | ||
|
|
@@ -211,9 +120,9 @@ <h5 class="modal-title" id="newProductModalLabel">New Book</h5> | |
| <div class="col"> | ||
| <input | ||
| type="text" | ||
| id="newProductDescription" | ||
| id="newArtisanDescription" | ||
| class="form-control mb-2" | ||
| placeholder="Book description" | ||
| placeholder="Enter skills description" | ||
| /> | ||
| </div> | ||
| <div class="col"> | ||
|
|
@@ -247,42 +156,21 @@ <h5 class="modal-title" id="newProductModalLabel">New Book</h5> | |
| type="button" | ||
| class="btn btn-dark" | ||
| data-bs-dismiss="modal" | ||
| id="newProductBtn" | ||
| id="newArtisanBtn" | ||
| > | ||
| Add book | ||
| Add Artisan | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <!--/Modal--> | ||
| <!--/Modal--> | ||
|
|
||
| <script | ||
| src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" | ||
| integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" | ||
| crossorigin="anonymous" | ||
| src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" | ||
| integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" | ||
| crossorigin="anonymous" | ||
| ></script> | ||
| <script src="https://unpkg.com/[email protected]/blockies.min.js"></script> | ||
| <script type="text/javascript" src="main.js"></script></body> | ||
|
|
||
| <footer> | ||
| <div class="footer-content"> | ||
| <h5>Connect with us</h5> | ||
| <ul class="socials"> | ||
| <li> | ||
| <a href="#"><i class="fa fa-facebook"></i></a> | ||
| </li> | ||
| <li> | ||
| <a href="#"><i class="fa fa-twitter"></i></a> | ||
| </li> | ||
| <li> | ||
| <a href="#"><i class="fa fa-google-plus"></i></a> | ||
| </li> | ||
| <li> | ||
| <a href="#"><i class="fa fa-linkedin-square"></i></a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </footer> | ||
| </html> | ||
|
|
||
| </html> | ||
| </html> | ||
Oops, something went wrong.