@extends("quran_project_files.quran_welcome_page")
@section("content")

    <style>

        main{

            direction: rtl;
            text-align : center;
        }

        #about_head{

            text-align : center;

        }
        #about_details{

            padding : 10px;
            width : 70%;
            margin : 50px auto;


        }
        img{

            margin :100px auto 50px auto;
            width : 300px;
            height : 300px;
            border : 3px solid;

        }

    </style>

    @foreach ($result as $item)

        @php

            $new_reader_arabic_name = str_replace("_" , " " , $item->reader_arabic_name);

        @endphp

        <img src='{{asset("$item->reader_location/$item->reader_image")}}' alt="{{$new_reader_arabic_name}}-image" width="150px" height="150px"><br>
        <h2 id="about_head">{{$new_reader_arabic_name}}</h2>
        <h3 id="about_details">{{$item->reader_about}}</h3>

    @endforeach

@stop