background
سلام خسته نباشید ... میخوام بببینم چرا برای من رنگ linear-gradient روی navbar تاتیری ندارد و فقط روی هدر اعمال می شود؟
هم این که چرا colapse در حالت متوسط به پایین وقتی باز می شود لیست ایتم ها روی صفحه اصلی هست ؟
<!DOCTYPE html>
<html lang=" en">
<head>
<!-- Required meta tags -->
<meta charset="UTF-۸">
<meta name="viewport" content="width=device-width, initial-scale=۱, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="style/css/bootstrap.min.css">
<link rel="stylesheet" href="style/css/bootstrap-rtl.css">
<link rel="stylesheet" href="style/css/vazir.css">
<!-- Main css -->
<link rel="stylesheet" href="style/css/mobiles.css">
<title> قالب اپلیکیشن موبایل</title>
</head>
<body>
<div class="nav-menu fixed-top">
<div class="container">
<div class="row">
<div class="col">
<nav class="navbar navbar-dark navbar-expand-lg">
<a href="#" class="navbar-brand "> <img src="img/logo.png" alt="roocket"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav">
<li class="nav-item"> <a class="nav-link active" href="#home">صفحه اصلی</a> </li>
<li class="nav-item"> <a class="nav-link" href="#features">مشخصات</a> </li>
<li class="nav-item"> <a class="nav-link" href="#gallery">گالری</a> </li>
<li class="nav-item"> <a class="nav-link" href="#pricing">پنل‌ها</a> </li>
<li class="nav-item"> <a class="nav-link" href="#contact">ارتباط با ما</a> </li>
<li class="nav-item"> <a class="btn btn-outline-light" href="#">دانلود</a> </li>
</ul>
</div><!-- collapse -->
</nav><!--nav -->
</div><!-- col -->
</div> <!--row -->
</div><!-- container -->
</div><!-- nav-menu -->
<!-- header -->
<header class=" bg-gradient text-center" id="home">
<div class="container mt-۵">
<h۱>صفحه هدف اپلیکیشن موبایل</h۱>
<p class="tagline">در دنیای امروز یکی یادگیری مهارت جدید بسیار آسان شده است، اینبار با اپلیکیشن ما سادتر از گذشته یاد بگیرید</p>
</div>
<div class="img-hoder mt-۳">
<img src="img/iphonex.png" alt="phone" class="img-fluid ">
</div>
</header>
<!--get bootstrap ادرس از سایت -->
<!-- jQuery and Bootstrap -->
<script src="https://code.jquery.com/jquery-۳.۳.۱.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/۱.۱۴.۷/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/۴.۳.۱/js/bootstrap.min.js"></script>
<!-- Custom JS -->
<script src="style/js/script.js"></script>
</body>
</html>
body{
font-family: 'Vazir', Vazir, Tahoma, Arial, sans-serif !important;
position: relative;
direction:rtl;
text-align:right;
}
a{
color:#e۳۸cb۷;
}
a:hover,
a:focus{
color:#d۶۶۱۹c;
}
h۱{
font-size: ۶۰px;
font-weight: ۳۰۰;
letter-spacing: -۱px;
margin-bottom: ۱.۵rem;
}
h۲{
font-size: ۴۵px;
font-weight: ۳۰۰;
color:#۶۳۳۹۹۱;
letter-spacing: -۱px;
margin-bottom: ۱.۵rem;
}
.btn{
font-size: ۱۲px;
font-weight:۴۰۰;
text-transform: uppercase;
padding: ۰.۳۷rem ۱.۳۵rem;
transition:all .۳s ease ;
}
.btn-outline-light:hover{
color:#d۶۶۱۹c;
}
/* ------------------------------------
Navbar
--------------------------------------*/
.nav-menu {
padding: ۱rem ۰;
transition: all .۳s ease;/* ??????????????? */
}
.nav-menu.is-scrolling,
.nav-menu.menu-is-open {
background-color: rgb(۷۴,۱۳,۱۴۳);
background: linear-gradient(۱۳۵deg , rgb(۷۴,۱۳,۱۴۳) ۰% , rgb(۲۵۰,۴۲,۱۴۳) ۱۰۰%);
box-shadow: ۰px ۵px ۲۳px ۰px rgba(۰, ۰, ۰, ۰.۱);
}
.nav-menu.is-scrolling {
padding: ۰;
}
.navbar-nav .navbar-link{
position: relative;
}
/* min-width */
@media (min-width : ۹۹۲px) {
.navbar-expand-lg .navbar-nav .navbar-link{
font-size: ۱۴px;
padding-right: ۱rem;
padding-left: ۱rem;
}
.navbar-expand-lg .navbar-nav .navbar-link.active::after{
content:"";
border-bottom: ۲px solid #fff;
left:۱rem;
right:۱rem;
bottom:۵px;
height:۱px;
position: absolute;
}
}
@media (max-width:۹۹۱px){
.navbar-nav .nav-item{
text-align: center;
}
}
/*----------------------------
header
-------------------------------*/
header {
padding-top:۱۰۰px ۰ ۰;
color:#fff;
}
.bg-gradient{
background-image: linear-gradient(۱۳۵deg , rgba(۶۰,۸,۱۱۸,.۸) ۰% , rgba(۲۵۰,۰,۱۱۸,۰.۸) ۱۰۰%);
}
.tagline{
margin:۰ auto;
font-size: ۲۳px;
font-weight:۳۰۰;
color: #ffb۸f۶;
max-width: ۸۰۰px;
}
.img-hoder {
height: ۰;
padding-bottom: ۳۳%;
overflow: hidden
}
@media (max-width : ۱۲۰۰px) {
.img-hoder {
padding-bottom: ۵۰%;
}
}
@media (max-width : ۷۶۷px) {
.img-hoder {
padding-bottom: ۱۰۰%;
}
}
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
ثبت پرسش جدید
