Rise Up Home Page Temp

index.html

<div class="nav" id="nav">
  <div class="logo" id="logo">
  </div>
  <ul class="menu-group">
    <li class="menu-button login-group" id="login-group"><a class="login-group-login" href="#">Log In</a><a class="login-group-signin" href="#">Sign Up</a></li>
    <li class="menu-button"><a class="menu-button-a" href="#">hi</a></li>
    <li class="menu-button"><a class="menu-button-a" href="#">hi</a></li>
    <li class="menu-button"><a class="menu-button-a" href="#">hi</a></li>
  </ul>
</div>
<div class="container" id="container">
  <div class="container-hero">
    <h1>Rise Up</h1>
    <h3>Mustache austin roof party put a bird on it direct trade. Leggings echo park sartorial butcher. Narwhal deep v neutra disrupt banjo. Try-hard cronut knausgaard viral, cold-pressed photo booth bushwick raw denim. Quinoa taxidermy swag twee wayfarers, PBR&B typewriter farm-to-table mixtape ethical keffiyeh occupy. IPhone bushwick tacos, direct trade kitsch locavore beard listicle YOLO trust fund crucifix brunch. Meggings mixtape kogi sriracha, next level portland small batch asymmetrical deep v fashion axe put a bird on it gastropub.</h3>
  </div>
  <div class="container-body">
    <div class="summary-grid">
      <div class="summary-grid-item">
        <a href="#homeless">Homeless</a>
      </div>
      <div class="summary-grid-item">
        <a href="#mental">Mental Health</a>
      </div>
      <div class="summary-grid-item">
        <a href="#food">Food Services</a>
      </div>
      <div class="summary-grid-item">
        <a href="#community">Community Services</a>
      </div>
      <div class="summary-grid-item">
        <a href="#county">County Services</a>
      </div>
      <div class="summary-grid-item">
        <a href="#awareness">Public Awareness</a>
      </div>
    </div>
    <div class="other-services-grid">
      <div class="other-services-grid-item">
      </div>
      <div class="other-services-grid-item">
      </div>
      <div class="other-services-grid-item">
      </div>
      <div class="other-services-grid-item">
      </div>
      <div class="other-services-grid-item">
      </div>
      <div class="other-services-grid-item">
      </div>
    </div>
  </div>
  <div class="main-article-box">
    <article class="main-article" id="homeless">
      <h1>Homeless</h1>
      <h3>asdsd dgdfg dg gdfgf gdfg</h3>
      <p>Mustache austin roof party put a bird on it direct trade. Leggings echo park sartorial butcher. Narwhal deep v neutra disrupt banjo. Try-hard cronut knausgaard viral, cold-pressed photo booth bushwick raw denim. Quinoa taxidermy swag twee wayfarers, PBR&B typewriter farm-to-table mixtape ethical keffiyeh occupy. IPhone bushwick tacos, direct trade kitsch locavore beard listicle YOLO trust fund crucifix brunch. Meggings mixtape kogi sriracha, next level portland small batch asymmetrical deep v fashion axe put a bird on it gastropub.
<br><br>
Listicle banjo vinyl thundercats trust fund polaroid kogi. Mumblecore cred stumptown cliche williamsburg ethical, cronut crucifix marfa. Authentic scenester crucifix distillery messenger bag gastropub cardigan. Kombucha whatever pug, health goth mumblecore beard semiotics kale chips truffaut microdosing pop-up venmo everyday carry celiac. Truffaut vinyl leggings, squid venmo photo booth wayfarers mumblecore literally everyday carry yuccie umami. Microdosing tacos narwhal man bun you probably haven't heard of them, umami locavore disrupt brunch blue bottle tilde truffaut twee chambray. Bitters kale chips listicle you probably haven't heard of them, echo park wayfarers viral wolf before they sold out cornhole taxidermy pabst locavore literally.</p>
    </article>
    <article class="main-article" id="mental">
      <h1>Mental Health</h1>
      <h3>asdsd dgdfg dg gdfgf gdfg</h3>
      <p>Listicle banjo vinyl thundercats trust fund polaroid kogi. Mumblecore cred stumptown cliche williamsburg ethical, cronut crucifix marfa. Authentic scenester crucifix distillery messenger bag gastropub cardigan. Kombucha whatever pug, health goth mumblecore beard semiotics kale chips truffaut microdosing pop-up venmo everyday carry celiac. Truffaut vinyl leggings, squid venmo photo booth wayfarers mumblecore literally everyday carry yuccie umami. Microdosing tacos narwhal man bun you probably haven't heard of them, umami locavore disrupt brunch blue bottle tilde truffaut twee chambray. Bitters kale chips listicle you probably haven't heard of them, echo park wayfarers viral wolf before they sold out cornhole taxidermy pabst locavore literally.</p>
    </article>
    <article class="main-article" id="food">
      <h1>Food Services</h1>
      <h3>asdsd dgdfg dg gdfgf gdfg</h3>
      <p>Mustache austin roof party put a bird on it direct trade. Leggings echo park sartorial butcher. Narwhal deep v neutra disrupt banjo. Try-hard cronut knausgaard viral, cold-pressed photo booth bushwick raw denim. Quinoa taxidermy swag twee wayfarers, PBR&B typewriter farm-to-table mixtape ethical keffiyeh occupy. IPhone bushwick tacos, direct trade kitsch locavore beard listicle YOLO trust fund crucifix brunch. Meggings mixtape kogi sriracha, next level portland small batch asymmetrical deep v fashion axe put a bird on it gastropub.
