হেয় গায়জ হোয়াটসআপ কি অবস্থা আমি ইনাদ ইসলাম। আবার হাজির হয়েছি একটা নতুন পোস্ট নিয়ে।
তো প্রতেক দিন একটা করে পোস্ট আর একটা করে ভিডিও টিউটোরিয়াল পোস্ট করার ট্রায় করছি। যাতে করে সবচেয়ে বেশি তারাতারি আপনাদের কিছু শেখাতে পারি। তো আমরা কার্ড কীভাবে বানাতে হয় সেটা আমরা দেখেছি। যারা দেখেননি তারা আমার চ্যানেল থেকে অথবা ট্রিকবিডি তে আমার আগের পোস্ট গুলো থেকে পড়ে নিবেন। তো ঐ কার্ড টি একদম সিম্পল ছিলো। তো আজকে আমরা আরেকটা কার্ড বানাবো যেটা হবে থ্রিডি ফ্লিপ সহ অর্থাৎ আগের মতো ইমেজ এর নিচে ডিটেইলস শো করবেনা। যখন আপনি ইমেজ টাতে ক্লিক করবেন তখন ডিটেইলস শো হবে। তো চলেন দেখে নেই কোড গুলোঃ-
তো প্রত্যেক বারের মতোই কোড দিবো আপনারা কপি করে দুটো ফাইল বানাবেন। নিম্মের কোড টুকু Index.html এ রাখবেনঃ-
Example
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3D Flip Card - Pogamar | The Tech Therpaist</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0-11/css/all.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="main mid"> <div class="contect"> <div class="front"> <img src="card.jpeg" alt=""> </div> <div class="back"> <div class="back-c mid"> <h2>Pogamar</h2> <h3> <pre>The Tech Therapist</pre> </h3> <div class="social-icons"> <i class="fab fa-facebook-f"></i> <i class="fab fa-twitter"></i> <i class="fab fa-linkedin"></i> <i class="fab fa-github"></i> <i class="fab fa-youtube"></i> </div> </div> </div> </div> </div> </body> </html>
রেখে সেইভ দিন। এবং নিম্মের কোড টুকু রাখবেন style.css এঃ-
Example
/* * * 3D Flip Card * * Pogamar * The Tech Therapist **/ * { margin:0; padding:0; box-sizing: border-box; } body { background: #333; color: #fff; font-family: Times New Roman; } h2 { margin-top: 50%; } h3 { margin-top: 5px; } .mid { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .main { cursor: pointer; width: 340px; height: 480px; } .front, .back { width: 100%; height: 100%; border-radius: 8px; overflow: hidden; backface-visibility: hidden; position: absolute; transition: transform 0.6s linear; } .front img { height: 100%; } .front { perspective: 600px; transform: rotateX(0deg); } .back { perspective: 600px; transform: rotateX(-180deg); } .back-c { width: 100%; height: 100%; background: #000; color: #fff; text-align: center; } .main:hover .front { perspective: 600px;transform: rotateX(-180deg); } .main:hover .back { perspective: 600px; transform: rotateX(0deg); } .social-icons { margin-top: 160px; } .social-icons i { width: 30px; height: 30px; text-align: center; line-height: 30px; font-size: 14px; border: 1px solid #333; border-radius: 5px; } .social-icons i:hover { color: #000; background: #fff; }
এবার কোড টা এক্সিকিউট করুন। আর যারা কোড রান করাতে পারেন্না (আশা করি সবাই পারেন) তাদের বলবো ট্রিকবিডিতে অনেক পোস্ট আছে ওয়েব সার্ভার সেট আপ দেয়ার যেকোন একটা দেখে নিলেই হবে। আর না পারলে নিচে কমেন্ট করুন আমি টিউটোরিয়ালের মাধ্যমে শিখিয়ে দিবো। আর যাদের কাছে কঠিন লাগে তারা ক্রোম ওপেন করেও রান করাতে পারেন যেটা আমি প্রায় সব পর্বেই দেখিয়েছিলাম। যারা দেখেননি তাদের জন্যে আজ আবার দেখিয়ে দেয়া হলো-
file://sdcard/folder_name
অর্থাৎ আপনার ফোল্ডার এর নাম যদি হয় 3d_flip_card তাহলে আপনাকে ইউয়ারএল বক্স এ লিখতে হবেঃ-
file://sdcard/3d_flip_card/index.html
তারপর দেখুন আপনার কোড এক্সিকিউট হচ্ছে। এবার আপনার যেমন ভালো লাগে তেমন মডিফাই করে নিন। দরকার হলে কালার চেঞ্জ করে নিন। সম্পুর্ন আপনার ইচ্ছে।
Demo:
আর যাদের এই টিউটোরিয়াল টি বুঝতে অথবা কোড বুঝতে সমস্যা হচ্ছে তারা ভিডিও টি দেখুনঃ
আর যারা এখন ও এদিক ওদিক ঘুরতেসেন আর বলতেসেন ভাইয়া কাজ শিখান আর তারা আপনার কাছে টাকা দাবি করছে তাদের জন্যে আমি বলতে চাইবো যে আমার চ্যানেল এর পাশে থাকতে পারেন অন্তত আমি বেশি না পারি একটু হলেও শেখাতে পারবো ইনশাল্লাহ। আমার শুধু চাই আপনাদের সাহায্য আর সহযোগিতা।
আর প্রত্যেক টিউটোরিয়াল এ আমি বলি যে আপনারা যদি চান আমার এই দেয়া কোড গুলো আপনারা এই আপনাদের ওয়ার্ডপ্রেস অথবা আপনাদের ওয়েবসাইটে ইউজ করতে পারেন। তবে শুধু ক্লাস গুলো চেইঞ্জ করে নিলেই হবে। ক্লাস গুলো চেইঞ্জ করে নিবেন। অর্থাৎ আপনার থিম এর যেখানে যেখান্র বাটন আছে সেই বাটনের ক্লাস এর সাথে আমার দেয়া সিএসএস এর ক্লাস গুলো রিপ্লেস করে নিলেই হয়ে যাবে ইনশাল্লাহ। আর যদি না পারেন তবে নিচে কমেন্ট করবেন ইনশাল্লাহ আমি তা নিয়ে টিউটোরিয়াল বানিয়ে দিবো।
পোস্টের কমেন্টে বলুন আপনাদের প্রব্লেম এবং ভিডিও গুলোতে কি আমি প্রত্যেক লাইন কোড এক্সপ্লেইন করবো কিনা।
তো যাদের আমার টিউটোরিয়াল গুলো ভালো লাগছে তারা শেয়ার করে আমাকে সাহায্য করুন এবং ভিডিও ভালো লেগে থাকলে চ্যানেল সাবস্ক্রাইব করতে ভুলবেন্না।
আবার আসব আরেক টিউটোরিয়াল নিয়ে। ততদিন সুস্থ থাকুন। Pogamar এর সাথে থাকুন।
আর যাদের এই টিউটোরিয়াল এর কোড গুলো প্রয়োজন তারা এখান থেকে ডাউনলোড করে নিনঃ Download Codes
আর ভালো লাগলে আমার চ্যানেল টি সাবস্ক্রাইব করুনঃ
ধন্যবাদ ভুল ত্রুটি ক্ষমা করবেন
5 thoughts on "ডিজাইন করুন একটি থ্রিডি ফ্লিপ কার্ড শুধুমাত্র এইচটিএমএল এবং সিএসএস এর মাধ্যমে"