home
This commit is contained in:
parent
1f75c986f8
commit
45c358716e
2 changed files with 168 additions and 4 deletions
87
css/home.css
87
css/home.css
|
|
@ -85,4 +85,89 @@
|
|||
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;
|
||||
}
|
||||
|
|
|
|||
85
home.html
85
home.html
|
|
@ -10,7 +10,38 @@
|
|||
<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">
|
||||
<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>
|
||||
|
|
@ -164,8 +195,8 @@
|
|||
<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>
|
||||
<!--<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">
|
||||
|
|
@ -185,5 +216,53 @@
|
|||
</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>
|
||||
Loading…
Reference in a new issue