"vivek saroch bootstrap"
Bootstrap 3.1.0 Snippet by viveksaroch

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <html> <head> <meta name="viewport" content="width=device-width, intial-scale=1" /> <meta name="author" content="vivek saroch" /> <meta name="description" content="java, orcale, php, uiux" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link href="assets/css/style.css" type="text/css" rel="stylesheet" /> <link href="assets/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" /> </head> <header> <div class="main-nav"> <nav class="navbar navbar-default" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">vivek saroch</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Home</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Login <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div> </nav> </div> </header> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-3"> <div class="main-box"> <div class="arrow"> <div class="phone-box"> <i class="fa fa-eye" style="font-size:45px;color:red;" aria-hidden="true"></i> <br>7837965003 </div> </div> </div> </div> <div class="col-md-3"> <div class="box-second"> <div class="arrow-size"> <div class="logo-popup"> <ul class="address"> <li class="cool-link"><b>vivek</b> </li> <li class="cool-link"> Address : Sco 53, 54, 55 </li> <li class="cool-link">sec 17D Chandigarh</li> <li class="cool-link">Punjab</li> </ul> </div> </div> </div> </div> <div class="col-md-3"> <div class="box-second"> <div class="arrow-size"> <div class="logo-popup"> <ul class="address"> <li class="cool-link"><b>vivek</b> </li> <li class="cool-link"> summerhill shimla </li> <li class="cool-link">himachal pardesh</li> <li class="cool-link">india</li> </ul> </div> </div> </div> </div> <div class="col-md-3"> <div class="box-second"> <div class="arrow-size"> <div class="logo-popup"> <ul class="address"> <li class="cool-link"><b>vivek</b> </li> <li class="cool-link"> Address : Sco 53, 54, 55 </li> <li class="cool-link">sec 17D Chandigarh</li> <li class="cool-link">Punjab</li> </ul> </div> </div> </div> </div> </div> <div class="row" style="margin-top:100px;"> <div class="col-md-4"> <div class="image-box-second"> <img width="100%" src="assets/images/seo-banner-1.jpg" /> <div class="content-hover"> welcome to insonix welcome to insonix welcome to insonix welcome to insonix welcome to insonix welcome to insonix welcome to insonix </div> </div> </div> <div class="col-md-4"> <div class="image-box-second"> <img width="100%" src="assets/images/seo-banner-1.jpg" /> <div class="content-hover"> welcome to insonix welcome to insonix welcome to insonix welcome to insonix welcome to insonix welcome to insonix welcome to insonix </div> </div> </div> <div class="col-md-4"> <div class="image-box-second"> <img width="100%" src="assets/images/seo-banner-1.jpg" /> <div class="content-hover"> welcome to insonix welcome to insonix welcome to insonix welcome to insonix welcome to insonix welcome to insonix welcome to insonix </div> </div> </div> </div> <div class="row" style="margin-top:50px;"> <div class="menu-effect"> <ul> <li class="effect-border">HOME</li> <li class="effect-border">ABOUT US</li> <li class="effect-border">CASE STUDY</li> <li class="effect-border">CONTACT US</li> </ul> </div> </div> <div class="row" style="margin-top:50px;"> <a class="chat-icon"> Live Support </a> </div> </div> <section id="about-us"> </section> </body> <script src="assets/js/3.3.1/jquery.min.js"></script> <script src="assets/bootstrap/js/bootstrap.js"></script> </html>
.navbar.navbar-default { background: #262b35; } .main-nav .navbar-default .navbar-nav > li > a { color: #fff; } .main-nav .navbar-default .navbar-brand { color: #fff; } .box { text-align: center; border: 1px dotted; padding: 50px; } divs { width: 100px; height: 100px; background: red; -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */ transition: height 2s; } divss:hover { height: 300px; } .phone-box { width:200px; height:100px; line-height:40px; font-size:15px; color:red; display:inline-block; background:#fff; text-align:center; border:4px solid red; vertical-align: middle; } .arrow:before, .arrow:after { content:""; display: inline-block; width:0; height:0; border:25px solid transparent; vertical-align: middle; } .arrow:before { border-top-color: red; border-bottom-color: red; border-right-color: red; } .arrow:after { border-left-color: red; } .arrow { font-size:0px } .main-box:hover .arrow:after { border-left-color: #000; } .main-box:hover .phone-box { border:4px solid #000; } .arrow-size { font-size:0px } .arrow-size:before, .arrow-size:after { content:""; width:0px; height:0px; vertical-align:middle; border: 10px solid transparent; display: inline-block; } .logo-popup { width: 200px; height: 128px; color: #fff; background-color: red; vertical-align: middle; display: inline-block; font-size: 14px; PADDING: 10PX; -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */ transition: width 2s; } .address { list-style: none; margin-left: 0px; padding-left: 19px; line-height: 26px; } .arrow-size:after { border-left-color: red; } .box-second:hover .arrow-size:after { border-left-color: #000; } .box-second:hover .logo-popup { background: black; width:210px; } .cool-link { display: inline-block; color: #fff; text-decoration: none; } .cool-link::after { content: ''; display: block; width: 0px; height: 2px; background: #fff; transition: width .3s; } .cool-link:hover::after { width: 100%; transition: width .3s; } .content-hover { transition: transform 2s; } .image-box-second { min-height: 300px; overflow: hidden; height: 300px; position: relative; border: 13px solid #000; } .content-hover { position: absolute; bottom: -263px; background: #000; height:280px; } .image-box-second:hover .content-hover { bottom: 0px; color:#fff; height:270px; height: 255px; opacity: 0.9; transform: rotate(360deg); } .menu-effect ul li { float:left; list-style:none; width:180px; text-align: center; cursor:pointer; } .effect-border:after{ content:""; display:block; width:0px; height:5px; background:#000; transition: width .4s; text-align: center; cursor:pointer; } .effect-border:hover::after{ width:100%; transition: width .4s; text-align: center; cursor:pointer; }

Related: See More

Now UI Kit PRO

Questions / Comments: