-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
130 lines (117 loc) · 6.97 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="icon.png">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="./styles.css">
<title>Instrument Auction Demo</title>
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="./carousel.css" rel="stylesheet">
</head>
<body>
<header>
<nav class="navbar navbar-expand navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<a class="navbar-brand" onclick="login()" href="#">Instrument Auction Demo</a>
<a class="nav-link text-white" onclick="login()" href="#" >Login Now</a>
</div>
</nav>
</header><main>
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg>
<div class="container">
<div class="carousel-caption text-start">
<h1>Start Bidding Now.</h1>
<p>Find your new favorite instrument today.</p>
<p><a class="btn btn-lg btn-primary" onclick="login()" href="#">Sign up today</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg>
<div class="container">
<div class="carousel-caption">
<h1>Woodwind, Brass, Stringed, Percussion, and more.</h1>
<p>Discover a rare item and make it yours.</p>
<p><a class="btn btn-lg btn-primary" onclick="login()" href="#">Sign up now</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg>
<div class="container">
<div class="carousel-caption text-end">
<h1>Now Featuring Percussion Instruments.</h1>
<p>Collectibles you won't find anywhere else.</p>
<p><a class="btn btn-lg btn-primary" onclick="login()" href="#">Sign Up and Browse</a></p>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
<div class="container marketing">
<!-- Three columns of text below the carousel -->
<div class="row">
<div class="col-lg-4">
<img src="./images/lamp.png" alt="Great deals" class="bd-placeholder-img rounded-circle" width="140" height="140">
<h2>Rare Instruments</h2>
<p>Uncover valuable finds.</p>
<p><a class="btn btn-secondary" onclick="login()" href="#">Bid Now »</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img src="./images/lamp.png" alt="Great deals" class="bd-placeholder-img rounded-circle" width="140" height="140">
<h2>Handmade Instruments</h2>
<p>Fine craftsmanship and one-of-a-kind items.</p>
<p><a class="btn btn-secondary" onclick="login()" href="#">Bid Now »</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img src="./images/lamp.png" alt="Great deals" class="bd-placeholder-img rounded-circle" width="140" height="140">
<h2>Great Deals</h2>
<p>Great items for your personal collection.</p>
<p><a class="btn btn-secondary" onclick="login()" href="#">Bid Now »</a></p>
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
<!-- FOOTER -->
<footer class="container">
<p class="float-end"><a href="#">Back to top</a></p>
</footer>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!--script src="https://cdn.auth0.com/js/auth0-spa-js/1.19/auth0-spa-js.production.js"></script-->
<script src="./login.js"></script>
</body>
</html>