What Are DNS Records & What are the kinds of DNS records?

By

-

October 25, 2023

Simply typing a website’s address into a browser’s address bar will not bring up the desired page. Without it, we’d all have to commit long, difficult-to-remember IP numbers to memory in favor of more human-friendly domain names.

What are DNS records, and what kinds of DNS records are discussed in more detail below:

What is a DNS record?

Zone files, or DNS records, are stored in authoritative DNS servers and include information about a domain, such as its IP address and how to respond to queries for that domain. These are text files written in DNS syntax and include relevant information. DNS syntax is just a string of characters that serve as instructions for the DNS server. TTL, “time-to-live,” is included in every DNS record and specifies how often the DNS server will update the record.

A DNS record set is similar to a Yelp page for a company. All the pertinent details about a specific business, such as its address, operating hours, types of services it provides, etc., are included in that listing. A minimum number of DNS records must be present on every domain before it can be used to visit a website, and many more can be included for convenience.

What are the kinds of DNS records?

You may find crucial details about a domain or hostname in DNS records. Current domain IP addresses are stored in these entries.

Also, the authoritative DNS server uses text files called zone files to hold DNS records. DNS record files include text interpreted as a string by the DNS server and containing special directives.

Forms of Domain Name System Records

Below are the five most common kinds of DNS records:

A record
AAAA record
CNAME record
Nameserver (NS) record
Mail exchange (MX) record

Each of the categories, as mentioned earlier, serves a unique purpose. Therefore, let’s take a closer look at the various DNS record types.

1. A Record

DNS records come in various types, but none are more crucial than the A record. When you hear “A record,” you’re attending the phrase “address.” The IP address associated with a specific hostname or domain is displayed in an A record. A record is mainly used for IPv4 address lookup. An A record is required for a web browser to access a website by that domain name. Due to this, we may visit websites online without needing to know their IP addresses.

The A record is also utilized in a black hole list based on the domain name system (DNSBL). In this instance, spam is prevented by modifying the A record to reject messages from specific senders.

2. AAAA Record

Similar to how A records reveal a domain’s IPv4 address, AAAA records indicate the IPv6 address of a host. It’s important to note that this particular DNS record type is unique because it only resolves to IPv6 addresses. IPv6 is superior to IPv4 because it provides more IP addresses. IPv6 resolves the problem of a lack of available IP addresses.

For DNS resolution, the AAAA record is preferable to the A record since it employs IPv6, which is more secure than IPv4. Also, the possibility for AAAA records is excellent because the Internet is expanding, and we’re running out of IPv4 addresses. Domain names require AAAA records to be resolved to use the more modern IPv6 protocol.

3. CNAME Record

Canonical Name (CNAME) records redirect traffic from one domain to another. However, the alias in a CNAME record does not resolve to a specific IP address. To clarify, the canonical name is the domain name that the alias redirects to.

4. NS record

The primary DNS server for a domain is identified in its nameserver (NS) record. In other words, the NS record indicates to internet programs like web browsers where they may locate a domain’s IP address. Typically, a domain will have many nameservers listed. Those who have purchased web hosting or created an essential website have likely been sent an email containing their nameserver information. Nameservers are the intermediaries between your domain and the server hosting your site. Other domain name server records, such as the A and MX records, are stored on the nameserver.

5. MX Record

A DNS record known as a mail exchange (MX) record specifies an email server that will receive messages addressed to a domain. So, an MX record allows email to be routed to a particular server.

Multiple MX records can exist for the same domain. That paves the way for the availability of emergency email servers.

How to perform the DNS Lookup?

Performing the DNS record lookup is simple and easy. You can use an online tool or perform that using a command.

Windows Command Prompt:

To perform a DNS lookup in Windows using the Command Prompt, you can use the `nslookup` or `ping` command. Here’s how to use both methods:

1. Using nslookup:

– Open the Command Prompt by searching for “cmd” in the Windows Start menu.

– Type the following command and replace “example.com” with the domain or hostname you want to look up:

nslookup example.com

– Press Enter. This will provide you with DNS information, including the IP addresses associated with the domain.

2. Using ping:

– You can also use the `ping` command to perform a DNS lookup. Just type:

ping example.com

– Press Enter, and it will display the IP address of the domain along with some ping statistics.

Linux/Unix/macOS Terminal:

To perform a DNS lookup in Linux, Unix, or macOS, you can use the `nslookup`, `host`, or `dig` commands. Here’s how to use each of them:

1. Using nslookup:

– Open your terminal.

– Type the following command and replace “example.com” with the domain or hostname you want to look up:

nslookup example.com

– Press Enter.

2. Using host:

– Open your terminal.

