how can I turn
<a class="navbar-brand" href="index.html"> QuadroStudios </a>
into a image code for my navbar
this is my code
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>QuadroStudios</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" media="screen" href="about.css" />
<!-- <script src='main.js'></script> -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
</head>
<style>
body {
background-color: #212529;
overflow-x: hidden;
}
.about {
position: relative;
top: 25px;
left: 10px;
color: white;
}
.title {
color: white;
font-size: 25px;
font-family: Inconsolata;
}
.storehauled {
position: relative;
top: 100px;
left: 30px;
color: white;
font-size: 20px;
font-family: Inconsolata;
}
</style>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="index.html"> QuadroStudios </a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="home.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="update.html"> Updates </a>
</li>
<li class="nav-item">
<a class="nav-link" href="leaks.html"> Leaks </a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="about.html">
About
</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="about">
<h1 class="title">
Here you can find info about our games and what QuadroStudios is about!
</h1>
</div>
<div class="storehauled">
<p>
Storehauled <br />
On Roblox:
<a class="robloxgame" href="https://www.roblox.com/games/6258825725">
Roblox Game
</a>
<br />
Released: 1/18/2021 <br />
<br />
Current status: Remaking [in Beta] <br />
<br />
Progress: <br />
UI - Completed <br />
Map - Mostly completed [70%] <br />
Users: Brony#0445 Babushka_OP#6118 <br />
Trello board:
<a class="trello" href="https://trello.com/b/WzuH9IK3">
Trello of the Game</a
>
<br />
Early access release: Late Q4 2021 - Beta is the last part of closed
development. We'll let you know when you can access the game freely.
<br />
<br />
Teasers of the game: <br />
<br />
The park is the most chilling place in here... <br />
<br />
<img src="teaser1.png" />
</p>
</div>
</body>
I couldn’t find a way to do it I kept breaking it
>Solution :
Just put an img tag inside your a[nchor] tag
<a class="navbar-brand" href="index.html"><img src="<your picture>" alt="<your alt text>"></a>
Make sure your navbar-brand class is appropriate, or you might need to add another class to style your img the way you want.