"Stylish Ui Cards"
Bootstrap 4.1.1 Snippet by QinisoMazibuko

<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; } }

Related: See More


Questions / Comments: