bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar bg-dark border-bottom border-body" data-bs-theme="dark" fixed-top navbar-expand-lg">
<div class="container-fluid">
<a href="#" class="navbar-brand">Captureholics</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link" href="#">Home</a>
<a class="nav-link" href="#">Contact</a>
<a class="nav-link" href="#">About us</a>
</div>
</div>
<nav class="navbar bg-dark">
<div class="container-fluid">
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>
</div>
</nav>
<div class="container">
<h2>Bootstrap Demo</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et eaque quisquam nihil corporis beatae praesentium magnam, voluptate sapiente sed. Labore, consequuntur saepe numquam esse sit doloremque sunt asperiores excepturi? Sed.
Ratione dicta unde debitis alias recusandae ut rerum nostrum expedita similique at, ex necessitatibus! Itaque maiores nesciunt hic similique quasi. Voluptate repellendus voluptas incidunt illo exercitationem repudiandae nam necessitatibus vitae.
Est, velit voluptate! Optio, voluptatibus consequuntur laudantium, totam provident deleniti itaque excepturi sequi quod commodi cum! Et commodi voluptatum adipisci eaque suscipit in architecto odio non? Asperiores, illo aperiam? Assumenda!
Placeat laudantium veritatis velit quasi aliquid. Reiciendis unde dolores a quia animi dignissimos, veniam velit repudiandae officia nostrum ab numquam nisi qui assumenda ullam perferendis tempora placeat explicabo aperiam excepturi!
Ad saepe reprehenderit aliquam. Deserunt eum, libero officiis adipisci illum nam provident rerum quasi eaque cumque quod ratione natus praesentium sequi similique deleniti numquam modi harum perferendis. Eius, veritatis ex.</p>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" ></script>
</body>
</html>
Comments
Post a Comment