– Type the following command and replace “example.com” with the domain or hostname you want to look up:

host example.com

– Press Enter.

3. Using dig:

– The `dig` command provides more detailed DNS information. Open your terminal and type:

dig example.com

– Press Enter.

The output of these commands will provide you with DNS information, including the IP addresses associated with the domain. Choose the command that suits your needs and your specific operating system.

Merging Two Maps in Dart – Flutter

By

Rajat Palankar

-

October 23, 2023

0

Merging Two Maps in Dart — How to merge two map in flutter

Hi Guy’s In this Tutorial, Let’s checkout how to merge 2 maps into one in flutter dart.

If you are working with dart programming language you might have come with situation when you want to combine 2 maps objects. For Example let’s say, a Map that stores name of a user, his phone number and email address and there is another map that contain that user house address, his family details etc. In such scenerio merging 2 maps in single map is benefit because all the information about user is one one data itself.

In this dart article, let’s walk through differents ways of join 2 maps in one.

1. Using (…) spread operator

2. Using addAll() method.

3. Using putIfAbsent() method.

Merging 2 Maps Object using spread operator

This is one way by which we can easily join/combine 2 map in one i.e using spread operator (…). By using thi approach two collection of maps are merged into one collection.

Example:

// main.dart

void main() {
  Map<String, int> map1 = {'a': 1, 'b': 2};
  Map<String, int> map2 = {'c': 3, 'd': 4, 'c': 5};

  Map<String, int> mergedMap = {...map1, ...map2};

  print(mergedMap);
}

Output:

{a: 1, b: 2, c: 5, d: 4}

Note: Here if there are duplicate keys present in the maps that you are merging then in such case the value of second map will be overwriten the value of first map. In above example as you can see key c value is 3 and same in map2 key c value is 5 so final result we get is c:5 that is from map2.

Merge 2 maps using addAll() method

Their is another way by which we can merge map in dart that is by using addAll() method, What this function does is it simply copy all the key & value from map 2 to map 1. let’s understand with an example

Example:

void main() {
  Map<String, int> map1 = {'a': 1, 'b': 2,'e':1};
  Map<String, int> map2 = {'c': 3, 'd': 4, 'e': 5};

  // merge map2 into map1
  map1.addAll(map2);

  print(map1);
 
}

Output:

{a: 1, b: 2, e: 5, c: 3, d: 4}

addAll() method copy all the key & value from map 2 and add it into map 1, That means addAll() method will directly modify the first map.

Merge 2 map using putifAbsent() method

As we saw in above ways, The value of a key is modified if same key is present. To solve this problem we can make use of putifAbsent() method. Let’s understand with an example

// main.dart
void main() {
  Map<String, String> map1 = {'firstname': "Rajat", 'lastname': "Palankar"};
  Map<String, String> map2 = {'address': "India", 'firstname': "NameChanged", 'website': "protocoderspoint.com"};

  map2.forEach((key, value) {
    map1.putIfAbsent(key, () => value);
  });
    print(map1);
}

Output:

{firstname: Rajat, lastname: Palankar, address: India, website: protocoderspoint.com}

This approach to join or merge 2 map is useful then you don’t want to keep duplicate data. In above example I am iterating map2 using forEach loop then checking is same key present in map 1, if not then add map 2 key and value in map 1 using putIfAbsent() and ignore it.

Sorting Arrays in Java: How to use Arrays.sort() Method

By

Rajat Palankar

-

October 22, 2023

0

Hi Guy’s, Java being the most popular programming language comes with an efficient & versatile sorting technique. In this Article let’s dive into a sorting method i.e. Arrays.sort(), This sorting technique enable the java developer with super power to sort an Array effortlessly and arranging the elements in ascending or descending order as per the requirement.

Arrays.sort() java

Arrays.sort() is robust method using which a developer can sort arrays of primitive data types or an objects.

Syntax

Arrays.sort(arrayList);

Sorting array of object in java

To sort an array of objects, we need a custom comparator or ensure that the array implement the comparable interface.

Arrays.sort(arrayList,Comparator);

Code Example to use Arrays.sort() method

1. Sorting an array of integers

import java.util.Arrays;

public class ArraySortExample {
    public static void main(String[] args) {
        // Sorting an array of integers
        int[] intArray = {5, 2, 9, 1, 5, 6};
        System.out.println("Original integer array: " + Arrays.toString(intArray));
        Arrays.sort(intArray);
        System.out.println("Sorted integer array: " + Arrays.toString(intArray));
    }
}

Original integer array: [5, 2, 9, 1, 5, 6]
Sorted integer array: [1, 2, 5, 5, 6, 9]

2. Sorting Array of strings

import java.util.Arrays;

