Navigation Menubar using html and CSS
Hello guys, Planics Devloper is
providing HTML,CSS,BootStrap,JavaScript,PHP. If you want any design then
copy code from our post otherwise watch our video on blog.
If you want to design card hover or
something then click here and get latest design
free Click here
How to design Best product card hover
in 2020?
design beautiful card hover amination
using html and CSS . you learn in this video how to flip card using html and
CSS.
How to design different type of animation in one loader using html and css?
Free Cards Effect in HTML with CSS
skill card using html and CSS. You can
free use for as product card or review Card.
mouse hover flip animation on card using pure html and CSS. Here we show how to transform
any object using only CSS.
Here we show, how to design Responsive navbar
using html and css.
Nav.html
|
<!DOCTYPE html>
<html>
<head>
<meta
charset='utf-8'>
<meta
http-equiv='X-UA-Compatible' content='IE=edge'>
<title>navs</title>
<meta
name='viewport' content='width=device-width, initial-scale=1'>
<link
rel='stylesheet' type='text/css' media='screen' href='main.css'>
<script
src='main.js'></script>
<link
rel='stylesheet' type='text/css'
href="style.css">
</head>
<body>
<header>
<div
class="navigation">
<div
class="logo">
<img src="folwerWithoutname.png">
</div>
<div
class="menu">
<a href="#">home</a>
<a href="#">contact</a>
<a href="#">services</a>
<a href="#">about</a>
<a href="#">mores</a>
</div>
<div
class="btn-login">
<a href="#">login</a>
</div>
</div>
</header>
</body>
</html>
|
How to Design round animated loader using html and css?
style.css
|
/* background-color:#4361ee;
border-bottom:1px solid #f07167; */
*
{
margin:00px;
padding:00px;
font-family:
'Roboto', sans-serif;
}
.navigation
{
height: 100vh;
width: 100%;
display:flex;
justify-content:space-between;
align-items:center;
}
.logo
{
height: 80px;
width:80px;
}
.logo img
{
height: 100%;
width:100%;
}
.menu a
{
margin-right:
20px;
text-decoration:
none;
color:black;
transition: all
1s;
outline: none;
}
.menu a:hover
{
background-color:#4361ee;
font-size:20px;
color:white;
padding:10px;
border-radius:10px;
outline:none;
}
.btn-login
{
margin:20px;
}
.btn-login a
{
background-color:#f07167
;
padding: 10px;
border-radius:
10px;
text-decoration:
none;
color: white;
outline: none;
}
|
0 coment�rios: