<template>
  <div v-if="loader">
   
    <div class="row flex justify-start items-center q-ma-md">
      <div class="col-6 col-md-6 col-sm-12 col-xs-12 text- q-pa-lg row items-end">
        <q-skeleton width="460px" height="300px" />
        <q-skeleton class="desktop-only" width="200px" height="230px" style="position: absolute;left: 320px;"/>
        <q-skeleton class="desktop-only" width="100px" height="200px"  style="position: absolute;left: 460px;"/>
      </div>
      <div class="col-6 col-md-6 col-sm-12 col-xs-12 text- q-pa-lg">
        <q-skeleton  width="40%" height="40px"/>
        <div class="q-pa-md text-body1 text-grey-8 bullets-grey">
              <ul>
                <li>
                  <q-skeleton  width="99%" height="20px" />
                </li>
                <li>
                  <q-skeleton  width="50%" height="20px" />
                </li>
                <li>
                  <q-skeleton  width="42%" height="20px" />
                </li>
                <li>
                  <q-skeleton  width="30%" height="20px" />
                </li>
                <li>
                  <q-skeleton  width="55%" height="20px" />
                </li>
              </ul>
            </div>
      </div>
    </div>

    <div class="row flex justify-start items-center q-ma-md">
      <div class="col-12 col-md-12 col-sm-12 col-xs-12 text- q-pa-lg">
        <q-skeleton  width="100%" height="400px"/>
      </div>
    </div>
    <div class="row q-ma-md">
      <div class="col-12 col-md-12 col-sm-12 col-xs-12 text- q-pa-lg flex justify-center items-center ">
        <q-skeleton  width="30%" height="60px"/>
      </div>
    </div>
    <div class="q-pa-md row items-start q-gutter-lg flex-center">
            <q-card class="my-card bg-grey-1" v-for="cards in 12" :key="cards">
              <q-item>
                <q-item-section avatar>
          <q-skeleton type="QAvatar" />
        </q-item-section>
                <q-item-section>
                  <q-item-label>
                    <q-skeleton  />
                  </q-item-label>
                  
                </q-item-section>
              </q-item>

              <q-skeleton height="380px" square >
                <div class="q-ma-lg q-pa-md line-height">
                <q-skeleton  />
                <q-skeleton  />
                <q-skeleton  />
                <q-skeleton  />
                <q-skeleton  />
                </div>
              </q-skeleton>

             
            </q-card>

           
          </div>
  </div>

  <q-page v-else-if="!loader">

     <section class="row q-py-xl">
      <div class="col-6 col-md-6 col-sm-12 col-xs-12 flex flex-center order-1">
        <q-img transition="slide-right" style="width:80%;" src="~assets/interface-index-img.png"></q-img>
      </div>
      <div class="col-6 col-md-6 col-sm-12 col-xs-12 order-2">
        <q-item>
          <q-item-section class="q-px-md">
            <div class="text-h4 text-bold text-grey-8">BEST QBANK</div>
          </q-item-section>
        </q-item>
        <div class="q-px-lg q-mx-sm q-py-none text-h6 text-weight-light text-grey-8 bullets">
        <ul>
          <li>Best practicing exam questions for DHA, MOH, OMSB, SLE, USMLE, PLAB, FCPS others.</li>
          <li>Updated Qbanks with actual test takers' feedback</li>
          <li>Simplified user interface for all devices</li>
          <li>Practice with exam ready mock tests</li>
          <li>Detailed explainations</li>
        </ul>
        </div>
      </div>
    </section>
     <section>
      <div class="row">
        <div class="col-7 col-md-7 col-sm-12 col-xs-12 q-pa-xl" style="background: #359800;">
          <div class="text-h3 text-bold text-white q-pt-lg">
            TRACK YOUR<br/>PERFORMENCE
          </div>
          <div class="text-h6 text-white text-weight-light q-pt-md" style="line-height:1.2;">
            Providing detailed analysis of your relative strengths &amp;<br/> Weaknesses in different subjects and topics
          </div>
        </div>
        <div class="col-5 col-md-5 col-sm-12 col-xs-12">
          <q-img src="~assets/qbank-analytics.png" />
        </div>
      </div>
    </section>
    <section>
       <div class="row flex flex-center">
      <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
        <div class="q-pb-xl" style="color: #5c5c5c;margin-top: 60px;">
          <span class="text-h4 flex flex-center text-center text-bold q-pt-md">POPULAR EXAMS</span>
          <h5 class="q-pa-none q-ma-none text-primary text-center">_____________________</h5>
        </div>
      </div>
    </div>
         <div class="row">
      <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
        <div class="row items-start q-gutter-md flex-center q-pa-lg">
         
            <q-card class="hover-fx my-card bg-grey-1 q-mb-lg">
                <q-card-section class="bg-secondary row on-hover q-pa-sm q-px-lg">
                  <q-img width="60px" height="60px" src="~assets/exams-logo/dha.png" alt="Exam Logo"/>
                  <div class="text-h5 text-white q-mt-md q-pt-xs q-ml-md">DHA</div>
                </q-card-section>
                <q-card-section class="q-pt-none q-pl-none">
                  <ul class="ul-style">
                    <li><a href="">General Practitioner (GP)</a></li>
                    <li><a href="">Obs &amp; Gynae</a></li>
                    <li><a href="">Internal Medicine</a></li>
                    <li><a href="">Surgery</a></li>
                    <li><a href="">General Dentist</a></li>
                    <li><a href="">Dermatology</a></li>
                    <li><a href="">Pediatrics</a></li>
                    <li><a href="">Orthodontic</a></li>
                    <li><a href="">Endodontic</a></li>
                    <li><a href="">Prosthodontics</a></li>
                  </ul>
                </q-card-section>
            </q-card>
            <q-card class="hover-fx my-card bg-grey-1 q-mb-lg">
                <q-card-section class="bg-secondary row on-hover q-pa-sm q-px-lg">
                  <q-img width="60px" height="60px" src="~assets/exams-logo/moh.png" alt="Exam Logo"/>
                  <div class="text-h5 text-white q-mt-md q-pt-xs q-ml-md">MOH</div>
                </q-card-section>
                <q-card-section class="q-pt-none q-pl-none">
                  <ul class="ul-style">
                    <li><a href="">General Practitioner (GP)</a></li>
                    <li><a href="">Obs &amp; Gynae</a></li>
                    <li><a href="">Internal Medicine</a></li>
                    <li><a href="">Surgery</a></li>
                    <li><a href="">General Dentist</a></li>
                    <li><a href="">Dermatology</a></li>
                    <li><a href="">Pediatrics</a></li>
                    <li><a href="">Orthodontic</a></li>
                    <li><a href="">Endodontic</a></li>
                    <li><a href="">Prosthodontics</a></li>
                  </ul>
                </q-card-section>
            </q-card>
            <q-card class="hover-fx my-card bg-grey-1 q-mb-lg">
                <q-card-section class="bg-secondary row on-hover q-pa-sm q-px-lg">
                  <q-img width="60px" height="60px" src="~assets/exams-logo/moh-oman.png" alt="Exam Logo"/>
                  <div class="text-h5 text-white q-mt-md q-pt-xs q-ml-md">MOH Oman (OMSB)</div>
                </q-card-section>
                <q-card-section class="q-pt-none q-pl-none">
                  <ul class="ul-style">
                    <li><a href="">General Practitioner (GP)</a></li>
                    <li><a href="">Obs &amp; Gynae</a></li>
                    <li><a href="">Internal Medicine</a></li>
                    <li><a href="">Surgery</a></li>
                    <li><a href="">General Dentist</a></li>
                    <li><a href="">Dermatology</a></li>
                    <li><a href="">Pediatrics</a></li>
                    <li><a href="">Orthodontic</a></li>
                    <li><a href="">Endodontic</a></li>
                    <li><a href="">Prosthodontics</a></li>
                  </ul>
                </q-card-section>
            </q-card>
            <q-card class="hover-fx my-card bg-grey-1 q-mb-lg">
                <q-card-section class="bg-secondary row on-hover q-pa-sm q-px-lg">
                  <q-img width="60px" height="60px" src="~assets/exams-logo/doh.png" alt="Exam Logo"/>
                  <div class="text-h5 text-white q-mt-md q-pt-xs q-ml-md">HAAD</div>
                </q-card-section>
                <q-card-section class="q-pt-none q-pl-none">
                  <ul class="ul-style">
                    <li><a href="">General Practitioner (GP)</a></li>
                    <li><a href="">Obs &amp; Gynae</a></li>
                    <li><a href="">Internal Medicine</a></li>
                    <li><a href="">Surgery</a></li>
                    <li><a href="">General Dentist</a></li>
                    <li><a href="">Dermatology</a></li>
                    <li><a href="">Pediatrics</a></li>
                    <li><a href="">Orthodontic</a></li>
                    <li><a href="">Endodontic</a></li>
                    <li><a href="">Prosthodontics</a></li>
                  </ul>
                </q-card-section>
            </q-card>
            <q-card class="hover-fx my-card bg-grey-1 q-mb-lg">
                <q-card-section class="bg-secondary row on-hover q-pa-sm q-px-lg">
                  <q-img width="60px" height="60px" src="~assets/exams-logo/sle.png" alt="Exam Logo"/>
                  <div class="text-h5 text-white q-mt-md q-pt-xs q-ml-md">SLE</div>
                </q-card-section>
                <q-card-section class="q-pt-none q-pl-none">
                  <ul class="ul-style">
                    <li><a href="">General Practitioner (GP)</a></li>
                    <li><a href="">Obs &amp; Gynae</a></li>
                    <li><a href="">Internal Medicine</a></li>
                    <li><a href="">Surgery</a></li>
                    <li><a href="">General Dentist</a></li>
                    <li><a href="">Dermatology</a></li>
                    <li><a href="">Pediatrics</a></li>
                    <li><a href="">Orthodontic</a></li>
                    <li><a href="">Endodontic</a></li>
                    <li><a href="">Prosthodontics</a></li>
                  </ul>
                </q-card-section>
            </q-card>
            <q-card class="hover-fx my-card bg-grey-1 q-mb-lg">
                <q-card-section class="bg-secondary row on-hover q-pa-sm q-px-lg">
                  <q-img width="60px" height="60px" src="~assets/exams-logo/usmle.png" alt="Exam Logo"/>
                  <div class="text-h5 text-white q-mt-md q-pt-xs q-ml-md">USMLE</div>
                </q-card-section>
                <q-card-section class="q-pt-none q-pl-none">
                  <ul class="ul-style">
                    <li><a href="">USMLE Step 1</a></li>
                    <li><a href="">USMLE Step 2 CK</a></li>
                    <li class="invisible"><a href="">Internal Medicine</a></li>
                    <li class="invisible"><a href="">Surgery</a></li>
                    <li class="invisible"><a href="">General Dentist</a></li>
                    <li class="invisible"><a href="">Dermatology</a></li>
                    <li class="invisible"><a href="">Pediatrics</a></li>
                    <li class="invisible"><a href="">Orthodontic</a></li>
                    <li class="invisible"><a href="">Endodontic</a></li>
                    <li class="invisible"><a href="">Prosthodontics</a></li>
                  </ul>
                </q-card-section>
            </q-card>
            <q-card class="hover-fx my-card bg-grey-1 q-mb-lg">
                <q-card-section class="bg-secondary row on-hover q-pa-sm q-px-lg">
                  <q-img width="60px" height="60px" src="~assets/exams-logo/plab.png" alt="Exam Logo"/>
                  <div class="text-h5 text-white q-mt-md q-pt-xs q-ml-md">PLAB</div>
                </q-card-section>
                <q-card-section class="q-pt-none q-pl-none">
                  <ul class="ul-style">
                    <li><a href="">PLAB Part-1</a></li>
                    <li class="invisible"><a href="">Obs &amp; Gynae</a></li>
                    <li class="invisible"><a href="">Internal Medicine</a></li>
                    <li class="invisible"><a href="">Surgery</a></li>
                   
                  </ul>
                </q-card-section>
            </q-card>
            <q-card class="hover-fx my-card bg-grey-1 q-mb-lg">
                <q-card-section class="bg-secondary row on-hover q-pa-sm q-px-lg">
                  <q-img width="60px" height="60px" src="~assets/exams-logo/amc.png" alt="Exam Logo"/>
                  <div class="text-h5 text-white q-mt-md q-pt-xs q-ml-md">AMC</div>
                </q-card-section>
                <q-card-section class="q-pt-none q-pl-none">
                  <ul class="ul-style">
                    <li><a href="">AMC Part-1</a></li>
                    <li class="invisible"><a href="">Obs &amp; Gynae</a></li>
                    <li class="invisible"><a href="">Internal Medicine</a></li>
                    <li class="invisible"><a href="">Surgery</a></li>
                    
                  </ul>
                </q-card-section>
            </q-card>
            <q-card class="hover-fx my-card bg-grey-1 q-mb-lg">
                <q-card-section class="bg-secondary row on-hover q-pa-sm q-px-lg">
                  <q-img width="60px" height="60px" src="~assets/exams-logo/fcps-mcps.png" alt="Exam Logo"/>
                  <div class="text-h5 text-white q-mt-md q-pt-xs q-ml-md">FCPS / MCPS</div>
                </q-card-section>
                <q-card-section class="q-pt-none q-pl-none">
                  <ul class="ul-style">
                    <li><a href="">FCPS Part-1</a></li>
                    <li class="invisible"><a href="">Obs &amp; Gynae</a></li>
                    <li class="invisible"><a href="">Internal Medicine</a></li>
                    <li class="invisible"><a href="">Surgery</a></li>
                    
                  </ul>
                </q-card-section>
            </q-card>
            <q-card class="hover-fx my-card bg-grey-1 q-mb-lg">
                <q-card-section class="bg-secondary row on-hover q-pa-sm q-px-lg">
                  <q-img width="60px" height="60px" src="~assets/exams-logo/pmdc.png" alt="Exam Logo"/>
                  <div class="text-h5 text-white q-mt-md q-pt-xs q-ml-md">PM &amp; DC</div>
                </q-card-section>
                <q-card-section class="q-pt-none q-pl-none">
                  <ul class="ul-style">
                    <li><a href="">PM &AMP; DC Part-1</a></li>
                    <li class="invisible"><a href="">Obs &amp; Gynae</a></li>
                    <li class="invisible"><a href="">Internal Medicine</a></li>
                    <li class="invisible"><a href="">Surgery</a></li>
                    
                  </ul>
                </q-card-section>
            </q-card>
            <q-card class="hover-fx my-card bg-grey-1 q-mb-lg">
                <q-card-section class="bg-secondary row on-hover q-pa-sm q-px-lg">
                  <q-img width="60px" height="60px" src="~assets/exams-logo/mrcp.png" alt="Exam Logo"/>
                  <div class="text-h5 text-white q-mt-md q-pt-xs q-ml-md">MRCP UK</div>
                </q-card-section>
                <q-card-section class="q-pt-none q-pl-none">
                  <ul class="ul-style">
                    <li><a href="">MRCP Part 1</a></li>
                    <li class="invisible"><a href="">Obs &amp; Gynae</a></li>
                    <li class="invisible"><a href="">Internal Medicine</a></li>
                    <li class="invisible"><a href="">Surgery</a></li>
                    
                  </ul>
                </q-card-section>
            </q-card>
            <q-card class="hover-fx my-card bg-grey-1 q-mb-lg">
                <q-card-section class="bg-secondary row on-hover q-pa-sm q-px-lg">
                  <q-img width="60px" height="60px" src="~assets/exams-logo/mcc.png" alt="Exam Logo"/>
                  <div class="text-h5 text-white q-mt-md q-pt-xs q-ml-md">MCCEE / MCCQE</div>
                </q-card-section>
                <q-card-section class="q-pt-none q-pl-none">
                  <ul class="ul-style">
                    <li><a href="">MCCEE Part 1</a></li>
                    <li class="invisible"><a href="">Obs &amp; Gynae</a></li>
                    <li class="invisible"><a href="">Internal Medicine</a></li>
                    <li class="invisible"><a href="">Surgery</a></li>
                   
                  </ul>
                </q-card-section>
            </q-card>
            


        </div>
      </div>
    </div>
    </section>
    <div class="q-pa-lg q-mx-lg hidden">
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur illo dolores laudantium inventore vitae odio et, praesentium, optio hic obcaecati necessitatibus. Laboriosam eius architecto sunt sit molestias optio, cumque quas! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro, quas. Assumenda quasi vero dicta facilis tempore voluptatum. Molestias ea dolorem animi! Sapiente voluptas culpa labore libero qui, eaque quo. Aut? Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus similique ducimus dignissimos, placeat alias qui suscipit aliquam officiis. Consequuntur in adipisci deleniti quis ut dolore ipsam aliquid laudantium impedit doloremque?</p>
    </div>
    
    
    
    
    <!-- <div class="w-h bg-deep-orange-2"></div> -->
  </q-page>
