SEARCH ANYTHING FROM GOOGLE USING THIS PYTHON CODE

Some simple steps to follow : –

  1. Import webbrowser module in your any idle editor. You may use pycharm, atom or spyder.
  2. Use input function what you want to search to enter here. It may be anything.
  3. Run the code and show the result.

Python Code : –

import webbrowser
x=input(“Enter what you want to search:”)
webbrowser.open(“https://www.google.com/search?sxsrf=ALeKk02wq3SQtVTFulAkSVcHm1fhu3Aiww%3A1599214584500&source=hp&ei=-BNSX8S7HN2N4-EPie2d0AU&q=”+x)

HOVER TO SHOW CONTENT

Step to follow : –

  1. html file (copy nav.html)
  2. css file (copy nav.css )
  3. You can also create by yourself these files, you can just understand how this operation can work.

nav.html file

<html>
<head>
<link rel = “stylesheet” type=”text/css” href=”nav.css”>
</head>
<body>
<div class=”navbar”>
<div class=”nav_heading”>SOCIAL ACCOUNTS</div>
<ul class=”nav_content”>
<li><a href=”https://www.udemy.com/user/deepak-dhingan/”>UDEMY</a></li&gt;
<li><a href=https://www.facebook.com/Deepak1741998&#8221;>FACEBOOK
</a></li>
<li><a href=https://www.linkedin.com/in/deepak-dhingan-ab3483137/&#8221;>LINKEDIN</a></li>
<li><a href=https://www.coursera.org/user/1b0953b989720155b0ff8777dba58fb2&#8221;>COURSERA</a></li>
<li><a href=https://wordpress.com/home/deepakdhingan.wordpress.com&#8221;>WORDPRESS</a></li>
<li><a href=https://classroom.udacity.com/me&#8221;>UDACITY</a></li>
<li><a href=https://www.youtube.com/&#8221;>YOUTUBE</a></li>
<li><a href=https://www.google.com/ >GOOGLE</a></li>
<li><a href=https://www.github.com/>GITHUB</a></li>
</ul>
</div>
</body>
</html>

nav.css file

body{background:#000;}
.navbar{background:#642874;width:0px;}
.nav_heading{color:#fff;margin-left:250px;background:#c6ffb3;width:440px;text-align:center;font-weight:bold;font-size:25px;padding:5px;}
ul{margin-left:250px;background:#fff;list-style:none;width:400px;line-height:30px;margin-top:-1px;padding:25px;display:none;}
ul li{transition:all 1s;padding-left:0px;width:410px;margin-left:-1px;}
a{text-decoration:none;color:#006666;}
.navbar:hover .nav_heading{background:#006666;}
.navbar:hover ul{display:block;background:#c6c6c6;}
li:hover{background:#fff;padding-left:15px;width:430px;box-shadow:2px 2px 7px #000;}

To follow my blog to click below

© WebCoder.com

Please follow me on social media pages : –

Facebook

Twitter

LinkedIn

CHAT SYSTEM

Steps of chat system are : –

  1. Create user1.php page or copy file below is given.
  2. Create user2.php page or copy file below is given.
  3. Create style.css file or copy file below is given.
  4. Connect to database or copy file below is given.

user1.php file

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Chatting Page</title>
<link rel=”stylesheet” href=”style.css” />
</head>
<body>
<?php
require(‘db.php’);
// If form submitted, insert values into the database.

if (isset($_REQUEST[‘username’])){
// removes backslashes
$username = stripslashes($_REQUEST[‘username’]);
//escapes special characters in a string
$username = mysqli_real_escape_string($con,$username);
$messege = stripslashes($_REQUEST[‘messege’]);
$messege = mysqli_real_escape_string($con,$messege);
$trn_date = date(“Y-m-d H:i:s”);
$query = “INSERT into `user1` (username, messege, trn_date)
VALUES (‘$username’, ‘$messege’, ‘$trn_date’)”;
$result = mysqli_query($con,$query);

if($result){
header(“Location:messege_user2.php”);
}
}else{
?></center><center>
<div class=”log_div”>
<h1 class=”heading”>USER 1 </h1> <pre>
<form action=”” method=”post” class=”form”><br>
<input type=”text” name=”username” placeholder=”Username” required /><br><br>
<input type=”messege” name=”messege” placeholder=”messege” required /><br><br>
<input type=”submit” name=”submit” value=”SEND” /></pre>

</form><br><br>
<p class=”chat_header”>CHATS LIST HERE </p>

<?php
require (‘db.php’);
$count=1;
$sel_query=”Select *from user2 ORDER BY id desc;”;
$result = mysqli_query($con,$sel_query);
while($row = mysqli_fetch_assoc($result)) { ?>
<div class=”chat_name”><?php echo “user2 : “. $row[“username”]; ?></div>
<div class=”chat_messege”><?php echo $row[“messege”]; ?></div><br><br>
<?php $count++; } ?>
</div>
<?php } ?>
</body>

</html>

user2.php file

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Chatting Page</title>
<link rel=”stylesheet” href=”style.css” />
</head>
<body>
<?php
require(‘db.php’);
// If form submitted, insert values into the database.
if (isset($_REQUEST[‘username’])){
// removes backslashes

$username = stripslashes($_REQUEST[‘username’]);
//escapes special characters in a string
$username = mysqli_real_escape_string($con,$username);
$messege = stripslashes($_REQUEST[‘messege’]);
$messege = mysqli_real_escape_string($con,$messege);
$trn_date = date(“Y-m-d H:i:s”);
$query = “INSERT into `user2` (username, messege, trn_date)
VALUES (‘$username’, ‘$messege’, ‘$trn_date’)”;
$result = mysqli_query($con,$query);
if($result){
header(“Location:messege_user1.php”);
}
}else{

?></center><center>
<div class=”log_div”>
<h1 class=”heading”>USER 2</h1> <pre>
<form action=”” method=”post” class=”form”><br>
<input type=”text” name=”username” placeholder=”Username” required /><br><br>
<input type=”messege” name=”messege” placeholder=”messege” required /><br><br>
<input type=”submit” name=”submit” value=”SEND” /></pre>
</form><br><br>
<p class=”chat_header”>CHATS LIST HERE </p>

<?php
require (‘db.php’);
$count=1;
$sel_query=”Select *from user1 ORDER BY id desc;”;
$result = mysqli_query($con,$sel_query);
while($row = mysqli_fetch_assoc($result)) { ?>
<div class=”chat_name”><?php echo “user1 : ” . $row[“username”]; ?></div>
<div class=”chat_messege”><?php echo $row[“messege”]; ?></div><br><br>
<?php $count++; } ?>

</div>
<?php } ?>
</body>
</html>

style.css file

body{background:#006666;}
.heading{color:#c6ffb3;}
.form{background:#fff;margin-left:440px;margin-right:440px;padding:75px;border-radius:305px;border:2px solid #fff;}
input[name=”username”]{padding:10px;border-radius:45px;border:1px solid cadetblue;background:cadetblue;color:#fff;}
input[name=”username”]:hover{border:2px solid #fff;}
input[name=”messege”]{padding:40px;border-radius:45px;border:1px solid cadetblue;background:cadetblue;color:#fff;font-weight:bold;}
input[name=”messege”]:hover{border:2px solid #fff;}
input[name=”submit”]{color:#fff;padding:15px;background:#006666;font-weight:bold;border-radius:20px;padding-left:25px;padding-right:25px;}
.chat_header{color:#c6ffb3;font-weight:bold;background:blue;padding:20px;}
.chat_name{color:#fff;background:#000;text-align:left;padding:5px;padding-left:30px;margin-right:1100px;font-size:20px;transition:all 3s;}
.chat_name:hover{color:#000;margin-right:0px;background:#c6ffb3;}
.chat_messege{font-weight:bold;margin-top:10px;text-align:left;padding:5px;padding-left:30px;color:#fff;}

db.php file for connection to database

<?php
// Enter your Host, username, password, database below.
// I left password empty because i do not set password on localhost.

$con = mysqli_connect(“localhost”,”root”,”password”,”chat_system”);
if (mysqli_connect_errno()){
echo “Failed to connect to MySQL: ” . mysqli_connect_error();
die();
}

date_default_timezone_set(‘Asia/Karachi’);
$error=””;
?>

You have to set up database to store values : –

  1. Create chat_system named database
  2. Create first table with name user1
  3. Create second table with name user2

user1 contains attributes : –

id, username, messege, trn_date

user2 contains attributes : –

id, username, messege, trn_date

To follow my blog to click below

© WebCoder.com

Please follow me on social media pages : –

Facebook

Twitter

LinkedIn

CLOCK GLOW CONTINUOUSLY

Steps to follow : –

  1. Create html file or copy clock.html file below.
  2. Create css file or copy clock.css file below.
  3. Link them

<link rel=”stylesheet” type=”text/css” href=”clock.css”>

clock.html file

<html>
<head>
<title>CLOCK</title>
<link rel=”stylesheet” type=”text/css” href=”clock.css”>
</head>
<body><center><div class=”div”>CLOCK</div></center>
<div class=”div2″></div>
<div class=”div3″></div>
<div class=”div4″></div>
<div class=”div5″></div>
<div class=”div6″></div>
<div class=”div7″></div>
<div class=”div8″></div>
<div class=”div9″></div>
<div class=”div10″></div>
<div class=”div11″></div>
<div class=”div12″></div>

<div class=”div13″></div>

</body>
</html>

clock.css file

.div{border:4px solid #006666;text-align:center;font-size:40px;color:#00ff00;background:cadetblue;animation-name:ex;animation-duration:8s;animation-iteration-count:infinite;position:relative;border-radius:200px;margin-top:2%;margin-left:40%;margin-right:30%;padding-left:50px;padding-right:60px;padding-top:160px;padding-bottom:160px;box-shadow:2px 2px 8px 10px #006666;}

@keyframes ex{
0%{color:#fff;}
50%{color:#006666;}
75%{color:#00ff00;background:#006666;}
100%{color:#00ffff;}
}
body {
counter-reset: my-sec-counter;
background:#cccccc;
}

.div2::before {
counter-increment: my-sec-counter;
content: counter(my-sec-counter);
}
.div3::before {
counter-increment: my-sec-counter;
content: counter(my-sec-counter);
}
.div4::before {
counter-increment: my-sec-counter;
content: counter(my-sec-counter);
}

.div5::before {
counter-increment: my-sec-counter;
content: counter(my-sec-counter);
}
.div6::before {
counter-increment: my-sec-counter;
content: counter(my-sec-counter);
}
.div7::before {
counter-increment: my-sec-counter;
content: counter(my-sec-counter);
}

.div8::before {
counter-increment: my-sec-counter;
content: counter(my-sec-counter);
}

.div9::before {
counter-increment: my-sec-counter;
content: counter(my-sec-counter);
}
.div10::before {
counter-increment: my-sec-counter;
content: counter(my-sec-counter);
}

.div11::before {
counter-increment: my-sec-counter;
content: counter(my-sec-counter);
}
.div12::before {
counter-increment: my-sec-counter;
content: counter(my-sec-counter);
}

.div13::before {
counter-increment: my-sec-counter;
content: counter(my-sec-counter);
}
.div2{margin-top:-360px;margin-left:740px;color:white;font-size:30px; animation-name:example;animation-duration:8s;animation-iteration-count:infinite;position:relative;}
.div3{margin-top:15px;margin-left:800px;color:white;font-size:30px; animation-name:example;animation-duration:8s;animation-iteration-count:infinite;position:relative;}
.div4{margin-top:69px;margin-left:840px;color:white;font-size:30px; animation-name:example;animation-duration:8s;animation-iteration-count:infinite;position:relative;}
.div5{margin-top:70px;margin-left:808px;color:white;font-size:30px; animation-name:example;animation-duration:8s;animation-iteration-count:infinite;position:relative;}

.div6{margin-top:19px;margin-left:749px;color:white;font-size:30px; animation-name:example;animation-duration:8s;animation-iteration-count:infinite;position:relative;}

.div7{margin-top:-14px;margin-left:665px;color:white;font-size:30px; animation-name:example;animation-duration:8s;animation-iteration-count:infinite;position:relative;}
.div8{margin-top:-53px;margin-left:590px;color:white;font-size:30px; animation-name:example;animation-duration:8s;animation-iteration-count:infinite;position:relative;}
.div9{margin-top:-88px;margin-left:530px;color:white;font-size:30px; animation-name:example;animation-duration:8s;animation-iteration-count:infinite;position:relative;}
.div10{margin-top:-138px;margin-left:500px;color:white;font-size:30px; animation-name:example;animation-duration:8s;animation-iteration-count:infinite;position:relative;}
.div11{margin-top:-135px;margin-left:531px;color:white;font-size:30px; animation-name:example;animation-duration:8s;animation-iteration-count:infinite;position:relative;}
.div12{margin-top:-80px;margin-left:590px;color:white;font-size:30px; animation-name:example;animation-duration:8s;animation-iteration-count:infinite;position:relative;}

.div13{margin-top:-50px;margin-left:655px;color:white;font-size:30px; animation-name:example;animation-duration:8s;animation-iteration-count:infinite;position:relative;}
@keyframes example{
0%{color:white;}
50%{color:#006600;font-size:30px;}
75%{color:#00ff00;font-size:30px;}
100%{color:00ffff;font-size:30px;}
}

View of the Clock Image and also you can try above code( html + css )in your text-editor

To follow my blog to click below

© WebCoder.com

Please follow me on social media pages : –

Facebook

Twitter

LinkedIn

ROLL A CIRCLE ON ROAD ON HOVER

These are the steps here .

  1. Create one circle or copy circle.html file.
  2. Create css file or copy circle.css file .
  3. Link css file with html file via copy the code in header part of html code.
    • <link rel=”stylesheet” type=”text/css” href=”circle.css”>

circle.html file

<html>
<head>
<title></title>
<link rel=”stylesheet” type=”text/css” href=”circle.css”>
</head>
<body><div class=”div”>
<div class=”roll”></div></div>
</body>
</html>

circle.css file

body{background:#c6ffb3;}
.roll{background:#006666;
width:100px;height:100px;margin-top:200px;
margin-left:5px;border-radius:75px;transition:all 5s;}
.div:hover .roll{margin-left:1230px;transform:rotate(360deg)}
.div{background:none;border-bottom:4px solid #006666;border-radius:5px;}

BEFORE HOVER

ON HOVER

To follow my blog to click below

© WebCoder.com

Please follow me on social media pages : –

Facebook

Twitter

LinkedIn

HOVER TO OVERLAP ONE CIRCLE ON OTHER

These are the steps to overlap one circle on other.

  1. Create two circles using div element in html or you may copy my code below overlap_circle.html.
  2. Create css file for styling or copy css file overlap_circle.css .
  3. Link css file with html file via copy the code in header part of html code.

<link rel=”stylesheet” type=”text/css” href=”overlap_circle.css”>

overlap_circle.html file

<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”overlap_circle.css”>
</head>
<body><div class=”main”>
<div class=”circle1″></div><div class=”circle2″></div>
</div>
</body>
</html>

overlap_circle.css file

body{background:#000;}
.main .circle1{background:#006666;transition:all 2s;border:2px solid #006666;}
.main .circle2{background:#c6ffb3;border:2px solid #c6ffb3;}
.main div{float:left;padding:65px;}
.main{margin-left:100px;margin-top:150px;}
.main:hover .circle1{transform:rotateY(180deg);margin-left:80px;margin-right:-134px;}

BEFORE HOVER

ON HOVER

To follow my blog to click below

© WebCoder.com

Please follow me on social media pages : –

Facebook

Twitter

LinkedIn

HOVER TO OVERLAP ONE BOX ON OTHER

These are the steps to overlap one box on other.

  1. Create two boxes using div element in html or you may copy my code below overlap_box.html.
  2. Create css file for styling or copy css file overlap_box.css .
  3. Link css file with html file via copy the code in header part of html code.

<link rel=”stylesheet” type=”text/css” href=”overlap_box.css”>

overlap_box.html file

<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”overlap_box.css”>
</head>
<body><div class=”main”>
<div class=”box1″></div><div class=”box2″></div>
</div>
</body>
</html>

overlap_box.css file

body{background:#000;}
.main .box1{background:#006666;transition:all 2s;border:2px solid #006666;}
.main .box2{background:#c6ffb3;border:2px solid #c6ffb3;}
.main div{float:left;padding:65px;}
.main{margin-left:100px;margin-top:150px;}
.main:hover .box1{transform:rotateY(180deg);margin-left:80px;margin-right:-134px;}

BEFORE HOVER

ON HOVER

To follow my blog to click below

© WebCoder.com

Please follow me on social media pages : –

Facebook

Twitter

LinkedIn

ON HOVER TO ROTATE THE LINE

These are the steps for this operation :-

  1. Create your html file or copy the below html code named “rotate_line.html” to your html editor notepad++ or notepad.
  2. Also create css file or copy my css code named “rotate_line.css” to your html editor.
  3. And the third step to link css file with html so that we can apply effect on html created element by using the code to copy them in head section of html code. <link rel=”stylesheet” type=”text/css” href=”rotate_line.css”>

rotate_line.html file : –

<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”rotate_line.css”>
</head>
<body>
<div class=”line”></div>
</body>
</html>

rotate_line.css file :-

.line{width:350px;margin-left:400px;padding:35px;background:#006666;margin-top:350px;animation-name:change;transition:all 3s;animation-duration:2s;animation-iteration-count:infinite;}
.line:hover{transform:rotate(3600deg);}
@keyframes change{
0%{background:#006666;}
30%{background:#c6ffb3;}
60%{background:#000;}
90%{background:cadetblue;}
100%{background:#00ff00;}
}

BEFORE HOVER

ON HOVER

To follow my blog to click below

© WebCoder.com

Please follow me on social media pages : –

Facebook

Twitter

LinkedIn

BUBBLE ROTATE AT 360 DEGREE ON THE SURFACE

These are the steps for the motion of the single bubble on the surface.
1. Create an html file. I also create a file named bubble.html.

2. Create a css file for styling of html elements. I also create a file named bubble.css.

3. Link css file with html file using link tag in html as

<link rel=”stylesheet” type=”text/css” href=”bubble.css”>

bubble.html file

<html>

<head>

<title>BUBBLE ROTATE AT 360</title>

<link rel=”stylesheet” type=”text/css” href=”bubble.css”>

</head>

<body>

<div class=”main”><div></div></div>

</body>

</html>

bubble.css file

body{background:#006666;}
.main div{border:2px solid #ffe6e6;background:#ffe6e6;
padding:40px;
margin-top:20px;
margin-right:740px;

margin-left:540px;
border-radius:205px;
animation-name:example;
animation-duration:5s;
animation-iteration-count:infinite;
}
@keyframes example{
0%{padding:40px;border:2px solid #fff;background:#fff;
margin-top:;
margin-right:;
margin-left:;}
20%{padding:40px;border:2px solid #ffb3b3;background:#ffb3b3;margin-left:740px;margin-top:220px;}
40%{padding:40px;border:2px solid #ff6666;background:#ff6666;margin-left:540px;margin-top:420px;}
60%{padding:40px;border:2px solid #ff1a1a;background:#ff1a1a;margin-left:340px;margin-top:220px;margin-right:940px;}
80%{padding:40px;border:2px solid #b30000;background:#b30000;}
}

Screenshot (1982)
BEFORE

Screenshot (1982)

Screenshot (1982)
Screenshot (1982)

Screenshot (1982)
AFTER

To follow my blog to click below

© WebCoder.com

Please follow me on social media pages : –

Facebook

Twitter

LinkedIn

BUBBLE OUT DOWN ON HOVER

css1

Steps for the hover effect : –
  1. Create number of bubbles you want using div tag or copy hover.html file.
  2. Create hover.css file for styling.
  3. Link 1st file with second file using link tag.
hover.html file : –

<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”four.css”>
</head>
<body><br><br><br>
<div class=”div_div2″>
<div class=”div1″></div><div class=”div2″></div><div class=”div3″></div><div class=”div4″></div>
</div>
</body>
</html>

hover.css file : –

body{background:#fff;}

.div_div2 div{border:2px solid #006666;border-radius:80px;

text-align:center;padding:50px;}

.div_div2 div{width:10px;height:10px;background:#000;

border:2px solid #fff;color:white;transition:all 3s;}

.div_div2 div:hover{animation-name:example2;

animation-duration:1s;animation-iteration-count:infinite;}

.div_div2 .div1{margin-top:0px;margin-left:90px;}

.div_div2 .div2{margin-top:-115px;margin-left:90px;}

.div_div2 .div3{margin-top:-115px;margin-left:90px;}

.div_div2 .div4{margin-top:-115px;margin-left:90px;}

.div_div2:hover .div1{margin-left:90px;margin-top:0px;}

.div_div2:hover .div2{margin-left:90px;margin-top:-40px;}

.div_div2:hover .div3{margin-left:90px;margin-top:-40px;}

.div_div2:hover .div4{margin-left:90px;margin-top:-40px;}

@keyframes example2{
10%{background:#006666;border:2px solid #006666;}
30%{background:#006666;border:2px solid #006666;}
50%{background:#006666;border:2px solid #006666;}
70%{background:#006666;border:2px solid #006666;}
100%{background:#006666;border:2px solid #006666;}
}

BEFORE HOVER

Screenshot (1982)

ON HOVER

Screenshot (1985)

To follow my blog to click below

© WebCoder.com

Please follow me on social media pages : –

Facebook

Twitter

LinkedIn