home
This commit is contained in:
parent
1f75c986f8
commit
45c358716e
2 changed files with 168 additions and 4 deletions
85
css/home.css
85
css/home.css
|
|
@ -85,4 +85,89 @@
|
||||||
padding: 40px 50px;
|
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;
|
||||||
|
}
|
||||||
|
|
|
||||||
83
home.html
83
home.html
|
|
@ -10,6 +10,37 @@
|
||||||
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" 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>
|
</head>
|
||||||
<body>
|
<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">
|
<div id="myCarousel" class="carousel slide" data-ride="carousel">
|
||||||
<!-- Indicators -->
|
<!-- Indicators -->
|
||||||
<ol class="carousel-indicators">
|
<ol class="carousel-indicators">
|
||||||
|
|
@ -164,8 +195,8 @@
|
||||||
<div class="col-md-4">
|
<div class="col-md-4">
|
||||||
<p>Drop a note.</p>
|
<p>Drop a note.</p>
|
||||||
<p><span class="glyphicon glyphicon-map-marker"></span>Denver, US</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-phone"></span>Phone: +00 1515151515</p>-->
|
||||||
<p><span class="glyphicon glyphicon-envelope"></span>Email: mail@mail.com</p>
|
<p><span class="glyphicon glyphicon-envelope"></span>Email: contact@whytheyfight.com</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-8">
|
<div class="col-md-8">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
@ -185,5 +216,53 @@
|
||||||
</div>
|
</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>
|
</body>
|
||||||
</html>
|
</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>
|
||||||
Loading…
Reference in a new issue