<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ---------->
<body>
<header>
<!-- ======================================Navigation Bar================================================= -->
<nav class="navbar navbar-expand-lg navStyle">
<a class="brand-navbar"><span class="myheader">STYLISH</span></a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#mainMenu">
<span><i class="fas fa-align-right iconStyle"></i></span>
</button>
<div class="collapse navbar-collapse" id="mainMenu">
<ul class="navbar-nav ml-auto navList">
<li class="nav-item active"><a href="#" class="nav-link"><i class="fas fa-home"></i>HOME<span class="sr-only">(current)</span></a></li>
<li class="nav-item">
<a href="services.html" class="nav-link"><i class="fas fa-cogs"></i>Services</a>
</li>
<li class="nav-item">
<a href="portfolio.html" class="nav-link"><i class="fas fa-briefcase"></i>Portfolio</a>
</li>
<li class="nav-item">
<a href="contact.html" class="nav-link"><i class="fas fa-phone"></i>Contact</a>
</li>
<li class="nav-item">
<a href="about.html" class="nav-link"><i class="fas fa-users"></i>About</a>
</li>
</ul>
</div>
</nav>
<!-- ======================================carousel================================================= -->
</header>
</body>
<br/>
<div class="container">
<div class="row col-lg-12">
<div class="card col-lg-6">
<h2 class="card-header">Stylish UI Cards </h2>
</div>
</div>
</div>
.card{
background-color:white-smoke;
background-image: linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);
}
.card-header{
color:white;
text-align:center;
}
.card-header: Hover {
color: blue;
}
body
{
font-family: 'Montserrat', sans-serif;
}
.myheader{
color:white;
}
.navbar
{
background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
background-blend-mode: multiply,multiply;
}
.navbar .brand-navbar img:hover
{
opacity: 0.7;
}
.navbar ul
{
padding: 0px 30px 0px 0px;
}
.navbar ul li a{
color: white;
margin: 10px 0px 0px 10px;
text-transform: uppercase;
font-size: 12px;
}
.navbar ul li a .fas{
padding-right:5px;
padding-left:5px;
}
.navbar ul li a:hover{
color: #15b000;
}
.navbar ul li.active > a {
color: #15b000;
font-weight: bold;
font-size: 12px;
border-left: 3px solid #15b000;
border-radius: 40px;
}
.iconStyle
{
color: #15b000;
}
/*=====================================Slier============================================*/
header .carousel-inner .item
{
height: 100vh;
}
.carousel-caption
{
padding-bottom: 130px;
}
.carousel-caption h1
{
font-size: 70px;
font-weight: 1000;
text-shadow: 3px 3px #15b000;;
text-transform: uppercase;
animation-delay: 1s;
animation-duration: 2s;
}
.carousel-caption p
{
animation-delay: 1s;
}
.brand-navbar .span{
color:white;
}
.carousel-caption .btn
{
animation-delay: 1s;
border-radius: 20px;
background-color: transparent;
border: 2px solid white;
color: white;
margin-top: 20px;
animation-duration: 2s;
}
.carousel-control-prev {
width: 48px;
height: 48px;
top: auto;
bottom: 0;
font-size: 2rem;
}
.carousel-control-next {
width: 48px;
height: 48px;
top: auto;
bottom: 0;
font-size: 2rem;
}
/*=====================================Slier============================================*/
@media only screen and (max-width:480px)
{
.carousel-caption
{
padding-bottom: 20px;
}
.carousel-caption h1
{
font-size: 20px;
font-weight: 1000;
text-shadow: 3px 3px #15b000;;
text-transform: uppercase;
animation-delay: 1s;
animation-duration: 2s;
}
.carousel-caption p
{
animation-delay: 1s;
font-size: 10px;
}
.carousel-caption .btn
{
animation-delay: 1s;
border-radius: 20px;
background-color: transparent;
border: 2px solid white;
color: white;
margin-top: 5px;
animation-duration: 2s;
padding: 5px;
font-size: 10px;
}
}
