Responsive Dropdown
body {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
text-align: center;
margin-top: 20px;
}
.industry-text {
font-size: 60px;
line-height: 1.2; /* Adjust line height */
vertical-align: middle;
}
.selector {
width: 350px; /* Default width */
height: 70px; /* Default height */
font-size: 20px; /* Default font size */
color: #000;
border: none;
border-bottom: 3px solid #000; /* Slightly thicker line */
appearance: none;
background-color: transparent;
outline: none;
vertical-align: middle;
margin: 0 auto; /* Center the selector */
text-align: left; /* Left align text */
}
.button {
background-color: #cccccc;
color: white;
padding: 20px 40px; /* Increased padding for bigger button */
font-size: 20px; /* Increased font size */
border: none;
cursor: pointer;
margin-top: 20px;
}
.notification {
color: red;
display: none;
margin-top: 10px;
}
/* Responsive Styles */
@media (max-width: 768px) {
.industry-text {
font-size: 55px; /* Slightly increased size for mobile */
line-height: 1.5; /* Increased line height */
}
.selector {
width: 80%; /* Reduced width for mobile */
height: 60px; /* Adjusted height for mobile */
font-size: 18px; /* Decreased font size for dropdown */
padding: 0; /* Removed padding */
text-align: left; /* Left align text */
}
.button {
padding: 15px 30px; /* Adjusted padding for mobile */
font-size: 22px; /* Increased font size for button on mobile */
}
.notification {
font-size: 16px; /* Slightly smaller notification */
}
}
@media (max-width: 480px) {
.industry-text {
font-size: 45px; /* Further increased size for very small screens */
line-height: 1.5; /* Maintain line height */
}
.selector {
width: 90%; /* Further reduced width for very small screens */
height: 50px; /* Further adjusted height for mobile */
font-size: 16px; /* Further decreased font size for dropdown */
padding: 0; /* Ensure no padding */
text-align: left; /* Left align text */
}
.button {
padding: 15px 30px; /* Keeping it larger */
font-size: 20px; /* Keeping larger font size */
}
}
function checkSelection() {
var selection = document.getElementById("serviceSelection").value;
var button = document.getElementById("goButton");
var notification = document.getElementById("notification");
if (selection !== "") {
button.disabled = false;
button.style.backgroundColor = "#171940"; // Change button color on selection
notification.style.display = "none"; // Hide the notification if a valid selection is made
redirectBasedOnSelection(selection); // Redirect based on selection
} else {
button.disabled = true;
button.style.backgroundColor = "#cccccc"; // Grey state
notification.style.display = "block"; // Show the error message if no selection
}
}
function handleClick() {
var selection = document.getElementById("serviceSelection").value;
var notification = document.getElementById("notification");
if (selection === "") {
notification.style.display = "block"; // Show the error message if button clicked without selection
} else {
notification.style.display = "none"; // Hide the error message
redirectBasedOnSelection(selection); // Redirect based on selection when button is clicked
}
}
function redirectBasedOnSelection(selection) {
if (selection === "Ecommerce") {
window.location.href = "https://agentzappy.com/ecommerce/";
} else {
window.location.href = "https://agentzappy.com/lead-qualification/";
}
}
We're in the
Select an option
Ecommerce
Solar Installation
Study Abroad
University
Real Estate
Other
sector.
Please select your industry to proceed