Pages

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:
Back 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>

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>

Tuesday, December 4, 2018

APPLICATION FOR SICK LEAVE



To,

The Head Master, 
G.P.S, 
Khall Kozkalay.

Sir,

Respectfully, this is to inform you that i am very sick and feel weakness today so I cannot come to School.

Therefore Kindly grant me some leaves till i feel well. I shall be very thankful to you.

Yours truly
Computer Master
Class 9th
Roll No. 20

Signature:

Monday, November 19, 2018

Speech on "The Use Of Internet"


Honorable Head Master,
Respected teachers and my dear School fellows Assalam-o-Alaikum w.u.w !
I am supposed to be stand here today and talk to you about the use of internet.  Internet is made up of multiple interconnected networks, where a network is a collection of computers, servers, or other devices connected to one another to allow the sharing of data.
Internet these days has become an integral part of our lives. It has brought people closer. Be it your friends, family or your business associates – everyone is just a click away. Internet has changed the life of man for good. Some of the uses of internet include communication, shopping, booking, researching and studying.
2 Everyone and everything, is just a click away
if and only If the internet is in our way
Respected Audience!
The Internet provides us useful data, information, and knowledge for the personal, social and economic development and it is up to us to utilize our time on the worldwide web in a productive manner. The Internet is a revolution in information technology. You can do online courses and improve your writing, communication, business and online marketing skills. Online shopping, social media, emails, chatting are common things that we do daily.
As mentioned above Internet offers several uses but its contribution to the education sector is simply impeccable. Internet serves as a place for knowledge sharing for the teachers. Teachers around the world can interact with each other and exchange ideas via internet. This is a great way to learn and evolve the methods of teaching.
Students have also benefitted greatly with the use of internet. In case any of their lectures gets missed in the class, they do not necessarily require seeking help from their teachers or fellow students. Internet has all the required information.
Come in boys and girls, 
this hive is not the worst, 
where all find their best, 
Soul mates to fly with no rest

Dear fellows!
However, just as excess of everything is bad the over usage of internet is also bad for our mental, physical and social health. We must thus use it wisely for our benefit and refrain from over indulgence.
 Thank you!
. Wassalam!



Text Box: WRITER: ABDUL WAHAB