Skip to content

Commit 352b307

Browse files
Refan420Refan420
committed
Update HTML and Tailwind CSS Media and processing responsiveness
1 parent 2045937 commit 352b307

2 files changed

Lines changed: 203 additions & 61 deletions

File tree

‎Module_5/index.html‎

Lines changed: 144 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -15,65 +15,94 @@
1515
<body>
1616
<header>
1717
<nav class="grid grid-cols-3 gap-4 items-center justify-around p-4 my-4">
18-
<div class="brading flex items-center justify-center gap-3">
18+
<div class="brading flex items-center justify-center gap-3 w-[50%] md:w-auto">
1919
<img src="./Assets/Logo.png" alt="">
2020
<span class="font-bold">Medi Bridge</span>
2121
</div>
22-
<menu class="">
22+
<!-- <menu
23+
class="fixed md:static translate-x-full md:translate-x-0 transition-transform duration-300 ease-in-out w-[60%]">
2324
<ul
24-
class=" md:flex list-none items-center justify-around fixed md:static right-0 top-o h-screen md:h-auto md:w-auto z-50 bg-gray-400 md:bg-white w-[60%] ">
25+
class=" list-none items-center justify-around right-0 top-0 h-screen md:h-auto md:w-auto z-50 bg-gray-400 md:bg-transparent w-[60%] flex flex-col md:flex-row">
2526
<li><a href="">About Us</a></li>
2627
<li class="flex justify-center items-center">Features<i class="fa-solid fa-angle-down"></i></li>
2728
2829
<li><a href="">Find Doctors</a></li>
2930
<li><a href="">Blog</a></li>
3031
</ul>
32+
</menu> -->
33+
34+
<!-- মেনু কন্টেইনার -->
35+
<menu class="fixed md:static top-0 right-0 h-screen md:h-auto w-[70%] md:w-auto
36+
bg-gray-400 md:bg-transparent z-50
37+
transform translate-x-full md:translate-x-0
38+
transition-transform duration-300 ease-in-out">
39+
40+
<ul
41+
class="flex flex-col md:flex-row list-none items-center justify-around h-full md:h-auto gap-8 md:gap-4">
42+
<button class="hidden"><i class="fa-solid fa-angle-right" id="menu_Close"></i></button>
43+
<li><a href="#" class="hover:text-blue-600">About Us</a></li>
44+
<li class="flex justify-center items-center cursor-pointer gap-1">
45+
Features <i class="fa-solid fa-angle-down text-xs"></i>
46+
</li>
47+
<li><a href="#" class="hover:text-blue-600">Find Doctors</a></li>
48+
<li><a href="#" class="hover:text-blue-600">Blog</a></li>
49+
</ul>
3150
</menu>
32-
<div class="login flex items-center justify-center">
33-
<button class="mx-2 px-5 py-2 bg-gray-200 border-gray-400 rounded-xl">Log In</button>
51+
<div class="login flex items-center justify-center w-[50%] md:w-auto">
52+
<button class="mx-2 px-5 py-2 bg-gray-200 border-gray-400 rounded-xl ">Log In</button>
3453
<button class="mx-2 px-5 py-2 bg-green-800 border-green-800 rounded-xl text-white">Register</button>
3554
</div>
36-
<button class="hidden"></button>
55+
56+
<button class="md:hidden w-10" id="menu_Open"><i class="fa-solid fa-angle-left"></i></button>
3757
</nav>
3858
</header>
3959
<main>
4060

