HTML5 Paragraph, Anchor tag

Anchor tag:

                      This is use to create links between two pages Suppose you have to redirect your visitor to one Facebook, Google , yahoo or anywhere else , you can redirect to your own developed page.

Syntax :

<a href="Link provided here" > Redicetion discription </a>

Example 

<A href="https://www.google.com"> Google </a>

Demo :

Google

 Paragraph tag:

Pretty Simple and as like olde version of HTML

<hi>Text </hi>

Where i =1,2,3,4,5,6

Means that

<h1> Text </h1>

<h2> Text </h2>

<h3> Text </h3>

<h4> Text </h4>

<h5> Text </h5>

<h6> Text </h6>


Demo

Text

Text

Text

Text

Text

Text

Custom word press login

Here is the word press login page customization tutorial ,

Look's difficult but pretty easy

Just follow these steps and your reciepe is ready

-> go to admin dashboard and open editor from apperance bar

--> Select Theme function or function.php from right bar

          --> Paste this peice of code
 

                 

function custom_loginlogo() {

echo '<style type="text/css">

h1 a {background-image: url(url) !important; }

</style>';

}

add_action('login_head', 'custom_loginlogo');

Attention  be careful and don't make any mistake..! 

Simple and easy ...

HTML & CSS design login pages

HTML & CSS design login pages

                                             Demo              Download

HTML code:

<html >

<head >

    <title>  Webxteria Free login page styles  </title>

    <link href="Css/style.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="script/jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="script/ss.js"></script>

  

</head>

<body>

<div id="bar">

<br>

<center> <strong>Home</strong></center>

</div>

<div id="logo"><img id="pic" src="Images/logo.png" width=200px height=200px></div>

<div id="login"> Login </div>

<div id="login2"> Register </div>

<div id="admin"> Admin</div>

<div id="client"> Workers </div>

<div id="contentlog">

<div id="username">

<img id="un" src="Images/user.png" />

                 <input type="text" ID="TextBox1" class="utxt"  value=" Login id ">

</div>

<div id="password">

<img id="un" src="Images/lock.png"/>

                 <input type="password" ID="TextBox2" class="utxt"  value=" Login password ">

</div>

<Button class="consub"> Login </button>

</div>

<div id="reg">

<div id="username">

<img id="un" src="Images/user.png" />

                <input type="text" ID="TextBox3" class="utxt" value="Login Username "></asp:TextBox>

</div>

<div id="password">

<img id="un" src="Images/lock.png"/>

                <input type="password" ID="TextBox4"  class="utxt" value=" Login password "></asp:TextBox>

</div>

<div id="validdb">

<img id="un" src="Images/lock.png"/>

                <input type="text" ID="TextBox5" class="utxt" value=" Database password "></asp:TextBox>

</div>

<br>

            <Button  class="consub" ID="Button1"  >Login </button>

</div>

</body>

</html>

CSS Code :

body{

background:url("../Images/back.gif");
background-repeat: repeat;

}

#bar{
left:300px;
width:500px;
height:40px;
border-radius:10px;
position:absolute;
top:-15px;
background: -webkit-linear-gradient(top, #E7BC14, #B96100);
border-color: #C57805;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
color: white;
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.25);
padding: 8px 12px;
padding-right: 30px;
font-size:15px;
opacity:0;
z-index:99999999999999;
}

#logo{
position:absolute;
left:450px;
top:80px;
width:200px;
height:200px;
margin-bottom:50%;
padding-bottom:15px;
z-index:888888;
opacity:0;

}


#name{
position:absolute;
left:900px;
top:380px;
opacity:0;
}
#login{

position:absolute;
left:500px;
top:350px;

width: 15%;
float:left;
height: 45px;
color: rgba(0, 0, 0, 0.75);
text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px;
font: bold 14px/45px HelveticaNeue, Helvetica, Arial;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2), 0px -1px 0px rgba(255, 255, 255, 0.3) inset;
padding: 0px;
text-align: center;
border-radius: 4px;
border: 0px;
background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.35));
background-color: #FFD000;
cursor: pointer;
opacity:0;
}

#login2{

position:absolute;
width: 15%;
float:left;
height: 45px;
color: rgba(0, 0, 0, 0.75);
text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px;
font: bold 14px/45px HelveticaNeue, Helvetica, Arial;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2), 0px -1px 0px rgba(255, 255, 255, 0.3) inset;
padding: 0px;
text-align: center;
border-radius: 4px;
border: 0px;
background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.35));
background-color: #FFD000;
cursor: pointer;
left:700px;
top:350px;
opacity:0;

}

#admin{
position:absolute;
left:900px;
top:350px;

