Navbar ভিডিওর কোড গুলোঃ
Html কোডঃ ( <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="container">
<a href="#" class="nav-icon"> <img src="img/logo.png" alt="logo"> </a>
<div class=" nav-menu">
<ul class="navbar-nav">
<li class="nav-item"> <a href="#" class="nav-link"> Home </a> </li>
<li class="nav-item"> <a href="#" class="nav-link"> Profile </a> </li>
<li class="nav-item"> <a href="#" class="nav-link"> Blog </a> </li>
<li class="nav-item"> <a href="#" class="nav-link"> Contact </a> </li>
<li class="nav-item"> <a href="#" class="nav-link"> About </a> </li>
</u> </div></nav><section class="header">
<div class="header-main">
<h1 class="header-title"> Design </h1>
<p class="header-para">The Most Powerful Design Tool For WordPress</p>
<p class="header-para-sub"><b>Enjoy the ultimate web design editor.<br> Divi is like Photoshop or Sketch for the web. <br>It brings an advanced design interface to WordPress <br>that both beginners and experts will fall in love with.<br> It's incredibly smart, super flexible,<br> amazingly powerful and visual by nature. This is how <br> designing for the web is meant to be done.<b></p> <a class="header-link" href="class1.html">View Design Tools</a></div><div class="image"><img src="img/design-01.png" height="400px;" width="400px">
</div> </section> </body></html> )
Css কোডঃ ( body{
margin: 0;
}
.container{ position: relative;
padding-bottom: 70px;
background: linear-gradient(to right, rgb(89, 129, 35),rgb(178, 204, 31)) ; }
.nav-icon{ left: 10%;
position:absolute;
padding:5px; }
.nav-menu{ position:absolute;
left:55%; }
.navbar-nav{ }
.nav-item{ display: inline-block;
padding-right:25px;
padding-top: 5px; }
.nav-link{
text-decoration: none;
font-size: 20px;
color: white;
font-style: oblique; }
/* hader */
.header{
position: relative;
}
.header-main{
position: absolute;
left: 10%;
}
.header-title{
font-size: 50px;
color: blueviolet;
}
.header-para{
color: rgb(180, 223, 63);
font-size: 20px;
}
.header-para-sub{
padding-bottom: 25px;
}
.header-link{
text-decoration: none;
color: cornsilk;
background-color: rgb(107, 170, 36);
padding: 20px;
margin-top: 500px;
border-radius: 100px;
}
.header-link:hover{
background-color: rgb(59, 100, 236);
}
.image{
position: absolute;
left: 60%;
margin-top: 70px;
}
)
No comments:
Post a Comment