4161
<!-- Hero Section Code -->
42-
<div class="hero flex">
43-
<div class="content ">
62+
<div class="hero md:flex ">
63+
<div class="content p-4 m-2 md:w-[50%]">
4464
<div
45-
class="snapBar flex items-center justify-center gap-2 bg-[rgba(138,195,188,0.15)] border-green-400 rounded-2xl py-4 px-2 m-4 w-50% text-green-800">
46-
<i
47-
class="fa-solid fa-award p-2 rounded-full bg-[rgba(138,195,188,0.40)] text-[rgba(138,195,188)]"></i>
65+
class="snapBar flex items-center justify-center gap-2 bg-[rgba(138,195,188,0.15)] border-green-400 rounded-3xl py-2 px-2 m-4 font-semibold text-[.8rem] text-green-900 md:w-[40%]">
66+
<i class="fa-solid fa-award p-2 rounded-full bg-[rgba(138,195,188,0.40)] text-green-900"></i>
4867
<span>Top-rated healthcare service</span>
4968
</div>
50-
<h1>Transforming Healthcare for a Better Tomorrow</h1>
51-
<p>With a focus on innovation, compassion, and personalized
69+
<h1 class="text-5xl font-semibold text-black">Transforming <br> Healthcare for a <br> Better Tomorrow
70+
</h1>
71+
<p class="text-gray-600 text-2xl">With a focus on innovation, compassion, and personalized
5272
care, we are committed to guiding you towards a healthier and
5373
more vibrant tomorrow.</p>
54-
<button>Get Started</button>
55-
<button>Learn More</button>
74+
<button
75+
class="p-3 m-2 bg-green-800 border-green-900 rounded-xl hover:scale-110 transition-all duration-300 ease-in-out text-white font-semibold">Get
76+
Started</button>
77+
<button
78+
class="p-3 m-2 bg-transparent border border-gray-400 rounded-xl hover:scale-110 transition-all duration-300 ease-in-out font-semibold">Learn
79+
More</button>
5680
</div>
57-
<div class="media">
81+
<div class="media relative md:w-[50%] md:h-[70vh] m-4 flex flex-col items-center justify-center">
5882
<div class="bgDoc">
59-
<div class="sidDiv">
83+
<img src="./Assets/womanDoc.png" alt="" class="self-center justify-center-safe">
84+
<div
85+
class=" grid grid-cols-3 items-center justify-center sidDiv absolute left-0 top-40 z-20 p-3 bg-white rounded-xl w-full md:w-[70%]">
6086
<img src="./Assets/Avatar.png" alt="">
6187
<div class="miniContent">
6288
<button>Available</button>
6389
<h2>Dr. Andrea G.</h2>
6490
<span>Cardiologist</span>
6591
<span><span>$55</span> / session</span>
6692
</div>
93+
<button
94+
class="flex items-center justify-center text-green-700 font-semibold border border-green-600 bg-transparent p-2 m-2 rounded-2xl h-9"><i
95+
class="fa-solid fa-phone"></i> Book Now</button>
6796
</div>
68-
<div class="bottomDiv">
69-
<div class="textDiv">
97+
<div class="bottomDiv absolute bottom-0 right-0 md:w-[50%] bg-green-700 rounded-xl p-4 text-white">
98+
<div class="textDiv font-semibold">
7099
<p>“The workshops were insightful, the networking opportunities were abundant”</p>
71-
<div class="spalteDiv">
72-
<div class="intro">
100+
<div class="spalteDiv flex justify-between">
101+
<div class="intro ">
73102
<h2>Michael Angelo</h2>
74-
<span>39 years old</span>
103+
<span class="font-normal">39 years old</span>
75104
</div>
76-
<i class="fa-solid fa-quote-right"></i>
105+
<i class="fa-solid fa-quote-right text-6xl text-white/40"></i>
77106
</div>
78107
</div>
79108
</div>
@@ -82,9 +111,9 @@ <h2>Michael Angelo</h2>
82111
</div>
83112

84113
<!-- Trusted Section Code -->
85-
<div class="trusted">
86-
<h2>Trusted by</h2>
87-
<div class="item flex">
114+
<div class="trusted p-6 my-14">
115+
<h2 class="text-gray-300 font-normal text-center text-2xl">Trusted by</h2>
116+
<div class="items_Img flex items-center justify-center gap-4">
88117
<img src="./Assets/Logo1.png" alt="">
89118
<img src="./Assets/Logo2.png" alt="">
90119
<img src="./Assets/Logo3.png" alt="">
@@ -94,11 +123,12 @@ <h2>Trusted by</h2>
94123
</div>
95124

96125
<!-- Exprence Section Code -->
97-
<div class="exprence">
98-
<h1>Experience the Difference
126+
<div class="exprence my-16 p-4">
127+
<h1 class="text-center p-5 m-2 font-bold text-[1.5rem]">Experience the Difference <br>
99128
in Our Healthcare Approach</h1>
100-
<p>Transform your healthcare journey with our innovative and personalized approach</p>
101-
<div class="expDiv flex flex-wrap">
129+
<p class="text-center text-gray-500 m-2">Transform your healthcare journey with our innovative and
130+
personalized approach</p>
131+
<div class="expDiv md:grid md:grid-cols-4 gap-5 p-2 m-2 ">
102132
<div>
103133
<img src="./Assets/Icon1.png" alt="">
104134
<h2>Expert Care</h2>
@@ -125,51 +155,107 @@ <h2>Community Connection</h2>
125155
</div>
126156

