AdityaMotale/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Amazing Card Hover Effect</title>
    <style>
      /* Step 1 */

      /* This styles apply to all elements in our page */
      * {
        /*
        To include padding and margin in total width and
        height of the element
        */
        box-sizing: border-box;

        /* Remove default padding and margin of every element */
        margin: 0px;
        padding: 0px;
      }

      body {
        /* You can choose any colors you want */
        background-color: black;
        color: white;

        /* Removing default margins */
        margin: 0rem;

        /* Should take full height of the screen */
        height: 100vh;

        /* Hide any overflow if occurs */
        overflow: hidden;

        /* Choose any font you like */
        font-family: "Montserrat", sans-serif;

        /* Line height for our text */
        line-height: 1.5;

        /*
        To center our content on the screen
        */
        display: grid;
        place-items: center;
      }

      /* Step 2 */

      /*
      This card hold all of our content,
      keep that in mind while styling
      */
      .card {
        /*
        Default width, you can adjust it if you have
        more then one card on the screen
        */
        width: 440px;

        /* A funky bg color for our card  */
        background-color: rgb(16, 16, 16);
        /* Border color with 5% of opacity */
        border: 1px solid rgba(255, 255, 255, 5%);

        border-radius: 1.5rem;
        padding: 1rem;
      }

      /* Content holder inside our card */
      .content {
        /* Vertically align the content */
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;

        /* Add spacing between elements */
        gap: 1rem;

        padding: 2rem;
        border-radius: 1rem;
      }

      /* Elegant background effect for our content */
      .content {
        /* Dotted grid effect in the background of our content */
        background-image: radial-gradient(
          rgba(255, 255, 255, 10%) 1px,
          transparent 1px
        );

        /* Center our grid relative to the card */
        background-position: 50% 50%;

        /* Size of each dot or point */
        background-size: 1rem 1rem;
      }

      /* Style our text elements to look elegant */

      .content > h3 {
        color: mediumslateblue;
        font-size: 0.76rem;
        text-transform: uppercase;
        text-align: center;
      }

      .content > h1 {
        font-size: 2rem;
        text-align: center;
      }

      .content > p {
        text-align: center;
        opacity: 75%;
      }

      /* Step 3 */

      /*
      We are rendering the hover effect on top of our content without modifying
      it, hat's why we need to have position to be `relative` for our card
      */
      .card {
        position: relative;
      }

      /*
      The `:after` sudo selector, renders our hover effect
      without modifying the actual content
       */
      .card::after {
        /*
        This is important because we are not adding any content.
        `content` property is used to add icons, images, etc.
        to style our element better
        */
        content: "";

        /* width and height */
        height: 70px;
        width: 1px;

        /*
        Position our effect on top of our card element
        */
        position: absolute;

        /*
        Positions for our hover effect, we are rendering it on the left
        center of the card relative to the user
        */
        left: -1px;
        top: 50%;

        /* Background color for the effect */
        background: linear-gradient(transparent, mediumslateblue, transparent);

        /* Transition and delay for our effect to appear */
        transition: top, opacity;
        transition-duration: 600ms;
        transition-timing-function: ease;

        /*
        By default the effect will be hidden, it should only be shown
        after user hovers on the card
        */
        opacity: 0;
      }

      /*
      Update the `opacity` and `top position` of our hover effect
      when user hovers over the card element
      */
      .card:hover::after {
        top: 25%;
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <!-- Our main Card-->
    <div class="card">
      <!-- All the content inside the card -->
      <div class="content">
        <h3>CODING IS FUN</h3>
        <h1>Let's Have Lots Of Fun While Coding</h1>
        <p>
          Coding unfolds its brilliance in the canvas of fun. To ace it, simply
          feel the joy of coding.
        </p>
      </div>
    </div>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Amazing Card Hover Effect</title>
	<style>
	/* Step 1 */

	/* This styles apply to all elements in our page */
	* {
	/*
	To include padding and margin in total width and
	height of the element
	*/
	box-sizing: border-box;

	/* Remove default padding and margin of every element */
	margin: 0px;
	padding: 0px;
	}

	body {
	/* You can choose any colors you want */
	background-color: black;
	color: white;

	/* Removing default margins */
	margin: 0rem;

	/* Should take full height of the screen */
	height: 100vh;

	/* Hide any overflow if occurs */
	overflow: hidden;

	/* Choose any font you like */
	font-family: "Montserrat", sans-serif;

	/* Line height for our text */
	line-height: 1.5;

	/*
	To center our content on the screen
	*/
	display: grid;
	place-items: center;
	}

	/* Step 2 */

	/*
	This card hold all of our content,
	keep that in mind while styling
	*/
	.card {
	/*
	Default width, you can adjust it if you have
	more then one card on the screen
	*/
	width: 440px;

	/* A funky bg color for our card */
	background-color: rgb(16, 16, 16);
	/* Border color with 5% of opacity */
	border: 1px solid rgba(255, 255, 255, 5%);

	border-radius: 1.5rem;
	padding: 1rem;
	}

	/* Content holder inside our card */
	.content {
	/* Vertically align the content */
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;

	/* Add spacing between elements */
	gap: 1rem;

	padding: 2rem;
	border-radius: 1rem;
	}

	/* Elegant background effect for our content */
	.content {
	/* Dotted grid effect in the background of our content */
	background-image: radial-gradient(
	rgba(255, 255, 255, 10%) 1px,
	transparent 1px
	);

	/* Center our grid relative to the card */
	background-position: 50% 50%;

	/* Size of each dot or point */
	background-size: 1rem 1rem;
	}

	/* Style our text elements to look elegant */

	.content > h3 {
	color: mediumslateblue;
	font-size: 0.76rem;
	text-transform: uppercase;
	text-align: center;
	}

	.content > h1 {
	font-size: 2rem;
	text-align: center;
	}

	.content > p {
	text-align: center;
	opacity: 75%;
	}

	/* Step 3 */

	/*
	We are rendering the hover effect on top of our content without modifying
	it, hat's why we need to have position to be `relative` for our card
	*/
	.card {
	position: relative;
	}

	/*
	The `:after` sudo selector, renders our hover effect
	without modifying the actual content
	*/
	.card::after {
	/*
	This is important because we are not adding any content.
	`content` property is used to add icons, images, etc.
	to style our element better
	*/
	content: "";

	/* width and height */
	height: 70px;
	width: 1px;

	/*
	Position our effect on top of our card element
	*/
	position: absolute;

	/*
	Positions for our hover effect, we are rendering it on the left
	center of the card relative to the user
	*/
	left: -1px;
	top: 50%;

	/* Background color for the effect */
	background: linear-gradient(transparent, mediumslateblue, transparent);

	/* Transition and delay for our effect to appear */
	transition: top, opacity;
	transition-duration: 600ms;
	transition-timing-function: ease;

	/*
	By default the effect will be hidden, it should only be shown
	after user hovers on the card
	*/
	opacity: 0;
	}

	/*
	Update the `opacity` and `top position` of our hover effect
	when user hovers over the card element
	*/
	.card:hover::after {
	top: 25%;
	opacity: 1;
	}
	</style>
	</head>
	<body>
	<!-- Our main Card-->
	<div class="card">
	<!-- All the content inside the card -->
	<div class="content">
	<h3>CODING IS FUN</h3>
	<h1>Let's Have Lots Of Fun While Coding</h1>
	<p>
	Coding unfolds its brilliance in the canvas of fun. To ace it, simply
	feel the joy of coding.
	</p>
	</div>
	</div>
	</body>
	</html>