adding base for home page

home-test
max 1 year ago
parent e8597e6506
commit a1ee88add7

@ -0,0 +1,13 @@
.container {
padding: 80px 120px;
}
.person {
border: 10px solid transparent;
margin-bottom: 25px;
width: 80%;
height: 80%;
opacity: 0.7;
}
.person:hover {
border-color: #f1f1f1;
}

@ -0,0 +1,89 @@
<!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>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

Loading…
Cancel
Save