LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

  
    
    
    
    
  
  
   
    
Blog Item
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia natus obcaecati consequuntur quis molestias! Minima impedit ad omnis. Libero quibusdam facere dignissimos ut mollitia unde sunt nobis quia, nam quasi!
Portfolio Item
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia natus obcaecati consequuntur quis molestias! Minima impedit ad omnis. Libero quibusdam facere dignissimos ut mollitia unde sunt nobis quia, nam quasi!
Blog Item
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia natus obcaecati consequuntur quis molestias! Minima impedit ad omnis. Libero quibusdam facere dignissimos ut mollitia unde sunt nobis quia, nam quasi!
Other Item
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia natus obcaecati consequuntur quis molestias! Minima impedit ad omnis. Libero quibusdam facere dignissimos ut mollitia unde sunt nobis quia, nam quasi!
Portfolio Item
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia natus obcaecati consequuntur quis molestias! Minima impedit ad omnis. Libero quibusdam facere dignissimos ut mollitia unde sunt nobis quia, nam quasi!
Blog Item
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia natus obcaecati consequuntur quis molestias! Minima impedit ad omnis. Libero quibusdam facere dignissimos ut mollitia unde sunt nobis quia, nam quasi!
Other Item
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia natus obcaecati consequuntur quis molestias! Minima impedit ad omnis. Libero quibusdam facere dignissimos ut mollitia unde sunt nobis quia, nam quasi!
Portfolio Item
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia natus obcaecati consequuntur quis molestias! Minima impedit ad omnis. Libero quibusdam facere dignissimos ut mollitia unde sunt nobis quia, nam quasi!
Other Item
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia natus obcaecati consequuntur quis molestias! Minima impedit ad omnis. Libero quibusdam facere dignissimos ut mollitia unde sunt nobis quia, nam quasi!

News Feed

  • Blog
  • Portfolio

Post a New Activity

Don't Forget to Login


CSS
@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,900,700,500,300);

* {/* Reset */
  margin: 0;
  box-sizing: border-box;
}

html, body{
  height: 100%;
  background: #EDEDED;
  font-family: 'Roboto', serif;
  color: #222;
}

h1{
  font-family: 'Roboto', serif;
  font-weight: 500;
  font-size: 1em;
}

#apptitle{
  width: 50%;
  margin-left: 20px;
  margin-top 25px;
  padding-top: 12px;
  float: left;
}

.navoverlay{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  background: rgba(0,0,0,0.5);
  z-index: -1;
  opacity: 0;
  transition: opacity .1s;
}
.allholder{
  margin: 0px;
  width: 100%;
  height: 100%;
  position: relative;
}
.nav{
  margin-left: -100%;
  width: 240px;
  height: 100%;
  background: white;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 60;
  transition: margin-left 0.3s;
  box-shadow: 0px 1px 2px rgba(0,0,0,0.2);
}
.nav .centered{
  padding: 12px 0 12px 95px;
  border-bottom: 1px #EDEDED solid;
}
#logo-center img{
  transition:.15s;
  opacity:1;
  
}
#logo-center img:hover{
  opacity:.9;
}
.nav li{
  font-family: 'Roboto', san-serif;
  list-style-type: none;
  padding: 15px;
  margin-left: -40px;
}
.nav li:hover{
  background: #F0F0F0;
}
.selected{
  background: #F0F0F0;
}
.nav li a{
  color: #AAA;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
  transition:.15s;
  padding-left: 15px;
}
.nav li a:hover{
  color: #555 !important;
}
.selected a{
  color: #222 !important;
}
.status-bar { /*Very top bar*/
  position: fixed;
  top: 0px;
  z-index: 51;
  width: 100%;
  display: block;
  height: 20px;
  background: #B71C1C;
  transition: 0.3s;
}
.toolbar{ /*Second Top Bar*/
  color: #FFF;
  margin-top: 20px;
  top: 0px;
  position: fixed;
  width: 100%;
  height: 48px;
  background: #E53935;
  z-index: 50;
  box-shadow: 0px 1px 2px rgba(0,0,0,0.2);
  transition: 0.3s;
  padding:top;
}
.toolbar .tools{
  padding-top: 15px;
  position: fixed;
  right: 20px;
}
.toolbar .tools ul{
  list-style-type: none;
}
.toolbar .tools ul li{
  display: inline;
  padding-left: 2px;
}
.toolbar #hamburger{
  float: left;
  visibility: visible;
  padding: 15px;
}
#search, #settings, #hamburger, #postsettings{
  color: #FFF;
  cursor: pointer;
}
  
