<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" c initial-scale=1.0"> > > <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@17.0.3/build/css/intlTelInput.css"> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css"> <style> html, body { height: 100%; margin: 0; padding: 0; } body { font-family: 'Syne', 'Space Grotesk', sans-serif; background: #000000; /* Main background color */ color: #fff; } * { box-sizing: border-box; } .container { display: flex; align-items: center; justify-content: center; height: 100vh; margin-top: 500px; } .project-form { width: 500px; padding: 40px; background: rgba(107, 109, 89, 0.5); /* Lighter background color with transparency */ border-radius: 10px; margin: 0 auto; position: relative; transition: box-shadow 0.3s ease; } .slider-container { margin: 20 0px; /* Adjusted gap between sliders */ } .project-form:hover { box-shadow: 0 0 20px rgba(255, 255, 255, 0.8); /* White glow effect on hover */ /* Adjust the values as needed */ } .project-form h1{ margin: 0 0 30px; text-align: center; color: #FFF; /* Headings color */ } .project-form h3 { margin: 0 0 30px; text-align: center; color: #FFF; /* Headings color */ } .user-box, .phone-input, .select-box, .currency-select, .slider-label-left, .slider-label { margin-bottom: 20px; } .project-form form { display: grid; gap: 20px; grid-template-columns: 1fr; /* Adjust the columns as needed */ box-sizing: border-box; /* Include padding and borders in the total width and height */ } /* Add media query for screens smaller than 768px (e.g., mobile devices) */ @media (max-width: 767px) { .project-form { width: 90%; /* Adjust width as needed for smaller screens */ padding: 20px; /* Adjust padding for smaller screens */ } } /* Add media query for screens between 768px and 1023px (e.g., tablets) */ @media (min-width: 768px) and (max-width: 1023px) { .project-form { width: 70%; /* Adjust width as needed for tablets */ } } /* Add media query for screens larger than 1023px (e.g., desktops) */ @media (min-width: 1024px) { .project-form { width: 80%; /* Adjust width as needed for larger screens */ } } /* Add media query for screens between 1024px and 1365px (e.g., laptops) */ @media (min-width: 1024px) and (max-width: 1365px) { .project-form { width: 75%; /* Adjust width as needed for laptops */ } } /* This section is for Phone Field */ .phone-input { position: relative; margin-bottom: 20px; } .phone-input label { position: absolute; top: -35px; left: 0; padding: 10px 0; font-size: 16px; color: #DAA520; pointer-events: none; transition: .5s; } .phone-input input { width: 100%; padding: 10px 10; font-size: 16px; color: #fff; border: none; border-bottom: 1px solid #fff; outline: none; background: transparent; transition: border-bottom-color 0.5s ease; } .iti__country-list { background-color: #36372D; /* Specify your background color */ arrowColor: #DAA520; color: #fff; /* Specify your text color */ /* Add any other styles you want to customize */ } .iti__arrow { border-top-color: #DAA520 !important; /* Replace #yourDesiredColor with your desired color */ } /* Override the arrow color in the country code dropdown */ .iti__country-list .iti__arrow { border-top-color: #DAA520 !important; /* Replace #yourDesiredColor with your desired color */ } .phone-input input:focus ~ label, .phone-input input:valid ~ label, .phone-input input:active ~ label { top: -20px; left: 0; color: #DAA520 !important; font-size: 12px; } .phone-input input:focus { border-bottom-color: #DAA520; } #phone-validation-icon { position: absolute; right: 290px; top: 30%; transform: translateY(-50%); font-size: 1.2em; transition: color 0.3s ease, text-shadow 0.3s ease; } /* Add new styles for email input and error message */ .email-input { position: relative; margin-bottom: 20px; } .email-input label { position: absolute; top: -35px; left: 0; padding: 10px 0; font-size: 16px; color: #DAA520; pointer-events: none; transition: .5s; } .email-input input { width: 100%; padding: 10px 10; font-size: 16px; color: #fff; border: none; border-bottom: 1px solid #fff; outline: none; background: transparent; transition: border-bottom-color 0.5s ease; } .email-input input:focus ~ label, .email-input input:valid ~ label { top: -20px; left: 0; color: #DAA520; font-size: 12px; } .email-input input:focus { border-bottom-color: #DAA520; } .email-error { color: red; font-size: 12px; margin-top: 5px; } /* This below is for services select box */ .project-form .select-box { position: relative; width: 100%; margin-bottom: 30px; } .project-form .select-box select { width: 100%; padding: 10px 0; font-size: 12px; color: transparent; /* Set font color to transparent */ border: none; border-bottom: 1px solid #FFFFFF; /* Set border color to transparent */ outline: none; background: #36372D; appearance: none; border-radius: 5px; } .project-form .select-box select::-ms-expand { display: none; } .project-form .select-box:after { content: "▼"; position: absolute; right: 2.4px; top: 5px; pointer-events: none; color: #DAA520; font-size: 12px; } .project-form .select-box label { position: absolute; top: 0; left: 10px; /* Adjusted left padding */ padding: 10px 0; font-size: 16px; color: #DAA520; pointer-events: none; transition: .5s; } .project-form .select-box select:focus + label, .project-form .select-box select.has-value + label { top: -30px; left: 0; color: #DAA520; font-size: 16px; } .project-form .select-box .sub-category { display: none; margin-top: 10px; } .project-form .select-box .sub-category select { margin-top: 5px; } .project-form .select-box select:focus { border-bottom-color: #DAA520; color: #FFFFFF; } .project-form .select-box select.has-value { color: #FFFFFF; } .project-form .select-box.rotate:after { transform: rotate(180deg); transition: transform 0.3s ease; /* You can adjust the transition duration and timing function */ } .project-form .custom-options { display: none; position: absolute; font-size: 12px; color: #000; top: calc(100% - -3px); /* Adjusted the top position */ left: 0; width: 100%; max-height: 80px; /* Adjusted the maximum height */ overflow-y: auto; /* Add a scrollbar if the options exceed the max height */ z-index: 1000; /* Adjust the z-index as needed to ensure it's above other elements */ animation: slideInOut 0.3s ease-in-out; background: #36372D; border-radius: 6px; box-shadow: 0 0 20px rgba(255, 255, 255, 0.8); /* Color for the arrow */ border-bottom: 4px solid #DAA520; /* Color for the sliding handle */ scrollbar-color: #DAA520 rgb(47, 49, 41); scrollbar-width: thin; } /* Add a hover effect for the sliding handle */ .project-form .custom-options::-webkit-scrollbar-thumb:hover { background-color: #DAA520; } .project-form .custom-option { padding: 4px; color: rgb(25, 10, 20); /* Default faded text color */ cursor: pointer; transition: color 0.3s ease; /* Add a transition effect for smooth color change */ } .project-form .custom-option:hover { color: #FFFFFF; /* Change text color on hover as needed */ } .project-form .custom-option:last-child { border-bottom: none; } /* Add this style for the search box */ .project-form .custom-options input { width: calc(100% - 20px); margin: 10px; padding: 8px; box-sizing: border-box; border: 1px solid #DAA520; border-radius: 5px; background: #36372D; color: #FFFFFF; animation: slideIn 0.3s ease-in-out; /* Add the animation here */ } @keyframes slideIn { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideInOut { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* This section is for name email fields */ .project-form .user-box { position: relative; } .project-form .user-box input { width: 100%; padding: 10px 0 10px 30px; /* Adjust the padding to accommodate the icon on the left */ font-size: 16px; color: #fff; margin-bottom: 30px; border: none; border-bottom: 1px solid #fff; outline: none; background: transparent; position: relative; z-index: 1; } .project-form .user-box label { position: absolute; top: 10px; /* Adjust the top position to your preference */ left: 0; padding: 0 5px; /* Adjust padding to your preference */ font-size: 16px; color: #DAA520; pointer-events: none; transition: .5s; opacity: 0; /* Adjust the opacity to your preference */ z-index: 2; } .project-form .user-box input:focus ~ label, .project-form .user-box input:valid ~ label { top: -20px; opacity: 1; font-size: 16px; } .project-form .user-box input:focus::placeholder { opacity: 0; /* Hide the placeholder on focus */ } .project-form .user-box input:not(:placeholder-shown) ~ label { top: -20px; opacity: 1; } .project-form .user-box input:focus { border-bottom-color: #DAA520; } /* Validation and Field Icons */ .user-box .icon::before { content: ""; /* Ensure that the content property is present */ display: inline-block; vertical-align: middle; /* Align the icon vertically in the middle */ } .material-icons { font-size: 2px; /* Adjust the font size of the icons */ color: #FFF; /* Change the color of the icons */ } /* Additional customization for positioning */ #name-icon, #email-icon { position: absolute; left: 2px; /* Adjust the left position to your preference */ top: 25%; /* Adjust the top position to center vertically */ transform: translateY(-50%); } .icon { position: absolute; right: 10px; top: 30%; transform: translateY(-50%); font-size: 1.2em; transition: color 0.3s ease, text-shadow 0.3s ease; } .tick-icon { color: green; } .exclamation-icon { color: red; } .glow { text-shadow: 0 0 10px #4CAF50; /* Adjust the third parameter to control the glow intensity */ color: #4CAF50; } /* This section is for Textarea */ .project-form .other-description { margin-bottom: 20px; position: relative; /* Added position relative */ } .project-form .other-description label { position: absolute; top: 0px; /* Adjusted top position */ left: 0px; /* Adjusted left position */ padding: 0 5px; /* Adjusted padding */ font-size: 16px; color: #DAA520; pointer-events: none; transition: .5s; background-color: transparent; /* Added background-color */ } .project-form .other-description textarea { width: calc(100% - 20px); /* Adjusted width with padding */ padding: 10px 10px 10px; font-size: 16px; color: #fff; border: 1px solid #fff; border-radius: 5px; outline: none; background: transparent; transition: border-color 0.5s ease; resize: vertical; margin-top: 40px; } .project-form .other-description textarea:focus ~ label, .project-form .other-description textarea:valid ~ label, .project-form .other-description textarea:active ~ label { top: -20px; left: 10px; color: #DAA520; font-size: 12px; } .project-form .other-description textarea:focus { border-color: #DAA520; } /* Placeholder styling */ .project-form .other-description textarea::placeholder { color: #fff; opacity: 0.7; position: absolute; top: 10px; /* Adjusted top position for placeholder */ left: 10px; /* Adjusted left position for placeholder */ font-size: 16px; } /* This section is for Currency Selector */ .project-form .currency-select { position: relative; margin-bottom: 30px; margin-top: 30px; } .project-form .currency-select label { position: absolute; top: -35px; left: 0; padding: 10px 0; font-size: 16px; color:#DAA520; pointer-events: none; transition: .5s; } .project-form .currency-select select { width: 100%; padding: 10px 10; font-size: 12px; color: #fff; border: none; border-bottom: 1px solid #fff; outline: none; background: #36372D; appearance: none; transition: border-bottom-color 0.5s ease, color 0.5s ease; } .project-form .currency-select select::-ms-expand { display: none; } .project-form .currency-select:after { content: "▼"; position: absolute; right: 2.6px; top: -2px; pointer-events: none; color: #DAA520; font-size: 12px; } .project-form .currency-select.open:after { transform: rotate(180deg); /* Rotate the arrow when the select is open */ } .project-form .currency-select select:focus ~ label, .project-form .currency-select select:valid ~ label, .project-form .currency-select select:active ~ label { top: -20px; left: 0; font-size: 12px; } .project-form .currency-select select:focus { border-bottom-color: #DAA520; } .project-form .currency-select label::after, .range::before { content: attr(data-currency); margin-left: 5px; } /* This is for budget and timeline range slider */ .project-form .irs--flat .irs-line { top: 25px; height: 1px; background-color: #000; border-radius: 4px; } .project-form .irs--flat .irs-bar { top: 25px; height: 2px; background-color: #FFF; } .project-form .irs--flat .irs-handle { top: 18px; width: 16px; height: 16px; border-radius: 50%; /* Make it a circle */ background-color: #fff; } .project-form .glow { box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* Adjust the shadow color and size */ } .project-form .glow-grid-text { color: #fff; /* Adjust the text color for better visibility */ text-shadow: 0 0 10px rgba(255, 250, 250, 0.7); /* Adjust the shadow color and size for grid text */ } .project-form .irs--flat .irs-handle > i:first-child { position: absolute; display: block; top: 3px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 100%; /* Make it a circle */ background-color: #DAA520; } .project-form .irs--flat .irs-handle.state_hover > i:first-child, .project-form .irs--flat .irs-handle:hover > i:first-child { background-color: #FFF; } .project-form .irs--flat .irs-min, .project-form .irs--flat .irs-max { top: 0; padding: 1px 3px; color: #999; font-size: 12px; line-height: 1.0; text-shadow: none; background-color: #e1e4e9; border-radius: 4px; } .project-form .irs--flat .irs-from, .project-form .irs--flat .irs-to, .project-form .irs--flat .irs-single { color: #000000; font-size: 12px; line-height: 1.0; text-shadow: none; padding: 1px 5px; background-color: #DAA520; border-radius: 4px; } .project-form .irs--flat .irs-from:before, .project-form .irs--flat .irs-to:before, .project-form .irs--flat .irs-single:before { position: absolute; display: block; content: ""; bottom: -6px; left: 50%; width: 0; height: 0; margin-left: -3px; overflow: hidden; border: 3px solid transparent; border-top-color: #FFF; } .project-form .irs--flat .irs-grid-pol { background-color: #DAA520; } .project-form .irs--flat .irs-grid-text { color: #FFF; font-size: 10px; } /* This is for Radio Buttons */ .project-form .filter { position: absolute; left: -9999px; } .project-form .radios-boxes { display: flex; flex-direction: column; /* Arrange radios and labels in a column */ align-items: center; /* Center horizontally */ justify-content: center; /* Center vertically */ margin-top: 40px; } .project-form .radios-boxes .label-select-timeline { position: absolute; /* Change to absolute positioning */ top: 1080px; /* Adjust the top position as needed */ left: 20px; /* Adjust the left position to align it to the left */ padding: 10px 0; font-size: 16px; color: #DAA520; } .project-form .radios { display: flex; align-items: center; gap: 20px; /* Adjust the gap between radio buttons as needed */ filter: url('#gooeyness'); overflow: hidden; position: relative; margin-top: 10px; /* Adjust the top margin as needed */ } .project-form .radio { -moz-appearance: none; -ms-appearance: none; -webkit-appearance: none; appearance: none; border-radius: 60%; border: 12px solid #fff; cursor: pointer; height: 20px; margin: 25px; padding: 10px 10px; outline: 0; -webkit-tap-highlight-color: transparent; transition: border-color 800ms; width: 20px; /* Adjust the positioning as needed */ position: relative; top: 1px; /* Move the radio button 10px down (adjust as needed) */ left: -15px; /* Move the radio button 20px to the right (adjust as needed) */ } .project-form .radio.active { border-color: white; background: rgba(255, 155, 125, 0.4); transform: scale(0); animation: breathing 1s infinite alternate; } @keyframes breathing { to { transform: scale(1.1); } } .project-form .ball { background: white; border-radius: 50%; height: 34px; pointer-events: none; position: absolute; top: 30px; transform: translateX(-80px); /* Adjust the X-axis position */ transition: transform 800ms; width: 34px; } .project-form .ball.pos0 { transform: translateX(20px); } .project-form .ball.pos1 { transform: translateX(130px); } .project-form .ball.pos2 { transform: translateX(240px); } .project-form .radios-boxes .labels { display: flex; align-items: center; justify-content: center; margin-top: -40px; /* Adjust the top margin as needed */ margin-right: -40px; } .project-form .radios-boxes .label { color: #DAA520; cursor: pointer; font-size: 12px; line-height: 50px; padding: 10px 10px; -webkit-tap-highlight-color: transparent; transition: color 800ms; margin-right: 60px; /* Adjust the margin as needed */ } .project-form .radios-boxes .label.active { color: white; } .project-form form button { background: transparent; color: #fff; /* Change text color to white */ border: 0px solid #fff; /* Change border color to white */ border-radius: 10px; position: relative; display: inline-block; padding: 10px 20px; font-size: 16px; text-decoration: none; text-transform: uppercase; overflow: hidden; transition: .5s; margin-top: 60px; letter-spacing: 4px; cursor: pointer; } .project-form form button:hover { background: #fff; /* Change background color to white on hover */ color: #000000; /* Change text color on hover to gold */ border-radius: 4; box-shadow: 0 0 5px #fff, /* Change shadow color to white */ 0 0 25px #fff, /* Change shadow color to white */ 0 0 50px #fff, /* Change shadow color to white */ 0 0 100px #fff; /* Change shadow color to white */ } .project-form form button span { position: absolute; display: block; } .project-form form button span:nth-child(1) { top: 0; left: -100%; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, #fff); /* Change gradient color to white */ animation: btn-anim1 1s linear infinite; } @keyframes btn-anim1 { 0% { left: -100%; } 50%, 100% { left: 100%; } } .project-form form button span:nth-child(2) { top: -100%; right: 0; width: 2px; height: 100%; background: linear-gradient(180deg, transparent, #fff); /* Change gradient color to white */ animation: btn-anim2 1s linear infinite; animation-delay: 0.25s; } @keyframes btn-anim2 { 0% { top: -100%; } 50%, 100% { top: 100%; } } .project-form form button span:nth-child(3) { bottom: 0; right: -100%; width: 100%; height: 2px; background: linear-gradient(270deg, transparent, #fff); /* Change gradient color to white */ animation: btn-anim3 1s linear infinite; animation-delay: 0.5s; } @keyframes btn-anim3 { 0% { right: -100%; } 50%, 100% { right: 100%; } } .project-form form button span:nth-child(4) { bottom: -100%; left: 0; width: 2px; height: 100%; background: linear-gradient(360deg, transparent, #fff); /* Change gradient color to white */ animation: btn-anim4 1s linear infinite; animation-delay: 0.75s; } </style> </head> <body>