New:
Remove the madatory blue outline for input box
input:focus{
outline: none;
}
Remove border:
input{
border: none;
}
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://kit.fontawesome.com/6b9ade393d.js" crossorigin="anonymous"></script>
<style>
*{
padding: 0px;
margin: 0px;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
header{
height: 10vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
font-size: medium;
font-weight: 150;
color: rgb(124, 123, 123);
}
.left{
padding-left: 20px;
display: flex;
gap: 35px;
width: 40%;
}
.right{
padding-right: 15px;
display: flex;
gap: 35px;
width: 60%;
justify-content: end;
}
.Google{
display: flex;
justify-content: center;
align-items: center;
}
.nav{
margin-top: 15px;
border: 2px solid rgb(45, 129, 226);
font-size:35px;
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
border-radius: 35px;
}
input{
border: none;
}
.down{
margin: 15px;
padding: 15px;
text-align: center;
}
button{
border: 1px solid rgb(109, 109, 109);
font-size: 20px;
border-radius: 25px;
gap: 15px;
background-color: rgb(241, 239, 239);
color: rgb(18, 18, 218);
cursor: pointer;
}
.fl{
margin-left: 10px;
display: flex;
gap: 35px;
width: 40%;
font-size: 20px;
text-decoration: none;
color: rgb(112, 111, 111);
}
.fr{
display: flex;
gap: 35px;
width: 60%;
justify-content: end;
font-size: 20px;
text-decoration: none;
color: rgb(161, 160, 160);
}
footer{
display: flex;
height: 8vh;
background-color: rgb(231, 229, 229)
}
a{
margin-top: 25px;
text-decoration: none;
color:rgb(43, 57, 243);
}
hr{
color:rgb(146, 146, 150);
}
button:hover{
border: 1px solid rgb(17, 86, 190);
color: red;
}
input:focus{
outline: none;
}
</style>
</head>
<body>
<header>
<div class="left">
<h2>About</h2>
<h2>Store</h2>
</div>
<div class="right">
<h2 style="margin-top: 30px;">Gmail</h2>
<h2 style="margin-top: 30px;">Image</h2>
<i style="font-size:25px;margin-top: 30px;"class="fa-solid fa-layer-group"></i>
<img src="admin.png" alt="Ak" height="50%" width="100px">
</div>
</header>
<div class="Google">
<img style="height: 20%;width: 40%;margin-top: 15px;"src="data:image/png;base64,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" alt="Google">
</div>
<div class="nav" style="width: fit-content;margin-left: 25%;padding: 15px;">
<i class="fa-solid fa-plus"></i>
<input style="height:50px;width: 30vw;padding-top: 15px;font-size: 25px;margin-bottom: 10px;"type="text">
<i class="fa-solid fa-microphone"></i>
<i class="fa-regular fa-camera"></i>
<i class="fa-solid fa-magnifying-glass"></i>
<button style="font-size: 20px;border: 1px solid rgb(118, 8, 209);border-radius: 10px;padding: 5px;">Ai Mode</button>
</div>
<div class="down">
<button style="width: 15vw;height: 5vh;">Google Search</button>
<button style="width: 15vw;height: 5vh;">I'm feeling lucky</button>
</div>
<div style="text-align: center;margin: 30px;">
<h3>Google offered in:<span style="color: rgb(31, 31, 231);">हिन्दी বাংলা తెలుగు मराठी தமிழ் ગુજરાતી ಕನ್ನಡ മലയാളം ਪੰਜਾਬੀ</span> </h3>
</div>
<div style="height: 10vh;width: 100vw;background-color: rgb(231, 229, 229);padding-top: 35px;font-size: 20px;padding-left: 15px;margin-top: 12vh;color:rgb(136, 137, 141);font-weight: lighter;">
<h3>India</h3>
</div>
<hr>
<footer>
<div class="fl">
<a href="">Advertising</a><a href="">Business</a><a href="">How Search Works</a>
</div>
<div class="fr">
<a href="">Primary</a><a href="">Terms</a><a href="">Settings</a>
</div>
</footer>
</body>
</html>
OUTPUT:
Top comments (0)