Inside header image w header text and paragraph w rounded corners

diff --git a/TMPheader.png b/TMPheader.png
new file mode 100644 (file)
index 0000000..15e3954
Binary files /dev/null and b/TMPheader.png differ

diff --git a/styles.css b/styles.css
index 208e188..028756a 100644 (file)
--- a/styles.css
+++ b/styles.css
@@ -105,10 +105,14 @@ body {
         }
 }
 /* columns */
-#main {
-    background: white;
+#mainParent {
     border-radius: 5px;
+    }
+#main {
     padding: 30px;
+    background: white;
+    border-bottom-right-radius: 5px;
+    border-bottom-left-radius: 5px;
     }
 #barParent {
     padding-right: 0;
@@ -129,6 +133,30 @@ body {
 #homeImg {
     margin: 1em 0;
     }
+/* Inside header image and text */
+#insideHeader {
+    position: relative;
+    }
+#insideHeader section {
+    position: absolute;
+    bottom: 0;
+    width: 720px;
+    background: rgba(6,88,146, .75);
+    color: rgba(255, 255, 255, .9);
+    padding: 0 20px;
+    }
+#insideHeader h2 {
+    font-size: 20px;
+    color: rgba(255, 255, 255, .9);
+    margin: 0 0 0 0;
+    padding: 0;
+    }
+#insideHeader p {
+    font-size: 14px;
+    margin: 0 0 .3em 0;
+    padding: 0;
+    }
+
 /* Column */
 @media only screen and (max-width: 40.063em) {
     #sidenav {
@@ -164,6 +192,14 @@ body {
     margin: 2em auto;
     display: block;
     }
+/* Inside header image section */
+#insideHeader {
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+    width: 720px;
+    height: 250px;
+    overflow: hidden;
+    }
 /* Toolbox */
 #toolbox h1,
 #toolbox h2 {

diff --git a/templates/template.html b/templates/template.html
index da9b6ae..d916348 100644 (file)
--- a/templates/template.html
+++ b/templates/template.html
@@ -90,21 +90,29 @@
             </div>
             <div class="row" data-equalizer>
                 <div class="medium-9 columns medium-push-3">
-                    <section id="main" data-equalizer-watch>
-                        <div id="toolbox">
-                            {toolboxContent:h}
-                        </div><!-- /#toolbox -->
-                        <section id="hHlines" class="opensearchserver.ignore">
-                            <ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-3">
-                                <li class="hHlinesItem" flexy:foreach="headlines,v">
-                                    <a href="{v[href]:h}">
-                                        <img src="{v[img]:h}" alt="">
-                                        <i>{v[header]:h}</i>
-                                    </a>
-                                </li><!-- /.hHlinesItem -->
-                            </ul>
+                    <div id="mainParent" data-equalizer-watch>
+                        <div id="insideHeader" style="background-image: url(TMPheader.png)">
+                            <section>
+                                <h2>Header text</h2>
+                                <p>This is an image from the Locks. It is awesome. It is cool.</p>
+                            </section>
+                        </div>
+                        <section id="main">
+                            <div id="toolbox">
+                                {toolboxContent:h}
+                            </div><!-- /#toolbox -->
+                            <section id="hHlines" class="opensearchserver.ignore">
+                                <ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-3">
+                                    <li class="hHlinesItem" flexy:foreach="headlines,v">
+                                        <a href="{v[href]:h}">
+                                            <img src="{v[img]:h}" alt="">
+                                            <i>{v[header]:h}</i>
+                                        </a>
+                                    </li><!-- /.hHlinesItem -->
+                                </ul>
+                            </section>
                         </section>
-                    </section>
+                    </div>
                 </div>
 
                 <div class="medium-3 columns medium-pull-9" id="barParent">