"fLuX blog v1.1"
Bootstrap 3.3.0 Snippet by hkkcngz

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centered"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="navbar-brand navbar-brand-centered">fLuX Blog</div> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="navbar-brand-centered"> <ul class="nav navbar-nav"> <li><a href="#">BAŞLANGIÇ</a></li> <li><a href="#">HAKKINDA</a></li> <li><a href="#">İNCELEYİN</a></li> <li><a href="#">SSS</a></li> <li><a href="#">İLETİŞİM</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-language" aria-hidden="true"></i> DİL <span class="badge">4</span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#"><i class="fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-google-plus"></i></a></li> </ul> </li> <li><a href="#">ÜCRETSİZ ÜYE OLUN</a></li> <li><a href="#">GİRİŞ YAPIN</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <header id="header"> <div class="slider"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="http://placehold.it/1200x400/F34336/F34336&text=WORDPRESS THEME DEVELOPER"> </div> <div class="item"> <img src="http://placehold.it/1200x400/20BFA9/ffffff&text=CLEAN %26 SMART"> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="fa fa-angle-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="fa fa-angle-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div><!--slider--> <nav class="navbar navbar-default"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <a class="navbar-bas" href="#"><img class="img-responsive" src="http://www.hakkicengiz.com/wp-content/themes/hkkcngzz/img/avatar110.jpg"></a> <span class="site-name"><b>Hakkı</b> Cengiz</span> <span class="site-description">worpress theme developer</span> </div> <div id="wrap"> <form action="" autocomplete="on"> <input id="search" name="search" type="text" placeholder="What're we looking for ?"> <input id="search_submit" value="Rechercher" type="submit"> </form> </div> </nav> </header><!--/#HEADER--> <div class="container"> <div class="row"> <div class="col-lg-8 col-md-8 col-sm-9 col-xs-12"> <article> <div class="row"> <div class="col-sm-6 col-md-4"> <figure> <img src="http://usbcode.ir/wp-content/uploads/2017/03/bootstrap.jpg"> </figure> </div> <div class="col-sm-6 col-md-8"> <span class="label label-default pull-right"><i class="glyphicon glyphicon-comment"></i>50</span> <h4>Raymond Dragon</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <div class="content-footer"><section> <i class="glyphicon glyphicon-folder-open"></i>Bootstrap <i class="glyphicon glyphicon-user user-small-img"></i>RaymondDragon <i class="glyphicon glyphicon-calendar"></i>1395/12/21 <i class="glyphicon glyphicon-eye-open"></i>10000 <a href="#" class="btn btn-default btn-sm pull-right">More ... </a> </section> <div class="user-ditels"> <div class="user-img"><img src="http://www.hakkicengiz.com/wp-content/themes/hkkcngzz/img/avatar110.jpg" class="img-responsive"></div> <span class="user-full-ditels"> <h3>Hakkı Cengiz</h3> <p>Web & Graphics Designer</p> </span> <div class="social-icon"> <a href="#"><i class="fa fa-facebook" data-toggle="tooltip" data-placement="bottom" title="Facebook"></i></a> <a href="#"><i class="fa fa-twitter" data-toggle="tooltip" data-placement="bottom" title="Twitter"></i></a> <a href="#"><i class="fa fa-google-plus" data-toggle="tooltip" data-placement="bottom" title="Google Plus"></i></a> <a href="#"><i class="fa fa-youtube" data-toggle="tooltip" data-placement="bottom" title="Youtube"></i></a> <a href="#"><i class="fa fa-github" data-toggle="tooltip" data-placement="bottom" title="Github"></i></a> </div> </div> </div> </div> </div> </article> <article> <div class="row"> <div class="col-sm-6 col-md-4"> <figure> <img src="http://usbcode.ir/wp-content/uploads/2017/03/bootstrap.jpg"> </figure> </div> <div class="col-sm-6 col-md-8"> <span class="label label-default pull-right"><i class="glyphicon glyphicon-comment"></i>50</span> <h4>Raymond Dragon</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <section> <i class="glyphicon glyphicon-folder-open"></i>Bootstrap <i class="glyphicon glyphicon-user"></i>RaymondDragon <i class="glyphicon glyphicon-calendar"></i>1395/12/21 <i class="glyphicon glyphicon-eye-open"></i>10000 <a href="#" class="btn btn-default btn-sm pull-right">More ... </a> </section> </div> </div> </article> <article> <div class="row"> <div class="col-sm-6 col-md-4"> <figure> <img src="http://usbcode.ir/wp-content/uploads/2017/03/bootstrap.jpg"> </figure> </div> <div class="col-sm-6 col-md-8"> <span class="label label-default pull-right"><i class="glyphicon glyphicon-comment"></i>50</span> <h4>Raymond Dragon</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <section> <i class="glyphicon glyphicon-folder-open"></i>Bootstrap <i class="glyphicon glyphicon-user"></i>RaymondDragon <i class="glyphicon glyphicon-calendar"></i>1395/12/21 <i class="glyphicon glyphicon-eye-open"></i>10000 <a href="#" class="btn btn-default btn-sm pull-right">More ... </a> </section> </div> </div> </article> <article> <div class="row"> <div class="col-sm-6 col-md-4"> <figure> <img src="http://usbcode.ir/wp-content/uploads/2017/03/bootstrap.jpg"> </figure> </div> <div class="col-sm-6 col-md-8"> <span class="label label-default pull-right"><i class="glyphicon glyphicon-comment"></i>50</span> <h4>Raymond Dragon</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <section> <i class="glyphicon glyphicon-folder-open"></i>Bootstrap <i class="glyphicon glyphicon-user"></i>RaymondDragon <i class="glyphicon glyphicon-calendar"></i>1395/12/21 <i class="glyphicon glyphicon-eye-open"></i>10000 <a href="#" class="btn btn-default btn-sm pull-right">More ... </a> </section> </div> </div> </article> <article> <div class="row"> <div class="col-sm-6 col-md-4"> <figure> <img src="http://usbcode.ir/wp-content/uploads/2017/03/bootstrap.jpg"> </figure> </div> <div class="col-sm-6 col-md-8"> <span class="label label-default pull-right"><i class="glyphicon glyphicon-comment"></i>50</span> <h4>Raymond Dragon</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <section> <i class="glyphicon glyphicon-folder-open"></i>Bootstrap <i class="glyphicon glyphicon-user"></i>RaymondDragon <i class="glyphicon glyphicon-calendar"></i>1395/12/21 <i class="glyphicon glyphicon-eye-open"></i>10000 <a href="#" class="btn btn-default btn-sm pull-right">More ... </a> </section> </div> </div> </article> <article> <div class="row"> <div class="col-sm-6 col-md-4"> <figure> <img src="http://usbcode.ir/wp-content/uploads/2017/03/bootstrap.jpg"> </figure> </div> <div class="col-sm-6 col-md-8"> <span class="label label-default pull-right"><i class="glyphicon glyphicon-comment"></i>50</span> <h4>Raymond Dragon</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <section> <i class="glyphicon glyphicon-folder-open"></i>Bootstrap <i class="glyphicon glyphicon-user"></i>RaymondDragon <i class="glyphicon glyphicon-calendar"></i>1395/12/21 <i class="glyphicon glyphicon-eye-open"></i>10000 <a href="#" class="btn btn-default btn-sm pull-right">More ... </a> </section> </div> </div> </article> </div> <div class="col-lg-4 col-md-4"> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="tab-row"> <h2 class="title-widget-sidebar text-capitalize">Populer Posts</h2> <div class="befor-widget"> <div class="populat-post-tab"> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"> <a href="#home" aria-controls="home" role="tab" data-toggle="tab">Popular</a> </li> <li role="presentation"> <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Latest</a> </li> <li role="presentation"> <a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Comments</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home"> <div class="tab-post-list"> <div class="tab-post-list-wrap clearfix"> <div class="tab-post-thumb pull-left"> <figure> <a href="single.html"> <img src="http://placehold.it/150x150/018EBB/ffffff/?text=Popular+Post" alt="Post thumb"> </a> </figure> </div> <div class="tab-post-title"> <h6><a href="single.html">Standard Post Type</a> </h6> <span>May 10, 2014</span> </div> </div> <div class="tab-post-list-wrap clearfix"> <div class="tab-post-thumb pull-left"> <figure> <a href="single.html"> <img src="http://placehold.it/150x150/018EBB/ffffff/?text=Popular+Post" alt="Post thumb"> </a> </figure> </div> <div class="tab-post-title"> <h6><a href="single.html">Do You Know the ABC</a> </h6> <span>May 10, 2014</span> </div> </div> <div class="tab-post-list-wrap clearfix"> <div class="tab-post-thumb pull-left"> <figure> <a href="single.html"> <img src="http://placehold.it/150x150/018EBB/ffffff/?text=Popular+Post" alt="Post thumb"> </a> </figure> </div> <div class="tab-post-title"> <h6><a href="single.html">How to Handle Your Kids Mystery Ailments</a></h6> <span>May 10, 2014</span> </div> </div> </div> </div> <div role="tabpanel" class="tab-pane" id="profile"> <div class="tab-post-list"> <div class="tab-post-list-wrap clearfix"> <div class="tab-post-thumb pull-left"> <figure> <a href="single.html"> <img src="http://placehold.it/150x150/018EBB/ffffff/?text=Popular+Post" alt="Post thumb"> </a> </figure> </div> <div class="tab-post-title"> <h6><a href="single.html">Do You Know the ABC</a> </h6> <span>May 10, 2014</span> </div> </div> <div class="tab-post-list-wrap clearfix"> <div class="tab-post-thumb pull-left"> <figure> <a href="single.html"> <img src="http://placehold.it/150x150/018EBB/ffffff/?text=Popular+Post" alt="Post thumb"> </a> </figure> </div> <div class="tab-post-title"> <h6><a href="single.html">Standard Post Type</a> </h6> <span>May 10, 2014</span> </div> </div> <div class="tab-post-list-wrap clearfix"> <div class="tab-post-thumb pull-left"> <figure> <a href="single.html"> <img src="http://placehold.it/150x150/018EBB/ffffff/?text=Popular+Post" alt="Post thumb"> </a> </figure> </div> <div class="tab-post-title"> <h6><a href="single.html">How to Handle Your Kids Mystery Ailments</a></h6> <span>May 10, 2014</span> </div> </div> </div> </div> <div role="tabpanel" class="tab-pane" id="messages"> <div class="tab-post-list"> <ul> <li class="tab-post-list-wrap"> <a href="#">raazon</a> <span>on</span> <a href="#">Standard Post Type</a> <small> <abbr title="30-04-2015">12 months ago</abbr> </small> <p>Donec venenatis feugiat congue. Integer ipsum tellus, accumsan ut purus...</p> </li> <li class="tab-post-list-wrap"> <a href="#">wordpress</a> <span>on</span> <a href="#">Do You Know the ABC of Health Care?</a> <small> <abbr title="30-04-2015">12 months ago</abbr> </small> <p>Donec venenatis feugiat congue. Integer ipsum tellus, accumsan ut purus...</p> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!--===================== CATEGORIES ======================--> <div class="widget-sidebar"> <h2 class="title-widget-sidebar">// CATEGORIES</h2> <button class="categories-btn">Audio</button> <button class="categories-btn">Blog</button> <button class="categories-btn">Gallery</button> <button class="categories-btn">Images</button> </div> <!--===================== NEWSLATTER ======================--> <div class="widget-sidebar"> <h2 class="title-widget-sidebar">// NEWSLATTER</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor ut .</p> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-envelope-o" aria-hidden="true"></i></span> <input id="email" type="text" class="form-control" name="email" placeholder="Email"> </div> <button type="button" class="btn btn-warning">Warning</button> </div> </div> </div> <h4>Bulanık Seçilmiş Yazılar | hkkcngz</h4> <div class="row"> <div class="col-sm-4 col-md-4"> <div class="post"> <div class="post-img-content"> <img src="http://placehold.it/460x250/e67e22/ffffff&text=HTML5" class="img-responsive" /> <span class="post-title"><b>Make a Image Blur Effects With</b><br /> <b>CSS3 Blur</b></span> </div> <div class="content"> <div class="author"> By <b>Bhaumik</b> | <time datetime="2014-01-20">January 20th, 2014</time> </div> <div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div> <div> <a href="http://www.jquery2dotnet.com/2014/01/jquery-highlight-table-row-and-column.html" class="btn btn-warning btn-sm">Read more</a> </div> </div> </div> </div> <div class="col-sm-4 col-md-4"> <div class="post"> <div class="post-img-content"> <img src="http://placehold.it/460x250/2980b9/ffffff&text=CSS3" class="img-responsive" /> <span class="post-title"><b>Make a Image Blur Effects With</b><br /> <b>CSS3 Blur</b></span> </div> <div class="content"> <div class="author"> By <b>Bhaumik</b> | <time datetime="2014-01-20">January 20th, 2014</time> </div> <div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div> <div> <a href="http://www.jquery2dotnet.com/2013/11/share-social-media-round-buttons.html" class="btn btn-primary btn-sm">Read more</a> </div> </div> </div> </div> <div class="col-sm-4 col-md-4"> <div class="post"> <div class="post-img-content"> <img src="http://placehold.it/460x250/47A447/ffffff&text=jQuery" class="img-responsive" /> <span class="post-title"><b>Make a Image Blur Effects With</b><br /> <b>CSS3 Blur</b></span> </div> <div class="content"> <div class="author"> By <b>Bhaumik</b> | <time datetime="2014-01-20">January 20th, 2014</time> </div> <div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div> <div> <a href="http://www.jquery2dotnet.com/2013/07/cool-social-sharing-button-using-css3.html" class="btn btn-success btn-sm">Read more</a> </div> </div> </div> </div> </div> <hr /> <footer> <div class="row"> <div class="col-lg-12"> <div class="col-lg-3 col-md-6"> <div class="container"> <div class="col-lg-3"> <div class="cuadro_intro_hover " style="background-color:#cccccc;"> <p style="text-align:center; margin-top:20px;"> <img src="http://placehold.it/500x330" class="img-responsive" alt=""> </p> <div class="caption"> <div class="blur"></div> <div class="caption-text"> <h3 style="border-top:2px solid white; border-bottom:2px solid white; padding:10px;">THIS IS H3</h3> <p>Loren ipsum dolor si amet ipsum dolor si amet ipsum dolor...</p> <a class=" btn btn-default" href="#"><span class="glyphicon glyphicon-plus"> INFO</span></a> </div> </div> </div> </div> <div class="col-lg-3"> <div class="cuadro_intro_hover " style="background-color:#cccccc;"> <p style="text-align:center; margin-top:20px;"> <img src="http://placehold.it/500x330" class="img-responsive" alt=""> </p> <div class="caption"> <div class="blur"></div> <div class="caption-text"> <h3 style="border-top:2px solid white; border-bottom:2px solid white; padding:10px;">THIS IS H3</h3> <p>Loren ipsum dolor si amet ipsum dolor si amet ipsum dolor...</p> <a class=" btn btn-default" href="#"><span class="glyphicon glyphicon-plus"> INFO</span></a> </div> </div> </div> </div> <div class="col-lg-3 col-md-6"> <h3 class="title-widget-sidebar text-capitalize">Categories:</h3> <ul class=list-unstyled> <li><a href=""><i class="fa fa-file"></i> News</a></li> <li><a href=""><i class="fa fa-android"></i> Android</a></li> <li><a href=""><i class="fa fa-code"></i> C#</a></li> <li><a href=""><i class="fa fa-code"></i> Java</a></li> <li><a href=""><i class="fa fa-book"></i> Books</a></li> <li><a href=""><i class="fa fa-globe"></i> Web</a></li> <li><a href=""><i class="fa fa-windows"></i> Windows</a></li> </ul> </div> <div class="col-lg-3 col-md-6"> <h3 class="title-widget-sidebar text-capitalize">Contact:</h3> <p>Have a question or feedback? Contact me!</p> <p><a href="" title="Contact me!"><i class="fa fa-envelope"></i> Contact</a></p> <h3 class="title-widget-sidebar text-capitalize">Follow:</h3> <a href="" id="gh" target="_blank" title="Twitter"><span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x"></i> </span> Twitter</a> <a href="" target="_blank" title="GitHub"><span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-github fa-stack-1x"></i> </span> GitHub</a> </div> <br/> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/tr_TR/sdk.js#xfbml=1&version=v2.0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div class="fb-like" data-href="" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div> <a href="https://twitter.com/share" class="twitter-share-button" data-url="">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> <div class="g-plusone" data-annotation="inline" data-width="300" data-href=""></div> <!-- Helyezd el ezt a címkét az utolsó +1 gomb címke mögé. --> <script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> <br/> <hr> <p>Copyright © Your Website | <a href="">Privacy Policy</a> | <a href="">Terms of Use</a></p> </footer>
#header{ border:1px solid #ddd; margin-bottom:20px; } .navbar-bas{ max-width: 100px; max-height:100px; float:left; margin-top:-65px; margin-left:15px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out ; } .site-name{ color:#fff; font-size:2.4em; float:left; margin-top:-65px !important; margin-left:15px; font-family: 'Open Sans Condensed', sans-serif, sans-serif; } .site-description{ color:#fff; font-size:1.3em; float:left; margin-top:-30px !important; margin-left:15px; } .slider, .carousel{ max-height:360px; overflow:hidden; } .carousel-control .fa-angle-left, .carousel-control .fa-angle-right { position: absolute; top: 50%; font-size:2em; z-index: 5; display: inline-block; } .carousel-control{ background-color:transparent; background-image:none !important; } .carousel-control:hover, .carousel-control:focus { color: #f5f5f5; text-decoration: none; background-color:transparent !important; background-image:none !important; outline: 0; } /* arama */ #wrap { margin: 0px 150px; display: inline-block; position: relative; height: 30px; float: right; padding: 0; position: relative; } input[type="text"] { height: 30px; font-size: 25px; display: inline-block; font-family: 'Open Sans Condensed', sans-serif, sans-serif; font-weight: 100; border: none; outline: none; color: #555; padding: 3px; padding-right: 60px; width: 0px; position: absolute; top: 0; right: 0; background: none; z-index: 3; transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000); cursor: pointer; } input[type="text"]:focus:hover { border-bottom: 1px solid #BBB; } input[type="text"]:focus { width: 500px; z-index: 1; border-bottom: 1px solid #BBB; cursor: text; } input[type="submit"] { height: 40px; width: 63px; display: inline-block; color:red; float: right; background: url(http://hakkicengiz.com/hc/araa.png) center center no-repeat; text-indent: -10000px; border: none; position: absolute; top: 0; right: 0; z-index: 2; cursor: pointer; opacity: 0.4; cursor: pointer; transition: opacity .4s ease; } /*menu seysi*/ @media screen and (min-width:768px){ .navbar-brand-centered { position: absolute; left: 50%; display: block; width: 160px; text-align: center; background-color: #eee; } .navbar>.container .navbar-brand-centered, .navbar>.container-fluid .navbar-brand-centered { margin-left: -80px;} } nav.navbar { background: #fff; border-color: #ccc; box-shadow: 0 0 2px 0 #ccc; } nav.navbar a { color: #f14444; } nav.navbar ul.navbar-nav a { color: #f14444; border-style: solid; border-width: 0 0 2px 0; border-color: #fff; } nav.navbar ul.navbar-nav a:hover, nav.navbar ul.navbar-nav a:visited, nav.navbar ul.navbar-nav a:focus, nav.navbar ul.navbar-nav a:active { background: #fff; } nav.navbar ul.navbar-nav a:hover { border-color: #f14444; } nav.navbar li.divider { background: #ccc; } nav.navbar button.navbar-toggle { background: #f14444; border-radius: 2px; } nav.navbar button.navbar-toggle:hover { background: #999; } nav.navbar button.navbar-toggle > span.icon-bar { background: #fff; } nav.navbar ul.dropdown-menu { border: 0; background: #fff; border-radius: 4px; margin: 4px 0; box-shadow: 0 0 4px 0 #ccc; } nav.navbar ul.dropdown-menu > li > a { color: #444; } nav.navbar ul.dropdown-menu > li > a:hover { background: #f14444; color: #fff; } nav.navbar span.badge { background: #f14444; font-weight: normal; font-size: 11px; margin: 0 4px; } nav.navbar span.badge.new { background: rgba(255, 0, 0, 0.8); color: #fff; } /*recent-post-col////////////////////*/ .widget-sidebar { background-color: #fff; padding: 20px; margin-top: 30px; } .title-widget-sidebar { font-size: 14pt; border-bottom: 2px solid #e5ebef; margin-bottom: 15px; padding-bottom: 10px; margin-top: 0px; } .title-widget-sidebar:after { border-bottom: 2px solid #f1c40f; width: 150px; display: block; position: absolute; content: ''; padding-bottom: 10px; } /* content-footer */ .content-footer{padding:10px;position: relative;} .content-footer span a { color: #fff; display: inline-block; padding: 6px 5px; text-decoration: none; transition: 0.5s; } .content-footer span a:hover{ color:#F39C12; } .content-footer>img { width: 33px; height: 33px; border-radius: 100%; margin-right: 10px; border: 2px solid #fff; } .user-ditels { width: 300px; top: -100px; height: 100px; padding-bottom: 99px; position: absolute; border: solid 2px #fff; background-color: #34495E; right: 25px; display: none; z-index: 1; } @media (max-width:768px){ .user-ditels { right: 5px; } } .user-small-img{cursor: pointer;} .content-footer:hover .user-ditels { display: block; } .content-footer .user-ditels .user-img{width: 100px;height:100px;float: left;} .user-full-ditels h3 { color: #fff; display: block; margin: 0px; padding-top: 10px; padding-right: 28px; text-align: right; } .user-full-ditels p{ color: #fff; display: block; margin: 0px; padding-right: 20px; padding-top: 5px; text-align: right;} .social-icon { background-color: #fff; margin-top: 10px; padding-right: 20px; text-align: right; } .social-icon>a{font-size:20px;text-decoration:none;padding: 5px;} .social-icon a:nth-of-type(1){color:#4E71A8;} .social-icon a:nth-of-type(2){color:#3FA1DA;} .social-icon a:nth-of-type(3){color:#E3411F;} .social-icon a:nth-of-type(4){color:#CA3737;} .social-icon a:nth-of-type(5){color:#3A3A3A;} /*categories//////////////////////*/ .categories-btn{ background-color: #f14444; margin-top:1px; color: #fff; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .categories-btn:after { content: '\25BA'; color: #fff; font-weight: bold; float: right; margin-left: 5px; } .categories-btn:hover { background-color: grey;color: #fff; } .form-control{border-radius: 0px;} .btn-warning { border-radius: 0px; background-color: #F39C12; margin-top: 15px; } .input-group-addon{border-radius: 0px;} /* sol yazılar */ article{ background-color: #E0E0E0; padding: 10px; margin-bottom: 10px; margin-top: 10px; } figure img{ width: 100%; height: 100%; } .glyphicon-folder-open, .glyphicon-user, .glyphicon-calendar, .glyphicon-eye-open, .glyphicon-comment{ padding: 5px; } /* Post tab custom css */ .populat-post-tab { border: 1px solid #e0e0e0; } .populat-post-tab .nav-tabs { border: none; } .populat-post-tab .nav-tabs > li { width: 33.33333333333333%; text-align: center; } .populat-post-tab .nav-tabs > li a { background: #f0f5f7; margin-right: 0; border: 1px solid #e0e0e0; border-radius: 0; display: block; padding: 10px 0; font-weight: 700; font-size: 15px; color: #3a3c41; transition: all 0.01s; } .populat-post-tab .nav-tabs > li.active a { border-top: 2px solid #018EBB; border-bottom: none; border-left: none; border-right: none; background: #ffffff; } .tab-post-list-wrap { margin: 15px 0; padding: 0 35px; } .tab-post-thumb { margin: 0 15px 0 0; } .tab-post-thumb figure { width: 65px; } .tab-post-thumb figure img{ max-width: 70px; } .tab-post-title h6 { font-size: 14px; font-weight: 700; line-height: 18px; margin-bottom: 5px; } .tab-post-title span { font-size: 12px; color: #999ca5; } .tab-post-list ul{ list-style: none; } .tab-post-list ul li:before { content: ""; width: 2px; height: 8px; padding: 0 4px; margin-right: 5px; background: #018EBB; display: inline-block; } .tab-post-list ul li small { display: block; } .tab-post-list ul li small abbr { font-size: 11px; line-height: 20px; text-decoration: none; border: none; } /* bulanık post */ .post { background-color: #FFF; overflow: hidden; box-shadow: 0 0 1px #CCC; } .post img { filter: blur(2px); -webkit-filter: blur(2px); -moz-filter: blur(2px); -o-filter: blur(2px); -ms-filter: blur(2px); } .post img:hover { filter: blur(0px); -webkit-filter: blur(0px); -moz-filter: blur(0px); -o-filter: blur(0px); -ms-filter: blur(0px); } .post .content { padding: 15px; } .post .author { font-size: 11px; color: #737373; padding: 25px 30px 20px; } .post .post-img-content { height: 196px; position: relative; } .post .post-img-content img { position: absolute; } .post .post-title { display: table-cell; vertical-align: bottom; z-index: 2; position: relative; } .post .post-title b { background-color: rgba(51, 51, 51, 0.58); display: inline-block; margin-bottom: 5px; color: #FFF; padding: 10px 15px; margin-top: 5px; } /* footer */ .cuadro_intro_hover{ padding: 0px; position: relative; overflow: hidden; height: 200px; } .cuadro_intro_hover:hover .caption{ opacity: 1; transform: translateY(-150px); -webkit-transform:translateY(-150px); -moz-transform:translateY(-150px); -ms-transform:translateY(-150px); -o-transform:translateY(-150px); } .cuadro_intro_hover img{ z-index: 4; } .cuadro_intro_hover .caption{ position: absolute; top:150px; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; width: 100%; } .cuadro_intro_hover .blur{ background-color: rgba(0,0,0,0.7); height: 300px; z-index: 5; position: absolute; width: 100%; } .cuadro_intro_hover .caption-text{ z-index: 10; color: #fff; position: absolute; height: 300px; text-align: center; top:-20px; width: 100%; }

Related: See More


Questions / Comments: