I'm a newbie and have been trying to follow along with this tutorial: https://www.youtube.com/watch?v=o-cKmAeNJiA&t=315s. For some reason my footer bottom content is floating in the middle and won't actual stick to the bottom of the page. It also won't center to the middle which is pretty confusing. The background is transparent which is what I want. Help?
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@700&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="app3.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>Quarantine Blog</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Quarantine Pal</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Our Mission</a>
<a class="dropdown-item" href="#">Our Team</a>
<a class="dropdown-item" href="#">FAQ</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Our Founder</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Press</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Sign Up <i class="fa fa-user-plus"></i></a></li>
<li><a href="#">Login <i class="fa fa-user"></i></a></li>
</ul>
</div>
</div>
</nav>
<section id="header" class="jumbotron text-center">
<h1 class="display-3">Quarantine Blog</h1>
<p class="lead">Exploring the 'New Normal'</p>
<hr>
<a href="" class="btn btn-primary">Sign Up</a>
<a href="" class="btn btn-success">Login</a>
</section>
<div class="container">
<div class="card-deck">
<div class="card">
<img src="https://images.unsplash.com/photo-1588776409240-05d32e7614f5?ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80" class="card-img-top" alt="Sailor Moon">
<div class="card-body">
<h5 class="card-title text-center">Self-Care and Burn Out</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<div class="card-footer">
<a href="" class="btn btn-outline btn-success btn-sm">Download</a>
<a href="" class="btn btn-outline btn-danger btn-sm"><i class="fa fa-heart-o"></i></a>
</div>
</div>
<div class="card">
<img src="https://images.unsplash.com/photo-1588779851655-558c2897779d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80" class="card-img-top" alt="Inuyasha">
<div class="card-body">
<h5 class="card-title text-center">Help Fight Coronavirus</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<div class="card-footer">
<a href="" class="btn btn-outline btn-success btn-sm">Download</a>
<a href="" class="btn btn-outline btn-danger btn-sm"><i class="fa fa-heart-o"></i></a>
</div>
</div>
<div class="card">
<img src="https://images.unsplash.com/photo-1588777308282-b3dd5ce9fb67?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80" class="card-img-top" alt="Dragon Ball Z">
<div class="card-body">
<h5 class="card-title text-center">Pandemic Socializing</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<div class="card-footer">
<a href="" class="btn btn-outline btn-success btn-sm">Download</a>
<a href="" class="btn btn-outline btn-danger btn-sm"><i class="fa fa-heart-o"></i></a>
</div>
</div>
</div>
</div>
<footer>
<div class="footer">
<div class="footer-content">
<div class="footer-section about"></div>
<div class="footer-section links"></div>
<div class="footer-section contact us"></div>
</div>
<div class="footer-bottom">
© quarantinepal.com | Designed by Jamie Tyson
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
的CSS
#header {
background-color: transparent;
background-position: center bottom;
}
h1 {
color: white;
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4),
0px 8px 13px rgba(0, 0, 0, 0.1),
0px 18px 23px rgba(0, 0, 0, 0.2);
font-family: 'Source Sans Pro', sans-serif;
}
.navbar-brand {
color: white;
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4),
0px 8px 13px rgba(0, 0, 0, 0.1),
0px 18px 23px rgba(0, 0, 0, 0.2);
font-family: 'Source Sans Pro', sans-serif;
}
.navbar.bg-dark.navbar-dark {
background-color: transparent !important;
}
body {
height: 100%;
}
body {
background-image: url('https://images.unsplash.com/photo-1588774210246-a1dc467758df?ixlib=rb-1.2.1&auto=format&fit=crop&w=1934&q=80')
}
.card-deck {
padding-bottom: 100px;
}
.card-body {
background-color: transparent;
opacity: 80%;
font-family: 'Source Sans Pro',
}
.card {
background-color: transparent !important;
border-color: white !important;
}
.card-footer {
background-color: transparent;
opacity: 80%;
border-top: white;
}
.lead {
color: white;
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4),
0px 8px 13px rgba(0, 0, 0, 0.1),
0px 18px 23px rgba(0, 0, 0, 0.2);
font-family: 'Source Sans Pro', sans-serif;
}
.card-title {
color: white !important;
opacity: 100% !important;
font-family: 'Source Sans Pro', sans-serif;
}
.card-text {
color: white !important;
opacity: 100% !important;
font-family: 'Source Sans Pro', sans-serif;
}
.nav-link {
color: white !important;
font-family: 'Source Sans Pro', sans-serif;
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4),
0px 8px 13px rgba(0, 0, 0, 0.1),
0px 18px 23px rgba(0, 0, 0, 0.2);
}
.dropdown-menu {
background-color: transparent !important;
border: transparent !important;
}
.dropdown-item {
color: white !important;
font-family: 'Source Sans Pro', sans-serif;
}
.navbar-nav.mr-auto a:hover {
color: magenta !important;
text-decoration: none ;
}
.nav.navbar-nav.navbar-right li a {
color: white !important;
font-family: 'Source Sans Pro', sans-serif;
padding-left: 10px;
}
.nav.navbar-nav.navbar-right a:hover {
color: magenta !important;
text-decoration: none ;
}
hr {
width: 400px !important;
border-top: 1px solid #f8f8f8 !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
}
.dropdown-item {
background-color: transparent !important;
}
.footer {
background: transparent;
color: white;
height: 200px;
position: relative;
}
.footer.footer-bottom {
background: transparent;
color: white;
height: 50px;
width: 100%;
text-align: center;
position: absolute;
bottom: 0px !important;
left: 0px;
padding-top: 20px;
}
.footer.footer-content {
border: 1px solid red;
height: 350px;
}
html {
margin: 0;
padding: 0;
height: 100%;
}
.page-wrapper {
min-height: 100%;
}
