Bootstrap Snippet blog using HTML CSS Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<div id="page" class="hfeed site site-container">
    <div class="site-pusher">
      <section class="lifesection">
        <div class="gridcontainer">
          <div class="life-search">
            <form role="search" method="get" class="searchform group" action="">
              <input type="search" class="search-input" placeholder="Search Your Life Style" value="" name="s" onkeyup="buttonUp();" title="Search for:">
              <input type="submit" id="srch-btn-go" class="btn btn-peach searchbox-submit" value="GO" name="sa">
              <div class="searchbtn"><i class="fa fa-search" aria-hidden="true"></i></div>
            </form>
          </div>
          <ul id="lifegrid" style="position: relative; height: 1911px;">
            <li class="col-md-4 col-xs-12 life-content oddpost show" style="position: absolute; width: 310px; left: 75px; top: 0px;">
              <div class="lifeimgcont">
                <a href="#"><img width="510" height="382" src="https://lh3.googleusercontent.com/-HxSAl6WJSI0/WM-dbkQ1ONI/AAAAAAAADuE/-j9GwJvDOZcwTGuthBQay7XsdsPmtaC6gCL0B/w424-d-h319-p-rw/sumit.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" sizes="(max-width: 510px) 100vw, 510px"> </a>
                <div class="eventdate"> <strong>15</strong> May </div>
              </div>
              <h4 class="evntheader"><a href="#">Sumit Kumar!</a></h4>
              <article id="post-316" class="post-316 post type-post status-publish format-standard has-post-thumbnail hentry category-health category-inspiration tag-fitness tag-health tag-workout tag-workout-tip">
                <div class="entry-content">
                  <p>Tabata training is one of my favourite forms of exercise, especially when crunched for...</p>
                </div>
                <!-- .entry-content -->
              </article>
              <!-- #post-## -->
              <div class="eventsocialinks"> <a href="#" target="_blank" class="fb-share"><i class="fa fa-facebook" aria-hidden="true"></i></a> <a href="#" target="_blank" class="fb-share"><i class="fa fa-twitter" aria-hidden="true"></i></a> </div>
            </li>
            <li class="col-md-4 col-xs-12 life-content evenpost show" style="position: absolute; width: 310px; left: 385px; top: 0px;">
              <div class="lifeimgcont">
                <a href="#"><img width="3877" height="3102" src="http://www.boldrfit.com/life/wp-content/uploads/2017/04/michelle-pic.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" sizes="(max-width: 3877px) 100vw, 3877px"> </a>
                <div class="eventdate"> <strong>27</strong> Apr </div>
              </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
    display: block;
}
 [hidden], template {
 display: none;
}
/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html {
    box-sizing: border-box;
}
*, *:before, *:after { 
    box-sizing: inherit;
}
li > ul, li > ol {
    margin-bottom: 0;
    margin-left: 1.5em;
}
img {
    height: auto; /* Make sure images are scaled correctly. */
    max-width: 100%; /* Adhere to container width. */
}
input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], textarea {
    color: #666;
    border: 1px solid #ccc;/*border-radius: 3px;*/
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
jQuery(document).ready(function($){
    //Responsive navigation animation
    jQuery("#burgernav").click(function(){
    jQuery(this).toggleClass("is-active");
    jQuery('body').toggleClass('with--sidebar');
    });      
    
    jQuery('#site-cache').click(function(e){
      jQuery("#burgernav").toggleClass("is-active");
      jQuery('body').removeClass('with--sidebar');
    });
    //create the slider
    jQuery('.cd-testimonials-wrapper').flexslider({
        selector: ".cd-testimonials > li",
        animation: "slide",
        controlNav: true,
        slideshow: false,
        smoothHeight: true,
        start: function(){
            jQuery('.cd-testimonials').children('li').css({
                'opacity': 1,
                'position': 'relative'
            });
        }
    });   
    //Video Controls
    //Handle to controls
    var playicon = jQuery(".playpause");
    var video = jQuery(".video");
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"blog"
Bootstrap 3.0.0 Snippet by sumi9xm

Related: See More

Questions / Comments:

"blog" Bootstrap 3.0.0 Snippet by sumi9xm

Related: See More

Questions / Comments:

"blog"
Bootstrap 3.0.0 Snippet by sumi9xm