Home-FeedNews

In this example below you will see how to do a Home-FeedNews with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by rarnedo, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright rarnedo ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Home-FeedNews</title>
  
  
  <link rel='stylesheet prefetch' href='https://colorlib.com/polygon/vendors/bootstrap/dist/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://colorlib.com/polygon/vendors/font-awesome/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://colorlib.com/polygon/vendors/nprogress/nprogress.css'>
<link rel='stylesheet prefetch' href='https://colorlib.com/polygon/vendors/bootstrap-daterangepicker/daterangepicker.css'>
<link rel='stylesheet prefetch' href='https://colorlib.com/polygon/build/css/custom.min.css'>
<link rel='stylesheet prefetch' href='https://colorlib.com/polygon/vendors/fullcalendar/dist/fullcalendar.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body class="  pg-loaded">

  <div class="bert-alert clearfix" data-blaze-inspector-id="node-2">
    <div class="bert-container">
      <div class="bert-gem">
        <i class="fa"></i>
      </div>
      <div class="bert-content">

        <p></p>
      </div>
    </div>
  </div>
  <div id="__blaze-root">
    <div class="container body" data-blaze-inspector-id="node-3">
      <div class="main_container">
        <div class="top_nav navbar-fixed-top">
          <div class="nav_menu">
            <nav>
              <div class="nav toggle">
                <a id="menu_toggle"><i class="fa fa-bars"></i></a>
              </div>
              <ul class="nav navbar-nav navbar-right">
                <li class="">
                  <a class="user-profile dropdown-toggle" data-toggle="dropdown" aria-expanded="false">

                    <img src="https://socka.herokuapp.com/img/user.png"> Pedro Dias
                    <span class="fa fa-angle-down"></span>
                  </a>
                  <ul class="dropdown-menu dropdown-usermenu" style="width: 100%;">
                    <div class="flex">
                      <ul class="list-inline widget_profile_box">
                        <li style="width: 100%!Important;">
                          <div class="col-md-2 col-sm-2 col-xs-2 no-gutter">
                            <span class="fa-stack fa-lg">
                                            <i class="fa fa-circle fa-stack-2x"></i>
                                            <i class="fa fa-power-off fa-stack-1x fa-inverse red js-sign-out"></i>
                                            </span>
                          </div>
                          <div class="col-md-8 col-sm-8 col-xs-8 no-gutter text-center">

                            <img class="img-circle profile_img userImage" src="https://socka.herokuapp.com/img/user.png">
                          </div>
                          <div class="col-md-2 col-sm-2 col-xs-2 no-gutter">
                            <span class="fa-stack fa-lg">
                                            <i class="fa fa-circle fa-stack-2x"></i>
                                            <i class="fa fa-pencil fa-stack-1x fa-inverse js-edit-user"></i>
                                            </span>
                          </div>
                        </li>
                      </ul>
                    </div>
                    <div class="flex">
                      <ul class="list-inline list-inline-home count2" style="border: 0px;">
                        <li>
                          <div class="col-md-4 col-sm-4 col-xs-4 no-gutter js-matches">
                            <h3>86</h3>
                            <span>Jogos</span>
                          </div>
                          <div class="col-md-4 col-sm-4 col-xs-4 no-gutter js-mates">
                            <h3>31</h3>
                            <span>Colegas</span>
                          </div>
                          <div class="col-md-4 col-sm-4 col-xs-4 no-gutter js-teams">
                            <h3>2</h3>
                            <span>Equipas</span>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </ul>
                </li>
                <li role="presentation" class="dropdown">
                  <a class="dropdown-toggle info-number" data-toggle="dropdown" aria-expanded="false">
                    <i class="fa fa-envelope-o"></i>
                    <span class="badge bg-green">6</span>
                  </a>
                  <ul id="menu1" class="dropdown-menu list-unstyled msg_list" role="menu">
                    <li>
                      <a>
                        <span class="image"><img src="images/img.jpg" alt="Profile Image"></span>
                        <span>
                          <span>John Smith</span>
                        <span class="time">3 mins ago</span>
                        </span>
                        <span class="message">
                          Film festivals used to be do-or-die moments for movie makers. They were where...
                        </span>
                      </a>
                    </li>
                    <li>
                      <a>
                        <span class="image"><img src="images/img.jpg" alt="Profile Image"></span>
                        <span>
                          <span>John Smith</span>
                        <span class="time">3 mins ago</span>
                        </span>
                        <span class="message">
                          Film festivals used to be do-or-die moments for movie makers. They were where...
                        </span>
                      </a>
                    </li>
                    <li>
                      <a>
                        <span class="image"><img src="images/img.jpg" alt="Profile Image"></span>
                        <span>
                          <span>John Smith</span>
                        <span class="time">3 mins ago</span>
                        </span>
                        <span class="message">
                          Film festivals used to be do-or-die moments for movie makers. They were where...
                        </span>
                      </a>
                    </li>
                    <li>
                      <a>
                        <span class="image"><img src="images/img.jpg" alt="Profile Image"></span>
                        <span>
                          <span>John Smith</span>
                        <span class="time">3 mins ago</span>
                        </span>
                        <span class="message">
                          Film festivals used to be do-or-die moments for movie makers. They were where...
                        </span>
                      </a>
                    </li>
                    <li>
                      <div class="text-center">
                        <a>
                          <strong>See All Alerts</strong>
                          <i class="fa fa-angle-right"></i>
                        </a>
                      </div>
                    </li>
                  </ul>
                </li>
              </ul>
            </nav>
          </div>
        </div>
        <div class="top_nav navbar-fixed-bottom">
          <div data-target=".show-footer" data-toggle="collapse" class="" type="" id="footer_btn">
            <!--<div class="sidebar-footer hidden-small">
              <a data-toggle="tooltip" class="width20" data-placement="top" title="" data-original-title="Back">
                <span class="glyphicon glyphicon-circle-arrow-left" aria-hidden="true"></span>
              </a>
              <a data-toggle="tooltip" class="width20" data-placement="top" title="" data-original-title="FullScreen">
                <span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span>
              </a>
              <a data-toggle="tooltip" class="width20" data-placement="top" title="" data-original-title="Lock">
                <span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
              </a>
              <a data-toggle="tooltip" class="width20"data-placement="top" title="" href="login.html" data-original-title="Logout">
                <span class="glyphicon glyphicon-off" aria-hidden="true"></span>
              </a>
  <a data-toggle="tooltip" class="width20"data-placement="top" title="" href="login.html" data-original-title="Home">
                <span class="glyphicon glyphicon-home" aria-hidden="true"></span>
              </a>
            </div>-->
            <div class="nav_menu nav-menu-bottom" style="margin: 0;border: 0px; padding:5px">
              <nav class="">
                <p class="alignleft" style="margin: 0;">
                  &nbsp;
                </p>
                <p class="aligncenter" style="margin: 0;">
                  <i class="fa fa-calendar fa-2x"></i>
                </p>
                <p class="alignright" style="margin: 0;">
                  <small>Create Match</small>
                </p>
              </nav>
            </div>
            <div class="nav-collapse collapse show-footer" id="footer_body">
              <!-- start of calendar widget -->
              <div class="row no-gutter">
                <div class="x_panel" style="margin: 0px">
                  <div class="x_content">
                    <div class="fc fc-unthemed fc-ltr">
                      <div class="fc-toolbar fc-header-toolbar">
                        <div class="fc-left">
                        </div>
                        <div class="fc-right">
                        </div>
                        <div class="fc-center">
                          <h2>Match Calendar</h2>
                        </div>
                        <div class="fc-clear"></div>
                      </div>
                      <div class="fc-view-container">
                        <div class="fc-view fc-listMonth-view fc-list-view fc-widget-content">
                          <div class="fc-scroller" style="overflow-x: hidden; overflow-y: auto; ">
                            <table class="fc-list-table">
                              <tbody>
                                <tr class="fc-list-heading" data-date="2017-05-01">
                                  <td class="fc-widget-header" colspan="3"><span class="fc-list-heading-main">May 1, 2017</span><span class="fc-list-heading-alt">Monday</span></td>
                                </tr>
                                <tr class="fc-list-item">
                                  <td class="fc-list-item-time fc-widget-content">12:00am</td>
                                  <td class="fc-list-item-marker fc-widget-content"><span class="fc-event-dot"></span></td>
                                  <td class="fc-list-item-title fc-widget-content"><a>All Day Event</a></td>
                                </tr>
                                <tr class="fc-list-heading" data-date="2017-05-07">
                                  <td class="fc-widget-header" colspan="3"><span class="fc-list-heading-main">May 7, 2017</span><span class="fc-list-heading-alt">Sunday</span></td>
                                </tr>
                                <tr class="fc-list-item">
                                  <td class="fc-list-item-time fc-widget-content">12:00am - 12:00am</td>
                                  <td class="fc-list-item-marker fc-widget-content"><span class="fc-event-dot"></span></td>
                                  <td class="fc-list-item-title fc-widget-content"><a>Long Event</a></td>
                                </tr>
                                <tr class="fc-list-heading" data-date="2017-05-08">
                                  <td class="fc-widget-header" colspan="3"><span class="fc-list-heading-main">May 8, 2017</span><span class="fc-list-heading-alt">Monday</span></td>
                                </tr>
                                <tr class="fc-list-item">
                                  <td class="fc-list-item-time fc-widget-content">all-day</td>
                                  <td class="fc-list-item-marker fc-widget-content"><span class="fc-event-dot"></span></td>
                                  <td class="fc-list-item-title fc-widget-content"><a>Long Event</a></td>
                                </tr>
                                <tr class="fc-list-heading" data-date="2017-05-28">
                                  <td class="fc-widget-header" colspan="3"><span class="fc-list-heading-main">May 28, 2017</span><span class="fc-list-heading-alt">Sunday</span></td>
                                </tr>
                                <tr class="fc-list-item fc-has-url">
                                  <td class="fc-list-item-time fc-widget-content">12:00am - 12:00am</td>
                                  <td class="fc-list-item-marker fc-widget-content"><span class="fc-event-dot"></span></td>
                                  <td class="fc-list-item-title fc-widget-content"><a href="https://google.com/">Click for Google</a></td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </div>
                    </div>

                  </div>
                </div>
              </div>
              <!-- end of calendar widget -->
            </div>
          </div>
        </div>
      </div>
      <!-- page content -->
      <div class="right_col" role="main">

        <!-- start of feed widget -->
        <div class="row">
          <div class="col-md-12 col-sm-12 col-xs-12 no-gutter" style="margin-bottom: 20px; margin-top: 20px;">
            <div class="x_panel">
              <div class="x_title">
                <h2><i class="fa fa-newspaper-o"></i> Recent Activity</h2>
                <div class="clearfix"></div>
              </div>

              <div class="x_content">
                <!-- Post -->
                <div class="post" style="margin-bottom: 15px;">
                  <div class="user-block">
                    <img class="img-circle img-bordered-sm" src="https://almsaeedstudio.com/themes/AdminLTE/dist/img/user1-128x128.jpg" alt="user image">
                    <span class="username">
                          <a href="#">Jonathan Burke Jr.</a>
                          <a href="#" class="pull-right btn-box-tool"><i class="fa fa-times"></i></a>
                        </span>
                    <span class="description">Shared publicly - 7:30 PM today</span>
                  </div>
                  <!-- /.user-block -->
                  <p style="margin-right: -15px;margin-left: -15px;">
                    Lorem ipsum represents a long-held tradition for designers, typographers and the like. Some people hate it and argue for its demise, but others ignore the hate as they create awesome tools to help create filler text for everyone from bacon lovers to Charlie
                    Sheen fans.
                  </p>
                  <ul class="list-inline">
                    <li><a href="#" class="link-black text-sm"><i class="fa fa-share margin-r-5"></i> Share</a></li>
                    <li><a href="#" class="link-black text-sm"><i class="fa fa-thumbs-o-up margin-r-5"></i> Like</a>
                    </li>
                    <li class="pull-right">
                      <a href="#" class="link-black text-sm"><i class="fa fa-comments-o margin-r-5"></i> Comments
                        (5)</a></li>
                  </ul>
                  <div class="input-group">
                    <input type="text" autocomplete="off" name="message" id="message" placeholder="Type Comment ..." class="form-control input-sm">
                    <span class="input-group-btn">
		<button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
	</span>
                  </div>

                </div>
                <!-- /.post -->
                <hr>
                <!-- Post -->
                <div class="post" style="margin-bottom: 15px;">
                  <div class="user-block">
                    <img class="img-circle img-bordered-sm" src="https://almsaeedstudio.com/themes/AdminLTE/dist/img/user7-128x128.jpg" alt="User Image">
                    <span class="username">
                          <a href="#">Sarah Ross</a>
                          <a href="#" class="pull-right btn-box-tool"><i class="fa fa-times"></i></a>
                        </span>
                    <span class="description">Sent you a message - 3 days ago</span>
                  </div>
                  <!-- /.user-block -->
                  <p style="margin-right: -15px;margin-left: -15px;">
                    Lorem ipsum represents a long-held tradition for designers, typographers and the like. Some people hate it and argue for its demise, but others ignore the hate as they create awesome tools to help create filler text for everyone from bacon lovers to Charlie
                    Sheen fans.
                  </p>

                  <form class="form-horizontal">
                    <div class="form-group margin-bottom-none">
                      <div class="col-sm-9">
                        <input class="form-control input-sm" placeholder="Response">
                      </div>
                      <div class="col-sm-3">
                        <button type="submit" class="btn btn-danger pull-right btn-block btn-sm">Send</button>
                      </div>
                    </div>
                  </form>
                </div>
                <!-- /.post -->
                <hr>
                <!-- Post -->
                <div class="post" style="margin-bottom: 15px;">
                  <div class="user-block">
                    <img class="img-circle img-bordered-sm" src="https://almsaeedstudio.com/themes/AdminLTE/dist/img/user6-128x128.jpg" alt="User Image">
                    <span class="username">
                          <a href="#">Adam Jones</a>
                          <a href="#" class="pull-right btn-box-tool"><i class="fa fa-times"></i></a>
                        </span>
                    <span class="description">Posted 5 photos - 5 days ago</span>
                  </div>
                  <!-- /.user-block -->
                  <div class="row margin-bottom">
                    <div class="col-sm-6">
                      <img class="img-responsive" src="https://almsaeedstudio.com/themes/AdminLTE/dist/img/photo1.png" alt="Photo">
                    </div>
                    <!-- /.col -->
                    <div class="col-sm-6">
                      <div class="row">
                        <div class="col-sm-6">

                          <br>

                        </div>
                        <!-- /.col -->
                        <div class="col-sm-6">

                          <br>

                        </div>
                        <!-- /.col -->
                      </div>
                      <!-- /.row -->
                    </div>
                    <!-- /.col -->
                  </div>
                  <!-- /.row -->

                  <ul class="list-inline">
                    <li><a href="#" class="link-black text-sm"><i class="fa fa-share margin-r-5"></i> Share</a></li>
                    <li><a href="#" class="link-black text-sm"><i class="fa fa-thumbs-o-up margin-r-5"></i> Like</a>
                    </li>
                    <li class="pull-right">
                      <a href="#" class="link-black text-sm"><i class="fa fa-comments-o margin-r-5"></i> Comments
                        (5)</a></li>
                  </ul>

                  <input class="form-control input-sm" type="text" placeholder="Type a comment">
                </div>
                <!-- /.post -->
                <hr>

              </div>
            </div>
          </div>

          <!-- end of feed widget -->
          <!-- -->

        </div>


      </div>
      <!-- /page content -->
    </div>
  </div>
  </div>
