Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <section class="data-search">
  <form method="post">
    <div class="form-group">
      <div class="head">
        <div class="svg">
          <svg id="b68b2dea-431f-4b15-9350-961d32a371b9" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="200" height="200.96158" viewBox="0 0 888 637.96158"><title>adventure</title><circle cx="174.02316" cy="76.13114" r="30.99674" fill="#2f2e41"/><path d="M235.61478,580.54458l19.04375-66.04535,6.483,2.02593s-7.69854,49.43272-19.85412,61.99349Z" transform="translate(-156 -131.23696)" fill="#2f2e41"/><path d="M308.14311,226.00667s2.43112,25.93191-3.24149,33.22527,3.64667,21.47486,3.64667,21.47486l17.01782,20.25931,25.12155-11.34521,3.64667-21.06968-2.43111-14.58671s-8.50891-8.50891-4.86224-23.906S308.14311,226.00667,308.14311,226.00667Z" transform="translate(-156 -131.23696)" fill="#ffb9b9"/><path d="M308.14311,226.00667s2.43112,25.93191-3.24149,33.22527,3.64667,21.47486,3.64667,21.47486l17.01782,20.25931,25.12155-11.34521,3.64667-21.06968-2.43111-14.58671s-8.50891-8.50891-4.86224-23.906S308.14311,226.00667,308.14311,226.00667Z" transform="translate(-156 -131.23696)" opacity="0.1"/><polygon points="166.73 579.778 166.73 596.39 189.015 600.847 186.989 573.295 166.73 579.778" fill="#ffb9b9"/><polygon points="233.586 573.295 228.723 596.39 238.448 603.278 255.466 590.718 253.44 570.863 233.586 573.295" fill="#ffb9b9"/><path d="M347.041,730.05829s-8.50891-14.38252-24.31117-5.36792c0,0-2.8363,15.90276-5.67261,17.11832s-18.63856,24.31117,0,26.3371,27.95785-4.05186,27.95785-4.05186-3.64667,3.13776,2.02593,1.517,3.24149-10.53484,3.24149-10.53484Z" transform="translate(-156 -131.23696)" fill="#2f2e41"/><path d="M402.55149,720.33382s-12.56077,8.91409-14.5867,4.86223-5.26742-3.64667-5.26742-3.64667-11.34522,42.76822-4.05186,44.79415A24.58356,24.58356,0,0,0,392.827,765.611s9.72447-6.81038,9.72447-1.543,27.14748,4.88816,38.49269,4.483,5.26742-8.91409,5.26742-8.91409l-14.99189-14.5867-17.01782-24.71636S406.60335,713.44565,402.55149,720.33382Z" transform="translate(-156 -131.23696)" fill="#2f2e41"/><path d="M283.02156,449.26426l17.01782,163.29s9.31929,99.6758,10.94,101.29655,12.15559,6.88816,35.2512,0l-5.26742-130.46995,9.72447-81.03724,22.28524,55.91569s5.26742,150.32408,8.91409,150.32408,25.93192,7.29335,31.19934-1.62075,4.45705-104.94322,4.45705-104.94322-2.43112-151.53963-20.25931-156.40187S283.02156,449.26426,283.02156,449.26426Z" transform="translate(-156 -131.23696)" fill="#2f2e41"/><circle cx="174.02316" cy="81.80375" r="27.95785" fill="#ffb9b9"/><path d="M331.64391,290.83646s-2.83631-17.423-2.83631-20.6645-12.56077-5.26742-12.56077-5.26742-9.72447-10.94-11.7504-9.31928-32.82008,22.28524-37.68231,25.12154-10.12966,14.99189-9.72447,15.80226,25.52673,53.48458,25.52673,53.48458,10.94,32.4149,3.24149,49.43272-17.423,50.64827-3.24149,57.53644,83.06317,21.88,95.62394,8.91409,21.47487-16.61263,24.71636-16.61263-13.37115-56.32088-9.72447-61.5883-1.62075-38.0875-1.62075-38.0875l18.63857-52.269s-1.62075-29.17341-38.49269-35.65639L349.699,250.968Z" transform="translate(-156 -131.23696)" fill="#575a89"/><path d="M255.87409,456.55761s-2.02593,19.44894-2.02593,25.12154-9.72447,38.89788,4.457,42.94974,12.966-44.1653,12.966-44.1653V455.74724Z" transform="translate(-156 -131.23696)" fill="#ffb9b9"/><path d="M424.02636,438.32423s2.43112,18.63857,1.21556,22.69043,11.7504,39.30306-5.67261,41.329-12.966-42.13937-12.966-42.13937v-21.88Z" transform="translate(-156 -131.23696)" fill="#ffb9b9"/><path d="M252.22741,574.0616l11.7504-62.39867h3.64668a24.5429,24.5429,0,0,1,3.64668,23.5008c-4.86224,13.77633-8.9141,38.89787-8.9141,38.89787Z" transform="translate(-156 -131.23696)" fill="#2f2e41"/><path d="M263.16744,291.64683l-6.07779,4.86223s-8.10372,128.84921-6.07779,138.57368-7.29336,23.5008.81037,24.71636,17.82819,6.483,22.28524,3.24149,5.26742-14.99189,6.88816-17.82819,4.457-36.46676,4.457-36.46676,8.50891-33.63045,3.24149-58.752-10.12965-50.64827-10.12965-50.64827Z" transform="translate(-156 -131.23696)" fill="#575a89"/><path d="M391.61146,281.51718,410.25,297.31944l14.18151,82.658s8.9141,64.4246,2.02594,65.235-17.423-1.21556-21.88006,0-8.10372-2.02594-8.10372-2.02594-4.86224-25.93191-4.86224-26.3371S388.37,386.86558,388.37,386.86558l-4.05186-33.22526,6.07779-36.46676Z" transform="translate(-156 -131.23696)" fill="#575a89"/><path d="M303.68606,664.01294s-2.63371,7.56482-6.26416,17.86464c-1.68559,4.78931-3.58594,10.17425-5.543,15.66451-1.26012,3.54944-2.54048,7.14344-3.80065,10.65234-2.00971,5.61184-3.96273,11.00082-5.66855,15.628-2.25286,6.10616-4.08025,10.89141-5.06077,13.124-4.457,10.12966-85.89947-6.07779-92.38245-10.12965s-8.10373-17.8282-8.9141-37.27713c-.00405-.1013-.00811-.2026-.00811-.30389-.10535-3.92626.89545-9.77309,2.56892-16.63289.83465-3.42788,1.83951-7.107,2.95783-10.92788,1.49921-5.12562,3.201-10.49837,4.9797-15.84683,7.64185-22.97406,16.64914-45.42947,16.64914-45.42947s15.80226-10.94,21.47486-18.23338,36.872-12.966,36.872-12.966c8.91409.40519,29.1734,34.846,37.27713,45.38085S303.68606,664.01294,303.68606,664.01294Z" transform="translate(-156 -131.23696)" fill="#3f3d56"/><circle cx="102.30521" cy="467.541" r="3.64668" fill="#2f2e41"/><circle cx="107.97781" cy="471.59286" r="2.02593" fill="#2f2e41"/><path d="M297.4219,681.87758c-1.68559,4.78931-3.58594,10.17425-5.543,15.66451L181.57105,661.675c1.49921-5.12562,3.201-10.49837,4.9797-15.84683Z" transform="translate(-156 -131.23696)" fill="#f2f2f2"/><path d="M288.07828,708.19443c-2.00971,5.61184-3.96273,11.00082-5.66855,15.628L176.0443,689.23578c-.10535-3.92626.89545-9.77309,2.56892-16.63289Z" transform="translate(-156 -131.23696)" fill="#f2f2f2"/><path d="M258.30521,599.58833s8.10372,35.65639,3.24149,67.26091,12.15558,61.18312,12.15558,61.18312" transform="translate(-156 -131.23696)" fill="none" stroke="#2f2e41" stroke-miterlimit="10" stroke-width="3"/><path d="M263.97781,602.42464s-15.80226,57.53644-16.20744,65.64016-6.88817,66.04535-14.99189,72.12314" transform="translate(-156 -131.23696)" fill="none" stroke="#2f2e41" stroke-miterlimit="10" stroke-width="3"/><path d="M308.55947,195.98021s-6.32846-16.454,2.84781-21.83318l2.53138,7.27773s23.09887-13.92261,29.1109-10.75838l-5.69561,7.59415s26.89594,0,28.79448,10.442l-9.49269.31642s10.12554,6.64488,10.442,17.40326l-20.25106,1.26569,9.8091,5.69561s-36.705,5.06276-45.56489-9.49269Z" transform="translate(-156 -131.23696)" fill="#2f2e41"/><path d="M303.07828,196.63067s7.29335,14.5867,17.01782,10.94,0-17.01782,0-17.01782l-6.483-3.24149Z" transform="translate(-156 -131.23696)" fill="#2f2e41"/><path d="M932,426.75091,799.74956,261.48738A44.40268,44.40268,0,0,1,778.3615,272.287c-24.89751,4.90336-49.21219-12.0988-54.30837-37.97538a47.96607,47.96607,0,0,1,16.55848-46.72451L695.518,131.237,438.61481,350.80025l236.482,295.514Z" transform="translate(-156 -131.23696)" fill="#f2f2f2"/><circle cx="611.6739" cy="95.91464" r="37.28363" fill="#f2f2f2"/><rect x="539.17344" y="391.09034" width="17.448" height="50.7929" transform="translate(-281.46197 427.51701) rotate(-49.17044)" fill="#4ecca3"/><rect x="784.05171" y="628.18934" width="17.448" height="45.02318" transform="translate(-373.90779 693.8884) rotate(-49.17044)" fill="#4ecca3"/><path d="M843,531.04734V532.071q-.03493,3.85593-.221,7.67709a170.99032,170.99032,0,0,1-341.41084,2.23332q-.349-5.42629-.349-10.934a170.14342,170.14342,0,0,1,31.44133-98.83715q2.46012-3.4896,5.118-6.85119c1.22134-1.55872,2.47762-3.08251,3.74554-4.59465a171.02253,171.02253,0,0,1,238.29313-22.61261c2.05889,1.66336,4.08285,3.38488,6.06023,5.14132q2.373,2.11125,4.66444,4.3155A170.52787,170.52787,0,0,1,842.40676,516.6702Q843,523.78892,843,531.04734Z" transform="translate(-156 -131.23696)" fill="#3f3d56"/><path d="M672.0096,723.55694c-106.14995,0-192.5096-86.35965-192.5096-192.5096a191.88044,191.88044,0,0,1,51.366-130.9151l4.26317,3.95647A186.0788,186.0788,0,0,0,485.316,531.04734c0,102.9432,83.7504,186.6936,186.6936,186.6936a185.217,185.217,0,0,0,134.02586-56.72532l4.1757,4.04849A190.98693,190.98693,0,0,1,672.0096,723.55694Z" transform="translate(-156 -131.23696)" fill="#4ecca3"/><rect x="495.072" y="588.24878" width="48.8544" height="48.8544" fill="#4ecca3"/><path d="M537.57858,425.359a.95129.95129,0,0,1,.23264.13959c.91892.75608-.23264,2.21008-.09306,3.40817.16285,1.53543,2.21008,1.87276,3.75714,2.024,1.54705.16285,3.50123,1.40747,2.76841,2.78005-3.88509,1.33768-7.8167.02326-11.78321-1.50053a170.1436,170.1436,0,0,0-31.4413,98.83711q0,5.51356.349,10.93408a4.41991,4.41991,0,0,0,1.05851.57c1.1632.442,2.51251.3606,3.58266.98872.84913.50018,1.4191,1.38421,2.26824,1.84949,2.43109,1.32605,5.80437-1.22136,8.07261.36059a20.85731,20.85731,0,0,1,1.66337,1.69828c2.09376,1.81459,5.53683.59323,7.95629,1.95417,1.55869.8724,2.3613,2.6172,3.1988,4.19915,2.08213,3.95488,5.45541,7.84,9.91046,8.154a26.68761,26.68761,0,0,1,4.21079.13958c1.37257.31406,2.72189,1.51216,2.50088,2.89637-.38386,2.38456.791,4.99013.47691,7.37469-.57,4.362-6.74656,6.26964-7.27,10.63164a26.26422,26.26422,0,0,1-.16285,2.87311c-.27917,1.13993-1.13993,2.07049-1.44237,3.21043-.5816,2.15192.96546,4.30384,2.6521,5.74621,1.69827,1.454,3.72224,2.71025,4.6528,4.73422.97709,2.15192.50018,4.6528.81424,6.99083.69792,5.10645,5.10645,8.88685,9.64293,11.32957a10.06848,10.06848,0,0,1,3.76877,2.74515c1.1632,1.68664,1.04688,3.90836,1.44236,5.92069.95383,4.92034,5.09482,8.97991,5.21114,13.9933.08142,3.571-1.896,6.80472-3.08248,10.16637a23.46244,23.46244,0,0,0-1.05851,10.9806,171.80947,171.80947,0,0,0,21.08881,15.29608,6.14415,6.14415,0,0,0,.8724-1.95417,3.86492,3.86492,0,0,0-1.803-4.00141,9.56227,9.56227,0,0,0,3.33839-2.14029,3.27477,3.27477,0,0,0,.60486-3.699c2.04723.2559,4.47832.38385,5.82763-1.18647,1.08178-1.25625,1.012-3.14064.5816-4.73422a19.52515,19.52515,0,0,1-1.1632-4.81565,86.62334,86.62334,0,0,0,14.21431-.47691,9.22747,9.22747,0,0,0-4.32711-5.42051c2.14029-.3606,4.08284-2.91964,4.75749-4.9785a12.68072,12.68072,0,0,0,.09306-6.4325,3.42171,3.42171,0,0,1-.06979-1.675,3.29552,3.29552,0,0,1,1.69827-1.64012q5.30419-3.0534,10.60838-6.09516a6.396,6.396,0,0,0,1.69827-1.24463c1.105-1.31441.9422-3.28022.37223-4.89707s-1.47727-3.14064-1.69827-4.83891c-.6514-5.08319,4.79238-8.73563,6.63024-13.528a20.31775,20.31775,0,0,0,1.00035-5.92069c.15121-2.16355.16285-4.66443-1.4889-6.04864-1.59358-1.33768-4.0712-1.03524-5.73457-2.27987-1.5238-1.13993-2.04724-3.33838-3.71061-4.25731-1.51216-.8375-3.39655-.30243-5.08319-.69792-2.95452-.68629-4.81564-4.09446-7.84-4.40853-1.69828-.18611-3.62919.65139-5.025-.33733-1.233-.884-1.27952-2.64046-1.51216-4.12936a11.53517,11.53517,0,0,0-9.3056-9.32886c-1.75643-.27917-3.66408-.17448-5.16461-1.13994-1.51216-.97708-2.19844-2.80331-3.39654-4.16425-1.90765-2.17519-4.932-2.95453-7.75854-3.61755q-5.75784-1.3435-11.504-2.69863c-2.0356-.48854-4.66443-.74445-5.76947,1.04688a7.86927,7.86927,0,0,0-.67466,2.15192,6.67341,6.67341,0,0,1-6.258,4.69933,7.39431,7.39431,0,0,0-4.35036-3.37328,27.44775,27.44775,0,0,1-3.53613-.8375,4.95427,4.95427,0,0,1-2.14029-6.87452,6.17223,6.17223,0,0,0-1.05851-7.40958c-1.95418-1.75643-4.78075-2.18682-7.40959-2.01234-.68628-1.50052.46528-3.18716,1.69828-4.28057,1.24462-1.08178,2.74515-2.15192,3.01268-3.7804.43039-2.559-2.8382-4.50159-5.31582-3.74551-2.47762.76772-4.05957,3.17554-5.10645,5.54847a16.73353,16.73353,0,0,1-2.05886,3.94325,4.042,4.042,0,0,1-3.90835,1.60521c-2.04724-.52344-2.82658-2.95453-3.28023-5.00176a32.61424,32.61424,0,0,1-1.09341-8.38667,10.948,10.948,0,0,1,3.16391-7.63059c3.38491-3.11738,8.596-2.815,13.16742-2.31477a3.35392,3.35392,0,0,1,.349-4.42016,5.02569,5.02569,0,0,1,4.55975-1.11667,6.256,6.256,0,0,1,3.52449,2.10539c1.30279,1.582,1.675,3.73387,2.6521,5.5252.98872,1.803,3.1988,3.33838,5.00176,2.37293,1.57032-.83751,1.81459-3.00106,1.43073-4.73423-.39548-1.72153-1.22136-3.40817-1.08177-5.17624.26753-3.36164,3.76877-5.39724,6.85125-6.78145s6.607-3.257,7.09552-6.607a6.17389,6.17389,0,0,1,.37222-1.90765,3.72933,3.72933,0,0,1,1.38421-1.30278c8.99153-5.944,18.14592-11.96933,28.42861-15.21466.53507-.17448.59323.01164,1.13993-.11632.76771-.442.25591-1.66337-.47691-2.15192s-1.7099-.8724-1.896-1.73316c-.128-.62813.24428-1.25626.33733-1.896a2.36721,2.36721,0,0,0-3.10574-2.39619c-.82587-1.09341.80261-2.3613,2.12865-2.73352a58.13863,58.13863,0,0,1,12.15544-1.97744,2.16447,2.16447,0,0,1,1.38421.23264,1.645,1.645,0,0,1,.10469,2.25661,12.73993,12.73993,0,0,1-1.84949,1.68664,5.08082,5.08082,0,0,0-1.32605,5.10644c2.15192,1.09341,4.47832,2.22172,6.86288,1.83786,2.37293-.38386,4.47832-3.05922,3.36165-5.18787-1.03525-1.98907-4.16425-2.44272-4.69933-4.61791-.62812-2.5474,2.9778-4.81564,2.16356-7.30489-.349-1.09341-1.44237-1.7448-2.27988-2.52415a6.882,6.882,0,0,1-1.50052-7.60732,8.66758,8.66758,0,0,1-7.58407-2.37293c-1.81459-1.82623-3.257-4.72259-5.83926-4.62954-2.3613.06979-4.3969,2.82658-6.607,1.98907-.5467-.20937-1.11667-.62812-1.64011-.38385a1.35575,1.35575,0,0,0-.6165,1.012c-.55833,2.687.40712,5.74621-1.05851,8.07261-1.59358,2.52414-5.28093,2.8731-7.21184,5.153-1.04688,1.233-1.454,2.89636-2.41945,4.19915s-3.00106,2.14029-4.16426,1.00035a5.73208,5.73208,0,0,0-1.55869-6.9792,14.98861,14.98861,0,0,0-3.44307-1.675,20.43352,20.43352,0,0,1-3.85019-2.14029,3.81527,3.81527,0,0,1-1.40747-1.51216,3.47684,3.47684,0,0,1,.093-2.39619,9.79355,9.79355,0,0,1,7.78181-6.44413c1.53542-.20937,3.32675-.13958,4.35037-1.31441.53507-.6165.81424-1.55869,1.60521-1.803a2.34021,2.34021,0,0,1,1.47727.17448c1.91928.67465,3.82693,1.34931,5.74621,2.024a3.93612,3.93612,0,0,0,2.04723.33732,1.37705,1.37705,0,0,0,1.19809-1.454c-.18611-.95382-1.65174-1.40747-1.51216-2.37292a1.50855,1.50855,0,0,1,.47692-.81424,20.55375,20.55375,0,0,1,16.29643-6.4325c.72118,1.1981-.41875,2.60557-1.38421,3.61755-.95382,1.02362-1.72154,2.83821-.55834,3.61755a3.06427,3.06427,0,0,0,1.5238.349,13.29118,13.29118,0,0,1,4.0712,1.233c1.98907.86076,3.94324,1.81459,5.85089,2.8382a7.37635,7.37635,0,0,1,.13959-3.76876,2.55938,2.55938,0,0,1,3.02432-1.64012c1.13993.442,1.72153,1.95418,2.94289,2.09376,1.61685.18612,2.25661-2.21008,1.582-3.699s-2.024-2.72189-2.12865-4.362c-.08143-1.09341.33733-2.45435-.53507-3.11738a2.31414,2.31414,0,0,0-1.03525-.37222q-10.95735-2.00652-21.92632-4.02467c-1.30279-.24428-3.17554-.05816-3.2337,1.25625-.03489.74445.62813,1.47727.33733,2.15192-.31406.72119-1.33768.663-2.08213.91893a2.827,2.827,0,0,0-1.62848,2.98942,8.14854,8.14854,0,0,0,1.37258,3.36165c-1.43074-.59323-3.58266-.69792-5.01339-1.30278a19.296,19.296,0,0,0-1.25626-4.82728,1.70385,1.70385,0,0,0-2.22171-1.37258c-1.88439.2908-3.76877.57-5.65315.86077a2.18661,2.18661,0,0,0-1.29116.50018c-.73281.77934-.01163,2.024-.03489,3.09411a2.89958,2.89958,0,0,1-2.245,2.50088,8.46226,8.46226,0,0,1-3.58265-.04653c-2.64047-.40712-5.2693-.81424-7.90976-1.22136a12.95718,12.95718,0,0,0,5.97884-4.00141c1.04688-1.233,1.60522-3.53613.09306-4.11773a3.60875,3.60875,0,0,0-1.37258-.10468c-3.58265.02326-6.40923-2.96616-9.75924-4.234a9.59326,9.59326,0,0,0-3.29186-.60487Z" transform="translate(-156 -131.23696)" fill="#4ecca3" class="pat1"/><path d="M842.779,539.74807a4.20005,4.20005,0,0,1-3.55939,1.68664c-3.64082-.31406-5.17624-5.56009-8.78216-6.15333a1.40537,1.40537,0,0,0-.95382.09306c-.53508.2908-.62813,1.012-.663,1.61685-.15121,3.001-.27917,6.11843.89567,8.88685,1.7099,4.04793,6.14169,7.44448,5.21113,11.73668-5.00176-2.31476-7.60733-7.933-8.78216-13.31864-1.18646-5.38561-1.37257-11.03876-3.4896-16.13358-1.61685,2.05886-4.99013.36059-6.45576-1.803-1.39584-2.04723-2.25661-4.42016-3.60592-6.50229-1.34931-2.07049-3.41981-3.93161-5.88579-4.04793-2.59394-.11632-4.85054,1.66337-6.828,3.35a15.80206,15.80206,0,0,0-4.24568,4.72259c-1.38421,2.79168-1.02362,6.07191-1.09341,9.17765-.06979,3.35-.77935,6.89778-3.07085,9.36376-2.2915,2.45435-6.51392,3.31512-9.03806,1.09341a10.1961,10.1961,0,0,1-2.52415-4.54811,221.31754,221.31754,0,0,1-6.83961-24.40394c-.41876,1.88439-2.08213,4.31547-3.66408,3.21043a3.26712,3.26712,0,0,1-.83751-1.0934c-2.95453-4.99013-8.40993-7.99119-13.93513-9.79415-5.51357-1.79133-11.31794-2.62883-16.77335-4.60627a42.88523,42.88523,0,0,1-8.71237-4.33874,6.86049,6.86049,0,0,0-.41875,7.00247,5.60935,5.60935,0,0,0,6.30455,2.64046c1.20972-.39549,2.23334-1.233,3.43144-1.65174,1.19809-.40712,2.81494-.20938,3.33838.95382.51181,1.105-.2559,2.44272.12795,3.60592.57,1.75643,3.2337,1.896,4.16426,3.50123a3.241,3.241,0,0,1-.8724,3.74551,15.67623,15.67623,0,0,1-3.51287,2.16355c-3.90835,2.17518-6.6884,5.88579-10.1082,8.77053-3.41981,2.89637-8.24709,5.00176-12.31829,3.15227.96545-4.92034-4.88544-8.52626-5.96722-13.42333-.36059-1.61685-.17448-3.32675-.67465-4.89707-.73282-2.27987-2.75679-3.83856-4.40853-5.5601a21.85517,21.85517,0,0,1-5.99048-15.87768c.093-2.024.46528-4.08283,0-6.06027-.45365-1.96581-2.09376-3.87345-4.11773-3.792-4.6179.20938-10.44554.55834-12.865-3.38491-.8724-1.40747-1.24463-3.46634.01163-4.54811a4.39171,4.39171,0,0,1,3.33838-.57c3.478.33733,6.94431.68629,10.42228,1.02361,2.43108.23264,5.05992.43039,7.15368-.8375s3.001-4.6528,1.05851-6.15333c-1.40747-1.09341-3.94325-1.03525-4.362-2.76841-.33733-1.454,1.26789-3.09412.39549-4.31548-.6165-.86076-2.01234-.62812-2.86148.02327a18.69439,18.69439,0,0,1-2.40782,2.10539c-1.66338.86077-3.64082.0349-5.43214-.52344s-4.18752-.60486-5.04829,1.05851c-.97709,1.84949.84913,4.29221-.10469,6.15333-1.27952,2.45435-5.58336,1.05851-7.37469,3.17554-2.04723,2.41945,1.39584,6.04864.70955,9.14275a5.69965,5.69965,0,0,1-5.61825-.31407,5.439,5.439,0,0,1-2.34967-5.07155c.16285-1.39584.89567-2.82657.40712-4.141a4.83418,4.83418,0,0,0-2.45435-2.245q-5.05992-2.80912-10.11984-5.595c-.94219,1.7448.24427,3.89672,1.73317,5.21114,1.47726,1.30278,3.33838,2.2915,4.31547,4.013a5.27443,5.27443,0,0,1-1.97744,6.95593,1.227,1.227,0,0,1-1.012.17448,1.40226,1.40226,0,0,1-.65139-.8724c-1.7797-4.57137-4.46669-9.073-8.74727-11.45752-4.29221-2.39619-10.44553-1.896-13.26048,2.117-.663.95382-1.11667,2.04723-1.69827,3.05921-3.08248,5.36236-9.71272,7.89813-15.90094,7.73528a3.06444,3.06444,0,0,1-1.73317-.40712c-1.00035-.68628-.95383-2.15192-.80261-3.36164.221-1.70991.43038-3.40818.65139-5.11808a4.099,4.099,0,0,1,1.12831-2.80332c1.15156-.90729,2.80331-.33732,4.26894-.36059a5.37747,5.37747,0,0,0,4.89707-3.7804,6.07682,6.07682,0,0,0-1.69827-6.04864c-.663-.62813-1.55869-1.4191-1.20973-2.26824a1.885,1.885,0,0,1,1.31442-.884c2.6172-.75608,5.39725-.95382,7.96792-1.86112,2.5823-.89566,5.08318-2.73352,5.69968-5.39725.18611-.81424.26753-1.803,1.00035-2.21008a3.23975,3.23975,0,0,1,1.1632-.23264,5.66134,5.66134,0,0,0,4.85054-5.89742c1.233-.86077,2.96616-.221,4.16426.69792,1.18646.91893,2.245,2.12865,3.699,2.52414,2.71025.74445,5.32745-1.66337,8.1424-1.675,1.18646,0,2.40782.41876,3.51286.01164,1.1283-.40712,1.803-1.5238,2.66373-2.34967.8724-.8375,2.38456-1.33768,3.18717-.442-.23264-1.68664-.45365-3.36165-.68629-5.03666a9.90135,9.90135,0,0,0,8.061-1.46563c-2.93126-.98872-5.85089-1.97744-8.78216-2.96616a1.89514,1.89514,0,0,1-.82587-.442c-.63976-.68629,0-1.75643.51181-2.53577,1.24462-1.87276,1.454-4.95524-.59323-5.8858-1.39584-.63976-2.98943.128-4.32711.8724-2.14028,1.18647-4.28057,2.38456-6.42086,3.571-.19774,1.22136,1.29115,1.91928,2.21008,2.73352a3.70647,3.70647,0,0,1-2.41946,6.479,4.64331,4.64331,0,0,1,.82588,3.92c-1.43074.10468-2.87311.20937-4.31548.31406a1.85325,1.85325,0,0,1-1.39584-.27917c-.46528-.40712-.39548-1.1283-.5118-1.73317a3.74393,3.74393,0,0,0-3.16391-2.75678,10.9223,10.9223,0,0,0-4.40853.40712,2.68616,2.68616,0,0,1-1.90764-.04653,1.903,1.903,0,0,1-.74445-.95382,4.86365,4.86365,0,0,1,.97709-4.67607,26.76673,26.76673,0,0,1,3.67571-3.38491,21.428,21.428,0,0,0,6.386-9.8872c2.37292-1.00035,4.82728-2.34966,7.21184-3.35a28.80944,28.80944,0,0,1,5.99048-2.01234,28.30911,28.30911,0,0,1,5.87416-.27917c2.67536.04653,5.36235.09306,8.03771.15122a19.34408,19.34408,0,0,1,7.03736,1.012c2.19845.9073,4.141,2.87311,4.29221,5.246a1.61075,1.61075,0,0,1-.52344,1.47727,1.885,1.885,0,0,1-1.012.23264c-2.22171.06979-3.1639.62813-5.38561.70955,1.40747,1.50053,2.98942,3.08248,5.03665,3.35,3.60592.46528,6.19986-3.2686,7.86323-6.51392a3.17423,3.17423,0,0,0,3.31512,2.94289,6.685,6.685,0,0,0,2.50088-.97709,49.19541,49.19541,0,0,1,23.32216-6.02537,2.51131,2.51131,0,0,1,1.91928-2.76842c1.66338-.32569,3.15228,1.105,3.95488,2.59394.791,1.48889,1.29116,3.21043,2.57068,4.3271,1.26788,1.11667,3.72224,1.05851,4.22241-.5467.48855-1.54706-1.1283-2.87311-2.466-3.792-1.34931-.9073-2.75679-2.59394-1.84949-3.94325,6.83962-1.52379,13.73739-3.036,20.75149-3.33839a8.83055,8.83055,0,0,0,3.4896-.60486,2.71244,2.71244,0,0,0,1.62848-2.8731,7.93083,7.93083,0,0,1-8.25872-3.11738c7.20021-.59323,14.73774-1.11667,21.65878.50018l6.06027,5.14134c-1.15156,1.1981-2.687,2.3264-1.84948,3.5245a2.5785,2.5785,0,0,0,2.12865.73281c1.46563.02327,2.93127.05816,4.38527.05816a170.52828,170.52828,0,0,1,52.06483,109.06163c-2.44272-.093-4.6877,3.00106-4.37363,5.69968.37222,3.129,2.62883,5.64152,4.24568,8.34015A12.70881,12.70881,0,0,1,843,532.071Z" transform="translate(-156 -131.23696)" fill="#4ecca3" class="pat2"/><line y1="636.96158" x2="888" y2="636.96158" fill="none" stroke="#3f3d56" stroke-miterlimit="10" stroke-width="2"/><circle cx="366.35223" cy="65.26967" r="14.75556" fill="none" stroke="#3f3d56" stroke-miterlimit="10" stroke-width="2"/><circle cx="802.35223" cy="346.26967" r="14.75556" fill="none" stroke="#3f3d56" stroke-miterlimit="10" stroke-width="2"/><circle cx="701.61889" cy="199.26967" r="14.75556" fill="none" stroke="#3f3d56" stroke-miterlimit="10" stroke-width="2"/><circle cx="604.80775" cy="323.9214" r="16.55902" fill="#3f3d56"/><circle cx="657.99881" cy="270.69736" r="21.82779" fill="#fff"/><path d="M836.0738,379.30567a30.86,30.86,0,0,0-43.63926.54048c-11.9014,12.1999-28.89284,73.81079-28.89284,73.81079s61.17118-18.51211,73.07258-30.712A30.86,30.86,0,0,0,836.0738,379.30567Zm-32.06129,32.86542a14.301,14.301,0,1,1,20.22307-.25047A14.301,14.301,0,0,1,804.01251,412.17109Z" transform="translate(-156 -131.23696)" fill="#57b894"/></svg>
          
        </div>
      
      <div class="title">
        <h1 class="text"> 
          Find Your   
        </h1>
        <div class="brand">
          <h1>
          <span>H</span>
          <span>o</span>
          <span>t</span>
          <span>e</span>
          <span>l</span>
          </h1>
        </div>
      </div>
      </div>
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Type to Search">
        <select class="form-control">
          <option>select</option>
          <option>params 1</option>
          <option>params 2</option>
          <option>params 3</option>
        </select>
        <button type="button" class="btn">Search</button>
      </div>
    </div>
  </form>