public class ArraySortExample {
    public static void main(String[] args) {
        // Sorting an array of strings
        String[] stringArray = {"banana", "apple", "cherry", "date", "elderberry"};
        System.out.println("Original string array: " + Arrays.toString(stringArray));
        Arrays.sort(stringArray);
        System.out.println("Sorted string array: " + Arrays.toString(stringArray));
    }
}

Original string array: [banana, apple, cherry, date, elderberry]
Sorted string array: [apple, banana, cherry, date, elderberry]

3. Sorting Array of Object

In below sorting an array of object, I am sorting the object by name.

import java.util.Arrays;

public class ArraySortExample {
    public static void main(String[] args) {
        // Sorting an array of custom objects
        Person[] personArray = {new Person("John", 30), new Person("Alice", 25), new Person("Bob", 35)};
        System.out.println("Original Person array: " + Arrays.toString(personArray));

        Arrays.sort(personArray, (a, b) -> a.getName().compareTo(b.getName()));
        System.out.println("Sorted Person array by name: " + Arrays.toString(personArray));
    }

   // class 
    static class Person {
        private String name;
        private int age;

        public Person(String name, int age) {
            this.name = name;
            this.age = age;
        }

        public String getName() {
            return name;
        }

        public String toString() {
            return "Person{name='" + name + "', age=" + age + "}";
        }
    }
}

Original Person array: [Person{name='John', age=30}, Person{name='Alice', age=25}, Person{name='Bob', age=35}]
Sorted Person array by name: [Person{name='Alice', age=25}, Person{name='Bob', age=35}, Person{name='John', age=30}]

The above code example is to demonstrates how to use ‘Arrays.sort()’ method for aorting datatype like integersm string and a class object in java.

How to convert an object into JSON in Flutter

By

Rajat Palankar

-

October 21, 2023

0

Hi Guys, Welcome to Proto Coders Point, In this Flutter dart article we will walk through How to convert an Object i.e. (Class Instance) into an JSON in Flutter dart.

1. Own Code to convert object to JSON without Library

The below example is manual way to convert object into JSON in flutter dart.

Below Steps:

Create a class
The class has a method to convert object into a Map.
Finally convert the Map object to JSON String using JsonEncode() method.

Code

// main.dart
import 'dart:convert';

// Define a class
class User {
  final String userame;
  final int userage;
  final bool isMarried;

  User(this.userame, this.userage, this.isMarried);

  // Define a toJson method to convert User object to JSON
  Map<String, dynamic> toJson() {
    return {
      'name': userame,
      'age': userage,
      "isMarried": isMarried,
    };
  }
}

void main() {
  User user = User('Shubham', 25, true);

  // Convert User object to JSON
  String jsonString = jsonEncode(user.toJson());
  print(jsonString);
}

{"name":"Shubham","age":25,"isMarried":true}

The object code is manual method is flexiable, It is self written code that can convert object into json string and it don’t use any external library or dependencies.

2. Convert Object to JSON using json_serializable package

We will make use of json_serialiable using which we can generate code from JSON serialization & deserialization.

Steps:

1. Install required dependencies:

we need:

To install all the above 3 package run below command:

flutter pub add json_annotation json_serializable build_runner

then run

flutter pub get

2. Now, In Lib directory let’s create a file by name “user.dart” & then create class User & define it with @JsonSerializable() annotation example code below

import 'package:json_annotation/json_annotation.dart';

part 'user.g.dart';

@JsonSerializable()
class User {
  String name;
  int age;

  // Use JsonKey to change the name of the field in JSON
  @JsonKey(name: 'is_admin')
  bool isAdmin;

  User(this.name, this.age, this.isAdmin);

  // The generated toJson method
  Map<String, dynamic> toJson() => _$UserToJson(this);

  // The generated fromJson method
  factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);
}

3. user build_runner to generate JSON Serialization using below command

dart run build_runner build

By running above cmd a new file will get generated by name User.g.dart in the same directory where your class file exist.

You not need to enter the above code or edit anything in User.g.dart, as the code get automatically ganerated by build_runner.

4. Now simply use the ganeted code function i.e toJson() method that help you convert Object to JSON, if you want you can also use fromJson() to convert JSON data to an Object.

Below Code example

// lib/main.dart
import 'dart:convert' show jsonEncode;
import 'package:flutter/foundation.dart' show kDebugMode;
import 'user.dart';