</body>
  <script src='https://colorlib.com/polygon/vendors/jquery/dist/jquery.min.js'></script>
<script src='https://colorlib.com/polygon/vendors/bootstrap/dist/js/bootstrap.min.js'></script>
<script src='https://colorlib.com/polygon/vendors/fastclick/lib/fastclick.js'></script>
<script src='https://colorlib.com/polygon/vendors/nprogress/nprogress.js'></script>
<script src='https://colorlib.com/polygon/vendors/Chart.js/dist/Chart.min.js'></script>
<script src='https://colorlib.com/polygon/vendors/jquery-sparkline/dist/jquery.sparkline.min.js'></script>
<script src='https://colorlib.com/polygon/vendors/Flot/jquery.flot.js'></script>
<script src='https://colorlib.com/polygon/vendors/Flot/jquery.flot.pie.js'></script>
<script src='https://colorlib.com/polygon/vendors/Flot/jquery.flot.time.js'></script>
<script src='https://colorlib.com/polygon/vendors/Flot/jquery.flot.stack.js'></script>
<script src='https://colorlib.com/polygon/vendors/Flot/jquery.flot.resize.js'></script>
<script src='https://colorlib.com/polygon/vendors/flot.orderbars/js/jquery.flot.orderBars.js'></script>
<script src='https://colorlib.com/polygon/vendors/flot-spline/js/jquery.flot.spline.min.js'></script>
<script src='https://colorlib.com/polygon/vendors/flot.curvedlines/curvedLines.js'></script>
<script src='https://colorlib.com/polygon/vendors/DateJS/build/date.js'></script>
<script src='https://colorlib.com/polygon/vendors/moment/min/moment.min.js'></script>
<script src='https://colorlib.com/polygon/vendors/bootstrap-daterangepicker/daterangepicker.js'></script>
<script src='https://colorlib.com/polygon/build/js/custom.min.js'></script>
<script src='https://colorlib.com/polygon/vendors/fullcalendar/dist/fullcalendar.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/rarnedo/home-feednews-MmQVLg */
/* Custom Theme Style */
.jqstooltip {
  position: absolute;
  left: 0px;
  top: 0px;
  visibility: hidden;
  background: rgb(0, 0, 0) transparent;
  background-color: rgba(0, 0, 0, 0.6);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
  color: white;
  font: 10px arial, san serif;
  text-align: left;
  white-space: nowrap;
  padding: 5px;
  border: 1px solid white;
  box-sizing: content-box;
  z-index: 10000;
}

