1. 아래 blog를 구현하시오.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<title>Hello, world!</title>
<style>
.blog-header-logo,
h1,
h2,
h3 {
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
font-size: 2.25rem;
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="row justify-content-between align-items-center border-bottom py-3">
<div class="col-4"><a class="text-muted" href="">Subscrib</a></div>
<div class="col-4 text-center"><a class="text-dark blog-header-logo" href="">Large</a></div>
<div class="col-4 d-flex justify-content-end align-items-center">
<a href="#"><i class="bi bi-search px-2 my-auto"></i></a>
<a href="#" class="btn btn-sm btn-outline-secondary">Sign up</a>
</div>
</div>
<div class="py-1 mb-2">
<nav class="nav d-flex flex-nowrap justify-content-between">
<a class="p-2 link-secondary" href="#">World</a>
<a class="p-2 link-secondary" href="#">World</a>
<a class="p-2 link-secondary" href="#">World</a>
<a class="p-2 link-secondary" href="#">World</a>
<a class="p-2 link-secondary" href="#">World</a>
<a class="p-2 link-secondary" href="#">World</a>
<a class="p-2 link-secondary" href="#">World</a>
<a class="p-2 link-secondary" href="#">World</a>
<a class="p-2 link-secondary" href="#">World</a>
<a class="p-2 link-secondary" href="#">World</a>
<a class="p-2 link-secondary" href="#">World</a>
<a class="p-2 link-secondary" href="#">World</a>
</nav>
</div>
</header>
<main>
<section class="border bg-dark text-white p-4 p-md-5 mb-4 rounded">
<div class="col-md-6">
<h1 class="display-5 fst-italic">Title of a longer featured blog post</h1>
<p class="lead my-3">Multiple lines of text that form the lede, informing new readers quickly and
efficiently about what’s most interesting in this post’s contents.</p>
<p><a href="#" class="text-white fw-bold h5">Continue reading...</a></p>
</div>
</section>
<section class="row">
<div class="col">
<div class="card mb-3">
<div class="row g-0">
<div class="col-lg-8">
<div class="card-body">
<h6 class="card-title mb-2 text-primary"><strong>World</strong></h6>
<h3 class="mb-0">Featured Post</h3>
<p class="text-body-secondary mb-1">Nov 12</p>
<p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<a class="py" href="#">countinue reading</a>
</div>
</div>
<div class="col-lg-4 d-none d-lg-block">
<img style="height: 240px;" src="이미지/image.png" class="img-fluid rounded-start" alt="...">
</div>
</div>
</div>
</div>
<div class="col">
<div class="card mb-3">
<div class="row g-0">
<div class="col-lg-8">
<div class="card-body">
<h6 class="card-title mb-2 text-primary"><strong>World</strong></h6>
<h3 class="mb-0">Featured Post</h3>
<p class="text-body-secondary mb-1">Nov 12</p>
<p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<a class="py" href="#">countinue reading</a>
</div>
</div>
<div class="col-lg-4 d-none d-lg-block">
<img style="height: 240px;" src="이미지/image.png" class="img-fluid rounded-start" alt="...">
</div>
</div>
</div>
</section>
<section></section>
</main>
</div>
</body>
</html>
