audacity/audacity.github.io
1
0
Fork 0
mirror of https://github.com/audacity/audacity.github.io.git synced 2026-06-13 03:38:11 -05:00
Code Issues 9 Packages Projects Releases Wiki Activity

Responsive styling

Browse Source
This commit is contained in:
Dilson's Pickles
2023-08-22 11:25:12 +10:00
parent 026355fd33
commit ff21eb0bfa
1 changed files with 20 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/homepage/RecordAnything.astro
View File

@@ -1,30 +1,40 @@
---
import RecordAnything from "../../assets/img/record-anyting.jpg";
import RecordAnything2 from '../../assets/img/RecordAnything2.jpg'
import RecordAnything2 from "../../assets/img/RecordAnything2.jpg";
import Waveform from "../../assets/img/waveform.png";
import TransportTools from "../../assets/img/TransportTools.png";
import RecordCursor from '../../assets/img/RecordCursor.png'
import RecordCursor from "../../assets/img/RecordCursor.png";
---
<section class="bg-slate-50">
<div class="grid grid-cols-12 gap-8 max-w-screen-xl mx-auto py-20">
<div class="flex flex-col justify-center gap-4 col-start-1 col-span-5">
<h2 class="text-5xl font-bold">Record anything</h2><p class="text-xl">
<div
class="flex flex-col justify-center gap-4 col-start-2 col-span-10 md:col-start-1 md:col-span-5"
>
<h2 class="text-3xl md:text-5xl font-bold">Record anything</h2>
<p class="text-base md:text-xl">
Excellent for podcasts, voice-over work or even just recording memos.
All you need is a microphone.
</p>
</div>
<div class="col-start-7 col-end-13 grid grid-cols-6 grid-rows-auto gap-4">
<div
class="col-start-2 col-span-10 md:col-span-6 lg:col-start-7 grid grid-cols-6 grid-rows-auto gap-4"
>
<div class="relative col-span-6 h-48">
<div class="absolute -right-12 top-24 h-24 w-400">
<div class="absolute -right-8 md:-right-12 top-24 h-16 md:h-24 w-400">
<img class="h-full w-full rounded-lg" src={TransportTools} />
</div><img class="object-cover object-top h-full w-full rounded-lg" src={RecordAnything} />
</div><img
class="object-cover object-top h-full w-full rounded-lg"
src={RecordAnything}
/>
</div>
<div class="relative row-start-2 col-span-3 h-48">
<div class="absolute -right-3 bottom-0"><img class="w-full h-52 object-cover" src={RecordCursor}/></div>
<div class="relative row-start-2 col-span-3 hidden md:block h-48">
<div class="absolute -right-3 bottom-0">
<img class="w-full h-52 object-cover" src={RecordCursor} />
</div>
<img class="h-full w-full rounded-lg" src={Waveform} />
</div>
<div class="row-start-2 col-span-3 h-48">
<div class="row-start-2 col-span-3 h-48 hidden md:block ">
<img class="h-full w-full rounded-lg" src={RecordAnything2} />
</div>
</div>