Shadow Box Container HTML Code for Website || শ্যাডো কন্টেনার HTML - CSS Code

Gopal rock unplugge
এখানে একটি শ্যাডো কন্টেনার HTML - CSS আছে। শ্যাডো কন্টেইনার এর মধ্যে একটি ছবি দিয়ে একটি হেডিং টেক্সট আছে এবং একটি প্যারাগ্রাফ আছে।

নিচে sample দেওয়া আছে।

Image

This is a shadow container

It has a shadow around it.


Html কোড বক্স এ গিয়ে HTML কোডটি কপি করুন এবং আপনার ওয়েব পেইজে পেস্ট করুন।
এরপর সিএসএস কোডটি কপি করুন তারপর আপনার ওয়েব পেজে গিয়ে HTML কোডটির নিচে CSS Code পেস্ট করে দিন।
 
HTML 
     <!--GopalRockUnplugge Shadow Container-->
<html lang="bn">
<body>
  <div class="shadow-container">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP9SreW9tfzkPFoSat7H0UybbHaF69DY-xJbVya07kTGVgUy2IdCpfBWfJrzezte_0H19PwRApHGQaVHk-aYPSAFy77hRnWEa0oEb94nFcKvBOXCMVBgoOxRtBj9oQVX-h0Vb9pOBx2igZ/s1600/1694255742449563-0.png" alt="Image" margin="10px">
  <h1 class="text-center">This is a shadow container</h1>
    <p class="text-center">It has a shadow around it.</p>
  </div>
</body>
</html>
শ্যাডো কন্টেনারের ভিতর ছবিটি চেঞ্জ করার জন্য HTML কোডের ভিতর ইমেজ লিংকটি চেঞ্জ করুন এবং হেডিং টেক্স চেঞ্জ করার জন্য <This Is A Shadow Container> লেখাটি চেঞ্জ করুন, আর প্যারাগ্রাফ টেক্সটি চেঞ্জ করার জন্য <It Was A Shadow Around It> এই লেখাটি চেঞ্জ করুন।
 
CSS 
     <style>
.shadow-container {
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.5);
  border-radius: 10px ;
  padding-top: 5px;
  padding-bottom: 5px;
}

.text-center {
  text-align: center;
}
</style>
কন্টেইনারের চারিদিকে যে Round Shape আছে সেটি পরিবর্তন করার জন্য CSS কোডের মধ্যে Style ট্যাগের ভিতর border-redius 10px; করা আছে সেটিকে আপনার পছন্দমত পরিবর্তন করতে পারেন।
কন্টেনারে যে শ্যাডো টি আছে সেটিকে পরিবর্তন করার জন্য box-shadow px; গুলি পরিবর্তন করে দেখতে পারেন।
ছবি

  Website Development Course

ছবি

  Website Development Course

ছবি

  Website Development Course

ছবি

  Website Development Course