ziontutorial.com 👽

Tech That Matters

How To Create A Modern Website Using React Js Step-By-Step Website Tutorial

Sticky post
How To Create A Modern Website Using React Js

Are you looking to create a modern website using React? In this step-by-step tutorial, you’ll learn how to set up your development environment, and we will learn How To Create A Modern Website Using React Js .creating a new React project, and build a sleek website using React components and libraries. From installing Node.js and selecting a text editor to coding custom components and using popular libraries like React Router and Bootstrap, this tutorial covers everything you need to know to create a professional-looking website. Whether you’re a beginner or an experienced developer, this guide will help you take your web development skills to the next level. Follow along and create your own stunning website today!. Be ready of a tutorial How To Make Website a modern website using React | Create Website Header Design

App.js

Let’s start by creating an app.js file and writing all the HTML elements.Let’s begin by creating the website’s skeleton using simple HTML. The navbar must come first, followed by the header and finally the picture section of the website. You may use the code below to

import "./App.css";
function App() {
  return (
    <div className="container">
      <nav>
        <img src="images/logo.png" className="logo" alt="imaged" />
        <ul>
          <li>
            <a href="www.ziontutorial.com">Traval Guide</a>
          </li>
          <li>
            <a href="www.ziontutorial.com">Famous Places</a>
          </li>
          <li>
            <a href="www.ziontutorial.com">Contact Us</a>
          </li>
        </ul>
        <button className="btn">
          <img src="images/icon.png" alt="icon" /> Bookings
        </button>
      </nav>
      <div className="content">
        <h1>
          Beautiful
          <br />
          Places to explore
        </h1>
        <p>
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry. Lorem Ipsum has been the industry's standard dummy text ever
          since the 1500s, when an unknown printer took a galley of type and
          scrambled it to make a type specimen book.
        </p>
        <form>
          <input type="text" placeholder="Country Name" />
          <button type="submit" className="btn">
            Search
          </button>
        </form>
      </div>
      <p></p>
    </div>
  );
}

export default App;

Let’s write all the CSS and the landing page which will make this landing page very beautiful.

App.css

Let’s create a really simple CSS style for our header portion. As I mentioned in the previous section, we generated the navbar, header text, and header picture using HTML. Now that we have these components, let’s add some CSS to our skeleton to make the header seem lovely. I’ve listed all the code necessary to construct our header below. You may check this out and experiment with these values to see what happens.

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

.container {
  width: 100%;
  min-height: 100vh;
  background-image: linear-gradient(rgb(9, 0, 77, 0.65), rgba(9, 0, 77, 0.65));
  background-image: url("https://source.unsplash.com/random/1920x1080/?wallpaper,landscape");

  background-size: cover;
  background-position: center;
  padding: 10px 8%;
}

nav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}

.logo {
  width: 180px;
  cursor: pointer;
}

nav ul {
  list-style: none;
  width: 100%;
  text-align: right;
  padding-right: 60px;
}

nav ul li {
  display: inline-block;
  margin: 10px 20px;
}

nav ul li a {
  color: #ffffff;
  text-decoration: none;
  font-size: 20px;
  font-weight: 400;
}

.btn {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  border: 0;
  outline: 0;
  border-radius: 5px;
  background: #f5168d;
  color: #ffffff;
  font-weight: 500;
  cursor: pointer;
}

.btn img {
  width: 20px;
  margin-right: 10px;
}

.content {
  margin-top: 14%;
  color: #fff;
  max-width: 620px;
}

.content h1 {
  font-size: 70px;
  font-weight: 800;
  line-height: 85px;
  margin-bottom: 25px;
}

.content form {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 5px;
  padding: 10px;
  margin-top: 30px;
}

.content form input {
  border: 0;
  outline: 0;
  width: 100%;
  font-size: 16px;
  padding-left: 10px;
}

.content form .btn {
  font-size: 15px;
  padding: 10px 30px;
}

⭐ Conclusion

via GIPHY

We did it! ? Hope you like How To Create A Modern Website Using React Js. For such projects do visits and comment on which project should I pick next.

Check out this How to Install WordPress on Localhost | Xammp. Comment if you have any dought Regarding this project please comment in the comment box. Or join Our telegram Channel mostly available on that platform you can ask any question.

Happy coding!

People are also reading:

Create Stunning User Interfaces with These Top 30 React UI libraries

Create Stunning User Interfaces with These Top 30 React UI libraries

Sticky post
React UI libraries

React is a popular JavaScript library for building user interfaces. Its flexibility, performance, and ease of use have made it a go-to choice for developers looking to create complex, dynamic applications. With the help of the extensive library ecosystem, developers can quickly and easily build out the user interface of their React applications without having to start from scratch. In this article, we will explore the top 30 React libraries that can be used to enhance the UI of your application. These libraries include a variety of tools for building everything from navigation menus and modals to calendars and image croppers. Whether you are just starting out with React or looking to take your skills to the next level, these libraries will help you build powerful, beautiful, and responsive user interfaces.

Lists Of React UI libraries

  1. React Router: React Router is a popular routing library for React that allows you to handle navigation and routing in your web application. Link: https://reactrouter.com/
  2. React Redux: Redux is a predictable state container for JavaScript apps. React Redux is the official React binding for Redux. Link: https://react-redux.js.org/
  3. Material-UI: MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design. https://mui.com/

  1. React Bootstrap: React Bootstrap is a popular UI library that provides a set of reusable components for building responsive and mobile-first web applications. Link: https://react-bootstrap.github.io/
  2. Ant Design: Ant Design is a comprehensive UI library that provides a wide range of components for building high-quality web applications. Link: https://ant.design/
  3. Styled Components: Styled Components is a popular library for styling React components with CSS. It allows you to write CSS directly in your JavaScript code. Link: https://styled-components.com/
  4. React Select: React Select is a flexible and easy-to-use library for building select inputs in React. It provides a range of features such as search, async loading, and multi-select. Link: https://react-select.com/home
  5. React Toastify: React Toastify is a simple and customizable toast library for React that provides a range of notification styles such as success, warning, and error. Link: https://github.com/fkhadra/react-toastify
  6. React Virtualized: React Virtualized is a library for efficiently rendering large lists and tables in React. It provides a set of components such as List, Table, and Grid that can handle thousands of rows with ease. Link: https://bvaughn.github.io/react-virtualized/#/components/List
  7. React DnD: React DnD is a drag and drop library for React that allows you to build complex drag and drop interfaces with ease. Link: https://react-dnd.github.io/react-dnd/about
  8. React Icons: React Icons is a library of popular icons such as Font Awesome, Material Design, and Feather Icons that can be easily used in React projects. Link: https://react-icons.github.io/react-icons/
  9. React Query: React Query is a powerful and flexible library for managing and caching server state in React applications. It provides a range of features such as pagination, caching, and refetching. Link: https://react-query.tanstack.com/
  10. React Hook Form: React Hook Form is a lightweight and flexible form library for React that uses hooks to manage form state. It provides a range of features such as validation, error messages, and submission handling. Link: https://react-hook-form.com/
  11. React Helmet: React Helmet is a library for managing the head section of your React app. It allows you to dynamically set the title, meta tags, and other important information. Link: https://github.com/nfl/react-helmet
  12. React Table: React Table is a library for building advanced tables and data grids in React. It provides a range of features such as sorting, filtering, and pagination. Link: https://react-table.tanstack.com/
  13. React Query Builder: React Query Builder is a library for building complex and dynamic queries in React. It provides a range of features such as drag and drop interface, validation, and query generation. Link: https://github.com/ukrbublik/react-awesome-query-builder
  14. React Image Gallery: React Image Gallery is a flexible and customizable library for building responsive image galleries in React. It provides a range of features such as lazy loading, zoom, and fullscreen mode. Link: https://www.npmjs.com/package/react-image-gallery
  15. React Date Picker: React Date Picker is a library for building flexible and customizable date pickers in React. It provides a range of features such as range selection, disabled dates, and internationalization. Link: https://reactdatepicker.com/
  16. React Modal: React Modal is a library for building modal dialogs in React
  17. React Big Calendar: React Big Calendar is a popular library for building interactive calendars in React. It provides a range of features such as drag and drop events, date selection, and customizable views. Link: https://jquense.github.io/react-big-calendar/examples/index.html
  18. React Masonry: React Masonry is a library for building dynamic and responsive masonry layouts in React. It provides a simple and easy-to-use interface for creating grids of varying sizes and styles. Link: https://github.com/eiriklv/react-masonry
  19. React Color: React Color is a library for building customizable color pickers in React. It provides a range of features such as swatches, saturation, and hue controls. Link: https://casesandberg.github.io/react-color/
  20. React Slick: React Slick is a popular library for building responsive and customizable carousel components in React. It provides a range of features such as autoplay, infinite scrolling, and variable widths. Link: https://react-slick.neostack.com/
  21. React Beautiful Dnd: React Beautiful Dnd is a drag and drop library for React that provides a simple and easy-to-use interface for building advanced drag and drop components. Link: https://github.com/atlassian/react-beautiful-dnd
  22. React Content Loader: React Content Loader is a library for building customizable placeholder loading animations in React. It provides a range of pre-built animations that can be easily customized to fit your project. Link: https://skeletonreact.com/
  23. React Leaflet: React Leaflet is a library for building interactive maps in React using Leaflet. It provides a range of features such as zoom, pan, and markers. Link: https://react-leaflet.js.org/
  24. React Image Cropper: React Image Cropper is a library for building image croppers in React. It provides a range of features such as zoom, rotation, and aspect ratio control. Link: https://github.com/DominicTobias/react-image-crop
  25. React Elastic Carousel: React Elastic Carousel is a library for building dynamic and flexible carousels in React. It provides a range of features such as elastic scrolling, lazy loading, and customizable options. Link: https://www.npmjs.com/package/react-elastic-carousel
  26. React Native Web: React Native Web is a library that allows you to use React Native components in web applications. It provides a range of features such as platform-specific code, performance optimizations, and code sharing between web and mobile platforms. Link: https://necolas.github.io/react-native-web/docs/
  27. React Swipeable: React Swipeable is a library for building swipeable components in React. It provides a range of features such as touch and mouse support, direction detection, and velocity calculation. Link: https://github.com/FormidableLabs/react-swipeable

Conclusion

React’s popularity continues to grow, thanks to its flexibility, performance, and ease of use. With the vast array of libraries available, developers can easily create dynamic and engaging user interfaces. In this article, we have explored the top 30 React UI libraries that can be used to enhance the UI of your application. From navigation menus and modals to calendars and image croppers, these libraries offer a wide range of tools to help you build powerful, beautiful, and responsive user interfaces. By taking advantage of these libraries, developers can streamline their development process, reduce their workload, and create more compelling applications. We hope this list of libraries will inspire you to create beautiful and functional UIs in your React applications.

People are also reading:

40 Must-Have CSS Libraries to Elevate Your Web Design Game

Sticky post
40 Must-Have CSS Libraries
40 Must-Have CSS Libraries

If you’re a web designer or developer, you know how important it is to stay on top of the latest tools and trends in the field. That’s why we’ve put together a list of 40 must-have CSS libraries that can take your web design game to the next level. From responsive frameworks to advanced animations and effects, these libraries can help you create stunning and engaging websites that stand out from the crowd. Whether you’re a seasoned pro or just starting out, these CSS libraries are sure to be valuable additions to your toolkit.

Here are the link of each website

  1. Bootstrap: https://getbootstrap.com/
  2. Bulma: https://bulma.io/
  3. Foundation: https://foundation.zurb.com/
  4. Semantic UI: https://semantic-ui.com/
  5. Materialize: https://materializecss.com/
  6. UIKit: https://getuikit.com/
  7. Tailwind CSS: https://tailwindcss.com/
  8. Ant Design: https://ant.design/
  9. Spectre.css: https://picturepan2.github.io/spectre/
  10. Semantic UI React: https://react.semantic-ui.com/
  11. Vuetify: https://vuetifyjs.com/en/
  12. PrimeNG: https://www.primefaces.org/primeng/
  13. Shards: https://designrevision.com/downloads/shards/
  14. Element: https://element.eleme.io/
  15. Chakra UI: https://chakra-ui.com/
  16. Carbon Design System: https://www.carbondesignsystem.com/
  17. Fluent UI: https://developer.microsoft.com/en-us/fluentui#/
  18. Grommet: https://v2.grommet.io/
  19. Blueprint: https://blueprintjs.com/
  20. Tachyons: https://tachyons.io/
  21. Basscss: https://basscss.com/
  22. NES.css: https://nostalgic-css.github.io/NES.css/
  23. Milligram: https://milligram.io/
  24. Mini.css: https://minicss.org/
  25. Material Design Lite: https://getmdl.io/
  26. Ionic Framework: https://ionicframework.com/
  27. Quasar: https://quasar.dev/
  28. Webflow: https://webflow.com/
  29. Skeleton: http://getskeleton.com/
  30. Suzie: https://github.com/oddbird/susy
  31. Buefy:https://buefy.org/
  32. React-Bootstrap:https://react-bootstrap.github.io/
  33. Reactstrap:https://reactstrap.github.io/
  34. Rebass :https://rebassjs.org/
  35. Styled Components:https://styled-components.com/
  36. Emotion:https://emotion.sh/docs/introduction
  37. Glamorous:https://glamorous.rocks/
  38. Water.css: https://watercss.kognise.dev/#
  39. Polished:https://polished.js.org/
  40. Hover.css: https://ianlunn.github.io/Hover/

A CSS library is a collection of pre-written CSS code that can be used to style web pages. A library typically focuses on specific CSS functionalities, such as typography or animation, and provides a set of styles that can be added to existing web designs to achieve a desired look and feel.

CSS libraries are often lightweight, easy to use, and can save developers a significant amount of time when styling web pages. They can also help ensure consistency across different pages of a website, and improve the overall user experience by providing a visually appealing and responsive design. Popular CSS libraries include Bootstrap, Foundation, Materialize, and many others.

Most Used CSS libraries

  1. Bootstrap: A CSS framework developed by Twitter that provides a set of pre-designed user interface (UI) components, such as buttons, forms, navigation bars, and grids, to help developers build responsive and mobile-first websites and applications quickly.
  2. Foundation: Another popular CSS framework that offers a suite of UI components, including forms, navigation menus, and typography styles, that are easy to customize and responsive by default.
  3. Materialize: A CSS framework based on Google’s Material Design language, which is a design philosophy that emphasizes a clean and modern look and feel for web and mobile applications.
  4. Bulma: A lightweight and modular CSS framework that focuses on providing a clean and simple design for web interfaces, with a flexible grid system and a range of UI components that can be customized easily.
  5. Semantic UI: A comprehensive and intuitive CSS framework that uses human-friendly HTML syntax to make building responsive and accessible web interfaces easy and efficient. It offers a wide range of UI components, such as buttons, forms, and grids, that can be easily customized.
  6. Tailwind CSS: A CSS utility framework that provides a set of pre-defined classes for common design patterns, such as spacing, typography, and layout. This allows developers to build custom and responsive web interfaces quickly, without needing to write custom CSS styles.
  7. Spectre.css: A minimalist and lightweight CSS framework that provides a range of useful UI components, such as grids, typography, and forms, for building modern and responsive web interfaces.
  8. Pure.css: Another lightweight and minimalistic CSS framework that offers a range of UI components, including forms, tables, and grids, that are easy to customize and responsive by default.
  9. UIKit: A comprehensive and modular CSS framework that offers a range of UI components, such as navigation menus, grids, and forms, that are highly customizable and responsive by default.
  10. Ant Design: A popular CSS framework that provides a range of customizable UI components, such as forms, tables, and navigation menus, that are optimized for building enterprise-level web applications and interfaces. It also offers a design language that emphasizes consistency and usability across all components.
  11. Vuetify: A popular CSS framework for building web interfaces using the Vue.js JavaScript framework, offering a range of customizable UI components, such as navigation menus, forms, and cards.
  12. PrimeNG: A CSS framework for building web interfaces using the Angular JavaScript framework, offering a range of customizable UI components, such as grids, forms, and charts.
  13. Shards: A modern and lightweight CSS framework that provides a range of responsive UI components, such as buttons, forms, and cards, that are easy to customize and integrate into web interfaces.
  14. Element: A CSS framework that provides a range of customizable UI components, such as forms, tables, and grids, for building responsive and modern web interfaces.
  15. Chakra UI: A popular and modern CSS framework that provides a range of customizable UI components, such as forms, modals, and typography, for building responsive and accessible web interfaces.
  16. Carbon Design System: A comprehensive and modular CSS framework that offers a range of UI components, such as buttons, forms, and grids, that are optimized for building enterprise-level web applications.
  17. Fluent UI: A CSS framework that provides a range of customizable UI components, such as buttons, forms, and icons, for building modern and responsive web interfaces.
  18. Grommet: A modern and responsive CSS framework that provides a range of UI components, such as tables, charts, and modals, that are easy to customize and integrate into web interfaces.
  19. Blueprint: A CSS framework that provides a range of customizable UI components, such as forms, navigation menus, and grids, that are optimized for building web interfaces with the React.js JavaScript framework.
  20. Tachyons: A CSS utility framework that provides a set of pre-defined classes for building custom and responsive web interfaces quickly and efficiently, with a focus on readability and consistency.
  21. Basscss: Another CSS utility framework that provides a range of pre-defined classes for building custom and responsive web interfaces quickly and efficiently, with a focus on simplicity and modularity.
  22. NES.css: A fun and retro-themed CSS framework that provides a range of customizable UI components, such as buttons, forms, and cards, for building modern web interfaces with a nostalgic feel.
  23. Milligram: A minimalist and lightweight CSS framework that offers a range of UI components, such as buttons, forms, and typography, for building modern and responsive web interfaces.
  24. Mini.css: Another minimalist and lightweight CSS framework that provides a range of UI components, such as grids, forms, and navigation menus, that are easy to customize and responsive by default.
  25. Material Design Lite: A lightweight and customizable CSS framework based on Google’s Material Design philosophy, offering a range of UI components, such as buttons, forms, and grids, for building modern and responsive web interfaces.
  26. Ionic Framework: A popular CSS framework for building hybrid mobile applications using web technologies, offering a range of customizable UI components, such as buttons, forms, and cards, that can be easily integrated into mobile apps.
  27. Quasar: Another CSS framework for building hybrid mobile applications using web technologies, offering a range of customizable UI components, such as modals, forms, and navigation menus, that are optimized for mobile devices.
  28. Webflow: A comprehensive web design platform that offers a range of customizable templates and UI components, such as forms, animations, and sliders, for building modern and responsive web interfaces without writing code.
  29. Skeleton: A lightweight and responsive CSS framework that provides a set of pre-defined classes for building custom web interfaces quickly and efficiently.
  30. Suzie: A CSS framework that offers a range of customizable UI components, such as buttons, forms,

Conclusion

In general, using CSS libraries can be a helpful way for web developers to save time and effort in creating consistent designs across their projects. By utilizing pre-existing code for common features, developers can focus more on creating great web design and efficient apps. While some CSS libraries may not seem exciting at first, they can still be valuable tools for making the development process more productive and efficient. Overall, incorporating CSS libraries into web development projects can help streamline the design process and create a cohesive visual aesthetic.

People are also reading:

Stanford University Free Courses

The Top 5 Stanford University Free Courses. You Shouldn’t Miss .

Sticky post

Stanford University’s Free Courses Program The Top 6 courses that you must enroll in are listed below.

Stanford University's Free Courses Program The Top 6 courses

Hey guys hope you are doing well, And in today’s article we will discuss the top Top 5 Stanford
University Courses. Which are absolutely Free of cost. I have mentioned the top 5 free courses below with the link. The Top 5 Stanford University Free Courses.You Shouldn’t Miss this courses because its absolutely free of cost.

01. Computer Science 101 | Course – Stanford Online

Stanford University's Free Courses Program The Top 6 courses

This is the first course out of 5 course Computer Science 101. This Course For students with no prior computer science knowledge, CS101 is a self-paced course that covers the fundamental concepts of computer science. In this course, you will learn about the essential ideas of computer science for an audience with zero prior Knowledge.

02. Staying Fit

We are in the second free course which is all about developing and maintaining healthy eating, exercise, and sleep habits.No prerequisites are necessary for this course. All individuals who are over the age of 18 are welcome to join this program.


03. Designing Your Career

We on the third course which is all about design thinking approach to help people of any age and academic background develop a constructive and effective approach to designing their vocation.  This online course uses a design thinking approach to help people of any age and academic background develop an effective approach to designing their career.

04. Game Theory

We are currently in the fourth course, which focuses on Game theory is the mathematical modelling of the strategic interaction of rational (and irrational) agents, and it has gained popularity because to films like “A Beautiful Mind.” Beyond what we often refer to as “games,” like chess, poker, soccer, etc.

05. Social and Economic Networks

Our social and professional life are dominated by social networks. They are essential to the trading of various commodities and services and play a key role in the dissemination of information about job opportunities. They have a big impact on what we buy, how we vote, what languages we speak, whether or not we become criminals, how much education we get, and how likely we are to succeed in our careers. Understanding how social network structures influence behaviour, which network structures are likely to evolve in a society, and why we organise ourselves as we do is crucial given the myriad ways in which network structures affect our wellbeing.

People are also reading:

Responsive Gym Website Using HTML CSS JavaScript

Responsive Gym Website Using HTML, CSS & JavaScript

Sticky post
Responsive Gym Website Using HTML, CSS & JavaScript

Create Responsive Gym Website Using HTML CSS JavaScript

Hello to Everyone. In this article, you will learn how to create Responsive Gym Website Using HTML CSS JavaScript. You will be able to create your own website at the end of this article since we will start from scratch with this project and teach you every HTML, CSS, and JavaScript concept.

Being physically and mentally fit is necessary for a happy and long life. Exercise Is One Of The Best Ways To Keep Your Health In Check. So, regardless of how busy you are, finding a workout routine is always recommended. Because diseases are so prevalent today, more people are now aware of the benefits of exercise. The Best Exercise Program Will Particularly Improve A Person’s Physical, Mental, And Social Well-Being.

Responsive Gym Website Using HTML, CSS & JavaScript
Responsive Gym Website Using HTML, CSS & JavaScript

I Wish You Were Generally Aware Of What The Project Involves. We’ll walk you through this project step by step in our article.

Step1: Adding HTML Markup

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!--=============== FAVICON ===============-->
        <link rel="shortcut icon" href="assets/img/favicon.png" type="image/x-icon">

        <!--=============== BOXICONS ===============-->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">

        <!--=============== SWIPER CSS ===============--> 
        <link rel="stylesheet" href="assets/css/swiper-bundle.min.css">

        <!--=============== CSS ===============--> 
        <link rel="stylesheet" href="assets/css/styles.css">

        <title>Gym management system</title>
    </head>
    <body>
        <!--==================== HEADER ====================-->
        <header class="header" id="header">
            <nav class="nav container">
                <a href="#" class="nav__logo">
                    <img src="assets/img/Dumbell_03.png" alt="" class="nav__logo-img">
                    Gym Managment 
                </a>

                <div class="nav__menu" id="nav-menu">
                    <ul class="nav__list">
                        <li class="nav__item">
                            <a href="#home" class="nav__link active-link">Home</a>
                        </li>

                        <li class="nav__item">
                            <a href="#weoffer" class="nav__link">We offer</a>
                        </li>

                        <li class="nav__item">
                            <a href="#about" class="nav__link">Payroll</a>
                        </li>

                        <li class="nav__item">
                            <a href="#features" class="nav__link">Membership</a>
                        </li>                      

                        <a href="#" class="button button--ghost">Support</a>
                    </ul>

                    <div class="nav__close" id="nav-close">
                        <i class='bx bx-x'></i>
                    </div>

                    <img src="assets/img/nav-img.png" alt="" class="nav__img">
                </div>

                <div class="nav__toggle" id="nav-toggle">
                    <i class='bx bx-grid-alt'></i>
                </div>

            </nav>
        </header>

        <main class="main">
            <!--==================== HOME ====================-->
            <section class="home container" id="home">
                <div class="swiper home-swiper">
                    <div class="swiper-wrapper">
                        <!-- HOME SLIDER 1 -->
                        <section class="swiper-slide">
                            <div class="home__content grid">
                                <div class="home__group">
                                    <img src="assets/img/home1-img.png" alt="" class="home__img">
                                </div>
    
                                <div class="home__data">
                                  
                                    <h1 class="home__title">Esmart <br> Fitness <br> Solution</h1>
                                    <p class="home__description">A top gym management software solution to simplify managing your gym.With dedicated mobile apps for trainers and members, administer workouts schedules & diet plans and many more activities effectively.
                                    </p>

                                    <div class="home__buttons">
                                        <a href="#" class="button">Book Now</a>
                                        
                                    </div>
                                </div>
                            </div>
                        </section>

                        <!-- HOME SLIDER 2 -->
                        <section class="swiper-slide">
                            <div class="home__content grid">
                                <div class="home__group">
                                    <img src="assets/img/home2-img.png" alt="" class="home__img">
                                   
                                    </div>
    
                                <div class="home__data">
                                  
                                    <h1 class="home__title">Makes <br>your GYM Smarter!</h1>
                                    <p class="home__description">Adino steals cotton candy from his brother and eats them all in one bite, 
                                        a hungry beast. Grahami can no longer contain his anger towards Adino.
                                    </p>

                                    <div class="home__buttons">
                                        <a href="#" class="button">Book Now</a>                                      
                                    </div>
                                </div>
                            </div>
                        </section>

              
                       
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </section>
            
            <!--==================== CATEGORY ====================-->
            <section class="section category " id="weoffer">
                <h2 class="section__title">WE OFFERS </h2>

                <div class="category__container container grid">
                    <div class="category__data">
                        <img src="assets/img/Gym Bottle_01.png" alt="" class="category__img">
                        <h3 class="category__title">Enquiry Management</h3>
                        <p class="category__description">will reveal lots of paper work burden, makes enquiry process easier and more faster.</p>
                    </div>

                    <div class="category__data">
                        <img src="assets/img/Dumbell_01.png" alt="" class="category__img">
                        <h3 class="category__title">Membership Management</h3>
                        <p class="category__description">Each member have their own set of measurement, membership</p>
                    </div>

                    <div class="category__data">
                        <img src="assets/img/Kettlebell_01.png" alt="" class="category__img">
                        <h3 class="category__title">Workout Management</h3>
                        <p class="category__description">e-SmartFitness optimizes your users to track record of their workouts with help of quick access features </p>
                    </div>
                </div>
            </section>

            <!--==================== ABOUT ====================-->
            <section class="section about" id="about">
                <div class="about__container container grid">
                    <div class="about__data">
                        <h2 class="section__title about__title">Payroll Management</h2>
                        <p class="about__description">Using Payroll management you can easily manage staff salary, shift assignment, advance salary, and many more features makes your software more handy.
                        </p>
                        <a href="#" class="button">Know more</a>
                    </div>

                    <img src="assets/img/Weight machine_03.png" alt="" class="about__img">
                </div>
            </section>

             <!--==================== Payroll ====================-->
             <section class="section features" id="features">
                <div class="about__container container grid">
                    
                    <img src="assets/img/Kettlebell_01.png" alt="" class="about__img">
                    <div class="about__data">
                        <h2 class="section__title about__title">Membership Management</h2>
                        <p class="about__description">Each member have their own set of measurement, membership and task details. Manage Financial accounts by enrolling member to a membership plan.
                        </p>
                        <a href="#" class="button">Know more</a>
                    </div>
                </div>
            </section>

            <!--==================== DISCOUNT ====================-->
            <section class="section discount">
                <div class="discount__container container grid">
                    <div class="discount__data">
                        <h2 class="discount__title">20% Discount <br> For new Membership</h2>
                        <a href="#" class="button">Go to new</a>
                    </div>

                    <img src="assets/img/Dumbell_03.png" alt="" class="discount__img">
                </div>
            </section>

           

            <!--==================== OUR NEWSLETTER ====================-->
            <section class="section newsletter">
                <div class="newsletter__container container">
                    <h2 class="section__title">Our Newsletter</h2>
                    <p class="newsletter__description">
                        Promotion new products and sales. Directly to your inbox
                    </p>

                    <form action="" class="newsletter__form">
                        <input type="text" placeholder="Enter your email" class="newsletter__input">
                        <button class="button">
                            Subscribe
                        </button>
                    </form>
                </div>
            </section>
        </main>

        <!--==================== FOOTER ====================-->
            <footer class="footer section">
                <div class="footer__container container grid">
                    <div class="footer__content">
                        <a href="#" class="footer__logo">
                           
                            Gymmanagment System
                        </a>

                        <p class="footer__description">Enjoy the our Services</p>
                        
                        <div class="footer__social">
                            <a href="https://www.facebook.com/" target="_blank" class="footer__social-link">
                                <i class='bx bxl-facebook'></i>
                            </a>
                            <a href="https://www.instagram.com/" target="_blank" class="footer__social-link">
                                <i class='bx bxl-instagram-alt' ></i>
                            </a>
                            <a href="https://twitter.com/" target="_blank" class="footer__social-link">
                                <i class='bx bxl-twitter' ></i>
                            </a>
                        </div>
                    </div>

                    <div class="footer__content">
                        <h3 class="footer__title">About</h3>
                        
                        <ul class="footer__links">
                            <li>
                                <a href="#" class="footer__link">We offer</a>
                            </li>
                            
                        </ul>
                    </div>

                    <div class="footer__content">
                        <h3 class="footer__title">Our Services</h3>
                        
                        <ul class="footer__links">
                            <li>
                                <a href="#" class="footer__link">Payroll</a>
                            </li>
                           
                        </ul>
                    </div>

                    <div class="footer__content">
                        <h3 class="footer__title">Our Company</h3>
                        
                        <ul class="footer__links">
                            <li>
                                <a href="#" class="footer__link">Membership</a>
                            </li>
                           
                        </ul>
                    </div>
                </div>

                <span class="footer__copy">&#169; All rigths reserved</span>
                <img src="assets/img/Handgrip_01.png" alt="" class="footer__img-one">
                <img src="assets/img/Handgrip_01.png" alt="" class="footer__img-two">
            </footer>

            <!--=============== SCROLL UP ===============-->
            <a href="#" class="scrollup" id="scroll-up">
                <i class='bx bx-up-arrow-alt scrollup__icon'></i>
            </a>
        
        <!--=============== SCROLL REVEAL ===============-->
        <script src="assets/js/scrollreveal.min.js"></script>

        <!--=============== SWIPER JS ===============-->
        <script src="assets/js/swiper-bundle.min.js"></script>
        
        <!--=============== MAIN JS ===============-->
        <script src="assets/js/main.js"></script>
    </body>
</html>

Building Navigation Bar

To add a navigation bar to our website, first create a div with the class “Menu,” and inside of that, use the img> tag to add our logo to the left side of the navbar. Finally, inside of that, use the nav> tag to add various menu items to the navbar. In order to make it easier for visitors to navigate our website using the navbar, we will create a link to all of the menu items inside the navbar.

Building Header Section

We will use the
Tag to insert the primary heading for our gym website now that we have added a header section using the Header Tag. Next, we’ll use the paragraph tag to add a succinct description of our website and anchor -based Get Started Now button. We Will Also Include An Image To Enhance The Visual Appeal Of Our Header.

Body Section :

We will now include sub-parts in our body section like the feature, explore, and trainer sections. We will now build those various sections using the div element with various classes, the p tag to add some text, and the img tag to add images to our website. I Suggest Using More And More Visuals To Make Your Website Appear More Attractive. Simply taking a quick look at our structure might give you an idea, and you should work to use your own creativity to improve the website.

Building Footer Section

We Will Build A Footer Section With The Footer Tag And A Div> Section With the tag. We Will Add The Copyright Icon And Copyright Content Using The &Copy Tag, And The Name Of The Person Who Designed The Website Using the tag. Let’s Have A Look At Our Webpage Now That We’ve Added Structure.

Step2: Adding CSS Code

/*=============== GOOGLE FONTS ===============*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;900&display=swap');

/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 3.5rem;

  /*========== Colors ==========*/
  --hue: 14;
  --first-color: hsl(var(--hue), 91%, 54%);
  --first-color-alt: hsl(var(--hue), 91%, 50%);
  --title-color: hsl(var(--hue), 4%, 100%);
  --text-color: hsl(var(--hue), 4%, 85%);
  --text-color-light: hsl(var(--hue), 4%, 55%);

  /*Green gradient*/
  --body-color: linear-gradient(90deg, hsl(105, 5%, 15%) 0%, hsl(0, 0%, 20%) 100%);
  --container-color: linear-gradient(136deg, hsl(0, 0%, 31%) 0%, hsl(0, 0%, 25%) 100%);
  
  /*Red gradient*/
  /* --body-color: linear-gradient(90deg, hsl(360, 28%, 40%) 0%, hsl(18, 28%, 40%) 100%);
  --container-color: linear-gradient(136deg, hsl(360, 28%, 35%) 0%, hsl(18, 28%, 35%) 100%); */

  /*Black solid*/
  /* --body-color: hsl(30, 8%, 8%);
  --container-color: hsl(30, 8%, 10%); */

  /*========== Font and typography ==========*/
  --body-font: 'Poppins', sans-serif;
  --biggest-font-size: 2rem;
  --h1-font-size: 1.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1rem;
  --normal-font-size: .938rem;
  --small-font-size: .813rem;
  --smaller-font-size: .75rem;

  /*========== Font weight ==========*/
  --font-medium: 500;
  --font-semi-bold: 600;
  --font-black: 900;

  /*========== Margenes Bottom ==========*/
  --mb-0-25: .25rem;
  --mb-0-5: .5rem;
  --mb-0-75: .75rem;
  --mb-1: 1rem;
  --mb-1-5: 1.5rem;
  --mb-2: 2rem;
  --mb-2-5: 2.5rem;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
}

/* Responsive typography */
@media screen and (min-width: 992px) {
  :root {
    --biggest-font-size: 4rem;
    --h1-font-size: 2.25rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
    --smaller-font-size: .813rem;
  }
}

/*=============== BASE ===============*/
*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html{
  scroll-behavior: smooth;
}

body{
  margin: var(--header-height) 0 0 0;
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background: var(--body-color);
  color: var(--text-color);
}

h1,h2,h3,h4{
  color: var(--title-color);
  font-weight: var(--font-semi-bold);
}

ul{
  list-style: none;
}

a{
  text-decoration: none;
}

img{
  max-width: 100%;
  height: auto;
}

button,
input{
  border: none;
  outline: none;
}

button{
  cursor: pointer;
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
}

/*=============== REUSABLE CSS CLASSES ===============*/
.section{
  padding: 4.5rem 0 2rem;
}

.section__title{
  font-size: var(--h2-font-size);
  margin-bottom: var(--mb-2);
  text-align: center;
}

/*=============== LAYOUT ===============*/
.container{
  max-width: 968px;
  margin-left: var(--mb-1-5);
  margin-right: var(--mb-1-5);
}

.grid{
  display: grid;
}

.main{
  overflow: hidden; /*For animation*/
}

/*=============== HEADER ===============*/
.header{
  width: 100%;
  background: var(--body-color); 
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-fixed);
}

/*=============== NAV ===============*/
.nav{
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav__logo{
  display: flex;
  align-items: center;
  column-gap: .5rem;
  font-weight: var(--font-medium);
}

.nav__logo-img{
  width: 1.25rem;
}

.nav__link,
.nav__logo,
.nav__toggle,
.nav__close{
  color: var(--title-color);
}

.nav__toggle{
  font-size: 1.25rem;
  cursor: pointer;
}

@media screen and (max-width: 767px){
  .nav__menu{
    position: fixed;
    width: 100%;
    background: var(--container-color);
    top: -150%;
    left: 0;
    padding: 3.5rem 0;
    transition: .4s;
    z-index: var(--z-fixed);
    border-radius: 0 0 1.5rem 1.5rem;
  }
}

.nav__img{
  width: 100px;
  position: absolute;
  top: 0;
  left: 0;
}

.nav__close{
  font-size: 1.8rem;
  position: absolute;
  top: .5rem;
  right: .7rem;
  cursor: pointer;
}

.nav__list{
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 1.5rem;
}

.nav__link{
  text-transform: uppercase;
  font-weight: var(--font-black);
  transition: .4s;
}

.nav__link:hover{
  color: var(--text-color);
}

/* Show menu */
.show-menu{
  top: 0;
}

/* Change background header */
.scroll-header{
  background: var(--container-color);
}

/* Active link */
.active-link{
  position: relative;
}

.active-link::before{
  content: '';
  position: absolute;
  bottom: -.75rem;
  left: 45%;
  width: 5px;
  height: 5px;
  background-color: var(--title-color);
  border-radius: 50%;
}

/*=============== HOME ===============*/
.home__content{
  row-gap: 1rem;
}

.home__group{
  display: grid;
  position: relative;
  padding-top: 2rem;
}

.home__img{
  height: 250px;
  justify-self: center;
}

.home__indicator{
  width: 8px;
  height: 8px;
  background-color: var(--title-color);
  border-radius: 50%;
  position: absolute;
  top: 7rem;
  right: 2rem;
}

.home__indicator::after{
  content: '';
  position: absolute;
  width: 1px;
  height: 48px;
  background-color: var(--title-color);
  top: -3rem;
  right: 45%;
}

.home__details-img{
  position: absolute;
  right: .5rem;
}

.home__details-title,
.home__details-subtitle{
  display: block;
  font-size: var(--small-font-size);
  text-align: right;
}

.home__subtitle{
  font-size: var(--h3-font-size);
  text-transform: uppercase;
  margin-bottom: var(--mb-1);
}

.home__title{
  font-size: var(--biggest-font-size);
  font-weight: var(--font-black);
  line-height: 109%;
  margin-bottom: var(--mb-1);
}

.home__description{
  margin-bottom: var(--mb-1);
}

.home__buttons{
  display: flex;
  justify-content: space-between;
}

/* Swiper Class */
.swiper-pagination{
  position: initial;
  margin-top: var(--mb-1);
}

.swiper-pagination-bullet{
  width: 5px;
  height: 5px;
  background-color: var(--title-color);
  opacity: 1;
}

.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
  margin: 0 .5rem;
} 

.swiper-pagination-bullet-active{
  width: 1.5rem;
  height: 5px;
  border-radius: .5rem;
}

/*=============== BUTTONS ===============*/
.button{
  display: inline-block;
  background-color: var(--first-color);
  color: var(--title-color);
  padding: 1rem 1.75rem;
  border-radius: .5rem;
  font-weight: var(--font-medium);
  transition: .3s;
}

.button:hover{
  background-color: var(--first-color-alt);
}

.button__icon{
  font-size: 1.25rem;
}

.button--ghost{
  border: 2px solid;
  background-color: transparent;
  border-radius: 3rem;
  padding: .75rem 1.5rem;
}

.button--ghost:hover{
  background: none;
}

.button--link{
  color: var(--title-color);
}

.button--flex{
  display: inline-flex;
  align-items: center;
  column-gap: .5rem;
}

/*=============== CATEGORY ===============*/
.category__container{
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 2rem;
}

.category__data{
  text-align: center;
}

.category__img{
  width: 120px;
  margin-bottom: var(--mb-0-75);
  transition: .3s;
}

.category__title{
  margin-bottom: var(--mb-0-25);
}

.category__data:hover .category__img{
  transform: translateY(-.5rem);
}

/*=============== ABOUT ===============*/
.about__container{
  row-gap: 2rem;
}

.about__data{
  text-align: center;
}

.about__description{
  margin-bottom: var(--mb-2);
}

.about__img{
  width: 200px;
  justify-self: center;
}

/*=============== TRICK OR TREAT ===============*/
.trick__container{
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  padding-top: 1rem;
}

.trick__content{
  position: relative;
  background: var(--container-color);
  border-radius: 1rem;
  padding: 1.5rem 0 1rem 0;
  text-align: center;
  overflow: hidden;
}

.trick__img{
  width: 90px;
  transition: .3s;
}

.trick__subtitle,
.trick__price{
  display: block;
}

.trick__subtitle{
  font-size: var(--smaller-font-size);
  margin-bottom: var(--mb-0-5);
}

.trick__title,
.trick__price{
  color: var(--title-color);
  font-weight: var(--font-medium);
  font-size: var(--normal-font-size);
}

.trick__button{
  display: inline-flex;
  padding: .5rem;
  border-radius: .25rem .25rem .75rem .25rem;
  position: absolute;
  right: -3rem;
  bottom: 0;
}

.trick__icon{
  font-size: 1.25rem;
  color: var(--title-color);
}

.trick__content:hover .trick__img{
  transform: translateY(-.5rem);
}

.trick__content:hover .trick__button{
  right: 0;
}

/*=============== DISCOUNT ===============*/
.discount__container{
  background: var(--container-color);
  border-radius: 1rem;
  padding: 2.5rem 0 1.5rem;
  row-gap: .75rem;
}

.discount__data{
  text-align: center;
}

.discount__title{
  font-size: var(--h2-font-size);
  margin-bottom: var(--mb-2);
}

.discount__img{
  width: 200px;
  justify-self: center;
}

/*=============== NEW ARRIVALS ===============*/
.new__container{
  padding-top: 1rem;
}

.new__img{
  width: 120px;
  margin-bottom: var(--mb-0-5);
  transition: .3s;
}

.new__content{
  position: relative;
  background: var(--container-color);
  width: 242px;
  padding: 2rem 0 1.5rem 0;
  border-radius: .75rem;
  text-align: center;
  overflow: hidden;
}

.new__tag{
  position: absolute;
  top: 8%;
  left: 8%;
  background-color: var(--first-color);
  color: var(--title-color);
  font-size: var(--small-font-size);
  padding: .25rem .5rem;
  border-radius: .25rem;
}

.new__title{
  font-size: var(--normal-font-size);
  font-weight: var(--font-medium);
}

.new__subtitle{
  display: block;
  font-size: var(--small-font-size);
  margin-bottom: var(--mb-0-5);
}

.new__prices{
  display: inline-flex;
  align-items: center;
  column-gap: .5rem;
}

.new__price{
  font-weight: var(--font-medium);
  color: var(--title-color);
}

.new__discount{
  color: var(--first-color);
  font-size: var(--smaller-font-size);
  text-decoration: line-through;
  font-weight: var(--font-medium);
}

.new__button{
  display: inline-flex;
  padding: .5rem;
  border-radius: .25rem .25rem .75rem .25rem;
  position: absolute;
  bottom: 0;
  right: -3rem;
}

.new__icon{
  font-size: 1.25rem;
}

.new__content:hover .new__img{
  transform: translateY(-.5rem);
}

.new__content:hover .new__button{
  right: 0;
}

/*=============== NEWSLETTER ===============*/
.newsletter__description{
  text-align: center;
  margin-bottom: var(--mb-1-5);
}

.newsletter__form{
  background: var(--container-color);
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  border-radius: .75rem;
}

.newsletter__input{
  width: 70%;
  padding: 0 .5rem;
  background: none;
  color: var(--title-color);
}

.newsletter__input::placeholder{
  color: var(--text-color);
}

/*=============== FOOTER ===============*/
.footer{
  position: relative;
  overflow: hidden;
}

.footer__img-one,
.footer__img-two{
  position: absolute;
  transition: .3s;
}

.footer__img-one{
  width: 100px;
  top: 6rem;
  right: -2rem;
}

.footer__img-two{
  width: 150px;
  bottom: 4rem;
  right: 4rem;
}

.footer__img-one:hover,
.footer__img-two:hover{
  transform: translateY(-.5rem);
}

.footer__container{
  row-gap: 2rem;
}

.footer__logo{
  display: flex;
  align-items: center;
  column-gap: .5rem;
  margin-bottom: var(--mb-1);
  font-weight: var(--font-medium);
  color: var(--title-color);
}

.footer__logo-img{
  width: 20px;
}

.footer__description{
  margin-bottom: var(--mb-2-5);
}

.footer__social{
  display: flex;
  column-gap: .75rem;
}

.footer__social-link{
  display: inline-flex;
  background: var(--container-color);
  padding: .25rem;
  border-radius: .25rem;
  color: var(--title-color);
  font-size: 1rem;
}

.footer__social-link:hover{
  background: var(--body-color);
}

.footer__title{
  font-size: var(--h3-font-size);
  margin-bottom: var(--mb-1);
}

.footer__links{
  display: grid;
  row-gap: .35rem;
}

.footer__link{
  font-size: var(--small-font-size);
  color: var(--text-color);
  transition: .3s;
}

.footer__link:hover{
  color: var(--title-color);
}

.footer__copy{
  display: block;
  text-align: center;
  font-size: var(--smaller-font-size);
  margin-top: 4.5rem;
}

/*=============== SCROLL UP ===============*/
.scrollup{
  position: fixed;
  background: var(--container-color);
  right: 1rem;
  bottom: -20%;
  display: inline-flex;
  padding: .3rem;
  border-radius: .25rem;
  z-index: var(--z-tooltip);
  opacity: .8;
  transition: .4s;
}

.scrollup__icon{
  font-size: 1.25rem;
  color: var(--title-color);
}

.scrollup:hover{
  background: var(--container-color);
  opacity: 1;
}

/* Show Scroll Up*/
.show-scroll{
  bottom: 3rem;
}

/*=============== SCROLL BAR ===============*/
::-webkit-scrollbar{
  width: 0.6rem;
  background: #413e3e;
}

::-webkit-scrollbar-thumb{
  background: #272525;
  border-radius: .5rem;
}

/*===============  BREAKPOINTS ===============*/
/* For small devices */
@media screen and (max-width: 320px){
  .container{
    margin-left: var(--mb-1);
    margin-right: var(--mb-1);
  }

  .home__img{
    height: 200px;
  }
  .home__buttons{
    flex-direction: column;
    width: max-content;
    row-gap: 1rem;
  }

  .category__container,
  .trick__container{
    grid-template-columns: .8fr;
    justify-content: center;
  }
}

/* For medium devices */
@media screen and (min-width: 576px){
  .about__container{
    grid-template-columns: .8fr;
    justify-content: center;
  }

  .newsletter__container{
    display: grid;
    grid-template-columns: .7fr;
    justify-content: center;
  }
  .newsletter__description{
    padding: 0 3rem;
  }
}

@media screen and (min-width: 767px){
  body{
    margin: 0;
  }

  .section{
    padding: 7rem 0 2rem;
  }

  .nav{
    height: calc(var(--header-height) + 1.5rem);
  }
  .nav__img,
  .nav__close,
  .nav__toggle{
    display: none;
  }
  .nav__list{
    flex-direction: row;
    column-gap: 3rem;
  }
  .nav__link{
    text-transform: initial;
    font-weight: initial;
  }

  .home__content{
    padding: 8rem 0 2rem;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
  }
  .home__img{
    height: 300px;
  }
  .swiper-pagination{
    margin-top: var(--mb-2);
  }

  .category__container{
    grid-template-columns: repeat(3, 200px);
    justify-content: center;
  }

  .about__container{
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
  }
  .about__title,
  .about__data{
    text-align: initial;
  }
  .about__img{
    width: 250px;
  }

  .trick__container{
    grid-template-columns: repeat(3, 200px);
    justify-content: center;
    gap: 2rem;
  }

  .discount__container{
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    align-items: center;
    column-gap: 3rem;
    padding: 3rem 0;
    border-radius: 3rem;
  }
  .discount__img{
    width: 350px;
    order: -1;
  }
  .discount__data{
    padding-right: 6rem;
  }

  .newsletter__container{
    grid-template-columns: .5fr;
  }

  .footer__container{
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
    column-gap: 1rem;
  }
  .footer__img-two{
    right: initial;
    bottom: 0;
    left: 15%;
  }
}

/* For large devices */
@media screen and (min-width: 992px){
  .container{
    margin-left: auto;
    margin-right: auto;
  }

  .section__title{
    font-size: var(--h1-font-size);
    margin-bottom: 3rem;
  }

  .home__content{
    padding-top: 9rem;
    gap: 3rem;
  }
  .home__group{
    padding-top: 0;
  }
  .home__img{
    height: 400px;
    transform: translateY(-3rem);
  }
  .home__indicator{
    top: initial;
    right: initial;
    bottom: 15%;
    left: 45%;
  }
  .home__indicator::after{
    top: 0;
    height: 75px;
  }
  .home__details-img{
    bottom: 0;
    right: 58%;
  }
  .home__title{
    margin-bottom: var(--mb-1-5);
  }
  .home__description{
    margin-bottom: var(--mb-2-5);
    padding-right: 2rem;
  }

  .category__container{
    column-gap: 8rem;
  }
  .category__img{
    width: 200px;
  }

  .about__container{
    column-gap: 7rem;
  }
  .about__img{
    width: 350px;
  }
  .about__description{
    padding-right: 2rem;
  }

  .trick__container{
    gap: 3.5rem;
  }
  .trick__content{
    border-radius: 1.5rem;
  }
  .trick__img{
    width: 110px;
  }
  .trick__title{
    font-size: var(--h3-font-size);
  }

  .discount__container{
    column-gap: 7rem;
  }

  .new__content{
    width: 310px;
    border-radius: 1rem;
    padding: 2rem 0;
  }
  .new__img{
    width: 150px;
  }
  .new__img,
  .new__subtitle{
    margin-bottom: var(--mb-1);
  }
  .new__title{
    font-size: var(--h3-font-size);
  }

  .footer__copy{
    margin-top: 6rem;
  }
}

@media screen and (min-width: 1200px){
  .home__img{
    height: 420px;
  }
  .swiper-pagination{
    margin-top: var(--mb-2-5);
  }
  .footer__img-one{
    width: 120px;
  }
  .footer__img-two{
    width: 180px;
    top: 30%;
    left: -3%;
  }
}

Step3: Adding Javascript

/*=============== SHOW MENU ===============*/
const navMenu = document.getElementById('nav-menu'),
      navToggle = document.getElementById('nav-toggle'),
      navClose = document.getElementById('nav-close')

/*===== MENU SHOW =====*/
/* Validate if constant exists */
if(navToggle){
    navToggle.addEventListener('click', () =>{
        navMenu.classList.add('show-menu')
    })
}

/*===== MENU HIDDEN =====*/
/* Validate if constant exists */
if(navClose){
    navClose.addEventListener('click', () =>{
        navMenu.classList.remove('show-menu')
    })
}

/*=============== REMOVE MENU MOBILE ===============*/
const navLink = document.querySelectorAll('.nav__link')

function linkAction(){
    const navMenu = document.getElementById('nav-menu')
    // When we click on each nav__link, we remove the show-menu class
    navMenu.classList.remove('show-menu')
}
navLink.forEach(n => n.addEventListener('click', linkAction))

/*=============== HOME SWIPER ===============*/
let homeSwiper = new Swiper(".home-swiper", {
    spaceBetween: 30,
    loop: 'true',
    
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
})

/*=============== CHANGE BACKGROUND HEADER ===============*/
function scrollHeader(){
    const header = document.getElementById('header')
    // When the scroll is greater than 50 viewport height, add the scroll-header class to the header tag
    if(this.scrollY >= 50) header.classList.add('scroll-header'); else header.classList.remove('scroll-header')
}
window.addEventListener('scroll', scrollHeader)

/*=============== NEW SWIPER ===============*/
let newSwiper = new Swiper(".new-swiper", {
    centeredSlides: true,
    slidesPerView: "auto",
    loop: 'true',
    spaceBetween: 16,
});

/*=============== SCROLL SECTIONS ACTIVE LINK ===============*/
const sections = document.querySelectorAll('section[id]')

function scrollActive(){
    const scrollY = window.pageYOffset

    sections.forEach(current =>{
        const sectionHeight = current.offsetHeight,
              sectionTop = current.offsetTop - 58,
              sectionId = current.getAttribute('id')

        if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight){
            document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.add('active-link')
        }else{
            document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.remove('active-link')
        }
    })
}
window.addEventListener('scroll', scrollActive)

/*=============== SHOW SCROLL UP ===============*/ 
function scrollUp(){
    const scrollUp = document.getElementById('scroll-up');
    // When the scroll is higher than 460 viewport height, add the show-scroll class to the a tag with the scroll-top class
    if(this.scrollY >= 460) scrollUp.classList.add('show-scroll'); else scrollUp.classList.remove('show-scroll')
}
window.addEventListener('scroll', scrollUp)

/*=============== SCROLL REVEAL ANIMATION ===============*/
const sr = ScrollReveal({
    origin: 'top',
    distance: '60px',
    duration: 2500,
    delay: 400,
    // reset: true
})

sr.reveal(`.home-swiper, .new-swiper, .newsletter__container`)
sr.reveal(`.category__data, .trick__content, .footer__content`,{interval: 100})
sr.reveal(`.about__data, .discount__img`,{origin: 'left'})
sr.reveal(`.about__img, .discount__data`,{origin: 'right'})

Output:

Conclusion

yeey!

We did it! ? Hope you like Responsive Gym Website Using HTML CSS JavaScript. For such projects do visits and comment on which project should I cover next.

Check out this BMI Calculator using react and hooks. Comment if you have any dought Regarding this project please comment in the comment box. Or join Our telegram Channel mostly available on that platform you can ask any question.

Happy coding!

People are also reading:

How To Build A Simple Counter App In React

Sticky post
 Build A Simple Counter App  using react js

React is a JavaScript toolkit for building interactive user interfaces (UIs) that is becoming more and more well-liked among developers worldwide. How To Build A Simple Counter App In React after learning the language?

Prerequisites

The goal of this tutorial is to introduce developers to the React.js library.The reader should be familiar with the fundamental web development technologies, such as:

  • Basics for HTML and CSS
  • Javascript
  • Basics of React.js in ES6

Note: join Our telegram Channel mostly available on that platform you can ask any question.

What we will Learn

Here we will discuss the basic term and concept of react js. we will learn to code a simple counter app using the React.js library. The workflow of the React counter app will be the same as below.

Video Tutorial | Build A Simple Counter App In React

Before forwarding, we need to understand some terms and concepts in React:-

1. Components :

The React component split the UI into independent, reusable pieces. Which you can use whenever you want

2. States:

Some components may need to store some values. States are used to store values specific to a component.

3. Props :

we want to pass a state from one component to another, props are used.

4. useState:

This is a hook that let you add a state to functional components

Packages to be installed

Let’s start with the first step to install the dependencies. We have to visit the material UI to install the dependencies.

Link to install material UI packages: https://mui.com/material-ui/getting-started/installation/

How To Build A Simple Counter App In React

1. Install React

After the successful installation of Nodejs, install and set up a React app using the below command.

npx create-react-app react-counter-app

Then jump to that folder eg. if your folder name is react-counter-app the type

cd react-counter-app

After that Go to the App.js file and start your coding part here we will define our state and functions which are required to increment and decrement our numbers .

2. Define the state and functions of your app

here I am defining my state in app.js

const [counter, setCounter] = useState(0);

After that lets move to function which help to make counter work .

const handleClick1 = () => {
    // Counter state is incremented
    setCounter(counter + 1)
  }
  
  // Function is called everytime decrement button is clicked
  const handleClick2 = () => {
    // Counter state is decremented 
// Also prevent to reched -1 value in this counter

    if(counter === 0)
    {
      return 0;
    }
    
    else {
    setCounter(counter - 1)
    }
  }
  const handleClick3 = () => {
    // Counter state is help to refresh and make counter value to zero
    setCounter(counter == 0);
    window.location.reload()
  }

Last but not least our return part where we have implemented our form and triggers to call functions

 return (
    <>
    <Box
      component="form"
      sx={{
        '& > :not(style)': { m: 1, width: '25ch' },
      }}
      noValidate
      autoComplete="off"
    ></Box>
 
    <div className="app">
       
      <div className='container'>           
        <div className='total_amount_card' style={{ backgroundImage: `linear-gradient(to right,  rgba(253, 230, 90, 100%), rgba(204, 254, 87, 100%))`}}>
      <div className='right'>
      <svg onClick={handleClick3} xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" width="17" height="17"><path d="M21.962,12.875A10.03,10.03,0,1,1,19.122,5H16a1,1,0,0,0-1,1h0a1,1,0,0,0,1,1h4.143A1.858,1.858,0,0,0,22,5.143V1a1,1,0,0,0-1-1h0a1,1,0,0,0-1,1V3.078A11.985,11.985,0,1,0,23.95,13.1a1.007,1.007,0,0,0-1-1.1h0A.982.982,0,0,0,21.962,12.875Z"/></svg>
      </div> 
          <div className='card_text '>
          <h3 className='total_amount_heading'>{counter}</h3>
          </div>
        </div>
        <form >
        <div className='button_collection'>
          <Stack spacing={2} direction="row">       
          <Button   onClick={handleClick1}  variant="contained" className='btn_one'>+</Button>
          <Button   onClick={handleClick2}   variant="contained" className='btn_two'>-</Button>
          </Stack>
        </div>
        </form>
 
      </div>      
    </div>
    </>
  );

3 Source Code App.js

import './App.css';
import Box from '@mui/material/Box';
// import TextField from '@mui/material/TextField';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import {useState} from 'react'
 
function App() {

  const [counter, setCounter] = useState(0);
 
  const handleClick1 = () => {
    // Counter state is incremented
    setCounter(counter + 1)
  }
  
  // Function is called everytime decrement button is clicked
  const handleClick2 = () => {
    // Counter state is decremented

    if(counter === 0)
    {
      return 0;
    }
    
    else {
    setCounter(counter - 1)
    }
  }
  const handleClick3 = () => {
    // Counter state is incremented
    setCounter(counter == 0);
    window.location.reload()
  }

  return (
    <>
    <Box
      component="form"
      sx={{
        '& > :not(style)': { m: 1, width: '25ch' },
      }}
      noValidate
      autoComplete="off"
    ></Box>
 
    <div className="app">
       
      <div className='container'>           
        <div className='total_amount_card' style={{ backgroundImage: `linear-gradient(to right,  rgba(253, 230, 90, 100%), rgba(204, 254, 87, 100%))`}}>
      <div className='right'>
      <svg onClick={handleClick3} xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" width="17" height="17"><path d="M21.962,12.875A10.03,10.03,0,1,1,19.122,5H16a1,1,0,0,0-1,1h0a1,1,0,0,0,1,1h4.143A1.858,1.858,0,0,0,22,5.143V1a1,1,0,0,0-1-1h0a1,1,0,0,0-1,1V3.078A11.985,11.985,0,1,0,23.95,13.1a1.007,1.007,0,0,0-1-1.1h0A.982.982,0,0,0,21.962,12.875Z"/></svg>
      </div> 
          <div className='card_text '>
          <h3 className='total_amount_heading'>{counter}</h3>
          </div>
        </div>
        <form >
        <div className='button_collection'>
          <Stack spacing={2} direction="row">       
          <Button   onClick={handleClick1}  variant="contained" className='btn_one'>+</Button>
          <Button   onClick={handleClick2}   variant="contained" className='btn_two'>-</Button>
          </Stack>
        </div>
        </form>
 
      </div>      
    </div>
    </>
  );
}
 
export default App;

4. CSS Part For This App

.app {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
 
}
 
.container {
  background-color: #FAF9FA;
  border-radius: 8px;
  padding: 3rem;
  margin-top: 6rem;
}
.heading_text
{
  font-size: 15px !important;
  font-weight: 400;
}
.heading_two
{
  padding-top: 5px;
}
.total_amount_card
{
  height: 537px;
  background-color: #D6FF58;
  border-radius: 27px; 
}

.right
{
  float: right;
  margin-top: -2rem;
}
.card_text {
  padding-top: 40px;
}
.total_amount_heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 60px;
  font-weight: 800;
  padding-top: 10rem;
}
.total_amount_para {
  text-align: center;
  font-size: 18px !important;
  padding-top: 5px;
  color: #4B4B4B;
}
.input_area
{
  margin-top: 40px;
}
 
.input_field
{
  margin-top: 30px;
  width: 445px;
}
#outlined-basic {
  width: 410px;
}
 
.button_collection
{
  margin-top: 61px;
  margin-bottom: 1rem;
}
.btn_one {
  background-color: #F2F2F2 !important;
  width: 200px;
  height: 75px;
  color: black !important;
  font-weight: 600;
  font-size: 20px !important;
 
}

.btn_two {
  background-color: #F2F2F2 !important;
  width: 200px;
  height: 75px;
  color: black !important;
  font-size: 20px !important;
 
}


Also, Download the Background image file (mentioned below ) of the app is an image file and paste this file into your public folder also define your CSS with the background-CSS image part .

Background Image File

GitHub

You can always refer to the GitHub repository to clone the project we have created.

https://github.com/tinkugupta5/Counter_app

Conclusion

yeey!

We did it! ? Hope you like How To Build A Simple Counter App In React using hooks. For such projects do visits and comment on which project should I cover next.

Check out this BMI Calculator using react and hooks. Comment if you have any dought Regarding this project please comment in the comment box. Or join Our telegram Channel mostly available on that platform you can ask any question.

Happy coding!

People are also reading:

Blob Maker Step By Step Using HTML, CSS & JavaScript

Sticky post

Blob Maker Using HTML, CSS, and JavaScript: Step by Step

Blob Maker Step By Step Using HTML, CSS & JavaScript

Greetings to everybody. I’m glad you’re here for today’s instruction on ziontutorial. We’ll discover Blob Maker Step By Step Using HTML, CSS & JavaScript, which is a pie-shaped design. All we have to do is provide the height and width, and the program will provide the syntax needed to add that shape to the project’s CSS code. To finish this project, we’ll utilize HTML, CSS, and JavaScript in today’s session.

In order to build Blob Maker, we will need to arrange the list using a few HTML (Hypertext Markup Language) characteristics and components.

Then, using CSS (Cascading Stylesheets), we can style or design the Blob Maker project with the proper padding and alignment.

In order to make the Blob Maker project responsive from the user’s perspective, we will finally use JS (JavaScript).

With source code accessible for you to copy and paste into your own project, we give Blob Maker Step By Step Using HTML, CSS, & JavaScript projects using CSS.

Hopefully, you now have a general idea of the project.

HTML Code

<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blob Maker | ziotutorial</title>
    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css">
    <
</head>
<body>
    <div class="wrapper">
        <div class="output">
            <div id="blob"></div>
        </div>
        <div class="dimensions">
            <div>
                <label for="blob-height">
                    Height
                </label>
                <input type="number" value="200" id="blob-height">
            </div>
            <div>
                <label for="blob-width">
                    Width
                </label>
                <input type="number" value="200" id="blob-width">
            </div>
        </div>
        <div class="sliders">
            <input type="range" value="30">
            <input type="range" value="80">
            <input type="range" value="60">
            <input type="range" value="40">
        </div>
        <input type="text" id="css-code" readonly>
        <button id="copy">Copy</button>
    </div>
    <!--Script-->
    <script src="app.js"></script>
</body>
</html>

As you can see in the preceding code, we have used all essential components and attributes in order to create the framework of the Blob Maker project. Please share the CSS code for the styling and tag alignment.

CSS Code

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    outline: none;
    font-family: "Roboto Mono",monospace;
    font-weight: 400;
    color: #010120;
}
body{
    background-color: #ffffff;
    background-image: url(./bg.png );
   
  height: 500px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
 
}
.wrapper{
    background-color: #ffffff;
    width: 45%;
    min-width: 550px;
    padding: 30px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    border-radius: 8px;
}
.output{
    background-color: #eef3f8;
    width: 100%;
    min-height: 250px;
    padding: 20px 0;
    overflow: hidden;
    border-radius: 5px;
    position: relative;
    display: grid;
    place-items: center;
}
#blob{
    height: 300px;
    width: 300px;
    background: rgb(94,92,122);
background: linear-gradient(90deg, rgba(94,92,122,1) 0%, rgba(9,9,121,1) 42%, rgba(0,212,255,1) 100%);
    box-shadow: 15px 20px 30px rgba(0,0,0,0.15);
}
.dimensions{
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin: 20px 0 40px 0;
}
label{
    font-weight: 500;
}
input[type="number"]{
    height: 40px;
    width: 80px;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #a0a0b0;
    border-radius: 3px;
}
input[type="number"]:focus{
    background-color: #f1f5fa;
    border-color: #025eaa;
    color: #025eaa;
}
.sliders{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}
input[type="text"]{
    width: 82%;
    margin-top: 50px;
    padding: 10px;
    font-size: 12px;
    border: none;
    background-color: #f1eff9;
    border-radius: 3px;
}
button{
    width: 12%;
    margin-left: 4%;
    padding: 10px 0;
    background-color: #0075ff;
    border: none;
    cursor: pointer;
    border-radius: 3px;
    color: #ffffff;
    font-size: 12px;
}

Now let’s code the JavaScript part to make it responsive.

let outputCode = document.getElementById("css-code");

let sliders = document.querySelectorAll("input[type='range']");
sliders.forEach(function(slider){
    slider.addEventListener("input",createBlob);
});

let inputs = document.querySelectorAll("input[type='number']");
inputs.forEach(function(inp){
    inp.addEventListener("change",createBlob);
});

function createBlob(){
    let radiusOne = sliders[0].value;
    let radiusTwo = sliders[1].value;
    let radiusThree = sliders[2].value;
    let radiusFour = sliders[3].value;

    let blobHeight = inputs[0].value;
    let blobWidth = inputs[1].value;

    let borderRadius = `${radiusOne}% ${100 - radiusOne}% ${100 - radiusThree}% ${radiusThree}% / ${radiusFour}% ${radiusTwo}% ${100 - radiusTwo}% ${100 - radiusFour}%`;

    document.getElementById("blob").style.cssText = `border-radius: ${borderRadius}; height: ${blobHeight}px; width: ${blobWidth}px`;

    outputCode.value = `border-radius: ${borderRadius};`
}

document.getElementById("copy").addEventListener("click", function(){
    outputCode.select();
    document.execCommand('copy');
    alert('Code Copied');
});

createBlob();
Blob Maker Step By Step Using HTML CSS & JavaScript

Conclusion

yeey!

Using HTML, CSS, and JavaScript, we were able to develop our Blob Maker (Source Code) I will mention in the given below. in this tutorial we have cover Blob Maker Step By Step Using HTML, CSS & JavaScript. Hope you enjoy this tutorial

If you think this blog is useful, always visit ziontutorial by searching on Google to locate Source Codes, and follow us on social platforms also

Happy learning and thanks for visiting!

Thank You And Happy Learning!!!

Code Idea – codingartist

People are also reading:

How to Create a Responsive Navbar using ReactJS

Sticky post

ReactJS Tutorial: How to Make a Responsive Navbar

ReactJS Tutorial: How to Make a Responsive Navbar

In this article, I will share how we can build a responsive Navbar using React js. That you can use in your project.

Create a navigation bar using reactJS and using to solve the following problem. which is how to create a responsive navigation bar using react js .

The modules Required are :

  • npm
  • create-react-app

To build this navigation bar you have to install a node in your local machine because we are downloading and using some of the packages from node modules.

After installing the node just check your node version by putting this command in your terminal

node -v

If you don’t please install the latest version.

All things are done you are ready to make a project using create-react-app so open your terminal and type :

npx create-react-app my-app

Now enter the following command into the terminal to access your navigation-bar folder:

cd my-app

I hope till this point you have successfully done the structure creation. Let’s move into coding and designing our responsive navbar using react js. Just follow all the steps you will Create a Responsive Navbar using ReactJS.

Index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);


Index.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
  --primary:#3F86F8;
  --background:#f5f811;
}

.primary {
  color: var(--primary);
}

*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul{
  list-style-type: none;
}

a {
  text-decoration: none;
  color: #333;
}

.container {
  max-width: 1240px;
  margin: auto;
}

h1 {
  font-size: 3.5rem;
  line-height: 1.2;
}

h2 {
  font-size: 2.4rem;
  line-height: 1.2;
}

h5{
  font-size: 1.1rem;
  line-height: 1.2;
}

p{
  font-size: 1.2rem;
}

.btn {
  padding: 14px 32px;
  border: 1px solid var(--primary);
  background-color: var(--primary);
  color: white;
  border-radius: 10px ;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
}

.btn:hover {
  box-shadow:rgb(000/15%)0px 8px 24px;
}


input {
  padding:12px 32px;
  border: 1px solid var(--primary);
  background: transparent;
  border-radius: 24px 4px;
  font-size: 1rem;
  margin-right: .8rem;
  font-family: 'Poppins',sans-serif;

}


@media screen and (max-width:768px) {

  
h1 {
  font-size: 2.1rem;
  line-height: 1.2;
}

h2 {
  font-size: 1.5rem;
  line-height: 1.2;
}

h5{
  font-size: 1.1rem;
  line-height: 1.2;
}

p{
  font-size: 1rem;
}

.btn{
  width: 100%;
  margin: 1rem 0;
}

input {
  width: 100%;
}

}



body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
    
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

App.js

import React, {useState} from 'react'
import {FaBars, FaTimes} from 'react-icons/fa'
import './Navbar.css'

const Navbar = () => {
const [click, setClick] = useState(false)
const handleClick = () => setClick(!click)


    return (
        <div className='header'>
            <div className='container'>
                <h1 className='logo' >Logo</h1>
                <ul className={click ? 'nav-menu active' : 'nav-menu'}>
                    <li>
                        <a href='/'>Home</a>
                    </li>
                    <li>
                        <a href='/'>Featured</a>
                    </li>
                    <li>
                        <a href='/'>Earn</a>
                    </li>
                    <li>
                        <a href='/'>Contact</a>
                    </li>
                </ul>
                <div className='btn-group'>
                    <button className='btn'>Connect Wallet</button>
                </div>
                <div className='hamburger' onClick={handleClick}>
                    {click ? (<FaTimes size={20} style={{color: '#333'}}/>) : (<FaBars size={20} style={{color: '#333'}} />)}
                    
                </div>
            </div>
        </div>
    )
}

export default Navbar

Let’s work on the CSS part and which make our navbar looks awesome.

App.css

.header {
    width: 100%;
    height: 90px;
    border-bottom: 1px solid #eee;
    /* background: #fff; */
    background: #000000;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 10;
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 1rem;
}

.colors {
    color: var(--primary);
}

.nav-menu {
    display: flex;
}
.logo
{
  color: #FFE600;
   font-Size: 28px;
}

.nav-menu li {
    padding: 0 1rem;
}

.nav-menu a {
    font-size: 1rem;
    font-weight: 600;
    color: rgb(255, 255, 255);
}

.hamburger {
    display: none;
    cursor: pointer;
}


@media screen and (max-width:1240px) {
    .hamburger {
        display: flex;
    }

    .nav-menu {
        position: absolute;
        flex-direction: column;
        justify-content: start;
        top: 90px;
        right: -100%;
        width: 50%;
        height: 100vh;
        transition: 0.4s;
        z-index: 2;
        background: rgb(0, 0, 0);
        border-left: 1px solid #eee;
    }

    .nav-menu.active {
        right: 0;
    }

    .nav-menu li {
        padding: 1rem;
        width: 100%;
        border-bottom: 1px solid #eee;
    }

    .nav-menu a {
        font-size: 1.2rem;
    }
}

Save all files and start the server by using the command.

Conclusion

We succeeded! We hope you like our guide on using ReactJS to How to Create a Responsive Navbar using ReactJS. Visit ziontutorial.com for similar projects and provide comments on which project I should cover next.

Check out this react and hooks-based BMI calculator. If you have any questions, comment. Please leave a remark on this project in the space provided. You can also join our Telegram channel, which is primarily accessible there, and ask any questions there.

Coding is fun!

People are also reading:

How to Create a Landing Page in WordPress | Elementor

How to Create a Landing Page in WordPress | Elementor

Sticky post
How to Create a Landing Page in WordPress | Elementor

It’s a terrific method to save time, get more leads, and increase form conversions to create a dedicated landing page in WordPress with Modern design. We will learn how you can make a landing page in WordPress using Elementor easily .

In this Tutorial, we’ll demonstrate how to use WordPress to create a landing page with an amazing layout.

⭐ Video Tutorial

In the above Tutorial, you will learn about how you can create a very simple and modern website landing page using elementore . I hope you like the whole tutorial .

⭐ Output

⭐ Conclusion

via GIPHY

We did it! ? Hope you likeHow to Create a Landing Page in WordPress | Elementore. For such projects do visits and comment on which project should I pick next.

Check out this How to Install WordPress on Localhost | Xammp. Comment if you have any dought Regarding this project please comment in the comment box. Or join Our telegram Channel mostly available on that platform you can ask any question.

Happy coding!

People are also reading:

Best ReactJS Projects For Beginners

Building a Simple interest calculator using React Hooks

Sticky post

Are you starting with React? I will be Building a Simple interest calculator using React Hooks. You can use this simple interest calculator for your personal project and host many calculators like this.

Simple interest calculator using React Hooks

What are we building? ?

we are going to make very basic simple interest calculator using react hooks. Basically, that will take user input and also we going to build a form and display the result along the way. Additionally, I wanted to show off the React hooks API, which lets function components use lifecycle methods and have a state behind the scenes. The sole method for managing state in earlier iterations of React was through class components. This results in a significantly improved development experience.

Design Assets Link? ?

Download: Link

YouTube Tutorial

Shall we start? ?

Section 1 – Create-React-App
Section 2 – Add some CSS ( App.css )
Section 3 – Add Logic and state ( App .js )
Section 4 – Conclusion

Section 1

We don’t need anything complicated to make this project so we’ll use the boilerplate Create-React-App gives us. To create the project, navigate to a directory of your choice and type:

npx create-react-app simple_interest_calculator

You may access the project after create-react-app has finished executing.

cd simple_interest_calculator

To launch the project in Visual Code (or any editor of your choice):

code .

Let’s install Material UI is a library of React UI components that implements Google’s Material Design. So that we can use their components. By following this doc here I am using npm you can use either yarn too for installing this

npm install @mui/material @emotion/react @emotion/styled

Section 2 ( App.css )

The emphasis of this tutorial won’t be on styling, so feel free to add additional styling or copy this CSS into your App.css if you’d like. You may also see examples of how I used my classes on my GitHub repository.

src/App.css
.app {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: #0e0e0e;
}

.container {
  /* box-shadow: 0px 0px 12px rgb(255, 255, 255); */
  background-color: #FAF9FA;
  width: 519px;
  /* height: 672px; */
  border-radius: 8px;
  padding: 3rem;
}
.heading_text
{
  font-size: 10px;
  font-weight: 400;
}
.heading_two
{
  padding-top: 5px;
}
.total_amount_card
{
  width: 445px;
  height: 138px;
  background-color: #D6FF58;
  margin-top: 22px;
  
}
.card_text {
  padding-top: 40px;
}
.total_amount_heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 800;
}
.total_amount_para {
  text-align: center;
  font-size: 12px;
  padding-top: 5px;
  color: #4B4B4B;
}
.input_area
{
  margin-top: 40px;
}

.input_field
{
  margin-top: 30px;
  width: 445px;
}
#outlined-basic {
  width: 410px;
}

.button_collection
{
  margin-top: 61px;
  margin-bottom: 1rem;
}
.btn_one {
  background-color: #1F1F1F;
  width: 200px;
  height: 75px;

}

Section 3 ( App .js )

Let’s make our form using material UI in app.js. Here we will make all your logic here .

import './App.css';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import {useState} from 'react'

function App() {

  const [num1,setNum1] = useState(0);
  const [num2,setNum2] = useState(0);
  const [num3,setNum3] = useState(0);
  const [Add,setAdd] = useState("");

  const calcSum = (e) => {
    e.preventDefault()
    console.log(e);

    if(num1===0 || num2===0 || num3===0)
      {
        alert("please enter a valid weight and height")
      }
      
      else
      {
        let Add = parseInt(num1)*parseInt(num2)*parseInt(num3)/100;
        console.log(typeof(Add));
        setAdd(parseInt(Add))
      }

  }

  const handleClick = (e) => {
    setAdd(0);
    window.location.reload();

  }

  return (
    <>
    <Box
      component="form"
      sx={{
        '& > :not(style)': { m: 1, width: '25ch' },
      }}
      noValidate
      autoComplete="off"
    ></Box>

    
   
    
    <div className="app">
      
      <div className='container'>
        <div className='heading_text'>
          <h1 className='heading_one'>Simple Calculator</h1>
          <p className='heading_two'>Calculate your simple interest Easily</p>
        </div>
        <div className='total_amount_card'>
          <div className='card_text '>
          <h3 className='total_amount_heading'>₹ {Add}</h3>
          <p className='total_amount_para'>Total simple interest</p>
          </div>
        </div>
        <form onSubmit={calcSum}>

        <div className='input_area'>
            <div className='input_field'>
            <TextField type="number" value={num1 || ""} onChange={(e) => setNum1(e.target.value)} id="outlined-basic" label="₹ Principal amount" variant="outlined" />
            </div>
            <div className='input_field'>
            <TextField type="number" value={num2 || ""} onChange={(e) => setNum2(e.target.value)} id="outlined-basic" label="Rate of interest (p.a) %" variant="outlined" />
            </div>
            <div className='input_field'>
            <TextField  type="number" value={num3 || ""} onChange={(e) => setNum3(e.target.value)} id="outlined-basic" label="Time period ( Yr )" variant="outlined" />
            </div>
        </div>
        <div className='button_collection'>
          <Stack spacing={2} direction="row">       
          <Button type='submit' className='btn_one' style={{backgroundColor: 'black'}} variant="contained">Calculate</Button>
          <Button className='btn_one'  onClick={handleClick}  variant="outlined">Reset</Button>
          </Stack>
        </div>
        </form>

      </div>      
    </div>
    </>
  );
}

export default App;

Section 4 ( Conclusion )

yeey!

We did it! 😀 Now you can make any calculator  for your next project. It works on mobile too! I hope you like Building a Simple interest calculator using React Hooks. for such projects do visits and comment on which project should I cover next.

Check out this BMI Calculator using react and hooks. Comment if you have any dought Regarding this project

Happy coding!

People are also reading:

React Router v6 in React Js

React Router v6 in React Js With Complete Project Of 2022

Sticky post
React Router v6 in React Js

React Router is a library for routing in React js. It allows the navigation between views of various components in React Application, Which allows changing the browser URL. In this blog, we will learn about react routing or navigate through different pages by using react-router-dom. Last but not least we will make React Router v6 in React Js With a Complete Project in complete explanation.

Let’s create a simple React application to understand the flow of react-router.
In this application, the components would be the Home component, About component and the last one is Contact component so that we can jump or navigate to different components easily. You can refer to the below example of how it looks at the end of this tutorial. Or you can Follow the Youtube tutorial also.

YouTube Tutorial Video :

Let’s start making Our application by jumping to the first step


Setting Our Environment of React Application:

Create a React Application Using create-react-app. Let’s call it ziontutorial and you can use any name instead of this name. In the below example, I am using git bash you can also use cmd ( normal command prompt ) inbuilt into your system.

After the Development environment is ready. Now let’s move into the folder and open the terminal of your project and install this React Router in your Application.

Let’s Install the React Router Dom in your Application.

App.js

Here you have to import these important dependencies for performing the react routing[ import { BrowserRouter, Routes, Route } from ‘react-router-dom’; ] By importing these components you are able to perform routing easily.

import './App.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Navbar from './components/layout/Navbar';
import Home from './components/pages/Home';
import About from './components/pages/About';
import Contact from './components/pages/Contact';

function App() {
  return (
    <div className="App">
      
       <BrowserRouter>
       <Navbar/>
       <Routes>
        <Route path="/" element={<Home/>}/>
        <Route path="/about" element={<About/>}/>
        <Route path="/contact" element={<Contact/>}/>
       </Routes>
       </BrowserRouter>
       
    </div>
  );
}

export default App;

Here is the List of React Router Components

  • BrowserRouter: To keep your UI in sync with the URL, BrowserRouter is a router solution that makes use of the HTML5 history API (pushState, replaceState, and the popstate event). All of the other components are stored in the parent component.
  • Routes: Routes is the new component introduced in version 6. Switch is replaced by this routes component.
  • Route: it conditionally shows components and it works when routes match to the rendered components.
  • Links: The Links component facilitates navigation inside the application by creating links for various paths. It functions like an anchor tag in HTML.

Now let’s make other components Like Home.js, About.js, and Contact.js so that we can jump over different components by using react-router-dom.

Navbar.js

import React from 'react'
import {Link,NavLink} from 'react-router-dom';

// import Navbar from './Navbar';

const Navbar = () => {
  return (
    <div className='navbar_start'>
        
     <nav className="navbar navbar-expand-lg  p-4">
  <div className="container-fluid">
    <NavLink className="navbar-brand" to="/">

       

</NavLink>
    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span className="navbar-toggler-icon"></span>
    </button>
    <div className="collapse navbar-collapse" id="navbarNav">

      <ul className="navbar-nav">

        <li className="nav-item">
          <NavLink className="nav-link active" aria-current="page" to="/">Home</NavLink>
        </li>

        <li className="nav-item">
          <NavLink className="nav-link" exact to="/about">About</NavLink>
        </li>

        <li className="nav-item">
          <NavLink className="nav-link" exact to="/contact">Contact</NavLink>
        </li>
       
      </ul>
    </div>
    <Link className='btn btn-outline-primary' to='/user/add'>
        Add User
    </Link>

  </div>
     </nav>
     
    </div>
  )
}

export default Navbar

Home.js

import React from 'react'

const Home = () => {
  return (
    <>
    <div class="px-4 py-5 my-5 text-center">
    

    <h1 class="display-5 fw-bold">Hellow People</h1>
    <div class="col-lg-6 mx-auto">
      <p class="lead mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
      <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
        <button type="button" class="btn btn-primary btn-lg px-4 gap-3">Getting Started</button>
        <button type="button" class="btn btn-outline-secondary btn-lg px-4">Contact-Us</button>
      </div>
      
    </div>
  </div>
  </>
  )
}

export default Home

About.js

import React from 'react'

const About = () => {
  return (
    <>
    <div>
    <div className="container">
    <h1 className="mt-5">About Us</h1>
    <p className="lead">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    
  </div>
   
      </div>
    </>
  )
}

export default About

Contact.js

import React from 'react'

const Contact = () => {
  return (
    <>
    <div className='container form-signin w-100 m-auto text-center px-4 py-5 my-5 text-center'>
     <div className='row'>
    <main className=" ">
  <form>
  
    <h1 className="h3 mb-3 fw-normal">Please sign in</h1>

    <div className="form-floating">
      <input type="email" className="form-control" id="floatingInput" placeholder="name@example.com"/>
      <label for="floatingInput">Email address</label>
    </div>
    <div className="form-floating py-5">
      <input type="password" className="form-control" id="floatingPassword" placeholder="Password"/>
      <label for="floatingPassword">Password</label>
    </div>

    <div className="checkbox mb-3">
      <label>
        <input type="checkbox" value="remember-me"/> Remember me
      </label>
    </div>
    <button className="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
    <p className="mt-5 mb-3 text-muted">© 2017–2022</p>
  </form>
</main>
</div>
</div>
</>
  )
}

export default Contact

Route: Route component will now help us to establish the link between the component’s UI and the URL. To include routes to the application, add the code given below to your app.js.

Also, match or type the same Url in navbar.js with to=”” with same as path too .

Finally Output Look like this I hope you like this blog and if you have any problem regarding this project you can connect and comment in the comment box.

Conclusion

That’s it congratulation you did it

I hope you enjoyed this little project We used react router dom to navigate to different URL . By making React Router v6 in React Js With Complete Project project you learn new things.

For more tutorials like this, you will follow our youtube channel and subscribe to our Instagram handler. I hope you like the video also which I have uploaded on youtube please like it and spread it with your friends too.

Happy Coding! ?

People are also reading:

How to connect with database locally with mongo DB | MERN

Sticky post
How to connect with database locally with mongo DB

In this tutorial, we will learn how to connect databases locally with mongo DB . if you want to learn new things in react do comment in the post which post you would like to learn. So without wasting any time let’s start the how to connect with the database locally with mongo DB | MERN.

Let’s start with the first step to connect with mongo DB locally.

First, we have to pass the process file.

const mongoose = require("mongoose");
require("colors");

//connectDB function // this function is basically used to connect with the data base and the make a connection with the data base locaally
const connectDb = async () => {

    try {
    const conn = await mongoose.connect(process.env.MONGO_URI);
    console.log(`MongoDB Connected ${conn.connection.host}`.bgYellow);
    } 
    catch (error) {
        console.log(`Error : ${error.message}`.bgRed);
        process.exit(1);
    }

};


module.exports = connectDb;

Conclusion

So there we have it. If you want to easily connect your database do follow these above steps. To learn more about mongo DB and other tutorials do comment on this . Hope you learn a lot from this.

People are also reading:

The Best Time to Post on Instagram in 2023 - Later

The Best Time to Post on Instagram in 2023 – At It Best

Sticky post
he Best Time to Post on Instagram in 2023

The topic of when to publish on Instagram in order to increase traffic to one’s page and attract more visitors is one that has received a lot of excitement among content producers and online business owners.

For producers, deciding what to develop in terms of content and what is popular and what to produce in order to attract more original viewers may be very stressful. Knowing when to post minimizes the creators’ load.

I spent a significant amount of time researching and making my own mistakes.
As a result, I’ve gathered some advice and knowledge regarding the ideal posting times.

For more organic traffic to your business page or your niche, we’ll look at when to post on Instagram in this blog.

you can also read ina precise manner with this blog

When Should I Post On Instagram?

Because each time zone is unique, it encompasses the entire globe. Knowing which segment of a worldwide audience you’re attempting to attract is crucial.

Once you figure out which specific part you’re targetting Now, think about what people do daily basis according to their timeline

First: When do people usually wake up and what’s the first thing the majority of people do? Scroll on their search feed for something or maybe what most people do when they first wake up is browse the search feed or perhaps the reels for something fresh to discover on reels for something new to find.

Therefore, between 7-8 in the morning can be a perfect time to post on Instagram.

Using a smartphone while eating lunch is another instance of individuals doing so. Posting between 11 and 1 p.m. while individuals are taking their lunch break will assist in guaranteeing that your post rises to the top of their feeds because lunch breaks often occur at the same time across all time zones.

The Ideal Moments To Post On Instagram

Another thing to keep in mind while publishing is that Instagram’s algorithms constantly prioritize promoting the most recent posts, making it extremely important to understand the period when your users are most active.

Here is a chart that shows what day and what time to post.

Monday6 a.m., 11 a.m., 1 p.m.
Tuesday8-10 a.m., 2 p.m.
Wednesday9-11 a.m.
Thursday11 a.m.-2 p.m., 7 p.m.
Friday10 a.m.-12 p.m., 2-4p.m.
Saturday8-11 a.m.
Sunday6-8 p.m.

When Is The Best Time To Post Reels To Instagram

In line with the TikTok age, video material is becoming more popular. Try uploading reels during these times if you want to increase audience engagement with your content:

Monday6 a.m., 10 a.m., 10 p.m.
Tuesday2 a.m., 4 a.m., 9 a.m.
Wednesday7 a.m., 8 a.m., 11 p.m.
Thursday9 a.m., 12 a.m., 7 p.m.
Friday5 a.m., 1 p.m., 3 p.m.
Saturday11 a.m., 7 p.m., 8 p.m.
Sunday7 a.m., 8 a.m., 4 p.m.

People are also reading:

iPhone 13,12,11 at Flipkart Big Billion Day (2022): Expected price, discounts, and more

iPhone 13,12,11 at Flipkart Big Billion Day (2022): Expected price, discounts, and more

Sticky post

On September 23, 2022, the Flipkart Great Indian Festival is anticipated to provide a significant discount on the iPhone 12. It’s interesting to note that Apple is presently offering a mouthwatering discount on the device, which is priced at INR 50,900. The problem is that there is only one colour and one variety available. But with the iPhone 12, this is one of the largest reductions available.

Prior to the Flipkart Great Indian Festival, the price of the iPhone 12 falls to a record low (2022)
If one chooses the purple hue, the 64 GB version of the iPhone 12 is now offered for a fixed price of INR 50,900. There are several colours available, but they cost a little extra. The 128 GB and 256 GB models are equivalent in this regard.

For an iPhone 12, this is one of the biggest reductions outside of regular deals. Additionally, clients can save money on the gadget by using cards from partner banks to make their payments. Given that the iPhone 14 is currently on sale in stores, this appears to be a regular markdown from Apple.

iPhone 13,12,11 at Flipkart Big Billion Day (2022): Expected price, discounts, and more

This brings up a crucial query: Is it worthwhile to purchase the iPhone 12 when it’s on sale? Given how effective the device is, the response should be affirmative. The 12th generation Apple flagship can still outperform most phones because the company has always produced its models early. Despite having a relatively expensive base price, the current discount makes it quite intriguing.

However, there are certain more factors that a buyer should think about. First off, only purple offers the highest discount, whereas the other colours offer smaller savings.

Second, the deals on the 128 GB and 256 GB editions aren’t good enough and only provide large discounts on the 64 GB variant. However, the primary justification for waiting will be the

Buy iPhone 12 Under 30,000 at the Lowest Of The Price

Sticky post

Click Here To Buy At The Lowest Price

On September 23, 2022, the Flipkart Great Indian Festival is anticipated to provide a significant discount on the iPhone 12. It’s interesting to note that Apple is presently offering a mouthwatering discount on the device, which is priced at INR 50,900. The problem is that there is only one color and one variety available. But with the iPhone 12, this is one of his prompts a discussion among prospective purchasers about whether they ought to take advantage of the current bargain or hold off until the Flipkart Great Indian Festival (2022), which is scheduled to begin on September 23.

Currently, if one chooses the purple hue, the 64 GB iPhone 12 model may be purchased for a fixed price of INR 50,900. There are additional colors offered, however, they are slightly more expensive. The 128 and 256 GB models also fit this description.

With regard to an iPhone 12, this is one of the biggest reductions outside of regular deals. Additionally, clients who use credit cards from partner banks can acquire the item for less money. Given that the iPhone 14 is now available in stores, it’s hardly unexpected that this appears to be a regular markdown from Apple. This brings up a significant query: Is it worthwhile to purchase the iPhone 12 at its current price? Given the quality of the gadget, the answer should be affirmative. The 12th generation can still outperform most phones because Apple has always produced its flagships earlier than expected. Although it may have a very high base price, the current discount makes it rather intriguing.

The buyer should still take a few things into account, though. First off, only the purple option is offered with the highest discount, while the other choices have smaller ones. The deals on the 128 GB and 256 GB varieties are insufficient, and only significant reductions are offered on the 64 GB variant. The rumors, tIf rumors are accurate, the iPhone 12 will be discounted even more during the Flipkart Great Indian Festival (2022). Although the confirmed pricing hasn’t been disclosed, it is anticipated to be less than INR 40,000. There is no indication to rule out the possibility of such a discount, but it cannot be confirmed until the start of the sale. though, will be the primary motivation for waiting.

There is no denying the Apple iPhone 12’s superior quality, which has met expectations on a number of levels. The timing of the current discount is a little wrong, though, and if anything, it might be a sign of a bigger discount to come. It might be prudent to wait two more days before observing the updated pricing determined by Flipkart India.

5 Crucial SEO Tips For Ecommerce Websites

Sticky post

5 Crucial SEO Tips For Ecommerce Websites

Google offers these suggestions to help your website perform better in search results. Keep these steps in mind when building your e-commerce website.

Throughout these steps, google encourages retailers to use the google merchant center because it allows the merchants to upload product data.

Data has been collected more accurately from Merchant Center feeds than from Googlebot crawling your website because they are made to be read by computers.

Confirm Product Indexing

5 Crucial SEO Tips For Ecommerce Websites

Google bots can miss your product pages while crawling if they aren’t linked to your other pages on your e-commerce store. Take it as an example only on-site search results can be used to access some product pages

You can make sure that google bots crawl through all your product pages by using tools such as an XML sitemap and google merchant center.

Doing this will allow google to discover all the products on your e-commerce website.

Add ALT Tags To Your Images

5 Crucial SEO Tips For Ecommerce Websites

Add alt tags to all your images used on your e-commerce store. This not only just improves your SEO by allowing google bots to scan all the alt text included in your images,

However, it also aids those who are blind or have low vision in understanding your graphics.

Cut Down on Price and Availability Lag

5 Crucial SEO Tips For Ecommerce Websites

Google visits your website and crawls the pages on its own schedule. As a result, Googlebot could not discover modifications to your website until the subsequent crawl.

When a site changes, like a product running out of stock, delays might cause search results to lag behind. The best course of action would be to try to reduce discrepancies in pricing and availability information between your website and Google’s interpretation of your site as a result of time lags.

Google recommends keeping merchant center product feed pages updated on a more consistent schedule.

Increase The Impact Of Your Meta Descriptions.

5 Crucial SEO Tips For Ecommerce Websites

Meta descriptions can help a website show up in social media and search results, luring users to go through and visit it.

Write a more persuasive meta description in order to boost CTRs for organic search.

Additionally, they might aid in the comprehension of a web page’s purpose by search engines like Google.

One of the various SEO tools you may use to do a site audit may flag or warn you about duplicate or missing meta descriptions.

This could imply that as part of your SEO plan, you need to make sure that each page has a distinct meta description.

Although improving your CTR can, this won’t have a direct effect on your rankings.

Prioritize long-tail keywords.

Concentrate on long-tail keywords. Long-tail keywords are longer, more precise keyword combinations that site visitors are more likely to utilize.

Long Tail Keywords have a higher potential to drive a more organic amount of traffic to your e-commerce store.

For now, this blog is at an end. For your e-commerce store, we covered the top 5 SEO tips. I sincerely hope that this was beneficial to you. For more articles like this, be sure to visit our website [https://ziontutorial.com]

People are also reading:

Top Free Crucial WordPress Plugins

Top Free Crucial WordPress Plugins For Ecommerce Store

Sticky post

Free Crucial WordPress Plugins For Ecommerce Stores 

Were we looking for Free Crucial WordPress Plugins For Ecommerce Stores? I got you, when it comes to finding a plugin we must do our research because we don’t know how the plugin actually works and if it’s free or not. In this blog, we’ll see some free and crucial plugins we need while building our e-commerce website.

WooCommerce 

Free Crucial WordPress Plugins For Ecommerce Store

 WooCommerce is a well-known plugin and is used so often. it’s a free plugin and there is a premier version for woo-commerce. Plugin quickly became famous for its simplicity and all the features it provides. WooCommerce is specifically used to turn your WordPress website into an online store. It helps to customize your website to the next level with just some little work. So, if you’re looking to build your own customized online store woo-commerce is a plugin to go with. it’s one of the Free Crucial WordPress Plugins For Ecommerce Stores

Elementor 

Free Crucial WordPress Plugins For Ecommerce Store

Elementor is a very crucial and well-known plugin used to build e-commerce stores it allows you to customize any WordPress theme without coding. Elementor is a plugin that allows WordPress users to create and edit websites by just the drag-and-dropping technique. It’s the easiest and the best plugin one could ask for easy to use and learn. Elementor is a free plugin and has a premier version “Elementor pro” too which provides some extra features that the free doesn’t offer. So, if you need to build your own WordPress website or want to customize the existing one Elementor is good to go with. it’s one of the Free Crucial WordPress Plugins

TI WooCommerce Wishlist

Free Crucial WordPress Plugins For Ecommerce Store

When it comes to creating a better e-Commerce website we need every single feature that will make things easier for the user to use the website and they can shop easily. TI WooCommerce Wishlist is a WordPress free plugin that allows providing a wish list option to your customers that make the work easier for the customers. On the other hand, TI WooCommerce Wishlist is easy to use and easy to operate. TI WooCommerce Wishlist provides you an add-to wishlist option where people can put the product they like and purchase it later. it’s one of the Free Crucial WordPress Plugins

Variation Swatches for WooCommerce

Variation Swatches is another must-have WordPress plugin when building an e-commerce store. It allows you to give variations of your product if u have the same product in different colors instead of creating different products for every color you can give variations options to your customers this is will make the work easier for you and for the customers. It is no complicated work it’s just dragging and dropping things. So, Variation Swatches for WooCommerce is one plugin you should have when building an e-commerce store.

Contact Form 7

Multiple contact forms can be managed by Contact Form 7, and you can easily mark up the forms and an email’s contents. The form includes features like CAPTCHA, Akismet spam filtering, and Ajax-powered submission. The service provider may receive the IP address and other personal information submitted in a contact form submission if you activate specific plugin capabilities.

This is all for this blog u only need these plugins to make an attractive e-commerce store.

People are also reading:

React JS Mini-Project Creating Simple Sum Calculator

React JS Mini-Project #2 Creating Simple Sum Calculator | Absolute beginners useState Hook & Conditionals ??

Sticky post
React JS Mini-Project Creating Simple Sum Calculator
Build A Sum Calculator in React JS – use State Hook & Conditionals.

In this half of the tutorial, we will focus on the fronted part of the application. The code for this React JS Mini-Project Creating Simple Sum Calculator project is on my git Github if you want that source code just comment in the comment box . we make these projects because I decided to take a deep dive into reacting js hooks part, Gain a better understanding of its use case and figure out how to make it play nice with these technologies and I like to play with it so I decided to make this simple project with react which is Creating Simple Sum Calculator using React js | Mini React Js Project. in my point of view if you want to learn something then you have to make something so that you have a better understanding of that technologies and clear understanding of that technologies. -after that write about it and teach about it to some so that other people can gain knowledge and they figure out and do some suggestions for you.

We are going to build a simple React JS Mini-Project Creating Simple Sum Calculator | Mini project. We will be using Hooks’ concept in this project like how to use state and conditional statements together so that you can figure out the concept and better understanding this jargon.

Lets get to work !

we are going to need to install a our application with these simple commands . and then start our application building. create a new folder and run the following commands in your terminal:

npx create-react-app  simple_sum_calculator

This is our application Folder structure after making this lets move to another part of our application building part.

Now place the following code on your index.html file.

<!DOCTYPE html>
<html>
    <head>
        <title>BMI Calculator</title>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

Let’s jump into the app.js part where all the logic of our application

App.js

let’s jump into our App.js where all the magic happens and we discuss our application logic .

import { useState } from 'react';
import './App.css';

function App() {
  
  const [num1, setNum1] = useState()
  const [num2, setNum2] = useState()
  const [Add, setAdd] = useState('')

    const calcSum = (event) => {
      event.preventDefault() 
      console.log(event);
      if(num1===0 || num2===0)
      {
        alert("please enter a valid weight and height")
      }

      else
      {
        let Add = parseInt(num1)+parseInt(num2);
        console.log(typeof(Add));
        setAdd(parseInt(Add))
      }
    }

  return (
  <div className='app'>
    <div className='container'>
      <h2 className='center'>Sum Calculator</h2>
      <form onSubmit={calcSum}>
        <div>
        <label>Number 1</label>
        <input type="text" placeholder='Enter Number1 value' value={num1} onChange={(e) => setNum1(e.target.value)} />
        </div>
        <div>
        <label>Number 2</label>
            <input type="text" placeholder='Enter Number2 value' value={num2} onChange={(e) => setNum2(e.target.value)} />
        </div>
        <div>
            <button className='btn' type='submit'>Submit</button>
        </div>
      </form>
      <div className='center'>
          <h3>Your Sum is: {Add}</h3>
      </div>
    </div>
  </div>
  );
}

export default App;

App.css

let’s make this form beautiful using CSS. Just copy the below code and make your style work. So this is the Simple Sum Calculator where we can implement our CSS to make this application interactive.

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans', sans-serif;
}

.app {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: #E3EFEB;
}
.container {
  box-shadow: 0px 0px 12px rgb(255, 255, 255);
  background-color: #0F1217;
  border-radius: 8px;
  padding: 3rem;
  
}

h2,h3
{
  color: white;
}

label
{
  color: white;
  font-size: 13px;
}
input {
  width: 100%;
  font-size: 1rem;
  padding: 15px 4px;
  margin: 8px 0;
  border-radius: 6px;
  outline: none;
  border-top-style: hidden;
  border-right-style: hidden;
  border-left-style: hidden;   
  background-color: rgb(241, 241, 241);
}

.btn {
  display: block;
  width: 100%;
  font-size: 1.2rem;
  margin: 8px 0;
  padding: 15px 0;
  background-color: #0077EE;
  color: #fff;
  border: 1px solid #333;
  border-radius: 8px;
  cursor: pointer;
}
/* unvisited link */
.btn-outline {
  background-color: #fff;
  color: #A6BCDA;
}
.center {
  text-align: center;
  margin: 24px 0;
}
p {
  margin: 10px 0;
}
.img-container {
  text-align: center;
}
.img-container img {
  height: 200px;
}

Conclusion

That’s it congratulation you did it

I hope you enjoyed this little project We used use state hook to manage the state of the application . By making React JS Mini-Project Creating Simple Sum Calculator project you learn new things.

For more tutorials like this, you will follow our youtube channel and subscribe to our Instagram handler. I hope you like the video also which I have uploaded on youtube please like it and spread it with your friends too.

Happy Coding! ?

People are also reading:

How To Fix MySQL Shutdown Unexpectedly Error

Sticky post

When we download XAMPP sometimes we all face a problem that MYSQL shuts down unexpectedly error and it creates obstacles when we make a database on PHPmyadmin. This prevents us from making our local host website. In this blog, I’ll show you how to prevent this problem step by step, so it will be easier for you. Let’s learn MySQL Shutdown Unexpectedly Error.

You Might Be Getting This Problem

STEP 1

Cut the xampp application and open the disk where your main xampp file is located. it’s better if it’s in local disk c because it’s easy to locate.

STEP 2

After Opening xampp you’ll see MySQL. Click on MySQL and then you’ll see backup. Click on backup and copy all the files from backup

STEP 3

After copying all the files from the backup paste all the files into the folder named DATA and something like ‘Destination has files with the same name ‘ will pop up make sure to click on replace the files in the destination.

Now cut xampp and start it again it will start working 🙂

People are also reading:

#1 LIVING YOUR LIFE TO THE FULLEST (CUMIN CANDIES)

Sticky post

(A Short Note on Cumin Candies:          

  This is going to be a collection of topics that I find interesting to discuss upon. Most of us would have had cumin candies. Yes…. I am not talking about cotton candies like every other soul out there, who take immense pleasure in sharing their sweet childhood memories which consists of cotton candies and their thrilling exploits related to it.  But I am talking about CUMIN candies here. Some of you may wonder why out of all the candies, I have chosen Cumin candies to discuss about, right. Well even I don’t know why I chose that at first.

If you have had cumin candies in your life you would definitely know its taste. Cumin seeds have a bitter yet warm taste by nature that refreshes the taste buds. In other words, life is also a cumin candy. Life is sometimes bitter yet it brings a warm feeling inside our soul when we think of the mistakes we had done in the past that was bitter. We learn from our mistakes, and without mistakes no one will be able to learn what success and righteousness tastes like.

            The candy coating only adds to its wonderful taste and provides a taste that is a mixture between sweet and bitter. The colorful rainbow coating is just like the different memories of our life. Each color brings out a unique and different memory. When you take a handful of the small cumin candies you will have a combination of various colors in your palm just like your life, sometimes it brings out the child in you or your longingly treasured childhood memories.

            Life is not always sweet or pleasant. Cumin seeds are coated with colors and sweetness just to atone for its bitterness. Life is also a cumin candy, it has bitter moments and those are buried inside our hearts and what we cherish are the little moment of sweetness and colorful happiness that it affords. But we know that there are bitter memories too, and we happily accept that, because no one can become perfect without facing problems and also no one can win fate. The memories might be bitter, but they define who we are and how much can we withstand against the tsunami called fate. Life is a game of balance between good and bad. Being good brings you so many hardships but in the end it is fruitful.

            Thus, I will write about both the bitter and sweet things that make us more of a human and they may be some random thoughts or one’s own problems. I am no master in writing or discussing issues, but I will try my best to express my thoughts and be as objective as I can be about it. After all I am a human and humans are bound to make mistakes, so pardon me in advance if you find my words inappropriate. And for those who think I make no sense, let me be clear, these are my thoughts based on the perspective of how I see life in general. So no hard feelings. Also everything I write with the hashtag would be under this collection)

#1 LIVING YOUR LIFE TO THE FULLEST

Introduction:

            This is the first ever article under the collection Cumin Candies. ‘Life is never easy. We have to take what it gives and try to make the best out of it’. This is what we have been hearing for so many historical years and the same will be orchestrated for the following centuries if we do not step up and voice out our opinion. Not everyone is meant to be with us all throughout our life, so let us stop trying to be in the good books of others and live our life according to our wish. I know life is not easy. But we cannot just sit quietly in a corner and expect it to notice us so it could shower its wonderful blessings upon us. We have to make the world see who we are and we deserve much more than what the world thinks we can have.

Mistakes Don’t Define a Person, Their Character Does:

            We are not saints and we do mistakes sometimes, to be frank many times. We should take the responsibility for what we have done; try to correct our mistakes, with the purpose of not repeating it, and not to please someone. The only person we ought to please is ourselves. The person who is inside you should accept that you are a better person than anybody else around you. This quality cannot be obtained by earning money or living a high-five sophisticated life climbing up the social ladder. The mistake every one of us do is that we expect something from people who don’t give a damn about us, and that is where we go wrong. The society never gives anything to a person, who expects it. In fact it never gives a damn about people’s inner feelings and their actual worth.

            Their notion of thoughts does not sit parallel with the thoughts of righteousness and accountability. All they care about is the superficial wealth of a person, how much is his property worth and all. They fail to notice the real worth of a person that can only be brought out by kind words and supportive nature. You don’t know what wonders can a few kind words make in a person’s life. We don’t know the power of words.

Being Kind Makes You Strong:

            Being kind to someone is not your weakness; in fact it is your greatest strength. If you can be kind to a stranger who knows nothing about you and who you know nothing about, you have the patience to achieve your ultimate goal in life. In this fast moving instant world, everyone wants to match the pace of sophistication, thereby ignoring everything else around them, concentrating only on their own welfare and well being. We would not lose anything if we spend a minute or two to pause and ask someone dear to us how their day was or knowing about their welfare. We would not miss anything in life if we wish someone a good day with a genuine smile on our face. It would help you grow as an individual and make you stand straight amongst the entire hunched crowd. Being kind does not mean that you have to give them money or do any monetary help. You could just always tell them that it is going to get better and everything happens for a reason and stand beside them to give them your moral support, instead of watching them suffer. It would bring a new ray of hope in their heart and would also make you feel good.

The Emphatic Soul:

            In this mechanic world, compassion is something that is rarely seen in people these days. Empathy is often considered as showing someone pity. But being emphatic means that you are able to understand the pain the person is going through (be it mental or physical) even though you have not suffered from it. Let us be genuine here, nobody cares a heck about the other person’s feeling at all. All we want to do is to show that we care about others to the virtual world which is not even real. We record videos and click pictures of the victimized people and share it on our social media handles to gain tons of likes and comments, but not even a single soul would feel the actual need to empathize with the person undergoing the pain. Are we all leading a mentally healthy life? Or are we just showcasing ourselves to be well-mannered, compassionate dummies, who only act on our human tendencies to get futile likes that are worth nothing.

The Depth of Human Emotions:

            When you understand the pain a person is going through, you not only understand their suffering, you place yourselves in their shoes and you struggle to find a solution and to be any form of comfort to them. In this process, you discover the depth of your own emotions and realize that you are capable of providing comfort to the wounded souls even when you have not received the same comfort from others, because you do not want them to go through what you went through. The depth of a human emotion is that when you truly manifest it, then it provides the desired result. A beautiful fact about being kind and being human is that you would not want anyone else to go through the sorrow you felt, even if they were the very ones to hurt you in the first place. Here I am not asking you to blindly accept what the world throws at you to hurt or be numb about it. You should stand up for yourself first, only then you can stand for others.

Real Life Is Far From Social Media:

In today’s world, everyone desires to be a better person by posting their likes and dislikes on the social media, trying to attract as much futile attention as they can just to satisfy their childish whims. But it is not going to bring anything to you. It would only make you feel lonelier and distance you further from the physical world more than you already are. The world does not give a damn about your likes and dislikes. Being immersed in the technical gadgets and unlimited network, we have forgotten the feeling of real happiness. Real happiness does not lie in showcasing your wealth or posting your pictures online. It comes from within. The mechanism of the modern brains has completely forgotten what it means to have real feelings. In the long run, if we continue to behave like this, we might even forget to smile or laugh and just carry on with our mundane tasks like a robot. There is a reason why we call ourselves human. So let us not sit around wasting our time in phones and gadgets and live our life to the fullest.

Mental Stability:

            Mental stability is a very sensible topic to deal with. I believe nobody is a master when it comes to reading the mind be it your own or others. Being mentally stable is more important that being financially stable. If you can control your mind to be calm and understanding at all times then you can command the world. A person who can control and stabilize his mind can do anything in this world. The feel you get when you know that you have someone to watch your back and you have someone to share your emotions without being judged and you have someone to pick up the broken pieces and mend you back to shape, is surreal.

You would be ready to conquer the world, because you know they are right beside you to guide you through it and be your moral support. Even if you have no one to stand with you, you are your very own person who is very much capable of solving your problems on your own. It is ok to have no one with you at times, but it is not ok to think low of yourself or worse not crying in a corner. According to me standing up for yourself with your head held high is a way of being mentally stable. The universe attracts the vibe you pass on and brings back the same vibe to you. So try to understand others and in return you will be understood.

Embrace the Nature:

            Nature has everything that you need. If you want to find yourself, then the best way is to start a trip that connects nature with you, because in nature you will find the true and best form of yourself. If you feel like you are missing yourself, or if it is difficult for you to find yourself in this troubled world, I would suggest you to go to places that are rich in nature, because those places provide you a comfort which only a mother can provide her children, and in that comfort you would find what you are searching. Going to trips alone is self-awakening and nature gives you a positive energy that cannot be compared to any gadgets or virtual reality. If planting a sapling and nurturing gives you immense satisfaction, then think about the benefits you would get if you embrace the whole of nature and go on trips to place that are naturally rich and glowing. Nature does not take anything from us; it only gives us the best of things. It is us that had ruined everything in the form of civilization. I am not stating growth is wrong, let us grow with the nature and be one with it.

Conclusion:

            I have discussed with you some of the key points that help an individual to lead a happy and contented life. I believe I have been honest with you all and have given you a piece of my mind to think and grow as a person. I hope it helps you to live your life to the fullest, because all of us have got only one life to live and let us not spend it carelessly only to regret it later. SPREAD POSITIVITY…

An article by Devimanju Mohan. you can follow me on my insta handle : _musing_albatross_

Top 5 Ways To Get Backlinking To Your Website

Top 5 Ways To Get Backlinking To Your Website  

Sticky post
Top 5 Ways To Get Backlinking To Your Website
Top 5 Ways To Get Backlinking To Your Website

Top 5 best ways to create easy backlinking to your website.
In this blog, I’ll tell you How to create backlinks for free to increase traffic to your website.

What is Backlinking 

Backlinks are other websites pointing to your website and allow traffic to float to you.  Backlinking is a great way to rank your website at the top when someone searches for content relevant to you. When other sites give your reference on their websites, your website will move in the ranking as a result of google seeing this as evidence of its authority. Do make sure only the sites which are relevant to your content are providing your backlinks. In this blog, I’ll tell you ways to create backlinks 

Medium

Medium is a blogging website where people write blogs on specific topics. Medium is a platform where anyone can write blogs and post it there. How medium is a way to create backlinks? Let me tell you suppose you’re a blog on some topic, so you’ll post half of the blog on a medium and the blog should be the type that people wanna continue reading, after writing the half blog on the medium you’ll post the link of your main website to make them read the whole post. 

Medium will allow high traffic on your website because the medium is a platform where a lot of professional people write blogs on. If your content is good enough that people wanna continue reading it then you should give it a shot. 

This is how you can create a backlink with Medium. It’s the top way to get backlinking to your website

Guest Posting

Guest posting is you writing content for someone else, in return, you’ll get to give your website link on their website. Make sure if you do guest posting for someone, the website should be a reputed one and the one which has higher visitors. 

How can you create backlinking with guest posting? Let me tell you, ask someone if you can do guest posting on their website in return to give your website link on their blog. This will create a backlink for you. Do this with more than 3 or 4 people to rank your website on a google search. Make sure the blog you’re writing should be good enough for the owner and relevant to your content. 

This is how you can create a backlink with guest posting. This might be a hard-working way to do so but to rank your website on google search you have to do it. 

Build Internal Links

Internal links are giving links to your particular blog that you wanna rank on google search on your different blogs. Suppose you wrote a blog and you wanna rank it. Now you want to create a backlink for that particular post, so you’ll provide a link for that post on every single blog that you will write on your website. If the readers find it relevant or maybe if they want to read it they will click on it. These are called internal links, you will just have to give links on your website. This is also an easy way to create a lot of backlinks for your post or your website. 

In my opinion, this might be the easiest way to create backlinks. You don’t have to do anything complicated, you’re just working on your website. 

Promote Your Content

Without the appropriate promotion, even great content won’t lead to backlinks. To market your finest content, you must get outside and engage in email outreach. 

Reaching out to bloggers or websites that publish weekly or monthly is one of the greatest ways to do this. Search terms like “keyword” can be found using Google once more. A week or month’s worth of results should only be displayed if you specify this.

Promoting your content like this will allow people to get to know about you and your content and they will be more active on your website. If the content is great they will always look up your website whenever they want something. Make sure the content you write should always be better than the one you’re competing with like if they had written 600 words, you better take it to 800. When you make it big make sure you write relevant and amazing things not just anything to make it big this will lower your ranking. Google only represents the best content out of everyone. It’s the top 5 Ways To Get Backlinking To Your Website .

Online Interviews

Right present, doing online interviews is popular and a wonderful approach to build backlinks to your website. You’ll receive several interview requests after you establish yourself as an authority in your field, but until then, you must take the first step. Find websites conducting interviews and contact them to express your interest in taking part and any knowledge you may offer.

In Online interviews you can brag about your website and your content in betwerelevanten . Make sure you are up to date about websites which are organising it . It is also top 5 Ways To Get Backlinking To Your Website create backlinks for free . All you have to do is register for the interview and tell them about the knowledge you acquire. Make sure the interview should be about the content that is  to you like what you acquire knowledge about. 

People are also reading:


How to Build A BMI Calculator in React JS - useState Hook & Conditionals

How to Build A BMI Calculator in React JS – useState Hook & Conditionals

Sticky post

This is a simple responsive BMI calculator using react js I am damn sure you will be learning a lot from this small project. We used use state hook to manage the state of the application. let’s start to Build A BMI Calculator in React JS .

Building a body mass index calculator with react js using basic class-based components and understand state and props too in a very easy way.

What Is BMI ?

Lets understand what the BmI is then we can move to the development part of this BMI calculator. it is a measurement of a person’s leanness or obesity based on their height and weight. There are many tools which helps to identify the your body bmibut in todays session we can build our own bmi calculator. Hope you are excited to do this build.

Let’s Begin making the project

Open the command prompt, go to a comfortable spot, and enter the command as follows to build the example project for this example:

create-react-app bmicalculator

Now, as indicated below, head to the project folder and open the folder in your fav editor. and jump to the main folder by typing

cd bmicalculator

Now just replace the placeholder content of App.js with the given below content :

let’s create this amazing BMI calculator which I have given below

How to Build A BMI Calculator in React JS – useState Hook & Conditionals
How to Build A BMI Calculator in React JS – useState Hook & Conditionals

App.js

import './App.css';
import './index.css'
import React, {useState} from 'react'

function App() {

  // state
  const [weight, setWeight] = useState(0)
  const [height, setHeight] = useState(0)
  const [bmi, setBmi] = useState('')
  const [message, setMessage] = useState('')

  let calcBmi = (event) => {
    //prevent submitting to the server
    event.preventDefault()

    if (weight === 0 || height === 0) {
      alert('Please enter a valid weight and height')
    } else {
      let bmi = (weight / (height * height) * 703)
      setBmi(bmi.toFixed(1))

      // Logic for message

      if (bmi < 25) {
        setMessage('You are underweight')
      } else if (bmi >= 25 && bmi < 30) {
        setMessage('You are a healthy weight')
      } else {
        setMessage('You are overweight')
      }
    }
  }


  let reload = () => {
    window.location.reload()
  }

  return (
    <div className="app">
    <div className='container'>
      <h2 className='center'>BMI Calculator</h2>
      <form onSubmit={calcBmi}>

        <div>
          <label>Weight (lbs)</label>
          <input value={weight} onChange={(e) => setWeight(e.target.value)} />
        </div>

        <div>
          <label>Height (in)</label>
          <input value={height} onChange={(event) => setHeight(event.target.value)} />
        </div>

        <div>
          <button className='btn' type='submit'>Submit</button>
          <button className='btn btn-outline' onClick={reload} type='submit'>Reload</button>
        </div>
      </form>

      <div className='center'>
        <h3>Your BMI is: {bmi}</h3>
        <p>{message}</p>
      </div>
    </div>
  </div>
  );
}

export default App;

In the above code, we are not using any lib for any of the logic you just create this app by making this logic to your app that’s it. It’s a very simple application of BMI and I hope you will understand the logic I will provide you with the detailed concept of this tutorial on my youtube channel just go and watch it for making this simple calculator.

Now just replace the boilerplate of index.js with the given below content :

Index.css

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.app {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}

.container {
  box-shadow: 0px 0px 12px #ccc;
  border-radius: 8px;
  padding: 3rem;
}

input {
  width: 100%;
  font-size: 1.2rem;
  padding: 15px 4px;
  margin: 8px 0;
  border-radius: 8px;
}

.btn {
  display: block;
  width: 100%;
  font-size: 1.2rem;
  margin: 8px 0;
  padding: 15px 0;
  background-color: #0077EE;
  color: #fff;
  border: 1px solid #333;
  border-radius: 8px;
  cursor: pointer;
}
/* unvisited link */

.btn-outline {
  background-color: #fff;
  color: #A6BCDA;
}

.center {
  text-align: center;
  margin: 24px 0;
}

p {
  margin: 10px 0;
}

.img-container {
  text-align: center;
}

.img-container img {
  height: 200px;
}

Index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Conclusion

That’s it congratulation you did it

I hope you enjoyed this little project We used use state hook to manage the state of the application let’s start to Build A BMI Calculator in React JS.

For more tutorials like this, you will follow our youtube channel and subscribe to our Instagram handler. I hope you like the video also which I have uploaded on youtube please like it and spread it with your friends too.

Happy Coding! ?

People are also reading:

Download GB whatsapp APK Download with Anti Ban 2022

How to Download GB whatsapp APK Download with Anti Ban 2022

Sticky post

What Is GBWhatsApp?

One of the best WhatsApp mods available for your device is GBWhatsApp. The multiple-account-friendly WhatsApp mod is well-known to users, among other things. The Google Play Store and other app distribution platforms do not, however, allow for the download of this mod. However, you’re in luck because we have included links to download the 2021 and 2022 versions of GB WhatsApp below.

Download the most recent 2022 version of GB WhatsApp on your phone. New features have been added to the most recent version of GB WhatsApp APK. The most recent version is available here for download. It is the most widely used mod version at the moment.

if you’re sick of using WhatsApp as it is now. We do, however, have the ideal WhatsApp mod for you right now. We’ll lead you through GBWhatsApp in this article (GB WhatsApp). comparable to the first messaging app. GBWA supports voice, video, and chat communications. You can share your current location, files, contacts, and media files with the mod as well. We have provided you the links to download WhatsApp in GB.

GBWhatsApp APK Download

App Name
GBWhatsApp APK
VersionLatest Version
Size58.1 MB
Total Downloads6,000,000+
RequirementAndroid 4.0.3 and higher

Summary of GBWhatsApp APK features 

Features of GBWhatsApp APK in brief
In addition to customising options, GBWhatsApp provides a lot more. We are confident that after looking at the list below, you will decide to purchase this mod for your device.

attractive launcher icons
automatic message replies
conceal writing status
Secret chat function
obscure the recording status
Google Play stickers can be added. Web connectivity for WhatsApp (features do not work there)
sharing up to 100MB of audio
Develop, use, and distribute your own themes.
backup capability
up to seven-minute video status updates
activate password
incredible tick styles
Modify the notification-bar icon
a number of GIF suppliers
alter the video player
Scheduler for available messages

Download Now

People are also reading:

Unterminated JSX contents

Parsing error: Unterminated JSX contents | React Js [ Updated Solution ]

Sticky post

Hi, guys today I go through this error in my react page Unterminated JSX contents and after some, I found the solution to this error below I have mentioned the answer to this problem below you can check it out and clear you dought in a easy way

Problem Statement: Unterminated JSX contents in react problem

Solution of this problem :

Either you just forget to complete your HTML Semantics in my case I have just forgotten to close my div in my scenario that’s why I got this error message about Unterminated JSX contents in react application.

Now I have fixed it and my solution look like this after adding the one closing div to my app.

Conclusion

Hope you like this article and share with your friend you face this problem .

People are also reading:

watermarks on images for free?

How can I get rid of watermarks on images for free?

Sticky post

Watermarkremover.io is an AI-powered app that allows you to remove numerous watermarks from images for free. in this article we will go through How can I get rid of watermarks on images for free?

watermarks on images for free

Hey guys again here we are coming with a new blog. Where you will learn how to remove the watermark on images for free through an ai powered app. That makes this hectic work in very easy way without any difficulty. If you want a watermarked remove picture for upcoming work, presentations and any social media post then in this post will definitely give you the best Tool which going to help you to remove the watermark from your image.

Steps to follow to remove the watermark from your image

Using a watermark remover driven by AI.

If the methods listed above seem too difficult, an AI-powered watermark eradication application may be the best option. Using AI technology, a watermark remover tool helps you remove watermarks from your photos. It speeds up the procedure and eliminates the need for expert editing skills or a large budget to engage graphic designers. In a nutshell, it’s one of the most successful ways to remove watermarks from photographs.

Steps to be followed to remove watermark from an image

Go to watermarRemover.io

2. Upload Your image to the site which you want to remove the watermark .

3.Just click on upload image and upload your selected image from the hard drive. After uploading it process your data for removing the watermark from it . that really simple steps you have to follow .

4. After processing this will give you the watermarked removed image and what you have to do is just download the image from the watermarkremover.io and use it in your project.

5. After uploading the data to the site and conversion it to the watermark remove will give you the interface like that for downloading the image from the site .

Thats it just download the image which you want to use in your project or presentation for the work .

Simple Steps For mobile User

The following are simple instructions for removing watermarks with the Watermarkremover.io App:‍

  1. Download the Watermarkremover.io app from the Google Play Store.
    On your smartphone, open the Watermarkremover.io app. You can also go to its website on your computer or laptop.
    2. Select the image from which you wish to remove the watermark and upload it using the Upload Image button.
  2. You can also paste a watermarked image’s URL.
    Wait a few moments for the image to be processed. You’ll see that the final image lacks the original watermark.
  3. To save the photo to your smartphone, desktop, or laptop, select the Download Image option.

Conclusion

We hope you enjoyed our free watermark removal guide. Watermark removal is a difficult task, and getting it right is much more difficult. Hope you will like the article on How can I get rid of watermarks on images for free? for more do visit out blog www.ziontutorial.com

People are also reading:

09 The Premier Resource For Free icons

10 Best Websites for Obtaining Free Icons

Sticky post

if you are looking for quality icons for web graphic design , then you have come to the right place in this post i will show you the top best amazing 09 The Premier Resource For Free icons available in this list just enjoy and give me some comment which is your favorite site among these 09 The Premier Resource For Free icons .

we have picked for your convenience so that you can easily download without any copy-write infringement . these icon pack will used for web design purpose , web application , info graphic and for the desktop .

All that icons on these sites are free , But still pay attention to there terms of uses , as they can be changed at any time . So without wasting Your time lets discuss these top free websites to 09 The Premier Resource For Free icons

01. FLATICON

09 The Premier Resource For Free icons

i love this website most because there are about 3,180,500 vector icons available to this website . And important part of this website is you can search and edit these icon to your own convenience. flaticon.com is one the one website where you can easily Download 09 The Premier Resource For Free icons

Flat icon offers user high quality vector graphics . All icons are totally editable and can be used used in both personal and commercial projects . But you need to credit the author . In order to use an icon you must attribute its author .

flat icon have give you the opportunity to become an author who can make icons and distribute to the huge community by making it free . Also if you make icon premium you will get some money by selling your icons to the flatiron platform .




02. The Noun Project

FREE WEBSITES TO DOWNLOAD ICONS

This resource asks for registration before to download icons . But it would be a very quick and simple process to get all the icons . Also you can done these process via facebook, google , and become a free paid member . All the members get access to all the icons which you want . i love this website for there simplicity structure . only one problem with this website is you always give the credit to the icon’s designer each time . Whenever you use the icon set you love it . So Don’t miss this 09 The Premier Resource For Free icons




03. ICON MONSTER

download free icons

This website is the another icon distribution website . This website is created by Alexander Kahlkopf a senior designer from Germany with over 15 year of professional experience in icon design .

All these sets are created professionally and effectively so without wasting any time do love his work and use in your projects as per your requirements .

I like this icons sets website because these free websites are monstrously big and continuously growing source of simple icons . Most of the websites design and info graphic designer are used these icons in there projects . By this website you can even play with different categories files like png,svg with different sizes are also available .




04.FEATHER

FREE ICONS DOWNLOAD WEBSITES

One of our teams favourable icons sets . This website is doing a great job because feather is a collection of simply beautiful open source icons each icon is designed on a grid and comes in different format to download (Like SAG PNG ) with unexpected stroke.

So if you are going to use it for web design you will need to open icon in illustration first and broke the stocks and use in your project commercially.




05. ICONS8

 Best Websites for Finding Free and Modern Icons

Icon8 is also the one of the best website where you can download free modern icons sets . this website has to be the one my favourite website not for there design tips or design junks . Ilove this website only for there dedication about creating icons sets and there icons product quality .

Suppose if you can to search Book icons in the icon8 sites this would recommend you about thousand of icon sets .

Also icon8 provide you a editing functionality where you put your creativity to the next level like if you want to add color , overlay effects and stroks disturbance and much more modification part (background change texture color ) are there .

In my opinion icon 8 has to be totally phenomenal website to download high quality vector icons and much more .




06. UXWings

09 The Premier Resource For Free icons

Ux wings is also one of the most used website by designer and developer too . This website is designer recommended website if you want well optimised vector , free SVG icons and PNG icons download for creative and commercial projects.

Personally i love this website because this website gives you lot more icon sets to use in your project without any copyright infringement.

ux wing icons are well and carefully crafted by top best designer. if you have any question in your mind regarding ux wings why ux wings is best resource of icons sets to the best reason is that uxwings provide you each and every categories which you want to download .




07.Material Design

09 The best Resource For Free icons

material design also give you the opportunity to download free icons for your project . For your Kind information this website is rolled by google and as we all know that , google is the leading company to make huge products .

Material design icons have different theme , combination , different sizes also these icons pack are line up icons with non identical ranges of downloadable sizes and densities.

Each and every icon is designed by following design style guideline . These icons are free to use even you can modify as per you convenience. these are the websites To Download Free Icons.




08.Boxicons

Simple open Source icon which carefully crafted for designers & developers . This icon website consists many icons where many developers and deginers used this website for there personal projects . In this site generally you will find about 1600 icon on this website in different categories Like Regular Solid Logos and these icons are very high quality icons .

Also users can downloads these icons from GitHub profile and create any issue if they found too for developers .

Do use this website for downloading premium icons for your personal projects .

09. atomicons

This website is crafted a very beautiful website through which you can you can download around 256 sleek icon pack available set to download for free. Great something if you are looking line icon and bold icon pack this website will gives you a very wide range of icon pack .

Also the one feature i like the most at this website is you can create and change the radius and the width of the icons . Apart from the radius and width of the icon even you can change the color of the icons too.

Licensing: Free vector icons for commercial use or personal use. These are the 09 The Premier Resource For Free icons

10.ICONMNSTR

This is our go-to resource for quick, simple, and customizable icons. PNG files have a maximum pixel size of 240×240 pixels, although there is usually a large range of basic icons here. Free vector icons are available for business or personal use with attribution.

Conclusion

although all the websites are renowned at there own place . we make a difference is when we have a a collections of free icons websites to download to your personal projects. i hope you love this lists of free websites to download free icons sets . Hope you like the icon sets and also comment your favbourate icon list in the comment section below.

Hope you will find this article helpfull.


People are also reading:

Creating beautiful tooltips with only CSS

Creating beautiful tooltips with only CSS

Sticky post
Creating beautiful tooltips with only CSS

Hello, friend’s hope you are doing so today we are making very cool tooltips with only CSS.

Either you can download the source from the bottom file or follow the tutorial along with me.

Again before deep dive diving into the tutorial do comment and subscribe to our youtube channel so that you can get new videos each and every week.

Let’s start our tooltips with only CSS & this is one of the best tooltips with only CSS Also, make your tooltips with only CSS . So without wasting any time let’s jump into the source code.

We start our code with the tooltips with only CSS.

Creating beautiful tooltips with only CSS

THE HTML

<div class="tooltip-container">
 Hover Me !
<span class="tooltip">Praesent ut tincidunt ligula. Donec at sem sit amet nulla porttitor consequat sit amet quis velit. Phasellus imperdiet mi in velit gravida tincidunt.</span>
</div>


THE CSS

Lets talk about our styling part where put some twic effect for our tooltip its a very small abd simple tooltip project using css. With

@font-face {
  font-family: 'Muli';
  font-style: normal;
  font-weight: 400;
  src: local('Muli'), url(http://themes.googleusercontent.com/static/fonts/muli/v4/kU4XYdV4jtS72BIidPtqyw.woff) format('woff');
}

body {
    width:120px;
    margin: 150px auto;
    background: #D76655;
    font: 400 12px/14px 'Muli';
}

.tooltip-container {
    cursor: pointer;
    position: relative;
    display: inline-block;
}

.tooltip {
    opacity: 0;
    z-index: 99;
    color: #bbb;
    width: 190px;
    display: block;
    font-size: 11px;
    padding: 5px 10px;
    border-radius: 3px;
    text-align: center;
    text-shadow: 1px 1px 2px #111;
    background: rgba(51,51,51,0.9);
    border: 1px solid rgba(34,34,34,0.9);
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    position: absolute;
    right: -80px;
    bottom: 40px;
}

.tooltip:before,.tooltip:after {
    content: '';
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(51,51,51,0.9);
    position: absolute;
    bottom: -10px;
    left: 43%;
}

.tooltip-container:hover .tooltip,a:hover .tooltip {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

This is the final version of the TOOLTIP if you are following the source code then this will look like this and you can modify and change as per your requirement. That’s shit hope you like this tutorial I will provide you the source file link where you can download the sources.

Output

Creating beautiful tooltips with only CSS
Creating beautiful tooltips with only CSS

People are also reading:

How to Build a Responsive Navigation Bar With Flexbox

Navbar CSS Tutorial: Create a Navigation Bar with Flexbox.

Sticky post
How to Build a Responsive Navigation Bar With Flexbox

Create a Navigation Bar with Flexbox.

Hello, friend’s hope you are doing so today we are making a very cool Navigation Bar with Flexbox using HTML and CSS. Also we make this navbar responsive so that you can use this on your mobo devices.

Either you can download the source from the bottom file or follow the tutorial along with me.

Again before deep dive diving into the tutorial do comment and subscribe to our youtube channel so that you can get new videos each and every week.

Let’s start our Responsive Navigation Bar with Flexbox & this is the one of the best navbar example using flexbox. using CSS and HTML. Also, make your website is navbar in just a few min by using this source code. So without wasting any time let’s jump into the source code.

We start our code with the skeleton of the navbar using HTML AND CSS. first, we make a header tag where we put out logo nav links and last but not least our contact info button.

Make a folder of index and style and also an image folder where we put our logo and other remaining images. It this gonna be fun to create this navigation bar which makes you practical scenario with Navigation Bar with Flexbox using HTML and CSS. Hope you like it too .

eg.

Let’s start our first HTML part where we have to make our skeleton of the website using HTML AND CSS without using javascript.

THE HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <header>

        <img class="logo" src="./images/logo.svg" alt="">

        <nav>
            <ul class="nav__links">
                <li><a href="#">Home</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Project</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Music</a></li>
            </ul>
        </nav>

        <a href="" class="cta"><button>Contact</button></a>

    </header>

</body>
</html>

Let’s make our navbar bar attractive and beautiful with CSS in the CSS part we are using flexbox which helps us to make our navbar component stable.

THE CSS

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #24252A;
}

li,a,button {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: edf0f1;
    text-decoration: none;
}

header
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 10%;
}

.logo
{
    cursor: pointer;
}

.nav__links {
    list-style: none;
}

.nav__links li {

    display: inline-block;
    padding: 0px 20px;
}

.nav__links li a {
    transition: all 0.3s ease 0s;
    color: white;

}

.nav__links li a:hover {
    color: #0088a9;
}

button
{
    padding: 9px 25px;
    background-color: rgba(0, 136, 169, 1);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease 0s;
}

This is the final version of the navbar if you are following the source code then this will look like this and you can modify and change as per your requirement. That’s shit hope you like this tutorial I will provide you the source file link where you can download the sources.

Download Source Code

People are also reading:

5 Ways to Get Paid to Code Online

Sticky post
5 Ways to Get Paid to Code Online

Are you a programmer and want to make money through coding with different streams of money making ideas? Then you are in the right place just scroll and read 20 important money-making streams through which you can earn lots of money with these streams . Let’s get started without a further a do . Also these things 5 Ways to Get Paid to Code Online one my best article for beginners who wants to earn extra income from coding.

How to Make Money Programming

If you are a geeky person but you have to earn money through your programming skills with ( skills like : C++ , HTML , CSS , Javascript , React Js angular , and other frame work through which you can make bymkney easily by these technologies . And want to get paid online There are several online ideas through which you can earn easily without sticking to any particular income stream . Today’s era is booming so fast so there are thousands of ideas out there through which you can earn money online. Thats what i am covering in the hole blog . I will tell you the 20 ways to get paid online through the different streams.

List of Proven Ways to Make Money from Coding Online

Here i will list 20 updated ways to make money online through programming skills.

1.Blogging

i know each and every programmer know the fact about how to make money through online advertisements through blogging but this is the best way I will suggest each and every programmer do in their free time so that they can interact with beginners as well as a senior developer so you can connect as much as people through blogging and also you can prefer your blog on social media so that you can earn money through it .

There are many ways to make money online .

  1. Charging for premium content.
  2. Earn money through affiliate link.
  3. Earn money for teaching coding skills.
  4. Sponsor content writing for their products.

Here is a quick tip for starting a programming blog.

Write SEO friendly content so that your post or quality content blog will reach to so many people there are quite simple techniques to follow and allow you to make a seo friendly content. SEO friendly content will acquire so many acronyms like SEO keywords and many more but don’t worry about it these type of informatiin will provide so many places you can grab it in a very easy way also Seo and writing your blog on a specific keyword will help you to reach out so many people in search result. So make sure you should write seo friendly post .

Hope this post will help you to make money in an easy way through blogging.

2. Freelancing

Freelancing is my favorite way to earn money personally i prefer and suggest everyone to jump to the freelancing domain where you can earn more money than what you are earning through9 to 5 job .

Con of freelancing

  1. Freelancing will give you the freedome to work from anywhere.
  2. Freelancing gives you no boundation regarding 9 to 5 work culture to work for a company .

3. Start A Personal Website

A personal website is work like a TV ad that will show off your coding skills too. In which technologies you are an expert. Your website is like a mirror that can help you to reflect on your coding skills. You can show off your particular stack of technologies in which you are an expert in like if you are a frontend developer then mention you stack like HTML CSS javascript etc. Or if you are a Backend developer then you should be mentioned the backed niche.

Once you have completed your website you can launch and attract more clients and you will have more clients to offer your online service. Charging hourly rates. Or even better big projects.

4. Fiver

you can start even a freelancing project if you are a beginner. Then fiver is the best site for those who are new to this freelancing career. Also, you already know Fiverr is an online marketplace for freelancing services based in Israel. Fiverr is a website that allows you to post and apply for tiny one-time projects, or gigs, online. The platform’s job listings include a wide range of topics, from “get a well-designed business card” to “assistance with HTML, JavaScript, CSS, and jQuery.”

5. Live Coding and Streaming

when streamers are live, they are frequently quite involved with their audience. They respond to questions, ask questions, and adjust what they’re talking about in response to the wishes of their audience. That’s great fun! We encourage giving a live broadcast a try if you’ve never done so before. Here are 15 great live programming channels to watch:

You’d be shocked at what you’d find. It’s a terrific method to learn something new or enhance an existing ability by watching a programming live stream. To begin, you’ll notice that even experienced programmers have difficulty. They aren’t any different than you. They don’t have any magic tricks in their sleeves. They, like you, look for solutions on the internet. They forget the semicolon, just like you do. They are in the same boat as you.

Here I will list the 8 most popular CODE STREAMING CHANNELS TO MAKE YOU A BETTER PROGRAMMER so that you upskill yourself too to do this and earn more from different platforms by doing this .

You Channel Name youtube Channel Link
Traversy Mediahttps://www.youtube.com/user/TechGuyWeb
Jason Lengstorfhttps://www.twitch.tv/jlengstorf/
Adam Wathanhttps://www.youtube.com/channel/UCy1H38XrN7hi7wHSClfXPqQ
PirateSoftwarehttps://www.twitch.tv/piratesoftware
csharpfritzhttps://www.twitch.tv/csharpfritz
Sayvihttps://www.twitch.tv/sayvi
rwxrobhttps://www.twitch.tv/rwxrob
Florin Pophttps://www.youtube.com/channel/UCeU-1X402kT-JlLdAitxSMA

These are my favorite youtube channels and I am damn sure you love it because these youtube channels will give you the real value .and these top 5 ways to get paid to code online defiantly

Conclusion

Hope you like this article ? Did you enjoy 5 Ways to Get Paid to Code Online? Let me know in the comment box. Finally, we learn to enjoy and try it on our own.

Happy Coding! ?

People are also reading:

How to make Simple Interest Calculator in Javascript

How to make Simple Interest Calculator in Javascript | Html Simple Interest Calculator for beginners

Sticky post
Simple Interest Calculator in JavaScript

In this tutorial, we will make a very simple javascript Simple interest calculator using HTML CSS and javascript. If you are a beginner then this tutorial is the best for you what you will learn from this tutorial is .

Note: Make sure you have downloaded the Assests and files for this project Here Link

Planing

since we will be building to make this simple interest calculator. You will learn lots of this which will give a great knowledge about DOM manipulation. I will all the list which you will learn during making or following this tutorial.

  • We will learn how to center a container .
  • we will learn how to deal with formula to implement our simple inerest in javascript
  • how to get user input .
  • how to save and manipulate to given specipic place of your output .
  • And many other things which is related with our styling part that will give you an great idea about dom manipulation and some basic element .

To start off we will draw a basic idea of our application which we are be building for this application either you can refer to your notebook or an online software tool Like Figma,Adobe xd, or something else from the marketplace.

It’s not about color staying the elements it’s just a layout refining where you will learn about components of our application .

The Html

Lets start with HTML syntax for the application so that we can define our elements of inputs paragraphs and so on then we will move in javascript and CSS part to make our application working .

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

  <div class="container">
    <h2>Simple Interest</h2>
    
    
  <input type="number" id="principal" placeholder="Principal">
    
    
    <input type="number" id="rate" placeholder="Rate Of Interest">

  
    <input type="number" id="time"placeholder="Time in years">
    
    <div class="result">
      <p>Interest: <span id="interest"></span><br></p> 
      <p>Total Interest: <span id="plus"></span></p>
    </div>
    
    <button id="btn" class="button-56" role="button">Submit</button>
  </div>

</body>

</html>

Our basic elements are ready let’s move into our styling part where we will learn about how to make our applications looks awesome with our CSS and js for the workability part. Let’s move to our javascript which gives our application winds to calculate our simple interest by using simple logic formula .

The Javascript

<!--Script-->
  <script>
  
  /*Simple Interest Formula = 
  p*r*t/100*/
    
    btn.addEventListener("click", () => {
        /*Get input values to the variables */
      let p = parseInt(document.getElementById('principal').value);
      let r = document.getElementById('rate').value;
      let t = document.getElementById('time').value;
      let btn = document.getElementById('btn');
      
      var interest = (p*r*t)/100;
      
      document.getElementById('interest').innerHTML = interest;
      
      var plusInterest = p + interest;
      document.getElementById('plus').innerHTML = plusInterest;
      
    })
    
  </script>

Since we have already done our javascript part lets jump to our styling part so that our app looks amazing and beautiful.

The CSS

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #3E00AC;
  font-family: 'Poppins', sans-serif;
}

.container{
  width: 550px;
  height: 750px;  
  display: grid;
  place-items: center;
  background: #edf1f4;
  border-radius: 10px;
  border: 3px solid rgb(0, 0, 0);
  
}

.container h2 {
  
  padding-top: 15px;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  color: #464646;

  
}

.container span{
  font-weight: 700;
}

.container .result{
  color: #9E9E9E;
  width: 440px;
}

.container input{
  width: 440px;
  height: 80px;
  background: #edf1f4;
  inset: -5px -5px 5px #fff;
  border-radius: 5px;
  border: 1px solid black;
  outline: none;
  font-size: 20px;
  padding: 24px;
}

p {
  color: #3E00AC;
  font-size: 17px;
  padding: 10px;
}



#interest {
  font-size: 20px;
  padding-left: 1rem;
}
#plus {
  font-size: 20px;
  padding-left: 1rem;
}




/* CSS */
.button-56 { width: 400px;
  height: 200px;
  align-items: center;
  background-color: #adffc8;
  border: 2px solid #111;
  border-radius: 8px;
  box-sizing: border-box;
  color: rgb(26, 26, 26);
  cursor: pointer;
  display: flex;
  font-family: Inter,sans-serif;
  font-size: 16px;
  height: 68px;
  justify-content: center;
  line-height: 24px;
  max-width: 100%;
  padding: 85rem 25rem;
  position: relative;
  text-align: center;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  margin-bottom: 1rem;
}

.button-56:after {
  background-color: #111;
  border-radius: 8px;
  content: "";
  display: block;
  height: 48px;
  left: 0;
  width: 100%;
  position: absolute;
  top: -2px;
  transform: translate(8px, 8px);
  transition: transform .2s ease-out;
  z-index: -1;
}

.button-56:hover:after {
  transform: translate(0, 0);
}

.button-56:active {
  background-color: #ffdeda;
  outline: 0;
}

.button-56:hover {
  outline: 0;
}

@media (min-width: 768px) {
  .button-56 {
    padding: 0 40px;
  }
}

After following the whole code of HTML CSS and javascript you will get this kind of interface mention in blow .

Simple Interest Calculator in Javascript  project for beigners

Congratulations! You’ve created a fully functional and styled app. Hopefully, you’ve learned a something new during the whole process! Do comment in the comment box for any suggestion and query .

Downloading Files

Conclusion

Hope you like this article ? Did you enjoy How to make Simple Interest Calculator in Javascript? Let me know in the comment box. Finally, we learn to enjoy and try it on our own.

Happy Coding! ?

People are also reading:

How to Create a Responsive pricing table – HTML & CSS Tutorial (Minimal Modern Design)

Sticky post

hello guys, Today in this blog you will learn how to make a Reponsive modern pricing table using HTML & CSS. In the previous blog, I have shared a blog on how to make a modern website landing page using HTML and CSS and now it’s time to move into a Responsive pricing table using HTML & CSS.

A pricing table is used in many scenarios where users can see the list of prices of the product and services which they are providing. Also, it is used to display various pricing plans, Subscriptions, Or price comparisons. The best part of this pricing table is, it is fully responsive and minimal for any device.

Also i have created so many small projects using HTML CSS and javascript for beginners you can check it out Here

If you used this pricing plan on your website this pricing plan site would give you a very sleek and unique look to clients. and if you want to create or watch a video on it you can watch a full tutorial on it.

Video Tutorial Of Responsive Pricing Table

I have covered this video so that you can achieve or make this pricing table using HTML and CSS I hope you will understand the logic behind the small and minimal pricing table. Also if you are a beginner in web design then this would be the best thing for you. You will learn so many things by making these things at your own pace.

You might like this:

Responsive Modern Pricing Tables [Source Codes]

To create a Responsive pricing table first you need to create two files one HTML file and another one is the CSS file. After creating these two files make sure you copy the source code properly so that we can run it on a live server. meanwhile we have to create an HTML file with the name of index.html file and another file name would be style.css and this file would help you to make your styling to your pricing table looks responsive and minimal. Let’s start this simple responsive pricing table using HTML and css step by step .

THE HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pricing Table</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="pricing-table">
        <!-- 1 card -->
        <div class="pricing-card">
            <h3 class="pricing-card-header">Lean</h3>
            <div class="price"> $4.88/yr
              </div>
            <ul>
                <li>Free control plane included</li>    
            </ul>
            <a href="#" class="order-btn">Order Now</a>                          
        </div>

        <!-- 2 card -->
        <div class="pricing-card">
            <h3 class="pricing-card-header">Standard</h3>
            <div class="price"> $8.88/yr
              </div>
            <ul>
                <li>Deploy in seconds</li>
                
            </ul>
            <a href="#" class="order-btn">Order Now</a>                          
        </div>

        <!-- 3 card -->

        <div class="pricing-card">
            <h3 class="pricing-card-header">Advanced</h3>
            <div class="price"> $20.88/yr
              </div>
            <ul>
                <li>Free daily backups,</li>
                
            </ul>
            <a href="#" class="order-btn">Order Now</a>                          
        </div>

        <!-- 4th card  -->
        <div class="pricing-card">
            <h3 class="pricing-card-header">Enterprise</h3>
            <div class="price"> $48.88/yr
              </div>
            <ul>
                <li>Highly available</li>
                
            </ul>
            <a href="#" class="order-btn">Order Now</a>                          
        </div>
        
    </div>
    
</body>
</html>

After pasting the above code into your HTML file your site will look like this. It’s a very basic website where we use only HTML elements. After finishing this part we will move to the CSS part where the main magic will happen to our site.

THE CSS

The best magic will happen here so follow along with the code and paste in your style.css file.

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&amp;family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&amp;display=swap');

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
    list-style: none;
}

body{
    background-color: #0D0D20;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.pricing-table{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: min(1920px,100%);
}

.pricing-card{
    flex: 1;
    max-width: 360px;
    background-color: #171727;
    margin: 20px 10px;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    color: #ffffff;
    transition: .3s linear;
    border-radius: 20px;
    /* border: 0.5px solid #fff; */
    
}

.pricing-card-header{
    background-color: #171727;
    display: inline-block;
    color: #fff;
    padding: 12px 30px;
    border-radius: 0 0 20px 20px;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
    transition: .4s linear;
}

.pricing-card:hover .pricing-card-header {
    box-shadow: 0 0 0 26em #242486;
}

.price{
    font-size: 30px;
    font-weight: 500;
    color: #ffffff;
    margin: 40px 0;
    transition: .2s linear;
}

.price sup, .price span {
    font-size: 22px;
    font-weight: 700;
}

.pricing-card li {
    font-size: 16px;
    padding: 10px 0;
   
}

.pricing-card:hover , .pricing-card:hover .price {
    color: #fff;
}



.order-btn {
    display: inline-block;
    margin-bottom: 40px;
    margin-top: 80px;
    border: 2px solid #1F1F35;
    color: #ffffff;
    padding: 18px 40px;
    border-radius: 8px;
    text-transform: uppercase;
    font-weight: 500;
    transition: .3s linear;
}

.order-btn:hover {
    background-color: #0fbcf9;
    color: #fff;
}

@media screen and (max-width:1100px)
{
    .pricing-card{
        flex: 50%;
    }
}
Responsive pricing table without hover

When we hover on the card its color would change which makes this pricing table dope.

After hovering on the card

That’s all, now you’ve successfully created Responsive Pricing Tables using only HTML & CSS. If your code doesn’t work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

Conclusion

And voila! We’re done! ?

Happy Coding!

How To Fix blurry/blocky Video Recordings in OBS Easily 2022 New Updated

Sticky post

What up guys I hope you are doing well, Today we will cover another topic through which we can Fix blurry/blocky Video Recordings in OBS Easily.

Fix blurry/blocky recordings IN OBS

I am really sure this setting will work 100% in obs because lots of users ask me about this scenario I have phase lots of videos on youtube but I got nothing. But in today’s blog tutorial you will learn step-by-step to Fix blurry/blocky Video Recordings in OBS Easily. I Will guide you step by step.

Step 1 :

In the First step what you have to do just Go to the setting panel of the OBS

Fix blurry/blocky Video Recordings in OBS Easily

Step 2:

Fix blurr Video Recordings in OBS Easily

After clicking on the setting option you have just go to the Video Section and then change your setting with the below setting. This will give you a clear picture moderator.

  1. Base Resolution : 1920 * 1080
  2. Output Resulution : 1920*1080
  3. Downscale Filter : Bicubic (sharpened Scaling sample )
  4. Common FPS Value : 60

Step 3:

After finishing Step no 2nd just a few steps you have to do with your obs. Just go to Output setting and change all the setting with a given setting that is given in the picture. Below is the important property

How to fix blurry video problem in OBS

Rate Control: CBR
Bitrate : 40000kbps

Step 4:

You are come closer to fix your blurriness problem in OBS during recording and streaming in OBS . Last but not least go to main window of OBS .


Right-click on the main window of recording viewer and untick on lock preview and adjust the screen resolution if not adjusted in your obs eg.

Not adjusted Screen
how TO FIX BLURRY RECORDING PROBLEM IN A EASY WAY
untick on it for a preview
Fix blurry/blocky Video Recordings in OBS Easily

That’s it WALAAAH you just fix your problem of blurring video recording. After doing that trick or applying these settings for fixing the problem of OBS for blurry recoding do comment in the comment box I will defiantly help you out. Also, Leave a comment you have to fix your problem regarding this problem. I will be happy to hear this blog will help you to fix your problem.

Conclusion:

Hope you find this tutorial helps you out do comment if you fix your problem or if this article is helpful or not.

People are also reading:

How To Create A Modern Website Using HTML And CSS Step By Step Website Tutorial

Sticky post
How To Create A Modern Website Using HTML And CSS Step By Step Website Tutorial

Hey, guys again welcome back to the brand new tutorial in this tutorial we gonna learn how to create this beautiful website for card companies using HTML CSS only. in this tutorial, we will learn How to create a modern website using HTML and CSS step by step website tutorial.

Assets For the Website :

The HTML

Let’s start with basic HTML for making a skeleton of the website . We have to start with navbar and then move to the header part of the website then jump to the image part. Using the below code you will

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Card Website</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="header">
        <div class="container">
            <!-- navbar -->
            <div class="navbar">
                <div class="logo">
                    <img src="image/logo.png" alt="">
                </div>

                <nav>
                    <ul>
                        <li>Home</li>
                        <li>Product</li>
                        <li>Work</li>
                        <li>About</li>
                        <li>Contact</li>
                    </ul>
                </nav>

            </div>
            <!-- end navbar -->
            <div class="row" style="padding-top: 8rem;">

                <!-- left text -->
                <div class="col-2">
                    <h1>Choose Card</h1>
                    <h1>Considering your</h1>
                    <h1 class="text_info" >Personal Need</h1>
                    <p class="text_para" >Gold card and Platinum card with many benefits <br> with more entertainments in your life</p> 
                    <a href="" class="btn" >Explore Now  &#8594</a>            

                </div>

                <!-- end left text -->

                <!-- right image -->
                <div class="col-2">
                    <img src="image/card_01.png" alt="">
                </div>
            </div>
           
        </div>
    </div>

</body>
</html>

The CSS

let’s make a very basic styling using CSS to make our header part. As I mention in upper part using our HTML we have created all the components of navbar and header text para and image lets make this header looks beautiful by applying some CSS to out skeleton. Here below I have mention all the code for designing our header. you can check this out and play around with these values and see what effect you will get.

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');


*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: #000;

}

body{

    font-family: 'Inter', sans-serif;
    height: 100vh;
}

.navbar
{
    display: flex;
    align-items: center;
    padding: 20px;
}

nav{
    flex: 1;
    text-align: right;
}

nav ul{
    display: inline-block;
    list-style-type: none;
}

nav ul li 
{
    display: inline-block;
    margin-right: 50px;
    color: white;
    font-weight: 700;
}

ul li:hover {
    background: rgb(0, 0, 0);
    color: #ffffffe0;
}

a{
    text-decoration: none;
    color:rgb(255, 255, 255); ;
}

p{
    color: rgb(0, 0, 0);
}

.container
{
    max-width: 1400px;
    margin: auto;
    flex-wrap: wrap;
    justify-content: space-around;
}

.row
{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-around;
}

.col-2
{
    flex-basis: 50%;
    min-width: 300px;
}

.col-2 img {
    max-width: 100%;
    padding: 50px 50px;
}

.col-2 h1 {
    font-size: 50px;
    line-height: 32px;
    margin: 25px 0;
    color: rgb(255, 255, 255);
}

.text_info
{
    font-size: 40px;
    font-weight: 200;
    color: white;
}

.text_para
{
    margin-top: 2rem;
    border-radius: 10px;
    color: white;
}

.btn
{
    display: inline-block;
    background: #f0f0f0;
    color: rgb(41,41,41);
    padding: 22px 29px;
    margin: 30px 0;
    border-radius: 9px;
}

.btn:hover {
    background: #0004ff;
    color: white;
    transition: 0.9s;
}

I hope you have learned from this tutorial how we can create the Above website using only HTML & CSS.

Hopefully from this article, you have learned how to make this Header using HTML, CSS.
If you can understand how to make this watch from this article, please comment with your opinion. I have already made many more types of JavaScript mini-projects so you can see those designs if you want.

You can visit my blog for more tutorials like this.

Conclusion

I hope you enjoyed this little project.

Happy Codding ✨

Download Link Assets

People are also reading:

Top Powerfull Website You Must Know in 2022

Sticky post

So Hi readers today we will talk about the best website you must know in 2022. I will mention a few websites list & this website would be really helpful so give a try and tell me about this website how all these websites would work at all. In this article, we would focus only on these websites where you can find the Powerful Website You Must Know in 2022

1. Soapgate

If you are addicted or like to watch the latest movies and web series but don’t like to subscribe. This website is going to your favorite website. This site will provide you all a list of movies that are trending on the OTG platform or other premium movies. This website consists of so many ads but you can easily remove these ads through an ads blocker. On this website, you can completely free stream many premium series absolutely free. Their website URL might change frequently but I will update you regarding these URLs so that you can easily update and watch premium movies freely.

2. Educationwave

Most of the websites which provide free education vs premium education but this website has a moto to provide free education you can find many useful video content so that you can access quality student content. mostly this website is publishing only academic content but the best part is that all these things are free.

3.Undraw

This website is my favorite because this website provides you with thousands of illustrations with different categories and the best is that you can easily download files even this website will provide you SVG files so that you can easily modify and edit them as per your requirements. Also, this open-source library of illustrations provides you the daily updates so that you can get new illustration stuff.

4. Temp Mail

This website is also my one the best website because i have created many email instant and used these fake mail id on that website where you would not trust to make an account on it. What’s what this website do. You don’t have to worry about your personal data-stealing problem this website will provide you lots of free mail id so that you can be registered with that mail id freely without using your primary.

5.Y2mate

This website is designed specifically for PC users who wish to download videos from YouTube. You may easily download any public Youtube video of various quality from the Y2mate website. There are some advertisements redirecting there, however, I urge that you use ad blockers.

Conclusion

Hope you like this post do comment your favorites website list in the comment box .


People are also reading:

10 Sites for Free Stock Photos (Updated for 2019)

Top Best Free Resources For Free Stock Photos 2022

Sticky post
Top Best Free Resources For Free Stock Photos

All of the photograph free and freely use from copyright All of these are free from copyright restricted or licensed . You can easy modify ,distribute and perform the work. Also Top Best Free Resources For Free Stock Photos (2022).

hello everyone today i would to talk about the most important and everyone should want to use for there projects and in other stuff. How to download the best free stock photos from the internet. i will cover cover each and every resource which gives you the free stock photos.

Here are the list of my favorite and most popular free stock photos sites of 2022

Everyone knows photography is a very unique and integral part of design . And in this digital era we all love to explore new thing and share the picture on social media but have you notices after uploading these images all the images are subjected to copyright . But there are some of the website where you have a put your images and people will love to download your images as a free stock photos .

Why i am sharing these websites because in todays era where technologies and sites and competitive with other many company distributes these images as a paid server for downloading but i will provide the best and effective list so that you can download easily loality images from these website .

1. Unsplash

Top Best Free Resources For Free Stock Photos
641Top Best Free Resources For Free Stock Photos

My first resource of free photos is Unsplace because unsplace uploads about 10 to 20 new photos to there queue every day . and these photos are absolutely free and easy to download . if you want to download these free stock photos free for your project so you have to visit this site and download the free stocks photos free .You can use in your project without attribution and mark easily . Click here to visit this site

2.The Stocks

how to download free non copyrights photos

The stocks site is also a site where you can easily find your royalty-free photos from multiple resources . & the most important terms of this website is you can easily find your niche and download your photos and use it in your personal project. so without wasting any time go and visit this website where you can find the free stocks royalty photos from this site click here to visit this site.

3. Pixaby

how to download free non copyright photos
free stock images sites

This is the website secondly used most of them for my projects as well as in my time editing. i really love this site because pixabey provide about each and every topic and niche for your project-related photos. You can download these photos free and use in your project and for commercial use too . and one thing about pixabey about 1.7 million free photos are available on the website pixabey. you can find different categories apply and search them and download free of cost. You can use these images, vectors, art, illustrations each and everything you can find to this website so click here to reach to this website.

4.Canva

canva free image stock site
free stocks photos

Another list of free photos and also you can eaily create beautiful designs with drag and drop featur and professional layout available to this website . You should use this website so that you can eaily create your website to this and use there resources to attain there point.

5.Burst

free high resolution free non coyright photos
free high resolution free non copyright photos

Burst is also a free stocks photos site where you can download free stocks for your project . so go watch all these website for free stocks photos .

6. Nagative Spacer

negative spacer free photos buket download

Negative spacer offers variety of free photos every week . the core important part of this website which i personally focused on these images are shared without copyright restriction , Meaning you’re Free to use them without any copyright restriction.

7. Death To Stock

Simply Submit your email and enjoy this new brand new batch free photo website. Also the best part of this website is this website is only send you the picture in your inbox of your mailid. you are not allowed to download these photos from this website directly . either you can purchase or download free but by sending a mail .

8. Picjumbo

picjumbo free royality photos

With this website you can cover find variaty of free stock royality picture to this website . There are numbers of Background images available to this website , high Resolution images , Used freely and for personal and commercial use . So don’t waste you time please go a head and download your fav picture bunches.

9. Rawpixel

Rawpixel claims that it has very intense collection of free stock photos . Best place to use these pictures in your personal projects . they provide many different types of stuffs like : Mockups psd , awsome looking stocks pictures natures collections and much more. I will suggest everyone kindly visit and download these free stock photos .

10. Reshot

top 10 best resources of free stock pictures

Reshot one of the best platform for free stock picture where you can download your favorite collections of pictures . These images have a great and high definition and most importantly its free you can use and even upload your pictures free of cost for the community .

11 .Stocksnap.io

stocksnap.io free stock photo

Personally i love stocksnap.io website not for the images but for handy ui and ux flow . In stocksnap.io we have very handy search bar which make user easy to browse through thousand of images on stocksnap.io. where user can search free images which are free to use . Also snap.io will give you the trending option where stocksnap.io uploads thousands of images on daily basis . One feature i like most which view tracking and download tracking which will provides you the popular categories of images

11.Foodiesfeed

If you are a foody photographer and love to search and explore food photos you must have to visit this website . Even this website consists daily new food updates for the website . Even user will download these images freely from this website so don’t wait to





top

Conclusion

I hope you like the post do comment your valuable feedback . If you have known any other resource which you want to add kindly comment on the comment box .



People are also reading:

How to Disable Chromecast on Android

How to Disable Chromecast on Android

Sticky post
How to Disable Chromecast on Android

Easily Stop Casting from your android device

Chromcaste is a very great app to caste or play media from your android device to your favorite Television (TV) but sometime you want to remove or stop casting from your android . This article will help you to stop chromcaste on android , or just disable chromcaste notification from your android app.


How to stop Chromcaste on android

if you are looking to disable chromcaste totally from your android phone . So there are no any inbuilt option available to disable chromcaste on android. Android is only give the cromcaste

android will not give you the option to disable chromcaste option available in the android phone . Android does not have a direct offer to disable chromcaste directly from your device but today we will learn to see the way to disable the chromcaste option from your android device . Still you have many option regarding chromcaste on android .

Stop Casting

if you want to stop a caste that already running that’s simple just go into the app that’s casting or iw ill given you the best way to stop it .

How to Delete Chromecast From the Home App


You can totally disable Chromecast if you remove the device from your Google Home app. This of course will block you from casting permanently until you set it up again, so it might not be the best option, but it does the job. To remove Chromecast:

1.To get started, make sure your phone and Chromecast are connected to the same Wi-Fi network.

2. Go to the Google Home app and tap the room the Chromecast is in.

3. Tap Settings.

4. Tap Remove device > Remove.

make Interactive Feedback Design Using HTML CSS & JS

How to make Interactive Feedback Design Using HTML CSS & JS

Sticky post
How To Make Interactive Feedback Design Using HTML CSS & JS
How To Make Interactive Feedback Design Using HTML CSS & JS

In this article you are going to learn about how to make interactive feedback design using HTML CSS & JS earlier i have shared you a very cool snippet about how to make JavaScript Clock CSS Neumorphism Working Analog Clock UI Design (HTML CSS & JS ) Now here we will make a very interactive feedback ui or we can say 3d emoji feedback design using HTML CSS & JS .

As you can see in the picture above it is very Sleek interactive feedback design using HTML CSS and JS here we will basically discuss about the things we will learn in this article . The most notable work is that of JavaScript programming code. Of course, to make this watch you need to have a basic idea about HTML, CSS, and JavaScript.

How to make Interactive Feedback Design Using HTML CSS & JS
How to make Interactive Feedback Design Using HTML CSS & JS

1. How to make an beautiful background Using Gradient .
2. How to make emoji slider
3. How to make star rating and make working and interactive using JavaScript .
4. How to make feedback ui design proper working with star rating .

Main design of this using HTML CSS AND JAVASCRIPT . Basically html is used to constaruc or we can say for the component of the feedback . CSS is used to make the feedback design smoother design . Last but not least Javascript to make our feedback interactive and fuctional .

I have put all the necessary source code below to let you use this in your personal projects . But if you are a beginner i have make this dedicated tutorial only for you . just follow the steps below and make this interactive feedback design at your end .

First of all, you have to create an HTML and CSS file before extending this watch. Combine HTML files and CSS files. You can also add CSS code to the HTML file using the style tag (<style>css code</style>).

Step 1: Basic design of webpage with HTML

Below i have used the basic HTML code to design the webpage . For designing the background i have used very simple code to design shapes and background .

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/db2813a42b.js"</script>
    <title>Feedback System</title>
</head>
<body>

    <div class="container">
        <div class="feedbackbox">
            <div class="emoji">
                <div id="emoji">
                    <img src="images/Pain.png" alt="">
                    <img src="images/Bored.png" alt="">
                    <img src="images/Hello.png" alt="">
                    <img src="images/Laugh.png" alt="">
                    <img src="images/4Star.png" alt="">  
                </div>
            </div>

            <div class="rating">
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
            </div>                    
        </div>
    </div>
 
</body>
</html>

Step 2: Basic design of webpage with CSS

Below i have used some css to design our html elements . For the background i have used linear background for creating the Linear Gradients  background: linear-gradient(180deg, rgba(255, 250, 123, 0.58) 0%, rgba(199, 46, 232, 0.04) 100%); for 100 vh of the header part or we can for container . Below i have mention all the code for feedback element to design our feedback design part .

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Courier New', Courier, monospace;
}

.container 
{
    width: 100%;
    height: 100vh;
    background: linear-gradient(180deg, rgba(255, 250, 123, 0.58) 0%, rgba(199, 46, 232, 0.04) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.feedbackbox
{
    background: #fff;
    padding: 80px 100px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.emoji {

    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: 30px;
    overflow: hidden;
}

.emoji img {
    width: 70px;
    margin: 0px 15px;
}

#emoji {
    display: flex;
    align-items: center;
    transform: translate(-100px);
    transition: 0.6s;
}

.rating .fas {
    font-size: 40px;
    color: #e4e4e4;
    cursor: pointer;
}
NOTE:, This means that if you place each number at You can copy the source code of this feedback design in your project . .

Step 3: Lets make our Feedback design working with JavaScript .

Now the final step which is JavaScript to make our feedback interactive . below i have mention all the necessary code to make our feedback interactive using JavaScript. Scroll for JavaScript code .

Feedback System

Hopefully from this article, you have learned how to make this feedback design using HTML, CSS, and JavaScript programming code.
If you can understand how to make this watch from this article, please comment with your opinion. I have already made many more types of JavaScript mini projects so you can see those designs if you want.

Home analog_clock Javascript Analog Clock Tutorial For Beginners

JavaScript Clock | CSS Neumorphism Working Analog Clock UI Design

Sticky post
JavaScript Clock | CSS Neumorphism Working Analog Clock UI Design

In this article we will design a very beautiful Neumorphism Working Analog Clock UI Design . Here i have explain in a very informative way how you can made it . If you are a beginner then this tutorial will help you completely.

If you have very basic knowledge of html css and JavaScript then you can make this project very easily . So without without wasting any time lets look a working demo of this project . In a analog clock there are three hands thats indicate hours , minutes and seconds . Also i have provide the source code of this project so that you can use in your own work .

Hopefully the above demo fully will help you to understand the output of this project. This clock is basically fetch the data of your current device . First it will receive the current time from your device and then fetching data time and it will converted to degree and other hand will continuously rotating . It will updating continuously every seconds.

In the above example we use Neumorphism for designing this analog clock lets understand what is neumorphism design to design above clock .

What is Neumorphism design ?

“Neumorphism” is a new slang term in design circles — co-created by. — which essentially crosses the words “new” and “skeuomorphism”. Essentially, it’s a new, minimal way to design with a soft, extruded plastic look. It’s almost as if the interface has been vacuum-formed.

Hope you understand the meaning of neumorphism design lets start our working source code for this project.

Step 1: Basic design of webpage with HTML

Below i have used the basic HTML code to design the webpage . i have used four classes for minute hand and hour hand and last which is second hand of analog clock . For designing the back ground i have used very simple code to design shapes .

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <title>The Best clocking system using css</title>
</head>
<body>

    <div class="container">
        <div class="background">
            <div class="shape"></div>
            <div class="shape"></div>
        </div>
        <div class="clock">
            <div class="hour hand" id="hour"></div>
            <div class="minute hand" id="minute"></div>
            <div class="seconds hand" id="seconds"></div>
        </div>
    </div>

Step 3: Basic design of webpage with CSS

Below i have used some amout of css to design webpage of this clock . i have used background color for the web page is background-color: #080710;

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color: #080710;
}

Step 4: Lets design the shape of the clock and background design .

Javascript Analog Clock Tutorial For Beginners

.background{
    width: 430px;
    height: 520px;
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
}
.background .shape{
    height: 240px;
    width: 240px;
    position: absolute;
    border-radius: 50%;
}

.shape:first-child{
    background: linear-gradient(
        #84fab0,
        #8fd3f4
    );
    left: -90px;
    top: -20px;
}

.shape:last-child{
    background: linear-gradient(
        to right,
        #e6b980,
        #eacda3
    );
    right: -70px;
    bottom: -60px;
}

Step 5: Lets design the clock and clock hands

Javascript Analog Clock Tutorial For Beginners
.clock
{
    box-sizing: content-box;
    background-color: rgba(255,255,255,0.07);
    backdrop-filter: blur(10px);
    height: 320px;
    width: 320px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    border: 15px solid rgba(255,255,255,0.07);
    box-shadow: 15px 15px 35px rgba(0,0,0,0.2),
    inset 0 0 30px rgba(0,0,0,0.4);

}

img{
    position: relative;
}

.hand{
    position: absolute;
    
    margin: auto;
    left: 0;
    right: 0;
    border-radius: 5px;
    transform-origin: bottom;
}
.hour{
    height: 60px;
    width: 8px;
    top: 100px;
	background-color: #ffffff;
}

.minute{
    height: 80px;
    width: 5px;
    top: 80px;
	background-color: #84fab0;
}

.seconds{
    height: 90px;
    width: 3px;
    top: 70px;
    background-color: #f8fc30;
}

Step 6: Lets make our Clock work with javascript .

Now I have taken time from the device using New Date(). NewDate is a JavaScript method that helps to take the current time from the device.
Similarly, using getHours () getMinutes () getSeconds () we have taken the time of hours, minutes, and seconds, respectively. Then the time taken is saved between hh mm and ss.

  let hour = document.getElementById("hour");
        let minute = document.getElementById("minute");
        let seconds = document.getElementById("seconds");

        let set_clock = setInterval(() => {

            let date_now = new Date();
            let hr = date_now.getHours();
            let min = date_now.getMinutes();
            let sec = date_now.getSeconds();

            let calc_hr = (hr * 30) + (min / 2);
            let calc_min = (min * 6) + (sec / 10);
            let calc_sec = sec * 6  ;

            hour.style.transform = `rotate(${calc_hr}deg)`;
            minute.style.transform = `rotate(${calc_min}deg)`;
            seconds.style.transform = `rotate(${calc_sec}deg)`;

        }, 1000);

Hopefully this tutorial has help you to understand the concept of how to design the neumorphism design using HTML CSS and Javascript . I have design many more design using HTML CSS and Javascript lets check out our channel ziontutorial.

15 EASY ONLINE TEENS JOBS WITH GOOD PAY 2021

Sticky post


Isn’t it true that being a teen can be difficult at times? When you’re broke, it’s even worse. Before I reveal these 15 EASY ONLINE TEENS JOBS WITH GOOD PAY 2021

I was broke as well . Many of my pals worked part-time and boasted about how they were able to cover their costs on their own.


I was quite interested in learning more about part-time jobs. My buddies advised that I teach English and give home tuitions. But I was engrossed in it. I desired a method that would entice me to devote time. Fortunately, there are many of internet occupations for kids and students who are serious about making money on their own. We are fortunate to have access to technology.


We , the members of generation Z, are the only ones who are aware of how much we know about today’s technology and how we can utilize it to influence our future (Of course, I’m referring to money).

Without further ado, let’s get started! Let’s take a look at easy online teens jobs with good pay in 2021 :


Make money by blogging


Make money by blogging

Nowadays, blogging is a path to becoming a millionaire. If you’ve tried it and have different feelings about it. Then I recommend that you remember that everything important in life takes time. Just keep doing what you’re doing. The more you wait, the larger the fruit will be.


Blogging does not necessitate that you be an expert in the field. Alternatively, it may not necessitate the use of a writer’s skill. All it asks is that you write about something you’re passionate about.


Simply share what you know with others. Just write about whatever it is that you enjoy. Slowly, you will see that your writing will provide you with a consistent income at first. I mean, blogging is similar to investing: the more you put in, the more you get back.


Start a youtube channel


15 EASY ONLINE TEENS JOBS WITH GOOD PAY 2021
15 EASY ONLINE TEENS JOBS WITH GOOD PAY 2021

You have a YouTube channel with a lot of subscribers, right? Really..?

Do you believe it’s surprising?

I regret to inform you that it is not the case. Because nowadays, every second person you encounter has a YouTube channel that they started years ago. And that’s not even the worst of it. They’re already generating a lot of money from it.


So, what exactly are you waiting for? Start a vlogging channel if you enjoy travelling. Demonstrate the beauty you’re enjoying. Start a cooking channel if you enjoy cooking.

Have a great sense of style.? Then you should already be an influencer. Fashion influencers are making a lot of money. You are free to begin with any topic.


Manage social media for money

We’ve all noticed that social media has become an integral part of our daily lives. No, I’m not talking about how we can’t go a single day without scrolling.


I’m referring to folks that run businesses on these platforms and make money in a variety of ways, such as :


Some people use social media to sell their wares online. They are promoting their brands and driving traffic to them. Sometimes people earn money by displaying their talents, such as painting, singing, and dancing.

However, have you ever noticed that, much like in an offline business. When there are so many individuals involved, a single person can’t handle it ?

People who have become extremely well-known as a result of their profession , pay people to run their social media businesses.


Most essential, social media companies require someone to handle their accounts ho can make their feed appealing and approachable. They must also learn to be consistent. As a result, they’ll need someone who can handle it.

You may only be recruited as a social media professional if you have amassed a large number of followers. Your feed’s inventiveness and substance are enough to show anyone how much you know about managing social media accounts. So, if you’re familiar with social media. Then you should give it a shot.


Job for being a chatterbox


If you’re an extrovert who’s gotten into a lot of trouble because of it. It could  actually help you make a lot of money. Yes, ofcourse Guys, I’m not joking.


On skima talk, All you need is to be a native English speaker, and the job is yours. You may teach people English on this platform . You can get paid for communicating with your clients just for 30 minutes and get paid $10.


Another vital need for this employment is that you must be at least 16 years old. This employment pays you well enough to cover your daily expenses.


if you need more teaching jobs read this blog here.


Freelance with fiverr


I can’t emphasise enough how simple it is to start making money online with Fiverr. But for teens it could be pretty hard in the beginning so i’ll recommand not to choose this option. But as there are teens who highly recommand it because it does provides jobs for teens. This could be your first big step toward internet success if done right. Anyone can make money on Fiverr, in fact. 


To begin earning, all you need is a “talent.” Skill does not imply mastery of a specific field, such as graphic design, website design, or coding. Skill refers to your capacity to perform specific tasks or types of tasks. The only thing you need to consider is having a payment option via which you may legally withdraw your earnings.


Fiverr is not a platform where you can make fast money. Because you’ll need a little patience and a lot of hard effort here. Here, your work speaks for itself. You should hone your expertise so that it attracts customers.

I recommend that you use Fiverr for a few days. You’ll get a sense of it. If that’s a place you’d like to work or not.


Become a proofreader


One of the best online jobs for teenagers is proofreading. This work is both flexible and simple to perform. If you enjoy correcting other people’s grammar and can’t tolerate it when they get it wrong. Then you must approach this work in a certain way.


Your job include ensuring that all written content is free of grammatical errors, including spelling, typography, grammar, and content layout.

Just go for it , look no further than becoming an online proofreader.


Earn by doing activities on swagbucks


Swagbucks is a popular game among youngsters. This app is used by every second teen to make money.


Do you enjoy listening to music? Everyone is, of course. Why not make money from it? I mean, I’m aware that there are numerous applications and websites that pay for simply listening to music. Isn’t it true that this generation has it quite good? When did people on Earth have this kind of privilege?


In your spare time, you can actually do things and earn money. Simply by engaging in the following activities :


  • Funny videos to watch
  • Playing video games
  • Searching the internet
  • Responding to questionnaires
  • Online shopping

Those who use it on a regular basis earn a substantial amount of money. You use Twitter, Instagram, and Snapchat on a daily basis, right? Use it on a regular basis to earn money. 


Start writing on medium


Medium is similar to YouTube, except that you use it to write content. What makes it different from blogging, you could ask. Right.


You don’t need annoying advertisements to make money here. Simply create your content and assign a price to it. Medium is a website where paying users can read your content in exchange for a fee.


Gaid paid for your Handwriting


Have you ever had your handwriting complimented? Then this is the job for you. Believe me.

People who do calligraphies fascinate me. It appears to be quite gratifying. I had no idea until I saw individuals on the internet crafting handwritten cards for special occasions. People still appreciate handwritten letters and cards.  As a result, they hire individuals to do it.


You can create and sell fonts in addition to designing cards. Your fonts can be available to a larger audience. Also you may sell it over and over again, and each transaction brings you money. You wouldn’t have known about it, I’m sure. But don’t worry, I’ll make things simple for you.


I’ll list some websites where you can get started with calligraphy.


Fonts.com or MyFonts.com 

Etsy 

FlexJobs

Upwork

DaFont



Earn money for sharing your opinion


Have you ever aided a buddy by just offering advice? As an example, sometimes a piece of advice can make all the difference in your life. Isn’t that so? If you have any thoughts that you’d like to share with others. Why not make money from it?


How about earning a decent living simply by sharing your thoughts with others? You can get paid to share your opinions with Survey Junkie .


There are several topics you can opt :


Beverages –   What is your favourite soda or drink brand?

Cosmetics –     Can you tell me where you get your makeup from?

Restaurants –  Where do you like to eat the most?

Video games – Do you enjoy watching video game streams?


Become a twitch streamer


Are you a video gamer? Is that correct? Surely you’ve tried Twitch?

If gaming is your thing and you haven’t checked out Twitch yet, you’re missing out.


You can play online games all day long and make a living doing so. All you have to do is use Twitch to broadcast your gaming .People flock here to watch you stream. There are numerous methods to profit from it. 


Users can buy games through links on streams, and streamers get paid a commission on sales. It is possible to sell products related with streams through affiliate connections. Twitch broadcasters “broadcast” their games or activity by sharing their screen with followers and subscribers who can hear and see what they’re doing in real time.


Take pictures and sell them online


You may get money by selling your photos online. Naturally, we must recognise that photography is a skill. Those with the necessary abilities can take stunning photographs with their smartphones.


You’ve probably heard of Shutterstock. People are earning a decent life off of it here. It would be sufficient to just sell your photos. These images are used to generate blogs, themes, thumbnails, and social networking material. If you go to this website, you’ll get a good sense of what kinds of photos are in great demand and why.


What a wonderful thing it would be if you could convert your passion into a job. But first and foremost, let’s earn some money from it. Once your photographs are in high demand, you may be able to launch your own brand.


Earn money by typing


GoTranscript is a successful online transcription and translation service. They offer freelance transcription services. They employ individuals to transcribe audio files. Phone calls, podcasts, interviews, and meetings are just a few examples.


You’ll need to be able to type quickly and you’ll be good to go. So, if you want to make money, work as little or as much as you want.  you receive Weekly rewards via PayPal  . 


If you’re a teen with a lot of free time on your hands, this is the alternative for you. It provides a fantastic source of side income.  The more time you spend here, the more money you make.


Earn money from home with online data entry jobs


Since the entire world now lives online, data entry occupations have become fairly common. There are several websites that offer data entry jobs, but the one that I found is the finest is Clickworker.


Clickworker is a platform that seeks Internet users from all over the world who can help us generate or correct texts, engage in surveys, and search and categorise data.


As a Clickworker, you can sign up for free. You work independently, have a flexible schedule, and all you need is an Internet-connected computer or mobile device. On a freelance basis, you pick when and how much you want to work.


Take online surveys for cash


Surveys are a common way for people to make some extra cash online. I’m not sure why these websites pay very little, but still they come highly recommended when you ask someone. I’ve personally tested it. You can earn $20 to $100 per month. This could also be more or less.


I’ll recommend swagbucks, which is my personal favourite. I’ll mention a few more for you to try out as well. Swagbucks, on the other hand, is a well-known website. So, if you have a lot of patience, go ahead and try it. It’s not a bad way to make some money. It won’t make you wealthy, but  It takes less than 10 minutes to earn and is a simple process. As a result, it might work out well for you.


Here are a few websites you might want to check out:


Swagbucks.com

BrandedSurveys

Harris Poll Online

InBoxDollars.com

LifePoints

MyPoints.com

OneOpinion

Opinion Outpost

Survey Junkie

SURVIVAL TIPS FOR TEENS LOOKING FOR ONLINE JOBS

  • SET UP A PAYPAL ACCOUNT

  • Most internet businesses will pay you using PayPal, so you’ll need to have one set up in order to be paid.

    PayPal no longer offers student accounts, which is a problem. You are welcome to use your parents’ account.


    • BEWARE OF FRAUDULENT ACTIVITIES

    You should be wary of Internet frauds that urge you to pay them to train you or ask you to pay them in return. Never, ever, ever pay them.


    It’s important to remember that no reputable company will demand payment from its customers. They may pay you less, but will never ask for payment.

    I definitely wish I started earning some online income when I was a teenager. Since , we didn’t have as much opportunities as we do today. Teens have such amazing opportunities nowadays to make money, be creative and create content. This helps them learn to be their OWN boss. I really hope you guys find this blog helpful .

    Must Use Website As A Web Dev

    Sticky post

    Here i have list some of the coolest and very important websites for web developers these websites are useful bundle for every developer so that there work load can minimize through these lists. Lets start Our First List which is

    First categories i have introduce in this list is ICON & Font Categories

    ICON & FONT CATEGORIES

    Flaticon

    flaticon is a website which can provides free vector icons and stickers for your projects. Resources made by and for designers. PNG, SVG, EPS, PSD and BASE 64 formats. flaticon provides icons in many categories

    Google Font

    Google Fonts is a library of 1,284 free licensed font families and APIs for convenient use via CSS and Android. The library also has delightful and beautifully crafted icons for common actions and items. Download them for use in your digital products for Android, iOS, and web.

    Font Awesome

    Font awsome a website where most of the web developer use this because this website provides you the platform where user can api based icons. Get vector icons and social logos on your website with Font Awesome, the web’s most popular icon set and toolkit. … Font Awesome is one of the top open source

    ICON 8

    icon 8 is a website where you can use free and paid icons . I am damn sure you like this website because this website provides different types of icons, illustrations , photos , music , and design tools . Personally i like icon 8 because this provides line icon and if you are using in your project that defiantly provides you the quality for your next projects.

    Hosting For developers

    Hosting is also the main part for developers for uploading there websites on free platform . Github is also a comes among these free platform .

    1. Github

    Must Use Website As A Web Dev

    Github is the platform where developers and companies build ship and maintain their software on github. github also provide hosting facilities where developers can host there websites.

    2. 000WebHost

    Free Web Hosting

    000WebHost is a free hosting option from Hostinger. This site is really awesome features Some of its features i have to mention below :

    One website
    No subdomains
    300 MB disk space
    3 GB of bandwidth
    One MySQL database
    Community forum, no live support

    First and final reason why you used this site personally because this site gives you freedom to make your site designing and maintaining without knowing any coding skills .

    3. Weebly

    lets firstly talked about Weebly . Weebly is a website where we use this website to make websites using CMS . Weebly is a new generation website builder to make your website faster and smoother without knowing any coding sills .

    • Features
    • Free website builder (Weebly!)
    • Free SSL security
    • Apps for your Weebly-built site
    • Ad-free hosting
    • Mobile app builder
    • Specifications
    • Disk Space: 500MB
    • Bandwidth: Unknown
    • Database: Proprietary
    • Control Panel: Proprietary

    4. InfinityFree

    infiniy is my one of the favorite site for hosting website . Either you have a wordpress website or a coded website . You can easily host your websites on infinity . You’ll have access to the Softaculous Script Installer to install WordPress. It has a very special offer to there customer thats why this site gain one of the more engagement to this site . infiniy have lots of features loaded like mention below.

    Taliban

    Taliban and the rise of chaos .

    Sticky post
    Taliban and the rise of chaos

    Everything is not very well in India’s neighborhood. Recently, the Taliban has seized Kabul, the capital city of Afghanistan, raising questions over the US and NATO (North Atlantic Treaty Organization) trained Afghan Forces.


    The Taliban have proclaimed that there will be no witch hunt, that it will respect a transitional process, and that it will work for a future Islamic system that is acceptable to all.


    India and its Neighbors:


    Things aren’t looking good in India’s vicinity. The Taliban has seized Kabul, Afghanistan’s capital, raising concerns about Afghan forces trained by the US and NATO (North Atlantic Treaty Organization).

    The Taliban have stated that there will be no witch hunts, that the transitional process will be respected, and that they will strive for a future Islamic system that is acceptable to all.


    What is Taliban? Who are these people?


    The Taliban, or students in the Pashto language, emerged in the early 1990s in northern Pakistan following the withdrawal of Soviet troops from Afghanistan.It is an Islamic fundamentalist political and military organisation operating in Afghanistan. They have dominated Afghan polity for quite some time and feature regularly in international affairs.

    The Taliban have been fighting against the U.S.-backed government in Kabul for around 20 years. They seek to reimpose their strict version of Islam in Afghanistan.


    The Taliban’s History :


    On 11th September 2001, terrorist attacks in America killed nearly 3,000 people.So, a month after 9/11, the US launched airstrikes against Afghanistan (Operation Enduring Freedom).After the attacks, the NATO coalition troops declared war on Afghanistan.

    The US dislodged the Taliban regime and established a transitional government in Afghanistan.The US had reached the conclusion long ago that the war was unwinnable and approached for peace talks.


    Peace Talks in Murree :


    In 2015 the US had sent a representative to the first-ever meeting between the Taliban and the Afghan government that was hosted by Pakistan in Murree in 2015.However, the Murree talks did not progress.


    Doha Talks:


    In 2020, before the Doha Talks started, the Taliban had maintained that they would hold direct talks only with the US, and not with the Kabul government, which they did not recognise.In the agreement, the US administration promised that it would withdraw all American troops from Afghanistan by 1st May, 2021.

    The deadline has been pushed to 11th September 2021.This provided the Taliban a sense of victory and demoralised the Afghan troops.The Taliban promised to reduce violence, join intra-Afghan peace talks and cut all ties with foreign terrorist groups.


    US Exit:


    By July 2021, the US claimed that it had withdrawn 90% of the troops and Taliban claimed that it had controlled over 85% of the Afghan Territory.

    By August 31 2021 the United States evacuated its citizens and soldiers and bade goodbye to the country which it visited 20 years ago.


    Current Scenario:


    Taliban has seized Kabul and Many ministers along with the former President have fled the country.This is the first time since their ouster 20 years ago in the wake of the 9/11 strikes that Taliban fighters have entered the city — they first seized the Capital in 1996.

    Among the cities that fell is Jalalabad in the east, and many evacuation missions are set in motion.


    Cause of Capitulation:


    • US’ Unconditional Exit

    The US decision to pull out its troops unconditionally without waiting for a negotiated political settlement regardless of consequences that were almost entirely predictable other than the speed with which it occurred.


    • Afghan’s Psychological Denial:

    Afghan’s psychological denial that the US would indeed leave as they warned, a lack of military strategy, poor supplies and logistics, indefensible and thinly manned posts, unpaid salaries, phantom rolls, and a sense of betrayal, abandonment and demoralisation, all played a role in the capitulation.

    The Afghan had technical dependence on the US for air support, weapon systems, intelligence etc.


    • Lack of Preparation

    The Afghan Army was unprepared and caught by surprise by the Taliban offensive.


    • Lack of Training of Afghan Forces

    The Afghan National Army (ANA) was never really trained and equipped with the normal attributes of a national army capable of defending territory with adequate mobility, artillery, armour, engineering, logistics, intelligence, air support etc for rugged terrain; and infantry battalions and doctrines designed for it.

    Role of US in Current Situation :

    1. Invested on the War on Terror:

    Most of the US’ effort went into grooming Special Forces units meant to recover targets of urban terrorist attacks, at which they acquitted themselves admirably, but not offensive operations.

    In sum, they invested just enough for the war on terror, but not the defence of Afghanistan although it was perfectly aware of the connection between the two in the Pakistani role in nurturing the Taliban.


    No Strategic Importance:


    After the end of the Soviet intervention and the fall of the Soviet Union, the US has never really considered Afghanistan of strategic importance.


    What were the Implications for India ?


    • Securing Indians:

    The first concern is for Indian diplomats, personnel and citizens based in Afghanistan.

    • Strategic Concern:

    The Taliban’s control will also mean a bigger hand for the Pakistani military and intelligence agencies to influence outcomes for the country, which will mandate a much smaller role for Indian development and infrastructure work that has won it goodwill over the past 20 years.


    Conclusion :


    The Taliban’s takeover of Afghanistan after the collapse of the Afghan government has caused anxiety in international capitals that the chaos and instability that has consumed the country will spread to its neighbours, potentially driving a flood of refugees as far as Europe.

    Covid Third Wave in India: Mask Your Health

    Sticky post


    Covid Third Wave in India: Mask Your Health

    Introduction:

                The whole world has been in chaos for more than a year now. Everywhere, people are dying, dying and only dying, yet some legends out there don’t need the help of a mask or any other safety measure to safeguard them from the lethal pandemic virus that has been making the lives of us so difficult to live for. INDIA’S COVID THIRD WAVE HAS ARRIVED. The country’s outbreak could worsen as soon as this month, with the next wave peaking at less than 100,000 infections per day in the best-case scenario and nearly 150,000 in the worst-case scenario.

    We have seen not one but two strong waves of the pandemic virus hitting us and taking many of our loved ones with it, but all we so is just hear the instructions given by the government . Discussed about it for a few days and then got back to our routine life, that is to ignore whatever is said by the government and roam our the city like nothing is going on . Seriously friends, we need to keep ourselves safe from the virus . Then only we can think about the welfare of others and especially our family. Save your family from Covid Third Wave in India: Mask Your Health

    Wear a Mask properly to protect yourself from third wave of Corona:


    Covid Third Wave in India: Mask Your Health

                Time and again, government officials, doctors, various NGO workers, front line workers, and almost everyone is indicating that only wearing a mask would help us from getting attacked by the pandemic virus. But we don’t listen to all of it. We just swat away their words from reaching our years, as if they were asking you to deposit a ten percent of your monthly income to the welfare fund. There are already many casualties, and even more are added to the list day after day, hiking up the count by a five percent increase per day.

    But we don’t even have the time to listen to the things that are in every way related to the welfare of us and our family. We have already seen two lethal waves of the Corona virus; we don’t have enough strength or the resources to combat with another wave, so please wear a mask. It is the only way to reduce the chance of getting brutally attacked by the virus by a larger rate.


    Save yourself and others by wearing mask

                We have seen our kith and kin, our friends and even the people who are not related to us in any way, suffer because of the virus and have felt extreme sadness and pity for them. But is that all what we are capable of? Only feeling pity for others condition, rather than working our best to reduce the condition that brings out pity in the first place. Believe me, the people who died because of the pandemic virus, would not want your shallow pity or sympathy. The only thing they would ever want or need you to do is to shield yourself from the lethal thing that took away their life on this earth.

    They would not want us to commit the same mistake that they committed, leading them towards their ultimate end. The only condolence we can pay for them is by maintaining our safety. But we are exactly doing the opposite of what we should actually do. It this how we are going to remember them or is this how we are going to react about the thing that took away so many lives? So guys please grow up and WEAR A MASK to avoid getting the same fate as the many thousand lives that have been killed because of ignorance and lack of knowledge.


    Wear a Proper Mask:


                We people of India are so smart that we think that we are deceiving the pandemic virus by wearing masks. Many of us are aware of the problems that we might face if we don’t wear a mask, and so we try to cover our nose and mouth to avoid getting in contact with the virus. But are we smart enough? I don’t think so, because I have seen many people, especially the strong women of my country, covering their nose and mouth with a hand or their shawls or their sari pallu, while interestingly gossiping about the various factors that affects the personal life of others, especially neighbors. They are doing it just for the sake of the government, which has been blowing the pom-pom tirelessly, asking people to wear masks wherever they go and follow proper sanitation methods.

                We might think that we are smart enough and strong enough to fight the virus if we are tested positive. But trust me when I say this, I have seen the people who have fought the virus and also people who lost in the fight for life firsthand, we are in no means ready for that fight or are we ready to face the health issues that arise after the intake of various medicines. We would rather be good without the touch of the pandemic virus. So ladies, don’t think that you are over smart and you are deceiving the virus, because it always finds a way to deceive you and it will be very happy to grow inside you, destroying your health in a rapid speed. So, please wear a proper mask, to safeguard yourself from the virus and your family from the grief of your loss.


    Violence of Rules During Covid :


                Not only women, but also men are ignorant about their health. I have seen many men, wearing their helmet as their mask and some daring men even roam around the city without a mask as if they own the entire province. They might think of it as some daring thing to do, but the seriousness of the issue lies deep within the roots of the family that could not function properly without their help, both emotional and economical. So, think about your family before you decide to impress your futile audience by not wearing a mask.

    Also, youngsters these days are so thrilled about breaking laws and rules that they are going as far as to roam around uselessly without wearing a mask and without even vaccinating. There is a place and a time to show attitude and also to break rules, and this condition is definitely not one of them. This concerns our life, welfare of the family and most importantly the future. So please stay away from your daring self until the situation comes under control and to survive from the Covid Third Wave in India: Mask Your Health

    Follow The Instructions:

                During the first wave of the pandemic virus, we were all so scared and clueless. We were scared for our lives, so we followed all the rules without any glitch. But when the government eased the lockdown step by step, we became lethargic towards the rules and instructions. We stopped wearing masks and did not follow proper sanitation.

    As a result, there came the second wave, much stronger than the first one . In a blink of an eye taking many lives in the blink of a moment every day. Then came another lockdown, ensuring the safety and precautions to be taken to avoid being the victim of the virus. We diligently followed all the rules and by then vaccinations were available too. So we took the steps needed to get a vaccination and tried our best to shield our lives. But what happened to all of that when the government eased the lock down again?

                We started ignoring the rules once again and all the instructions . Warning given by the government are falling on deaf ears till now. It is like we are able to follow all the rules and regulations only when we are confined inside the safety of our homes. Once we are outside, every precaution and instruction just flies out into the air. That is also the reason; the threat for a third wave is looming above our heads, like a hanging sword.

    If we continue behaving like this even after facing the brutalities of the pandemic virus two times. I don’t know what to say to you to make you understand. If we continue to behave like this, then is better if the government decides. Whether to lock every one down inside their house or better in prison until the threat completely dies down. Protect yourself from Covid Third Wave in India: Mask Your Health and stay at home .

    Vaccination Means Protection:

                The purpose of vaccination is to protect us from a major repair, if we were to encounter the pandemic virus. Its job is to protect and provide enough strength to us, not prevent the virus from attacking us. So, even if you are vaccinated, wear a mask and safeguard your life and strengthen your immunity. No one wants to test the effect of the vaccine, by voluntarily inviting the pandemic virus to feast on us. So beware and stay safe as in your safety lies the safety of your family and surroundings. If you can protect yourself from the virus then you can definitely protect the entire country from getting affected. Let us wear masks and conceal the chances of us getting affected, not the voice of wit and wisdom.

    Don’t be Ignorant:

                Many of us are well aware of the aftermath of our ignorance . So are so keen on following all the safety measures. But we are not looking at the people who are not following the rules properly. If we look at them without the glass of prejudice and preconceived notion shielding our eyes. We would know that most of them are genuinely not aware of the problems. They will face by jeopardizing their safety.

    So it is our duty as a responsible citizen to instruct them how to be safe and precautious. To avoid the virus. If we enlighten one person, they in turn will do it to someone else. This will continue like a chain reaction thereby creating awareness among many. But some people who are well aware of the lethal effects of the virus are also ignorant . We must make them understand by any means as their safety ensures the safety of the entire nation. The Covid Third Wave in India has been showing its effect -Mask Your Health and get to safety asap.

    Conclusion:

                 My dear folks we have lost too much time and people, being royally ignorant towards the rule. And instructions provided by the government. We have lost too many precious lives and also the economic downturn. It is not something that can be brought back up over night. For that we have to work hard day and night, and for that we have to be alive and healthy. So please take my advice seriously and wear a mask to shield yourself from the pandemic virus. Safeguard your family, which in turn will automatically safeguard our country. We don’t have the energy, strength or resources to face another wave of the virus. So beware and please wear a mask to avoid the third wave. Thank you for reading my blog on Covid Third Wave in India: Mask Your Health   

    -Devimanju Mohan.

    Top 12 Flexible Stay At Home Jobs For Moms

    Sticky post

    Top 12 Flexible Stay At Home Jobs For Moms.

    Online jobs demand isn’t going to fade away anytime soon. All you need is to find a work which suits your needs. Whether your goal is to work part-time to build savings or to generate a full-time income while working from home. Work from home jobs have made us seen the world which we never even imagined. Like just with your laptop , sitting on your couch comfortably, you can make money as much as you want.

    This opportunity has opened to many women who are efficient home-makers and their careers took a back seat when they entered motherhood or when the domestic needs overcome their career goals. The start of a maternity break for so many women stretched into a break in career itself.

    We have written down an ultimate guide on Top 12 Flexible Stay At Home Jobs For Moms. these jobs are the best to do part time which will fit according to your schedule.


    Why women financial independence is crucial..?

    It doesn’t depend whether you are married , single , Windowed or divorced. A woman financial independence is very crucial . Why .?


    To stop feeling dependent:


    Before marriage – Dependent on father

    After Marriage – Dependent on Husband

    In old age – Dependent on your children’s.


    This is a sort of life that every girl in India is living right now. Right.? Are you one of them ?

    No matter how strong the bond is between you and your husband. No matter how much he loves you. Being independent will boost your self-esteem. You would feel much more confident about yourself. You must not feel yourself like a pushover. Earn enough so that you won’t have to ask for money from someone else.


    To gain respect in society

    It’s a very sad thing that most of us have seen. That the moms and house wife’s doesn’t get the respect they deserve. The domestic violence and the bad treatment from in laws is a norm that mostly woman’s has experienced. But, the women who is working and earning has a different story. They most likely feel confident enough to face any violence.


    Take your own decisions

    Once you became financial independent. No one tells you what to do or how to do. Women often feel low. Financially independent woman can fulfill her wishes . You can go for a trip with friends, it boosts your morale.


    To be a role-model for your kid’s

    A woman who can support the family financially, socially, emotionally and so on is a role model for her children. Kids see for themselves that gender bias is created by society . When a woman is strong, confident and sure of herself it doesn’t mean anything. . If kids see their mothers financially independent, they will understand the value of money and will get inspired to be self-sufficient in life when they grow up.


    To meet the rising cost of living:

    Upsurge in prices is noticeable since the last few decades.Be it owning a decent home, sending your kids to a good school and living an above average standard of living has become very high. Hence, 2- earners certainly fare better. A financially independent woman can not only contribute to the everyday expenses of the household, but also help to meet the family’s financial goals.


    Share the burden of your Other half


    Hold down a job to share your husband’s burden. If we talk about the pandemic , many have lost their jobs. Some are experiencing pay cuts. It leads to a stressful time because of it. If you will support him. He might feel less burdened.


    What is a Good Stay at Home jobs for Moms ?


    A good job for a stay at home mom is not that hard to find. The desire to have a proper career while being available for their children can parlay into landing a flexible job that melds to a working parent’s schedule and allows family to meet the financial needs. The job not only will pay great but also be easy enough to do. 

    With the right amount of knowledge and determination towards it , you can make this happen.


    1. Part- time Tutor jobs for moms


    A part-time tutoring career can be ideal for your hectic mom schedule

    A part-time tutoring career can be ideal for your hectic mom schedule. Ever since the lockdown has been imposed. The education system has collapsed. Parents are more worried about the education of their childrens. The COVID-19 dilemma has compelled educational systems all across the world to seek out alternatives to face-to-face instruction. As a result, teachers and students have started using online te kiaching and learning on a massive scale.

    When compared to the alternative of not going to school, online learning has proven to be a valuable tool for continuing to build skills during school closures. So, the As a result, tutors are in higher demand these days. Don’t let this chance get away.


    2. Become a Freelance Proofreader


    Proofreading could be the ideal stay at home mom job for you if you have a keen eye for detail and can spot problems quickly when reading.Proofreaders who work from home earn an average of $45 per hour. This wage is also determined by the number of clients and the number of hours you are willing to work.

    Proofreading is one of the finest work at home jobs for moms because it offers a lot of freedom and doesn’t require any prior experience or a degree. You’ll also be exposed to competitive compensation and the option of owning your own business. From all the 12 flexible home jobs for moms it has the been the most suitable one .


    3. Make a living as a virtual bookkeeper.


    As a virtual bookkeeper with little to no experience, you can charge $60 per hour and gradually increase your rate to up to $100 per hour as you gain more clients, experience, and skills.

    Finance and accounting will always be in high demand, and businesses require a wide range of these services. This could be a perfect work from home jobs for moms. 


    4. Begin an Amazon FBA Seller Business


    If you want to get started as an online seller in the world of e-commerce, you must have probably heard about Amazon’s Fulfilled by Amazon (FBA) business model.

    It is a set-up where you buy products on sale or at a lower price from regular retail stores, ship them to Amazon, and resell them at a higher price .  This is also referred to as a retail arbitrage operation.

    Before you get too excited about your big wealth machine, there are a few important details to chisel out regarding what you’re selling, where you’re going to receive your product, and where you’re going to market it.


    5. Start a Blog


    I truly think that blogging is by far the most flexible and why don’t go with the best stay at home mom job that generates significant an income stream but rather work across your schedule from home or where ever?

    As a stay-at-home mom, There are many moms who  opted to create money from blogging. Many people believe that earning a decent living takes a long time, but this is not always the case. After only a few months of blogging,  witnessed earning was more than $2,000 per month.

    Blogging , is not a get-rich-quick scheme. It may take some time and consistency to see the fruits of your labour. But it’s all worth it in the end!


    6. Become a Transcriptionist


    Transcription work can provide a good living and, more importantly in this day and specially for moms , it can be done from home.

    Transcriptionists convert video or audio files into text. Certain fundamental skills are most required if you want to work as a transcriptionist. One of these is a strong command of the language you intend to transcribe.

    It can also be lucrative. According to Payscale, the average transcriptionist salary in the United Kingdom is £19,909 per year.


    7. Make a Living as a Freelance Writer


    Freelance writing is extremely adaptable and is regarded as one of the most lucrative and legitimate stay-at-home mom jobs that pay well. In fact, You don’t need a formal degree to be a freelance writer, but if you’re just starting out, you can educate yourself in some way so that you can produce quality work.

    There are many companies hiring transcribers these days, and they all have different rates. It all depends on the level of experience.

    Being a mom , you could turn this stay-at-home job into a rewarding career with numerous advantages.


    8. A virtual assistant job for moms


    A virtual assistant is a freelancer who works remotely to provide online support. He or she provides services to individuals or organisations but does not visit their clients’ offices. The job of a virtual assistant is to work from home. Many online businesses and entrepreneurs hire virtual assistants to assist them with various business tasks.


    As a general assistant, you will be responsible for:

    • Your boss’s and clients’ emails
    • Inquiries by phone
    • Making appointments and purchasing tickets.
    • Following up with the client.
    • Calendar administration.
    • Management of databases and files

    9. Teach English Online


    Teaching English as a second language online is a popular and growing field these days. The pay for online teachers is determined by the company for which you work. Companies that provide online teaching services typically offer a base salary plus bonuses.

    Teaching English online has grown in popularity and demand over the last few years, and it doesn’t appear to be slowing down anytime soon. With the rest of the world catching on to the online ESL teaching craze, it seems like new online schools and teaching platforms crop up every other week, with the majority of them having one thing in common – they all teach English online. It is one of the top 12 flexible home jobs for moms.

    Here is a list of 12 best paid online teaching job.


    10. Social Media Specialist


    A Social Media Specialist should be familiar with the target demographic for each social media platform, as well as how to create persuasive material that is tailored to the channel’s normal interactions.

    A Social Media Specialist could be in charge of strategy, community management, creative directing, customer support, copywriting, and data analysis, among other things.

    So, if you want to be a stay-at-home mom who also works as a social media manager, one easy approach to gain clients is to go to small, local businesses in your neighborhood.

    Here is the full details about what a social media specialist could do .


    11. Graphic Designer


    A graphic designer’s job is to turn written content into a visual representation. Graphic designers are well compensated. Almost every other business nowadays needs and hires a graphic artist to advertise their brand. You must be familiar with design applications and technology such as Photoshop, Adobe, Corel Draw, and others to be considered for this position.

    You’ll be expected to submit original and out-of-the-box ideas for posters, site design, logos, layouts, pictures, graphics, or visuals. Your major goal is to produce and develop something that will not only inspire individuals, but will also aid in the targeting of the target demographic. If you think you have a creative nook and can put thoughts into visuals, this could be the right job for you.


    12. Data entry agent


    To update data from outside sources into the company’s server, a data entry agent is required. Unlike prior occupations, this one does not necessitate any specific technological abilities. Microsoft Office skills are required. You can easily qualify for this position if you have basic typing and communication abilities, as well as a high school diploma in English.

    You will be responsible for keeping the company’s data current and ensuring that it is easily available to all employees. Either you’ll have to transcribe information from phone calls and recordings, or you’ll have to transfer paper data into the software. Although data entry workers who work from home earn less than those who work in an office.

    Conclusion :

    As you can see, there are a variety of full- and part-time employment that can lead to a career for stay-at-home moms. The amount of money you earn is entirely dependent on how much time and work you are willing to devote.

    Hopefully, this comprehensive list of Top 12 Flexible Stay At Home Jobs For Moms will serve as a valuable resource and reassure you that working from home is a viable option.

    Please share this article if you found it useful and know someone who would benefit from it. Perhaps you know someone who might be interested in learning how to generate money as a stay-at-home mom. 12 flexible home jobs for moms will guide you to find the most suited one .


    The 12 best paid online teaching jobs in 2021.

    Sticky post

    Do you need a simple teaching job ? Where you don’t need to study before teaching..? Where you can work from home . Also, In return you get to earn a steady amount of money. Want.? How about teaching English online ? If you can speak English.You need to stick to this blog till the end. Teaching English online has ample of benefits. In this blog we are going to introduce you to the platforms which provide the best paid online teaching jobs in 2021.



    Benefits of Online Teaching Jobs. 


    Finding a job which allows you to be at your comfortable place. The one where you can securely do your work. As the pandemic has totally changed the world for good. Whether it is the process of getting a job or the education system. Taking Online classes is a new norm of today’s world. But it has its own perks like :


     You have reasons to work from home.

    During this time , we need to ensure social distancing. It is only possible if we stay at home. A comfortable and a secure environment would be great to have. It won’t cause any risk to you or your family. 


    Let you explore digital learning.

    We have numerous technologies to alleviate the burden of work. The only way to have continuity in education. With these gadgets, work has been pretty easy lately.


    Flexibility to choose your own schedule.

    Stay wherever you are and conduct online classes whenever you want. Jobs according to your flexibility are a lifesaver. Like, balancing life can be really hard sometimes but not with this job.  


    There is less pressure. 

    In traditional classrooms, teachers face a lot of problems in various things. Take it in handling numerous students at a time or making them understand perfectly.


    What are the best companies for teaching English online in 2021?


    There are companies who offers a wide range of tutor options. Accreditation and pricing, incentives and many perks . whether it is teaching by video conferencing and audio chat and or even advanced whiteboard technology. Online tutoring services provided by them are great for students of all ages, from elementary school through college.

    If you’re simply looking for a company to match you with a student .we have number of amazing websites wher you can apply and become a tutor .

    To Become a English Online or Other subjects Tutor :

    These websites are going to provide the paid online teaching jobs in 2021. Some offer only english and language tutoring jobs . while, some websites provide any subject offers. All you need is the complete requirements and qualifications which are required by them. Remember this , getting a paid online teaching jobs in 2021 is the easiest job offer one can find . As the schools are only able to provide classes virtually due to pandemic. The tutors demands for students has reached high. So apply everywhere you get the chance to apply and seize the opportunities coming in your way.


    1. GoGoKid



    This company is based in Beijing, connects Chinese students with native-English speakers from all around the world through their virtual classes.

    It is currently on a mission to revolutionize language learning through the use of cutting-edge technology.  

    As a GoGoKid tutor, you’ll have to teach 25-minute, one-on-one online English lessons with young Chinese students. It also provides you with its professionally developed curriculum so you want encounter any problem while teaching .  

    Required qualifications:

    • Bachelor’s degree in any stream
    • Min. one year of teaching experience
    • Native English speaking proficiency
    • Clear criminal background check

    2. iTutorGroup



    iTutorGroup is also based in Shanghai and offers personalized learning experiences to students and business professionals in a variety of subject areas. This online platform provide students to have access to the high quality teaching consultants, 24-7, anytime and anywhere.

    You’ll interact with students one-on-one in a virtual learning environment. You’ll teach English to both kids and adults, as well as teach business English. 

    iTutorGroup offers professional development to tutors to help you improve as a teacher. Moreover , if you want to learn a new language you can learn to speak Chinese for free with complimentary Chinese tutoring.  

    Required qualifications:

    • Bachelor’s degree any stream
    • Min. one year of teaching experience
    • Native English speaking proficiency

    3. Skooli

      

    It is one of the top online tutoring platform based in Canada.

    The platform looks for people who are passionate about teaching and want to help students learn English among other subjects. They select the best tutors from thousands of qualified educators.

    Even if you’re a former or retired teacher, or even a working teacher looking to supplement your income, online English tutoring could be great for you. Besides English you can also teach whatever subject in which you are an expert.

    Required qualifications:

    1. Bachelor’s degree
    2. Major : English or a Related field

    4. VIPKid


    VIPKid envisions a global classroom where all children feel connected to their education. Since 2014, we’ve grown to almost 1,000,000 students on our platform. As a VIPKid’s student community continues to grow, so does our demand for teachers.


    5. QKids


    Based in Xiamen and delivers a narrative game-based learning platform to over 600,000 Chinese students and counting. This dynamic learning curriculum is making learning English both fun and effective!  

    It connects over 1 million international young learners between 4 – 12 years old with tutors ,online teachers, educators, stay at home parents, college students, and all those who have a passion for teaching.

    You will get to teach alongside adorable cartoon characters through animated storytelling and interactive games. Therefore , there’s no need to plan lessons. Since, all lesson plans are already provided through the app. 

    You can also take advantage of attendance and performance bonuses to boost your teaching income.

    Required qualifications:

    • Bachelor’s degree
    • Native English speaking proficiency
    • Eligibility to legally work in the U.S. or Canada
    • Teaching license
    • Some teaching experience preferred

    6. DaDa

    It is based in Shanghai . DaDa is a professional online education institution. It recruits English teachers with high standards. They Rely on new technology and offer one-on-one English learning instruction provided by exclusive English teachers for children aged from 4 to 16.

    Tutors can pick their own schedule, and build a flexible teaching timetable that fits you. It also offers teachers extra perks like bonuses and referral rewards.

    Required qualifications:

    • Bachelor’s degree
    • Min. one year of teaching experience
    • English teaching qualifications like TEFL, TESOL etc.
    • British or American Accent

    7. Magic Ears


    Magic Ears is an innovative online English learning platform for students ages 4-12. They have a mission to provide the best online career opportunity for teachers. User-friendly platform which makes teaching fun and fruitful. Besides , They have a supportive community culture. Therefore , It allows you to work as part of a warm and happy family.

    Required qualifications:

    1. Bachelor’s degree
    2. Speak English at a high level
    3. TEFL certification preferred

    8. BlaBla EdTech


    The best paid online teaching jobs in 2021

    It is based in Shanghai, China. It’s a unique virtual learning platform. It propel teachers (native English speakers) to create engaging video content for users to learn at their own pace online. Hence ,The mission is to foster a more convenient, fun, and effective teaching. And to provide a better educational experience for both teachers and learners.

    Required qualifications:

    1. Bachelor’s degree
    2. Minimum one year of teaching experience
    3. Speak English at a high level

    9. Whales English


    The best paid online teaching jobs in 2021

    It is an online school based in Beijing, China. It caters to language learners from the ages of 3 to 18. Their mission is to provide high-quality education for children from all socio-economic backgrounds to minimize the gap between the privileged and underprivileged.  

    Required qualifications :

    • Education: Bachelor’s degree or higher
    • Teaching Certificate: A TESOL/TEFL/CELTA
    • Teaching Experience: minimum 1 year experience teaching children
    • Native speaker from USA, UK, Canada, Australia, Ireland, New Zealand

    10. Stewart English


    It is an online tutoring platform where native tutors are hired by them . They teach English, French or German on this platform. 

    Required qualifications:

    1. Bachelor’s degree
    2. One year of teaching experience

    11. Smarthinking


    The best paid online teaching jobs in 2021

     Smarthinking from Pearson offers a variety of subjects, from PreK-12 to higher education, and available with 24/7 tutoring. Tutors are educators and professionals with an overall average of nine years’ experience in their subjects. In addition to training and certification by Smarthinking, about 90% of tutors with this program have earned master’s degrees or Ph.D.s in their fields.

    12. Varsity Tutors


    The best paid online teaching jobs in 2021

    It offers tutoring in more than 2,500 subjects from more than 40,000 available tutors. In addition to lessons of kindergarten through grad school. Also, offer test prep and certifications for professional skills. Their Instant Tutoring program lets students connect to someone online in as little as 15 seconds for things like quick homework questions and exam prep. 

    The above elaborated list is a way to find The best paid online teaching jobs in 2021.

    People search :

    Top ways to make money online as a student in 2021. –

    Challenges to face in next decade – What impact it can have on Earth and humans.

    Sticky post

     Challenges and impediments in the upcoming decade:

    We need diversity of thought in the world to face the new challenges.

    Tim Berners Lee


    In this fast paced world everything has been so dynamic. From mere hunters and gatherers , humans have come a long way. From the basic motivation of just survival, it has become a lot more ranging from entertainment, industries, globalisation, population, governance etc. Revolutions have shaped us now and then. Lots of devastations be it in the form of natural calamities like floods, earthquakes , volcanic eruptions, etc. or man made disasters like 2 world wars, Chernobyl disaster, proxy wars have taken place. It’s 2021 and the decade has a lot more to offer. Better lives and challenges stand in the way. But let’s discuss today about the Challenges to face in next decade – What impact it can have on Earth and humans.


    Where are we winning?

    • Increasing access to water
    • Increasing literacy rates
    • Extending life expectancy at birth
    • Reducing poverty (living on $1.25 a day)
    • Reduce in infant mortality
    • Reducing war
    • Reducing HIV prevalence
    • Increasing the number of Internet users
    • Increase in GDP per capita
    • Increasing the number of women in parliaments
    • Increasing secondary school enrollmentI
    • mproving energy efficiency
    • Low population growth
    • Reducing the prevalence of undernourishment
    • Reducing nuclear proliferation

    Where are we losing?

    • Increasing total debt
    • Increase in unemployment
    • Income inequality
    • Increasing the human ecological footprint/reducing biocapacity ratio
    • Greenhouse gas emissions
    • Increasing terrorist attacks
    • Reducing voter turnout

    Where is there either no significant change or change is not clear?

    • Corruption
    • Freedom rights
    • Electricity from renewables as compared to non-renewables
    • Forest lands
    • R&D expenditures
    • Physicians per capita

    Some important factors to be encountered in the upcoming decade:


    Plastics


    Challenges to face in next decade - What impact it can have on Earth and humans.
plastics are the major issue to be faced in upcoming decade.
    Challenges to face in next decade – What impact it can have on Earth and humans

    Awareness against plastic pollution is spreading yet not fast enough. When it comes to the plastics crisis our researchers say that Only a small amount of the current activity has truly transformative potential.

    They found that around eight million tonnes of plastic enters the ocean every year and only 14 percent of plastic packaging is recycled. And, 83 per cent of the water we drink contains plastic fibre.

    Although the public’s and businesses’ reaction has helped up recycling efforts and invent compostable alternatives and increased activism, it hasn’t brought the fundamental shift needed . Still , the world needs to change the way it produces, consumes and treats end-of-life plastics, say researchers. The growing demand of convenience products and global throwaway culture drives plastic economies and it must stop, the report adds.


    Migration and climate


    climate crisis brings poverty . people for survival migrate to other lands. Challenges to face in next decade - What impact it can have on Earth and humans
    Challenges to face in next decade – What impact it can have on Earth and humans

    Climate crisis is increasing poverty, fuelling drought and creating food and water shortages. Adding to this, is the growing inhospitable world that’s driving the migration rate to higher and higher levels.  All this will lead to geopolitical instability.

    Cape Town, Bengaluru and Jakarta are running out of water and 100 million people, according to the World Bank, have been displaced by climate change. Also, a billion people are to migrate by 2050, says the International Organisation for Migration.

    Moreover, Researchers suggest that instead of looking for sustainability, becoming more resilient could boost survival. Reimagining refugee camps, rethinking products and changing models of governance may save the world from the impending calamity.


    Nationalism


    A divisive nature of nationalist movement is rising around the world, says the report. With the re-election of Hungarian nationalist leader, another nationalist gaining power in Brazil, Brexit negotiations and the China-US trade war, the world seems to be moving towards a phase of fragmented global politics, says the report. Nationalism encourages opposition and exclusion of groups.

    The number of people participating in politics has increased in the past decade, according to the Economist Intelligence Unit’s Democracy Index 2018. This may also impact Sustainable Development Goals as well as climate change, observe researchers.

    To overcome this, they suggest, people and organizations must look for new opportunities to come together with people from different backgrounds, build connections and empathy.


    Being online


    


Challenges to face in next decade - What impact it can have on Earth and humans.

    We are, 24X7, throughout the year, unregulated consumers of the internet. So much so that, social media is home to fake news, extreme views, trolls, deep-fakes, bots and data breaches.

    Soon, ensuring to keep the world plugged in without destroying the planet will become a challenge, says the report.

    Internet’s founding-father Tim Berners-Lee and professor of internet-law Jonathan Zittrain call for a repurposed internet that will be regulated and will protect users from fake news and data exploitation. Also, heavy scrutiny of tech giants is required.


    The rise of participatory democracy


    Challenges to face in next decade - What impact it can have on Earth and humans.

    Participatory democracy, which means a system that tries to maximise involvement of citizens in decision making, is rising and so are efforts towards an inclusive political system, the report adds.

    If this approach is to scale, more investment will be required. And, in the long run, local governments and civil society groups can adopt it. Also, businesses can engage with governments to overcome mass migration and climate breakdown.


    Changing consumerism in Asia


    By 2030, Asia will account for 59 per cent of the world’s middle-class consumption and India’s economy may overtake the UK’s in 2019. The wealth created may have helped pull many out of poverty, but the waste it generated and resources it exploited put more pressure on the planet that it can handle.

    To regulate this, there should be a collective social and cultural effort by brands. They can engage consumers in a two-way conversation about the future of materialism in Asia, say researchers.


    Biodiversity in free fall


    Challenges to face in next decade - What impact it can have on Earth and humans.
    Challenges to face in next decade – What impact it can have on Earth and humans.

    We are experiencing the sixth mass extinction event. And Compared to 60 million years before humans came into existence. Extinction is happening 1,000 times more, said scientists in 2014.

    Agriculture, the biggest driver of extinction, is causing 80 per cent deforestation and creating less space for wildlife.

    Plants and animals are adapting to this change by constantly migrating. Urbanisation too is adopting evolutionary processes.

    Researchers say this resilience and adaptation of change is our best hope.

    New research indicates that there are corals. Far more resilient to rising ocean temperatures and acidification . Also, regenerative farming systems, which aim to increase biodiversity and enhance ecosystem services. It also improve water cycles, increase resilience and strengthen the health and vitality of farm soil, could prove helpful.

    Challenges to face in next decade – What impact it can have on Earth and humans. i wrote what i thought to be dangerous for our environment. this list goes on. It would cause something we wont be able to handle in future . It would be wise enough to take actions and start doing something early .

    Conclusion:

    Lots of problems, lots of promises for a better world. It’s better we gear up and take a step forward so that we can combat these challenges and make this world a better place to live in. Taking care of the environment, living in harmony with all other creatures in sync will help a great deal. Improving life standards by providing education, better health care, employment opportunities and lessons of fraternity and brotherhood among different sects to make us realise this common goal of a happy one world. Hope you like my article on Challenges to face in next decade – What impact it can have on Earth and humans.

    Amit Pandey

    People also search for :-

    https://ziontutorial.com/unemployment-in-indiaa-major-challenge-to-deal-with/

    Milkha singh dies of Covid – 19 Cremation ceremony at 5 pm

    Sticky post
    Milkha singh dies of Covid - 19
    Milkha singh dies of Covid – 19 Cremation ceremony at 5 pm

    Legendary Indian olympian Milkha Singh succumbed to post covid -19 complications . His cremation ceremony will be held at 5 pm today. The conditions worsened on the Friday Evening. Doctors confirmed that his oxygen saturation level dropped and also had a fever.

    Milkha Singh discharged from the hospital after tested Negative.

    He was positive on May 20, and was brought to the private hospital in Mohali, Punjab on May 24. After testing negative, he was finally got discharge from the hospital on May 30 .

    When his condition got worst on June 3 , Immediately brought to the Nehru Hospital Extension at PGIMER . After a long battle with covid , he breathed his last on Friday Night of July 18.

    Milkha singh dies of Covid – 19 Cremation ceremony at 5 pm

    Milkha singh wife also died due to covid .

    wife of Milkha Singh Nirmal kaur.

    Milkha Singh’s wife Nirmal Kaur also died due to complications related to Covid. She was the former Indian women volleyball team captain, died on June 13. He could not attend the cremation of his wife as he was himself positive and in the ICU at the PGI. They both died in between the gaps of 5 days.

    Milkha Singh son’s statement :

    The statement issued by the son, Jeev Milkha Singh said, “It is with extreme sadness that we would like to inform you that Milkha Singh Ji passed away at 11.30 pm. on the 18th of June 2021. He fought hard but God has his ways and it was perhaps true love and companionship that both our mother Nirmal ji and now Dad have passed away in a matter of 5 days. We are deeply indebted to the doctors at PGI for their valiant efforts and the love and prayers we received from across the world and from yourselves.’’

    Narender modi showed condolences on twitter .

    Narendra Modi with Milkha Singh.

    The entire country paid glowing tributes to the legend. Prime Minister Narendra Modi tweeted his condolence message.

    In the passing away of Shri Milkha Singh Ji, we have lost a colossal sportsperson, who captured the nation’s imagination and had a special place in the hearts of countless Indians. His inspiring personality endeared himself to millions. Anguished by his passing away.

    He also added

    I had spoken to Shri Milkha Singh Ji just a few days ago. Little did I know that it would be our last conversation. Several budding athletes will derive strength from his life journey. My condolences to his family and many admirers all over the world.

    Celebrities on Twitter :

    Many celebrities came forward to show their condolences to Milkha singh on twitter. When they got to know about Milkha singh dies of Covid – 19 and his Cremation ceremony at 5 pm

    Virat Kohli

    legacy that inspired a whole nation to aim for excellence. To never give up and chase your dreams. Rest in Peace . You will never be forgotten.

    Sanjay Dutt

    You always made our country proud… India has lost a legend today. My thoughts and prayers are with the family ??#MilkhaSinghKing

    Mika Singh message

    The honourable pride of nation flying Sikh #MilkhaSingh is left us due to covid ..May God bless his soul rest in peace.. he will be remember forever as legends never die … bole so nehal sat sri Akal..

    people Also search for :

    https://ziontutorial.com/yet-another-strong-mutant-of-covid-strain-in-uk-covid-19-sars-cov-2-variant-vaccine/

    Android 12 Beta 2 can show the duration of the current call in the status bar

    Sticky post

    Android 12 is bringing a huge update in UI and UX part . Man . Android 12 beta 2 update makes easier to user to track of current call length . Also android 12 beta 2 is provides best user experices to the user for current call indicator lie in the status bar .


    mainly in previous version consist an call duration indicator appear after making an call to a user and call ended but this senario in 12 android case totally changed the status bar all the duration comes at the top of the mobile .

    Android 12 is replacing that step and by placing the chip at the status bar that shows call duration . Here “chip” indicates that a shape (comes from material design ). when we click on that & it triggers a call to action transition . which shows number of options like :

    Enable features
    System , Tweek , Mods and ther options for
    Android 12 beta 2 versikn

    These are the features which boom android 12 beta 2 . So from my opinion this version is best release from google . Also new material design is totally outstanding which work under the hood for making it’s update possible .

    Android 12 has also a very unique feature which automatically appear call transion from top bar of the android . New matarial design makes it possible for making it’s version outstanding and out of the box .

    Who Uses These Call Indicator Apps ?

    Most of the third party apps will using these apps ( e.g. Skype , Whatsapp , Viber etc ) will also be used for call duration . These are the apps which use this feature ( call duration )

    it is not the phone app that created the chip, but instead a custom Magisk/Xposed module by developer kdrag0n used to try out the new features in Android 12

    Android 12 Beta 2 Pros and Cons

    • Pros List :
    • Android 12 has many pros like it will give you the asthetic user interface for user
    • It has a unique tranision effect with fast processing

    Cons

    You can’t try out the new feature just as the current Google Dialer app doesn’t support it.

    people also search :

    who uses these features
    Best Natural skin care tips For glow

    Don’t Miss Best Natural skin care tips For glow

    Sticky post

    There are many ways to tackle skin problems without damaging your skin. You can use home remedies to protect your skin. There are lots of home remedies you can use for your skin. And it will make your skin good as well.

    Best Natural skin care tips For glow

    Aloe vera for glow

    As you know aloe vera is extensively popular for its beauty benefits. Not only skin but as well as it is also used for damaging hair. Aloe vera is a soothing gel which you can easily apply on your Skin. Aloe vera has highly healing and hyderating properties, these healing properties is benefit for those who are facing the problem of dry skin.

    NOTE :- you can also apply aloe vera on burn area or any wound. Aloe Vera is also known as a cleaning agent. It will clean your skin and provides best Natural skin care tips For glowmake your skin smooth and clear.

    Aloe vera has anti- bacterial, anti-inflammatory, astringent properties. These properties help in reducing the appearance of acne and scars.

    How to use it :-

    Take an aloe vera or if you have aloe vera gel you can also apply it. But natural aloe vera is way more Better for your skin. And honey.Mix these two in a bowl. And then apply it with the help of your finger tips in circular motion.Then leave it for 15 minutes and then rinse your face with cold water. For better result apply this aloe vera face mask for a week.

    Turmeric for Skin glow

    Turmeric contains antioxidants and anti-inflammatory components. These components help to glow your skin and brighten up your skin and also give luster to your skin. Turmeric also has a property to cure your acne and pimples. Turmeric removes the excess oil and helps in destroying the bacteria due to its antimicrobial properties. In summer lots of people are facing the problem of tan, then turmeric is the best way to remove tan and cure your skin and glow up your skin.

    Rose water

    Rose water has been used as beauty products for many years. It has antibacterial properties which reduce acne and also clear your skin. It also improves your complexion. As you know it has antibacterial properties so rose water also helps in healing scars, cuts and wounds. Rose water also helps to regenerate skin tissue.it also helps in reducing your skin pores and tone the skin. Rose water also helps aging skin.Rose water also helps in removing makeup. And this is the best way to remove your makeup.not only for makeup removal you can also use rose water for hair. If your hairs are damaged then you can use rose water to fix them. Rose water removes oil and dirt from hair. Rose water also hydrates the skin and refreshes them. You can simply use rose water for your skin,hair and eye area also.

    Coconut oil

    Coconut oil is also used for skin care. It has special therapeutic and healing properties. Lots of beauty bloggers used coconut oil for their skin. Not only for skin but coconut oil is also used for hair and massage.Coconut oil is filled with rich antimicrobial properties.Coconut oil helps in reducing dark circles. It also help in reduce puffy eyes because it contains anti inflammatory properties. Coconut oil also acts as the best suncream. Before you head out in the sun apply coconut oil which fight with sun radiation and protects your skin from damage. Tips :- if coconut oil is 100 percent organic and pure. Then it will provide the best benefits for your skin.

    Gram flour

    Gram flour is also one of the best for skin.It helps in many ways to cure your skin. Gram flour has immense beauty benefits. The best to remove tan is gram flour or besan. Gram flour also helps to brighten the skin. Gram flour also help in reducing oil from the face and cures your skin. Gram flour is also used as body scrub. Gram flour has healing and exfoliating properties which help in removing dirt from body and clean as well as brighten your body.How to use it :- Take a bowl, and 2 or 3 tablespoon besan and add yogurt and lemon juice ,turmeric to it. Turmeric is good for skin brightening.Mix it well, then apply the mask on your face.And wash off your face after 20 minutes.Repeat this three times a week to see a visible difference.

    Ice cubes

    Ice cubes are also used for skin care. Ice cubes help your skin in many ways. There are a lot of benefits of rubbing an ice cube on the face.Ice cube heals and prevents acne. It will also help in reducing puffy eyes. Ice cubes improve blood circulation in your skin and shrink your pores and make your skin glow. Ice cube is way better than a beauty product to heal your skin. Instead of using expensive beauty products you can use an ice cube in a day for your skin.

    How to Apply :

    If you rub an ice cube daily on your face it has the power to reduce acne and heal your skin. Not only the face but the ice cube also help in reducing dark circles or puffy eyes. Rub eyes cubes gently on your inner eye corner, upwards and towards in circular motion. And if you want a faster result than adding a little bit of coffee to your ice cubes it will work faster.Ice cube also works as a best primer. You can also use an ice cube instead of a primer. Ice cube works as a natural primer, tightens your skin and also gives you a natural glow on your face. Before applying makeup first rub 1 ice cube on your face and leave it for dry and then apply make.

    Coffee

    Coffee is an exfoliator and helps in stimulating blood flow. Coffee also helps in reducing acne and stretch marks. Coffee is a source of nutrients and antioxidants that help your skin. Coffee increases the blood flow in your skin and also maintains your pH level. Coffee facial scrub also help in skin brightening. If you have pores on your skin you can also heal them from applying coffee scrubs. Coffee also help in removing dead cells and in reducing dark circles. If you are applying coffee directly to your skin it will help in decreasing sun spots, redness and fine lines. If you are suffering from the problem of sunburn, coffee can also help in healing them.

    How to make coffee face mask :

    Take a bowl and add coffee and also add olive oil for better results, you can also use coconut oil instead of olive oil.Apply this paste in circular motion.Leave the mask for 15 minutes.Then rinse your face. If you want a better result apply this face mask three times a week.

    Highest CPC Keywords and Best Adsense Niches

    Highest CPC Keywords and Best Adsense Niches [2021]

    Sticky post

    Making money online is not a piece of cake but surfing through the complete content you are going to invest in. Wheather it’s your time or hardwork one should always have a complete knowledge about it. Blogging is a quite easy way to earn online if you have a better knowledge about it like highest CPC paying keywords by Google Adsense.

    Here is a list of highest paying keywords :

    Keywords. CPC ( USD )
    Insurance $61 CPC
    Gas/Electricity $58 CPC
    Loans $50 CPC
    Attorney $48 CPC
    Lawyer $42 CPC
    Donate $42 CPC
    Conference Call. $42 CPC
    Degree $40 CPC
    Credit $38 CPC.
    Hosting $31.91
    Claim $45.51
    Trading $33.19
    Software $35.29
    Recovery    $42.03
    Transfer    $29.86
    Classes    $35.04
    Rehab $33.59
    Treatment    $37.18

    What is a good CPC?

    Cost-per-click ( CPC) represents the cost to the advertiser every time someone clicks on their ad. In short Money made per click. Most online ad platforms require a target CPC for new campaigns to run.

    Is high CPC good or bad?

    If you want to see the best results with your campaign, you need to keep your CPC. I’ll ensure you to have a high return on investment. High CPC basically means your ads need improvement but if you have a high CVR or conversation rate then high CPC is actually a good thing.

    What causes high CPC

    The rates highly depend on the niche of the website since Google AdSense targets ads contextually. It also varies from country to country. If you’re running 4-5 adsense ad units on your website, you can be earning anywhere around $3-$5. If you’re running a niche website or a tech and educational website, the page RPM can go beyond $10 with indian traffic if properly optimized for click through rates.

    What affects CPC?

    There are a number of factors that affects CPC, including various factors :

    • Targeting criteria
    • keywords Competition
    • The text of the ad
    • The landing page.
    • The SEO
    • The maximum bid you’ve set, and more.

    What are the highest paying niches?

    First thing first, choosing the right niche for your blog or website is of utmost importance.

    Now, Creating a good content with a fixed goal of monetization is a good start. But one should find a profitable niche to start with.

    There are two types of niches ;

    • Microniche – Simply put in this you just start writing on any topic you like. Like you don’t particularly choose to write on specific topics.

    • Macroniche – In this you have a particular niche like health. Then you will only write blogs related to it.

    Micro or Niche what is better..?

    if you would realize and noticed micro-niche blogs, you might have realized despite of less traffic such sites make more money from Adsense.The reason is simple and that is eCPM for such blogs are so high that you get paid really well for CPC . So having a microniche website is a good thing to earn.

    Best-Selling Most Popular Niches to Make Money Online

    • Domains – Blogs on Internet Domains Like GoDaddy, Namecheap etc. It pays highest CPC.
    • Gadgets – Tech Gadgets like Apple products, best and cheapest Mobile phones.
    • Health – Health Related tips on various factors.
    • Google – Google Products
    • Microsoft – MS Office
    • Cryptocurrency
    • Banking
    • Automobile
    • Real Estate
    • Home Loans
    • Jobs
    • Self-Improvement – To Start with this niche might help you tapping into this $10-billion-a-year industry. It could prove a lucrative and rewarding venture to start. You could write ebooks , videos online, trainings and personal experience would be best to offer self- Improvement advices.

    • Online Dating – The worth of the online dating industry is $12 billions. It presents ample opportunities to make money. One could even start their own online dating website if feeling confidence enough.

    • Languages – Learning languages has become an extremely desirable skill to people. Nowadays the internet offers opportunities to learn a new language conveniently, efficiently and inexpensively. So many people take help from internet to learn other languages wheather it’s teaching English, Spanish or other languages online . It could prove to be a profitable, enjoyable and rewarding venture.

    But you want to keep in mind that there are variations based on location. If people writing blogs put up from asian country will get a low revenue per click ad compared to Us.. However, the people from Asia are well aware of that and instead of whining you must learn how to gain traffic from outside country.The overall content length , quality, SEO , keywords, and a perfect niche decides the overall revenue.

    How do I choose keywords?

    There are two ways to choose keywords:

    • Keyword which is most expensive and will help you to yeild the most per click.

    • Keywords which is the most popular one and will drive more people , which in turn drive more clicks. These two types are helpful for Google Adsense high CPC paying keywords Making.

    The strategy should be based on these two. You can adjust your content accordingly to incorporate a mix of both too.

    Conclusion :

    Before monetising the site , doing extra research is always better. It ensures that we are getting the biggest payout possible. Moreover, choosing the most profitable niches that are relevant to your target audience will be successful. The more relevant the ad, the more likely they will click, and that is how you maximize your revenue overall.Google Adsense high CPC keywords tips.

    Forces in Nation Building

    Role of Indian Armed Forces in Nation Building

    Sticky post

    When you go home, tell them home of us and say, for your tomorrow, we gave our today”.~ An evocative epitaph enshrined on the Kohima War Memorial Cemetery in Nagaland, India.

    Chetwode Credo:

    Role of Indian Armed Forces in Nation Building

    The safety, honor and welfare of your country comes first always and every time.The honour, welfare and comfort of the men you command comes next.

    Your own ease, comfort and safety comes last always and every time.

    The Indian armed forces i.e. the Indian Army, the Indian Navy and the Indian Air Force plays a significant role in the development of the nation. Since their existence they have not been limited to the mere safeguarding of borders and protection from external aggression but have also taken part in many humanitarian relief and civil assistance operations. Let’s see what are the major areas where defense forces contribute so that the nation can progress. So mainly in todays article i will discuss about Role of Indian Armed Forces in Nation Building .

    Safeguarding the borders:

    Role of Indian Armed Forces in Nation Building
    Role of Indian Armed Forces in Nation Building

    India is a massive country surrounded by number of countries, out of which two of them pose serious security threats to its sovereignty and territorial integrity i.e. Pakistan and China. Four wars with Pakistan in 1947-48, 1965,1971 & 1999 and the Sino-Indian War of 1962 supports this. Skirmishes at Sikkim border, clashes at Galwan valley near Ladakh, Infiltration through PoK and Jungles of Kashmir makes it imperative for the defense forces to protect its citizens from any external threat. The troops of the Army work selflessly so that territorial integrity of the nation is not compromised. The Indian Air force works hand in hand with the army providing support that includes logistics, air defense , medical assistance and the required firepower to decimate enemy targets. Indian Navy isn’t far from this. Having a coastline of 7516 Km, it’s the duty of the Indian Navy to secure its maritime borders, facilitate maritime trade and foster growth. 

    UN peacekeeping missions:

    India is one of the largest volunteers of the UN peacekeeping missions. Indian troops have served in Congo, Mozambique, Angola, Sierra Leone, Korea, Middle East, Cambodia, etc. and have done their job very well in installing peace and ensuring welfare for the common masses. India has suffered the highest number of fatalities (164 out of 6,593 personnel) among countries that have sent forces to the United Nations peacekeeping mission since 1948. Captain Gurbachan Singh Salaria from 3/1 Gorkha Rifles (an infantry regiment known for its valiant soldiers) was the first and the only Indian given Param Veer Chakra( India’s highest gallantry award in the face of enemy)for his exceptional courage and leadership during the UN peacekeeping in 1961 in Congo. This helps to increase the soft power of India and helps in strengthening diplomatic ties with nations as well. 

    Civil assistance:

    Indian armed forces are not only indulged towards security threats but towards any kind of threat. Take the examples of recent Cyclonic storms of Yaas and Tauktae. The Indian Navy and Army along with the NDRF and SDRF played an important role in the evacuation of people from affected areas and settling them to safe zones. Providing them rations and the medical services by the armed forces doctors saved many lives. In the Uttarakhand floods of 2013 the Indian Air Force  along with the Aviation Corps of army evacuated lakhs of people and helped them reach safe places. In this Covid crisis Indian Navy under the operation of Samudra Setu 2 brought medical equipment from nations that included ventilators, oxygen cylinders, concentrators and vaccines. Operation Namaste, Vande Bharat mission saw huge participation of the troops contributing towards reaching stability during the surge of Covid-19. The engineers from the army also help when a child falls into a borewell or a bridge needs to be constructed in no time. 

    Indian defense forces and sports:

    It doesn’t matter whether it is the country’s border or the playing field, duty comes first – this has been the motto of some of the biggest sporting names in India. Probably every army personnel has this kind of an attitude towards life with which they push boundaries and attain great heights. The Indian Army doesn’t just safeguard our borders with utmost dedication. It has also contributed heavily to bestowing the country with some of the most famed sports personalities ever born in India.Nine athletes of the Indian army have already qualified for the Tokyo Olympics, which is supposed to be held this year. Subedar Neeraj Chopra and Subedar Amit Panghal will be the two biggest names for India to win medals in Olympics. Indian Army has taken serious effort in nurturing and producing international medallists — it provides equipment, support staff, coaching, accommodation, and proper diet to its athletes. In other words, everything is taken care of, and then there’s job security as well. Another factor, which the Army’s athletes swear by, is discipline.

    Learnings we can take:

    The Indian armed forces work on the principle of Service Before Self, keeping the nation above everything. Taking an Inspiration from this,in this time of need we can provide our support to others in whatever way one can because a small step from our side can create an impact. The indian armed forces are an inspiration for us, how tough the situation is, fighting till the end and winning is the dharma that keeps the troops going. 

    Conclusion:

    Indian defense forces play a stellar role in the nation’s progress. A day without them would be something that would be the impending doom. There’s a lot we can learn and embibe from them like ethos, esprit de corps and camaraderie and do our best to make our country a better country. Hope you enjoy the article on Role of Indian Armed Forces in Nation Building

    ~Amit Pandey


    Bigger Announcement on Exam Live Updates: After CBSE, ICSE Cancels Class 12 Board Exams

    Sticky post

    Updates for 12 class Boards :

    Class 12th  Boards  Updates 2021.
    The central government on Tuesday cancelled the CBSE Class 12 examinations 2021 in view of covid situation. The decision has ended months of uncertainty for around 1.2 million students who were to appear in the exams.

    CBSE Class 12 board exam 2021 Live Updates: CBSE class 12 exam and ICSE class 12 exams have been cancelled. The decision was taken after a key meeting chaired by PM Modi.

    CBSE Class 12 Exams 2021: The plea, filed by advocate Mamta Sharma, which came up for hearing on Friday and was adjourned to Monday, has sought directions to the Centre, CBSE and the CISCE to cancel the CBSE and ICSE Class 12 examinations.(Sanchit Khanna/HT File)

    CBSE Class-12 Board exams were scheduled to begin from 4 May, which were later deferred till further notice.

    In April, CBSE had announced the cancellation of Class-10 exams and postponed the Class-12 Board examinations due to the surge in COVID-19 cases across India.

    CBSE had proposed two options on the methodology, process, duration, and timings.

    The first entails examination for “major subjects” to be conducted at the “designated examination centres and in the existing format”, with marks “calculated as per the assessment scheme based on the performance in the major subjects” in the minor subjects.

    The second involves conducting exams at schools where students are enrolled, reducing the duration of exams, and switching to only multiple choice and short answer-type questions. While most states preferred the second option.

    Delhi Chief minister ” Manish Sisodia”

    who also holds the education portfolio said, “The stubbornness to organize exams by playing with the safety of the children will prove to be a big mistake and a failure,” said Sisodia. He Suggested to vaccinate children before examination.

    kerela government was also in favour of vaccinating students before conducting exams.

    Maharashtra was in favour of a non-exam route for assessing class 12 students.

    Maharashtra State School Education Minister

    Varsha Gaikwad said, “Health and mental well-being of children, their families must be our priority.

    Further, the exams will be held under strict precautions. Social distancing will be followed while making students sit for the exams. Also, In 2020 the CBSE board exams were held amid precautions, however, the exams had to be canceled mid – way.

    While parents and students had raised concerns that regarding the health and the worry of the third wave of COVID-19 pandemic, Education Minister Ramesh Pokhriyal said, “Both students’ and teachers’ safety, security, and future are supremely important to us.”

    Similarly, the concern for students has now increased much due to the third wave of covid-19. Parents are not sure of vaccinating their children, some are worrying about third wave as it is rumoured to be fatal for childrens.

    The updates announced by the government is or is not in favour of most students.

    These are the questions will cover in this blog :

    • Class 12th Board Exam 2021 Live Updates: Latest News On CBSE, State Boards, Entrance Exams
    • Will class 12 boards be postponed 2021?
    • CBSE class 12 board exams: SC to hear plea seeking cancellation on 31 May
    • CBSE, ICSE 12th Exam LIVE Updates
    • 12th Board Exam Dates 2021 LIVE: CBSE, UP Board,

    .

    Black fungus early symptoms and prevention.

    Sticky post
    Black fungus
    Black fungus early symptoms and prevention.

    Lately, the world is suffering from destruction. Covid has disturbed the piece in people’s lives. From last year to the current year, each and every person has suffered more than ever. Covid – 19 has already killed so many innocent people , since it has arrived. Only when, things were getting a little better , black fungus came and caused mayhem in some states. Without any further ado, let’s discuss in detail about black fungus and it’s early symptoms and prevention.

    What is black fungus..?

    The fungal infection is caused by a group of molds called black fungus or mucormycosis. Mucormycosis is a common fungus, which is present mostly in soil and decaying vegetation but rarely affects humans.

    People catch mucormycosis by coming in contact with the fungal spores in the environment. Additionally, all have ample exposure to this fungus during our day-to-day activities, but our immune system is extremely effective in preventing its infection.

    Is it related to Covid- 19..?

    Yes, The disease was detected among patients who recovered from Covid-19. With a kill rate of 50%, this infection is deadly . India seems to be the only country seeing a huge spike in these cases in the Covid-19 pandemic.

    Areas where the cases found ?

    Usually, this disease occur in only immunodeficiency individual. However, there is a rapid increase in numbers has noticed in unsuspected Covid patients which is a matter of great concern.

    Now Cases of mucarmycosis are now present in other states besides Maharashtra. Currently, cases of black fungus in Gujarat, Madhya Pradesh, Uttar Pradesh, Haryana, Chhattisgarh, Jharkhand and Rajasthan reported.

    According to the cases in reports :

    • Gujarat reported over 100 confirmed cases of Black fungus.
    • Surat reported 40.
    • Maharashtra reported 52 deaths, and so on.
    • Karnataka reports 3 cases of black fungus.

    Several states continue to see worrying numbers of cases due to this rare but dangerous fungal infection.

    Is Black Fungus or Mucormycosis deadly..?

    Yes, it is a deadly disease. According to experts, Mucormycosis can be very dangerous if left untreated. For diabetes patients, this is life-threatening. People in an extreme immune-compromised state are likely to contract this infection very easily. Also, Many people recovering from COVID-19 have of late been afflicted by black fungus or mucormycosis disease.

    Why covid patients only…?

    As we all are aware of the fact, that covid patients need steroids for their treatment. Steroids are the only life saving treatment for severely affected covid patients. However, using steroids might be risky at the same time. Moreover, it increases your blood sugar level in both in both diabetic and non diabetic people. Also, compromise an individual immunity. So, People are treating with steroids are at greater risk. Understanding Black fungus early symptoms and prevention can help to cure.

    Black Fungus and Diabetic patients .

    Most of the mucormycosis cases follow a common theme like :

    • All Covid 19 patient
    • Receiving steroids
    • Diabetes /check sugar during treatment.

    Mostly, Diabetic people are at higher risk of catching the black fungal infection. Although, a person with mucormycosis may need early detection and powerful diagnosis for treatment. Also, which may, in turn, affect other organs such as the kidneys.

    What are the common symptoms of Black Fungus?

    Mucormycosis spread through blood vessels and can spread to lungs, skin and brain amazingly fast.

    Infection with mucormycosis should be suspected when there is:

    • Headache
    • Fever
    • Bloody vomits
    • Altered mental status
    • Reddish and Swollen skin near the nose or eyes
    • Facial pain,numbness or swelling
    • Blurred or double vision with pain
    • Cough producing bloody or dark fluids
    • Shortness of breath.
    • Loosening of teeth, jaw involvement
    • Chest pain
    • Blackish discolouration over the bridge of nose/palate
    • Worsening of respiratory symptoms.
    • Sinusitis (nasal blockage or congestion) nasal discharge (blackish/bloody).

    Is there any Treatment for black Fungus..?

    With the surging cases of black fungus, doctors are prescribing antifungal treatments :

    • Liposomal amphotericin B injections for at least 10 days to several weeks.
    • The other most effective drug to treat black fungus is Posaconazole. It is generally recommended if the infection is diagnosed early.

    However, these vital drugs are bound to induce substantial side effects, which can include kidney damage. Although, surgical intervention is also important.

    Black Fungus diagnosis method ?

    Doctors can diagnose it through a tissue biopsy and an X-ray scan of the lungs.

    What other areas which black fungus infect..?

    As the fungus can also infect other areas of the body such as:

    • he gastrointestinal tract
    • skin, and other organ systems
    • While infection of the oral cavity
    • Brain

    Is it affecting anybody…? Can it affect you too..?

    So the fact is not all covid patients are at risk. However, people Treatment with steroids cause , if the person has diabetes, have lesser immune system , Have been in prolonged ICU/hospital stay , also experienced ost organ transplant, cancer or had voriconazole therapy (treatment of severe fungal infections) should to be on the guard against black fungus infection.

    Does each patient is at risk of black Fungus..?

    According to the Indian Council of Medical Research, the risk of mucarmycosis increases in corona patients only under certain conditions.

    Is there any way to prevent black fungus or Mucormycosis ?

    • Good diabetes care and prediabetes care.
    • Vaccination to reduce severity of covid.
    • Wear masks in dusty areas to avoid black fungus.
    • Wear shoes, gloves, some sleeves shirts and trousers while going near things like soil, moss or manure.
    • Take special care of cleanliness.
    • Monitor blood glucose level post-COVID-19 discharge and also in diabetics.
    • Minimized use of immunomodulating drugs or steroids can be avoided.

    What has other doctors suggested to do..?

    • Dr Sweta Budyal, senior consultant endocrinologist, Fortis Hospital, Mulund explains that mucormycosis frequently infects the sinuses, brain, or lungs. So, prevention is extremely crucial,” Dr Budyal says.
    • Union Health Minister Dr. Harsh Vardhan has advised people to identify and avoid the early symptoms of black fungus, which have been seen mainly in many patients in Maharashtra.

    this blog contains every little detail about black fungus. So, i hope you have enjoyed learned alot while reading it.

    https://ziontutorial.com/steam-therapy-and-its-noticeable-effect-in-fighting-covid/

    Unemployment in India:A major challenge to deal with.

    Sticky post
    Unemployment in India:A major challenge to deal with.

    If heaven really exists: then heaven is the job, hell is unemployment, while life is merely an interview.

    ~Mokokoma Mokhonoana

    What is Unemployment?

    Unemployment in India:A major challenge to deal with

    The state when an individual or a group of individuals are actively seeking a job but aren’t successful in getting one is called unemployment. Unemployment is also termed as one of the silent killers of the economy of the nation. A nation which can’t provide an adequate number of jobs to its youth stumbles in the economic domain.

    Talking about the 7th largest country and the 2nd most populous country in the world, i.e. Youth are struggling to get a job and make a living. Imagine yourself spending  lots of money for education and merely excelling in it, doesn’t guarantee that you will have a bright future ahead. So without any further ado let’s discuss some statistics related to unemployment in India making the picture more clear. 

    Statistics related to unemployment in India

    1. Number of Employed iIndian people in the following years.

    a) 2016-17: 407.3 Million

    b) 2017-18: 405.9 Million

    c) 2018-19: 400.9 Million

    d) 2018-20: 403.5 Million

    2. There were around 40 million people unemployed in India in January 2021.

    3.India adds 10 million new job seekers every year.

    In an estimated population of 1,391.91 million (2021 estimates) , the number of jobs in the country don’t do justice with the humongous population of India.

    Reasons of Unemployment in India:

    1.Rote learning based Education system:

    The education system of India hasn’t undergone major changes in such a dynamic world. Schools and colleges focus on rote learning and philosophy of marks. Innovative ideas and skills enhancement aren’t given much room to grow. Graduates have theoretical knowledge with degrees to support them, but practice knowledge is missing which becomes a major cause of unemployment.

    2. Policies of government:

    The policies of government like Demonetization and GST have collapsed the handicraft industries, cottage industries and affected small scale workers. Informal sector has suffered a heavy blow due to such policies and numerous jobs were lost.

    3.More dependency on Agriculture:

    Having the 2nd largest arable land in the world after China, most of the Indian people are dependent on agriculture for livelihood. But as agriculture in India is largely dependent on rainfall, weather patterns and traditional methods, it produces seasonal employment. So, most of the people remain unemployed when there is not much to do in the farms.

    4. Increased use of Artificial Intelligence (AI) :

    A recent study by McKinsey Global Institute suggests that by 2030,Intelligent agents and robots could replace as much as 30% of the world’s current human labour. Use of modern technologies at construction sites, driverless vehicles has increased efficacy but led to decline in employment.

    5. Caste System:

    Constitution of India ensures fundamental rights for its people, the right to freedom to practice any profession and equal opportunity in employment, but in many cases, work isn’t given to the deserving candidates but given to people belonging to a certain community.

    6. Economic growth:

    Slow economic growth isn’t able to keep pace with the rising unemployment in India.

    7. Rising Population:

    One of the major causes of unemployment is rising population. Competition is cut throat and jobs are limited.

    8. Defective Planning and Political Will:

    Unemployment in India : A major challenge.

    The current NDA government in its manifesto promised 20 million jobs for the youth. Instead of walking its talk, the government has privatised PSUs rendering thousands of employees jobless. Hence, there is a complete lack of political will for job generation.

    Impact of Unemployment in India:

    1.Pushing families to poverty and below poverty line.

    2.Increasing crime rates in the country. More and more people have resorted to burglary, theft and unlawful activities just to support their family.

    3. Unemployed people can be easily brainwashed by anti-social elements. Because of this, they lose faith in the democratic ethos and feel that the government will do nothing for their betterment and that motivates them to resort to arms and violence.

    4. Total waste of human resources, they end up taking drugs, alcohol. In fact, suicide are also very prevalent these days due to unemployment.

    5. Besides , unemployment also affects the economic development of the nation.

    6.Overcrowding of cities and towns due to the location of more employment. Also, opportunities leads to pollution, traffic jams and an increase in crime rates.

    Steps to tackle unemployment in India:

    1.Decentralisation of industries and industrial activities. So, people can get employment in the region of their vicinity.

    2. More focus on the education system to develop skills and foster innovative ideas, so that a skilled labour force can be generated. A new education policy promises that but stricter implementation of it will ensure it.

    3. Political will of the government regarding employment . So, that it can take major concrete actions. More investment in health, education, police, judiciary can create many government jobs. Also, timely conduct of exams and appointment of the selected individuals will give a major boost to the job aspirants.

    4. Developing rural areas to mitigate migration of people to urban areas. Also, reducing job pressure and overcrowding in cities.

    5. Removing social barriers to ensure equal participation of women. Hence, equal wages at smaller levels for society’s overall development.

    6. Implementation of government schemes like Make in India, Startup India, Stand Up India and Skill India, PMKVY and MGNREGA in an efficacious manner to boost employment drive.

    7. Identifying the informal sector as a major job provider and providing incentives and formulating schemes for the growth of them.

    8. More investment in Research and Development and Innovation Sector. Due to that, companies can foster and provide skilled and unskilled labour to a major chunk of the population.

    9. Attracting foreign companies in india. So, they can provide jobs to Indians.

    10. Many manufacturers in India have labour intensive work like food processing, hardware, apparels and more. They can create special packaging jobs for individuals.

    Conclusion:

    Unemployment is a serious issue and needs to be tackled with proper implementation of policies. Moreover, getting a job is a basic right of everyone and the government should do the needful to provide them that. Equally important, the nation can only uplift if each individual uplifts himself and that will be only possible if employment is guaranteed.

    ~ Amit Pandey

    TOP 20 INSTAGRAM TRENDING GIFS.

    Sticky post

     In this blog i am going to show you top 20 Instagram trending gifs for your instagram story. So lets get after it. 

    So open instagram story and click on gif icon. You’ll have to make sure that you type in the phrase with no spacing, otherwise you will not find the gif. 

    Top Twenty Best Instagram Trending GIFS 2021.

    Here are the top twenty best Instagram trending gifs that I’ll look at:

    • MOLANG GIF
    • MiMi and Neko
    • 100Soft
    • Mar 
    • Aisforai
    • Tonton
    • Hygge
    • Carolynnyoe
    • Martinamartian
    • Beckycas
    • odsanyu
    • Kawai
    • cursive
    • aisforai dog
    • Mikyla
    • Botanic
    • Helenbucher
    • Nanamoji

    1. MOLANG GIF

    These gifs are super cute and make your Instagram story aesthetic and cool. I love adding these uwu gifs to my stories. Perfect for that girl vibes. 

    TOP 20 INSTAGRAM TRENDING GIFS.

    2.MiMi and Neko

    These gifs are also super super cute and make your story so awesome. And these gifs are so trending. I would recommend you this to use for your stories.

    TOP 20 INSTAGRAM TRENDING GIFS.

    3.100Soft

    In this gifs you will find cute disney and avengers gifs. They all are so cute and cool. If you are an avengers fan then you are gonna abouslutely love these filters. These filters makes your story 10times better.

    top best  20 INSTAGRAM TRENDING GIFS.

    4.Mar 

    These gifs are for beach , there are starfish, crab, dolphin, and lots of sticker related to water animals. These are also so cute. 

    top 20 best Instagram filter

    5.Aisforai

    I personally love this gif because these are so cute gifs. There is also a dog in this gif . This gif make you Instagram story so pretty. I hope you would like these gifs.

     20 INSTAGRAM TRENDING GIFS.

    6. Tonton

    These gifs make your Instagram story so awesome. These gifs are trending. I know you don’t know about this gifs. So use it and make your story more amazing.

    7.Hygge

    In this gifs you will find lot of gifs for your Instagram story. Use these and make your story aesthetic.

    8.Carolynnyoe

    These gifs are so trendy and popular gifs. These gifs will make your story more amazing and awesome.

    9.Martinamartian

    These gifs are also very popular. If you are traveling then you can use these gifs for your traveling instagram story.

    10. Beckycas

    These gifs are super cute and beautiful. These gifs are so simple but so pretty. It will make your Instagram story more cool.

    11.Breadtree

    These gifs are pretty simple and cute. These gifs make your Instagram story so cool and aesthetic.

    12.odsanyu

    These gifs are so cute and beautiful. Use it for your instagram story and make your story more aesthetic.

    13. Kawai

    These are really kawai gifs. In this gifs you will find more character gifs like groot gif. These gifs make your Instagram story cool and amazing.

    14.cursive

    In this gifs there are lots of curvise fonts. These fonts are so pretty and simple. You can easily use it for you story.  The fact that their font is different is what makes them attractive.

    15.aisforai dog

    These gifs are so so amazing and cute. If your in doggies then you will love these gifs. There are lots of cute dogs gifs. Use them for you instagram stories. This gifs are my favt one. And one know about this gifs.

    16. Helenbucher

    These gifs are so simple and pretty. There are lots of words and character gifs. Make your story more aesthetic.

    17 floweringwords

    These gifs are so simple and so beautiful. In this gifs you will find lots of pretty decorated words. And these gifs make your Instagram story so awesome.

    18. Nanamoji

    These gifs are so cool. In this gifs you will find white colour gifs. They are so cute and pretty awesome.

    19. Botanic

    these gifs re related to plants. There are lots of cute plant gifs.

    20. Mikyla

    these gifs are so simple. And pretty useful for your Instagram story. And make your story so pretty and beautiful.

    Conclusion

    Hope you like the list of TOP 20 INSTAGRAM TRENDING GIFS. If you like this post do comment and share your thoughts.


    Friends reunion Confirmed : premier Date , BTS Guest , and HBO Max.

    Sticky post

    FRIENDS is one of the most iconic shows in existence,indeed. I really can’t count the amount of times this show was a savior for us. In this blog we are basically talk about Friends reunion Confirmed premier Date BTS Guest and HBO Max.

    Like, watch FRIENDS if you’re depressed. watch FRIENDS when you can’t decide what to watch.Watch FRIENDS, if you had a bad day.

    In brief,  sitting back, grabbing some popcorn and binge watching FRIENDS is a solution to every problem. And I know, I can bet that I’m not the only one. In fact, there’s no shame in admitting that the fans, including yours truly, run back to the comfort of “I’ll be there for you”.This show became a worldwide phenomenon

    Friends reunion is confirmed.

    Every one is freaking out for the friends reunion. Ever since the confirmation has came people are going crazy. I guess, I’m not the only one who got goosebumps after watching the teaser. The cast was set to gather for a special on HBO’s streaming service, HBO Max, to honor the iconic sitcom’s 25th anniversary.

    Picture Credit : https://www.theverge.com/

    You can watch it on HBO MAX .

    It’s official! The Friends reunion, called “The One Where They Get Back Together,” starts streaming on HBO Max .

    When it arrives.?

    The special much waited and eagerly anticipated reunion is slated to be released on Thursday, May.

    F.R.I.E.N.D.S die hard fans can finally breathe a sigh of relief as the first glimpse of the reunion episode is here.

    Did you watch the teaser..?

    In the teaser, we can spot David Schwimmer, Jennifer Aniston, Lisa Kudrow, Matthew Perry, Courteney Cox and Matt LeBlanc walking with their backs to the camera. The clip plays the instrumental version of the show’s iconic theme song “I’ll be there for you”. It’s quite nostalgic since it brings a lot of memories.The one where they all meet together again and just to make our heart race even more. Remember central park cafe.? Phoebe’s iconic self composed smelly cat..? The most classic American drama of the year. “Friends of the six” is set to return to the screen.

    BTS to guest appear on the upcoming “friends” reunion.

    The excitement for friends reunion was already over the roof. Meanwhile, the show has also guest appearances including K-Pop band BTS.Fans certainly think this month couldn’t have been any better. It’s like cherry on the top.In multiple interviews, Jin, Suga, J-Hope, RM, Jimin, V, and Jungkook have brought up that they are fans of the TV show Friends. The details of BTS’ guest appearance are unclear, but ARMY will be able to watch the band members on the Friends reunion special when it debuts on HBO Max on May 27.

    More guest list of friends reunion includes:

    Justin Bieber, Lady Gaga, David Beckham, James Corden, Kit Harington, Cindy Crawford, Mindy Kaling, Cara Delevingne, Reese Witherspoon, and Malala Yousafzai. Doesn’t that sound like a super exciting lineup?

    No one can wait this longer. However, during the time like this , friends reunion news has really made lots of fans happy. Finally, the wait will be over.


    Foreign Policy of India

    Foreign Policy of India : Relationship of India and its current development.

    Sticky post
    Foreign Policy of India : Relationship of India and its current development.

    What is foreign policy ?

    ( Foreign Policy of India : Relationship of India and its current development.) :

    A lot of people think international relations is like a game of chess. But it’s not a game of chess, where people sit quietly, thinking out their strategy, taking their time between moves. It’s more like a game of billiards, with a bunch of balls clustered together. So guys in todays blog we will discuss about Foreign Policy of India : Relationship of India and its current development in a very detail manner .

    ~ Madeleine Albright.

    Man is a social animal and so are those nations constituting man. For a nation to prosper, and to do well across the globe, is a gargantuan and humongous task which requires meticulous planning, top leaders, impeccable governance and last but not the least good implementation of foreign policies.

    Foreign policies play an important role in deciding nation’s supremacy across the globe. Also, the actions of such nation have repercussions both positive and negative. No matter what mindset nations follow for making their foreign policies . The idea behind good for all and making this world a better place to live in should come out from their intentions.

    So,let’s try to know about the foreign policies of the land of unity in diversity i.e. India.

    foreign policies of the land of unity in diversity :-

    India started developing its foreign policies in 1947, as soon as it achieved liberation from the atrocities and obliteration of the British regime . Jawahar Lal Nehru, the then and the first and foremost Prime Minister of India pioneered to fabricate such policies and regulations. That could make India a super power not only in Asia but also across the globe.

    India became part of the Non Aligned Movement in 1961 that was a group of countries which were aligned together to maintain their sovereignty and integrity against the policies and regulations of superpowers. Though this organization is still present, it has lost its charm since the end of the cold war.

    India aims to strengthen its ties among all nations.

    keeping some very important points in mind that include:
    1. Not compromising the country’s needs and requisites for strengthening globally.
    2. Keeping the philosophy:”Charity begins at home” and considering Indian Subcontinent as a family and working to strengthen ties with them.
    3. To Look east is to act East”. Working in cooperation with the East asian nations as Indo-Pacific region has a vital importance for trade and military strengthening and deployment.
    4. Luring investments from foreign firms and companies to ensure friendship and amiability among their nations.
    5. Walking hand-in-hand with global superpowers such as the UK, Russia, US, Australia and other countries of Europe.
    6. Strengthening its own military might so as to prove it’s might and standing among other nations.

    Relationship of India with neighbors:

    India-Bhutan:

    Foreign Policy of India : Relationship of India and its current development.

    India provides economic help and protection to the small nation who relies on India for a number of resources. Lots of hydropower and other projects are also funded and managed by India in Bhutan.

    India-Nepal:

    Relations of these nations have been cordially warm and friendly since ages. It’s popularly called as the Roti-Beti relationship. No visas are required to move to and fro in both the nations. Gurkha soldiers serving in Indian army are pride for both the nations. At present the ties have somewhat been strained due to the government and China’s influence in Nepal. It will get better through bilateral talks.

    India-Bangladesh:

    Foreign Policy of India : Relationship of India and its current development.

    Bangladesh owes its existence to India for it’s liberation from the atrocities of Pakistan. The language spoken in Bangladesh is Bengali which is one of the most spoken languages in India(majorly in West Bengal). Implementation of projects, financial aid from India and Bangladesh’s aid to sustain peace and harmony and improving security has boosted the relationship between these two nations.

    India-Sri Lanka:

    Foreign Policy of India : Relationship of India and its current development.

    Located at the south of India Sri Lanka is an important neighbour of India. India played a major and crucial role in maintaining peace and harmony during the ethnic riots in Sri Lanka. The Indian forces did its level best to liberate Sri Lanka from a terror organization LTTE( Liberation Tigers of Tamil Eelam).

    China has played a major role in Investment in Sri Lanka and providing loans. It access the Hambantota port for surveillance and strategic deployments around Indian ocean . It is seen as a potential threat.

    India-Afghanistan:

    Foreign Policy of India : Relationship of India and its current development.

    India and Afghanistan have been friendly nations since a number of decades. Since, their common enemy being terror sponsoring nation Pakistan. India provides training to soldiers, bureaucrats and other appointments from Afghanistan. Indian cricket board provides home ground and has played a major role in the development of Afghanistan cricket.

    India-China:

    Foreign Policy of India : Relationship of India and its current development.

    The relations between two nations have not been good so far. Since, history has witnessed the 1962 Sino-Indian War, 1967 Skirmishes, border issues on a regular basis, Doklam issue of 2017 and latest the Galwan valley face-off. China has been opposing India in various international forums like blocking India’s entry to NSG, ignoring Pakistan’s as a terror state etc.

    India-Pakistan:

    These two nations share the same history, same culture and have lots of other common interests. Earlier, after partition where Pakistan went on to become a terror funding state, an epitome of military dictatorship, India has focussed on becoming a peace promoting nation to ensure harmony and welfare.

    Since, both nations have been at loggerheads from the very existence. However, wars have been fought, with Pakistan not winning once. Cross border fires, ceasefire violations, housing terrorist organisations, and infiltrating fidayeens,Pakistan has plummeted as low as it can.

    With super powers:

    Foreign Policy of India : Relationship of India and its current development.

    India enjoys very good relations with Russia (then USSR) since independence. Also ,Russia has been a defense market for India and other technologies.

    1. The US was not a good ally of India for the last two-three decades. Even though, the US sees India as an emerging power from Asia . Therefore, it ties are strengthening, enhancing cooperation and welfare.
    2. India enjoys good strategic relations with European Nations and Australia.

    Current developments:

    1. In this ongoing pandemic, India has supplied nearly 60 million vaccines to foreign nations and when the 2nd wave hit , taking a toll on Indian lives, it received foreign aid from around 40 nations.

    2 . India is facing challenges from a stronger China, only major country having a positive growth rate at the end of 2020.

    3. The growing relationship between China and Russia and India’s pro stance towards Quadrilateral Security Dialogue has brought Delhi and Moscow on different pages to some extent.

    4. The changing middle east equations pose challenges to India because of the region’s strategic flux. For instance Israel and Iran are not on the same page, but India has ties with both of them.

    Objectives lying ahead:

    1.To become a permanent member of the UN.

    2. To become a member of G7, NSG and other prominent organisations.

    3. To ensure self reliance.

    4. To strengthen and develop relationships with neighbors in a better way.

    5. To increase trade, welfare and cooperation among east asian nations.

    6. To ensure self growth, welfare and harmony all across the globe.

    Conclusion:

    In geopolitics, It’s very important to manage ties and keep a balance with the nations having different opinions. Moreover, India has always as of now adopted the stance that promotes growth. Additionally, also promotes stability betterment of the world. Therefore, to achieve heights, common good, development and progress.

    Foreign policies have become imperative part of nations to ponder upon. And i hope you like the article (Foreign Policy of India : Relationship of India and its current development. ) please comment your opinions in the comment box .

    .

    how to draw whale in adobe illustrater

    How To Make a whale Illustration

    Sticky post

    In this article imma to show you how to make a whale illustration In adobe illustrator using shape tool and ellipse tool and a color picker tool. So let’s get after it.

    how to make whale illustration

    STEP 1

    First we take a small rectangle. 

    How to make a  whale Illustration

    STEP 2

    In this step, change only one part radius of the rectangle and colour it using six digit hex number #111243 and remove the stroke.

     whale illustration tutorial

    Step 2.2

    how make  whale icon

    STEP 3

    In third step, select pen tool and make straight line using shift button. And stroke it to 3 and also change the colour of the stroke using six digit hex number #017ab5 And cap it (round cap).

     whale tutorial

    STEP 4

    In this step, Duplicate the same rectangle.

    how to make  whale in easy way

    STEP 5

    In this step, we are going to change the color of rectangle and color it using six digit hex number #120f22.

    how to make  whale step by step

    STEP 6

    Now, again make straight lines and then change the stroke color #017ab5 and cap it (round cap).

     whale illustration in simple way

    STEP 7

    Now, draw a circle for eye area and colour it using six digit hex number #fffff make circle using shift button.

    how to make  whale in adobe illustrator

    STEP 8

    Make two circles and merge them.

    how to make easy dolphin illustration

    STEP 9 

    Now, with the help of pathfinder cut the part from the area. Make a ovate shape. And color it using six digit hex number #d36928 and arrange it in down side.

    how to make  whale illustration step by step

    9.3

     whale illustration tutorial

    STEP 10 

    Again take two circle merge them and cut the area from the part with the help of pathfinder. make two ovate shape and join them. For tail area. And color it using six digit hex number#d36928.

    adobe illustration  whale

    STEP 11 

    In this step Duplicate the first ovate and make the top part of tail.

    How To Draw A Cartoon  whale

    STEP 12 

    Now take three circles and arrange it in ascending order.

    how to draw a  whale step by step

    STEP 13 

    In this step, colour the three circles using different six digit hex number. #00508f #00c2f3 #00c2f3.

    how to draw a cute  whale

    STEP 14

    Now make a top head part take a ovate shape and color it #008bbe and make a small circle beside it. 

    How to draw a  whale in simple steps
    14.2
    How to Draw a Dolphin Step by Step in illustration

    STEP 15

    Now add a background using rectangle shape and color it using six digit hex number #00c2f3.

    How to Draw a   whale Step by Step

    CONCLUSION :

    I hope you would like this tutorial (HOW TO MAKE A wHALE ILLUSTRATION.) article if you like let me know in comment section and show some love.

    Happy illustration ?.


    People are also reading:

    Top 25 Anime that need more recognition

    Sticky post

    There are many animes that are underrated and need more recognition. However, there are animes which does not need any recognition. Like there are few titles like hunter x hunter, death note, full metal Alchemist. Yet, we have some hidden gems in the anime community, which needs worthy recognition for such great servings. I actually have a big list of animes that need more recognition they deserve. Here is a list of Top 25 Anime that need more recognition .

    1. Astra lost in space

    Astra is a one of the best sci-fi adventure anime out there with a lovable cast of characters that are all well developed with everyone of them having amazing chemistry with each other.

    The mystery aspect of the show is admirable too! It’s the kind of show that if you pay attention to the small details, it feels very rewarding once everything clicks into place. In addition to that, the build up was intense and the plot twists are mind blowing. 

    The sci-fi is just more like the setting and a tool to move the characters forward. The characters is the heart of the anime, which I value more than sci-fi logic imo. Emotional investment is what I prioritize.Aside from the plot, the other area that makes the series stand out is the art. This anime fullfill every basic need to make it freaking awesome.

    2. Dororo

    Dororo story is so simple yet so well executed. People sometimes get scarey as they realise how old it is. Fortunately,we have Dororo of 2019 which is amazing. The animation surpassed expectations I had.

    The way they handle Hakkiyamaru various disabilities and the subsequent reversal of them are one of my favorite things about the anime so far. It refreshingly realistic despite the show’s fantastical edge and makes for some compelling viewing as we watch him struggles to adjust to all the changes to his body imo. it is highly recommended to all weebs and added in my list of Top 25 Anime that need more recognition.

    3. Karakuri Circus

    I’m really enjoying it, great animation and action scenes with an intriguing story. I think some people are probably put off with the art style and didn’t have a lot of hype before it started since it’s a completed manga from 30 or so years ago.

    Great characters and it set everything up nicely in the first arc. Have no idea what’s about to happen but can’t wait.

    4. Yona of the Dawn

    Yona has been one of my favourites this season and I feel it is underrated. Hence, It doesn’t get worse as it moves along, if anything if gets better and better whenever new characters are introduced. The story in a unique setting populated by a treasure trove of lovable characters,It has fun and very cute moments and Yona is a pretty great MC and I totally have a crush on Hak haha so I might be biased . In my opinion it’s worth the watch.

    5. Akudama drive

    Akudama drive is a hidden gem from 2020. Basically, it’s an 12 episodes based amazingly written story. It’s a story of bunch of theives and murderers put together by some IA cat in order to complete a mission.

    Although things quickly go south and they all got in major trouble. Moreover, it has amazingly written characters with some interesting personalities . Like , we have cut throat with such a cute face but he is maniac. He has this terrifying obsession with red colour that he can kill people with a smile on his face. It’s an amazing anime that need more recognition for sure. it is included in Top 25 Anime that need more recognition

    6. Magi,the labyrinth of magic

    Magi is by far the most underrated.It’s very enjoyable and definitely worth a watch. When you watch one episode you will want to finish the whole anime. The anime is a perfect combination of magic, logic , world building, amazing character development and real world problems.

    Moreover, the anime is thrilling and hilarious at the same time. The very strong world and characters and the animation is superb. Seeing as a second season is going to come out in the fall i would say watch it and see for yourself. So i am gonna add it in a list of Top 25 Anime that need more recognition .

    7. Bungo stray dogs

    Bungou Stray Dogs – as popular it is in Japan, I feel like there’s not enough buzz around it elsewhere. It is about a group of people with abilities or super natural Power.

    No matter what genre of anime you’re into, no matter what you’ve watched in the past, you will love Bungou Stray Dogs. If you are looking for the mystery, shonen and action pack series without any nonsense fighting. I would recommend it.

    8. Dorohedoro.

    Just like above listed anime , I would recommend you to give it a shot. It got mystery, decent actions, good world building, potential romance, and a lot of gore. Highly unpredictable, and story alone is so interesting.

    Also has a very distinct way of catching one’s attention.  The show is definitely unique and worth watching for.

    9. Kamisama kiss 

    its mixture of comedic and supernatural elements. Kamisama Kiss is unique in that both anime and manga are really, really good but as with all manga to anime adaptations, one version always reigns supreme.

    Kamisama Kiss has some fight scenes here and there, but it’s an overall a great anime for its romance.Characters are very well developed, they have depth and are very memorable and relatable. Give it a chance and I can assure you your heart will be racing in no time! 

    10. Overload

    This is show definitely needs more recognition. I means there are people who are huge fans of this show. This show is full of thriller, action, strategy, politics and little bit comedy.

    The best think about this show is the main protagonist is evil with a good side of him. I enjoy how it got a lot of focus on other characters in the universe as well, and not just the protagonist.

    11. Grimagar

    I love Grimgar this season, I think it’s absolutely fantastic and refreshingly different from your normal trope filled, straight forward shounen.

    Different strokes for different folks, Grimgar doesn’t have much emphasis on action or an overarching plot line (for now at least) but places it much more on learning about your characters and watching them grow. Which I thought they’ve done a fantastic job of. It’s reflects in the art style, with soft and warm colors and backdrops that look like beautiful watercolor paintings. No bright, jarring or exciting colors.

    I went in not expecting much, but I can say that I’m pleasantly surprised.

    12. Orange

    Orange is a nice anime. The anime Series is able to communicate the way depression and guilt have ripple effects that reach those that love and care for us. It’s just as emotional and it’s just really nice so far.

    it is an anime that’s fast-paced, comedic and unpredictable. Unfortunately,the only problem is with animation but you should be able to sit through the show without any problems.

    13. Gosick

    It’s a story that intrigued me and I enjoyed it. The story is interesting and the writing is good . It is a unique story that I enjoyed because of the mysteries and the political intrigue and how it tied into the main characters.

    I really liked Gosick. I think it had a really strong beginning and ending even though some of the middle arcs dragged from time to time. As for Kujo, I don’t think he was necessarily a strong character on his own but his relationship with Victorique really ended up being something special by the end. 

    14. Grand blue

    Grand Blue is a great anime and I seriously recommend to watch it. Watch This! It’s one of the best anime shows but is sadly underrated.

    It’s the funniest show i’ve ever watched i think. I laughed too hard.l Comedy is very relative and perfectly done . It did get enough recognition tho. And people should straight go for the manga instead.

    15. Seraph of the end

    The story itself was damned interesting. You’ve got a world where nearly every adult died. They lay all the ground work for a great story. Cool setting, interesting concepts, varied and likable characters.

     Unfortunately, no relationships will happen, or at least they won’t happen in the current story arc. Hence, they’re too busy fighting to really even think about it.

    16. Moriarty the patriot

    Moriarty has a great interesting plot with great mysteries and twists. Also, it has banger openings and endings. Villains are at their best when they have legitimate reasons for what they do . 

    Overall, this is a really fun anime! If you’re big fan of Sherlock Holmes, you absolutely can’t afford to miss this one. It’s like Sherlock Holmes formula featuring an anti-hero with interesting motivations. It is dark, dramatic and also included in the list of top 25 Anime that need more recognition .

    17. Great pretender

    Its like a drama, then action, then comedy at the rear. comedy is nowhere near the main focus, but it does have funny moments.

    It’s not strictly a comedy but it is no serious drama either. It’s a mix of both, but with more drama tbh. It varies throughout the whole series starting as a comedy-like series and ending as a serious drama one.

    18. Akatsuki no yona

    Akatsuki no Yona is a goddamn pleasure to watch and I’m glad that I was recommended. The characters are well damn amazing. 

    Well that’s no big surprise, every fan of a show says this. But trust me, if you’ve only watched the first two episodes or read only the first two chapters, you’re in for a surprise.If you’re looking for complex characters, search no more and give it a chance. 

    19. Also 91 days

    Only good show this season, so yeah check it out. Very solid pacing and cool characterization so far other than the evil dudes who are just blatantly evil for the sake of being evil. Honestly expecting it to go down hill but for now it’s pretty good.

     I can’t even tell you how much hype it gets here because so many people love it but it didn’t get recognition it deserves. But yes it is worth watching so far. The drama is great and the tone/setting is being executed wonderfully. I would add it in my list of Top 25 Anime that need more recognition for sure.

    20. Rainbow

    Anyone looking for a good anime of genre thriller/ drama , it’s a must watch. It has great characters and worthy among the best. The story, drama, characters, development, build up,this anime got everything. There are happy moments, there are sad moments.

    The characters struggle , dream and with different backgrounds.you start to like them one by one as they progress with their unbreakable friendship.

    21. Death parade

    It’s a very beautiful story about the meaning of life and death. The individual stories of the guests were so intriguing and really made me wonder what’s going to happen next. Each emotion of human beings have been significantly displayed in this breath taking ride.

    The concept , animation and music fits perfectly in here. It really needs much more recognition it deserves.

    22. World Trigger

    World Trigger isn’t a series I hear people talk about much. If it ever had a big fandom, the hype petered out before I even discovered it. World Trigger is great. Good tactical team fighting, logical and realistic battle philosophy, and many great characters.

    Unfortunately, the anime adaptation does have problems of constant recaps, filler.  Still fine to enjoy for the story, but if you have major problems with these, then i suggest reading the manga. it is definitely included in the list of Top 25 Anime that need more recognition

    23. Classroom of the elite

    The anime is a bit infamous among readers  of the novel . This anime has a large potential .It has some nice ideas, but swings wildly in execution.  Dynamic story progression and ambitious character development backed by good story writing make this a must watch.

    Someone who likes overpowered MC like me should definitely try this anime.Some characters are very interesting like Ryuen, Sakayanagi, Nagumo, Kushida etc which makes you feel realistic even though our MC is exemplary lol. After completing this anime you will only feel one thing about this, and that is when will it’s second season come? 

    24. Guilty crown

    Guilty crown has a really crappy reputation which is definitely not deserving. It may lack certain aspects but overall you should give it a try.

    The first half was amazing and really was spectacular. First half of the episodes being the best part of the series. You Might enjoy the latter half, but overall yes it is worth a watch.

    25. Deca – Dence

    Deca-Dence is a must-watch if you are interested in the sci-fi genre.If anyone looking for the good story and some fun action. It is one of the best anime out there. Although, it may came out quirky, weird but it has some deep plot to it.  

    Overall, Deca-Dence takes us on a journey of emotions with the characters. It really needs recognition it deserves.

    As it was a huge list you can easily pick your favourite genre you liked. I have watched few of them so I recommended. And the few are most voted to be on the recognition list. 

    Conclusion

    I hope you guys enjoyed reading it. Please comment your views about this blog. I will try my best add more in it further. 


    how to draw skate board illustation

    How to make a skateboard illustration

    Sticky post

    In this article i am going to show you how to make a skateboard illustration in adobe illustrator using rectangle tool and ellipse tool and color picker tool . So let’s get after it.


    STEP 1

    First we take a rectangle and change the radius to its maximum with the help of direct selection tool.

    How to make a skateboard illustration.

    STEP 2

    In this step, color the rectangle using six digit hex number #f9a341 and give it a stroke to 6.

    skateboard illustration tutorial

    STEP 3

    Another step is we make inner part of skateboard. ake a new rectangle and change the radius to its maximum and color it using six digit hex number #bcbeco and add stroke it to 6.

     skate board illustration in adobe.

    STEP 4

    Take four circle and give it a strock and put the circle upon each corners of the rectangle.

    skateboard illustration step by step

    STEP 5

    In this to take another rectangle and change the radius to its maximum and put in between the inner rectangle.

    skateboard illustration in simple way

    STEP 6

    Now we make wheels supporter so take a rectangle and give it a stroke it to 6 and color it using six digit hex number#e6e7e8.

     skateboard illustration step by step

    STEP 7

    In this step, we are going to make Wheels so Take two rectangles and change the radius & stroke it and color it using six digit hex number #2e3192

     skateboard illustration in adobe

    STEP 8

    In this , duplicating the whole inner part of skateboard and paste it other side.

    skateboard illustration in quick way

    STEP 9

    In this step, duplicate the same wheel step for other side and arrange it on other side.

    skateboard illustration in adobe illustrator.

    STEP 10

    Now give shadow to the first rectangle rectangle.

     skateboard illustration tutorial
    STEP 9.2
    skateboard illustration design
    Step 9.3 Adding shadow

    STEP 11

    Now add a background using rectangle tool and color it using six digit hex number #98daf1.

     skateboard illustration tutorial step by step

    STEP 12

    Now make a shadow in down side of the skateboard.

     skate board illustration in quick way.

    CONCLUSION :

    I hope you would like this tutorial (HOW TO MAKE SKATEBOARD ILLUSTRATION) if you like let me know in comment section and show some love.

    Happy illustration ?.

    People are also reading:

    HOW TO MAKE A SIMPLE SCENERY ILLUSTRATION.

    Sticky post

    In this article i am going to help you to draw a cute simple scenery illustration by using ellipse tool and pen tool in adobe illustration. it is for beginners also. So let’s get after it. I am going to show you step wise so don’t miss any step or the scenery will not be perfect.

    HOW TO MAKE A SIMPLE SCENERY ILLUSTRATION.



    Video Tutorial


    STEP 1

    Soin first step, we have to click on file and then click on “new” to take a new artboard for our work.

    HOW TO MAKE A SIMPLE SCENERY ILLUSTRATION.

    STEP 2

    In this step, we have to make a horizontal line With the help of pen tool and strock it to 9 and give cap and use “round cap” for the line.

     SIMPLE SCENERY ILLUSTRATION.


    STEP 3

    In this step take a eraser tool and cut end part of the line in small size and add some more short lines.

     SIMPLE SCENERY ILLUSTRATION tutorial.

    STEP 4

    In this step, we are going to make a stem. So we need a pen tool. With the help of pen tool draw a vertical line and strock it to 6. Draw a vertical line with the help of shift button. Now click on shift and then make your vertical line.

    how to make a scenery in illustrator.

    STEP 5

    In this step we make two small stem with the help of pen tool and give it a strock to 6.

     SCENERY ILLUSTRATION

    STEP 6

    In this step, we make a circle(ellipse tool) with the help of shift button. We use shift button because of it our circle will make perfect and colour it by using six digit hex number f7b219 and give it a strock to 9. We use this circle for tree.

    simple and easy scenery illustration

    STEP 7

    In this step, we give shadow to our tree. So duplicate the same circle two times and merge them and with the help of pathfinder tool subtract the part from the area and then remove the stroke and colour it using six digit hex number #ffdd26.STEP 7In this step, we duplicate the whole tree to make another tree.

    how to make scenery for begginers
    step 7.2
    scenery illustration tutorial step by step

    STEP 8

    in this step, we duplicate the whole tree to make another tree.

    how to make easy and quick landscape

    STEP 9

    Now change the color of our new tree by using six digit hex number #ee8829.

    landscape in easy steps

    STEP 10

    Again in this step, we are doing the same shadow process which we have done for first tree. So process is same duplicate the circle two times and merge them and then with the help of pathfinder tool subtract the part from the area. And colour it by using six digit hex number #f15829 and remove the stroke.

    how to make landscape with simple shapes in adobe illustrator

    STEP 11

    In this step, choose rectangle tool and send it backward and colour it by using six digit hex number #f2a45f.we use it as a background.

    how to make beautiful landscape

    STEP 12

    Now we have to take two cirlce for rocks. Take a circle and with the help of direct selection tool cut the down part of the circle and colour it by using six digit hex number #ee8a2b.

    how to make landscape

    STEP 13

    In this step, select a paint brush tool and make small dots everywhere around the tree to make it more cute and beautiful. With white colour and strock will be 1 or less than 1.

     how to make scenery step wise in illustrator

    STEP 14

    In this step, again select paint brush tool and make bigger dots like snow everywhere around the tree. And use white colour and strock size will be 5. Our simple scenery illustration is ready.

    scenery illustrtation tutorial
    11.2
    how to make scenery illustration

    CONCLUSION :

    I hope you would like this tutorial (HOW TO MAKE A SIMPLE SCENERY ILLUSTRATION.) article if you like let me know in comment section and show some love.

    Happy illustration ?.

    People are also reading:

    Jujutsu kaisen coolest female characters list.

    Jujutsu kaisen coolest female characters list.

    Sticky post
    Jujutsu kaisen coolest female characters list.
    image credit :
    r/JuJutsuKaisen
    u/Osakina7na2 months ago

    Ever since Jujutsu kaisen has started, it has increased the standards for modern audiences. it has some coolest female characters list . While other animes focus on their male protagonist. In Akutami’s world, the girls and women are complex, sentient individuals who live full lives apart from boys and men. Moreover, It’s a beautiful, liberating portrayal of female characters, and something I wish more shonen manga-ka could learn from. Not sexualizing female characters for fan services, for instance.

    Kaisen is a damn near perfect shounen anime and its women are a big part of that. The fact is, It’s not that anime has shown every character the strongest or powerful. It has given some week characters too but they have dedication. Most importantly, they don’t need power as an excuse to shine, they have incredibly written backstories which also inspiring to watch. That’s what makes Jujutsu kaisen female characters the coolest ever.

    Let’s see just how incredible Akutami is when it comes to portraying female characters. Rather than focusing on the main protagonist, he has written each and every character damn perfectly.

    Jujutsu kaisen coolest female characters lists are :-

    Nobara Kugisaki’s.

    If I’m not mistaken, Nobara Kugisaki, one of the manga’s three primary protagonists is surely one of the coolest.Outspoken, confident, and powerful in her own right, Kugisaki raises the standard for female protagonists. In addition to that , She’s strong enough to fire nails like bullets with only a hammer.

    Again ,She is intelligent enough to outwit her opponents with a clear and concise strategy. Despite being her a grade 3 sorcerer, she has gained respects of lots of people. Furthermore, Nobara Kugisaki’s message of unapologetically being yourself regardless of the standards of those around you is one that anyone can take to heart.

    Maki Zen’in

    Her remarkable physical strength allows her to challenge foes far larger than herself. As for me , she will forever go down as one of the coolest female character. Since, she lacked cursed power which eventually lead her a rougher future. Unfortunately, the family disowned her as they refuse to accept any kind of weakness. However, Maki’s took it as a challenge and vow to be the head of Zenin family. It’s not only her superhuman abilities but also her direct striking personality.

    jujutsu kaisen does have some amazing character designs. it’s so refreshing to see designs like that in shounen! turns out it is possible to have cool and powerful non hypersexualised anime girls after all. That’s why Jujutsu kaisen has an amazing coolest female characters list.

    Kasumi miwa.

    Miwa is a character shown as a week character in the series. Despite of that , she has a fierce dedication to succeed in her missions. Miwa is a perfect example of a week girl who has shown to be defeated against maki without a sweat. She tries really hard in her own way. Along with her strong drive to fight for herself and succedd, she also shoulder the burden of her poor family.

    Kasumi wields a katana as her main weapon in battle. She fought with Yuji for a very short moment. Also her fight with maki particularly was not that great. But she can do better in future if trains well. She still is the coolest female characters of Jujutsu kaisen.

    Mai Zenin.

    Mai is absolutely great, she just wanted a normal life but was dragged into what she hated by the one person she trusted. Despite that she found the strength to become stronger and fight for herself. However she isn’t as incredibly strong minded as Maki because she is too sensitive.

    Mai is great, and she is very admirable as a human being. She’s sensitive, but she’s also strong and she has repartee. Her character is not enough appreciated . Since most of people think she’s annoying as fuck, if I knew her irl I would stay 50 feet away at all times. But she’s such aa great character though, ugh MAI SUPREMACY.

    Momo nishimiya.

    Momo has a technique which allows her to levitate. By swinging her broom , as she rides it she can launch supposedly powerful attacks towards her opponents.

    She is the biggest scouter in the series and pretty useful in what she does. Momo is pretty strong as she was able to compete with nobara. She made it difficult for Nobara to reach her with any attacks. She is also one of the coolest female characters written by gege akutami.

    Hopefully as the anime fandom grows, and we get more diverse writers, female protagonist will pop up more! There are alot of coolest female characters in Jujutsu kaisen with their powers not fully discovered yet. Hence, the list might seem short. Although, as for manga chapter, some female characters revealed but still not enough to witness their abilities completely. But in anime these are Jujutsu kaisen coolest female characters list.

    Conclusion

    I hope you guys enjoyed reading it . Did you guys enjoy reading this article ? Let me know in the comment box.

    People are also reading:

    How To Make A Character Animation From Among Us In illustrator

    HOW TO MAKE AMONG US CHARACTER ILLUSTRATION

    Sticky post

    In this blog i’m going show you how to make a among us character illustration using rectangle tool and color picker. So let’s get after it.

    HOW TO MAKE AMONG US CHARACTER IN ADOBE  ILLUSTRATION

    Video Tutorial of AMONG US CHARACTER ILLUSTRATION


    STEP 1

    In first step you need to create a rectangle and colour it with the help of color picker tool use six digit hex number #7f1416. And stroke it with 14. so this the first step HOW TO MAKE AMONG US CHARACTER ILLUSTRATION.

    HOW TO MAKE AMONG US

    STEP 2

    In second step we have to make a another triangle and put it in the downward of the first tringle and color it using the same hex six digit number.

    AMONG US CHARACTER ILLUSTRATION

    STEP 3

    In third step we have to select both rectangle and choose pathfinder and then click on minus front (alt -click to subtract from shape area).

    p by step AMONG US CHARACTER ILLUSTRATION

    STEP 4

    In this step we have to select direct selection tool and with help help of this tool we have to change the radius. First select downward part and change its radius to its maximum.

    MAKE AMONG US CHARACTER

    STEP 5

    Now we select the top part of rectangle and with the help of direct selection tool change its radius to its maximum.

    how to draw among us character

    STEP 6

    Now we have to make another rectangle for eye part and color it with the help of color picker tool and use six digit hex number 2ba9e1.

    among us illustration

    STEP 7

    Now choose direct selection tool to change the radius of new rectangle to its maximum.and stroke it to 14.

    among us illustration in adobe illustrator


    STEP 8

    In this step we have to take two duplicate parts of eye rectangle to give shadow to the eyes part.

    easy way to make among us

    STEP 9

    Now select both duplicate rectangle and select both and with the help of pathfinder tool we have to click to minus front. And subtract from shape area and remove its stroke.and Color it using six digit hex number #1379b4.s so this the other step how to make a among character illustrtation.

    how to draw among us in easy way

    STEP 10

    Now put it on the eye area to give shadow to eye part .

    among us tutorial

    STEP 11

    Now in this step we have make a another rectangle for eye part and with help of direct selection tool change the radius to its maximum. And color it using six digit hex number #ffffff. and put it on the eye part.

    how to make among us animation.

    STEP 12

    In this step we are going to take another rectangle to make back part. So draw a rectangle and color it using six digit hex number and send the rectangle back with the of arrange.( select rectangle and right click then click on arrange and then click on send to back).And don’t forget about the strock. this is HOW TO MAKE AMONG US CHARACTER ILLUSTRATION.

    how to make your own among us character

    STEP 13

    In this step choose direct selection tool to change the radius of the back part rectangle. And give it a shadow, for shadow duplicate the same rectangle two times and merge them and then with the help of pathfinder tool subtract the part from the area.

    adobe character animator


    STEP 14

    In this step we have to a choose a ellipse tool for shadow part. Make a ellipse and then Color it using six digit hex number and remove the stroke and then select the both rectangle with help of shape builder tool cut the top part of ellipse. And arrange the ellipse for shadow.

    How do I make an among US animation in After Effects?
    14.2
    How to make a  among usCharacter


    STEP 15

    This the last part we have to make another shadow part with the help of ellipse tool and color it using six digit hex number #7f1416 and then add a background with the help of rectangle and it backward and color it also using six digit hex number #c1282d.

    Make among us
    15.2
     how to Make among us

    Conclusion:

    Hope you like this tutorial( HOW TO MAKE AMONG US CHARACTER ILLUSTRATION) ? Did you enjoy this type of article? Let me know on on the comment box. Finally we learn enjoy and try it your own .

    Happy Illustration! ?




    People are also reading:

    female characters in anime.

    Top 10 strongest female characters in anime.

    Sticky post

    Anime has a history of hyped male characters. Since we all have already witnessed about male characters development in lots of animes. We can relate with the fact that it sometimes lacks the development in  female characters. They just got tossed to the side to focus on male characters or sometimes seen just to admire the male protagonist. Her own story and development never shines in front of the main characters. We need anime having some of the best and strongest female characters in anime. List of top 10 strongest female characters is below.

    However, There are some female characters who doesn’t need a protagonist to shine. Their characters are written well enough to shine regardless. In spite of the flaws , they don’t need any male character to make them seem relevant.

     Here is a list of top 10 strongest female characters and written well enough that you will love to watch on screen.

    10. Yaoyorozu Momo from My hero academia.

    Yaoyorozu is frequently cited as the “most intelligent” character in My Hero Academia, having S class intelligence. She has intelligence and on top of that her Quirk, Creation, is one of the most versatile in the series . It  allows her to create any material from her body fat, as long as she knows its chemical makeup. Her personality does bother sometimes like lack of confidence. But the overall characters is great. She is already one of the strongest female characters and If the writers works better on her personality development she’d be the most badass characters of the series. she is votes to be in the top 10 strongest female characters list.

    9. Android 18 from Dragon Ball z

    Firstly,  If you consider raw strength and fighting ability ANDROID 18 (Dragon Ball Super) is definitely among the strongest female anime characters of all time. Although, we have vados the female angel as the strongest but as a character who has entertained us with some kick-ass fighting scenes I’ll go with Android 18. She is undeniably the strongest female character who handed most of those guy’s their ass. She came out victorious after fighting against Vegeta for instance. After that, she also took on both trunks and Goten together.

    8. Saber from Fate/Zero 

    She is Hailed as the King of Knights and the wielder of Excalibur, Saber is one of the main characters in the Fate series. She is considered as the “most outstanding” characters with excellent ratings. Saber is considered the strongest because of her determination, braveness and dignity. 

    Her strength has often been acknowledging to be at par with some of the other strongest servants out there. Beyond her prowess, she has the mind of a warrior too. Her armor is comprised of magicand whenever she weilds the Excalibur the victory is her’s. Amen!!. She’s one badass knight yet a kind soul who has a soft side for people she cares about.

    7. Violet evergarden from violet evergarden

    . I think Violet Evergarden is the Best anime SERIES I’ve ever watched so far, hands down. Violet is beautiful, mentally and physically strong yet emotionally numb. Due to her being emotionless she has merely seen as nothing but a human tool who faught for the war due to her extraordinary capabilities in killing. She kills people as without having any second thoughts. 

        6.  Nobara Kugisaki from jujutsu kaisen

    Nobara Kugisaki is a character from the famous series Jujutsu kaisen. Although, Jujutsu kaisen has some more on the list of female characters . We don’t see lots of crazy powerful, independent female characters everyday. Nobara’s character is undeniably the strong willed, and capable as a fighter. 

    She may have a different fighting style but her attitude and approach is what makes her strong.  She is brash and self confident woman who lives life on her own terms. She has given her own proper screen time and personality development moments in anime . Nobara’s character is not like other anime girls who have been given backseats and reduced to romance. 

          

    5. Erza Scarlet from Fairy Tail

    Fairy tail has done stellar job in writing female characters that you forget about the male protagonist all together while watching.Erza fights are always a treat to the eyes . She I believe satisfies almost all of your criteria. Erza Scarlet hailed as the queen of fairies, the most badass woman in Fairy Tail guild, is one of the S-class mages of Fairy tail and has also served as the guild master for a short while.

    She is super strong, intelligent and smart, knows her act and .She has this ability to swap out various weapons and armor at will that give her various powers. She is scary enough to terrify quite a few strong members in her guild but is also known for her kindness. She is always found in the top 10 strongest female characters list .

            

    4. Maki Zenin from Jujutsu kaisen

    Maki Zenin is also an amazingly written female characters from jujutsu kaisen. She has earned lots of people’s respect . However she doesn’t have the abilities of a regular jujutsu sorcerer. She can’t see cursed spirits still she has chosen this path anyway. Maki has her superhuman strength , can use multiple weapons , dedication is enough to make up for her lack of powers. 

    Her fights has some of the best scenes and moments . Watching her fight is artistic and has an aesthetic to it.

    3. Annie Leonhart

    Annie Leonhart from Attack on titan

    Annie Leonhart is also an amazingly written, strongest and badass female characters from attack on titan. She holds exceptional combat skills , endurance abilities, and great intellect. Moreover, She is fiercely capable in her human form that she has almost dominated every scout member easily. Though, No one stands a chance against her martial arts prowess except Mikasa might . However, We never came to know who’d have won if they both had fought. In addition to all that She has intelligence to outmaneuver and to make herself elusive from Levi Akerman. She was one of the most severely deadly opponents.

    2. Mikasa Ackerman from Attack on titan

    Once Mikasa Ackerman said, ” I am strong. Real strong, none of you come close.”

    Mikasa Ackerman is the main female protagonist of the famous anime/ manga  “Attack on titan” written by hajime isayama.

    Mikasa is stoic, level headed ,emotionally withdrawn, and deadly. She is not just a pretty face, but one of the smartest and most proficient recon corps members, also she’s badass. She is insanely skilled and the fact of killing titans with ease is already terrifying. Her difficult upbringing has left her look as unkind and cold to other people. she’s rarely seen to lose her cool . She’s a strong sense of right and wrong and may remain stoic and level-headed in the most dire scenarios. She is always found in the top 10 strongest female characters list.

    1. Mereoleona vermillion from black clover

    She is one of the most strongest female characters in the whole anime “black clover” lseries let alone the female list. 

    Although the black clover anime has some of the best written female characters like Noelle, Charmy, Charlotte, Dorothy etc. But mereoleona is the Uncrowned, Undefeated Lioness , one of the most powerful characters on the show, hands down. Her fire magic is so powerful she’s able to boss around even other Magic Knight Captains because no one’s able to stand against her power, let alone her will.

    She excels in nearly every aspect of being a fighter, from combat ability to magical control and her actual mana pool.

    She’s the first person to show us what a Mana Zone could do, she learned it on her own by going through vigorous training in the forest for years. She easily crushed numerous elves that attempted to challenge her. 


    People are also reading:

    Top 10 Most Trendy Instagram Filters .

    Top 10 Most Trendy Instagram Filters .

    Sticky post

    I am going to show you list of top 10 most Trendy Instagram Filters everyone using now days. So let’s get after that.

    01. H E A T 2.0 from arthur. Csgo

    Design by : arthur. Csgo

    This is one of the under top 10 most trendy Instagram filter. It will make your face clean and smooth and give a red light on your face and make your photo more pleasingly aesthetic. Try this filter and let me know if you are digging it or not.

    Candy from linaraffie

    Design by : linaraffie

    This is one of the my favourite Instagram story filter. This filter is trendy and popular also . This make your skin smooth, and it also add some colour to your lips and make your cheeks blushy. I know you would like this filter too.

    aesthetic instagram filter

    Glothing from jasson _ aaron

    Design by : jasson _ aaron

    This filter give you a different amazing look like it will change your eye colour and add little bit of noise to your picture. And make your picture More aesthetic and cool. this filter also come under in top 10 most trendy Instagram filters.

    top trendy instagram filter

    Grain Cool from kervinalmarza

    Design by : kervinalmarza

    This filter give your photo a simple and pleasing look. It will make your photo yellowish and add some grain to your photo which look to good and trendy . This filter would make your cheeks little blushy and also change the colour of your lips.

    instagram filter for cool pictures

    Kodak portra from designbyayisha

    Design by : designbyayisha

    This filter is also very popular and trendy. It has a lot of dust flying on the screen type filter give your picture a vintage look.

    best instagram filters

    Moody tunes from thaifurtado

    Design by : thaifurtado

    This filter is one of my favourite filter from Instagram story. This filter make your photo brownish and give your photo vintage look. This is brownish and natural filter.

    top best instagram filters

    Freckles by bdimitrov

    Design by : bdimitrov

    This is most popular and trendy Instagram filter. One of his most popular ones is the Freckles effect, to add freckles on your face. And if you like freckles and definitely this filter is for you. Try this filter and make your photo pleasing aesthetic.

    Instagram filters for aesthetic pictues

    Glitter from dingmintt

    Design by : dingmintt

    This filter make your face smooth and pleasing and photo cool . It will change your colour complexion and make it more beautiful.

    top Instagram filter

    Summertimes from robertobrendo

    Design by : robertobrendo

    This filter make your photo reddish colour. And add grain (noise) to your picture. And add blush and this filter change your lips colour too. This is one of the most popular and trendy Instagram filter

    aesthetic trendy filters for instagram

    .Hello kitty from luhsetraoficial

    Design by : luhsetraoficial

    This filter is so uwu. I personally love this filter and i would hope you also like this filter . Because this filter is so cute and add a hello kitty sticker to your face and make your pictures cool and amazing.

    Most Trendy Instagram Filter .

    I hope you would like this blog. Let me know if you like and show your love in comment box . And try this Trendy and popular filter.

    Red Berries

    When it comes to creating indoor Instagram stories, this is the filter we all need because it brings out the whites in your space and gives it a dazzling feel to make it look more appealing.

    Additionally, it makes your skin softer and your nose appear slightly thinner.

    Try Red Berries


    People are also reading:

    how to Make a Heart In Adobe Illustrator - Super Easy

    How To Make a Heart In Adobe Illustrator – Super Easy

    Sticky post

    In this blog i’m finna show you how to make a heart in Adobe illustrator step by step in very easy way with the help of shape tool and direct selection tool and color tool. so let’s get after it.

    how to create a heart

    Step – 1

    First we have to click on file to select a new artboard for our work.

    How to make a Heart in Adobe Illustrator.

    Step – 2

    Then we have to select shape tool and create a rectangle with a radius whatever you want. its a step by step process don’t miss any step otherwise your heart will not look perfect so just follow the given step by step.

    how to design a heart super easy way

    Step – 3

    Change corner radius of one side to its maximum of the selected rectangle with the help of direct selection tool.

    how to draw heart icon or illustration

    Step -4

    Give a colour in rectangle using six digit hex number #F72D4a with the help of color picker.it will give you red color to your rectangle.

    how to make heart icon using just a rectangle.

    Step – 5

    Duplicate the same rectangle and rotate it by 90° and align shapes Togetheror merge it together to make a perfect heart .

     how to create heart step by step
    STEP 5.2

    Step – 6

    After this your heart is ready then add a background and give colour to it. Using six digit hex number #f1f2f2. background is important it will your heart a perfect look .

    Step – 7

    Heart is ready now. this is how you can make a heart in adobe illustrator step by step by easily using just a rectangle.

    how to make a heart in adobe illustrator.

    how to make a heart in adobe illustrator Video Tutorial

    Conclusion

    Although it was a lot of work on producing the content, it was a fun day. hope you learned a lot along the way,I hope that it will continue this way! ?

    If you want to follow along my YouTube journey, you can subscribe to my channel. More crazy challenges are coming! ? In the meantime… ?


    People are also reading:

    how to make a simple smiley face in illustrator

    How To Create a Smiley Face Emoji In Adobe Illustrator.

    Sticky post

    In this blog I’m finna show you how do you make a smiley face in Illustrator or How do you create an emoji? step by step in Adobe illustrator by using shape tool and color tool. So let’s get after it.

     This is  How do you create an emoji step by step.

    How To Draw Emoji Video Tutorial

    Step – 1

    Click on file to select a new layer.

    How to make emoji in adobe illustration.

    Step – 2

    Select the Ellipse Tool, Left-click anywhere on the artboard to create a new ellipse. Then select the width and height for ellipse. For instance i choose width of 343.3333px and height of same as width. This How to create a Smiley Face.

    illustrator smiley face.
    STEP 2.1
    how to make a smiley face in illustrator

    Step – 3

    In third step you have to select circle to add colour into it. Double-click the Color Picker in the Toolbar on the left, and specify a 6 digit hex colour of #FFCC66. This process will give you selected circle yellow colour. And remove the stroke.

    emoji vector illustrator
    STEP 3.2
    How do you make an emoji in Illustrator?

    Step – 4

    If you want to save the colour then you have to click on the swatches palette, click the new swatch option to save this colour as a swatch.

    adobe emoji font

    Step – 5

    Now we need a semi circle, so for a semi circle first we need a circle and then select direct selection tool, left click on the top centre anchor point of a circle. Now the semi circle process is done. After this process you are saw a semi circle on your screen. And now add colour #1D1D1B in semicircle.

    emoji vector illustrator

    Step – 6

    Select the Ellipse Tool and draw an ellipse over the top of this new semi-circle, covering approximately half of the semi-circle shape – this is going to be the tongue for our emoji.Add this new ellipse the colour #231f20.

    illustrator smiley face

    Step -7

    Now select both the semi-circle, and the newly created ellipse, and in the Pathfinder Palette, select Divide. Use the Direct Selection Tool, you can now select the spare of the tongue shape and press Delete or Backspace to cut that part.

    Step – 8

    Next step will be is that tongue is ready now we have to give a colour to tongue so specify a 6 digit hex of #f05368.

    How to make your own emoji | Adobe Illustrator

    Step – 9

    In this step we will make eyes of our emoji. So you have to select pencil tool for eyes. Then make a ” >” this type sign to make eyes . And then remove the colour fill option and add stroke and increase the strock to 12 pt . After that step a yellow uwu smiley emoji is ready .

    How to create 3d Smiley faces in Illustrator?
    STEP 9.2
    how to make a simple smiley face in illustrator

    Step -10

    After that we have added a background to it. Select a shape tool and choose rectangle shape and use it as a background and then add a color #f1f3f6. Then export it. This is how do you make a smiley face in Illustrator or How do you create an emoji?

    how to make an emoji in illustrator

    Result :-

    So the final result would be How to create a Smiley Face.

    how to make an emoji in illustrator

    People are also reading:

    Top 10 strongest young characters from Boruto

    Top 10 strongest young characters from Boruto people – Most Voted 2021

    Sticky post
    Top 10 strongest young characters from Boruto

    Boruto has one of the most iconic anime casts which is making the anime popular. Manga was already quite famous from the start. As for now a lot of people are digging anime because of their favourite characters development is in detail. The anime has made manga pretty interesting . But in this hole post i will tell you Top 10 strongest young characters from Boruto .



    Boruto had lots of haters from the beginning. To be honest people were comparing it with Naruto. However, in recent few years the manga was ranking at top constantly. Anime fans are starting to grow more. From the last few years the amazingly written characters have fascinated most of the viewers. The writer has given each and every character fascinating personalities and strength. People are literally finding moots on twitter. 



    No one knows what will happen after the time skip but as for the time being here is the list of characters from the series who are gonna shine even after the time skip. 



    This list contains top 10 powerfull young characters from Boruto people Most Voted for. Here is the list i will mention below do comment and write your opinion for each .



    10. Himawari uzumaki

    Himawari has always been the adorable cutie and fans favourite since the boruto movie came. Her character as a child impressed everyone. She is calm , ultimately adorable, selfless, kind hearted, friendly and quite instinctive. 

    When She was provoked enough she activated her byakugan at an early age . she is included in the list of Top 10 strongest young characters from Boruto.

    Himawari has shown intimidating and violent side similar to her paternal grandmother Kushina uzumaki when angry enough to knock out kurama and make boruto run away. She has been seen in action during a few episodes in anime. She’ll be stronger as she has inherited both her parents abilities and chakra.



    9. Kagura Karatachi

    Kagura is very advanced in kenjutsu, as even in the Academy his performance was feared by others. In the Academy, his prowess was shown to be especially high, swiftly defeated all his opponents in matches. As such, Chōjūrō wants Kagura to eventually succeed him as Mizukage, a position reserved only for the strongest shinobi of the village. This is the 8 charecter out from the Top 10 strongest young characters from Boruto .

    Apparently he has a subconscious bloodlust side to him, as once worked up too much in combat, he goes on a blind rampage. Upon meeting boruto during a field trip, boruto convinced him to leave the guilt behind and helped him to regain faith in himself. 



    8.Inojin yamanaka

    Inojin seems rather blunt and speaks his mind often. He can be rude and indifferent to the people and can’t hold his tongue just like his father sai. In anime inojin appearance was quite interesting to watch. His bold attitude and blunt behaviour was fun to watch.

     Fans look forward towards this attitude. He has inherited both his mother’s and father’s abilities greatly. He can use mind- oriented techniques of his yamanaka clan and has been taught the art oriented techniques of his father. He is able to use so many techniques effectively.



    7. Shinki

    Shinki is the adopted son of the gaara. Shinki has the same abilities as gaara has. Shinki has literally an enhanced version of Gaara’s. Gaara  has taught him to control his power since he was unable to control it. He trains with kankuro also and adapted his puppet styles to his own fighting too. 

    He was first jealous of boruto but eventually they both got along. The personality and strength he has is what made his character more fascinating. As characters are not getting enough story development by the writers but for future storyline these are the strong characters are needed to make the series interesting.



    6. Sumire Kakei

    Sumire’s character was introduced in the very beginning of the anime. She has gone through arduous training as a child her abilities as a kunoichi is above genin level. Her character development was well written in boruto anime.

    The bond between Nue and her is what people love to see. Her personality is rather meek and quite girl. She trusts boruto alot and in future we might get to know her character as an important aspect for the anime since she has Nue and related to the dimensions of other world.



    5. Shikadai Nara

    Shikadai is also one of the top fan favourite character from the boruto. Nara clan never disappoints the fans  wheather it’s Naruto or boruto, this clan has always been in the spotlight. Shikadai took after his father, shikamaru , in several ways. He always has this relaxed , unenthusiastic personality.

    Shikadai is capable of manipulating his shadow in various ways. He is also proficient in Wind Release, as he is able to use his mother’s signature Sickle Weasel Technique. Like both his parents, Shikadai is a natural strategist and tactician, constantly taking a methodical and analytical approach to battle to stay steps ahead of the opponent. In future shikadai character would be much interesting to watch.



    4. Sarada Uchiha

    Sarada was an absolute fan favourite from the very getgo. Some have issues with her glasses as she is an uchiha. But most of them admire Sarada for her maturity, she has always been the one to her shinibi will , the way she show patience during fights. Her strategies and plans leads to victory. In upcoming anime Sarada is going to rock in so many scenes. 

    Sarada has inherited sakura’s monstrous strength along with sharingan. She is one of the most powerful female character in boruto anime. 



    3. Mitsuki 

    Mitsuki has a very calm , cheerful and matter-of-fact demeanour.  While not confrontational, he freely speaks his mind in any situation, and does things at his own pace. He had the strongest character development out of everyone in boruto. He is way more laid back  and it feels like he actually learned a lot from being around his son, boruto.

     Mitsuki’s strength is no joke hence Orochimaru himself confirmed that mitsuki is stronger than him.He has Sage Mode which he is unable to control , he has healing abilities , flexibility and he can regenerate. 



    2. Kawaki

    Kawaki is on the top fan favourite list. Kawaki is good looking, cold still soft and calm. This behaviour is what people are loving the most. 

    Even though kawaki displays a defensive and menacing personality but his personality is certainly worthy of being a fun character. Kawaki doesn’t show emotions but he has a soft corner inside him . Specially for Naruto what he feels and the way he admire Naruto makes him the perfect character. Kawaki had a really terrible childhood and now with Naruto he is learning to open up  and warms up to those who are important to him . His character development is appreciated by most of the fans.



     1 . Boruto Uzumaki

    Boruto is the one of the most well written character in the series. Anime is reallBoruto is smart, mature , knowledgeable and suffice to say he is able to perform at johnin level sometimes. 

    As Kakashi also said that he has inherited his father’s unpredictability and grandfather’s intelligence. He is strong , has vast chakra reserves and is able to perform great battle strategies. 

     He has trained with so many great ninjas, Kakashi, Naruto, hinata, and sasuke has also accepted him as his student so he is gonna be great. all done these list will defiantly give you the idea of Top 10 strongest young characters from Boruto most voted for


    People are also reading:

    THE 5 BEST PHOTO EDITING APPS FOR IOS & ANDROID IN 2021

    THE 5 BEST PHOTO EDITING APPS FOR IOS & ANDROID IN 2021

    Sticky post
     BEST PHOTO EDITING APPS FOR IOS & ANDROID IN 2021

    As we all are sitting at home doing nothing, we can spend this time productively. As we all are more active on social media. We can make our pictures more aesthetic. I’m telling you the best photo editing apps for android and ios.

    Best Photo Editing Apps for Android and iOS

    1. vsco 

    Available on iOS and Android | Free

    Best for : Aesthetic-look filters.

    VSCO Photo Filters App Free

    VSCO is one of the most used editing apps with advanced features . Not only pictures but you can edit your video also

    Note :- Remember that lot of people are not aware of that video should be more than 5 min, otherwise your video will not edit if it is shorter than 5 min.


    1. Vsco has many filters, and their filters made your photos more aesthetic
    You can simply connect your vsco with your Instagram. There is saturation, sharpness, exposure, filters, shadows, highlights, contrast, cropping, tints, grain or noise and more you can turn your Picture in more aesthetically with the help of vsco.

    • Vsco is popular nowdays , this app is used by most of the genz generation. Coz vsco provide you more and more creative. Things which you want for your photos the filters are uncountable there are lots of amazing and cool filters in vsco thats why i would highly recommend you this app for your photos .
    • You can also upload your photos here too and people come and like your ideas and if they like your ideas they can follow you.

    2. Picsart 

    Available on iOS and Android | Free

    Best for: Photo Editor: Pic, Video & Collage Maker

    FREE PicsArt Photo Editor: Pic, Video & Collage Maker

    Picsart is my second favorite app for editing my pictures. There are lots of filters and amazing things this app gave you to editing your pictures. One thing i like about picsart is that if your picture background is not good you can easily remove you background by using this app. You can add more aesthetics background and also add accessories and more.

    This app is most used in modern days lots of Instagram People edit their photos with these app and make their pictures more aesthetic and cool.

    • You can also use this app for making your you tube thumbnails.
    • You can also decorate your pictures and videos and more you want you do anything with the help of this app .

    3. Lightroom

    Available on iOS and Android | Free

    Best for: Photo Editor & Pro Camera

    best free Adobe Lightroom - Photo Editor & Pro Camera

    Lightroom is basically used by professional to create hd and detailed editing.

    • .Lightroom automatically saves your pictures to the cloud. You can do creative editing, compositing and designing as well as. the ability to save and compare different versions of your edited image, and being able to customize default settings for your import of RAW images.
    • The vast majority of edits that you will do are controlled with powerful yet easy to use sliders. These include adjusting a picture’s exposure, color, focus, optics, geometry and to add effects.
    • Lightroom also has tools for editing precise sections of your photo. This includes Adobe’s great healing brush for painting out imperfections or unwanted objects (such as electric wires) in your picture. Lightroom is a winning combination of accessibility, creativity and quality.

    4.Snapseed 

    Available on iOS and Android | Free

    Best for: Professional photo editor

    advance photo editing app

    This app is perfect for mobile photography. You can edit your photos in different amazing and cool filters and make your photos more aesthetic.

    • In this app there is also a option of drafts folder so you can go back to your unfinished work and start all over again.
    • There is also a PNG files on the exposure. This app contains lots of amazing features. This app is easy to use and too amazing .you can find a very good tone feature and non- destructive edit stack , a good interface and the most amazing thing about this app is that there is no ads . There are lots of amazing features and tools .The UI of this tool is also good . I would recommend you to use this app to edit your pictures.

    5.Vinci 

    Available on iOS and Android | Free

    Best for: Artistic filters and compare different art styles

    free for photo editing and best quality pictures

    This app is also good for editing pictures lots of amazing features and filters . This app is Easy to use and pretty simple . Fast interface and no annoying adds . This app convert your pictures into art and give your pictures very cool colours . Effects are also amazing and filters as well. Nevertheless a good app which you should try.

    Hope that it will be helpful to you guys.


    People are also reading:

    Covid-19 Vaccine in the Midst of circulation. Covaxin or Covishield?

    Sticky post
    Covid-19 Vaccine in the Midst of circulation. Covaxin or Covishield?

    Introduction:

                After almost a year of constant fear and suffering, the economically downtrodden world is slowly gaining back its power, from the clutches of the world-feared corona virus, with the help of the vaccines. On this day, exactly a year ago, there was an unexplainable fear in the hearts of people, and it was the first time in many years, that a virus this strong had attacked the mankind mercilessly. It did not differentiate between rich and poor or fair and dark. It took what it needed from whoever it got its vicious grasp on. So, when the scientists worked so hard and found a solution to the pandemic virus, it came as a huge relief to the people all over the world. (Covid-19 vaccine Covaxin Covishield)

    Covid-19 Vaccine in the Midst of circulation. Covaxin or Covishield?

    The Huge Relief:

    Since early 2020, the Covid-19 vaccine had been under expedition, but it was only in December 2020, that the first ever vaccine got approved and came into use after various phase trials, both with humans and animals. Pfizer’s Covid vaccine is the first vaccine to get a thumbs up sign from the World Health Organization and it first came into use in UK, as there were many victims. For once, the world did not let the discrimination, that had been termiting the brains of people for over millions of years and scientists form various countries came together to find a solution to end the miseries of people as well as lockdowns.  

    Successful Outcome:

                All the countries are engaged in the process of finding a quick solution to the world feared pandemic. Most of them have come out successful, while the others are in the development phase. As of February 2021, seven different vaccines have been granted permission from the WHO and they have started their work as an emergency operation through COVAX, all over the world, the first priority being the vulnerable population. The vaccines that have given successful results are,

    • Pfizer Vaccine
    • Covaxin
    • Covishield
    • Moderna Inc Vaccine

    These are the vaccines that have been agreed and approved by the WHO, while more than 200 additional vaccine candidates are under development, of which more than 60 are in clinical development.

    Indian Vaccines:

                Our country has also taken part in the vaccine development and we have succeeded in developing two vaccines that have been approved and in circulation. Bharat Biotech’s Covaxin is India’s first indigenous vaccine developed in collaboration with the ICMR – NIV. The other one being Covishield developed by Serum institute in tie up with AstraZeneca and the Oxford University. These two vaccines have been proved effective to fight the Covid-19 and are used in many other countries too.

    Covaxin and its effects:

                The vaccine has been in use currently inside the country and in some other countries like Mongolia, Myanmar, Sri Lanka, Philippines, Bahrain, Oman Maldives and Mauritius. In all these countries it is reported that there are no major side effects sited in the people after getting vaccinated. A study also states that it is much effective even against the new found strain of Covid-19. This vaccine is highly effective and has shown high levels of antibody response in mid-stage trial. The company says, it had shown 81% efficacy in preventing symptomatic Covid-19.

    Side-effects of Covaxin:

                The people, after getting the first dose of Covaxin are found to have been reported with injection site pain, injected site swelling, redness, itching and weakness. They also suffer stiffness in the upper arm, body ache, head ache, fever, malaise, rashes, nausea and vomiting. Apart form these, the Bharat Biotech said that there is a ‘remote chance’ that Covaxin could cause severe allergic reactions. Such are, difficulty in breathing, swelling of face or throat, a fast heartbeat, rashes all over the body or dizziness.

    Covishield and its Effects:

                This vaccine is developed using a weakened version of a chimpanzee common cold virus that encodes instructions for making proteins from novel coronavirus to generate an immune response and prevent infection. Two doses were originally thought to give a complete positive result, but later the scientists revealed that the oxford vaccine has an overall efficacy of 70 % but could be around 90% effective when administered as a half dose followed by a full second dose. The vaccine seems to be more than 80 effective at preventing illness among the elderly, at-risk individuals after a single dose according to the preliminary research.

    Covishield Side-effects:

                Serum institute of India (SII) has stated that there are very common side effects that might affect more than 1 in 10 people. That are tenderness, pain, warmth, redness, itching, swelling, feeling unwell, fatigue, headache nausea and joint or muscle pain. However, reliable sources have stated that they have faced fatigue, feverishness, severe body ache in varying individuals according to their age. The older the person, the more severe the pain, accompanied by joint pain. SII also stated that people might have flu-like symptoms, sore throat, runny nose and chills.

    Covaxin or Covishield, What do You Need?

                Covaxin is an inactivated vaccine based on a tried and tested platform of dead viruses. The most important thing in this is the dead virus that is incapable of causing any infection once injected to people, but still instructs the immune system to fight against the infection.

                Whereas Covishield is based on the viral vector platform. A chimpanzee adenovirus is the vector that has been modified to carry the spike protein to human cells. While the injected cold virus is harmless, it serves as an instruction manual for the body on how to fight similar viruses.

                Both vaccines don’t require sub-zero storage, no reconstitution required. Pre-clinical studies demonstrated strong immunogenicity of Covaxin and protective efficacy in animal challenge studies whereas Covishield shows the success rate of 62 percent.

    Approvals:

                Covaxin has received a restricted use authorization in clinical trial mode, Covishield is approved for restricted use in emergency situations that may prevent Covid-19 in people who are 18 and older. Both vaccines don’t have a market use authorization yet.

    How Many are Vaccinated?

                As of March 15, 2021, 5,867,948 are fully vaccinated, while 27,079,484 have taken their first dose. 1.98% of the population have taken the first dose while 0.43% have taken the full dosage, resulting in gaining a strong immunity power to fight against the infection. We still have a long way to go, what with all the hurly-burly happening in some states, we are threatened to take a dose quickly as there is a chance the pandemic might return in full force, taking away the remaining confidence with it.

    Conclusion:

                The main purpose of the vaccine is to increase the immunity of the human body to fight against the infection and other foreign matters related to that. What we are forgetting here is that we would not have been affected this badly, if we had taken care of the improper food consumption that has been commented and portrayed as the changing social life style, opening the flood gate for all the unnecessary things. Still there is time for us reserve and reverse our food habits and try to build a stronger immune system with the help of proper food. Let us not regret forgetting our culture and tradition, and avoid diving deep into the black ocean full of modernity whales that are eager to confiscate our healthy life.

                                                                -Devimanju Mohan.

    Source: Some necessary information have been taken from the WHO website and some from reliable sources. A sincere thanks to Mr. Surendar for sharing his experience with us.

    Tamil Nadu State Assembly Election 2021

    Sticky post

    Introduction:

    The sixteenth legislative assembly election of the state Tamil Nadu, India is to be held on April 06 2021. There are 234 constituencies in the state and the election is going to be conducted on the same day in all the constituencies. This election is taking place after the major washout caused by the pandemic and the government has taken extra measures to assure the safety of the people and all the officials who are to work in order to conduct a peaceful and successful election. The term of the fifteenth legislative assembly will end on 24 May 2021.

     The Ruling Party:

                AIADMK (All India Anna Dravida Munnetra Kazhagam) is the ruling party and it is a part of the NDA. The chief minister who was selected by the party after winning the election was Ms. J. Jayalalitha, but after her tragic death of her on 05 Dec 2016, Mr. Edappadi K. Palanisamy was chosen as the chief minister and later as the head of the party. This party is trying all it can to retain its position and trust in both the people’s heart and the constitution.  

    The Opposition Party:

                DMK (Dravida Munnetra Kazhagam) is the opposition party that has been trying to gain importance and also the ruling chair after the death of the former chief minister of the ruling party, but all of it had been fruitless. They are trying to win the trust of the people of TN by pin pointing the mistakes of the ruling party and bringing out the scandalous affairs that includes the members of that party.   

    Election Commission:

                All the parties had started their campaigning from December and still they are in the final race of a delusional tortoise to win the hearts of the people with many promises and a few unseen and undetected gifts trying to blindfold the eyes of the innocent people in the process and succeeding to a certain limit. The ruling and the opposition parties are in for a huge battle considering the back up they are gaining from the national parties. They are trying to outrun each other and kicking off the blooming parties in the process, that have entered the age old race in the hope of bringing something new to the state which has been deprived of a new change as these two parties have won consecutively.

    Election Commission:

                The electoral commission’s chief electoral officer Satyabrata Sahoo has released the electoral rolls in Tamil Nadu and there are 6.26 crore electors in the state who are eligible to vote. Women voters at 3.18 crore outnumber men whose figure stands at 3.08 crore and 7,246 are third gender electors. During the revision 8, 97, 694 new electors were enrolled of whom 4.8 lakh are men and 4.16 are women. Forty-seven overseas electors have been enrolled and 4,62,597 PwD electors have been flagged so far.

                The election commission has also assigned a special force to stop people from getting money for their votes and strict measures are taken against those who trespasss the rules laid by the commission.

    Other Parties:

                There are only two major and predominant parties in Tamil Nadu that are leading the race for power and authority. But there are several other parties who have steeped inside the race to do some welfare to the people. They always go unnoticed because of the flashing lights of the two major parties that flaunt their flags everywhere they go. There are several religious and cast based parties who work only for the welfare of a part of the society, then there are really striving parties who were formed and work for selfless reasons. They all go unnoticed in the long run of five years and get side tracked by many financial and political problems. Such other parties are,

    • Communist party of India.
    • Manithaneya Makkal Katchi.
    • Marumalarchi Dravida Munnetra Kazhagam.
    • Tamizhaga Vazhvurimai Katchi.
    • Tamil Mannila Congress.
    • Puthiya Tamizhagam.
    • Desiya Murpokku Dravida Kzhagam.
    • Makkal Needhi Maiam.
    • Puthiya Needhi Katchi.
    • All India Samathuva Makkal Katchi
    • India Jananayaga Katchi, etc…

    Opinion Poll:

                A Tamil news channel named Tanti Tv conducted a survey recently and they had gathered the response of the general public in accordance to the election that is going to take place next month and they had an opinion poll. In their report they stated that DMK proposing Mr. M.K. Stalin as the chief minister candidate has the lead by seven percent than the ruling party proposing Mr. E.K. Palanisamy as the chief minister candidate. In their survey the AIADMK had got only 41% whereas the DMK had got 47% and the rest to the others. These figures are taken one month prior to the election. As per the tradition the people of Tamil Nadu have the habit of choosing after their last-minute instinct and the experts have also stated the same, saying that the election result will be based on the people’s last-minute decision.

    A New Change:

                The people of the prestigious and religious state have endured the democracy of the two hot headed clashing Dravidian parties for more than half a century. Today everything is changing and people are getting adapted to a newer life and a much newer policy of trying something new in their now well growing technical life. Thus they might also expect a new change in the leadership too. That decision may come as a torch being flashed in a dark narrow and abandoned lane, in their too crowded brain and they may take a decision that might finally bring a multi-talented head to the heavy chair that has been burdened with weak-spined termites.

    Alliances:

                The parties that are competing in the election have joined hands with other parties to strengthen their political power and perhaps to gain more self-alliances than considering any benefit for the people, who were struggling, are struggling and will always struggle. The ruling party has joined hands with BJP (Bharatiya Janatha party) and several other parties and they are providing major support to the competing party. The opposition party has joined hands with the Indian National congress and certain other religious parties to strengthen its loosening hold on the prestigious chair.

                A new and aspiring party named Makkal Needhi Maiam (MNM), which was founded by the multi-faceted actor Padmashri. Mr. Kamal Haasan has joined hands with AISMK and IJK to appear as a much more potent team to compete in the upcoming election. The beauty is, this party is naïve, but it has managed to gain popularity in a short span of time and appears as a strong party, proposing Mr. Kamal Haasan as the chief minister candidate.

    A Sneak Peek into People’s Minds:

                It is true that the ruling party has done so many welfares in the past five years and helped so many poor and innocent people to improve their lives and they did upgrade to the next level all because of the schemes announced by the ruling party. But the undeniable fact is that they have done mistakes too. The major question is that were they be able to create an ever-lasting image in the minds of people to urge them to give another chance to them or the mistakes that they have done would be twisted and schemed by the opposing parties for their own benefits?

                The opposition party is trying all it can to wash out the fame of its biggest opposition and has also succeeded in doing it to a certain extent. The dissatisfaction of people towards the ruling party has also made them to think twice before providing a hattrick chance for them to prove themselves once again.

                Another interesting fact is that a new party named MNM has also succeeded in turning people’s rusted head towards its direction with the help of the torch lighted face of the party leader. Mr. Kamal Haasan with his twisted words and witty intellect has managed to grab the attention of the people of Tamil Nadu and the party is slithering its way towards success in the muddy lane of politics.

    Conclusion:

                Predictions are going on and surveys are being conducted, but no one knows what happens tomorrow and what is in the minds of people who are ready to cast their powerful votes in favour of either of the above-mentioned parties. The tension will only be relieved in the judgement day which is on 02 May 2021, a day to be marked in history for the new judgement served by the people, for the people, and to the people or a day to be marking a shining victory for the flourishing parties, it is all in the people’s hands to write their own fate for the next five years. Let us wait to witness yet another political assurance.

    -Devimanju Mohan.

    How to Speed Up Your Windows 10 Performance

    ? How to Speed Up Your Windows 10 Performance with – SCleaner

    Sticky post
    How to Speed Up Your Windows 10 Performance
    How to Speed Up Your Windows 10 Performance

    we all know that struggling with slow computer is so really pain full ? But don’t worry guys in this blog i will cover all the queries regarding why your pc slow and give you the best and one click way to speed it up . i will show you how to speed up your window 10 performance with scleaner

    i know slow computer can make the simplest task like a real hassle to all of us . There are many ways to speed up your pc performance .

    01. Why Is my Computer is slow ?

    There are many ways that may be slow down your computer performance . I will mention the list below so that you can identify why your pc is slow down .

    Here are the some of the things that slow down your computer performance :

    • Too many backgrounds programs files
    • Too many startup programs
    • Fragmented hard drive
    • viruses
    • Obsolete Links & shortcuts
    • icon & thumbnail cache
    • Temorary files Memory Dumps
    • Chkdsk Files Fragments
    • Window error reporting files
    • Window Log files Window event logs
    • Recycle bin files
    • Old prefetch files
    • Taskbar jump lists
    • Browser Cache
    • Running out of disk Drive space

    Even much more scenarios occurs . So if your computer is running slow read on ways to fix each of these issues . i will give one click solution for your slow computer .

    02. ? How to make your computer faster

    i have used many pc cleaner software’s but todays i will give you the lightest pc cleaner software ever so that you can make your pc run faster and smoother . Even you can run Your games so smoothly .

    Personally i have used this software about 4 month and i observe that this software really work faster and smoother without consuming so much memory of your hard drive .

    There are planty of software available in the market but i will give you the best software ever which is not get too much memory of your hard disk . without wasting your time lets jump to the ONE CLICK SOLUTION – SCleaner

    • Just go to this link Click Here
    • Download the software (scleaner – light weight & simple system cleaner )
    • Just Press and and clean .

    here are the some of screen shot where you can see some simplest full featured software .

    SCleaner
    A simple & lightweight one click system cleaner

    Download Here

    scleaner - Downloader

    Conclusion

    Hope this method will help you to resolve our problem . if any query do comment in the comment box .

    Hope this will Help you enjoy !!


    People are also reading: