Skip to main content

ওয়েব ডেভলপারদের জন্য Amizing Front-end snippets! HTML CSS & JAVASCRIPT || পার্ট – ৬

WELLCOME BACK
Hello guys, how are you? Hope you are doing well! So like every day, today I am here with a new post for you! So let’s get started!

এই Snippets পোস্টগুলোর আরো একরি পার্টে আপনাকে স্বাগতম। তো এর আগের পোস্ট দেখে না থাকলে দেখুন!

  1. ওয়েব ডেভলপারদের জন্য Amizing Front-end snippets! HTML CSS & JAVASCRIPT || পার্ট – ১
  2. ওয়েব ডেভলপারদের জন্য Amizing Front-end snippets! HTML CSS & JAVASCRIPT || পার্ট – ২
  3. ওয়েব ডেভলপারদের জন্য Amizing Front-end snippets! HTML CSS & JAVASCRIPT || পার্ট – ৩
  4. ওয়েব ডেভলপারদের জন্য Amizing Front-end snippets! HTML CSS & JAVASCRIPT || পার্ট – ৪
  5. ওয়েব ডেভলপারদের জন্য Amizing Front-end snippets! HTML CSS & JAVASCRIPT || পার্ট – ৫

তো চলে এলাম আরো একটি নতুন পার্ট নিয়ে আপনাদের মাঝে! বরাবরের মতোই আমি এবার ও কিছু Snippets শেয়ার করবো এবং সেটার ব্যবহার এবং ডিজাইন সম্পর্কে বিস্তারিত জানানোর চেস্ট করবো। যাতে আপনার ব্যবহার করার আগেই ধারণা থেকে যায় যে এটি কেমন হবে। যেগুলো Snippet ব্যবহার বেশি হয় এবং সুন্দর ডিজাইন সেগুলো আমি আপনাদের মাঝে শেয়ার করে থাকি। তো চলুন শুরু করা যাক!

Slider এস সাথে অ্যানিমেশন!

এই snippet এর বিস্তারিতঃ

এই Slider টা বিশেষ করে Food বা Product Portfolio ওয়েবসাইটের জন্য ডিজাইন করা। যাতে Product গুলো একসাথে সুন্দর ভাবে দেখাতে পারে। এটি আপনি Food & Products Portfolio ওয়েবসাইটের জন্য ডিজাইন করে নিতে পারেন! এমনিতেও Slider টার ডিজাইন সুন্দর। চাইলে অন্য ওয়েবসাইটে ব্যবহার করতেও পারেন!

কোড কালেক্টঃ

ফুড কার্ড

এই snippet এর বিস্তারিতঃ

এটি হলো একটি Food দেখানো জন্য ডিজাইন করা কার্ড। যা বিশেষ করে কোনো Food এর ব্যবহার হয়। মনে করেন একটি Food এ Discount দিচ্ছে তখন এমন করে দেখালে অনেক সুন্দর এবং ইউজার পাওয়া যাবে।

কোড কালেক্টঃ

রেসপন্সিভ Sidebar

এই snippet এর বিস্তারিতঃ

এটি হলো একটি Sidebar। তবে এটির ফুল ডিজাইন নেই যা আপনাকেই করতে হবে। তবে এটির ডিজাইন কিন্তু অনেক সুন্দর। ডেক্সটপ এ এমন দেখাবে। আর মোবাইলে আপনি চাইলে লেফ্ট এ দিতে বা উপরে দিতে পারেন। ডিজাইন আপনার হাতে!

কোড কালেক্টঃ

Sidebar হোবার বাটন

এই snippet এর বিস্তারিতঃ

এই বাটন গুলো তৈরি করা হয়েছে Sidebar এর জন্য। যেখানে বাটন এর Icon এ টাচ করলে বাটন এর ফুল নাম অ্যানিমেশনের সাথে দেখাবে। এটিও সেট করতে পারেন। এটিতে বাটন গুলোর Background ও সুন্দর করা আছে।

কোড কালেক্টঃ

Gradient লেখা

এই snippet এর বিস্তারিতঃ

এটি হলো একটি অ্যানিমেডেট Gradient লেখা। যা কালার ফুল। এটি আপনি যেকোনো ওয়েবসাইটে ব্যবহার করতে পারেন। বিশেষ করে ওয়েবসাইটের Headline হিসাবে এগুলো ব্যবহার করা আরকি! চাইলে অন্য কালার বদলাতে পারবেন Css থেকে!

কোড কালেক্টঃ

THIS POST END
So friends, that’s it for today. See you in another post. If you like the post then like and comment. Stay tuned to Trickbd.com for any updates.

The post ওয়েব ডেভলপারদের জন্য Amizing Front-end snippets! HTML CSS & JAVASCRIPT || পার্ট – ৬ appeared first on Trickbd.com.



source https://trickbd.com/web-development/3058806

Comments

Post a Comment

Popular posts from this blog

জনপ্রিয় এনিমে Attack on Titan Season 1 & 2 হিন্দি ডাব | দেখুন ও ডাউনলোড করুন

