The Lamp

css/google-type.css

@@ -373,7 +373,27 @@ h1, h2, p { margin: 0; padding: 0; }
   .section-jupiter-and-the-tortoise p{text-align: justify;}
 }
 
+/* -------------------------------- */
+/* The Lamp */
+/* -------------------------------- */
+
+.section-the-lamp { margin: 0;font-size: 100%;background: #02122D;color: rgba(255,255,255,0.12);}
+
+.section-the-lamp .story-container{ cursor: default; height: 100%; padding: 0; width: 100%; margin: 0 auto; }
+.section-the-lamp .story-title{ font-family: 'Mountains of Christmas', cursive; text-align: center; margin: 40px 0; font-size: 40px;}
+.section-the-lamp .story-body { font-family: "Roboto"; line-height: 145%; letter-spacing: 0.5px; font-size: 16px; font-weight: 200; text-align: justify; width: 50%; margin-left: 25%; cursor: default;}
 
+.section-the-lamp .lamp-pole { z-index: 1; background: rgba(255,255,255,0.03); width: 4px; height: 100px; margin: 0 auto; }
+.section-the-lamp .lamp-bulb-top { z-index: 2; background: rgba(255,255,255,0.05); width: 10px; height: 20px; margin: 0 auto;}
+.section-the-lamp .lamp-bulb{ z-index: 3; background: rgba(255,255,255,0.03); width: 20px; height: 20px; margin: 0 auto; border-radius: 100%;}
+
+.section-the-lamp .story-container:hover .lamp-bulb, .lit .story-container .lamp-bulb { background: rgb(255, 255, 255); box-shadow: 0px 0px 80px #fff; }
+.section-the-lamp .story-container:hover .lamp-bulb-top, .lit .story-container .lamp-bulb-top { background: rgba(255,255,255,0.1); }
+.section-the-lamp .story-container:hover .story-title, .story-container:hover .story-body, .author-container .caption,.lit .story-container .story-title, .lit .story-container .story-body, .lit .author-container .caption {color: rgba(255,255,255,0.25);background: -webkit-linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.12));-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
+
+.section-the-lamp .author-container{ width: 50%; margin-left: 40px; margin-top: 15%; }
+.section-the-lamp .author-container .avatar{display: block;margin-left: 20px;padding-bottom: 10px;}
+.section-the-lamp .author-container .caption a:hover{background: transparent;color: rgba(255,255,255,0.8);}
 
 /* ---------------------- */
 /* Device-specific styles */
@@ -396,6 +416,11 @@ h1, h2, p { margin: 0; padding: 0; }
 
 .section-fox-lion .container { width: 90%; }
 
+
+.section-the-lamp .story-body { width: 70%; margin-left: 15%; }
+.section-the-lamp .author-container {width: 70%; margin-left: 15%;}
+.section-the-lamp .author-container .avatar, .author-container .caption{margin-left: 0;}
+
 }
 
 /* min-width 641px and max-width 1024px, medium screens */

index.html

@@ -60,6 +60,11 @@
         <!-- Google web fonts for "Jupiter And The Tortoise" -->
         <link href='https://fonts.googleapis.com/css?family=Philosopher' rel='stylesheet' type='text/css'>
 
+
+        <!-- Google web fonts for "The Lamb" -->
+        <link href='http://fonts.googleapis.com/css?family=Mountains+of+Christmas:700' rel='stylesheet' type='text/css'>
+        <link href='http://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
+
         <!-- Typography Project stylesheet -->
         <link href="css/google-type.css" rel="stylesheet">
 
@@ -402,7 +407,28 @@ <h2>Jupiter And The Tortoise</h2>
         </div>
         <!-- /.jupiter-and-the-tortoise -->
 
-
+        <!-- /.the-lamp -->
+        <div class="container-fluid section-the-lamp">
+            <div class="story-container">
+                <div class="lamp-container">
+                    <div class="lamp-pole">&nbsp;</div>
+                    <div class="lamp-bulb-top">&nbsp;</div>
+                    <div class="lamp-bulb">&nbsp;</div>
+                </div>
+                <h1 class="story-title">The Lamp</h1>
+                <p class="story-body">A Lamp, well filled with oil, burned with a clear and steady light, and began to swell with pride and boast that it shone more brightly than the sun himself. Just then a puff of wind came and blew it out. Some one struck a match and lit it again, and said, "You just keep alight, and never mind the sun. Why, even the stars never need to be relit as you had to be just now."
+                </p>
+                <div class="author-container">
+                    <a href="https://twitter.com/eklop" class="avatar" target="_blank" title="eklop"><img src="https://pbs.twimg.com/profile_images/378800000790537843/34e78359bfd9bbe8fdf94a0d9c177245_400x400.jpeg" alt="eklop">
+                    </a>
+                    <div class="caption">
+                        <a href="https://www.google.com/fonts/specimen/Mountains+of+Christmas" target="_blank">Mountains of Christmas</a>,
+                        <a href="http://www.google.com/fonts/specimen/Roboto" target="_blank">Roboto</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- /.the-lamp -->
 
         <script src="scripts/jquery-1.11.1.min.js"></script>
         <script src="scripts/scripts.js"></script>

scripts/scripts.js

@@ -13,4 +13,30 @@ $(document).ready(function() {
 	$('#grapes').mouseover(run);
 	// end the fox and the grapes scripts
 
+	// the lamp scripts
+	function litlamp()
+	{
+		$('.section-the-lamp').toggleClass('lit');
+	}
+
+	function randRange(data)
+	{
+       var newTime = data[Math.floor(data.length * Math.random())];
+       return newTime;
+	}
+
+	function toggleSomething()
+	{
+		//var timeArray = new Array(200, 400, 600, 1200, 1400, 1600, 4000);
+		var timeArray = new Array(50, 80, 50, 1000, 600, 150, 1200);
+
+		litlamp();
+		clearInterval(timer);
+		timer = setInterval(toggleSomething, randRange(timeArray));
+	}
+
+	var timer = setInterval(toggleSomething, 1000);
+
+	//end of the lamp scripts
+
 });