Compare commits
5 commits
| Author | SHA1 | Date | |
|---|---|---|---|
| be5e3fb6f5 | |||
| 5dd8424407 | |||
| 45c358716e | |||
| 1f75c986f8 | |||
| a1ee88add7 |
8 changed files with 444 additions and 0 deletions
173
css/home.css
Normal file
173
css/home.css
Normal file
|
|
@ -0,0 +1,173 @@
|
|||
.container {
|
||||
padding: 80px 120px;
|
||||
}
|
||||
.person {
|
||||
border: 10px solid transparent;
|
||||
margin-bottom: 25px;
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.person:hover {
|
||||
border-color: #f1f1f1;
|
||||
}
|
||||
.carousel-inner img {
|
||||
-webkit-filter: grayscale(90%);
|
||||
filter: grayscale(90%); /* make all photos black and white */
|
||||
width: 100%; /* Set width to 100% */
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.carousel-caption h3 {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.carousel-caption {
|
||||
display: none; /* Hide the carousel text when the screen is less than 600 pixels wide */
|
||||
}
|
||||
}
|
||||
|
||||
.bg-1 {
|
||||
background: #2d2d30;
|
||||
color: #bdbdbd;
|
||||
}
|
||||
.bg-1 h3 {color: #fff;}
|
||||
.bg-1 p {font-style: italic;}
|
||||
|
||||
/* Remove rounded borders from list */
|
||||
.list-group-item:first-child {
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
.list-group-item:last-child {
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
/* Remove border and add padding to thumbnails */
|
||||
.thumbnail {
|
||||
padding: 0 0 15px 0;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.thumbnail p {
|
||||
margin-top: 15px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
/* Black buttons with extra padding and without rounded borders */
|
||||
.btn {
|
||||
padding: 10px 20px;
|
||||
background-color: #333;
|
||||
color: #f1f1f1;
|
||||
border-radius: 0;
|
||||
transition: .2s;
|
||||
}
|
||||
|
||||
/* On hover, the color of .btn will transition to white with black text */
|
||||
.btn:hover, .btn:focus {
|
||||
border: 1px solid #333;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.modal-header, h4, .close {
|
||||
background-color: #333;
|
||||
color: #fff !important;
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.modal-header, .modal-body {
|
||||
padding: 40px 50px;
|
||||
}
|
||||
|
||||
/* Add a dark background color with a little bit see-through */
|
||||
.navbar {
|
||||
margin-bottom: 0;
|
||||
background-color: #2d2d30;
|
||||
border: 0;
|
||||
font-size: 11px !important;
|
||||
letter-spacing: 4px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* Add a gray color to all navbar links */
|
||||
.navbar li a, .navbar .navbar-brand {
|
||||
color: #d5d5d5 !important;
|
||||
}
|
||||
|
||||
/* On hover, the links will turn white */
|
||||
.navbar-nav li a:hover {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
/* The active link */
|
||||
.navbar-nav li.active a {
|
||||
color: #fff !important;
|
||||
background-color:#29292c !important;
|
||||
}
|
||||
|
||||
/* Remove border color from the collapsible button */
|
||||
.navbar-default .navbar-toggle {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
/* Dropdown */
|
||||
.open .dropdown-toggle {
|
||||
color: #fff ;
|
||||
background-color: #555 !important;
|
||||
}
|
||||
|
||||
/* Dropdown links */
|
||||
.dropdown-menu li a {
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
/* On hover, the dropdown links will turn red */
|
||||
.dropdown-menu li a:hover {
|
||||
background-color: red !important;
|
||||
}
|
||||
/* Add a dark background color to the footer */
|
||||
footer {
|
||||
background-color: #2d2d30;
|
||||
color: #f5f5f5;
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: #f5f5f5;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
color: #777;
|
||||
text-decoration: none;
|
||||
}
|
||||
body {
|
||||
font: 400 15px/1.8 Lato, sans-serif;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
font-family: Montserrat, sans-serif;
|
||||
}
|
||||
/* Overwrite default styles of h3 and h4 */
|
||||
h3, h4 {
|
||||
margin: 10px 0 30px 0;
|
||||
letter-spacing: 10px;
|
||||
font-size: 20px;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
/* Remove rounded borders on input fields */
|
||||
.form-control {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* Disable the ability to resize textareas */
|
||||
textarea {
|
||||
resize: none;
|
||||
}
|
||||
269
home.html
Normal file
269
home.html
Normal file
|
|
@ -0,0 +1,269 @@
|
|||
<!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>
|
||||
<script defer data-domain="whytheyfight.com" src="https://stats.whytheyfight.com/js/script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-default navbar-fixed-top">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="/images/white logo.png">Logo</a>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse" id="myNavbar">
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li><a href="home.html">HOME</a></li>
|
||||
<li><a href="https://open.spotify.com/playlist/1Eu0OT5741DZAkePkyeFYQ?si=4aa4d89be57b41bf">MUSIC</a></li>
|
||||
<li><a href="https://blog.whytheyfight.com">BLOG</a></li>
|
||||
<li><a href="https://store.whytheyfight.com">STORE</a></li>
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="#">MORE
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="about.html">ABOUT</a></li>
|
||||
<li><a href="#contact">CONTACT</a></li>
|
||||
<li><a href="#">Media</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#"><span class="glyphicon glyphicon-search"></span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<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: contact@whytheyfight.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>
|
||||
<iframe width="100%" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=-105.56900024414062%2C39.50721944338612%2C-104.74502563476564%2C40.0076315603083&layer=mapnik" style="border: 1px solid black"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
>
|
||||
</div>
|
||||
<iframe width="100%" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=-105.56900024414062%2C39.50721944338612%2C-104.74502563476564%2C40.0076315603083&layer=mapnik" style="border: 1px solid black"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
<footer class="text-center">
|
||||
<a class="up-arrow" href="#myPage" data-toggle="tooltip" title="TO TOP">
|
||||
<span class="glyphicon glyphicon-chevron-up"></span>
|
||||
</a><br><br>
|
||||
<p style="color: aliceblue; text-align: center; padding: 5px 15px;"><a href="https://git.whytheyfight.com/max/WTFxUS/src/branch/master/index.html">Source Code</a></p>
|
||||
<br>
|
||||
<p>Bootstrap Theme Made By <a href="https://www.w3schools.com" data-toggle="tooltip" title="Visit w3schools">www.w3schools.com</a></p>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
// Initialize Tooltip
|
||||
$('[data-toggle="tooltip"]').tooltip();
|
||||
})
|
||||
</script>
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
// Add smooth scrolling to all links in navbar + footer link
|
||||
$(".navbar a, footer a[href='#myPage']").on('click', function(event) {
|
||||
|
||||
// Make sure this.hash has a value before overriding default behavior
|
||||
if (this.hash !== "") {
|
||||
|
||||
// Prevent default anchor click behavior
|
||||
event.preventDefault();
|
||||
|
||||
// Store hash
|
||||
var hash = this.hash;
|
||||
|
||||
// Using jQuery's animate() method to add smooth page scroll
|
||||
// The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
|
||||
$('html, body').animate({
|
||||
scrollTop: $(hash).offset().top
|
||||
}, 900, function(){
|
||||
|
||||
// Add hash (#) to URL when done scrolling (default click behavior)
|
||||
window.location.hash = hash;
|
||||
});
|
||||
} // End if
|
||||
});
|
||||
})
|
||||
</script>
|
||||
BIN
images/daydream.jpg
Normal file
BIN
images/daydream.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
images/nightmare.jpg
Normal file
BIN
images/nightmare.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
images/pleasecomehome.jpg
Normal file
BIN
images/pleasecomehome.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
BIN
images/sinsations.jpg
Normal file
BIN
images/sinsations.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
|
|
@ -8,6 +8,7 @@
|
|||
<meta name="description" content="WTFxUS Landing Page">
|
||||
<meta name="keywords" content="WTFxUS, Record label, independent, diy">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script defer data-domain="whytheyfight.com" src="https://stats.whytheyfight.com/js/script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="bgimg-1">
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="/css/maxfromwtf.css">
|
||||
<title>Links | WTFxUS</title>
|
||||
<script defer data-domain="whytheyfight.com" src="https://stats.whytheyfight.com/js/script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Profile picture-->
|
||||
|
|
|
|||
Loading…
Reference in a new issue