I can’t seem to get the last three credits. Am I’m not sure why. To my inexperienced eyes, I feel like I did it correctly. Possibly because I am using bootstrap?
Thx
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body{
background-color:ghostwhite;
background-image: url("UmbrellaGirl..jpg");
background-size: cover;
background-repeat: no-repeat;
}
.container{
text-align: center;
}
}
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
grid-gap: 20px;
border-block: 1px solid black;
}
h1{
color: royalblue;
font-size: 4em;
}
.top{
margin-top: 1em;
margin-bottom: 1em;;
}
.Top-par{
font-weight: 400;
font-size: 1.3em;
font-kerning: auto;
font-style: italic ;
line-height: 3em;
color:rgb(19, 19, 19);
}
.i-frame{
display: flex;
justify-content: center;
padding: 3em;
}
.bottom{
margin-top: 3em;
}
body { padding-top: 70px; }
#email{
width: 20em;
margin-bottom: 1em;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="Landing.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Jomolhari&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<title>Landing Page</title>
</head>
<body>
<header id="header">
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top justify-content-around" id="nav-bar">
<a class="navbar-brand" href="#"></a><img id="header-img" src="mapsDot1.jpg" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-around" id="navbarNav">
<ul class="navbar-nav justify-content-around ">
<li class="nav-item active">
<a class="nav-link" href="#card-1">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#card-2">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#card-3">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#card-3" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>
</header>
<form action="" class="container" id="form">
<div class="top">
<h1>From Place to Space</h1>
<h4>“Travel makes one modest. You see what a tiny place you occupy in the world.” <br> – Gustave Flaubert
</h3>
<div class="i-frame">
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/jkEmvP6ih48" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
<div>
<p class="Top-par">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corrupti fuga, sequi
iusto modi, cum commodi delectus placeat cupiditate excepturi at molestias aspernatur error.
Aspernatur, quidem? Lorem ipsum dolor sit amet consectetur adipisicing elit. At alias laborum
quisquam temporibus assumenda, itaque cumque officiis dolorum, nulla velit tenetur eaque dicta,
perspiciatis necessitatibus perferendis rerum rem quia quis.</p>
</div>
</div>
<div class="cards row " style="justify-content: space-around; margin-top: 5em;">
<div class="card " id="card-1" style="width: 18rem; margin-top: 4em; float:none; grid-row: ;">
<img src="ad-5.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
</div>
</div>
<div class="card" id="card-2" style="width: 18rem; margin-top: 4em; float:none;">
<img src="ad-4.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
</div>
</div>
<div class="card" id="card-3" style="width: 18rem; margin-top: 4em; float:none;">
<img src="ad-3.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
</div>
</div>
</div>
<div class="bottom">
<div class="Top-par">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum molestias qui adipisci voluptates ipsum obcaecati unde quis, earum libero ipsam voluptate architecto recusandae nam sit?</p>
</div>
<input name="email" id="email" type="email" placeholder="Please Enter Your Email" required>
<div class="submit-form">
<a href="https://www.freecodecamp.com/email-submit) "><button id="submit" type="button" class="btn btn-primary">Submit</button></a>
</div >
</div>
</Div>
</form>
</body>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</html>