Netscape Navigator

Author: PascalPixel

css-browsers.css

@@ -23,7 +23,7 @@ $px: 1 / 16 + rem
 
   .css-browsers-forward
     margin-left: -5*$px
-    border-left: none
+    border-left-width: 0*$px
 
   .css-browsers-address
     display: inline-block
@@ -45,6 +45,11 @@ $px: 1 / 16 + rem
     height: 300*$px
     overflow: scroll
 
+  .css-browsers-iframe
+    border: none
+    width: 100%
+    height: 100%
+
 .css-browsers-safari-7
   border-radius: 7*$px 7*$px 0*$px 0*$px
   box-shadow: 0*$px 3*$px 5*$px rgba(0,0,0,0.1)
@@ -76,3 +81,59 @@ $px: 1 / 16 + rem
     &:active,
     &.active
       background: linear-gradient(rgba(200, 200, 200, 1) 0%, rgba(226, 226, 226, 1) 100%)
+
+
+.css-browsers-netscape
+  background: #C0C0C0
+  font-family: Arial, sans-serif
+
+  .css-browsers-titlebar
+    background: #020C7E
+    color: #ffffff
+    text-align: center
+    height: 26*$px
+    border-bottom: 1*$px solid #000000
+    .css-browsers-btn
+      border-radius: 0*$px
+      height: 25*$px
+      padding: 0*$px
+      width: 25*$px
+      font-size: 16*$px
+    .css-browsers-btn-menu
+      border: none
+      float: left
+      color: #FFFFFF
+      text-shadow: -1*$px -1*$px #000000, 1*$px -1*$px #000000, 1*$px 1*$px #000000, -1*$px 1*$px #000000, 1*$px 2*$px #000000
+      box-shadow: none
+    .css-browsers-btn-minimize,
+    .css-browsers-btn-maximize
+      margin: 0*$px
+      float: right
+    .css-browsers-btn-maximize
+      line-height: 6*$px
+      padding: 5*$px
+      span
+        display: inline-block
+        transform: rotate(-180deg)
+        padding-left: 0*$px
+
+  .css-browsers-toolbar
+    border-bottom: solid #000000 1*$px
+
+  .css-browsers-forward
+    margin-left: -5*$px
+    border-left-width: 1*$px
+
+  .css-browsers-btn
+    background: #C0C0C0
+    color: #000000
+    border-bottom: solid #000000 1*$px
+    box-shadow: inset 1*$px 1*$px #DBDADB, inset 2*$px 2*$px #C8C8C8, inset -1*$px -1*$px #707070, inset -2*$px -2*$px #888788
+    padding-top: 7*$px
+    border-radius: 3*$px
+    font-size: 12*$px
+
+  .css-browsers-address
+    box-shadow: inset 2*$px 2*$px #707070
+
+  .css-browsers-reload

css-browsers.sass

@@ -56,6 +56,7 @@ <h1>css-browsers v2.1.0</h1>
       </a>
     </p>
     <hr />
+    <h2>Basic frame</h2>
     <div class="css-browsers">
       <div class="css-browsers-toolbar">
         <a class="css-browsers-btn css-browsers-back" href="#">
@@ -66,20 +67,19 @@ <h1>css-browsers v2.1.0</h1>
         </a>
         <div class="css-browsers-address">
           <span class="css-browsers-url">
-            http://superpencil.com/
+            http://www.warnerbros.com/archive/spacejam/movie/jam.htm
           </span>
           <a class="css-browsers-reload" href="#">
             ↻
           </a>
         </div>
       </div>
       <div class="css-browsers-content">
-        <h1>
-          Basic frame
-        </h1>
+        <iframe src="http://www.warnerbros.com/archive/spacejam/movie/jam.htm" class="css-browsers-iframe"></iframe>
       </div>
     </div>
     <br />
+    <h2>Safari 7</h2>
     <div class="css-browsers css-browsers-safari-7">
       <div class="css-browsers-toolbar">
         <a class="css-browsers-btn css-browsers-back" href="#">
@@ -90,17 +90,67 @@ <h1>
         </a>
         <div class="css-browsers-address">
           <span class="css-browsers-url">
-            http://superpencil.com/
+            http://www.dpgraph.com/?
           </span>
           <a class="css-browsers-reload" href="#">
             ↻
           </a>
         </div>
       </div>
       <div class="css-browsers-content">
-        <h1>
-          Safari 7
-        </h1>
+        <iframe src="http://www.dpgraph.com/?" class="css-browsers-iframe"></iframe>
+      </div>
+    </div>
+    <br />
+    <!-- <h2>Internet Explorer 6</h2>
+    <div class="css-browsers css-browsers-internet-explorer-6">
+      <div class="css-browsers-toolbar">
+        <a class="css-browsers-btn css-browsers-back" href="#">
+          ◄
+        </a>
+        <a class="css-browsers-btn css-browsers-forward" href="#">
+          ►
+        </a>
+        <div class="css-browsers-address">
+          <span class="css-browsers-url">
+            http://www.dolekemp96.org/main.htm
+          </span>
+          <a class="css-browsers-reload" href="#">
+            ↻
+          </a>
+        </div>
+      </div>
+      <div class="css-browsers-content">
+        <iframe src="http://www.dolekemp96.org/main.htm" class="css-browsers-iframe"></iframe>
+      </div>
+    </div>
+    <br /> -->
+    <h2>Netscape Navigator</h2>
+    <div class="css-browsers css-browsers-netscape">
+      <div class="css-browsers-titlebar">
+        <div class="css-browsers-btn css-browsers-btn-menu">―</div>
+        Netscape - [Welcome to Netscape]
+        <div class="css-browsers-btn css-browsers-btn-maximize"><span>▾</span><br />▾</div>
+        <div class="css-browsers-btn css-browsers-btn-minimize">▾</div>
+      </div>
+      <div class="css-browsers-toolbar">
+        <a class="css-browsers-btn css-browsers-back" href="#">
+          ◄
+        </a>
+        <a class="css-browsers-btn css-browsers-forward" href="#">
+          ►
+        </a>
+        <div class="css-browsers-address">
+          <span class="css-browsers-url">
+            http://gamma.cs.unc.edu/RENDER/example.html
+          </span>
+          <a class="css-browsers-reload" href="#">
+            ↻
+          </a>
+        </div>
+      </div>
+      <div class="css-browsers-content">
+        <iframe src="http://gamma.cs.unc.edu/RENDER/example.html" class="css-browsers-iframe"></iframe>
       </div>
     </div>
     <br />

index.html

@@ -1,6 +1,6 @@
 {
   "name": "css-browsers",
-  "version": "2.1.1",
+  "version": "2.2.1",
   "description": "CSS based browser frames",
   "style": "css-browsers.css",
   "scripts": {