এই মডিউলে ব্যানার ডিজাইনের কাজটি করে ফেলি।
এর জন্য https://github.com/ratin17/Hospital-management-Frontend গিটহাব রেপোসিটরি থেকে Images ফোল্ডার টি সংগ্রহ করে রুট ডিরেকটরিতে রাখি-
index.html ফাইলটি নিচের মত করে লিখে ফেলি-
Code:: 17.2.1 index.html
style.css ফাইলটি নিচের মত করে লিখে ফেলি-
Code:: 17.2.2 style.css
এখন, ব্রাউজারে নিচের মত আউটপুট দেখা যাবে-
Last updated
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hospital</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="..."
/>
<link
href="https://cdn.jsdelivr.net/npm/swiffy-slider@1.6.0/dist/css/swiffy-slider.min.css"
rel="stylesheet"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<!-- Navbar -->
<nav class="d-flex justify-content-around align-items-center p-4">
<div class="logo-container d-flex align-items-center gap-2">
<img src="./Images/stethoscope 1.png" alt="" />
<h3>SmartCare</h3>
</div>
<div class="menu-container d-flex gap-3">
<li class="menu"><a href="index.html"></a></li>
<li class="menu">Services</li>
<li class="menu">Contact us</li>
<li class="menu"><a target="_blank" href="login.html">Login</a></li>
</div>
</nav>
<!-- Banner -->
<div class="banner-container">
<h3>I am Mehrab Rabbi Ratin</h3>
<div class="banner">
<div class="banner-left">
<h1>
Providing Quality
<br />
Healthcare
</h1>
<p class="w-50 m-auto">
Healthcare facilities send reminders to patients ahead of their appointments, reducing the number of cancellations and absentees. Potential delays are notified ahead of time, allowing patients to show up later and thus prevent their having to wait too long.
</p>
</div>
<div class="banner-img">
<img class="bn-img" src="./Images/doc.png" alt="" />
</div>
</div>
</div>
</header>
<!-- add script file -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.js"></script>
<script src="./app.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.bundle.min.js"
integrity="..."
></script>
<script
src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.6.0/dist/js/swiffy-slider.min.js"
crossorigin="anonymous"
defer
></script>
</body>
</html>body{
/* width: 1200px; */
/* border: 1px solid gray; */
margin: auto;
background-color: rgb(241, 234, 234);
}
li{
list-style: none;
}
nav{
background-color:aqua;
}
.menu{
font-size: 20px;
}
.menu:hover{
color: white;
cursor: pointer;
}
.banner-container{
width: 1200px;
margin: auto;
padding: 30px;
}
.banner{
height: 450px;
margin: auto;
display: flex;
text-align: center;
justify-content: space-around;
align-items: center;
background: linear-gradient(cyan,rgb(33, 137, 137));
box-shadow: 4px 4px 8px gray;
border-radius:10px;
/* padding: 30px; */
}
.bn-img{
width: 325px;
margin-top:-50px;
}