.jqsfield {
  color: white;
  font: 10px arial, san serif;
  text-align: left;
}


.top_nav {    
     margin-left: 0px!Important; 
}

.user-block .username {
    font-size: 16px;
    font-weight: 600;
}

.user-block .username, .user-block .description, .user-block .comment {
    display: block;
    margin-left: 50px;
}
.user-block .description {
    color: #999;
    font-size: 13px;
}

.user-block .username, .user-block .description, .user-block .comment {
    display: block;
    margin-left: 50px;
}
.post .user-block {
    margin-bottom: 15px;
}

.user-block img {
    width: 40px;
    height: 40px;
    float: left;
}

.img-bordered-sm {
    border: 2px solid #d2d6de;
    padding: 2px;
}

.img-circle {
    border-radius: 50%;
}

img {
    vertical-align: middle;
}

.nav-menu-bottom{
  background: #2A3F54;
}


.width33{
  width: 33%!Important;
}
.width25{
  width: 25%!Important;
}
.width20{
  width: 20%!Important;
}
.width50{
  width: 50%!Important;
}
.width60{
  width: 60%!Important;
}

.alignleft {
    float: left;
    text-align:left;
    width:33.33333%;
}
.aligncenter {
    float: left;
    text-align:center;
    width:33.33333%;
}
.alignright {
    float: left;
    text-align:right;
    width:33.33333%;
}

/*Downloaded from https://www.codeseek.co/rarnedo/home-feednews-MmQVLg */
$(function() {
  $('#footer_body').on('show', function () {
    $("html, body").animate({ scrollTop: $(document).height() }, "slow");
  });  
});

Comments