Bootstrap Card
<!DOCTYPE html>
<html lang="en">
<head>
<title>hikmal tzy</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="javascript:void(0)">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="text" placeholder="Search">
<button class="btn btn-primary" type="button">Search</button>
</form>
</div>
</div>
</nav>
<div class="container-fluid mt-3">
<h3>Navbar Forms</h3>
<p>You can also include forms inside the navigation bar.</p>
</div>
<div class="container mt-3">
<h2>info tentang BMW S1000RR</h2>
<p>BMW S1000RR</p>
<div class="card" style="width:400px">
<img class="card-img-top" src="download (2).jpg" alt="Card image" style="width:100%">
<div class="card-body">
<h4 class="card-title">BMW S1000RR</h4>
<p class="card-text">BMW S1000RR adalah motor sport yang awalnya dibuat oleh BMW Motorrad untuk bersaing di 2009 Superbike World Championship, yang sekarang dalam produksi komersial. Saat itu diperkenalkan di Munich pada bulan April 2008, dan didukung oleh mesin berkapasitas 999 cc inline-4 mesin redlined di 14.200 rpm.</p>
<a href="https://id.wikipedia.org/wiki/BMW_S1000RR" class="btn btn-primary">See Profile</a>
</div>
.jpg)
Tidak ada komentar:
Posting Komentar