void main() {
  // Create a user object
  User user = User('Puppy Kute', 25, true);

  // Convert the user object to JSON
  Map<String, dynamic> jsonUser = user.toJson();

  // Print the JSON string
  if (kDebugMode) {
    print(jsonEncode(jsonUser));
    // Prints: {"name":"Puppy Kute","age":25,"is_admin":true}
  }

  // Create a list of user objects
  List<User> users = [
    User('Shubham', 40, false),
    User('Pavan', 50, true),
    User('Rajat', 28, false),
  ];

  // Convert the list of user objects to a JSON string
  List<Map<String, dynamic>> jsonUsers =
      users.map((user) => user.toJson()).toList();

  // Print the JSON string
  if (kDebugMode) {
    print(jsonEncode(jsonUsers));
  }
}

 [{"name":"Shubham","age":40,"is_admin":false},{"name":"Pavan","age":50,"is_admin":true},{"name":"Rajat","age":28,"is_admin":false}]

Conclusion

In this article we learn 2 ways by which we can convert Object to JSON. One is by self written code and another is by using external library’s like JSON_Serializable and build_runner.

AWS Lambda Function to Stop, Start or Restart AWS Instance

By

Rajat Palankar

-

October 19, 2023

0

Start, Stop or Restart EC2 Instance using Lambda Function

In this article, Let’s check out What is AWS Lambda Function & How we can use Lambda function to restart the EC2 server server instance.

Video Tutorial

What is AWS Lambda Function?

The AWS Lambda Function is a service provided by Amazon Web Services(AWS) that is basically a server less computing service. Using Lambda function we can run code without managing any servers instance. Here instead of building a overall server infrastructure, you can keep you focus on developing a application’s function code that can we executed when an events occurs or triggers is hit.

Basically AWS Lambda function is a server less computing system, Languages supported are Node.JS, Python, Java, Go, Ruby,C#, PowerShell and custom runtimes.

How to create a Lambda Function in AWS console?

1. SignIn into AWS Console.

2. In search box above search “Lambda”

select it.

3. Click on “Create Function” and fill the form

Here select "Autor from scratch", give a name to function, In Runtime select the language maybe python, nodejs or any other which you prefer to write code on. I select Python 3.11.

The AWS Lambda function get’s created, here is where you need to write your code.

How to change lambda execution time

Usually when you execute a lambda function by default the function execution timeout is 3 sec, suppose your lambda function need more time to execute the whole code then your code will stop execution after 3 sec and you may see an warning “Task timed out after 3.00 seconds”, so you need to change or config lambda function execution timeout below are steps to change timeout.

in lambda function, Goto Configuration -> general configuration, click on Edit

how to change lambda function execution time

Now change AWS lambda function timeout as per your need

Note: This is required because sometime the code might require more then 3 sec to fully execute, In our case we are going to write a lambda function that stop our EC2 instance and start it again so for this process our server need at least 3-5 minute to start fully.

Giving permission to lambda function to access EC2 instance

As we are implementing a lambda function that can communicate to EC2 instance and perform event like stop, start or restart the instance server from lambda function itself we need to give permission to access EC2 instance. below are the step:

1. In AWS Console, Top Search Box, search for IAM, Enter the service.

2. Now on side menu goto Roles > select lambda function roles as shown in below image

Next in Permission tab > Permissions policies > click on Add Permission > Attach Policy

Now in Other permissions policies search box, search for “EC2FullAccess”

aws roles add permission for lambda function

Check the Check box and click on Add Permission

AmazonEC2FullAccess add permission to Lambda function

Once you add the roles permission to full access EC2 instance, your lambda function will be able to fully control your EC2 instance.

Lambda Python Code to Stop, Start EC2 Instance

Code – python

import boto3
import time
def lambda_handler(event, context):
    
    ec2 = boto3.client('ec2')
    
    # Specify the instance IDs of the instances you want to start
    instance_ids = ['i-091182e12341c19fd'] // replace with your ec2 instanceID

    
    # Stop the instances
    response = ec2.stop_instances(InstanceIds=instance_ids)
    
    time.sleep(300)

    # Start the instances
    response = ec2.start_instances(InstanceIds=instance_ids)
    print("Started")
    
    return response

To run the code, click on Deploy Button then click on Test Button

Structure of Atom – html + css animation

By

Rajat Palankar

-

October 17, 2023

0

structure of atom animation using html and css only

This article is on creating Structure of Atom with animation effect only using html and css.

via GIPHY

HTML Explaination – Structure of a Atom

We have a division tags that represent the structure of our Atom, This further contain sub-divisions –nucleous and orbits.

The Nucleous class holds protons and neutrons in a form of row.

The Orbits class container multiple electron elements, which simple represent electrons orbiting the nucleus.

The show-info div tag show a icon or button when clicked or hoverd we can show more information on the page using css.

The Info div will show different components on the atom, Including Innder and outer shells, detainls about the nucleus.

Code

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title> Structure of Atom </title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>

