DANIELluntras/java script

## java script
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="chttps://fontawesome.com/v5/icons/discord?s=brands">
    <link rel="stylesheet" href="https://fonts.google.com/specimen/Bebas+Neue#standard-styles">
    <title>NFT</title>
  </head>
  <body>


<nav>
  <div  class="logo">
    <h4>the  NAV </h4>
  </div>
  <ul class="nav-links">
<li >
  <a href ="https://discord.com"">discord</a></li>
<li><a href ="https://opensea.io">OpenSea </a></li>
<li><a href ="https://twitter.com/luntras1">twitter</a></li>
<li><a href ="https://www.instagram.com/">Instragram  </a></li>


  </ul>
  <div class="burger" >
<div class="linia 1"></div>
<div class="linia 2"></div>
<div class="linia 3"></div>


  </div>
</nav>


<div class="hero">
<div class="page ">
  <h1 class="dani-grasu">
    Welcome to our site
  </h1>

  </div>
  <div class="paragrf">
    <p class ="p-p">The luntras daniel  are a collection of 8,851 AI-generated collectibles living on the
       Ethereum Blockchain. luntrasdaniel  will dutifully serve their lucky
      owners as they explore the globe and grow from adorable infants into super-
      intelligent beings with unique (and highly profitable) characteris
    </p>
  </div>
</div>
</div>

    <script src="script.js"></script>

<div class="flex">


  <a class="fab fa-discord"href="https://discord.com">D </a>


  <a class="fa fa-twitter"href="https://twitter.com/home?lang=ro"></a>


  <a class="opensea"href="https://opensea.io">O </a>


</div>
<div class="paragrful2 ">
<p >  ALERT 50% OF SUPPLY COULD BE BURNED AFTER GRADUATION </p>


</div>
<div class="h12">
  <h2>8,851 unique AI-generated collectibles traveling tot he Ethereum Blockchain</h2>
  </div>

  <!-- ---------imagine------ -->
  <div class="imagine">
<img src="https://10-raisons.fr/wp-content/uploads/2022/02/10-raisons-s-interesser-aux-nft.jpg" alt="image" height="400" width="500"style="border-radius: 6.3rem;">
<p class="ala-de-sub-img">Mint Price: 0.065 ETH + Gas</p>
<!-- acestea sunt buttonele de sub imagien -->
</div>
<div class="opensea002">
<a  href="https://opensea.io"></a>

</div>


<!-- buttonul de sub imagien -->
<div class="but3">
  <a  class ="formatForButton "href="https://opensea.io">OpenSea </a>


</div>
<div class =" partea-3 ">
  <p class="textu-ala-mic">POWER RANGER</p>
<p class='titilu'>ARE YOU REDY</p>

<img class="imagine3"src ="https://ca-times.brightspotcdn.com/dims4/default/c6e288c/2147483647/strip/true/crop/3000x2000+0+0/resize/768x512!/format/webp/quality/90/?url=https%3A%2F%2Fcalifornia-times-brightspot.s3.amazonaws.com%2F76%2F14%2F3f79416145a3bc2df68eae2ecf78%2F3000x2000-cover-horizontal-digital.jpg" alt="image" height="600" width="500"style=" border-radius: 6.3rem;">
<p class="p7">Humanity saved them from the clutches of their nefarious creator Dr Tzarkins! Now – as their culture dictates – the ever-grateful POWERNFT swear duty to those who rescued them.

  With only 8,851 AstroHeads roaming the earth, ownership of these unique creatures will be reserved for our world’s elite... POWERNFT owners will watch as their unique companions grow from stumbling newborns into super-intelligent beings (some smarter than others...) capable of advanced tasks.

  POWERNFT will not only serve their owners directly within the Klepton Inc economy, but will also double as membership to the Astro Inner Circle. Access is dependent on each POWERNFT's intrinsic abilities and education level.

  This will grant access to a range of benefits which will all be revealed during our Graduation event...

  </p>


</div>
<div class="btn08">
<a  href ="#"class="btn09">
twitter

</a>


</div>

</body>
</html>


