১৭-৪ : সার্ভিসেস পেজ - স্ট্যাটিক
এই মডিউলে সার্ভিসেজ পেজের স্ট্যাটিক ডিজাইন কর ফেলব
index.html ফাইলটি নিচের মত করে লিখে ফেলি-
Code:: 17.4.1 index.html
<!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>
<main>
<!-- Services -->
<div class="service-container text-center">
<h1 class="title">Services we provide</h1>
<p>
Healthcare facilities send reminders to patients ahead of their appointments, reducing the number of cancellations and absentees.
</p>
<div
class="swiffy-slider slider-item-show2 slider-item-reveal slider-nav-outside slider-nav-round slider-nav-visible slider-indicators-outside slider-indicators-round slider-indicators-dark slider-nav-animation slider-nav-animation-fadein slider-item-first-visible"
>
<ul id="service-container" class="slider-container py-4"></ul>
<button
type="button"
class="slider-nav"
aria-label="Go left"
></button>
<button
type="button"
class="slider-nav slider-nav-next"
aria-label="Go left"
></button>
<div class="slider-indicators">
<button class="active" aria-label="Go to slide"></button>
<button aria-label="Go to slide"></button>
<button aria-label="Go to slide"></button>
<button aria-label="Go to slide"></button>
<button aria-label="Go to slide" class=""></button>
</div>
</div>
</div>
</main>
<!-- 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>style.css ফাইলটি নিচের মত করে লিখে ফেলি-
Code:: 17.4.2 style.css
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;
}
.service-container{
width: 1200px;
margin: auto;
margin-top: 50px;
}
.title{
font-size: 44px;
color: aqua;
text-align: center;
}.
Last updated