189 lines
7.6 KiB
HTML
189 lines
7.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Home | WTFxUS</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="/css/home.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
|
|
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
|
|
</head>
|
|
<body>
|
|
<div id="myCarousel" class="carousel slide" data-ride="carousel">
|
|
<!-- Indicators -->
|
|
<ol class="carousel-indicators">
|
|
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
|
|
<li data-target="#myCarousel" data-slide-to="1"></li>
|
|
<li data-target="#myCarousel" data-slide-to="2"></li>
|
|
</ol>
|
|
|
|
<!-- Wrapper for slides -->
|
|
<div class="carousel-inner" role="listbox">
|
|
<div class="item active">
|
|
<img src="ny.jpg" alt="New York">
|
|
<div class="carousel-caption">
|
|
<h3>New York</h3>
|
|
<p>The atmosphere in New York is lorem ipsum.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<img src="chicago.jpg" alt="Chicago">
|
|
<div class="carousel-caption">
|
|
<h3>Chicago</h3>
|
|
<p>Thank you, Chicago - A night we won't forget.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<img src="la.jpg" alt="Los Angeles">
|
|
<div class="carousel-caption">
|
|
<h3>LA</h3>
|
|
<p>Even though the traffic was a mess, we had the best time.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Left and right controls -->
|
|
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
|
|
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
|
|
<span class="sr-only">Previous</span>
|
|
</a>
|
|
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
|
|
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
|
|
<span class="sr-only">Next</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="container text-center">
|
|
<h3>Why They Fight</h3>
|
|
<p>an open source record label</p>
|
|
<p>This will be the home page for WTFxUS. Check out our latest releases below.</p>
|
|
<br>
|
|
<div class="row">
|
|
<div class="col-sm-4">
|
|
<a href="https://open.spotify.com/album/5VK4bpWvPNA5VJGhJmW3DS?si=9OSaftzeRpifHiJuaSrpMg"><img src="images/sinsations.jpg" alt="Sinsations Soundtrack cover art"></a>
|
|
<br>
|
|
<p><strong>Sinsations Soundtrack</strong><br>crystalculture & Declinedreliable</p>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<a href="https://open.spotify.com/track/4BW6pn822VCsHcxykKhiD1?si=72cff04aaf6b4d14"><img src="images/pleasecomehome.jpg" alt="Please Come Home cover art"></a>
|
|
<br>
|
|
<p><strong>Please Come Home</strong><br>Whit & Manny</p>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<a href="https://open.spotify.com/album/5Jt9mvfzA91rnlEl8r5Es7?si=eQYKrabjS4aa510_U7y67A"><img src="images/nightmare.jpg" alt="Nightmare cover art"></a>
|
|
<br>
|
|
<p><strong>Nightmare</strong><br>crystalculture</p>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<a href="https://open.spotify.com/album/13XwFH5hJWgUVotEabNxrg?si=DOUMbE6SSHSKtUUp4u2JLg"><img src="images/daydream.jpg" alt="Daydream cover art"></a>
|
|
<br>
|
|
<p><strong>Daydream</strong><br>crystalculture</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--
|
|
<div class="bg-1">
|
|
<div class="container">
|
|
<h3 class="text-center">UPCOMING EVENTS</h3>
|
|
<p class="text-center">idk what to put here yet<br> Remember to book your tickets!</p>
|
|
|
|
<ul class="list-group">
|
|
<li class="list-group-item">September <span class="label label-danger">Sold Out!</span></li>
|
|
<li class="list-group-item">October Sold Out!</li>
|
|
<li class="list-group-item">November 3</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="row text-center">
|
|
<div class="col-sm-4">
|
|
<div class="thumbnail">
|
|
<img src="paris.jpg" alt="Paris">
|
|
<p><strong>Paris</strong></p>
|
|
<p>Fri. 27 November 2015</p>
|
|
<button class="btn" data-toggle="modal" data-target="#myModal">Buy Tickets</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div class="thumbnail">
|
|
<img src="newyork.jpg" alt="New York">
|
|
<p><strong>New York</strong></p>
|
|
<p>Sat. 28 November 2015</p>
|
|
<button class="btn" data-toggle="modal" data-target="#myModal">Buy Tickets</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div class="thumbnail">
|
|
<img src="sanfran.jpg" alt="San Francisco">
|
|
<p><strong>San Francisco</strong></p>
|
|
<p>Sun. 29 November 2015</p>
|
|
<button class="btn data-toggle="modal" data-target="#myModal"">Buy Tickets</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="myModal" role="dialog">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal">×</button>
|
|
<h4><span class="glyphicon glyphicon-lock"></span> Tickets</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form role="form">
|
|
<div class="form-group">
|
|
<label for="psw"><span class="glyphicon glyphicon-shopping-cart"></span> Tickets, $23 per person</label>
|
|
<input type="number" class="form-control" id="psw" placeholder="How many?">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="usrname"><span class="glyphicon glyphicon-user"></span> Send To</label>
|
|
<input type="text" class="form-control" id="usrname" placeholder="Enter email">
|
|
</div>
|
|
<button type="submit" class="btn btn-block">Pay
|
|
<span class="glyphicon glyphicon-ok"></span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal">
|
|
<span class="glyphicon glyphicon-remove"></span> Cancel
|
|
</button>
|
|
<p>Need <a href="#">help?</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
-->
|
|
|
|
<div class="container">
|
|
<h3 class="text-center">Contact</h3>
|
|
<p class="text-center"><em>We love our fans!</em></p>
|
|
<div class="row test">
|
|
<div class="col-md-4">
|
|
<p>Drop a note.</p>
|
|
<p><span class="glyphicon glyphicon-map-marker"></span>Denver, US</p>
|
|
<p><span class="glyphicon glyphicon-phone"></span>Phone: +00 1515151515</p>
|
|
<p><span class="glyphicon glyphicon-envelope"></span>Email: mail@mail.com</p>
|
|
</div>
|
|
<div class="col-md-8">
|
|
<div class="row">
|
|
<div class="col-sm-6 form-group">
|
|
<input class="form-control" id="name" name="name" placeholder="Name" type="text" required>
|
|
</div>
|
|
<div class="col-sm-6 form-group">
|
|
<input class="form-control" id="email" name="email" placeholder="Email" type="email" required>
|
|
</div>
|
|
</div>
|
|
<textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea>
|
|
<div class="row">
|
|
<div class="col-md-12 form-group">
|
|
<button class="btn pull-right" type="submit">Send</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|