কীভাবে সিএসএস এবং এইচটিএমএল ব্যবহার করে বোরের পরমাণু মডেল তৈরি করা যায় ?

কীভাবে সিএসএস এবং এইচটিএমএল ব্যবহার করে বোরের পরমাণু মডেল তৈরি করা যায় ?

সিএসএস এবং ইমেজ গ্যালারি তৈরি করা যায়?
৩৬০ ডিগ্রি ইমেজ গ্যালারি তৈরি করা যায়?

কীভাবে  পরমাণুর শেল তৈরি করুন ?
কীভাবে পরমাণুর কক্ষপথ তৈরি করা যায় ?
কীভাবে পরমাণুর অরবিটাল তৈরি করা যায় ?
কীভাবে পরমাণুর কক্ষপথে ইলেকট্রন অবস্থান করে ?

এই ধরনের সকল প্রশ্নের সমাধান নিচের সোর্স কোড কাস্টমাইজেশন করার মাধ্যমে তৈরি করা যাবে ।


আপনি যদি এসকল কিছু চিন্তা ভাবনা করেন তাহলে নিচের থেকে সোর্স কোড কপি করে কাস্টমাইজেশন করুন আপনার প্রয়োজন অনুসারে ।

Source Code:

<style> body {height: 100%; width: 100%; margin: 0; background: #222; overflow: hidden;} .outer {height: 100vh; width: 100vw;} .container {position: absolute; border-radius: 100%; top: 50vh; left: 50vw; border: 2px solid #fff; transform: translateY(-50%) translateX(-50%); background-size: 100vw 100vh; background-position: center center; transition: height 0.3s, width 0.3s, opacity 0.3s, box-shadow 0.3s, transform 0.3s;} .container:not(.last):hover { box-shadow: 0 0 25px rgba(0, 0, 0, 0.5); } .container:hover ~ .image-container { opacity: 0.25; } .center-container { height: 6rem; width: 6rem; z-index: 11; background-color: #222; } .center-container:focus { height: 0.1px; width: 0.1px; pointer-events: none; } .center-container:focus ~ .container { transform: translateY(-50%) translateX(-50%) rotate(120deg) scale(0.5); pointer-events: none; opacity: 0 !important;} .bg {position: absolute; width: 100vw; height: 100vh; z-index: -1; opacity: 1; transition:opacity 0.3s, background 0.3s; background-image: url("image/a9.jpg"); background-size: 100vw 100vh; background-position: center center;} .image-container:nth-of-type(1) { z-index: 9; height: 9rem; width: 9rem; background-image: url("image/a4.jpg"); opacity: 1;} .image-container:nth-of-type(1):hover { height: 10rem; width: 10rem;} .image-container:nth-of-type(1):hover ~ .bg { background-image: url("image/a4.jpg"); opacity: 1;} .image-container:nth-of-type(2) { z-index: 8; height: 12rem; width: 12rem; background-image: url("image/a5.jpg"); opacity: 1;} .image-container:nth-of-type(2):hover { height: 13rem; width: 13rem;} .image-container:nth-of-type(2):hover ~ .bg { background-image: url("image/a5.jpg"); opacity: 1;} .image-container:nth-of-type(3) { z-index: 7; height: 15rem; width: 15rem; background-image: url("image/a6.jpg"); opacity: 1;} .image-container:nth-of-type(3):hover { height: 16rem; width: 16rem;} .image-container:nth-of-type(3):hover ~ .bg { background-image: url("image/a6.jpg"); opacity: 1;} .image-container:nth-of-type(4) { z-index: 6; height: 18rem; width: 18rem; background-image: url("image/a8.jpg"); opacity: 1;} .image-container:nth-of-type(4):hover { height: 19rem; width: 19rem;} .image-container:nth-of-type(4):hover ~ .bg { background-image: url("image/a8.jpg"); opacity: 1;} .image-container:nth-of-type(5) { z-index: 5; height: 21rem; width: 21rem; background-image: url("image/a2.jpg"); opacity: 1;} .image-container:nth-of-type(5):hover { height: 22rem; width: 22rem;} .image-container:nth-of-type(5):hover ~ .bg { background-image: url("image/a2.jpg"); opacity: 1;} </style>

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!