কীভাবে এইচটিএমএল, সিএসএস এবং জাভা স্ক্রিপ্ট ব্যবহার করে পপ আপ স্কিন তৈরি করা যায় ?

এইচটিএমএল, সিএসএস এবং জাভা স্ক্রিপ্ট ব্যবহার করে পপ আপ স্কিন তৈরি করা শিখব ।

প্রায় জিজ্ঞাসিত প্রশ্ন:

কীভাবে এইচটিএমএল, সিএসএস এবং জাভা স্ক্রিপ্ট ব্যবহার করে পপ আপ স্কিন তৈরি করা যায় ?

কীভাবে এইচটিএমএল, সিএসএস এবং জাভা স্ক্রিপ্ট ব্যবহার করে কুকি এক্সেপ্টেন্স তৈরি করা যায়?

কীভাবে এইচটিএমএল, সিএসএস এবং জাভা স্ক্রিপ্ট ব্যবহার করে সক্রিয় পপ আপ স্কিন তৈরি করা যায় ?

হ্যা , আজকে আমারা আমাদের বিশেষ প্রয়োজনীয় সেই পপ আপ স্কিন তৈরি করা শিখব । এবং সবশেষে সোর্স কোড দিয়ে দিবো এবং কিছু কাস্টমাইজেশন করা শিখব । তবে কাস্টমাইজেশন করতে হবে শুধু এইচটিএমএল অংশে। আসলে এখানে তেমন কিছু কাস্টমাইজেশন এবং সিএসএস এবং এইচটিএমএল লিখতে হবে না কিন্তু আপনাদের প্রয়োজন অনুসারে ভিন্ন হতে পারে । আপনি এখানে অনেক কিছু যুক্ত করতে পারেন এবং কাস্টমাইজেশন করতে পারেন । শুধুমাত্র কিছু সাধারণ কোড লিখে আমরা এটি শিখব । এবং আমি এখনে সোর্স কোড আপনাদের উপহার হিসেবে দিব । সোর্স কোড কাস্টমাইজেশন এর মাধ্যমে আপনি আরো বেশি শিখতে পারেন। এগুলো তৈরি করতে আমাদের যেন সময় নষ্ট না হয় তার জন্য আমি সব সময়ই সোর্স কোড দিই । আশাকরি আপনারা ভালো কাস্টমাইজেশন করতে পারেন । যদি নাত পারেন তাহলেও সমস্যা নেই । আমি কিছু দিক নির্দেশনা দিব যা আপনাকে সেটি করতে সাহায্য করবে । অথবা আপনি সরাসরি সোর্স কোড ব্যবহার করুন, সমস্যা হবে না । এখানে সোর্স কোড দিলাম এবং এবং আমি পরে ধাপে ধাপে ব্যাখ্যা করব ।

Source Code:

              <body>

    <div class="popup-screen">
      <div class="popup-box">
        <i class="fas fa-times close-btn">x</i>
      <div class="popimage">
        <img src="img.jpg" alt="">
      </div>
        <h2>Popup Box</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <a href="#" class="btn">Subscribe</a>
      </div>
    </div>
    
    
  <style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body{
  min-height: 100vh;
}

.popup-screen{
  z-index: 999999;
  position: fixed;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  transition: 0.5s ease;
  transition-property: visibility;
}

.popup-box:hover{
background:linear-gradient(200deg,hotpink,gold,greenyellow,skyblue,blue);
}

.popup-screen.active{
  visibility: visible;
}

.popup-box{
  position: relative;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  max-width: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 20px;
  padding: 50px 40px;
  border-radius: 20px;
  box-shadow: 0 5px 25px rgb(0 0 0 / 20%);
  transform: scale(0);
  transition: 0.5s ease;
  transition-property: transform;
}

.popup-screen.active .popup-box{
  transform: scale(1);
}

.popup-box h2{
  font-size: 2.1em;
  font-weight: 800;
  margin-bottom: 20px;
}

.popup-box p{
  font-size: 1em;
  margin-bottom: 30px;
}

.popup-box .btn{
  color: #fff;
  background: red;
  font-size: 1.1em;
  font-weight: 500;
  text-decoration: none;
  text-transform: uppercase;
  padding: 7px 27px;
  border-radius: 3px;
}

.popup-box .btn:hover{
background:linear-gradient(290deg,pink,gold,greenyellow,skyblue,grey);

}
.close-btn{
  position: absolute;
  font-size: 1em;
  top: 0;
  right: 0;
  margin: 15px;
  cursor: pointer;
  opacity: 0.5;
  transition: 0.3s ease;
  transition-property: opacity;
}

.close-btn:hover{
  opacity: 1;
}

section{
  padding: 50px 100px;
}

