<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous"> <section class="container-fluid sec-download"> <div class="container"> <div class="row"> <div class="col"> <h3>مهمترین دانلود ها</h3> </div><!--.col--> </div><!--.row--> <div class="row"> <div class="col-md-3"> <ul class="nav nav-pills flex-column"> <li class="nav-item w-100"> <a class="nav-link active "> <span class="d-inline-block">فیلم</span> <i class="fab fa-youtube float-left"></i> </a> </li> <li class="nav-item"><i class="fas fa-circle"></i><a href="#">برای صفحه‌آرایی</a></li> <li class="nav-item"><i class="fas fa-circle"></i><a href="#">برای صفحه‌آرایی</a></li> <li class="nav-item"><i class="fas fa-circle"></i><a href="#">برای صفحه‌آرایی</a></li> <li class="nav-item"><i class="fas fa-circle"></i><a href="#">برای صفحه‌آرایی</a></li> </ul> </div><!--.col--> <div class="col-md-3"> <ul class="nav nav-pills flex-column"> <li class="nav-item w-100"> <a class="nav-link active "> <span class="d-inline-block">متن</span> <i class="fas fa-file-alt float-left"></i> </a> </li> <li class="nav-item"><i class="fas fa-circle"></i><a href="#">برای صفحه‌آرایی</a></li> <li class="nav-item"><i class="fas fa-circle"></i><a href="#">برای صفحه‌آرایی</a></li> <li class="nav-item"><i class="fas fa-circle"></i><a href="#">برای صفحه‌آرایی</a></li> <li class="nav-item"><i class="fas fa-circle"></i><a href="#">برای صفحه‌آرایی</a></li> </ul> </div><!--.col--> <div class="col-md-3"> <ul class="nav nav-pills flex-column"> <li class="nav-item w-100"> <a class="nav-link active "> <span class="d-inline-block">صوت</span> <i class="fas fa-music float-left"></i> </a> </li> <li class="nav-item"><i class="fas fa-circle"></i><a href="#">برای صفحه‌آرایی</a></li> <li class="nav-item"><i class="fas fa-circle"></i><a href="#">برای صفحه‌آرایی</a></li> <li class="nav-item"><i class="fas fa-circle"></i><a href="#">برای صفحه‌آرایی</a></li> <li class="nav-item"><i class="fas fa-circle"></i><a href="#">برای صفحه‌آرایی</a></li> </ul> </div><!--.col--> <div class="col-md-3"> <ul class="nav nav-pills flex-column"> <li class="nav-item w-100"> <a class="nav-link active "> <span class="d-inline-block">عکس</span> <i class="far fa-image float-left"></i> </a> </li> <li class="nav-item"><i class="fas fa-circle"></i><a href="#">برای صفحه‌آرایی</a></li> <li class="nav-item"><i class="fas fa-circle"></i><a href="#">برای صفحه‌آرایی</a></li> <li class="nav-item"><i class="fas fa-circle"></i><a href="#">برای صفحه‌آرایی</a></li> <li class="nav-item"><i class="fas fa-circle"></i><a href="#">برای صفحه‌آرایی</a></li> </ul> </div><!--.col--> </div> </div> </section>

.sec-download{ background: #fafafa; direction: rtl; text-align: right; color: #000; padding-top: 2.5rem; padding-bottom: 2rem; } .sec-download h3{ margin-bottom: 2rem; } .sec-download li a.active { background-color: #f57921 !important; margin-bottom: 0.5rem; } .sec-download li a.active:hover { color: #fff !important; } .sec-download li a.active i{ font-size: 1.5rem; } .sec-download li a{ font-family:iranyekan_light; color: #000000; padding-right: 1rem; } .sec-download li i{ font-size: 0.3rem; }