LobotomyLabs/classquiz-ai
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

📱 Images are in rows instead of columns on mobile

Browse Source
This commit is contained in:
Mawoka
2022-04-13 17:21:44 +02:00
parent 4f32706f07
commit 0df7a037ea
1 changed files with 18 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/landing/landing-promo.svelte
+18 -5
View File
@@ -19,14 +19,19 @@
<div class="h-fit"> <div class="h-fit">
<!-- <h1 class='text-5xl marck-script text-center pt-4'>Teacher</h1>--> <!-- <h1 class='text-5xl marck-script text-center pt-4'>Teacher</h1>-->
<div class="grid grid-cols-2 grow pt-4 transition ease-in-out"> <div class="grid lg:grid-cols-2 grow pt-4 transition ease-in-out">
<h1 class="text-center text-3xl marck-script">1: Create or Import</h1> <h1 class="text-center text-3xl marck-script">1: Create or Import</h1>
<h1 class="text-center text-3xl marck-script">2: See all your quizzes</h1> <h1 class="text-center text-3xl marck-script hidden lg:block">
2: See all your quizzes
</h1>
<!-- <h1 class='text-center text-3xl marck-script'>3: See how many were right or wrong</h1>--> <!-- <h1 class='text-center text-3xl marck-script'>3: See how many were right or wrong</h1>-->
<div class="flex justify-center"> <div class="flex justify-center">
<img src={ImportSelectMockup} class="w-4/6 align-top" alt="Select answer" /> <img src={ImportSelectMockup} class="w-4/6 align-top" alt="Select answer" />
</div> </div>
<h1 class="text-center text-3xl marck-script lg:hidden block">
2: See all your quizzes
</h1>
<div class="flex justify-center"> <div class="flex justify-center">
<img <img
src={OverviewMockup} src={OverviewMockup}
@@ -46,16 +51,21 @@
{:else} {:else}
<div class="h-fit"> <div class="h-fit">
<!-- <h1 class='text-5xl marck-script text-center pt-4'>Student</h1>--> <!-- <h1 class='text-5xl marck-script text-center pt-4'>Student</h1>-->
<div class="grid grid-cols-3 grow pt-4 transition ease-in-out"> <div class="grid lg:grid-cols-3 grow pt-4 transition ease-in-out">
<h1 class="text-center text-3xl marck-script">1: Answer</h1> <h1 class="text-center text-3xl marck-script">1: Answer</h1>
<h1 class="text-center text-3xl marck-script">2: See what was right or wrong</h1> <h1 class="text-center text-3xl marck-script lg:block hidden">
<h1 class="text-center text-3xl marck-script"> 2: See what was right or wrong
</h1>
<h1 class="text-center text-3xl marck-script lg:block hidden">
3: See how many were right or wrong 3: See how many were right or wrong
</h1> </h1>
<div class="flex justify-center"> <div class="flex justify-center">
<img src={SelectMockup} class="w-4/6 align-top" alt="Select answer" /> <img src={SelectMockup} class="w-4/6 align-top" alt="Select answer" />
</div> </div>
<h1 class="text-center text-3xl marck-script lg:hidden block">
3: See how many were right or wrong
</h1>
<div class="flex justify-center"> <div class="flex justify-center">
<img <img
src={SolutionMockup} src={SolutionMockup}
@@ -63,6 +73,9 @@
alt="See right and wrong solutions" alt="See right and wrong solutions"
/> />
</div> </div>
<h1 class="text-center text-3xl marck-script lg:hidden block">
3: See how many were right or wrong
</h1>
<div class="flex justify-center"> <div class="flex justify-center">
<img <img
src={ResultsMockup} src={ResultsMockup}