.home{
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.image{
  position: relative;
  width: 45%;
  min-height: 450px;
}

.image img{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.info{
  position: relative;
  width: 52%;
}

.info h2{
  font-size: 2em;
  font-weight: 800;
}

.info p{
  font-size: 1em;
  text-align: justify;
  margin-top: 10px;
}

@media (max-width: 990px){
  section{
    padding: 50px 30px;
  }

  .home{
    display: block;
  }

  .image{
    width: 100%;
  }

  .info{
    width: 100%;
    margin-top: 15px;
  }
}
      
  </style>
    <script>
    const popupScreen = document.querySelector(".popup-screen");
    const popupBox = document.querySelector(".popup-box");
    const closeBtn = document.querySelector(".close-btn");

    window.addEventListener("load", () => {
      setTimeout(() => {
        popupScreen.classList.add("active");
      }, 1000); //Popup the screen in 02 seconds after the page is loaded.
    });

    closeBtn.addEventListener("click", () => {
      popupScreen.classList.remove("active"); //Close the popup screen on click the close button.
      //Create a cookie for a day (to expire within a day) on click the close button.
      document.cookie = "WebsiteName=testWebsite; max-age=" + 30 * 24 * 60 * 60; //1 day = 24 hours = 24*60*60
    });

    //Use the created cookie to hide or show the popup screen.
    const WebsiteCookie = document.cookie.indexOf("WebsiteName=");

    if(WebsiteCookie != -1){
      popupScreen.style.display = "none"; //Hide the popup screen if the cookie is not expired.
    }
    else{
      popupScreen.style.display = "flex"; //Show the popup screen if the cookie is expired.
    }
    </script>
      
    
    </body>

🍃

১. এইচটিএমএল অংশ তৈরি

আমরা যেগুলো পপ আপ স্কিন এর ভিতরে রাখব। সেগুলো আমাদের     <div class="popup-screen"></div> ট্যাগের মধ্যে রাখতে হবে । অর্থাৎ যদি আপনি একটি ফটো যুক্ত করতে চান তাহলে আপনাকে নিচের উদাহরণ অনুসরণ করে এইচটিএমএল তৈরি করতে হবে ।
উদাহরণস্বরূপ : আপনি একটি ফটো , কিছু টেক্সট, বাটন যুক্ত করতে চাইলে !
সমাধান :
<div class="popup-screen">
      <div class="popimage">
        <img src="img.jpg" alt="">
      </div>
        <h2>Popup Box</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <a href="#" class="btn">Subscribe</a>

</div>
একইভাবে আপনি টেক্সট, ইত্যাদি যুক্ত করতে পারেন । এখন আপনি পপ আপ স্কিন এর বাহিরে কিছু যুক্ত করতে চাইলে : আপনাকে </div> এর পর যুক্ত করতে হবে। অর্থাৎ সেগুলো বডিতে দেখাবে ।

বিশেষ দ্রষ্টব্য : এখানে বেশি কিছু কাস্টমাইজেশন করা লাগবে না, আর যদি আপনার প্রয়োজন হয় তাহলে আপনি নিজে অনেক কিছু যুক্ত করতে পারেন । কোনো সমস্যা হলে আমাকে জানাতে পারেন ।

২. জাভা স্ক্রিপ্ট অংশ তৈরি :

এখানে জাভা স্ক্রিপ্ট শুধুমাত্র কাস্টমাইজেশন নিয়ে কথা বলবো । এখানে কন্টেন্ট সংক্ষিপ্ত করার জন্য শুধু মাত্র যেগুলো কাস্টমাইজেশন করা আবশ্যক তাই আমরা কাস্টমাইজেশন করা শিখব ।

জাভা স্ক্রিপ্ট কাস্টমাইজেশন ১:

      setTimeout(() => {
        popupScreen.classList.add("active");
      }, 4000);

আমি এখানে ৪ সেকেন্ড দিয়েছি অর্থাৎ পপ আপ স্কিন পৃষ্ঠা লোড হওয়ার ৪ পর দেখাবে । আপনার প্রয়োজন অনুযায়ী সময় নির্ধারণ করুন ।

বিশেষ দ্রষ্টব্য : 4000 মানে হচ্ছে ৪ সেকেন্ড, দুই সেকেন্ড এর জন্যে হবে 2000 । এইভাবেই যুক্ত করতে হবে ।

জাভা স্ক্রিপ্ট কাস্টমাইজেশন ২ :

      document.cookie = "WebsiteName=testWebsite; max-age=" + 30 * 24 * 60 * 60;

আমরা জানি, একদিন = ২৪ ঘন্টা = ২৪*৬০*৬০ সেকেন্ড ।
আমি এখানে ৩০ দিন দিয়েছি অর্থাৎ ৩০ দিনের মধ্যে আর এটি দেখাবে না । ৩০ দিন পর পর শো করবে।

রেজাল্ট বা ফলাফল :

শেষ কথা:
আপনি যদি কাজটি সঠিক ভাবে সম্পূর্ণ করতে পারেন । তাহলে এই সোর্স কোড ব্যবহার করে আপনি সহজেই যেকোনো পপ আপ স্কিন তৈরি করতে পারবেন । জাভা স্ক্রিপ্ট, সিএসএস এবং এইচটিএমএল তৈরি করে বিশেষ ধরনের পপ আপ স্কিন তৈরি করা আপনার কাছে এখন নিশ্চয়ই খুব সহজ কিছু । কমেন্ট বক্স এ মতামত জানাতে ভুলবেন না ।

বিশেষ দ্রষ্টব্য :
সোর্স কোড এ কোনোরকম ভুল বা ত্রুটি নেই ।কারণ পরীক্ষা করা হয়েছে এবং তা আপনারা উপরে ফলাফল হিসেবে দেখছেন । তারপরও যদি কোনো সমস্যা হয় তাহলে আমাকে জানাতে পারেন ।

My Talk:

ধন্যবাদ আপনাকে এই ব্লগ টি পড়ার জন্য । আসসালামু আলাইকুম! আমি শেখ জুবায়ের । কিছু কথা বলতে চাই । আসলে অনেক কষ্ট করে, চিন্তাভাবনা করে, প্রত্যেক বিষয়বস্তু সম্পর্কে জ্ঞান অর্জন করে এবং অনেক সময় নিয়ে এই আর্টিকেল বা কন্টেন্ট বা ব্লগটি লিখেছি । তাবে কিছু বানান বা বাক্যের ভূল হতে পারে । আশা রাখি ক্ষমা সুন্দর দৃষ্টিতে দেখবেন । তবুও কোনো সমস্যা হলে কমেন্ট বক্স এ জানাবেন । আমি আপনার প্রশ্নের যথাযথ উত্তর দেওয়ার চেষ্টা করব । আশা রাখি উপকারে আসবে । অউপকারে আশার মতো কিছু লিখিনি আমি এটি আমার বিশ্বাস।

🍃

My Talk:

Thank you for reading this blog.
Hi, Assalamualaikum! I am Sheikh Jubayer. I want to say something. Actually I have written this article or content or blog with a lot of difficulty, thinking and taking a lot of time. However, there may be some spelling or sentence mistakes. I hope you will see the apology in a good light. Hope you benefited. However, if there is any problem, leave a comment. I will try to answer your question properly. Thank you!

Popular Posts

কীভাবে এইচটিএমএল, সিএসএস এবং জাভা স্ক্রিপ্ট ব্যবহার করে পপ আপ স্কিন তৈরি করা যায় ?

কীভাবে এইচটিএমএল, সিএসএস এবং জাভা স্ক্রিপ্ট ব্যবহার করে পপ আপ স্কিন তৈরি করা যায় ?

কীভাবে এইচটিএমএল, সিএসএস এবং জাভা স্ক্রিপ্ট ব্যবহার করে পপ আপ স্কিন তৈরি করা যায় ?

কীভাবে এইচটিএমএল, সিএসএস এবং জাভা স্ক্রিপ্ট ব্যবহার করে কুকি এক্সেপ্টেন্স তৈরি করা যায়?

কীভাবে এইচটিএমএল, সিএসএস এবং জাভা স্ক্রিপ্ট ব্যবহার করে সক্রিয় পপ আপ স্কিন তৈরি করা যায় ?

১. এইচটিএমএল অংশ তৈরি

২. জাভা স্ক্রিপ্ট অংশ তৈরি :

রেজাল্ট বা ফলাফল :

My Talk:

Posted by Priyo Event

Post a Comment

0 Comments

Ads

Featured Posts

Labels

Categories

Tags

Footer Menu Widget

Contact form

Popular Posts

কীভাবে এইচটিএমএল, সিএসএস এবং জাভা স্ক্রিপ্ট ব্যবহার করে পপ আপ স্কিন তৈরি করা যায় ?

কীভাবে এইচটিএমএল, সিএসএস এবং জাভা স্ক্রিপ্ট ব্যবহার করে পপ আপ স্কিন তৈরি করা যায় ?

কীভাবে এইচটিএমএল, সিএসএস এবং জাভা স্ক্রিপ্ট ব্যবহার করে পপ আপ স্কিন তৈরি করা যায় ?

কীভাবে এইচটিএমএল, সিএসএস এবং জাভা স্ক্রিপ্ট ব্যবহার করে কুকি এক্সেপ্টেন্স তৈরি করা যায়?

কীভাবে এইচটিএমএল, সিএসএস এবং জাভা স্ক্রিপ্ট ব্যবহার করে সক্রিয় পপ আপ স্কিন তৈরি করা যায় ?

১. এইচটিএমএল অংশ তৈরি

২. জাভা স্ক্রিপ্ট অংশ তৈরি :

রেজাল্ট বা ফলাফল :

My Talk:

Posted by Priyo Event

You may like these posts

Post a Comment

0 Comments

Social Plugin

Ads

Featured Posts

Labels

Categories

Tags

Footer Menu Widget

Contact form