SHARE
TWEET

Untitled

a guest Jan 21st, 2020 71 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. ############################################################# HTML:
  2.  
  3. <form method="get" action="{{route('search')}}" class="search" id="main-search-form">
  4.         {{--{{ csrf_field() }}--}}
  5.         <div class="search-bar">
  6.             <div class="search-forms">
  7.                 <div class="search-1">
  8.                     <input type="text" value="{{request()->get('q')}}" id="main-search" name="q"
  9.                            placeholder="Kërkoni...">
  10.                 </div>
  11.                 <div class="vertical-line"></div>
  12.                 <div class="search-2">
  13.                     <select name="country" id="vendndodhja">
  14.                         <option value="default" selected disabled>Vendndodhja</option>
  15.                         <option value="">Cdo Shtet</option>
  16.                         @foreach($countries as $country)
  17. {{--                            <option value="{{$city->id}}">{{$city->name}}</option>--}}
  18.                             <option value="{{$country->id}}" {{ (request()->get("country") == $country->id ? "selected":"")}}>{{$country->name}}</option>
  19.                         @endforeach
  20.                     </select>
  21.                 </div>
  22.                 <div class="vertical-line"></div>
  23.                 <div class="search-3">
  24.                     <select name="category" id="kategoria">
  25.                         <option value="" selected disabled>Kategoria</option>
  26.                         <option value="">Cdo Kategori</option>
  27.                         @foreach($categories_main as  $category)
  28.                             <option style="background: rgba(148,148,148,0.3);: #929292;"
  29.                                     label="{{$category->name}}" value="{{$category->slug}}"></option>
  30.  
  31.                             @foreach($category->children as $children)
  32.                                 <option value="{{$children->slug}}">{{$children->name}}</option>
  33.                             @endforeach
  34.                         @endforeach
  35.                     </select>
  36.                     {{--<p>Kategoria</p>--}}
  37.                 </div>
  38.             </div>
  39.             <div class="buton-div">
  40.                 <button id="buton-kerko" type="submit">
  41.                     <p><i class="fas fa-search mr-1"></i>Kërko</p>
  42.                 </button>
  43.             </div>
  44.         </div>
  45.     </form>
  46.  
  47. ####################################################### CSS:
  48.  
  49. #main-search-form {
  50.     margin-top: 2rem;
  51. }
  52. .search-bar {
  53.     justify-content: center;
  54.     margin-bottom: 2rem;
  55. }
  56. .search-bar, .search-forms {
  57.     display: flex;
  58.     flex-flow: row;
  59.     flex-wrap: wrap;
  60. }
  61. .search-forms {
  62.     /* display: grid; */
  63.     /* grid-template-columns: 40% 30% 30%; */
  64.     border-radius: 5px;
  65.     border: 1px solid var(--light-gray);
  66.     border-top-right-radius: 0;
  67.     border-bottom-right-radius: 0;
  68.     /* margin-right: 1em; */
  69.     overflow: hidden;
  70.     background: #ffffff;
  71.     align-items: center;
  72.     /* padding: 5px 0; */
  73.     width: 65%;
  74.     height: 42px;
  75. }
  76. .search-1, .search-2, .search-3 {
  77.     font-family: NexaLight, sans-serif;
  78.     color: var(--med-gray);
  79.     height: 100%;
  80.     display: flex;
  81.     align-items: center;
  82.     padding: 0 10px;
  83.     padding-top: 3px;
  84.     width: 33%;
  85.     font-size: 18px;
  86. }
  87. .search-1 {
  88.     padding-left: 10px;
  89. }
  90. .search-forms .vertical-line {
  91.     width: 2px;
  92.     background: var(--light-gray);
  93.     height: 80%;
  94.     align-self: center;
  95. }
  96. #main-search {
  97.     background-color: #27272700;
  98.     border: none;
  99.     color: var(--font-color);
  100.     border-right: 1px solid #fff;
  101. }
  102. #vendndodhja {
  103.     border: none;
  104.     background: #27272700;
  105.     /* padding: 10px; */
  106.     color: #91878d;
  107.     width: 100%;
  108.     height: 100%;
  109. }
  110. #kategoria {
  111.     border: none;
  112.     background: #27272700;
  113.     /* padding: 10px; */
  114.     color: #91878d;
  115.     width: 100%;
  116.     height: 100%;
  117. }
  118. #kategoria option {
  119.     font-family: NexaLight, sans-serif;
  120.     font-size: 18px;
  121. }
  122. #buton-kerko {
  123.     border-radius: 5px;
  124.     border-bottom-left-radius: 0;
  125.     border-top-left-radius: 0;
  126.     background-color: var(--main-color);
  127.     display: block;
  128.     border: none;
  129.     height: 100%;
  130.     padding: 0 25px;
  131.     color: #FFFFFF;
  132.     font-family: 'NexaLight', sans-serif;
  133. }
  134. .search p {
  135.     color: white;
  136.     /* margin-bottom: 5px; */
  137. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top