styled links page

admin.html

@@ -21,6 +21,7 @@ <h1>Earthquake Data</h1>
 <main>
     <h1>Administrative Resources</h1>
        <div class="inputs">
+
            <div>
             <label for="earth">Earthquake:</label><input type="text" id="earth">
            </div>

css/links.css

@@ -3,16 +3,76 @@ main a{
     margin-left: 130px;
     margin-bottom: 20px;
     font-size: 2em;
-    width: 50%;
+    width : 50%;
    }
-   main a:link,:visited{
+
+main a:link,:visited
+    {
       padding: 10px;
+    }
+main a:hover{
+    background-color : black;
+    color: white;
    }
-   main a:hover{
-   background-color: black;
-   color: white;
+ main a:active{
+        background-color: dodgerblue;
+        color: white;
    }
-   main a:active{
-       background-color: blue;
-       color: red;
-   }
+ h5{ 
+ font-size: 1.5em;
+   }
+
+ img{
+      float: left;
+      width: 100px;
+      height: 100px;
+      border-radius: 50%;
+      margin-top: 10px;
+      margin-left : 5px;
+      margin-right: 10px;
+      padding: 20px;
+      border: 1px solid red;
+  }
+  main h2{
+     margin: 10 auto;
+     text-decoration: underline;
+  }
+  main ul {
+      margin: 15px 10px;
+      padding: 0;
+  }
+  main ul li{
+       margin-left: 10px;
+       margin-bottom: 10px;
+  }
+
+/* main h2 {
+    font-size: 1.5em; 
+ } 
+
+h3{
+    margin-right:200%;
+} 
+
+main h3 {
+    font-size: 1em;
+    padding: 20px 20px 20px 20px;
+}
+         
+main h4 {
+    font-size: 1em ; 
+    padding-right: 80% ;   
+}
+
+p {
+    padding-right: 100%;
+    text-align: center;
+    
+}
+
+h5{
+    font-size: 1em ; 
+    padding-right: 80% ;       
+ 
+}
+ */

links.html

@@ -14,38 +14,58 @@ <h1>Earthquake Data</h1>
     <nav class="navbar">
         <a href="index.html">Home</a>
         <a href="links.html">Links</a>
-
-
-        <!-- <a href="admin.html">Admin Page</a> -->
+
     </nav>
 </header>
 <main>
-    <h1>External Link Resources</h1>
-            <a href="https://peer.berkeley.edu/">https://peer.berkeley.edu/</a>
-            <a href="https://www.ready.gov/earthquakes" target="_blank"> https://www.ready.gov/earthquakes
-                <!-- <img alt="Ready.gov" src="img/ready.png"/> -->
-            </a>            
-
-
-            <a href="http://www.seattle.gov/emergency-management/hazards/earthquake" target="_blank">
-                http://www.seattle.gov/emergency-management/hazards/earthquake
-                <!-- <img alt="Prepare Your Home" src="/img/seattle.png"/> -->
-            </a>
+    <a target = "_blank" href = "https://www.ready.gov/earthquakes/"> 
+    <h2>Earthquake</h2>
+    <img alt="Ready.gov" src="img/ready.png"/>
+    <ul>
+   <li>How To Stay Safe When an Earthquake Threatens </li>
+    <li>Earthquake Information Sheet </li> 
+    <li>Earthquake Creative Materials</li> 
+    <li>How to Prepare for an Earthquake </li>     
+</ul>
+    </a>                             
 
+    <a  target ="_blank" href="http://www.seattle.gov/emergency-management/hazards/earthquake/">
+    <h2>Emergency Management</h2>
+           <img alt="Prepare Your Home" src="/img/seattle.png"/>
+              <ul>
+               <li>Hazardous Materials Incidents </li>
+                <li>Snow ice and Extreme </li> 
+                <li>Volcano Hazards including Lahars</li> 
+                <li> Volcanic Landslides</li> 
+
+              </ul> 
+            </a>                    
+
 
-            <a href="https://earthquake.usgs.gov/learn/" target="_blank">
-                https://earthquake.usgs.gov/learn/
-                <!-- <img alt="Earthquake Hazzards" src="img/USGS.png"/> -->
-            </a>
+            <a  target = "_blank" href= "https://earthquake.usgs.gov/learn/">
+              <h2>Earthquake hazards Program</h2>
 
-
-            <a href="http://www.wolton.net/quake.html"  target="_blank">
-                <!-- <img alt="Monitoring Software" src="img/earthquake3d.png"/> -->
-                http://www.wolton.net/quake.html
+              <img alt="Earthquake Hazzards" src="img/USGS.png"/> 
+              <ul>            
+               <li>Animations for Earthquake Terms & Concepts</li>
+               <li> USGS Only Resources</li>
+               <li>USGS Store - Publications and Products</li>
+               <li> USGS Education Web Site</li>
+               </ul>                    
             </a>
-            <a href="http://www.memphis.edu/ceri/">http://www.memphis.edu/ceri/</a>
+
+            <a  target="_blank" href="http://www.wolton.net/quake.html"  >                
+               <h2>Earthquake 3d</h2>             
+               <img alt="Monitoring Software" src="img/3d.gif"/>
+               <ul>
+               <li>Earthquake Monitoring Software</li>
+               <li>Earthquake 3D Live Feed </li>               
+               <li>Description</li>
+               <li>Information</li>
+            </ul>
+            </a> 
+
 </main>
-
 <footer>
     &copy; 2018 Wild Quakers
 </footer>

newpage.html

@@ -10,7 +10,7 @@
 <body>
     <div>
             <h1>my new page</h1>
-            <hr>
+
     </div>
 
 </body>