<br><br>
Listicle banjo vinyl thundercats trust fund polaroid kogi. Mumblecore cred stumptown cliche williamsburg ethical, cronut crucifix marfa. Authentic scenester crucifix distillery messenger bag gastropub cardigan. Kombucha whatever pug, health goth mumblecore beard semiotics kale chips truffaut microdosing pop-up venmo everyday carry celiac. Truffaut vinyl leggings, squid venmo photo booth wayfarers mumblecore literally everyday carry yuccie umami. Microdosing tacos narwhal man bun you probably haven't heard of them, umami locavore disrupt brunch blue bottle tilde truffaut twee chambray. Bitters kale chips listicle you probably haven't heard of them, echo park wayfarers viral wolf before they sold out cornhole taxidermy pabst locavore literally.
<br><br>
Ethical XOXO occupy semiotics 90's fixie. Organic kombucha mixtape, 3 wolf moon man bun dreamcatcher ugh. Forage scenester etsy, blog humblebrag normcore flexitarian godard lumbersexual gluten-free pabst keffiyeh ennui shoreditch. Whatever meggings kitsch, truffaut letterpress authentic messenger bag kombucha bushwick single-origin coffee art party. Keytar authentic deep v, lo-fi art party church-key echo park thundercats. Post-ironic man bun PBR&B pinterest affogato, tote bag tacos synth tousled DIY health goth asymmetrical cornhole ramps pickled. Fixie bushwick artisan chambray pabst banjo chartreuse pork belly iPhone, roof party narwhal art party master cleanse scenester.</p>
    </article>
    <article class="main-article" id="community">
      <h1>Community Services</h1>
      <h3>asdsd dgdfg dg gdfgf gdfg</h3>
      <p>Mustache austin roof party put a bird on it direct trade. Leggings echo park sartorial butcher. Narwhal deep v neutra disrupt banjo. Try-hard cronut knausgaard viral, cold-pressed photo booth bushwick raw denim. Quinoa taxidermy swag twee wayfarers, PBR&B typewriter farm-to-table mixtape ethical keffiyeh occupy. IPhone bushwick tacos, direct trade kitsch locavore beard listicle YOLO trust fund crucifix brunch. Meggings mixtape kogi sriracha, next level portland small batch asymmetrical deep v fashion axe put a bird on it gastropub.
<br><br>
Listicle banjo vinyl thundercats trust fund polaroid kogi. Mumblecore cred stumptown cliche williamsburg ethical, cronut crucifix marfa. Authentic scenester crucifix distillery messenger bag gastropub cardigan. Kombucha whatever pug, health goth mumblecore beard semiotics kale chips truffaut microdosing pop-up venmo everyday carry celiac. Truffaut vinyl leggings, squid venmo photo booth wayfarers mumblecore literally everyday carry yuccie umami. Microdosing tacos narwhal man bun you probably haven't heard of them, umami locavore disrupt brunch blue bottle tilde truffaut twee chambray. Bitters kale chips listicle you probably haven't heard of them, echo park wayfarers viral wolf before they sold out cornhole taxidermy pabst locavore literally.</p>
    </article>
    <article class="main-article" id="county">
      <h1>County Services</h1>
      <h3>asdsd dgdfg dg gdfgf gdfg</h3>
      <p>Listicle banjo vinyl thundercats trust fund polaroid kogi. Mumblecore cred stumptown cliche williamsburg ethical, cronut crucifix marfa. Authentic scenester crucifix distillery messenger bag gastropub cardigan. Kombucha whatever pug, health goth mumblecore beard semiotics kale chips truffaut microdosing pop-up venmo everyday carry celiac. Truffaut vinyl leggings, squid venmo photo booth wayfarers mumblecore literally everyday carry yuccie umami. Microdosing tacos narwhal man bun you probably haven't heard of them, umami locavore disrupt brunch blue bottle tilde truffaut twee chambray. Bitters kale chips listicle you probably haven't heard of them, echo park wayfarers viral wolf before they sold out cornhole taxidermy pabst locavore literally.</p>
    </article>
    <article class="main-article" id="awareness">
      <h1>Public Awareness</h1>
      <h3>asdsd dgdfg dg gdfgf gdfg</h3>
      <p>Mustache austin roof party put a bird on it direct trade. Leggings echo park sartorial butcher. Narwhal deep v neutra disrupt banjo. Try-hard cronut knausgaard viral, cold-pressed photo booth bushwick raw denim. Quinoa taxidermy swag twee wayfarers, PBR&B typewriter farm-to-table mixtape ethical keffiyeh occupy. IPhone bushwick tacos, direct trade kitsch locavore beard listicle YOLO trust fund crucifix brunch. Meggings mixtape kogi sriracha, next level portland small batch asymmetrical deep v fashion axe put a bird on it gastropub.
