failed to style Navbar and main content - css

Question

As a backend developer, I use bootstrap and materialize css to style or create a web content, I do not have enough of knowledge in css and bootstrap also, I have try to make a landing page like this one down below, but i failed to make that happens using bootstrap and css, is there anyone who can help me to create a landing page like this one in the picture down below? It is not necessary for the card to be equally, in fact, you can skip the cards.
Here is what i have try:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD#20..48,100..700,0..1,-50..200" />
<nav class="navbar bg-body-tertiary">
<div class="container">
<a class="navbar-brand" href="#">
<img src="/docs/5.3/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="30" height="24">
<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">
<a class="nav-link" href="#">Link</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">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</a>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="container p-5">
<h1>Landing Page</h1>
<br>
<h4>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur recusandae accusamus enim dolorum sequi saepe unde minima</h4>
<br>
<a class="btn btn-primary" href="{% url 'Get_started' %}">Get Started</a>
</div>
</div>
</div>
</div>
<br>
<div class="container">
<div class="row">
<div class="col text-center">
<div class="card">
<div class="card-body">
<span style="font-size: 70px; color: dodgerblue;" class="material-symbols-outlined">
database
</span>
<br>
<p>With pondadb, you can easily manage all the students of your school.
The data is stored in an organized manner so that you don't need to spend a lot of time looking
for it. Beside, the data is encrypted to prevent any unauthorised access and modification.
</p>
</div>
</div>
</div>
<div class="col text-center">
<div class="card">
<div class="card-body">
<span style="font-size: 70px; color: dodgerblue;" class="material-symbols-outlined">
lock
</span>
<br>
<p>We will never let your educational information to be lost, because with pondadb all of your student's data
can be found at anytime and anywhere. We have a great database to store information of students.
</p>
</div>
</div>
</div>
<div class="col text-center">
<div class="card">
<div class="card-body">
<span style="font-size: 70px; color: dodgerblue;" class="material-symbols-outlined">
school
</span>
<br>
<p>pondadb is a tool that allows schools to store their student's information securely and rapidily on their
own. The database allows schools to organized records easily,
create list of album for a students that graduated in a year,
so that it can be easily for a school to find a student.
</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>