<h1>Carbon</h1>
<div class="atom">
	<div class="nucleous">
		<div class="row">
			<div class="proton"></div>
			<div class="proton"></div>
			<div class="neutron"></div>
			<div class="neutron"></div>
		</div>
		<div class="row">
			<div class="neutron"></div>
			<div class="neutron"></div>
			<div class="proton"></div>
			<div class="proton"></div>
		</div>
	</div>
	<div class="orbits">
		<div class="electron"></div>
		<div class="electron"></div>
		<div class="electron"></div>
		<div class="electron"></div>
		<div class="electron"></div>
		<div class="electron"></div>
	</div>
</div>
<div class="show-info">i</div>
<div class="info">
	<div class="inner-shell">			
		<div class="info-particle">
			<h3>INNER SHELL</h3>
			<p><strong>2</strong> ELECTRONS</p>
		</div>
	</div>
	<div class="outer-shell">
		<div class="info-particle">
			<h3>OUTER SHELL</h3>
			<p><strong>4</strong> ELECTRONS</p>
		</div>
	</div>
	<div class="inner-nucleous">
		<div class="info-particle">
			<h3>NUCLEOUS</h3>
			<p><strong>6</strong> PROTONS</p>
			<p><strong>6</strong> NEUTRONS</p>
		</div>
	</div>
</div>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js'></script>
</body>
</html>

CSS Code – Structure of Atom

The body of html is ensured that the atom animation happens at the centered with proper aligment.

The atom structure class defines the properties of the atom, including it’s dimensions and appearance.

Nucleus and Electron

The Nucleus and Electron particulars are core compoments of the atom animation effect, The .nucleus class defines the appearance of the nucleus, while the .electron class sets the properties for the electrons. The animation properties dictate the duration, timing function, and iteration count for the electron animation.

Electron Orbits

The electron orbits are defined using the .orbit1, .orbit2, and .orbit3 classes, each with their respective animation-name properties pointing to the keyframe animations orbit1, orbit2, and orbit3.

The @keyframes rule specifies the animation code for each orbit, detailing the transformation for the electrons around the atom. The rotate and translateX functions play a crucial role in creating the circular motion effect.

code

body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: repeating-conic-gradient(#FFF4 0%, transparent .0002%, transparent .075%, transparent .65%), repeating-conic-gradient(#FFF2 0%, transparent .0004%, transparent 0.05%, transparent .495%), radial-gradient(circle at 50% 50%, #121212, #000);
	perspective: 100vmin;
}

body * {
	transform-style: preserve-3d;
}

*::before {
	box-sizing: border-box;
}

h1 {
	position: absolute;
	top: 4vmin;
	color: #fff;
	font-family: Arial, serif;
	font-weight: normal;
	font-size: 3.5vmin;
	margin: 0;
}

.atom {
	width: 50vmin;
	height: 50vmin;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 100%;
	transition: 0.4s ease 0s;
	cursor: zoom-in;
}

.atom:active {
	transform: scale3d(1.5,1.5,1.5);
}

