65 lines
3.6 KiB
Vue
65 lines
3.6 KiB
Vue
<template>
|
|
<div>
|
|
<div class="grid">
|
|
<div class="flex relative justify-center text-xs">
|
|
<img class="" src="/img/frame1.png" alt="">
|
|
<p class="literacy absolute ml-24 -mt-10 md:-mt-0 md:ml-28 cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
|
|
Literacy</abbr>
|
|
</p>
|
|
<p class="comunication absolute -mt-8 md:mt-12 ml-48 md:ml-72 text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
|
|
Comunication <br>& Language</abbr>
|
|
</p>
|
|
<p class="mathematics absolute ml-48 md:ml-72 -mt-32 md:-mt-0 text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
|
|
Mathematics</abbr>
|
|
</p>
|
|
<p class="world absolute -mt-36 ml-12 md:-mt-4 lg:ml-20 text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
|
|
Understanding <br> the World </abbr>
|
|
</p>
|
|
<p class="physical absolute -mt-24 md:mt-4 -ml-40 md:-ml-56 text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
|
|
Physical <br> Development </abbr>
|
|
</p>
|
|
<p class="expressive absolute -mt-16 md:mt-4 -ml-48 md:-ml-80 text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
|
|
Expressive Arts<br> & Desgine </abbr>
|
|
</p>
|
|
<p class="preschool absolute -ml-28 md:-ml-40 -mt-4 md:mt-4 text-center cursor-pointer"><abbr title="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum dicta sequi repudiandae vero sed aspernatur ratione voluptatem expedita quis quibusdam ipsam tenetur culpa autem possimus quaerat dolor, fugiat iste excepturi.">
|
|
Preschool, Social <br>& Emotional <br>Development</abbr>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style>
|
|
.literacy {
|
|
top: 110px;
|
|
transform: rotate(25deg);
|
|
}
|
|
.comunication {
|
|
transform: rotate(80deg);
|
|
/* left: 360px; */
|
|
top: 170px;
|
|
}
|
|
.mathematics {
|
|
transform: rotate(-50deg);
|
|
top: 373px;
|
|
}
|
|
.world {
|
|
transform: rotate(-10deg);
|
|
top: 420px;
|
|
}
|
|
.physical {
|
|
transform: rotate(44deg);
|
|
top: 340px;
|
|
}
|
|
.expressive {
|
|
transform: rotate(-90deg);
|
|
top: 225px;
|
|
}
|
|
.preschool {
|
|
transform: rotate(-35deg);
|
|
top: 95px;
|
|
}
|
|
.border-radius{
|
|
border-top-left-radius: 200px;
|
|
height: 400px;
|
|
}
|
|
</style> |