#content{
  margin: 75px auto 0 180px;
  width: 70%;
} 

.boxes{
  margin: 110px auto 0 300px;
  width: 60%;
}
[class*='col-']{ /* Targets anything with 'col-' */
  float: left; 
}
.col-1-1{
  width: 100%;
  height: 200px;
}
.col-1-3{
  width: 33.333%;
  height: 200px;
}
.col-1-2{
  width: 50%;
  height: 200px;
}
.col-1-5{
  width: 5%;
}
 
.module{
  padding:10px;
  margin: 10px;
  height: 180px;
  background:white;
  box-shadow: 0px 1px 2px rgba(0,0,0,0.2);
  font-family: 'Roboto', san-serif;
  font-weight: 700;
  font-size: 12px;
  list-style-type: none;
  text-align: center;
}

.filters{
  position:fixed;
  background: white;
  width: 150px;
  z-index: 10;
  right: -100%;
  top: 68px;
  box-shadow: -1px 3px 5px rgba(0,0,0,0.2);
  transition: 0.4s;
}

.filters ul li{

  font-family: 'Roboto', san-serif;
  font-size: ..9em;
  padding-top: 7px;
  padding-left: 10px;
  padding-bottom: 10px;
  cursor: pointer;
  list-style-type: none;
  margin: 0 0 0 -40px;
  border-bottom: 1px solid #DEDEDE;
}

.feed{
  padding-top: 20px;
  margin-left: 85px;
}
.feed-item{
  display: block;
  width: 100%;
  height: 100px;
  margin-bottom: 10px;
  background: white;
  padding-left: -100px;
  box-shadow: 0px 1px 2px rgba(0,0,0,0.2);
  transition:  0.7s;
  
}
.feed-item .icon-holder{
  width: 55px;
  float: left;
  margin: 21px 20px 0 25px;
}
.feed-item .icon-holder .icon{
  width: 55px;
  height: 55px;
  border-radius: 100%;
  float: left;
  background-image: url('https://lh3.googleusercontent.com/-Az9OhFIaxEY/AAAAAAAAAAI/AAAAAAAAAAA/iHtDLHxQMFc/photo.jpg');
  background-size: 55px 55px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.feed-item .text-holder{
  margin-top: 22px;
  width: 75%;
  float: left;
}
.feed-item .spacer{
  width: 10%;
  float: left;
}
.feed-description{
  font-size: .9em;
  font-weight: 300;
  color: #888;
  height: 2.4em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.post-options-holder{
  float: right;
  height: 100%;
  width: 30px;
  background: #EEE;
  padding: 12px;
  transition: background 0.2s;
}
.post-options-holder:hover{
  background: #DDD;
}
.feed-title{
  font-size: .9em;
  font-weight: 500;
}
.blog{
  overflow: hidden;
}
.portfolio{
  overflow: hidden;
}

/*Lower Right Button to Add Feed Item*/

#plus{ 
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #E53935;
  position: fixed;
  float: right;
  bottom: 15px;
  right: 15px;
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.5);
  text-align:center;
  cursor: pointer;
  color: #FFF;
  /*Align Icon to Center of circle*/
  text-align: center;
  line-height: 60px; /*Height of container*/
  vertical-align: middle;
}
#plus:hover{
  background: #F44336;
}

