Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/jquery.waypoints.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/shortcuts/sticky.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1">
  <title>JS Bin</title>
</head>
<body>
  <div class="mainBanner container-fluid"></div>
  
  <div class="container">
    
    <div class="jumbotron">
      <h1 class="stickyFirst"><span class="green"> HSU</span> Web Design Group</h1>
    </div>
    
    <section class="row marketing bump4" id="create">
      <div class="col-xs-3 sectionName">
        <h3><a href="#create" class="anchor sticky animClick"><i class="ion-code-working"></i> Create</a></h3>
      </div>
      <div class="col-xs-9">
        <h4 class="animate">Building the Web</h4>
        <p>We are a group of people interested in learning how to create and design for the web. We are interested in different facets of web development and web design. From learning the basics of coding, to working with frameworks or content management systems. If you are interested and enjoy learning by doing (learning how to build webpages by building webpages), you should join us!</p>
        <p>We are in a state of continual improvement and are still figuring out what our goals/plans are, so if you have ideas or requests, please share them! You can drop by our meetings or lurk/post on our forum- everyone is welcome. Read on to see how you can get involved.</p>
      </div>
    </section>
​
    <section class="row marketing bump4" id="How">
      <div class="col-xs-3 sectionName">
        <h3><a href="#How" class="anchor sticky animClick"><i class="ion-clipboard"></i> How</a></h3>
      </div>
      <div class="col-xs-9">
        <h4 class="animate">The basic plan</h4>
        <p>We are all learning new things and have different goals/projects. A strict curriculum and set of lesson plans won't work for everyone, so our approach is to learn independently and get together to discuss, ask questions and share our work. If you're getting started with web design, be sure to start with the Dash <a href="https://dash.generalassemb.ly/" target="_blank" title="Link to Dash tutorial">Learn HTML, CSS and JS</a> tutorial from General Assembly.</p> The first three projects will get you going quickly and then you'll be ready to dive into your own project.
      </div>
    </section>
​
    <section class="row marketing bump4" id="group">
      <div class="col-xs-3 sectionName">
        <h3><a href="#group" class="anchor sticky animClick"><i class="ion-chatbubbles"></i> Group</a></h3>
      </div>
      <div class="col-xs-9">
        <h4 class="animate">Online Forum</h4>
        <p>We have a <a href="https://groups.google.com/d/forum/hsu-web-design-group" target="_blank" title="HSU Web Design Group Home">HSU Web Design Google Group</a> set up for meeting online to ask &amp; answer questions, share your projects and see where others are in their progress. Take a look at the Google Group to get a feel for what we are doing. Interested in more? Join us!</p>
      </div>
    </section>
​
    <section class="row marketing bump4" id="meet">
      <div class="col-xs-3 sectionName">
        <h3><a href="#meet" class="anchor sticky animClick"><i class="ion-ios-location"></i> Meet</a></h3>
      </div>
      <div class="col-xs-9">
        <h4 class="animate">Face-to-Face</h4>
        <p>We also meet in person at the HSU Library. The meetings don't include lectures or lesson plans- they are a place to get together to ask each other questions and share our work. Most of the learning is done outside of the meetings, using free online tutorials. Feel free to drop in!</p>
        <dl>
          <dt>When</dt>
          <dd>Wednesdays 4-5:00pm</dd>
          <dt>Where</dt>
          <dd>Library 114 (<a href="http://library.humboldt.edu/about/librarymap.html?y=60&x=257&f=1" target="_blank" title="HSU Library map of room 114">map</a>)</dd>
          <dt>Who</dt>
          <dd>Everyone and anyone!</dd>
        </dl>
      </div>
    </section>
​
    <section class="row marketing bump4" id="start">
      <div class="col-xs-3 sectionName">
        <h3><a href="#start" class="anchor sticky animClick"><i class="ion-play"></i> Start!</a></h3>
      </div>
      <div class="col-xs-9">
        <h4 class="animate">Intro to HTML &amp; CSS</h4>
        <p>A good starting point is with the Dash <a href="https://dash.generalassemb.ly/" target="_blank" title="Link to Dash tutorial">Learn HTML, CSS and JS</a> tutorial from General Assembly. If you are new to web design and coding, this will give you a solid foundation. If you already have a good handle on HTML &amp; CSS, the tutorial will be quick (and feel free to skip sections or go straight to the JavaScript project).</p>
        <dl>
          <dt>You will learn:</dt>
          <dd>The basics of HTML &amp; CSS and gain a deep understanding of how to apply it to create any kind of website.</dd>
          <dt>Time:</dt>
          <dd>Approx. 5 hrs - work at your own pace. Even for the amitious, this should take a while.</dd>
          <dt>Cost:</dt>
          <dd>Free! You can set up an account (no credit card or payment required) to keep track of your progress.</dd>
        </dl>
      </div>
    </section>
