I attempted to implement this but I couldn't figure out how to do it or what attribute to use. Can someone assist me with this? Below is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<!--Bootstrap-->
<meta name="viewport" content="width=device-width, initial- scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--Declaration-->
<meta charset="utf-8">
<title>Home</title>
</head>
<body style="height: px">
<!--Content-->
<!--navbar-fixed-top (fix that)-->
<nav class="navbar navbar-inverse">
<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="#">Directory 41</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<!--first tab-->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Topics<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Computer Building</a></li>
<li><a href="#">Cryptocurrencies</a></li>
<li><a href="#">Hacking</a><li>
<li><a href="#">Programming</a></li>
<li><a href="#">Troubleshooting</ a></li>
</ul>
<!--second tab-->
<li class="dropdown">
<a class="dropdown-toggle" data- toggle="dropdown" href="#">Books<span class="caret"></ span></a>
<ul class="dropdown-menu">
<li><a href="#">CWNA Guide to Wireless LANs</a></li>
<li><a href="#">Learn CCNA</a></li>
</ul>
<!--Third Tab-->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Definitions<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Computer Building</a></li>
<li><a href="#">Cryptocurrencies</a></li>
<li><a href="#">Hacking</a></li>
<li><a href="#">Programming</a></li>
<li><a href="#">Troubleshooting</a></li>
</ul>
<!--Fourth Tab-->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">About Us<span class="caret"></span>
<ul class="dropdown-menu">
<li><a href="#">Our Story</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">Survey</a></li>
</ul>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span>Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span>Login</a></li>
</ul>
</div>
</div>
</nav>
<!--End of Nav Bar-->
<!--Beginning of Content-->
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque gravida, lectus vitae gravida pharetra, arcu mi commodo orci, non tempus ex diam sit amet lorem. Nulla eros tortor, dictum nec lacus mattis, interdum pharetra leo. Phasellus lobortis nulla id ex tristique iaculis. Donec nec facilisis mi. Vestibulum at est elementum, laoreet eros sit amet, mollis dolor. Suspendisse sit amet varius mauris.</p>
<!--Gallery(Books)-->
<!--first gallery-->
<div class="gallery">
<a target="_blank" href="#">
<img src="image" alt="" height="200" width="150"></a>
<div class="desc">Description goes here</div></div>
<!--second gallery-->
<div class="gallery2">
<a target="_blank" href="#">
<img src="image" alt="#" height="200" width="150"></a>
<div class="desc">Description goes here</div></div>
</body>
</html>
<style type="text/css">
/*content*/
body {
background-color: light gray;
}
/*p {
padding: 10px;
margin: 10px;
background-color: black;
color: yellow;
}*/
/*gallery*/
.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 170px;
}
.gallery:hover {
border: 1px solid #777;
}
.gallery img {
width: 100%;
height: auto;
}
.desc {
padding: 15px;
text-align: center;
}
/*gallery 2*/
.gallery2 {
margin: 5px;
border: 1px solid #ccc;
float: right;
width: 180px;
}
</style>
Apologies for omitting some code. If anyone can assist with fixing that, I would greatly appreciate it. Thank you for any help.
Also, I did not include the image on img src due to technical limitations.