## java script css and html
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  background-color: blue;
  font-family: fantasy;
}
.logo {
  color: rgb(207, 178, 174);
  text-transform: uppercase;
  letter-spacing: 15px;
  font-size: 20px;
}
.nav-links {
  display: flex;
  justify-content: space-around;
  width: 50%;
}
.nav-links li {
  list-style: none;
}
.nav-links a {
  color: rgb(218, 206, 248);
  text-decoration: none;
  letter-spacing: 1px;
  font-weight: bold;
  font-size: 14px;
}
.burger {
  display: none;
}
.burger div {
  width: 25px;
  height: 5px;
  background-color: rgb(207, 178, 174);
  margin: 5px;
  transition: all 0.3s ease;
}

@media screen and (max-width: 1024px) {
  .nav-links {
    width: 60%;
  }
}

@media screen and (max-width: 768px) {
  .nav-links {
    position: absolute;
    right: 0;
    height: 92vh;
    top: 8vh;
    background-color: blue;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    transform: translateX(100%);
    transition: transform 1.5s ease-in;
  }

  .toggle.line1 {
    transform: rotate(-45deg translate(-5px, 6px));
  }
  .toggle.line2 {
    opacity: 0;
  }
  .toggle.line3 {
    transform: rotate(45deg translate(-5px, 6px));
  }

  .navlinks li {
    opacity: 0;
  }
  .burger {
    display: block;
  }
  .dani-grasu {
    display: none;
  }
  .p-p {
    display: none;
  }
}

.nav-active {
  transform: translateX(0%);
}

@keyframes navLinkFade {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
}

## nav js and css
console.log('probe');