<br><br>
Listicle banjo vinyl thundercats trust fund polaroid kogi. Mumblecore cred stumptown cliche williamsburg ethical, cronut crucifix marfa. Authentic scenester crucifix distillery messenger bag gastropub cardigan. Kombucha whatever pug, health goth mumblecore beard semiotics kale chips truffaut microdosing pop-up venmo everyday carry celiac. Truffaut vinyl leggings, squid venmo photo booth wayfarers mumblecore literally everyday carry yuccie umami. Microdosing tacos narwhal man bun you probably haven't heard of them, umami locavore disrupt brunch blue bottle tilde truffaut twee chambray. Bitters kale chips listicle you probably haven't heard of them, echo park wayfarers viral wolf before they sold out cornhole taxidermy pabst locavore literally.
<br><br>
Ethical XOXO occupy semiotics 90's fixie. Organic kombucha mixtape, 3 wolf moon man bun dreamcatcher ugh. Forage scenester etsy, blog humblebrag normcore flexitarian godard lumbersexual gluten-free pabst keffiyeh ennui shoreditch. Whatever meggings kitsch, truffaut letterpress authentic messenger bag kombucha bushwick single-origin coffee art party. Keytar authentic deep v, lo-fi art party church-key echo park thundercats. Post-ironic man bun PBR&B pinterest affogato, tote bag tacos synth tousled DIY health goth asymmetrical cornhole ramps pickled. Fixie bushwick artisan chambray pabst banjo chartreuse pork belly iPhone, roof party narwhal art party master cleanse scenester.</p>
    </article>
  </div>
</div>
<footer class="footer">
  <div class="footer-left">
    hi
  </div>
  <div class="footer-middle">
    hi
  </div>
  <div class="footer-right">
    hi
  </div>
</footer>

Rise Up Home Page Temp.markdown

Rise Up Home Page Temp

A Pen by Tim Smith on CodePen.

License.

script.js

var isMenuActive = "false";
var isUserLoggedIn = "false"; //Temp for login fake
function headerOff(){
  $('#nav').css("margin-top", "-55px");
  $('#logo').css("height", "70px");
  $('#logo').css("width", "70px");
}
function headerOn(){
  $('#nav').css("margin-top", "0");
  $('#logo').css("height", "100px");
  $('#logo').css("width", "100px");
}
function fakeLogin(){
  console.log("fakeLogin-login ran");
  $('#login-group').children('a').remove();
  $('#login-group').append("<a class='menu-button-a' id='signout' href='#'>Sign Out</a>");
  isUserLoggedIn = "true";
  console.log(isUserLoggedIn);
}
function fakeLogout(){
  console.log("fakeLogin-logout ran");
  $('#signout').css('display', 'none');
  $('#login-group').append("<a class='login-group-login' href='#'>Log In</a>");
  $('#login-group').append("<a class='login-group-signin' href='#'>Sign Up</a>");    
  isUserLoggedIn = "false";
  console.log(isUserLoggedIn);
}

$( document ).ready(function() {
  $('#login-group').click(function() {
    if(isUserLoggedIn == "false"){
      fakeLogin();
    } else {
      fakeLogout();
    }
  })
  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if($(window).scrollTop() > 0) {
      headerOff();
    } else {
      headerOn();
    }
    $( "#nav" ).hover(
      function() {
        $('#nav').css("margin-top", "0");
        $('#nav').css("transition-duration", "0.25s");
      }, function() {
        if($(window).scrollTop() > 60) {
          $('#nav').css("margin-top", "-40px");
          $('#nav').css("transition-duration", "0.25s");
        }
      }
    );
  });
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Scroll Test # 5.markdown

Scroll Test # 5

A Pen by Tim Smith on CodePen.

License.

style.css

*, *:before, *:after {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box;
}

