In an attempt to replicate Google's search bar, the following code has been developed:
<head>
<title>Search</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="positions.css">
</head>
<body>
<div id="input_field">
<input type="text" name="q">
</div>
<form action="https://google.com/search">
<div class="flexbox-container">
<div class="button_search_pos"><input type="submit" value="Google Search"></div>
<div class="lucky_pos"><input type="submit" value="I’m Feeling Lucky"></div>
</div>
Here is the associated CSS:
Various suggestions provided on Stackoverflow were tested to no avail. Although there are pre-made solutions available on platforms like YouTube, I prefer to create my own. The challenge is to align the input field above both buttons using Flexbox, while ensuring that it remains responsive when the page size changes.
Any assistance would be greatly appreciated!
#input_field{
position: absolute;
top: 310px;
left: 41%;
}
.flexbox-container{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.lucky_pos, .button_search_pos{
text-align: center;
padding:1px;
margin: 0;
flex-direction: row;
}