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 lang="en">
<head>
<link href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css" rel="stylesheet" type="text/css" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.5/darkly/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-smooth-scroll/1.5.5/jquery.smooth-scroll.min.js"></script>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/screenfull.js/3.0.0/screenfull.min.js"></script>
  <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Basic Research - SkillShop - Humboldt State University Library</title>
</head>
<body>  
  
  
<section class="titleSection">
  <div class="content slide active firstContent container-fluid title firstTitle">
    <div class="row">
      <div class="col-sm-12">
        <h1>Basic Research</h1>
        <h2>Tim Miller &middot; twm2 &middot; 707.826.4959 &middot; Library 02 (Lower Level)</h2>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12">
        <div class="attrib">
          <p>All text, html, css &amp; js <a rel="license" href="http://creativecommons.org/licenses/by/4.0/" class="imageLink"><img class="license" alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/80x15.png" /></a> <a href="http://libguides.humboldt.edu/prf.php?account_id=55835" target="_blank" title="Profile for Tim Miller">Tim Miller</a></p>
          <p>All photos &copy; <a href="https://www.flickr.com/photos/humboldtstate" target="_blank" title="HSU Flickr site">Humboldt State University</a> </p>
          <p>Unless otherwise noted</p>
        </div>
      </div>
    </div>
  </div>
  <div class="transition"></div>
</section>  
​
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>Goals</h2>
      <div class="row">
        <div class="col-sm-2"></div>
        <div class="col-sm-8">
          <h3 class="center">Briefly introduce  yourself:</h3>
          <h3 class="center">What do <strong>YOU</strong> want to learn today?</h3>
          <h3 class="center">What frustrates <strong>YOU</strong> about research?</h3>
        </div>
        <div class="col-sm-2"></div>
      </div>
    </div>
  </section>
​
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>Goals</h2>
      <div class="row">
        <div class="col-sm-4"></div>
        <div class="col-sm-4">
          <h3>Today:</h3>
          <ul>
            <li>choosing a topic</li>
            <li>thinking of keywords</li>
            <li>searching in databases
              <ul>
                <li>search operators</li>
                <li>filters</li>
                <li>subject headings</li>
                <li>saving your work</li>
              </ul>
            </li>
            <li>citations</li>
          </ul>
        </div>
        <div class="col-sm-4"></div>
      </div>
    </div>
  </section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
        <h2>Sample Assignment</h2>
        <div class="row">
          <div class="col-sm-1"></div>
          <div class="col-sm-10">
            <p class="bump whiteBk">Write a 3-5 page essay about a current issue relevant to the profession using a minimum of three (3) articles. At least one (1) must be a peer-reviewed journal article. All articles should be current- published in the last five (5) years. Include a statement of why the issue is relevant, provide the evidence, and conclude with some recommendations on how to best deal with the issue. The paper should be written following APA style guidelines and include a reference list of your cited articles.</p>
            <div class="center bump  click1 sr-only">
              <span class="maroon bubble">Topic</span> <span class="dkgreen bubble">Basic Requirements</span> <span class="dkblue bubble">Purpose of the articles</span> <span class="purple bubble">Citation &amp; Styles</span>
            </div>
          </div>
          <div class="col-sm-1"></div>
        </div>
    </div>
  </section>
​
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>Developing Your Topic</h2>
      <div class="row">
        <div class="col-sm-2"></div>
        <div class="col-sm-8">
          <h3>Choose something interesting!</h3>
          <h4>Topic: racism in sports mascots</h4>
          <h4>What do you know?</h4>
          <ul>
            <li>Current issues with Native American movements.</li>
            <li>Past issues, how they were resolved?</li>
          </ul>
        </div>
        <div class="col-sm-2"></div>
      </div>
    </div>
  </section>