</template>

<script>
export default {
  data() {
    return {
      loader: true,
      
    };
  },
  mounted() {
    this.callFunction();
  },
  methods: {
    callFunction: function(loadingTime) {
      var t = this;
      var loadingTime = 2;
      setTimeout(function() {
        t.loader = false;
      }, loadingTime * 1000);
    }
  }
};
</script>
<style lang="css" scoped>
.my-card {
  width: 100%;
  max-width: 353px;
}
.borders {
  border: 1px solid red;
}
.links a {
  text-decoration: none;
  color: #7dddfd;
}
.links a:hover {
  color: #04b1ed;
  text-decoration: underline;
}

.ul-style {
  list-style-type: circle;
}
.ul-style li {
  padding: 6px 5px;
}
.ul-style a {
  text-decoration: none;
  color: #056f92;
  font-size: 18px;
}
.ul-style a:hover {
  color: #029fd3;
  text-decoration: underline;
}
.font-size {
  font-size: 18px;
}
.w-h {
  width: 100%;
  height: 50vh;
}
.my-custom-image {
  width: 200px !important;
  height: 200px !important;
}
.text-align {
  text-align: left;
}
.bullets ul {
  list-style-image: url("../statics/chkIcn.png");
  
}
.bullets ul li {
  padding: 5px 0;
}
.bullets-grey ul {
  filter: grayscale(100%);
  list-style-image: url("../statics/chkIcn.png");
  
}
.bullets-grey ul li {
  padding: 5px 0;
}
.line-height .q-skeleton {
  margin: 12px 0;
}
.hover-fx {
  transition: all 0.3s ease-out;
}

.hover-fx:hover {
  box-shadow: 0 7px 9px -4px rgba(0, 0, 0, 0.2),
    0 14px 21px 2px rgba(0, 0, 0, 0.14), 0 5px 26px 4px rgba(0, 0, 0, 0.12);
  transition: all 0.3s ease-in;
}
.on-hover {
  transition: all 0.3s ease-in;
}
.on-hover:hover {
  background-color: #015e8a !important;
  transition: all 0.3s ease-in;
}
@media only screen and (min-width: 0px) and (max-width: 900px) {
  .font-size {
    font-size: 14px;
  }
  .my-custom-image {
    width: 120px !important;
    height: 120px !important;
  }
  .text-align {
    text-align: center;
  }
}
</style>