hbootstrap4rtl

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Bootstrap 4 - Example 5</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <link rel="stylesheet" href="./../../bootstrap-rtl.css"> <link rel="stylesheet" href="./../style/css/vazir.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <header class="blog-header py-3"> <div class="row flex-nowrap justify-content-between align-items-center"> <div class="col-4 pt-1"> <a class="text-muted" href="#">دنبال کردن</a> </div> <div class="col-4 text-center"> <a class="h1 blog-header-logo text-dark" href="#">مجله آموزشی راکت</a> </div> <div class="col-4 d-flex justify-content-end align-items-center"> <a class="text-muted" href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mx-3"><circle cx="10.5" cy="10.5" r="7.5"></circle><line x1="21" y1="21" x2="15.8" y2="15.8"></line></svg> </a> <a class="btn btn-sm btn-outline-secondary" href="#">عضویت</a> </div> </div> </header> <div class="nav-scroller py-1 mb-2"> <nav class="nav d-flex justify-content-between"> <a class="p-2 text-muted" href="#">برنامه نویسی</a> <a class="p-2 text-muted" href="#">تجربه کاربری</a> <a class="p-2 text-muted" href="#">رابط کاربری</a> <a class="p-2 text-muted" href="#">طراحی وب</a> <a class="p-2 text-muted" href="#">گرافیک</a> <a class="p-2 text-muted" href="#">ابزار وب</a> <a class="p-2 text-muted" href="#">پی اچ پی</a> <a class="p-2 text-muted" href="#">لاراول</a> <a class="p-2 text-muted" href="#">جاوا اسکریپت</a> <a class="p-2 text-muted" href="#">الهام بخش</a> <a class="p-2 text-muted" href="#">بازاریابی</a> <a class="p-2 text-muted" href="#">کسب و کار</a> </nav> </div> <div class="jumbotron p-3 p-md-5 text-white rounded bg-dark"> <div class="col-md-6 px-0"> <h1 class="display-4 font-italic">عواقب یک وبسایت وردپرسی هک شده</h1> <p class="lead my-3">بعد از آشکار شدن اسناد مختلف پارادایس و پاناما تعداد بسیار زیادی از شرکت‌ها شروع به استخدام طراحان وب کردند. در این بین شرکت های بسیاری وجود داشت</p> <p class="lead mb-0"><a href="#" class="text-white font-weight-bold">مطالعه ادامه مطلب...</a></p> </div> </div> <div class="row mb-2"> <div class="col-md-6"> <div class="card flex-md-row mb-4 box-shadow h-md-250"> <div class="card-body d-flex flex-column align-items-start"> <strong class="d-inline-block mb-2 text-primary">طراحی وب</strong> <h3 class="mb-0"> <a class="text-dark" href="#">دوره لاراول</a> </h3> <div class="mb-1 text-muted">12 خرداد</div> <p class="card-text mb-auto">این دوره یک دوره کامل برای افرادی است که میخواهند لاراول را به درستی آموزش ببینند بعد از دوره آشنای با لاراول که بصورت رایگان</p> <a href="#">ادامه مطلب</a> </div> <img class="card-img-right flex-auto d-none d-md-block" data-src="holder.js/200x250?theme=thumb" alt="Card image cap"> </div> </div> <div class="col-md-6"> <div class="card flex-md-row mb-4 box-shadow h-md-250"> <div class="card-body d-flex flex-column align-items-start"> <strong class="d-inline-block mb-2 text-success">تجربه کاربری</strong> <h3 class="mb-0"> <a class="text-dark" href="#">دوره طراحی وب</a> </h3> <div class="mb-1 text-muted">11 خرداد</div> <p class="card-text mb-auto">ولین چیزی که با دیدن کلمه عبارات باقاعده خواهید گفت این است که آن چیست ؟ برای رسیدن به این جواب به شما پیشنهاد میکنم </p> <a href="#">ادامه مطلب</a> </div> <img class="card-img-right flex-auto d-none d-md-block" data-src="holder.js/200x250?theme=thumb" alt="Card image cap"> </div> </div> </div> </div> <main role="main" class="container"> <div class="row"> <div class="col-md-8 blog-main"> <h3 class="pb-3 mb-4 font-italic border-bottom"> مقالات سایت </h3> <div class="blog-post"> <h2 class="h2">بهترین منبع‌ها برای دریافت تصاویر باکیفیت</h2> <p class="text-muted">15 خرداد 1396 توسط <a href="#">حسام</a></p> <p>طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد. معمولا طراحان گرافیک برای صفحه‌آرایی، نخست از متن‌های آزمایشی و بی‌معنی استفاده می‌کنند تا صرفا به مشتری یا صاحب کار</p> <hr> <p>طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد. معمولا طراحان گرافیک برای صفحه‌آرایی، نخست از <a href="#">متن‌های آزمایشی</a> و بی‌معنی استفاده می‌کنند تا صرفا به مشتری یا صاحب کار</p> <blockquote> <p>طراح گرافیک از این متن به عنوان عنصری از <strong>ترکیب بندی برای پر کردن صفحه</strong> و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید</p> </blockquote> <p>طراح گرافیک از این متن به عنوان عنصری از<em> ترکیب بندی برای پر کردن صفحه</em> و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید</p> <h2>عنوان</h2> <p>طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد. معمولا طراحان گرافیک برای صفحه‌آرایی، نخست از متن‌های آزمایشی و بی‌معنی استفاده می‌کنند تا صرفا به مشتری یا صاحب کار</p> <h3>زیر عنوان</h3> <p>طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری</p> <pre><code>کد شما</code></pre> <p>طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد.</p> <h3>زیر عنوان</h3> <p>طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد. معمولا طراحان گرافیک برای صفحه‌آرایی، نخست از متن‌های آزمایشی و بی‌معنی استفاده می‌کنند تا صرفا به مشتری یا صاحب کار</p> <ul> <li>طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن</li> <li>تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن.</li> <li>خست از متن‌های آزمایشی و بی‌معنی</li> </ul> <p>طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی </p> <ol> <li>طراح گرافیک از این متن به عنوان عنصری.</li> <li>چگونگی نوع و اندازه فونت و ظاهر متن.</li> <li>قلم‌ها و اندازه‌بندی‌ها چگونه در نظر گرفته شده‌است.</li> </ol> <p>از آنجایی که طراحان عموما نویسنده متن نیستند و وظیفه رعایت حق تکثیر متون را ندارند و در همان حال کار آنها به نوعی وابسته به متن می‌باشد آنها با استفاده از محتویات ساختگی، صفحه گرافیکی خود را صفحه‌آرایی می‌کنند تا مرحله طراحی و صفحه‌بندی را به پایان برند.</p> </div> <div class="blog-post"> <h2 class="h2">نکات مهم برای تبدیل شدن به یک فریلنسر مستقل</h2> <p class="text-muted">16 اسفند 1396 توسط <a href="#">علی</a></p> <p>طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد. معمولا طراحان گرافیک برای صفحه‌آرایی، نخست از <a href="#">متن‌های آزمایشی</a> و بی‌معنی استفاده می‌کنند تا صرفا به مشتری یا صاحب کار</p> <blockquote> <p>طراح گرافیک از این متن به عنوان عنصری از <strong>ترکیب بندی برای پر کردن صفحه</strong> و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید</p> </blockquote> <p>طراح گرافیک از این متن به عنوان عنصری از<em> ترکیب بندی برای پر کردن صفحه</em> و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید</p> </div> <div class="blog-post"> <h2 class="h2">۴ چالش برای یادگیری کدنویسی</h2> <p class="text-muted">12 بهمن 1396 توسط <a href="#">حسام</a></p> <p>طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد. معمولا طراحان گرافیک برای صفحه‌آرایی، نخست از متن‌های آزمایشی و بی‌معنی استفاده می‌کنند تا صرفا به مشتری یا صاحب کار</p> <ul> <li>طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن</li> <li>تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن.</li> <li>خست از متن‌های آزمایشی و بی‌معنی</li> </ul> <p>طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی </p> </div> <nav class="blog-pagination"> <a class="btn btn-outline-primary" href="#">قدیمی تر</a> <a class="btn btn-outline-secondary disabled" href="#">جدید تر</a> </nav> </div> <aside class="col-md-4 blog-sidebar"> <div class="p-3 mb-3 bg-light rounded"> <h4 class="font-italic">درباره ما</h4> <p class="mb-0">راکت یکی از پرتلاش‌ترین و بروزترین وبسایت های آموزشی در سطح ایران است که همیشه تلاش کرده تا بتواند جدیدترین و بروزترین مقالات و دوره‌های آموزشی را در اختیار علاقه‌مندان ایرانی قرار دهد. تبدیل کردن برنامه نویسان ایرانی به بهترین برنامه نویسان جهان هدف ماست.</p> </div> <div class="p-3"> <h4 class="font-italic">آرشیو مطالب</h4> <ol class="list-unstyled mb-0"> <li><a href="#">اسفند 1396</a></li> <li><a href="#">بهمن 1396</a></li> <li><a href="#">دی 1396</a></li> <li><a href="#">آذر 1396</a></li> <li><a href="#">آبان 1396</a></li> <li><a href="#">مهر 1396</a></li> <li><a href="#">شهریور 1396</a></li> <li><a href="#">مرداد 1396</a></li> <li><a href="#">تیر 1396</a></li> <li><a href="#">خرداد 1396</a></li> <li><a href="#">اردیبهشت 1396</a></li> </ol> </div> <div class="p-3"> <h4 class="font-italic">شبکه های اجتماعی</h4> <ol class="list-unstyled"> <li><a href="#">گیت هاب</a></li> <li><a href="#">توئیتر</a></li> <li><a href="#">فیس بوک</a></li> </ol> </div> </aside> </div> </main> <footer class="blog-footer"> <p>پیاده سازی شده توسط <a href="https://getbootstrap.com/">مجله آموزشی راکت</a></p> <p> <a href="#">بازگشت به بالای صفحه</a> </p> </footer> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="./../style/js/holder.min.js"></script> <script src="js/script.js"></script> </body> </html>