​
    <section class="row marketing bump4" id="tools">
      <div class="col-xs-3 sectionName">
        <h3><a href="#tools" class="anchor sticky animClick"><i class="ion-settings"></i> Tools</a></h3>
      </div>
      <div class="col-xs-9">
        <h4 class="animate">Tools to Build the Web</h4>
        <p>You will need to have, at the very least, a text editor to begin working with HTML &amp; CSS. However, there are several other tools that you can use and that can improve your workflow. There is a guide to some great free and open tools in the library's guide on <a href="http://libguides.humboldt.edu/webdev/tools" target="_blank" title="HSU Research Guide - List of tools for creating web content">Creating for the Web</a>. Take a look at this guide to find out what they do and how to get them.</p>
        <p>It's important to note, however, that you can use online code 'playgrounds' instead of downloading any software. These playgrounds allow you to test out and create content using HTML, CSS &amp; JavaScript online without having to pay for server space or host the pages. Many playgrounds are completely free and even allow you to use them without setting up an account. This page was created using <a href="https://jsbin.com" target="_blank" title="JSBin Code Playground">JSBin</a>- if you scroll to the top of the page, you'll notice the "Edit in JSBin" button at the top right-hand side of the page. Click the button to copy this page and remix your own!</p>
      </div>
    </section>
​
    <section class="row marketing bump4" id="contact">
      <div class="col-xs-3 sectionName">
        <h3><a href="#contact" class="anchor sticky animClick"><i class="ion-help-circled"></i> Contact</a></h3>
      </div>
      <div class="col-xs-9">
        <h4 class="animate">More Questions?</h4>
        <p>For more information, contact Tim Miller: twm2@humboldt.edu &middot; 707.826.4959</p><br>
      </div>
    </section>
​
      
​
​
    </div> <!-- /container -->
  
  <div class="container-fluid">
      <footer class="footer">
        <p><a href="http://library.humboldt.edu/" target="_blank" title="HSU Library Home">Humboldt State University Library</a> &middot; <a href="http://creativecommons.org/licenses/by/4.0/" target="_blank" title="CC-BY License Info">CC-BY</a></p>
      </footer>
  </div>
​
</body>
</html>
 
@import url(https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,700,700italic,900,900italic);
​
@import url(https://fonts.googleapis.com/css?family=Oswald:400,700,300);
​
@import url(https://fonts.googleapis.com/css?family=Fjalla+One);
​
body {
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  font-size: 16px;
}
​
.container {
  background: #fff;
}
​
.mainBanner {
  background: url(http://s3.amazonaws.com/libapps/accounts/55835/images/webDesignGroup.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% auto;
  border-radius: 0 !important;
  width: 100%;
  height: 200px;
  margin: 0;
  padding: 0;
  position: relative;
}
​
.jumbotron {
  text-align: center;
  background: #fff !important;
  margin: 0;
  padding: 0;
}
​
.bold {
  font-weight: bold;
}
​
h1, h2, h3, h4, h5, h6 {
  font-family: 'Fjalla one', sans-serif;
}
​
h1.stickyFirst {
  text-align: center;
  margin: 0.5em 0 0 0;
  padding: 0;
  font-size: 3.75rem;
  width: 100%;
}
​
h1 .green {
  color: rgb(32, 130, 42);
}
​
h3 {
  margin: 5px;
  font-size: 20px;
}
​
h4 {
  font-size: 22px;
  color: #666;
}
​
a {
  color: rgb(32, 130, 42);
}
​
a:hover, a:focus {
  text-decoration: none;
  color: #4CAF50;
}
​
.navbar {
  background: #ccc;
}
​
.stuck {
  position:fixed;
  z-index: 1;
}
​
h1.stickyFirst.stuck {
  top:0;
  border-bottom: 2px solid #333;
  background: rgb(255,255,255);
  left: 0;
  text-align: center;
  padding: 7px;
  position: fixed;
  height: 50px;
  margin-top: 0;
}
​
.col-xs-3 {
  width: 25% !important;
}
​
.sticky.stuck {
  padding-bottom: 3em;
}
  
.jumbotron >.sticky-wrapper {
}
​
.stuck h1 {
  font-size: 4rem;
  margin: 0;
}
​
.bump4 {
  padding-top: 4em;
}
​
.pulse {
  -webkit-animation-duration: 700ms;
  -moz-animation-duration: 500;
  -ms-animation-duration: 500;
  -o-animation-duration: 500;
}
​
dd {
  padding-left: 10px;
}
​
footer {
  text-align: center;
  padding-top: 5px;
  margin-bottom: 0;
  background: rgb(32, 130, 42);
  color: #fff;
  padding-bottom: 1px;
}
​
footer a {
  color: #fff;
}
​
footer a:hover, footer a:focus {
  color: #ddd;
}
​
.container-fluid {
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 0;
}
​
@media screen and (min-width: 768px) {
  
  h1.stickyFirst {
    text-align: center;
    font-size: 7rem;
    margin-top: 0.5em;
  }
  
  h1.stickyFirst.stuck {
    font-size: 3rem;
  }
  
  .mainBanner {
    height: 800px;
  }
​
}
​
@media screen and (min-width: 1000px) {
​
  h1.stickyFirst {
  }
  
  body {
    font-size: 20px;
  }
  
}
​
@media screen and (min-width: 1450px) {
​
  h1.stickyFirst.stuck {
  }
  
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
sometimesmotionpro
0viewers