added well details view

etl12003 · Feb 23, 2017 · a875c40 · a875c40
1 parent f9b1e49
commit a875c40
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 2 deletions.
diff --git a/html-ONLY-site/css/main.css b/html-ONLY-site/css/main.css
@@ -137,12 +137,13 @@ button {
   width: 100vw;
   height: 100vh; }
 
-
+main{
+    margin-top: 4.25rem;
+}
 form {
     display: flex;
     flex-direction: column;
 
-    margin-top: 2.6rem;
 }
 form ul, h2{
     margin: 1rem

diff --git a/html-ONLY-site/css/well-card.css b/html-ONLY-site/css/well-card.css
@@ -0,0 +1,23 @@
+div.well-card div{
+    float: left;
+    width: 65%;
+    padding: 1rem;
+}
+
+div.well-card h2{
+    border-bottom: none;
+    margin: 0;
+}
+
+div.well-card {
+    border-bottom: 2px solid #4d4d4d;
+}
+
+div.well-card .well-img{
+    background-image: url(https://s-media-cache-ak0.pinimg.com/originals/33/c2/c4/33c2c4cf367ecee38a162d362a31fd68.jpg);
+    background-size: cover;
+    background-position: center;
+    float: left;
+    width: 35%;
+    height: 8rem;
+}
diff --git a/html-ONLY-site/wells-list.html b/html-ONLY-site/wells-list.html
@@ -0,0 +1,88 @@
+<!doctype html>
+<html class="no-js" lang="">
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <title></title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="apple-touch-icon" href="apple-touch-icon.png">
+    <!-- Place favicon.ico in the root directory -->
+    <link rel="stylesheet" href="css/normalize.css">
+    <link rel="stylesheet" href="css/main.css">
+    <link rel="stylesheet" href="css/well-card.css">
+
+    <script src="js/vendor/modernizr-2.8.3.min.js"></script>
+</head>
+
+
+
+
+
+
+<body>
+    <!--[if lt IE 8]>
+            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
+        <![endif]-->
+    <!-- Add your site or application content here -->
+
+
+
+
+
+
+    <nav class="top-nav">
+        <button><img src="img/menu.svg" alt="menu" /></button>
+        <button><img src="img/search.svg" alt="menu" /></button>
+    </nav>
+
+    <main>
+
+        <div class="well-card clearfix">
+            <div class="well-img"></div>
+            <div>
+                <h2>Well Name</h2>
+                <p>short well description</p>
+            </div>
+        </div>
+
+    </main>
+
+    <nav class="bottom-nav">
+        <button><img src="img/map.svg" alt="menu" /></button>
+        <button><img src="img/well.png" alt="menu" /></button>
+        <button><img src="img/problem.svg" alt="menu" /></button>
+    </nav>
+
+
+
+
+
+
+
+    <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
+    <script>
+        window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')
+    </script>
+    <script src="js/plugins.js"></script>
+    <script src="js/main.js"></script>
+    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
+    <script>
+        (function (b, o, i, l, e, r) {
+            b.GoogleAnalyticsObject = l;
+            b[l] || (b[l] = function () {
+                (b[l].q = b[l].q || []).push(arguments)
+            });
+            b[l].l = +new Date;
+            e = o.createElement(i);
+            r = o.getElementsByTagName(i)[0];
+            e.src = 'https://www.google-analytics.com/analytics.js';
+            r.parentNode.insertBefore(e, r)
+        }(window, document, 'script', 'ga'));
+        ga('create', 'UA-XXXXX-X', 'auto');
+        ga('send', 'pageview');
+    </script>
+</body>
+
+</html>