/* ====================  FORM START ========================*/
h2{
  text-transform: uppercase;
  font-size: 1em;
  margin-bottom: 10px;
}

#activityform{
  width:85%;
  min-width: 500px;
  height: 0px;
  background: #EDEDED;
  margin: 10% auto;
  padding: 20px;
  box-shadow: 0px 3px 10px rgba(0,0,0,0.4);
  z-index: -2;
  position: fixed;
  top: 0;
  opacity: 0;
  transition: 0.2s;
}

#formHolder{
  float: left;
  height: 100%;
  width: 50%;
  background: #FFF;
  padding: 20px;
  box-shadow: 0px 1px 2px rgba(0,0,0,0.2);
  z-index: 2;
}
#spacer, #spacertwo{
  float: left;
  width: 2.5%;
  height: 100%; 
}
#register{
  float: left;
  background: #FFF;
  padding: 20px;
  height: 100%;
  width: 47.5%;
  box-shadow: 0px 1px 2px rgba(0,0,0,0.2);
  z-index: 2;
  
}
.desc{
  margin-bottom: 100px;
}
textarea, input{
  width: 100%;
  resize: none;
  margin-bottom: 10px;
  margin-top: 5px;
}

input[type="text"], input[type="password"], textarea{
  padding: 10px;
  border: solid 1px #dcdcdc;
  transition: box-shadow 0.3s, border 0.3s;
  outline: none;
} 
input[type="text"]:focus, input[type="text"].focus,
input[type="password"]:focus, input[type="password"].focus,
textarea.focus, textarea: focus {
  border: solid 1px #707070;
  box-shadow: 0 0 5px 1px #969696;
}

/*submit button*/
input[type="submit"]{
  border: none;
  -webkit-border-radius: 3;
  -moz-border-radius: 3;
  border-radius: 3px;
  font-family: Arial;
  color: #ffffff;
  font-size: 11px;
  background: #333;
  padding: 8px 10px 8px 10px;
  text-decoration: none;
}

input[type="submit"]:hover {
  background: #E53935;
  text-decoration: none;
}



select {
    width: 100%;
    padding:7px;
    margin: 0;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    background: #EEE;
    color:#888;
    border:none;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
    margin-bottom: 10px;
    margin-top: 5px;
}
#forget a{
  text-decoration: none;
  color: #222;
  font-size: .7em;
}
#forget a:hover{
  color:#E53935;
}

#logoutbut a{
  float: right;
  z-index: 100;
  font-size: .6em !important;
  text-decoration: none;
  color: #FFF;
  margin-right: 10px;
  margin-top: 2px;
}
#logoutbut a:hover{
  color:#E91E63;
}
@media all and (max-width: 855px){
  
  #loginform, #register, #formHolder {width: 100%}
  #spacer{
    height: 20px;
  }
  #activityform{
    height: auto;
    overflow: auto;
    min-width: 200px;
  }
}

/*END FORM*/

@media all and (min-width: 1000px){
  .nav{
    margin-left: 0px !important;
  }
  .bodyholder{
    position: relative;
    padding-left: 240px;
  }
  .toolbar #hamburger{
    visibility: hidden;
  }
  #activityform{
    width: 50%;
    margin-left: 30%;
  }


}

@media all and (max-width: 1000px){
  body{
    background: #;
  }
  .col-1-3{
    width: 100%;
  }
  .feed-item{
    margin-left: 0px;
    margin-bottom: 1px;
    box-shadow:none;
  }
  .feed{
    margin-top: -2px;
    margin-left: 0;
  }
  .boxes{
  margin: 110px auto 0 auto;
  width: 0%;
  }

  #content{
  margin: 50px auto 50px auto;
  min-width: 300px;
  width: 100%;

  }

  #activityform{
    margin-top: 5%;
    margin-left: 5%;
    width: 90%;
  }
  
}

