Java 6
3 min
Në ligjeratën e kaluar kishim mundësi të shohim se si do duken dizajnet e projekteve që do i përpunojmë sëbashku. Tani do vazhdojmë të përdorim TailwindCSS për të dizajnuar projektin e parë, vizitkartën digjitale.
Këtu kemi një dizajn pak më të thjesht sa për fillim që të mund të orientoheni më lehtë dhe të kuptoni se si të përdorni TailwindCSS. Dizajni ndodhet këtu. Më poshtë kemi një fotografi të dizajnit.
Ushtrimi i javës
Do të vazhdojmë me projektin e njëjtë si herën e kaluar. Fillimisht do të fshini pjesën që ndodhet në brendinë e elementit <body> </body>. Pastaj do duhet të krijoni një follder për SVG elementet që do i përdorim në projekt. Emri i follderit duhet të titullohet `svg`. Në fillim do vendosim vetëm logon e projektit.
Tani do duhet të importoni logon nga dizajni i projektit në FIGMA dhe ta vendosni në follderin që krijuam. Për të importuar logon, duhet të selektoni logon, pastaj në anën e djathtë do e shihni butonin Export, zgjidhni SVG te opsioni për llojin e modelit dhe klikoni Export.
Strukturimi i Kodit
Tani në fajllin "index.html", në brendinë e elementit <body> do duhet të vendosim kodin në vazhdim. Në fillim krijohet një element me klasat "container", "mx-auto" dhe "h-screen".
<div class="container mx-auto h-screen"></div>
Klasa "container" përcakton një gjerësi të caktuar për elementet brenda saj.
Klasa "mx-auto" pozicionimin e kontajnerit në qendër në mënyrë horizontale
Klasa "h-screen" vendos lartësinë bazuar në lartësinë e ekranit
Në vazhdim krijojmë nje <div> tjetër i cili do i pozicionoj elementet brenda tij në mënyrë horizontale.
<div class="container mx-auto h-screen">
<!-- Pozicionimi -->
<div class="h-full flex justify-between items-center"></div>
</div>
Klasa "h-full" vendos që lartësia e elementit të jetë 100% e lartësisë së parentit.
Klasa "flex" vendos elementet brenda <div> horizontalisht.
Klasa "justify-between" i pozicionon elementet brenda <div> me hapësirë të barabartë ndërmjet tyre.
Klasa "items-center" vendos në qendër elementet vertikalisht
Për ta krijuar pjesën e informacioneve si në dizajn, do ta bëjmë me anë të gridit.
<div class="container mx-auto h-screen">
<div class="h-full flex justify-between items-center">
<!-- Krijimi i gridit -->
<div class="grid grid-cols-2 gap-12 items-end"></div>
</div>
</div>
Klasa "grid grid-cols-2" përdoret per ta përcaktuar gridin dhe ti japim numrin e kolonave për ndarje
Klasa "gap-12" shërben për hapsiren midis kolonave(në këtë rast gap-12)
Klasa "items-end" pozicionon colonat vertikalisht në fund
Krijojmë elementet që do vendosen brenda gridit:
<div class="container mx-auto h-screen">
<div class="h-full flex justify-between items-center">
<div class="grid grid-cols-2 gap-12 items-end">
<!-- Elementet e gridit -->
<div>
<p class="font-medium uppercase text-2xl">Lincoln</p>
<div class="flex items-center space-x-4 mt-4">
<p class="text-lg font-normal text-neutral-900 leading-6">
6 Hilltop Road,
<br><span class="font-medium">Lincoln</span>
</p>
</div>
</div>
</div>
</div>
</div>
Krijojmë nje <div> brenda gridit dhe vendosim elementet që do përdorim dhe pastaj bëjmë përsëritjen e divit me informacione tjera shtesë:
<div class="container mx-auto h-screen">
<div class="h-full flex justify-between items-center">
<div class="grid grid-cols-2 gap-12 items-end">
<!-- Elementet e gridit -->
<div>
<p class="font-medium uppercase text-2xl">Lincoln</p>
<div class="flex items-center space-x-4 mt-4">
<p class="text-lg font-normal text-neutral-900 leading-6">
6 Hilltop Road,
<br><span class="font-medium">Lincoln</span>
</p>
</div>
</div>
<div>
<div class="flex items-center space-x-4">
<p class="text-lg font-normal text-neutral-900 leading-6">
478-921-6160
</p>
</div>
</div>
<div>
<p class="font-medium uppercase text-2xl">Oakdale</p>
<div class="flex items-center space-x-4 mt-4">
<p class="text-lg font-normal text-neutral-900 leading-6">
1798 Mill Road,
<br><span class="font-medium">Oakdale</span>
</p>
</div>
</div>
<div>
<div class="flex items-center space-x-4">
<p class="text-lg font-normal text-neutral-900 leading-6">
415-970-5692
</p>
</div>
</div>
<div>
<p class="font-medium uppercase text-2xl">Coleman</p>
<div class="flex items-center space-x-4 mt-4">
<p class="text-lg font-normal text-neutral-900 leading-6">
27410 7th Street East,
<br><span class="font-medium">Coleman</span>
</p>
</div>
</div>
<div>
<div class="flex items-center space-x-4">
<p class="text-lg font-normal text-neutral-900 leading-6">
704-504-7055
</p>
</div>
</div>
</div>
</div>
</div>
Vendosja e logos
Logoja vendoset brenda elementit "<div>" i cili bënte pozicionimin e elementeve horizontalisht duke përdorur klasën flex, shikoni në fund:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<title>Techup - Digital Business Card</title>
</head>
<body>
<div class="container mx-auto h-screen">
<div class="h-full flex justify-between items-center">
<div class="grid grid-cols-2 gap-12 items-end">
<div>
<p class="font-medium uppercase text-2xl">Lincoln</p>
<div class="flex items-center space-x-4 mt-4">
<p class="text-lg font-normal text-neutral-900 leading-6">
6 Hilltop Road,
<br><span class="font-medium">Lincoln</span>
</p>
</div>
</div>
<div>
<div class="flex items-center space-x-4">
<p class="text-lg font-normal text-neutral-900 leading-6">
478-921-6160
</p>
</div>
</div>
<div>
<p class="font-medium uppercase text-2xl">Oakdale</p>
<div class="flex items-center space-x-4 mt-4">
<p class="text-lg font-normal text-neutral-900 leading-6">
1798 Mill Road,
<br><span class="font-medium">Oakdale</span>
</p>
</div>
</div>
<div>
<div class="flex items-center space-x-4">
<p class="text-lg font-normal text-neutral-900 leading-6">
415-970-5692
</p>
</div>
</div>
<div>
<p class="font-medium uppercase text-2xl">Coleman</p>
<div class="flex items-center space-x-4 mt-4">
<p class="text-lg font-normal text-neutral-900 leading-6">
27410 7th Street East,
<br><span class="font-medium">Coleman</span>
</p>
</div>
</div>
<div>
<div class="flex items-center space-x-4">
<p class="text-lg font-normal text-neutral-900 leading-6">
704-504-7055
</p>
</div>
</div>
</div>
<img src="/svg/logo.svg" alt="logo" /> <!-- Vendosja e logos -->
</div>
</div>
</body>
</html>
Ky është kodi përfundimtar se si duhet te duket.
Përgatitje për javën e 7-të
Mund të provoni që të vendosni ikonat për çdo informatë, ashtu siç është në dizajn. Gjithashtu edhe prapavija e dizajnit mungon aktualisht dhe do e vendosim javën tjetër. Përsëri e theksojmë se është tepër e rëndësishme të kuptoni se si funksionon TailwindCSS, prandaj provoni të ushtroni me videot e mëposhtme:
From Zero to Production - Një listë me video të shkurta
Build a Modern Landing Page With Tailwind CSS - Një demonstrim i plotë dhe krijim i një faqeje moderne
Tailwind Crash Course | Project From Scratch - Një projekt tjetër interesant
Diskutimet
