How to create atomic model of Bohr using CSS and HTML?

Can CSS and image galleries be created?
Can 360 degree image gallery be created?
How to make atomic shell?
How to create orbitals of atoms?
How to create atomic orbitals?
How are electrons located in atomic orbitals?

All such questions can be solved by customizing the source code below.

If you think about these things then copy the source code from below and customize according to your needs.

Source Code:

          
         <body>
        
	<div class="outer">

		<div class="inner">

			<a class="container center-container" href="#0"></a>

			<div class="container image-container"></div>

			<div class="container image-container"></div>

			<div class="container image-container"></div>

			<div class="container image-container"></div><div class="container image-container last"></div>

			<div class="bg"></div>

		</div></div>


<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>
    </body>

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

How to create atomic model of Bohr using CSS and HTML?

How to create atomic model of Bohr using CSS and HTML?

Can CSS and image galleries be created?
Can 360 degree image gallery be created?
How to make atomic shell?
How to create orbitals of atoms?
How to create atomic orbitals?
How are electrons located in atomic orbitals?

My Talk:

Posted by Priyo Event

Post a Comment

0 Comments

Ads

Featured Posts

Labels

Categories

Tags

Footer Menu Widget

Contact form

Popular Posts

How to create atomic model of Bohr using CSS and HTML?

How to create atomic model of Bohr using CSS and HTML?

Can CSS and image galleries be created?Can 360 degree image gallery be created?How to make atomic shell?How to create orbitals of atoms?How to create atomic orbitals?How are electrons located in atomic orbitals?

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

Can CSS and image galleries be created?
Can 360 degree image gallery be created?
How to make atomic shell?
How to create orbitals of atoms?
How to create atomic orbitals?
How are electrons located in atomic orbitals?