<html>
<head>
<title>
Coding-BAjhang</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>
<style>
*{
margin:0px;
padding:0px;
}
.back{
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm-udPSS5HXC67r3TwGAm8T2rmbGel_qSPWB47ltZsl7dJ0wFY3ddhO5sSp-EVfMVVIIrvmJC-XnVGhNP3qIq_yg0shVk7D-ACa6ScYJ7K_tydtKx_CGHuP4vgxhhLMckaXF5so1P74fv1wcSWO-Qg-JIJLEPyeG1wHFLR9OeY7gUo31y5_ixyE2xn/s720/296972416_463700985315698_2681152511566769561_n.jpg");
background-size:100% 100%;
width:100%;
height:100vh;
}
.menu{
width:100%;
height:100px;
background-color:gray;
}
.leftmenu{
width:20%;
line-height:80px;
float:left;
}
.leftmenu h4{
padding-left:5%;
color:yellow;
font-weight:bold;
font-size:20px;
}
.topnav {
overflow: hidden;
background-color:gray;
}
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding:13px 15px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: green;
}
.topnav a.active {
background-color: #2196F3;
color: white;
}
.topnav .search-container {
float: right;
}
.topnav input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
.topnav .search-container button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.topnav .search-container button:hover {
background: #ccc;
}
@media screen and (max-width: 600px) {
.topnav .search-container {
float: none;
}
.topnav a, .topnav input[type=text], .topnav .search-container button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.topnav input[type=text] {
border: 1px solid #ccc;
}
}
.text{
width:100%;
margin-top:150px;
text-transform:uppercase;
text-align:center;
}
.text h4{
font-size:16px;
font-family: 'Open Sans',sans-serif;
color:yellow;
}
.text h1{
font-size:28px;
font-family: 'Open Sans',sans-serif;
color:gray;
margin:14px 0px;
}
.text h3{
font-size:16px;
font-family: 'Open Sans',sans-serif;
color:red;
margin:12px 0px;
}
#buttonone{
background-color:green;
border-color:red;
font-size:20px;
font-family: 'Open Sans',sans-serif;
text-transform:uppercase;
line-height:50px;
width:160px;
margin-top:100px;
border:4px solid red;
}
#buttontwo{
background-color:yellow;
border-color:blue;
font-size:20px;
font-family: 'Open Sans',sans-serif;
text-transform:uppercase;
line-height:50px;
width:270px;
margin-top:100px;
border:4px solid blue;
}
.pass{
width: 320px;
height:20px;
background-color: red;
font-weight: bold;
position: relative;
animation: mymove 20s infinite;
margin:0px;
}
@keyframes mymove {
from {left: 20px;}
to {left: 75%;}
}
</style>
</head>
<body>
<div class="back">
<p class="pass">Welcome MY Personal Blog:Coding Bajhang </p>
<div class="menu">
<div class="leftmenu">
<h4>Coding_Bajhang</h4>
</div>
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
<div class="search-container">
<form action="/action_page.php">
<input name="search" placeholder="Search.." type="text" />
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
</div>
<div class="text">
<h4>Designed by Mahesh Raj Joshi</h4>
<h1>Coding Bajhang</h1>
<h3> I am Backend developer</h3>
<button id="buttonone">Follow</button>
<button id="buttontwo"> subscribe Channel</button>
</div>
</div>
</body>
</html>
Comments