.atom:before {
	content: "";
	width: 50vmin;
	height: 50vmin;
	position: absolute;
	background: radial-gradient(#913ab7 -50%, #fff0 50%);
	transform: translateZ(-6vmin);
	box-shadow: 
		0 0 5vmin -2vmin #cddc3920, 0 0 10vmin 0vmin #cddc3920, 
		0 0 10vmin 0vmin #39dcbe20, 0 0 10vmin 0 #cddc3920 inset, 
		0 0 25vmin 0 #39dcbe20 inset;
	border-radius: 100%;
	animation: orbit-cloud 3s ease 0s infinite alternate;
	opacity: 0.25;
}

@keyframes orbit-cloud {
	0% { filter: hue-rotate(0deg); }
	100% { filter: hue-rotate(50deg);}
}



/*** NUCLEOUS ***/

.nucleous {
	width: 16vmin;
	height: 16vmin;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 100%;
}

.row {
	border-radius: 100%;
	transform: rotateX(80deg);
	position: absolute;
	width: 40%;
	height: 40%;
	margin-top: -8vmin;
	left: 33%;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: rotateX(80deg) rotate(180deg);
	animation: orbit-nucleous 3s linear 0s infinite;
}

.row:nth-child(1) div:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 100%;
	margin-top: -11vmin;
	background: red;
	background: radial-gradient(circle at 40% 60%, #fff0, 3vmin, #00000040 calc(3vmin + 1px) 100%), radial-gradient(circle at 28% 57%, #fff, 0.3vmin, #fff0 calc(0.3vmin + 1px) 100%), radial-gradient(circle at 37% 71%, #fff, 0.5vmin, #fff0 calc(0.5vmin + 1px) 100%), radial-gradient(circle at 40% 60%, var(--c2), 1.65vmin, #fff0 calc(1.65vmin + 1px) 100%) var(--c1);
}

.row:nth-child(2) {
	--znt: 1.3,1.3,1.3;
	margin-top: 0vmin;
	animation: orbit-nucleous3 3s linear 0s infinite;
}


@keyframes orbit-nucleous {
	0% { transform: rotateX(80deg) rotate(0deg); }
	100% { transform: rotateX(80deg) rotate(360deg);}
}

@keyframes orbit-nucleous3 {
	0% { transform: rotateX(80deg) rotate(0deg) scale3d(var(--znt)); }
	100% { transform: rotateX(80deg) rotate(360deg) scale3d(var(--znt)); }
}

.row div {
	--c1: #bc0003;
	--c2: #fa0001;
	width: 6vmin;
	height: 6vmin;
	border: 1px solid #0006;
	border-radius: 100%;
	background: 
		radial-gradient(circle at 40% 60%, #fff0, 3vmin, #00000040 calc(3vmin + 1px) 100%), 
		radial-gradient(circle at 28% 57%, #fff, 0.3vmin, #fff0 calc(0.3vmin + 1px) 100%), 
		radial-gradient(circle at 37% 71%, #fff, 0.5vmin, #fff0 calc(0.5vmin + 1px) 100%), 
		radial-gradient(circle at 40% 60%, var(--c2), 1.65vmin, #fff0 calc(1.65vmin + 1px) 100%) 
		var(--c1);
	position: absolute;
	top: -3vmin;
	animation: orbit-nucleous-particle 3s linear 0s infinite;
}

@keyframes orbit-nucleous-particle {
	0% { transform: rotateX(90deg) rotateY(360deg) scale3d(0.75, 0.75, 0.75); }
	100% { transform: rotateX(90deg) rotateY(0deg) scale3d(0.75, 0.75, 0.75);}
}

.row div.neutron {
	--c1: #082976;
	--c2: #124b9c;
}

.row div:nth-child(2) {
	top: calc(100% - 3vmin);
}

.row div:nth-child(3) {
	left: -3vmin;
	top: calc(50% - 3vmin);
}

.row div:nth-child(4) {
	left: calc(100% - 3vmin);
	top: calc(50% - 3vmin);
}



/*** ELECTRONS ***/

.orbits {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 100%;
	animation: orbit-spin 180s linear 0s infinite;
}

@keyframes orbit-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg);}
}

.orbits:before, .orbits:after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 100%;
	animation: orbit-spin 180s linear 0s infinite;
	border: 0.2vmin dotted #CDDC3980;
	filter: blur(1px);
	opacity: 0.5;
}

.orbits:after {
	width: 60%;
	height: 60%;
	top: 20%;
	left: 20%;
	animation-direction: reverse;
	animation-duration: 90s;
}

.electron {
	--pos: rotateY(0deg);
	--tim: 2s;
	position: absolute;
	width: 100%;
	height: 100%;
	box-shadow: -10px 5px 3px -5px #CDDC3920 inset, 10px 0px 3px -5px #CDDC3920;
	border-radius: 100%;
	transition: all 0.4s ease 0s;
	transform: rotateX(80deg) rotate(180deg);
	animation: orbit-electron var(--tim) linear calc(var(--tim) * -0.5) infinite;
}

@keyframes orbit-electron {
	0% { transform: rotateX(80deg) var(--pos) rotate(0deg); }
	100% { transform: rotateX(80deg) var(--pos) rotate(-360deg);}
}

.electron:before {
	--c1: #8BC34A;
	--c2: #CDDC39;
	width: 1vmin;
	height: 1vmin;
	content: "";
	position: absolute;
	border-radius: 100%;
	box-shadow: 0 0 9px 0px #CDDC39;
	border: 1px solid #fff8;
	left: calc(50% - 0.5vmin);
	top: -0.5vmin;
	background: 
		radial-gradient(circle at 40% 60%, #fff0, 3vmin, #00000040 calc(3vmin + 1px) 100%), 
		radial-gradient(circle at 45% 73%, #fff, 0.3vmin, #fff0 calc(0.3vmin + 1px) 100%), 
		radial-gradient(circle at 27% 58%, #fff, 0.5vmin, #fff0 calc(0.5vmin + 1px) 100%), 
		radial-gradient(circle at 40% 60%, var(--c2), 1vmin, #fff0 calc(1vmin + 1px) 100%), var(--c1);
	transform: rotateX(90deg);
	animation: orbit-electron-particle var(--tim) linear 0s infinite;
}

@keyframes orbit-electron-particle {
	0% { transform: rotateX(90deg) rotateY(-360deg); }
	100% { transform: rotateX(90deg) rotateY(0deg);}
}

.electron:nth-child(2) {
	--pos: rotateY(70deg);
	--tim: 1.535s;
}

.electron:nth-child(3) {
	--pos: rotateY(40deg);
	--tim: 1.875s;
}

.electron:nth-child(4) {
	--pos: rotateY(110deg);
	--tim: 1.275s;
}

.electron:nth-child(n+5) {
	width: 67%;
	height: 67%;
	left: 18%;
	top: 18%;
}

.electron:nth-child(5) {
	--pos: rotateY(140deg);
	--tim: 1.125s;
}

.electron:nth-child(6) {
	--pos: rotateY(25deg);
	--tim: 1s;
}



/*** INFO ***/

.info {
	position: absolute;
	width: 98vw;
	height: 60vmin;
	z-index: -1;
	font-family: Arial, serif;
	display: flex;
	align-items: center;
	justify-content: center;
}

.inner-shell, .outer-shell, .inner-nucleous {
	width: 20.5vmin;
	height: 12vmin;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	opacity: 0.05;
	top: 40vmin;
	color: #fff;
	margin-right: 80vmin;
}

.inner-shell {
	margin-top: 0.95vmin;
}

.outer-shell {
	top: 10vmin;
	margin-right: 83.5vmin;
}

.info > div:before {
	content: "";
	position: absolute;
	width: 15vmin;
	height: 15vmin;
	border: 0.25vmin solid #fff0;
	border-left: 0.25vmin dotted #fff;
	border-radius: 100% 0 0 0;
	transform: rotate(-45deg);
	right: -25vmin;
	margin-top: -33vmin;
}

.info > div.outer-shell:before {
	transform: rotate(0deg);
	margin-top: 2vmin;
	right: -30vmin;
	height: 25vmin;
	width: 25vmin;
	clip-path: polygon(0 50%, 100% 100%, 100% 100%, 0% 98%);
}

.inner-nucleous {
	margin-left: 83vmin;
	margin-right: 0 !important;
	top: 19vmin !important;
	height: 17.5vmin !important;
}

.inner-nucleous:before {
	transform: rotate(155deg) !important;
	left: -34.125vmin;
	margin-top: 11vmin !important;
}

.inner-shell:after, .outer-shell:after, .inner-nucleous:after {
	content: "";
	position: absolute;
	width: 15vmin;
	height: 0;
	right: -14.5vmin;
	margin-top: -18vmin;
	z-index: 333;
	border-top: 0.25vmin dotted #fff;
	transform: rotate(-23deg);
}

.outer-shell:after {
	right: -6vmin;
	margin-top: 13.1vmin;
	transform: rotate(14deg);
	width: 6vmin;
}

.inner-nucleous:after {
	transform: rotate(0deg);
	left: -21.5vmin;
	margin-top: 2.75vmin;
	width: 21.5vmin;
}


.info-particle {
	position: absolute;
	width: 20vmin;
	height: 11.5vmin;
	left: 0;
	top: 0;
	border: 0.25vmin dotted #fff;
	border-radius: 0.2vmin;
}

.inner-nucleous .info-particle {
	height: 17.25vmin;
}

.inner-shell:hover,
.outer-shell:hover,
.inner-nucleous:hover{
	opacity: 1;
}



h3 {
	margin: 1vmin 0 1.25vmin;
	font-size: 1.9vmin;
	font-weight: normal;
	text-align: center;
	border-bottom: 0.25vmin dotted #fff;
	padding-bottom: 0.75vmin;
}

p {
	text-align: left;
	font-weight: normal;
	margin: 1vmin 0 3vmin -2.75vmin;
	font-size: 1.5vmin;
	padding-left: 5vmin;
}

p strong {
	font-size: 2.5vmin;
}

p:before {
	--c1: #8BC34A;
	--c2: #CDDC39;
	content: "\2212";
	position: absolute;
	width: 3vmin;
	height: 3vmin;
	border-radius: 100%;
	margin-left: -3.85vmin;
	background: radial-gradient(circle at 45% 45%, var(--c2), 1vmin, #fff0 calc(1vmin + 5px) 100%), var(--c1);
	box-shadow: 0 0 0.5vmin 0 #fff, 0 0 0.1vmin 0.15vmin #fff;
	color: #222;
	text-shadow: 1px 1px 2px #fff, -1px 1px 2px #fff, 1px -1px 2px #fff, -1px -1px 2px #fff;
	font-size: 3vmin;
	line-height: 3.15vmin;
	text-align: center;
}

p:after {
	content: "( NEGATIVE CHARGE )";
	position: absolute;
	bottom: -1.5vmin;
	left: 0;
	font-size: 1vmin;
	width: 100%;
	text-align: center;
}

.inner-nucleous p:before {
	--c1: #bc0003;
	--c2: #fa0001;
	content: "+";
}

.inner-nucleous p + p:before {
	--c1: #082976;
	--c2: #124b9c;
	content: "";
}

.inner-nucleous p:after {
	content: "( POSITIVE CHARGE )";
}
.inner-nucleous p + p:after {
	content: "( NO CHARGE )";
}


body:has(.outer-shell:hover) .atom .orbits .electron:nth-child(n+5),
body:has(.outer-shell:hover) .atom .nucleous {
	opacity: 0.15;
}

body:has(.inner-shell:hover) .atom .orbits .electron:nth-child(-n+4),
body:has(.inner-shell:hover) .atom .nucleous {
	opacity: 0.15;
}

body:has(.inner-nucleous:hover) .atom .orbits .electron {
	opacity: 0.15;
}

.show-info:hover + .info > div {
	opacity: 0.9;
}

.show-info {
	position: absolute;
	bottom: 4vmin;
	font-size: 3.5vmin;
	color: #fff;
	font-weight: bold;
	border: 0.25vmin solid #ffffffc9;
	width: 5vmin;
	height: 5vmin;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 100%;
}

.show-info:hover {
	color: #111;
	background: #fff;
	border-color: #111;
}


/*** PORTRAIT ***/

@media only screen and (orientation: portrait) {

	.info {
		height: 98vh;
	}

	.inner-nucleous {
		margin-left: 0vmin !important;
		margin-right: 0 !important;
		top: calc(50% + 32vmin) !important;
	}

	.inner-nucleous:before {
		transform: rotate(247deg) !important;
		left: -1.125vmin;
		margin-top: -75vmin !important;
	}

	.inner-nucleous:after {
		transform: rotate(90deg);
		left: -1.5vmin;
		margin-top: -41.25vmin;
		width: 23vmin;
	}

	h3 {
		font-size: 2.5vmin;
	}

	p {
		font-size: 2vmin;
	}

	p:after {
		font-size: 1.65vmin;
	}

	.info > div.outer-shell {
		margin-top: calc(50vh - 53.5vmin);
		margin-right: 47.5vmin;
	}

	.outer-shell:after {
		right: -4.5vmin;
		margin-top: 17.75vmin;
		transform: rotate(60deg);
	}

	.info > div.outer-shell:before {
		transform: rotate(52deg);
		margin-top: 33vmin;
		right: -28vmin;
	}

	.info > div.inner-shell {
		margin-right: -36vmin;
		margin-top: calc(50vh - 84vmin);
	}
	
	.inner-shell:after {
		width: 14vmin;
		right: 15.25vmin;
		margin-top: 25vmin;
		transform: rotate(105deg);
	}
	
	.inner-shell:before {
		transform: rotate(80deg) !important;
		right: 14vmin !important;
		margin-top: 51vmin !important;
	}

}

Conclusion

Implementing CSS to simple HTML page will enhance overall visual appearances of the web page. With the CSS snippet code provided above to build a super structure of atom animation, you can experiment and build upon this atom animation by making some changed into the code and add your own login, you can also exploring different properties & keyframe variations to create a more intricate and realistic representation of atomic structures.

What Are DNS Records & What are the kinds of DNS records?

What is a DNS record?

What are the kinds of DNS records?

1. A Record

2. AAAA Record

3. CNAME Record

4. NS record

5. MX Record

How to perform the DNS Lookup?

Windows Command Prompt:

Linux/Unix/macOS Terminal:

Merging Two Maps in Dart – Flutter

Merging 2 Maps Object using spread operator

Merge 2 maps using addAll() method

Merge 2 map using putifAbsent() method

Sorting Arrays in Java: How to use Arrays.sort() Method

Arrays.sort() java

Sorting array of object in java

Code Example to use Arrays.sort() method

1. Sorting an array of integers

2. Sorting Array of strings

3. Sorting Array of Object

How to convert an object into JSON in Flutter

1. Own Code to convert object to JSON without Library

2. Convert Object to JSON using json_serializable package

Conclusion

Similar Articles

AWS Lambda Function to Stop, Start or Restart AWS Instance

What is AWS Lambda Function?

How to create a Lambda Function in AWS console?

How to change lambda execution time

Giving permission to lambda function to access EC2 instance

Lambda Python Code to Stop, Start EC2 Instance

Structure of Atom – html + css animation

HTML Explaination – Structure of a Atom

CSS Code – Structure of Atom

Nucleus and Electron

Electron Orbits