​
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>Develop Your Topic</h2>
      <div class="row">
        <div class="col-sm-2"></div>
        <div class="col-sm-8">
          <h3>Keywords from my topic</h3>
          <ul>
            <li>mascot, sports mascot</li>
            <li>racism, race</li>
            <li>stereotypes, offensive stereotypes</li>
            <li>Native American</li>
            <li>Washington R*skins</li>
          </ul>
          <h3>Start broad and narrow down</h3>
          <ul>
            <li>mascot AND racism - simple, easy to add terms later</li>
          </ul>
        </div>
        <div class="col-sm-2"></div>
      </div>
    </div>
  </section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
        <h2>Boolean Search Operators</h2>
        <div class="row">
          <div class="col-sm-2"></div>
          <div class="col-sm-8">
            <div class="videoWrapper">
              <iframe width="100%" height="315" src="https://www.youtube.com/embed/sdx9dACkvyI" frameborder="0" allowfullscreen></iframe>
            </div>
          </div>
          <div class="col-sm-2"></div>
        </div>
    </div>
  </section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>Subject Headings</h2>
      <div class="row">
        <div class="col-sm-2"></div>
        <div class="col-sm-8">
          <h3>Similar to hashtags</h3>
          <h3>Curated by specialists</h3>
          <h3>Assigned to the article when it is added to the database</h3>
          <h3>Encapsulates a concept, not just a specific word</h3>
        </div>
        <div class="col-sm-2"></div>
      </div>
    </div>
  </section>
​
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>Research Secrets</h2>
      <div class="row">
        <div class="col-sm-2"></div>
        <div class="col-sm-8">
          <h3>There are no magic tricks</h3>
          <h4 class="indent">Research requires time &amp; patience</h4>
          <h3 class="bump">Try different things</h3>
          <h4 class="indent">there is no <strong>one</strong> search that will uncover everything that you're looking for- you will need to repeat, repeat, repeat</h4>
        </div>
        <div class="col-sm-2"></div>
      </div>
    </div>
  </section>
  
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>Let's Try It Out</h2>
      <div class="row">
        <div class="col-sm-2"></div>
        <div class="col-sm-8 center">
          <div class="bigLink">
            <a href="http://library.humboldt.edu/" target="_blank" title="HSU Library Homepage" class="">library.humboldt.edu</a>
          </div>
        </div>
        <div class="col-sm-2"></div>
      </div>
    </div>
  </section>
​
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>Search Features</h2>
      <div class="row">
        <div class="col-sm-12">
          <div class="center bump">
            <img src="http://users.humboldt.edu/tmiller/images/ebscoSearchBox.png" alt="Screen shot of Ebsco search boxes" class="imgBig">
          </div>
        </div>
      </div>
    </div>
  </section>
​
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2>Try it Out</h2>
      <div class="row">
        <div class="col-sm-2"></div>
        <div class="col-sm-8">
          <ol>
            <li>Open <a href="http://library.humboldt.edu/infoservices/restricted/sportdis.cgi">SPORTDiscus</a></li>
            <li>Enter two search terms using AND
              <ul>
                <li>e.g. sports mascots AND racism</li>
              </ul>
            </li>
            <li>Look at your results:
              <ul>
                <li>Too many? Add another term using AND
                  <ul>
                    <li>e.g. sports mascots AND racism AND Native Americans</li>
                  </ul>
                </li>
                <li>Too few? Add a synonym using OR
                  <ul>
                    <li>e.g. (sports OR school) AND mascot AND racism</li>
                  </ul>
                </li>
              </ul>
            </li>
          </ol>
        </div>
        <div class="col-sm-2"></div>
      </div>
    </div>
  </section>    
​
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
      <h2 class="lobster logo">SkillShops</h2>
      <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-10">
          <ul class="skillshops">
            <li><a href="http://humboldt.libcal.com/workshops">Calendar</a></li>
            <li><a href="http://library.humboldt.edu/about/skilledlearners.html">Certificate</a></li>
            <li>
              <ul class="categories">
                <li><span class="category pro">Professional</span></li>
                <li><span class="category acad">Academic</span></li>
                <li><span class="category res">Research</span></li>
                <li><span class="category life">Life</span></li>
                <li><span class="category tech">Technology</span></li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="col-md-1"></div>
      </div>
    </div>
  </section>
​
<!--
​
  <section>
    <div class="parallax">
    </div>
    <div class="content slide container-fluid title">
    </div>
  </section>
​
-->
​
  
  <a href="" class="arrow"><span class="ion-chevron-down"></span><span class="hidden">Next</span></a>
  <div id="fullscreen"><span class="ion-arrow-expand"></span><span class="sr-only">Full screen</span></div>
  
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="">  
    </div>
  </div>
  
</body>
</html>
 