const navSllide = () => {
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.nav-links');
    // liku petru animation
    const navlinks = document.querySelectorAll('.nav-links li');
    //toggle nav
    burger.addEventListener('click', () => {

        nav.classList.toggle('nav-active');

        // animate links
        navlinks.forEach((link, index) => {
            if (link.style.animation) {
                link.style.animation = ''
            } else {
                link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 2}s`;
            }
        });
        // burger animation

        burger.classList.toggle('.toggle');
    });
}
navSllide();
const buton = document.querySelector('.btn09');
const daniel = function () {
    console.log('clicked');
    buton.classList.add('buton')
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<link rel="stylesheet" href="style.css" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="chttps://fontawesome.com/v5/icons/discord?s=brands">
	<link rel="stylesheet" href="https://fonts.google.com/specimen/Bebas+Neue#standard-styles">
	<title>NFT</title>
	</head>
	<body>


	<nav>
	<div class="logo">
	<h4>the NAV </h4>
	</div>
	<ul class="nav-links">
	<li >
	<a href ="https://discord.com"">discord</a></li>
	<li><a href ="https://opensea.io">OpenSea </a></li>
	<li><a href ="https://twitter.com/luntras1">twitter</a></li>
	<li><a href ="https://www.instagram.com/">Instragram </a></li>



	</ul>
	<div class="burger" >
	<div class="linia 1"></div>
	<div class="linia 2"></div>
	<div class="linia 3"></div>


	</div>
	</nav>




	<div class="hero">
	<div class="page ">
	<h1 class="dani-grasu">
	Welcome to our site
	</h1>

	</div>
	<div class="paragrf">
	<p class ="p-p">The luntras daniel are a collection of 8,851 AI-generated collectibles living on the
	Ethereum Blockchain. luntrasdaniel will dutifully serve their lucky
	owners as they explore the globe and grow from adorable infants into super-
	intelligent beings with unique (and highly profitable) characteris
	</p>
	</div>
	</div>
	</div>

	<script src="script.js"></script>

	<div class="flex">




	<a class="fab fa-discord"href="https://discord.com">D </a>




	<a class="fa fa-twitter"href="https://twitter.com/home?lang=ro"></a>


	<a class="opensea"href="https://opensea.io">O </a>


	</div>
	<div class="paragrful2 ">
	<p > ALERT 50% OF SUPPLY COULD BE BURNED AFTER GRADUATION </p>


	</div>
	<div class="h12">
	<h2>8,851 unique AI-generated collectibles traveling tot he Ethereum Blockchain</h2>
	</div>

	<!-- ---------imagine------ -->
	<div class="imagine">
	<img src="https://10-raisons.fr/wp-content/uploads/2022/02/10-raisons-s-interesser-aux-nft.jpg" alt="image" height="400" width="500"style="border-radius: 6.3rem;">
	<p class="ala-de-sub-img">Mint Price: 0.065 ETH + Gas</p>
	<!-- acestea sunt buttonele de sub imagien -->
	</div>
	<div class="opensea002">
	<a href="https://opensea.io"></a>

	</div>


	<!-- buttonul de sub imagien -->
	<div class="but3">
	<a class ="formatForButton "href="https://opensea.io">OpenSea </a>





	</div>
	<div class =" partea-3 ">
	<p class="textu-ala-mic">POWER RANGER</p>
	<p class='titilu'>ARE YOU REDY</p>

	<img class="imagine3"src ="https://ca-times.brightspotcdn.com/dims4/default/c6e288c/2147483647/strip/true/crop/3000x2000+0+0/resize/768x512!/format/webp/quality/90/?url=https%3A%2F%2Fcalifornia-times-brightspot.s3.amazonaws.com%2F76%2F14%2F3f79416145a3bc2df68eae2ecf78%2F3000x2000-cover-horizontal-digital.jpg" alt="image" height="600" width="500"style=" border-radius: 6.3rem;">
	<p class="p7">Humanity saved them from the clutches of their nefarious creator Dr Tzarkins! Now – as their culture dictates – the ever-grateful POWERNFT swear duty to those who rescued them.

	With only 8,851 AstroHeads roaming the earth, ownership of these unique creatures will be reserved for our world’s elite... POWERNFT owners will watch as their unique companions grow from stumbling newborns into super-intelligent beings (some smarter than others...) capable of advanced tasks.

	POWERNFT will not only serve their owners directly within the Klepton Inc economy, but will also double as membership to the Astro Inner Circle. Access is dependent on each POWERNFT's intrinsic abilities and education level.

	This will grant access to a range of benefits which will all be revealed during our Graduation event...

	</p>





	</div>
	<div class="btn08">
	<a href ="#"class="btn09">
	twitter

	</a>


	</div>

	</body>
	</html>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}
	nav {
	display: flex;
	justify-content: space-around;
	align-items: center;
	min-height: 8vh;
	background-color: blue;
	font-family: fantasy;
	}
	.logo {
	color: rgb(207, 178, 174);
	text-transform: uppercase;
	letter-spacing: 15px;
	font-size: 20px;
	}
	.nav-links {
	display: flex;
	justify-content: space-around;
	width: 50%;
	}
	.nav-links li {
	list-style: none;
	}
	.nav-links a {
	color: rgb(218, 206, 248);
	text-decoration: none;
	letter-spacing: 1px;
	font-weight: bold;
	font-size: 14px;
	}
	.burger {
	display: none;
	}
	.burger div {
	width: 25px;
	height: 5px;
	background-color: rgb(207, 178, 174);
	margin: 5px;
	transition: all 0.3s ease;
	}

	@media screen and (max-width: 1024px) {
	.nav-links {
	width: 60%;
	}
	}

	@media screen and (max-width: 768px) {
	.nav-links {
	position: absolute;
	right: 0;
	height: 92vh;
	top: 8vh;
	background-color: blue;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 50%;
	transform: translateX(100%);
	transition: transform 1.5s ease-in;
	}

	.toggle.line1 {
	transform: rotate(-45deg translate(-5px, 6px));
	}
	.toggle.line2 {
	opacity: 0;
	}
	.toggle.line3 {
	transform: rotate(45deg translate(-5px, 6px));
	}

	.navlinks li {
	opacity: 0;
	}
	.burger {
	display: block;
	}
	.dani-grasu {
	display: none;
	}
	.p-p {
	display: none;
	}
	}

	.nav-active {
	transform: translateX(0%);
	}

	@keyframes navLinkFade {
	from {
	opacity: 0;
	transform: translateX(50px);
	}
	}