127157
<!-- Ready Section Code -->
128-
<div class="ready">
129-
<div class="readyDiv">
130-
<div class="snapBar">
131-
<i class="fa-regular fa-clock"></i>
158+
<div class="ready md:grid grid-cols-2 gap-2">
159+
<div class="readyDiv relative p-9 ">
160+
<div
161+
class="snapBar absolute top-8 left-8 gap-2 bg-[rgba(138,195,188,0.15)] border-green-400 rounded-3xl py-2 px-2 m-4 font-semibold text-[.8rem] text-green-900 ">
162+
<i class="fa-regular fa-clock font-bold"></i>
132163
<span>Always Ready for You</span>
133164
</div>
134-
<img src="./Assets/readyDoc.jpg" alt="">
165+
<img src="./Assets/readyDoc.jpg" alt="" class="rounded-2xl object-cover h-[98vh] w-full">
135166
</div>
136-
<div class="readyContent">
137-
<h1>Unveiling a Spectrum
167+
<div class="readyContent p-9">
168+
<h1 class="text-3xl font-semibold">Unveiling a Spectrum
138169
of Specialized Offerings</h1>
139-
<p>Discover a tailored approach to your health with our versatile range of specialized services,
170+
<p class="text-gray-500 py-5">Discover a tailored approach to your health with our versatile range of
171+
specialized services,
140172
ensuring every aspect of your healthcare journey is seamlessly addressed.</p>
141-
<ul>
142-
<li><i class="fa-solid fa-circle-check"></i> Diagnostic Imaging</li>
143-
<li><i class="fa-solid fa-circle-check"></i>Mental Health Services</li>
144-
<li><i class="fa-solid fa-circle-check"></i>Laboratory Services</li>
145-
<li><i class="fa-solid fa-circle-check"></i>Rehabilitation Services</li>
146-
<li><i class="fa-solid fa-circle-check"></i>Home Healthcare</li>
147-
<li><i class="fa-solid fa-circle-check"></i>Geriatric Care</li>
173+
<ul class="md:grid md:grid-cols-2 gap-4">
174+
<li><i class="fa-solid fa-circle-check" style="color: rgb(99, 230, 190); font-size: 1.3rem;"></i>
175+
Diagnostic Imaging
176+
</li>
177+
<li><i class="fa-solid fa-circle-check"
178+
style="color: rgb(99, 230, 190); font-size: 1.3rem;"></i>Mental Health Services
179+
</li>
180+
<li><i class="fa-solid fa-circle-check"
181+
style="color: rgb(99, 230, 190); font-size: 1.3rem;"></i>Laboratory Services
182+
</li>
183+
<li><i class="fa-solid fa-circle-check"
184+
style="color: rgb(99, 230, 190); font-size: 1.3rem;"></i>Rehabilitation
185+
Services</li>
186+
<li><i class="fa-solid fa-circle-check"
187+
style="color: rgb(99, 230, 190); font-size: 1.3rem;"></i>Home Healthcare</li>
188+
<li><i class="fa-solid fa-circle-check"
189+
style="color: rgb(99, 230, 190); font-size: 1.3rem;"></i>Geriatric Care</li>
148190
</ul>
149191
</div>
150192
</div>
151193
<!-- Doctors Intro Section Code -->
152-
<div class="Doctors_Intro">
153-
<h1>Meet the Healthcare
194+
<div class="Doctors_Intro flex flex-col items-center justify-center">
195+
<h1 class="text-center p-3 m-2 text-3xl font-normal">Meet the Healthcare <br>
154196
Heroes Ready to Serve You</h1>
155-
<p>Discover the dedicated professionals behind our exceptional care just for you</p>
156-
<div class="doc_Card">
197+
<p class="text-center text-gray-500 p-2">Discover the dedicated professionals behind our exceptional care
198+
just for you</p>
199+
<div class="doc_Card md:grid md:grid-col-2 xl:grid-cols-3 gap-5 p-16">
200+
<div class="doc">
201+
<div class="photo relative">
202+
<button
203+
class="absolute top-4 left-4 py-1 px-2 rounded-2xl bg-green-200 text-green-900">Available</button>
204+
<img src="./Assets/doc1.png" alt=""
205+
class="p-2 border border-gray-300 rounded-xl h-120 w-full object-cover">
206+
</div>
207+
<div class="docIntro flex items-center justify-between m-3">
208+
<div class="info">
209+
<h1 class="text-xl font-semibold ">Dr. Harry Marcelo</h1>
210+
<span class="text-gray-600">Endocrinologist</span>
211+
<p class="text-gray-600"><span class="font-semibold text-xl text-green-700">$64</span> /
212+
session</p>
213+
</div>
214+
<button
215+
class=" px-3 py-2 m-2 border border-green-700 text-green-800 rounded-2xl hover:bg-green-700 hover:text-white hover:scale-110 transition-transform duration-300 ease-in-out"><i
216+
class="fa-solid fa-phone"></i> Book Now</button>
217+
</div>
218+
</div>
219+
<div class="doc">
220+
<div class="photo relative">
221+
<button
222+
class="absolute top-4 left-4 py-1 px-2 rounded-2xl bg-green-200 text-green-900">Available</button>
223+
<img src="./Assets/doc2.png" alt=""
224+
class="p-2 border border-gray-300 rounded-xl h-120 w-full object-cover">
225+
</div>
226+
<div class="docIntro flex items-center justify-between m-3">
227+
<div class="info">
228+
<h1 class="text-xl font-semibold ">Dr. Putri Raviola</h1>
229+
<span class="text-gray-600">Cardiologist</span>
230+
<p class="text-gray-600"><span class="font-semibold text-xl text-green-700">$72</span> /
231+
session</p>
232+
</div>
233+
<button
234+
class=" px-3 py-2 m-2 border border-green-700 text-green-800 rounded-2xl hover:bg-green-700 hover:text-white hover:scale-110 transition-transform duration-300 ease-in-out"><i
235+
class="fa-solid fa-phone"></i> Book Now</button>
236+
</div>
237+
</div>
157238
<div class="doc">
158-
<div class="photo">
159-
<button>Available</button>
160-
<img src="./Assets/doc1.png" alt="">
239+
<div class="photo relative">
240+
<button
241+
class="absolute top-4 left-4 py-1 px-2 rounded-2xl bg-green-200 text-green-900">Available</button>
242+
<img src="./Assets/doc3.png" alt=""
243+
class="p-2 border border-gray-300 rounded-xl h-120 w-full object-cover">
161244
</div>
162-
<div class="docIntro">
245+
<div class="docIntro flex items-center justify-between m-3">
163246
<div class="info">
164-
<h1>Dr. Harry Marcelo</h1>
165-
<span>Endocrinologist</span>
166-
<p><span>$64</span> / session</p>
247+
<h1 class="text-xl font-semibold ">Dr. Niky Jeremiah</h1>
248+
<span class="text-gray-600">Dermatologist</span>
249+
<p class="text-gray-600"><span class="font-semibold text-xl text-green-700">$88</span> /
250+
session</p>
167251
</div>
168-
<button><i class="fa-solid fa-phone"></i> Book Now</button>
252+
<button
253+
class=" px-3 py-2 m-2 border border-green-700 text-green-800 rounded-2xl hover:bg-green-700 hover:text-white hover:scale-110 transition-transform duration-300 ease-in-out"><i
254+
class="fa-solid fa-phone"></i> Book Now</button>
169255
</div>
170256
</div>
171257
</div>
172-
<button>See All Doctors</button>
258+
<button class="py-2 px-3 bg-gray-200 text-center items-center mx-auto rounded-xl">See All Doctors</button>
173259
</div>
174260