width: 15%;
float:left;
height: 45px;
color: rgba(0, 0, 0, 0.75);
text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px;
font: bold 14px/45px HelveticaNeue, Helvetica, Arial;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2), 0px -1px 0px rgba(255, 255, 255, 0.3) inset;
padding: 0px;
text-align: center;
border-radius: 4px;
border: 0px;
background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.35));
background-color: #FFD000;
cursor: pointer;
opacity:0;

}

#admin:hover{

background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
}

#client{


position:absolute;
width: 15%;
float:left;
height: 45px;
color: rgba(0, 0, 0, 0.75);
text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px;
font: bold 14px/45px HelveticaNeue, Helvetica, Arial;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2), 0px -1px 0px rgba(255, 255, 255, 0.3) inset;
padding: 0px;
text-align: center;
border-radius: 4px;
border: 0px;
background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.35));
background-color: #FFD000;
cursor: pointer;
left:900px;
top:350px;
opacity:0;

}

#client:hover{

background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
}
#login2:hover{

background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
}

#login:hover{

background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
}

#contentlog{

width:450px;
height:110px;
background:black;
opacity:0;
position:absolute;
left:340px;
top:500px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom: 0px;
border: 1px solid #555;
padding-right: 10px;
font: bold 14px/45px HelveticaNeue, Helvetica, Arial;
}


#reg{
width:450px;
height:175px;
background:black;
opacity:0;
position:absolute;
left:340px;
top:500px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom: 0px;
border: 1px solid #555;
padding-right: 10px;
font: bold 14px/45px HelveticaNeue, Helvetica, Arial;

}

#submit{


position:absolute;
width: 450px;
float:left;
height: 45px;
color: rgba(0, 0, 0, 0.75);
text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px;
font: bold 14px/45px HelveticaNeue, Helvetica, Arial;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2), 0px -1px 0px rgba(255, 255, 255, 0.3) inset;
padding: 0px;
text-align: center;
border-radius: 4px;
border: 0px;
background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.35));
background-color: #FFD000;
cursor: pointer;
left:0px;
top:160px;
opacity:1;


}

#submit:hover{

background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));

}

.consub{

position:absolute;
width: 460px;
float:left;
height: 45px;
color: rgba(0, 0, 0, 0.75);
text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px;
font: bold 14px/45px HelveticaNeue, Helvetica, Arial;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2), 0px -1px 0px rgba(255, 255, 255, 0.3) inset;
padding: 0px;
text-align: center;
border-radius: 4px;
border: 0px;
background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.35));
background-color: #FFD000;
cursor: pointer;
left:0px;
top:210px;
opacity:1;

}

.consub:hover{

background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));

}

#username{
width:460px;
border-bottom: 1px solid #171717;
}

#password{
width:460px;
border-bottom: 1px solid #171717;
}
#validdb{


}


#un{
margin-top:20px;
margin-left:15px;
}

.utxt{
width:80%;
padding: 15px 10px;
font-weight: bold;
color: white;
background: transparent;
border: none;
box-sizing: border-box;
border-bottom: #E1E1E1;
}


#wrapper{
display:block;
width:1000px;
margin:0px auto;
border:1px solid black;
box-shadow: 5px 5x 5px gray;

}

#delimeter{
clear:both;
}

#content{
}

#header{

}

#footer{
}

Js Code:

$(document).ready(function(){

$("#bar").animate({opacity:'0.5',background:' -webkit-linear-gradient(top, #E7BC14, #B96100)'},"slow");

$("#logo").animate({opacity:'1'},"slow");

$("#login").animate({opacity:'1',left:'370px',top:'350px'},"fast");

$("#login2").animate({opacity:'1',left:'580px',top:'350px'},"fast");

$("#bar").mouseenter(function(){

$("#bar").animate({opacity:'1',background:'#E7BC4',background:'-webkit-linear-gradient(top,#EECB40,#B96100)'});

});

$("#bar").mouseleave(function(){

$("#bar").animate({opacity:'0.7',background:' -webkit-linear-gradient(top, #E7BC14, #B96100)'});

});

$("#login").click(function(){

$("#login,#login2").animate({opacity:'0',left:'0'},"slow");

$("#admin").animate({opacity:"1",left:'350px'},"slow");

$("#client").animate({opacity:"1",left:'590px'},"slow");

});

$("#admin,#client").click(function(){

$("#admin,#client").animate({opacity:'0',left:'0'},"slow");

$("#contentlog").animate({opacity:'1',top:'300px'});

});

$("#login2").click(function(){

$("#admin,#client").animate({opacity:'0',left:'0'},"slow");

$("#reg").animate({opacity:'1',top:'300px'});

});

$("#bar").click(function(){

window.location=("index.html");

});

});

Note :-

             You must have jquery-1.7.2.min.js .. Jquery library