Untitled

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <title>Beautiful Bangladesh</title>
  <style>
    body {
      background: #f39c12;
      }
      .center-on-page {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      }
      h1 {
      text-align: center;
      }
      /* Reset Select */
      select {
      -webkit-appearance: none;
      -moz-appearance: none;
      -ms-appearance: none;
      appearance: none;
      outline: 0;
      box-shadow: none;
      border: 0 !important;
      background: #2c3e50;
      background-image: none;
      }
      /* Custom Select */
      .select {
      position: relative;
      display: block;
      width: 20em;
      height: 3em;
      line-height: 3;
      background: #2c3e50;
      overflow: hidden;
      border-radius: .25em;
      }
      select {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0 0 0 .5em;
      color: #fff;
      cursor: pointer;
      }
      select::-ms-expand {
      display: none;
      }
      /* Arrow */
      .select::after {
      content: '\25BC';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      padding: 0 1em;
      background: #34495e;
      pointer-events: none;
      }
      /* Transition */
      .select:hover::after {
      color: #f39c12;
      }
      .select::after {
      -webkit-transition: .25s all ease;
      -o-transition: .25s all ease;
      transition: .25s all ease;
      }
      body {
      background-image: url("https://i0.wp.com/www.knoxalliance.store/wp-content/uploads/2017/05/light-color-background-images-for-website-top-hd-images-for-free-background-for-website-in-light-color-1-1024x640.jpg");
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      }
      .nav-icons:hover{
      transition: all 1s;
      transform: scale(1.1);
      opacity: 1;
      cursor: pointer;
      }
      .pick{
      color:black;
      }
      .pick:hover{
      color: black;
      }
      .pick #cls {
      display: flex;
      flex-flow: column wrap;
      justify-content: center;
      }
      div.gallery {
      position: relative;
      top: 100px;
      left: 7.5%;
      margin: 5px;
      border: 1px solid #ccc;
      float: left;
      height: 300px;
      width: 300px;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
      transition: 0.9s;
      }
      div.gallery:hover {
      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.5);
      }
      /* sunan start */
      p.rName{
      padding-left: 10px;
      font-family: 'Open Sans', sans-serif;
      font-size: 30px;
      font-weight:700;
      color:  #003366;
      }
      p.location{
      padding-left: 10px;
      font-family: 'Open Sans', sans-serif;
      font-size: 25px;
      color: #1d2951;
      }
      p.cuisine{
      padding-left: 10px;
      font-family: 'Open Sans', sans-serif;
      font-size: 20px;
      color: #1d2951;
      }
      p.rating{
      padding-left: 10px;
      font-family: 'Open Sans', sans-serif;
      font-size: 20px;
      color: #1d2951;
      }
      /* sunan end */
      div.filter{
      position: relative;
      top: 20%;
      left: 60%;
      }
      div.filter.dropbtn {
      background-color: #3498DB;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
      cursor: pointer;
      }
      /* Dropdown button on hover & focus */
      div.filter.dropbtn:hover, div.filter.dropbtn:focus {
      background-color: #2980B9;
      }
      /* The container <div> - needed to position the dropdown content */
      div.filter.dropdown {
      position: relative;
      display: inline-block;
      }
      /* Dropdown Content (Hidden by Default) */
      div.filter.dropdown-content {
      display: none;
      position: absolute;
      background-color: #f1f1f1;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
      }
      /* Links inside the dropdown */
      div.filter.dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      }
      /* Change color of dropdown links on hover */
      div.filter.dropdown-content a:hover {background-color: #ddd}
      /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
      div.filter.show {display:block;}
    </style>
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-dark" style="background-color: #2c3e50;"><a class="navbar-brand" href=""><img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/facebook/105/camera_1f4f7.png" style="height:30px;margin-left:60px;" alt="Home"> Beautiful Bangladesh</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active"><a class="nav-link" href="#">
            <!-- there is a use of form-->
            <div style="color:white;">
              <input class="form-control form-rounded" type="text" placeholder="Where to" style="border-radius: 1rem;width:120px;text-align:center;background-color:#fff;opacity: 0.5;font-style:white;">
            </div>
            <!-- there is a use of form--><span class="sr-only">(current)</span>
          </a></li>
      </ul>
      <ul class="navbar-nav navbar-right" style="margin-right: 100px;">
        <li>
          <div class="nav-item nav-link nav-icons"><i class="fas fa-hotel" style="color: white;opacity: 0.6;font-size: 17px;"> hotels</i></div>
        </li>
        <li>
          <div class="nav-item nav-link nav-icons"><i class="fas fa-bus-alt" style="color:white;opacity: 0.6;font-size: 17px;"><a href="/user/transportations"><b style="color: grey;">transportations </b></a></i></div>
        </li>
        <li>
          <div class="nav-item nav-link nav-icons"><i class="fas fa-utensils" style="color:white;opacity: 0.6;font-size: 17px;"><a href="/user/restaurants"><b style="color: grey;"> restaurants</b></a></i></div>
        </li>
        <li>
          <div class="nav-item nav-link nav-icons"><i class="fas fa-clipboard-list" style="color:white;opacity: 0.6;font-size: 17px;"><a href="/user/thingsToDo"><b style="color: grey;">things to do</b></a></i></div>
        </li>
        <li>
          <div class="nav-item nav-link nav-icons"><i class="fas fa-bed" style="color: white;opacity: 0.6;font-size: 17px;"><a href="/user/payingGuest"><b style="color: grey;"> pg</b></a></i></div>
        </li>
      </ul>
    </div>
  </nav><br>
  <div class="container">
    <form action="/user/restaurants/undefined" method="POST">
      <div class="row d-flex justify-content-around">
        <div class="col-md-3 select">
          <select name="place">
            <option value="Place">Place</option>
            <option value="Bandarban District">Bandarban District</option>
            <option value="Rangamati">Rangamati</option>
            <option value="Khagrachari District">Khagrachari District</option>
            <option value="Patenga beach">Patenga beach</option>
            <option value="Foys Lake">Foy's Lake</option>
            <option value="Heritage Park">Heritage Park</option>
            <option value="Bichnakandi">Bichnakandi</option>
            <option value="Jaflong">Jaflong</option>
            <option value="Madhobpur Lake">Madhobpur Lake</option>
            <option value="Ratargul Swamp Forest">Ratargul Swamp Forest</option>
            <option value="Lalbagh Fort">Lalbagh Fort</option>
            <option value="Ahsan Manzil">Ahsan Manzil</option>
            <option value="Somapura Mahavihara">Somapura Mahavihara</option>
            <option value="Mahastangar">Mahastangar</option>
            <option value="Kantajew Temple">Kantajew Temple</option>
            <option value="Kuakata Beach">Kuakata Beach</option>
            <option value="Cox Bazar">Cox's Bazar</option>
            <option value="St. Martin Island">St. Martin Island</option>
          </select>
        </div>
        <div class="col-md-2">
          <button class="btn btn-primary btn-lg" type="submit">Search</button>
        </div>
      </div>
    </form>
  </div>


  <div class="gallery">
        <div class="desc">
            <p class="rName">Owner Name</p>
            <p class="location">location</p>
            <p class="cuisine">No of rooms</p>
            <p class="rating">4.4</p>
        </div>
    </div>
</body>

</html>