Java 7
2 min
Në javën e kaluar mësuam se si funksiononte tailwindi dhe bëmë disa ushtrime themelore sa i përket saj, ndërsa sot do bëjme vendosjen e ikonave për çdo informatë, si dhe vendosjen e prapavijës ashtu siç është në dizajn.
Ushtrimi i javës
Si fillim për vendosjen e ikonave, ne duhet ti marim ata nga Figma dhe ti vendosim në projektin tonë.
Por duhet ta kemi parasyshë se në dizajn janë paraqitur ikona të cilat përsëriten, por neve na duget secila nga një herë dhe pastaj do manipulojm me ngjyrën në prapavijë
Pas vendosjes së ikonave projekti jonë duhet të duket kështu
Vendosja e ikonave në kod
Për vendosjen e ikonave ne do përdorim tagun <img>
Si fillim shohim dizajnin se në cilën pjesë duhet ti vendosim ikonat. Vendosim <img> brenda divit e cila ka klasat flex dhe items-center e cila do e pozicionoj horizontalisht dhe në qender ikonën me informatën.
<div class="flex items-center space-x-4 mt-4">
<!-- Vendosja e svg -->
<img src="/svg/direction.svg" alt="direction">
<p class="text-lg font-normal text-neutral-900 leading-6">
6 Hilltop Road,
<br><span class="font-medium">Lincoln</span>
</p>
</div>
Pasi kemi vendosur ikonën, sic thamë ne do manipulojmë me ngjyrat në prapavije si dhe prapavijën do e bëjmë në formë rrethore dhe të ketë hapsirë sa në dizajn.
<div class="flex items-center space-x-4 mt-4">
<!-- Vendosja e svg -->
<img src="/svg/direction.svg" alt="direction" class="bg-rose-500 rounded-full p-2">
<p class="text-lg font-normal text-neutral-900 leading-6">
6 Hilltop Road,
<br><span class="font-medium">Lincoln</span>
</p>
</div>
Tash pas mbarimit me njërën prej informatava të njejtën e përsërsisim në informatat tjera por me ikonat dhe ngjyrat e përshtatshme
<!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">
<img src="/svg/direction.svg" alt="direction" class="bg-rose-500 rounded-full p-2">
<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">
<img src="/svg/phone.svg" alt="phone" class="bg-amber-500 rounded-full p-2">
<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">
<img src="/svg/direction.svg" alt="direction" class="bg-sky-500 rounded-full p-2">
<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">
<img src="/svg/phone.svg" alt="phone" class="bg-teal-500 rounded-full p-2">
<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">
<img src="/svg/direction.svg" alt="direction" class="bg-amber-500 rounded-full p-2">
<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">
<img src="/svg/mobile.svg" alt="mobile" class="bg-rose-500 rounded-full p-2">
<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" />
</div>
</div>
</body>
</html>
Vendosja e prapavijës
Sic e shohim në dizajn prapavija ndahet në dy pjesë. Fotografia dhe ikona(aeroplani). Në fillim i marim nga figma të dyja dhe i vendosim në projekt.
Për ta vendosur fotografinë në prapavijë në fillim krijojmë një <div> ku do e vendosim gjithë kodin brenda dhe ky div do ketë klasë relative
<!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="realtive"> <!-- Divi kryesor -->
<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">
<img src="/svg/direction.svg" alt="phone" class="bg-rose-500 rounded-full p-2">
<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">
<img src="/svg/phone.svg" alt="phone" class="bg-amber-500 rounded-full p-2">
<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">
<img src="/svg/direction.svg" alt="direction" class="bg-sky-500 rounded-full p-2">
<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">
<img src="/svg/phone.svg" alt="phone" class="bg-teal-500 rounded-full p-2">
<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">
<img src="/svg/direction.svg" alt="direction" class="bg-amber-500 rounded-full p-2">
<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">
<img src="/svg/mobile.svg" alt="mobile" class="bg-rose-500 rounded-full p-2">
<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" />
</div>
</div>
</div>
</body>
</html>
Pasi vendosëm gjithë kodin brenda divit tash me radhë i vendosim edhe fotografitë të cilat do të kenë nga një klasë absolute që do jetë brenda klasës relative.
<!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="realtive">
<img src="background.jpg" alt="background" class="absolute h-full w-full top-0 left-0 -z-10">
<img src="/svg/plane.svg" alt="plane" class="absolute top-0 right-0 object-cover opacity-60">
<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">
<img src="/svg/direction.svg" alt="phone" class="bg-rose-500 rounded-full p-2">
<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">
<img src="/svg/phone.svg" alt="phone" class="bg-amber-500 rounded-full p-2">
<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">
<img src="/svg/direction.svg" alt="direction" class="bg-sky-500 rounded-full p-2">
<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">
<img src="/svg/phone.svg" alt="phone" class="bg-teal-500 rounded-full p-2">
<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">
<img src="/svg/direction.svg" alt="direction" class="bg-amber-500 rounded-full p-2">
<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">
<img src="/svg/mobile.svg" alt="mobile" class="bg-rose-500 rounded-full p-2">
<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" />
</div>
</div>
</div>
</body>
</html>
Ky do jetë se si do të duket kodi përfundimtarë
Përgatitje për javën e 8-të
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 dhe të krijoni dizajne të ndryshme:
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