</section>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&family=Roboto:wght@400;500;700&display=swap');
*{
  padding: 0;
  margin: 0;
  box-sizing:border-box;
}
.data-search{
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #232931;
  font-family: "roboto", cursive;
}

.input-group{
  display: flex;
  border-radius:7px;
  overflow: hidden;
}

.form-control, .btn{
  height:40px;
  border: none;
  outline:none;
  font-size: 1em;
  font-weight: 500;
  padding: 0 7px;
  background: #393e46;
  transition: .3s ease;
  color: #4ecca3;
}

input.form-control{
  width: 350px;
}

.btn{
  background-color: #4ecca3;
  color:#232931;
  cursor:pointer;
}

select:hover{
  box-shadow: inset 0 0 100px rgba(0,0,0,.2);
}

.btn:hover{
  box-shadow: inset 0 0 100px rgba(255,255,255,.2);
}

.form-control:focus{
  box-shadow: inset 0 0 100px rgba(0,0,0,.2);
}
.pat1{
  animation:changeColorPath1 1.5s linear infinite;
}
.pat2{
  animation:changeColorPath2 1.5s linear infinite;
}
.form-control::placeholder{
  color: #4ecca3;
}

.title .text{
  font-size: 3em;
  animation:changeColor 1.5s linear infinite;
}
.title .brand h1{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
}
.title{
  text-align: center;
  margin: -20px 0 10px 0;
  display: flex;
  justify-content: center;
}

.title .brand h1{
  font-size: 3em;
  color:#393e46;
}
.title .brand h1 span{
  transition: .15s ease;
}
.title .brand h1 span:hover{
  color: #4ecca3;
}

.head{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction:column;
}
select:focus{
  
}
.head .svg{
  width: 200px;
  overflow:hidden;
}

.head .svg svg{
  width: 100%;
  animation: popUp 1s linear;
}

@keyframes popUp {
  0%{
    transform: translateY(150px);
    opacity: 0;
  }
  100%{
    transform: translateY(0);             opacity: 1;
  }
}
@keyframes changeColor{
  0% {
    color:#393e46;
  }
  50% {
    color:#4ecca3;
  }
  100% {
    color:#393e46;
  }
}
@keyframes changeColorPath1{
  0% {
    fill:#393e46;
  }
  50% {
    fill:#c61951;
  }
  100% {
    fill:#393e46;
  }
}@keyframes changeColorPath2{
  0% {
    fill:#393e46;
  }
  50% {
    fill:#4ecca3;
  }
  100% {
    fill:#393e46;
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console