Browse Source

Added background texture and binder image to background. Shadow,rounded corner to the foreground

Muhammad Talha Mansoor 12 years ago
parent
commit
88a1024563
4 changed files with 48 additions and 31 deletions
  1. 16 2
      css/custom.css
  2. BIN
      css/images/background_texture_wood.png
  3. BIN
      css/images/binder.jpg
  4. 32 29
      index.html

+ 16 - 2
css/custom.css

@@ -5,14 +5,28 @@ Desktop version layout - place your custom code here */
 body {
 
 }
+
+.pageBackground {
+background-image:url(images/background_texture_wood.png), url(images/binder.jpg);
+background-repeat:repeat, repeat-y;
+}
+
+.pageForeground {
+background-color: beige;
+border-radius:15px;
+moz-border-radius:15px;
+-moz-box-shadow: 0 0 5px 5px #888;
+-webkit-box-shadow: 0 0 5px 5px#888;
+box-shadow: 0 0 5px 5px #888;
+}
+
 .hmenu {
 background-color: #333;
 text-align: center;
 color: white;
 }
 
-.post
-{
+.post {
 font-family: Georgia, "DejaVu Serif", Times, "Times New Roman", serif;
 font-size: 1.0em;
 line-height: 1.5em;

BIN
css/images/background_texture_wood.png


BIN
css/images/binder.jpg


+ 32 - 29
index.html

@@ -48,8 +48,9 @@
 </head>
 
 <body>
-  <div class="container test">
-    <div class="row">
+  <div class=
+  "container pageBackground padding_top_15 padding_bottom_15">
+    <div class="row pageForeground">
       <div class="col_12">
         <h1>onCrash="Reboot()"</h1>
 
@@ -102,40 +103,42 @@
           <span>About me and contact 11</span>
         </div>
 
-        <div class="col_1 omega">
+        <div class="col_1 last">
           <span>About me and contact 12</span>
         </div>
       </div>
 
-      <div class="col_12">
-        <h1>Name of the artcile</h1>
-      </div>
+      <div class="">
+        <div class="col_12">
+          <h1>Name of the article</h1>
+        </div>
 
-      <div class="col_3">
-        <p>April 27, 2012</p>
-      </div>
+        <div class="col_3">
+          <p>April 27, 2012</p>
+        </div>
 
-      <div class="col_7 post">
-        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing
-        elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id,
-        condimentum at, laoreet mattis, massa. Sed eleifend nonummy
-        diam. Praesent mauris ante, elementum et, bibendum at,
-        posuere sit amet, nibh. Duis tincidunt lectus quis dui
-        viverra vestibulum. Suspendisse vulputate aliquam dui.
-        Nulla elementum dui ut augue. Aliquam vehicula mi at
-        mauris. Maecenas placerat, nisl at consequat rhoncus, sem
-        nunc gravida justo, quis eleifend arcu velit quis lacus.
-        Morbi magna magna, tincidunt a, mattis non, imperdiet
-        vitae, tellus. Sed odio est, auctor ac, sollicitudin in,
-        consequat vitae, orci. Fusce id felis. Vivamus sollicitudin
-        metus eget eros. Pellentesque habitant morbi tristique
-        senectus et netus et malesuada fames ac turpis egestas. In
-        posuere felis nec tortor. Pellentesque faucibus. Ut
-        accumsan ultricies elit.</p>
-      </div>
+        <div class="col_7 post">
+          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing
+          elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas
+          id, condimentum at, laoreet mattis, massa. Sed eleifend
+          nonummy diam. Praesent mauris ante, elementum et,
+          bibendum at, posuere sit amet, nibh. Duis tincidunt
+          lectus quis dui viverra vestibulum. Suspendisse vulputate
+          aliquam dui. Nulla elementum dui ut augue. Aliquam
+          vehicula mi at mauris. Maecenas placerat, nisl at
+          consequat rhoncus, sem nunc gravida justo, quis eleifend
+          arcu velit quis lacus. Morbi magna magna, tincidunt a,
+          mattis non, imperdiet vitae, tellus. Sed odio est, auctor
+          ac, sollicitudin in, consequat vitae, orci. Fusce id
+          felis. Vivamus sollicitudin metus eget eros. Pellentesque
+          habitant morbi tristique senectus et netus et malesuada
+          fames ac turpis egestas. In posuere felis nec tortor.
+          Pellentesque faucibus. Ut accumsan ultricies elit.</p>
+        </div>
 
-      <div class="col_2 last">
-        <p>Tags</p>
+        <div class="col_2 last">
+          <p>Tags</p>
+        </div>
       </div>
     </div>
   </div>