@extends('layouts.app')
@section('title', 'Hostel')

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>Hostel
    </h1>
    <!-- <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
        <li class="active">Here</li>
    </ol> -->
</section>

<!-- Main content -->
<style>
  



.hostel-homepage-text {
  top: 104px;
  left: 109px;
  color: rgba(77, 76, 76, 1);
  height: auto;
  position: absolute;
  font-size: 25px;
  font-style: Bold;
  text-align: center;
  font-family: Poppins;
  font-weight: 700;
  line-height: normal;
  font-stretch: normal;
  text-decoration: none;
}


.hostel-homepage-menu1 {
  top: 38.804595947265625px;
  left: 0px;
  width: 271px;
  height: 172px;
  position: absolute;
  border-radius: 12px;
}
.hostel-homepage-colorbox {
  top: 0px;
  left: 23.712499618530273px;
  width: 224px;
  height: 104px;
  position: absolute;
  border-radius: 12px;
}
.hostel-homepage-text02 {
  top: 171px;
  left: 23px;
  color: rgba(83, 81, 81, 1);
  height: auto;
  position: absolute;
  font-size: 17px;
  font-style: Light;
  text-align: center;
  font-family: Poppins;
  font-weight: 300;
  line-height: normal;
  font-stretch: normal;
  text-decoration: none;
}
.hostel-homepage-text04 {
  top: 171px;
  left: 168px;
  color: rgba(6, 164, 10, 1);
  height: auto;
  position: absolute;
  font-size: 17px;
  font-style: Light;
  text-align: center;
  font-family: Poppins;
  font-weight: 300;
  line-height: normal;
  font-stretch: normal;
  text-decoration: none;
}
.hostel-homepage-text06 {
  top: 118px;
  left: 23px;
  color: rgba(0, 0, 0, 1);
  height: auto;
  position: absolute;
  font-size: 17px;
  font-style: Light;
  text-align: center;
  font-family: Poppins;
  font-weight: 300;
  line-height: normal;
  font-stretch: normal;
  text-decoration: none;
}
.hostel-homepage-text08 {
  top: 116px;
  left: 194px;
  color: rgba(0, 0, 0, 1);
  height: auto;
  position: absolute;
  font-size: 17px;
  font-style: Light;
  text-align: center;
  font-family: Poppins;
  font-weight: 300;
  line-height: normal;
  font-stretch: normal;
  text-decoration: none;
}
.hostel-homepage-text10 {
  top: 29.10344696044922px;
  left: 55.329166412353516px;
  color: rgba(255, 255, 255, 1);
  width: 165px;
  height: auto;
  position: absolute;
  font-size: 25px;
  font-style: SemiBold;
  text-align: center;
  font-family: Poppins;
  font-weight: 600;
  line-height: normal;
  font-stretch: normal;
  text-decoration: none;
}


</style>
<section class="content">
    
    <div class="container">
          <div class=" row">
              @foreach($hostels as $row)
            <div class=" col-md-3">
              <img
                alt="Menu1147"
                src="public/external/menu1147-1rof-200h.png"
                class="hostel-homepage-menu1"
              />
              <img
                alt="colorbox148"
                src="public/external/colorbox148-sv2-200h.png"
                class="hostel-homepage-colorbox"
              />
              <span class="hostel-homepage-text02"><span>125 Bed</span></span>
              <span class="hostel-homepage-text04"><span>53 Vacant</span></span>
              <span class="hostel-homepage-text06"><span>30 Rooms</span></span>
              <span class="hostel-homepage-text08"><span>Boys</span></span>
              <span class="hostel-homepage-text10"><span>{{$row->name}}</span></span>
              <img
                alt="Line7154"
                src="public/external/line7154-cd1m.svg"
                class="hostel-homepage-line7"
              />
            </div>
            @endforeach
          </div>
          </div>

</section>
<!-- /.content -->

@endsection