/* Document level adjustments */
html {
  font-size: 17px;
}
@media (max-width: 900px) {
  html { font-size: 15px; }
}
@media (max-width: 400px) {
  html { font-size: 13px; }
}

/* Type will scale with document */
h1 {
  font-size: 3rem;
}
h2 {
  font-size: 2.5rem;
}
h3 {
  font-size: 2rem;
}

body{
  font-family: sans-serif;
  background: #333;
  posision: relative;
}
/*  Nav Start */
#nav{
  transition-duration: 1.5s;
}
.nav{
  height: 70px;
  background: #ccc;
  display: flex;
  justify-content: space-between;
  position: -webkit-sticky;
  position: fixed;
  top: 0;
  width: 100%;
  box-shadow: 0 2px 40px #000;
}

.logo{
  width: 100px;
  height: 100px;
  background: blue;
  transition-duration: 0.5s;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  .logo{
    width: 70px;
    height: 70px;
  }
}

.menu-group{
  width: 400px;
  display: flex;
}

.menu-button{
  display: inline-block;
  width:24.75%;
  height: 70px;
  background: #bbb;
  border-left: 1px solid #777;
  line-height: auto;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  .menu-group{
    width: 200px;
  }
  
  .menu-button{
    width:50px;
    height: 50px;
  }
}

.menu-button-a{
  color: #000;
  display: block;
  height: 50px;
  font-size: 1.2em;
  padding-top: 1.5em;
  text-decoration: none;
  text-align: center;
}
.login-group{
  display: flex;
  flex-direction: column;
}
.login-group-login,
.login-group-signin{
  height: 35px;
}
.login-group-login,
.login-group-signin{
  color: #000;
  display: block;
  height: 50px;
  padding-top: 0.5em;
  font-size: 1.2em;
  text-decoration: none;
  text-align: center;
}
.login-group-login{
  border-bottom: 1px solid #777;
}

/*  Nav End */

/*  Hero Start */

.container{
}

.container-hero{
  height: 90vh;
}
.container-hero h1{
  color: #D7D200;
  text-align: center;
  font-size: 4rem;
  font-weight: bolder;
  padding-top:18rem;
  padding-bottom: 3rem
}
.container-hero h3{
  text-align: center;
  font-size: 1.3rem;
  margin: 0 5rem;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  .container-hero{
    height: 250px;
  }
  .container-hero h1{
  font-size: 3rem;
  font-weight: bold;
  padding-top:33.3333333334%;
  padding-bottom: 3rem
  }
  .container-hero h3{
    display: none;
  }
}

.container-body{
  background: #ccc;
}


/*  Hero End */

/*  Summary Grid Start */

.summary-grid{
  display: flex;
  flex-wrap: wrap;
  height: 100px;
}

.summary-grid-item{
  justify-content: space-between;
  width: 16.666666666666667%;
  height: 100px;
  border-left: 1px solid #777;
  border-bottom: 1px solid #777;
}
.summary-grid-item:first-child{
  border-left: none;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  .summary-grid-item{
    width: 33.33333333333334%;
  }
  .summary-grid-item:nth-child(4){
    border-left: none;
  }
}

/*  Summary Grid End */

/*  Other Services Start */

.other-services-grid{
  display: flex;
  flex-wrap: wrap;
  height: 300px;
}

.other-services-grid-item{
  justify-content: space-between;
  width: 33.33333333333334%;
  height: 150px;
  border-left: 1px solid #777;
  border-bottom: 1px solid #777;
}
.other-services-grid-item:first-child,.other-services-grid-item:nth-child(4){
  border-left: none;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  .other-services-grid-item{
    width: 100%;
    border: none;
  }
}

/*  Other Services End */

/*  Main Srticles Start */

.main-article-box{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.main-article{
  width: 30%;
  padding: 1.5rem;
  background: #1B3F8B;
  margin-top: 1.5rem;
}
.main-article p{
  color: #fff;
  font-size: 0.75rem;
  line-height: 1.25;
}
.main-article h1{
  color: #D7D200;
  text-align: center;
  font-size: 2rem;
  padding-bottom: 0.25em;
}
.main-article h3{
  color: #8C4230;
  font-size: 1.5rem;
  text-align: center;
  padding-bottom: 0.5em;
}


/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  .main-article{
    width: 48%;
  }
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  .main-article{
    width: 100%;
  }
}

/*  Main Srticles End */

/*  Footer Start */

.footer{
  margin-top: 1em;
  display: flex;
  justify-content: space-around;
  background: #eee;
}
.footer-left{
  height: 150px;
  width: 28%;
}
.footer-middle{
  flex-grow: 2;
  border-left: 1px solid black;
}
.footer-right{
  width: 28%;
  border-left: 1px solid black;
}

/*  Footer End */