• Announcements

    • Dark_s0uL

      ATENTIE   03/09/2019

      [!] ATENTIE!
      Pentru a downloada un fisier aveti nevoie de 10 POSTs/TOPICs . Nu faceti SPAM -> BAN PERMANENT [!] WARNING!
      For to download a file you need to have 10 Posts / Topics [ on forum ]. Don't  do spam or you will be banned permanently !
Sign in to follow this  

[ Tutorial ] Meniu de navigare

Recommended Posts

Tutorial HTML & CSS "Meniu de navigare pagina".
( Pentru acest "poriect" puteti folosi diferite programe, unul dintre ele fiind  sublimetext )

Codul HTML:

<!doctype hml>
 	 <meta charset="utf-8">
 	 <title> Creative Menu Hover Effects</title>
 	 <link rel="stylesheet" href="style.css">
   <li><a href="#">HOME</a></li>
   <li><a href="#">ABOUT</a></li>
   <li><a href="#">SERVICES</a></li>
   <li><a href="#">PORTOFOLIO</a></li>
   <li><a href="#">PORTOFOLIO</a></li>
   <li><a href="#">OUT TEAM</a></li>
   <li><a href="#">CONTACT US</a></li>

Codul CSS:

	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	aling-items: center;
	height: 100vh;
	bacground-image: #112c38;
	margin: 0;
	padding: 0;
	display: flex;
ul li 
	list-style: none;
	margin: 0 20px;
	transition: 0.5s;
ul li a
	display: block;
	position: relative;
	text-decoration: none;
	padding: 5px;
	font-size: 18px;
	font-family: sans-serif;
	color: #fff;
	text-transform: uppercase;
ul:hover li a
	transform: scale(1.5);
	opacity: .2;
	filter: blur(5px);
ul li a:before
	content:: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	bacground: #ff497c;
	transition: 0.5s;
	transform-origin: right;
	transfor: scaleX(0);
	z-index: -1;
ul li a:hover:before
	transition: transform 0.5s;
	transfor-origin: left;
	transforum: scaleX(1);









Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this