<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<h2>Search Here</h2>
<input placeholder="Search here" type="text" id="search"><br><br>
<button onclick="google()">Google</button>
<button onclick="bing()">Bing</button>
<button onclick="brave()">Brave</button>
<h3 onclick="show()">Developed by sirajju ♥</h3>
</div>
<script>
function google(){
var search_item = document.getElementById('search').value;
window.location.href = 'https://www.google.com/search?q='+search_item;
}
function bing(){
var search_item = document.getElementById('search').value;
window.location.href = 'https://www.bing.com/search?form=&q='+search_item;
}
function brave(){
var search_item = document.getElementById('search').value;
window.location.href = 'https://search.brave.com/search?q='+search_item;
}
function show(){
var text=atob('aSBsdWIgdQ==');
alert(text);
}
</script>
<style>
body {
margin:0;
background:black;
color:whitesmoke;
display: flex;
justify-content: center;
}
.container{
background:white;
padding:100px;
margin-top:300px;
border-radius: 7px;
box-shadow:2px 2px 20px white;
}
button{
width:200px;
font-weight: bold;
font-size:30px;
height:55px;
background: white;
border:4px solid;
transition: 0.5s;
border-radius: 7px;
}
input{
height: 65px;
width:600px;
border: 4px solid;
border-radius: 7px;
font-size:23px;
}
input::placeholder {
font-size:23px;
}
h3 {
color:red;
margin-top:50px;
font-size: 17px;
margin-left:35%;
transition: 0.5s;
}
h3:hover{
transform: translateX(30px);
cursor:pointer;
}
h2 {
color:black;
margin-left:30%;
font-size:50px;
}
button:hover {
box-shadow:2px 2px 10px black;
}
</style>
</body>
</html>