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>
    <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <link href="style.css" type="text/css" rel="stylesheet">
    <meta charset="utf-8">
    <meta name="robots" content="noindex">
    <title>RTG - Psychology</title>
    <!--
Largely based on the Random Adorable Name Generator concept and design by mousemeredith https://mousemeredith.makes.org/thimble/LTc5ODg4MzMyOA==/random-adorable-name-generator_
-->
    
    <!--Must include the jQuery script-->
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <!--Along with the custom script-->
    <script src="script-1.js"></script>
  </head>
  
  <body>
​
    <h1>Random Topic Generator</h1>
    <div class="rrtg">
      <article class="case"><!--The light gray element-->
        <div id="border"><!--The darker gray element-->
          <div id="screen"></div><!--Where all of the JS magic happens-->
        </div>
        <h2>Random Research Topic Generator</h2>
        <h3>Psychology Edition</h3>
        <span id="rtg" class="btn ion-ios-refresh-empty icon-md" title="Try another random topic"></span>
        <a href="http://library.calstate.edu/humboldt/articles" id="searchTopic" target="_blank" title="Search the HSU Library collection" class="btn ion-ios-search icon-md"><span class="hidden">Search</span></a>
      </article>
    </div>
    
    <footer style="position:absolute;bottom:0;right:0;">
      <div class="left">Also check out the <a href="https://d157rqmxrxj6ey.cloudfront.net/sometimesmotion/19700/" target="_blank" title="Remix project that creates new words!">FakeRandomWordGenerator</a></div>
      <div class="right"><a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0; height: 20px" src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a>
        tim miller</div>
    </footer>
    
  </body>
  
</html>
 
@import url(https://fonts.googleapis.com/css?family=Oswald:400,300,700);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);
@import url(https://fonts.googleapis.com/css?family=Press+Start+2P);
@import url(https://fonts.googleapis.com/css?family=Lato:200,400);
@import url(https://fonts.googleapis.com/css?family=Lobster);
​
body {
  font-family: lato, sans-serif;
  font-size: 1rem;
  background: #2d9961;
  overflow: hidden;
}
​
h1 {
  font-family: lobster, lato, sans-serif;
  font-size: 9.75vw;
  position: absolute;
  margin-top: 400px;
  color: rgba(0,0,0,0.8);
  text-align: center;
}
​
/* The title- "Random Research Topic Generator" */
.rrtg h2 {
  font-size: 1.2rem;
  margin-top: 0.25em;
  margin-bottom: 3px;
  color: #34495e;
  padding-left: 0.75em;
}
​
/* The Edition information */
.rrtg h3 {
  font-family: 'Oswald';
  padding-left: 0.75em;
  font-size: 1.1rem;
  margin-top: 0;
  font-style: italic;
  color: #34495e;
}
​
/* The 'case' of the game player */
.rrtg .case {
  position: relative;
  max-width: 300px;
  width: 90%;
  height: 400px;
  padding: 10px;
  background: #aaa;
  color: #fff;
  border: 1px solid #999;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-border-bottom-right-radius: 40px;
  -moz-border-bottom-right-radius: 40px;
  border-bottom-right-radius: 40px;
  margin: 1em auto;
  margin-top: 5px;
  box-shadow: 40px 40px 2px rgba(0,0,0,0.7);
}
​
/* The dark gray border around the screen */
.rrtg #border {
  background: #7c8182;
  padding: 5px 1.5em;
  border: 1px solid #666;
  border-radius: 5px;
  -webkit-border-bottom-right-radius: 20px;
  -moz-border-bottom-right-radius: 20px;
  border-bottom-right-radius: 20px;
}
​
/* The game screen */
.rrtg #screen {
  text-align: center;
  font-family: 'Press Start 2P', cursive;
  color: #000;
  line-height: 1.5em;
  background: #8F976E;
  border-radius: 3px;
  border: 1px solid #666;
  height: 220px;
  overflow: hidden;
  margin: 0 auto;
  word-wrap: break-word;
  padding: 0.5em;
  width: 85%;
}
​
/* Basic look of the buttons */
.rrtg .btn {
  -webkit-border-radius: 40;
  -moz-border-radius: 40;
  border-radius: 40px;
  width: 60px;
  height: 60px;
  text-decoration: none;
  outline: 0;
  cursor: pointer;
  margin: 0.25em 0.5em;
  background-color: #963D73; 
  color: #ddd;
  font-size: 3em;
  padding: 0;
  line-height: 1.3;
  text-align: center;
  position: absolute;
}
​
/* When hovering over the button */
.rrtg .btn:hover {
  background: #ad4583;
  text-decoration: none;
}
​
/* Override the default <a> color */
.rrtg a.btn {
  color: #ddd !important;
}
​
/* Basic look of the retry button */
.rrtg #rtg {
  right: 0%;
  bottom: 0%;
  font-size: 4em;
  line-height: 0;
}
​
/* Basic look of the search button */
.rrtg #searchTopic {
  right: 25%;
  bottom: 1%;
}
​
/* Footer w/ CC info */
footer {
  font-family: lato, sans-serif;
  position: fixed;
  bottom: 0;
  right: 0;
  margin: 0 1em;
  width: 95%;
}
​
/* For elements to hide, but still make available to screen readers */
.hidden {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
​
a {
  color: #fff;
  text-decoration: none;
}
​
a:hover {
  color: #ddd; 
}
​
.left {
  float: left; 
}
​
.right {
  float: right; 
}
​
@media (max-width: 600px) {
 
  .rrtg .case {
    box-shadow: none;
  }
  
  h1 {
    display: none;
  }
  
}
Output

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

Dismiss x
public
Bin info
sometimesmotionpro
0viewers