@media all and (max-width: 560px){.feed-item .text-holder{width: 70%}}
@media all and (max-width: 470px){.feed-item .text-holder{width: 60%}}
@media all and (max-width: 360px){.feed-item .text-holder{width: 50%}}
JS
$(function(){//Wait for page to be ready
  $('#hamburger').click(function(){
    $('.nav').css('margin-left', '0');
    $('.navoverlay').css('opacity', '1');
    $('.navoverlay').css('z-index', '60');
    $('.navoverlay').click(function(){
      $('.navoverlay').css('opacity', '0');
      $('.navoverlay').css('z-index', '-1');
      $('.nav').css('margin-left', '-100%');
    })
  })
})

$('#plus').click(function(){
  $('.navoverlay').css('z-index', '100');
  $('.navoverlay').css('opacity', '1');
  $('#activityform').css('height', '500px');
  $('#activityform').css('padding', '20px');
  $('#activityform').css('opacity', '1');
  $('#activityform').css('z-index', '110');
  $('.navoverlay').click(function(){
      $('.navoverlay').css('z-index', '-1');
      $('.navoverlay').css('opacity', '0');
    	$('#activityform').css('height', '0px');
      $('#activityform').css('padding', '0px');
      $('#activityform').css('opacity', '0');
      $('#activityform').css('z-index', '-2');
	})
})


$(function(){//Wait for page to be ready
  var filtersOpen = false;
  $('#option').click(function(){
    $('.blog-post').css('display', 'block');
  })
  $('#settings').click(function(){
    if(filtersOpen){
      //Move Filter Window Off screen                                    
     $('.filters').css('right','-100%');                
      filtersOpen = false;//set the boolean to false                     
    }else{
    $('.filters').css('right', '0px');  
    filtersOpen = true; //set the boolean to true                                   
    }
  })
})

	var blogOpen = false;
  $('#blog-filter').click(function(){
    if(!blogOpen){
   		$('.blog').css('height', '0');
      $('.blog').css('margin-bottom', '0');
      $('#blog-filter').css('color', '#DEDEDE');
      blogOpen = true;
   }else{
   		$('.blog').css('height', '100px');
      $('.blog').css('margin-bottom', '10px');
      $('#blog-filter').css('color', '#222');
     blogOpen = false;
   }
  });


	var portfolioOpen = false;
  $('#portfolio-filter').click(function(){
    if(!portfolioOpen){
   		$('.portfolio').css('height', '0');
      $('.portfolio').css('margin-bottom', '0px');
      $('#portfolio-filter').css('color', '#DEDEDE');
      portfolioOpen = true;
   }else{
   		$('.portfolio').css('height', '100px');
      $('.portfolio').css('margin-bottom', '10px');
      $('#portfolio-filter').css('color', '#222');
     portfolioOpen = false;
   }
  });
var data =[];   //A variable to keep track of the data coming from Firebase
var ref = new Firebase("https://yikesitsmikes.firebaseio.com/activities");
 ref.on("value", function(snapshot){ //Listen to data updates from firebase
		console.log(snapshot.val());
    data = snapshot.val(); //When data updates at Firebase, put it in the data variable
 })


  //Make a template from the HTML
  //<% if (obj.type) { %><%= type %><% } %>
  var compiled = _.template(
    '
<%= title %>
<%= description %>
'); var ref = new Firebase("https://yikesitsmikes.firebaseio.com/activities"); ref.on("value", function(snapshot){ console.log(snapshot.val()); var data = snapshot.val(); $('.firebase').remove(); for(i=0; i
Host Instantly Drag and Drop Website Builder

 

Description

Responsive and functional news feed that updates with Firebase. Items can be filtered by blog, portfolio or other items by toggling the settings in the upper right. Users must register and login to add new items to the feed.
Term
Mon, 11/27/2017 - 21:42

Related Codes

Pen ID
Pen ID
Pen ID