175261
<!-- Testimonals section code -->

‎Module_5/style.css‎

Lines changed: 59 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
1+
menu ul {
2+
text-align: center;
3+
align-items: center;
4+
font-weight: 500;
5+
6+
}
7+
18
menu ul li {
2-
display: flex;
39
margin: .4rem;
410
padding: .4rem;
5-
text-align: center;
6-
font-weight: 500;
11+
width: 100%;
712
transition: all .3s ease-in-out;
13+
814
}
915

1016
memu ul li a {
@@ -14,4 +20,54 @@ memu ul li a {
1420
menu ul li:hover {
1521
background: white;
1622
transform: scale(1.1);
23+
}
24+
25+
.items_Img img {
26+
height: 2.5rem;
27+
width: auto;
28+
}
29+
30+
.expDiv div {
31+
display: flex;
32+
flex-direction: column;
33+
justify-content: center;
34+
align-items: center;
35+
padding: .5rem;
36+
border: 1px solid rgba(189, 188, 188, 0.579);
37+
border-radius: .3rem;
38+
margin: 1rem 0rem;
39+
transition: all .3s ease-in-out;
40+
}
41+
42+
.expDiv div:hover {
43+
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
44+
transform: translateY(-1rem);
45+
}
46+
47+
.expDiv div h2 {
48+
text-align: center;
49+
font-size: larger;
50+
font-weight: 700;
51+
margin: .3rem;
52+
}
53+
54+
.expDiv div p {
55+
text-align: justify;
56+
57+
}
58+
59+
.readyContent ul li {
60+
/* font-size: 1.3rem; */
61+
padding: .5rem;
62+
width: fit-content;
63+
border: 1px solid rgba(163, 162, 162, 0.579);
64+
font-weight: 500;
65+
color: gray;
66+
border-radius: .7rem;
67+
margin: .3rem;
68+
}
69+
70+
.readyContent ul li i {
71+
font-size: 1.5rem;
72+
pad: .3rem;
1773
}

0 commit comments

Comments
 (0)