lmas3009/index.html

## index.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" />
    <link rel="stylesheet" href="style.css" />
    <title>JR Web Dev CSS Animations</title>
  </head>
  <body>
    <h1>Welcome to new video on CSS Animations</h1>

    <!-- We are creating a css effect on navbar -->
    <div class="lineanima">
      <ul>
        <li>
          <a href="#">Home</a>
        </li>
        <li>
          <a href="#">About</a>
        </li>
        <li>
          <a href="#">Contact</a>
        </li>
        <li>
          <a href="#">Portfolio</a>
        </li>
      </ul>
    </div>
  </body>
</html>

## style.css
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

body {
  background-color: antiquewhite;
  font-family: "Poppins", sans-serif;
}

h1 {
  color: red;
  font-size: 15px;
}

.lineanima {
  height: 100vh;
  display: grid;
  place-items: center;
}

.lineanima ul {
  display: flex;
  gap: 10px;
}

.lineanima ul li {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: black;
}

.lineanima ul li a {
  position: relative;
  text-decoration: none;
}

.lineanima ul li a::before {
  position: absolute;
  content: "";
  width: 0%;
  height: 2px;
  bottom: 0;
  background-color: brown;
  transition: all 0.3s ease-in-out;
}

.lineanima ul li a:hover::before {
  width: 100%;
}
	<!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" />
	<title>JR Web Dev CSS Animations</title>
	</head>
	<body>
	<h1>Welcome to new video on CSS Animations</h1>

	<!-- We are creating a css effect on navbar -->
	<div class="lineanima">
	<ul>
	<li>
	<a href="#">Home</a>
	</li>
	<li>
	<a href="#">About</a>
	</li>
	<li>
	<a href="#">Contact</a>
	</li>
	<li>
	<a href="#">Portfolio</a>
	</li>
	</ul>
	</div>
	</body>
	</html>
	@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

	body {
	background-color: antiquewhite;
	font-family: "Poppins", sans-serif;
	}

	h1 {
	color: red;
	font-size: 15px;
	}

	.lineanima {
	height: 100vh;
	display: grid;
	place-items: center;
	}

	.lineanima ul {
	display: flex;
	gap: 10px;
	}

	.lineanima ul li {
	list-style-type: none;
	}

	a {
	text-decoration: none;
	color: black;
	}

	.lineanima ul li a {
	position: relative;
	text-decoration: none;
	}

	.lineanima ul li a::before {
	position: absolute;
	content: "";
	width: 0%;
	height: 2px;
	bottom: 0;
	background-color: brown;
	transition: all 0.3s ease-in-out;
	}

	.lineanima ul li a:hover::before {
	width: 100%;
	}