hbootstrap4rtl
Version:
bootstrap v4 right to left
122 lines (117 loc) • 6.49 kB
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 2</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="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom box-shadow">
<h5 class="my-0 ml-md-auto font-weight-normal">مجله آموزشی راکت</h5>
<nav class="my-2 my-md-0 ml-md-3">
<a class="p-2 text-dark" href="#">ویژگی ها</a>
<a class="p-2 text-dark" href="#">قوانین</a>
<a class="p-2 text-dark" href="#">پشتیبانی</a>
<a class="p-2 text-dark" href="#">پنل ها</a>
</nav>
<a class="btn btn-outline-primary" href="#">عضویت</a>
</div>
<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
<h1 class="display-4">پنل ها</h1>
<p class="lead">در عرض چند ثانیه در راکت عضو شوید تا بتوانید از امکانات سایت بصورت کامل استفاده کنید . همه این امکانات در کنار هم قرار گرفته اند تا به شما کمک کنند به ساده ترین روش , جدیدترین و کاربردی ترین زبان ها و فریمورک های روز جهان رو یاد بگیرید</p>
</div>
<div class="container">
<div class="card-deck mb-3 text-center">
<div class="card mb-4 box-shadow">
<div class="card-header">
<h4 class="my-0 font-weight-normal">رایگان</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ ماهیانه</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>10 کاربر</li>
<li>2 گیگ فضایی ذخیره سازی</li>
<li>پشتیبانی ایمیلی</li>
<li>دسترسی به مرکز راهنما</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-outline-primary">عضویت برای رایگان</button>
</div>
</div>
<div class="card mb-4 box-shadow">
<div class="card-header">
<h4 class="my-0 font-weight-normal">اختصاصی</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ ماهیانه</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>20 کاربر</li>
<li>10 گیگ فضایی ذخیره سازی</li>
<li>پشیبانی اختصاصی ایمیل</li>
<li>دسترسی به مرکز راهنما</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-primary">خریداری</button>
</div>
</div>
<div class="card mb-4 box-shadow">
<div class="card-header">
<h4 class="my-0 font-weight-normal">شرکتی</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$29 <small class="text-muted">/ ماهیانه</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>30 کاربر</li>
<li>15 گیگ فضایی ذخیره سازی</li>
<li>پشتیبانی ایمیل و تلفن</li>
<li>دسترسی به مرکز راهنما</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-primary">تماس بگیرید</button>
</div>
</div>
</div>
<footer class="pt-4 my-md-5 pt-md-5 border-top">
<div class="row">
<div class="col-12 col-md">
<img class="mb-2" src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" alt="" width="24" height="24">
<small class="d-block mb-3 text-muted">© 1396-1397</small>
</div>
<div class="col-6 col-md">
<h5>امکانات</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">استفاده آسان</a></li>
<li><a class="text-muted" href="#">ابزارات مختلف</a></li>
<li><a class="text-muted" href="#">استفاده تیمی</a></li>
<li><a class="text-muted" href="#">برنامه نویسان پیشرفته</a></li>
<li><a class="text-muted" href="#">لایف تایم مناسب</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>منابع</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">منابع آموزشی</a></li>
<li><a class="text-muted" href="#">ویدیوهای آموزشی</a></li>
<li><a class="text-muted" href="#">مقالات</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>درباره ما</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">تیم</a></li>
<li><a class="text-muted" href="#">آدرس ما</a></li>
<li><a class="text-muted" href="#">حریم خصوصی</a></li>
<li><a class="text-muted" href="#">تیم ما</a></li>
</ul>
</div>
</div>
</footer>
</div>
<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="js/script.js"></script>
</body>
</html>