Attack on Titan (Shingeki no Kyojin) হল এক জনপ্রিয় জাপানি এনিমে, যা বর্তমান সময়ে অনেক জনপ্রিয়। কিছু দিন আগেই এই এনিমেটির সিজন ১ ও ২ এর অফিশিয়াল হিন্দি ডাব রিলিজ হয়েছে। আপনি হিন্দি ডবে এই এনিমেটি দেখতে চান তাহলে এই পোস্টটি আপনার জন্য! এই পোস্টটি থেকে আপনি বিনামূল্য এমিটিকে ডাউনলোড করে দেখতে পারবেন। Attack on Titan Season 1 হিন্দি ডাব Attack on Titan-এর প্রথম সিজনে আমরা দেখি, কীভাবে ইরেন ইয়েগার এবং তার বন্ধুরা ভয়ানক টাইটানদের বিরুদ্ধে লড়াই করে। হঠাৎ এক বিশাল আকারের টাইটান ওয়াল মারিয়া ভেঙে শহরে আক্রমণ চালায়, যা মানবজাতির জন্য এক মারাত্মক হুমকি হয়ে দাঁড়ায়। ইরেন প্রতিজ্ঞা করে, সে সমস্ত টাইটান ধ্বংস করবে এবং মানবতার প্রতিশোধ নেবে। সম্পূর্ণ এনিমেটিকে ডাউনলোড করে বিস্তারির কাহিনি দেখুন। সিজন ১ এর সরাসরি ডাউনলোড লিংক নিচে দিয়ে দিলাম – Pixeldrain Download Link – Zip File (5.30 GB) Mega – Zip FIle Attack on Titan Season 2 হিন্দি ডাব দ্বিতীয় সিজনে গল্প আরও রহস্যময় মোড় নেয়। নতুন নতুন টাইটানদের পরিচয় পাওয়া যায় এবং জানা যায় কিছু পরিচিত চরিত্ররাও আসলে টাইটান রূপান্তরিত। ইরেন ও তার দল মানব...
Post a Comment
Read more

Glutathione – গায়ের রঙ ফর্সা করতে কার্যকারিতা, ব্যবহার এবং সাইড ইফেক্ট সম্পর্কে সবকিছু (Skin health)

আসসালামু আলাইকুম   আজকের আলোচনায় আমরা জানবো Glutathione  এর কার্যকারিতা, ব্যবহার, এবং সাইড ইফেক্ট নিয়ে। আশা করছি আপনাদের জন্য এটি উপকারী হবে।  Glutathione এর কাজ কি? (benefits of glutathione) গ্লুটাথিওয়ন বর্তমান সময়ে, বহুল জনপ্রিয় একটি সাপ্লিমেন্ট ত্বক ফর্সা ও উজ্জ্বল করার জন্য। এছাড়াও গ্লুটাথিওয়ন (Glutathione) নেওয়ার পর শরীরের ইমিউনিটি সিস্টেম বেড়ে যায়, লিভার ডিটক্স (পরিষ্কার হয়) এবং রক্তের বিভিন্ন দুষণ সমস্যা গুলোও ঠিক করে দেয়। দেখা গেছে যে, যাদের মুখের ত্বক, শরীরের অন্যান্য অংশ থেকে, কম উজ্জল হয়ে থাকে তাও এক রকম করে দেয় গ্লুটাথিওয়ন। এক কথায় সারা শরীরের ত্বকের উপর কাজ করে। এছাড়াও আমাদের ত্বক বেশী রোদ্রে যাওয়ার ফলে কালচে (ট্যান) হয়ে যায়, এটাও দ্রুত হিল করে গ্লুটাথিওয়ন। এমনকি শরীরের বিভিন্ন ক্ষত ও দ্রুত সারিয়ে তোলে গ্লুটাথিওয়ন এর পরিমান শরীরে বেশি থাকলে। তবে কসমেটিকস জগতে গ্লুটাথিওয়ন এর একটি ফলাফল হলো স্কিন উজ্জ্বল, ও ২/৩ সেড ফর্সা করা, যার কারনে এটি বহুল পরিচিত। এটি কি সবার জন্য কাজ করে? উত্তর হচ্ছে, অনেকটাই করে। তবে যাদের ত্বক অলরেডি উজ্জ্বল, তাদের ক্ষেত্রে এতট...
Post a Comment
Read more

Capcut এ বাংলাতে লিখতে পারবেন এখন থেকে খুব সহজেই!!

আসসালামু আলাইকুম আশা করি সকলেই অনেক ভালো আছেন। আজকে আবারো আপনাদের মাঝে নতুন একটি আর্টিকেল নিয়ে হাজির হলাম। আজকে আপনাদের সাথে শেয়ার করবো কিভাবে আপনারা Capcut এপ এ বাংলা ফন্ট ব্যবহার কর‍তে পারবেন তাও আবার খুব সহজেই। আশা করবো পোস্টটি আপনাদের কাজে লাগবে। আপনারা জানেন Capcut একটা জনপ্রিয় ভিডিও এডিটিং এপ। ভিডিও এর পাশাপাশি Capcut এর বর্তমান আপডেট গুলোর দরুন এখন ফটো এডিটিং এও এই এপ এর প্রচুর ব্যবহার রয়েছে। এই এপটা খুবই জনপ্রিয় হওয়া সত্ত্বেও এই এপ এ বাংলা ফন্ট ব্যবহার করা যায় না। অনেকেই অনেক ভাবে চেষ্টা করেছেন হয় তো বাংলা ফন্ট ব্যবহার করার, কেউ পেরেছেন কেউ পারেন নি। আজকের পোস্ট টা তাদের জন্য যারা পূর্বে ব্যার্থ হয়েছিলেন। আমি ১০০% গ্যারান্টি দিচ্ছি, আজকের পোস্ট ফলো করলে আপনাদের Capcut এপ এ বাংলা ফন্ট ইউজ করতে কোনো সমস্যাই হবে না।   Capcut এপ এ বাংলা ফন্ট লেখার উপায় Capcut এপ এ বাংলা ফন্ট সরাসরি ব্যবহার করা যাবে না। তবে আপনাদের আমি আজকে যে ট্রিক্স দেখাবো সেটার মাধ্যমে একদম সহজেই Capcut এ আপনারা বাংলা ফন্ট ব্যবহার করতে পারবেন। তো চলুন কথা না বাড়িয়ে এবার মূল কাজে চলে যাই। ১. প্রথমেই Cap...
Post a Comment
Read more