Front page:
Back page:
Monday, May 6, 2019
KPK Pakistan domicile form 2019 free download
Download the domicile certificate of pakistan Khyber Pakhtun Khwa free download. Right click on the image and click save as and then save it into your computer system.
Front page:
Front page:
Friday, March 29, 2019
How to make a loader html/css source codes
<!doctype html>
<html>
<style>
*{
margin:0px;
padding:0px;
}
.loader{
border:20px solid #efefef;
width:100px ;
height:100px;
margin:0px auto;
border-top: 20px solid red;
border-radius:50%;
/* for safari */
-webkit-animation: spin 2s linear infinite ;
animation: spin 2s linear infinite;
}
/* for safari */
@-webkit-keyframes spin{
0%{
-webkit-transform: rotate(0deg) ;
}
100%{
-webkit-transform: rotate(360deg);
}
}
@keyframes spin{
0%{
transform: rotate(0deg) ;
}
100%{
transform: rotate(360deg);
}
}
</style>
<body>
<h1 align="center">How to make a loader html/css</h1>
<div class="loader"></div>
</body>
</html>
<html>
<style>
*{
margin:0px;
padding:0px;
}
.loader{
border:20px solid #efefef;
width:100px ;
height:100px;
margin:0px auto;
border-top: 20px solid red;
border-radius:50%;
/* for safari */
-webkit-animation: spin 2s linear infinite ;
animation: spin 2s linear infinite;
}
/* for safari */
@-webkit-keyframes spin{
0%{
-webkit-transform: rotate(0deg) ;
}
100%{
-webkit-transform: rotate(360deg);
}
}
@keyframes spin{
0%{
transform: rotate(0deg) ;
}
100%{
transform: rotate(360deg);
}
}
</style>
<body>
<h1 align="center">How to make a loader html/css</h1>
<div class="loader"></div>
</body>
</html>
How to show loader before a proccess in php/jquery/html/css
showloader.php
<!doctype html>
<html>
<style>
*{
margin:0px;
padding:0px;
}
#content{
width:400px;
box-shadow:1px 1px 5px 1px #000;
margin:20px auto;
padding:5px;
}
.button{
padding:5px;
}
.loader{
border:10px solid #efefef;
border-top:10px solid red;
border-radius:50%;
width:30px;
height:30px;
margin:0px auto;
animation: spin 2s linear infinite;
}
@keyframes spin{
0% {
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
p{
padding:5px;
}
</style>
<body>
<div id="content">
<h1 align="center">How to show a loader</h1>
</div>
<p align="center"><button onclick="loadData()" class="button">Load More</button>
<script src="jquery-3.3.1.min.js"></script>
<script>
function loadData(){
$("#content").append('<div class="loader" id="loader"></div>');
//this function send data to 2nd file
$.post("loaddata.php",
{
send: "yes"
},
//this function recieves data from 2nd file
function (data, status){
//if function success we'll hide the
//loader
$("#loader").remove();
$("#content").append('<p align="center"> Data showed from another file</p>') ;
}
);
}
</script>
</body>
</html>
loaddata.php
<?php
for($i = 0; $i<= 3333333; $i++){
//this is just to delay the
//execution time so we can
//see the loader
echo 'nothing';
}
?>
Friday, January 18, 2019
Drop down menu source code
Preview
Codes
<!doctype html>
<html>
<style>
*{
margin:0px;
padding:0px;
font-family:helvetica;
}
.menu{
background:#333;
overflow:hidden;
}
.menu a{
color:white;
padding:14px 16px;
float:left;
text-decoration:none;
font-size:20px;
}
.dropdown{
float:left;
overflow:hidden;
}
.button{
background:#333;
color:white;
font-size:20px;
padding:14px 16px ;
border:none;
}
.menu a:hover, .button:hover{
background:#dfdfdf;
color:black;
}
.drop-content{
display:none;
position:absolute;
background:#dfdfdf;
min-width:160px;
box-shadow:0px 8px 16px 0px #333;
z-index:1 ;
}
.drop-content a{
color:black;
float:none;
display:block;
text-decoration:none;
padding:10px 10px;
}
.drop-content a:hover{
background:#afafaf;
}
.dropdown:hover .drop-content{
display:block;
}
</style>
<body>
<div class="menu">
<a href="#">Home</a>
<a href="#">Item 1</a>
<a href="#">item 2</a>
<a href="#">item 3</a>
<div class="dropdown">
<button class="button">Drop</button>
<div class="drop-content">
<a href="#">drop item 1</a>
<a href="#">drop item 2</a>
<a href="#">drop item 3</a>
<a href="#">drop item 4</a>
<a href="#">drop item 5</a>
</div>
</div>
<a href="#" style="float:right;">item 3</a>
</div>
</body>
</html>
Article sharing web page/template
Preview
Codes
<!doctype html>
<html>
<head>
<style>
*{
margin:0px;
padding:0px;
font-family:helvetica;
}
p, a, h1, h2, h3{
margin:10px 0px;
}
.container{
box-shadow:2px 5px 20px #333;
width:80%;
margin:2% auto;
border-radius:10px;
overflow:auto;
background:white;
}
.header{
padding:4% 0%;
background: #32512d;
color:white;
}
.menu{
overflow:hidden;
background:#21381e;
}
.menu a{
display:inline-block ;
color:white;
text-decoration:none;
padding:2% 2% ;
margin:0px;
}
.menu a:hover{
background:#dfdfdf;
color:black;
}
.content{
overflow:auto;
}
.left-col{
width:28% ;
padding:1%;
}
.left-col a{
display:block ;
}
.left-col, .right-col{
overflow:auto;
float:left;
}
.right-col{
width:67% ;
padding:1%;
border-left:1px solid #dfdfdf;
}
.footer{
background: #32512d;
color:white;
padding:1%;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1 align="center">Computer Master</h1>
</div>
<div class="menu">
<a href="#">Home</a>
<a href="#">item 1</a>
<a href="#">contact us</a>
<a href="#">about us</a>
<a href="#" style="float:right">Log out</a>
</div>
<div class="content">
<div class="left-col">
<h2 align="center">More Posts</h2>
<a href="#"> This is post 1, click and you will see post 1 content</a>
<a href="#"> This is post 1, click and you will see post</a>
<a href="#"> This is post 1, click and you will see post</a>
<a href="#"> This is post 1, click and you will see post</a>
</div>
<div class="right-col">
<h2 align="center">Title of the post</h2>
<h3>Subtitle 1</h3>
<p> This is just a simple web page in which
you can share your personal daily life articles
This is just a simple web page in which
you can share your personal daily life articles
This is just a simple web page in which
you can share your personal daily life articles
This is just a simple web page in which
you can share your personal daily life articles
</p>
<h3>Subtitle 2</h3>
<p> This is just a simple web page in which
you can share your personal daily life articles
This is just a simple web page in which
you can share your personal daily life articles
This is just a simple web page in which
you can share your personal daily life articles
This is just a simple web page in which
you can share your personal daily life articles
</p>
<!-- end of right-col-->
</div>
<!-- end of content -->
</div>
<div class="footer">
<p align="center">Powered By Computer Master</p>
</div>
<!-- end of container -->
</div>
</body>
</html>
Wednesday, January 9, 2019
Making of professional navigation/menu in a website HTML/CSS
menu.html
<!doctype html>
<html>
<style>
*{
margin:0px;
padding:0px;
font-family:helvetica;
}
.menu{
background:#333;
overflow:hidden;
}
.menu a{
color:white;
text-decoration:none;
float:left;
padding:14px 16px;
font-size:20px;
}
.menu a:hover{
background:#dfdfdf;
color:#333;
}
.menu .active{
background:#4CAF50;
}
</style>
<body>
<div class="menu">
<a href="#">Home</a>
<a href="#" class="active">item 1</a>
<a href="#">item 2</a>
<a href="#">contact us</a>
<a href="#">about us</a>
</div>
</body>
</html>
Hover dropdown list in html/css
<!doctype html>
<html>
<style>
*{
margin:0px;
padding:0px;
}
.dropdown{
position:relative;
display:inline-block;
}
.button{
padding:10px 40px;
font-size:20px;
}
.drop-content{
display:none ;
position:absolute;
z-index:1;
width:120px;
}
.drop-content a{
display:block;
background:#dfdfdf;
padding:10px;
color:black;
text-decoration:none;
font-size:20px;
margin-top:2px;
}
.dropdown:hover .drop-content{
display:block;
}
</style>
<body>
<center>
<div class="dropdown">
<button class="button">Drop</button>
<!-- this menu will appear if we hover on the button -->
<div class="drop-content">
<a href="#">Item 1</a>
<a href="#">Item 1</a>
<a href="#">Item 1</a>
<a href="#">Item 1</a>
</div>
</div>
</center>
</body>
</html>
<html>
<style>
*{
margin:0px;
padding:0px;
}
.dropdown{
position:relative;
display:inline-block;
}
.button{
padding:10px 40px;
font-size:20px;
}
.drop-content{
display:none ;
position:absolute;
z-index:1;
width:120px;
}
.drop-content a{
display:block;
background:#dfdfdf;
padding:10px;
color:black;
text-decoration:none;
font-size:20px;
margin-top:2px;
}
.dropdown:hover .drop-content{
display:block;
}
</style>
<body>
<center>
<div class="dropdown">
<button class="button">Drop</button>
<!-- this menu will appear if we hover on the button -->
<div class="drop-content">
<a href="#">Item 1</a>
<a href="#">Item 1</a>
<a href="#">Item 1</a>
<a href="#">Item 1</a>
</div>
</div>
</center>
</body>
</html>
Subscribe to:
Posts (Atom)