কখনো কখনো আপনার ওয়েব পেজের ফ্লো তৈরি করার সময়, আপনি আপনার কন্টেন্টকে ভিজুয়ালি ডিস্টিংक्ट অংশে ভাগ করার কোনো উপায় খুঁজবেন। এই আর্টিকেলে, আমরা HTML-এ হরিজেন্টাল রুল শিখব এবং আপনার মার্কআপে সেটি কীভাবে রাখবেন যাতে আপনি আপনার ওয়েব পেজকে আরও আকর্ষণীয় এবং ইউজার-ফ্রেন্ডলি করতে পারেন।
<hr> HTML এলিমেন্টকে যেকোনো অন্য HTML এলিমেন্টের মতো CSS ব্যবহার করে স্টাইল করা যায়। কনভেনশন হল এটি একটি নন-ক্লোজিং ট্যাগ (<hr>) নাকি সেলফ-ক্লোজিং ট্যাগ (<hr />), কিন্তু মার্কআপ দুভাবেই একই রকম পড়া হয়। এটি একটি ব্লক-লেভেল এলিমেন্ট হিসেবে ডিসপ্লে হয় যেন ওয়াইড-লেভেল ব্রাউজার সাপোর্ট আছে এবং আপনার ওয়েব পেজে টপিক পরিবর্তন ইন্ডিকেট করে।
আমি মনে করি CSS-এ এক্সপেরিমেন্ট করে দেখতে সেটি কী করে সেটি বোঝা বেস্ট। নিচের কোড স্যান্ডবক্স একটি খুব বেসিক HTML পেজ ইলাস্ট্রেট করে কিছু CSS সহ যা HTML <hr> এলিমেন্ট ডেকোরেট করতে ব্যবহৃত হয়।
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>hr</title> <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200;400;700&display=swap" rel="stylesheet" /> <style> body { font-family: 'Roboto Mono'; } nav { display: flex; flex-flow: row wrap; justify-content: space-between; width: 100%; height: 50px; margin-left: 20px; } nav > div { display: flex; justify-content: space-around; align-items: center; width: 40%; } nav > div > a { text-decoration: none; color: black; } nav > a { text-decoration: none; font-variant: small-caps; align-self: center; } hr { border: none; border-top: 5px double black; color: #333; overflow: visible; text-align: center; height: 5px; } hr::after { content: '😀😀😀😀'; padding: 0 4px; position: relative; top: -18px; background: #fff; } section { width: 100%; display: flex; align-items: center; margin: 0 auto; } section > div { width: 50%; display: flex; justify-content: center; } section > h1 { width: 50%; text-align: center; } section > div > img { height: 350px; object-fit:cover; } #diff-style-hr { border: none; border-top: 3px dotted black;color: #333; overflow:visible; text-align: center; height: 5px; } #diff-style-hr::after { content: ""; padding: 0; } .lower-container { display: flex; flex-flow: row wrap; } .lower-main { display: flex; flex-direction: column; width: 40%; margin: 0 auto; } h4 { align-self: flex-start; } </style> </head> <body> <nav> <a href="#"> <div> Logo Goes Here </div> </a> <div> <a href=""> About Us </a> <a href=""> Services </a> <a href=""> Contact Us </a> <a href=""> Login </a> </div> </nav> <hr /> <main> <section> <div> <img src="https://images.unsplash.com/photo-1516259762381-22954d7d3ad2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2266&q=80" alt="code"/> </div> <h1>I'm a business name</h1> </section> <hr id="diff-style-hr"> <div class="lower-container"> <section class="lower-main"> <h4>I'm a headline</h4> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p> </section> <section class="lower-main"> <h4>I'm a headline</h4> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p> </section> <section class="lower-main"> <h4>I'm a headline</h4> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p> </section> <section class="lower-main"> <h4>I'm a headline</h4> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius rem ullam velit provident itaque, tenetur eveniet, accusamus dolorum rerum ipsam facilis consequatur odio ut consequuntur voluptate doloremque eligendi error.</p> </section> </div> </main> </body> </html>
বাহ! এখন আপনার কাছে <hr> ব্যবহার করে একটি চমৎকার সাইট বানাতে প্রয়োজনীয় টুলস আছে।