@import url(//fonts.googleapis.com/css?family=Oswald:400,300,700);
@import url(//fonts.googleapis.com/css?family=Lato:400,300,700);
@import url(//fonts.googleapis.com/css?family=Lobster:400,300,700);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,900,300);
​
html {
  font-size: 22px;
}
​
body {
  background: rgba(52, 73, 94,1.0);
  font-family: roboto;
  color: #fff;
}
​
h1 {
  text-align: center;
  color: #000;
  font-family: roboto;
  font-size: 5.7rem;
}
​
h2 {
  font-size: 2.5rem;
  text-align: center;
  font-family: oswald;
}
​
a:link, a:hover, a:visited, a:active {
  text-decoration: none;
  color: rgba(255,255,255, 1);
  border-bottom: 0.25rem solid rgba(255,255,255, 0.5);
}
​
a:hover {
  color: rgba(255,255,255, 1);
  border-bottom: 0.25rem solid rgba(255,255,255, 1);
}
​
.titleSection h2 {
  font-size: 1.5rem;
  color: #000;
}
​
.attrib p {
  text-align: center;
  color: #000;
  font-size: 0.7rem;
}
​
.attrib a {
  text-decoration: none;
  border-bottom: 0.15rem solid rgba(0,0,0, 0.5);
  color: #000;
}
​
.attrib a:hover {
  border-bottom: 0.15rem solid rgba(0,0,0, 1);
  color: #333;
}
​
.attrib a.imageLink, .attrib a.imageLink:hover {
  border:none;
}
​
.cc {
  font-size: 1vw;
  color: #fff;
}
​
.cc a {
  color: #fff;
  text-decoration: none;
  border-bottom: 6px solid rgba(255,255,255,0.5);
}
​
.cc a:link, .cc a:hover, .cc a:visited, .cc a:active {
  color: #fff;
  text-decoration: none;
  border-bottom: 6px solid rgba(255,255,255,0.5);
}
​
.cc a:hover {
  border-bottom: 6px solid rgba(255,255,255,0.9);
}
​
img.license {
  border: none;
  border-radius: 0;
  width: 6vw;
}
​
h3 {
  font-family: roboto;
  font-size: 1.5rem;
}
​
h4 {
  font-family: roboto;
  font-size: 1.25rem;
}
​
p {
  font-size: 0.75rem;
}
​
ul {
  font-weight: 700;
  list-style-type: none;
  font-size: 1rem;
}
​
ol {
  font-weight: 700;
  font-size: 1rem;
}
​
ol>li {
  font-size: 1rem;
  line-height: 1.7;
  text-indent: 0;
}
​
li {
  font-weight: 400;
  padding-left: 1rem;
  text-indent: -1rem;
}
​
dl {  
  font-size: 2vw;
}
​
dd {
  padding-left: 2em;
  text-indent: -1em;
}
​
.titleSection {  
  background: url(https://c2.staticflickr.com/6/5825/21437071664_97a530510a_o.jpg);
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin-bottom: 0;
  filter: grayscale(100%);
}
​
.sectionA {
  background-image: url("https://farm3.staticflickr.com/2861/11427908683_7bae08ae6c_h.jpg");
  background-position: center top;
  background-size: cover;
}
​
.sectionB {
  background-image: url("https://farm8.staticflickr.com/7332/11427909403_19c8bae6f2_o.jpg");
  background-position: center top;
  background-size: cover;
}
​
.sectionC {
  background-image: url("https://farm9.staticflickr.com/8694/16597551073_02356ab38f_o.jpg");
  background-position: center top;
  background-size: cover;
}
​
.sectionD {
  background-image: url("https://farm8.staticflickr.com/7364/16404506411_a5198247c1_o.jpg");
  background-position: center top;
  background-size: cover;
}
​
.sectionE {
  background-image: url("https://farm8.staticflickr.com/7346/12531163823_892697e590_o.jpg");
  background-position: center top;
  background-size: cover;
}
​
section {
  position: relative;
  background-attachment: fixed;
}
​
.content {
  background: rgba(52, 73, 94,0.9);
  border-top: 10px solid rgba(52, 73, 94,1.0);
  border-bottom: 10px solid rgba(52, 73, 94,1.0);
}
​
.row {
  padding-top: 1em;
}
​
.bump {
  margin-top: 1rem;
}
​
.noBump {
  margin-top: 0;
}
​
img {
  max-width: 90%;
}
​
.imgBig {
  width: 100%;
}
​
.imageCenter {
  text-align: center;
}
​
.imageCenter img {
  max-width: 80%;
}
​
.firstContent {
  background: none;
}
​
.firstTitle {
  background: rgba(255,255,255,0.5);
  position: absolute;
  width: 100%;
  border-top: none;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+1&0+0,0+0,0+0,1+100 */
background: -moz-linear-gradient(left, rgba(255,255,255,0.0) -10%, rgba(255,255,255,0.9) 50%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(255,255,255,0.0) -10%,rgba(255,255,255,0.9) 50%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to top, rgba(255,255,255,0.0) -10%,rgba(255,255,255,0.9) 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}
​
.parallax {
  background: transparent;
  height: 10px;
  width: 100%;
}
​
a.arrow:hover {
  background: rgba(57, 57, 57,0.7);
  color: #fff;
}
​
a.arrow {
  position: fixed;
  bottom: 20px;
  text-align: center;
  left: 47%;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 500px;
  line-height: 1.4;
  font-size: 2rem;
  border: 4px solid rgb(50,50,50);
  background: rgba(255, 255, 255,0.4);
  color: rgba(50,50,50,1);
  z-index: 1001;
}
​
.titleSlide a.arrow {
  bottom: -0.5em;
  background: rgba(255, 255, 0, 0.7);
  font-size: 4vw;
  height: 100px;
  width: 100px;
  line-height:1.5;
}
​
a.arrow.end {
  font-size: 3rem;
  color: rgba(217, 83, 79, 1);
  color: #fff;
  line-height: 0.4;
  background: none;
  border: none;
  bottom: 0.5em
}
​
a.arrow.end:hover {
  color: rgba(255, 255, 0, 1);
}
​
.lobster {
  font-family: lobster;
}
​
.logo {
  text-shadow: 5px 5px 0px #894DA0,
    10px 10px 0px rgba(0,0,0,0.3);
  color: rgba(255,255,255,0.8);
  font-size: 3.5rem;
}
​
h2.logo {
  background: #894DA0;
  padding-bottom: 40px;
}
​
.skillshops {
  text-align: center;
}
​
.categories li {
  display: inline-block;
  margin: 20px 50px;
  font-family: oswald;
}
​
.category {
  background: white;
  padding: 5px 50px;
  color: black;
  border-radius: 50%;
  box-shadow: 10px 10px 0px rgba(0,0,0,0.3);
}
​
.pro {
  color: orange;
}
​
.acad {
  color: green;
}
​
.res {
  color: red
}
​
.life {
  color: cornflowerblue;
}
​
.tech {
  color: purple;
}
​
#fullscreen {
  position: fixed;
  bottom: 3%;
  right: 1%;
  text-align: center;
  line-height: 1.15;
  font-size: 1.5rem;
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
  color: rgba(255, 255, 255, 1);
  background: rgba(31, 31, 31, 0.5);
}
​
#fullscreen:hover {
  cursor: pointer;
}
​
.pointer {
  cursor: pointer;
}  
​
.center {
  text-align:center;
}
​
.progress {
  position: fixed;
  bottom: -2px;
  width: 100%;
  height: 14px;
  border-radius: 0;
  margin-bottom: 0;
}
​
.progress-bar {
  font-size: 14px !important;
  line-height: 0.95 !important;
  text-align: left;
}
​
.whiteBk {
  background: #fff;
  color: #000;
  padding: 10px;
  border-radius: 3px;
}
​
.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
​
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
​
.bigLink {
  margin-top: 2rem;
}
​
.bigLink a, .bigLink a:visited {
  font-size: 1rem;
  color: #fff;
  text-decoration: none;
  background: #27ae60;
  border: 8px solid #fff;
  border-radius: 50px;
  padding: 20px;
}
​
.bigLink a:hover, .bigLink a:active {
  background: #2ecc71;
}
​
/* Medium Devices, Desktops */
  @media (min-width: 992px) {
    
  }
​
    /* Small Devices, Tablets */
  @media (min-width : 768px) {
    
    .bigLink a {
      font-size: 3rem;
    }
    
  }
​
/* Large Devices, Wide Screens */
  @media (min-width : 1600px) {
​
    html {
      font-size: 38px;
    }
    
    p {
      font-size: 1rem;
    }
​
  }
​
/* Extra-large Screens, Wide Screens */
  @media (min-width : 3000px) {
    
  }
​
/* Extra Small Devices, Phones */ 
  @media (max-width : 380px) {
    
    html {
      font-size: 18px;
    }
    
  }
Output

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

Dismiss x
public
Bin info
sometimesmotionpro
0viewers