Finish off the mockup

LoonyPandora · Aug 28, 2012 · a617f91 · a617f91
1 parent 57c86fa
commit a617f91
Show file tree

Hide file tree

Showing 12 changed files with 126 additions and 159 deletions.
diff --git a/css/bootstrap.min.css → assets/css/bootstrap.min.css b/css/bootstrap.min.css → assets/css/bootstrap.min.css
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -0,0 +1,91 @@
+/* General Stuff
+================================================== */
+
+html, body {
+    background: #ffa335 url('../img/bg.png');
+}
+
+body {
+    font-size: 16px;
+    padding:   20px;
+}
+
+p {
+    color:  #666;
+    margin: 10px;
+}
+
+h1 {
+    color:  #888;
+    margin: 10px;
+    font-size: 38px;
+    letter-spacing: -1px;
+}
+
+
+/* Page structure
+================================================== */
+
+.blocks {
+    padding: 0;
+    margin:  0 auto;
+}
+
+.blocks > li {
+    float:      left;
+    width:      240px;
+    height:     240px;
+    margin:     10px;
+    background: #fff;
+    overflow:   hidden;
+    list-style: none;
+
+    -webkit-border-radius: 2px;
+       -moz-border-radius: 2px;
+            border-radius: 2px;
+
+    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
+       -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
+            box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
+}
+
+
+/* Fancy Selection Colours
+================================================== */
+
+::-moz-selection {
+    background: #ff8800;
+    color: #fff;
+    text-shadow: none;
+}
+
+::selection {
+    background: #ff8800;
+    color: #fff;
+    text-shadow: none;
+}
+
+
+
+/* Media Queries - for different screen sizes
+================================================== */
+
+/* Teeny tiny screens - one column. */
+@media screen and (min-width:300px) {
+    .blocks { width: 260px;  }
+}
+
+/* iPhone in portrait - two columns. */
+@media screen and (min-width:560px) {
+    .blocks { width: 520px; }
+}
+
+/* iPads and iPhones in landscape - three columns */
+@media screen and (min-width:820px) {
+    .blocks { width: 780px; }
+}
+
+/* Normal laptop screens and above - left aligned */
+@media screen and (min-width:1080px) {
+    .blocks { width: 100%; }
+}
diff --git a/assets/img/bg.png b/assets/img/bg.png
diff --git a/css/style.css b/css/style.css
diff --git a/images/fullsize/colonel-les.png b/images/fullsize/colonel-les.png
diff --git a/images/fullsize/monetise.png b/images/fullsize/monetise.png
diff --git a/images/thumbnails/colonel-les.png b/images/thumbnails/colonel-les.png
diff --git a/images/thumbnails/monetise.png b/images/thumbnails/monetise.png
diff --git a/img/glyphicons-halflings-white.png b/img/glyphicons-halflings-white.png
diff --git a/img/glyphicons-halflings.png b/img/glyphicons-halflings.png
diff --git a/index.html b/index.html
@@ -12,44 +12,46 @@
 
     <title>Laura McCartney</title>
 
-    <link rel="shortcut icon" href="img/favicon.ico">
-    <link rel="apple-touch-icon" href="img/apple-touch-icon.png">
+    <link rel="shortcut icon" href="assets/img/favicon.ico">
+    <link rel="apple-touch-icon" href="assets/img/apple-touch-icon.png">
 
-    <link rel="stylesheet" href="css/bootstrap.min.css">
-    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
+    <link rel="stylesheet" href="assets/css/style.css">
 </head>
 <body>
 
-    <div class="container">
-        <div class="block">
-            <h1>Laura McCartney</h1>
-        </div>
 
-        <div class="block">
-        </div>
-
-        <div class="block">
-        </div>
-
-        <div class="block">
-        </div>
-
-        <div class="block">
-        </div>
-    </div>
-
-    <!-- Google Analytics -->
-    <script type="text/javascript">
-        var _gaq = _gaq || [];
-        _gaq.push(['_setAccount', 'UA-33076528-1']);
-        _gaq.push(['_trackPageview']);
-
-        (function() {
-            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-        })();
-    </script>
+<ul class="clearfix blocks">
+    <li>
+        <h1>Lauf of Bread</h1>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+    </li>
+    <li><img src="images/thumbnails/monetise.png"></li>
+    <li><h1>Les Dennis &amp; his bunch of very merry friends</h1></li>
+    <li><img src="images/thumbnails/colonel-les.png"></li>
+    <li></li>
+    <li></li>
+    <li></li>
+    <li></li>
+    <li></li>
+    <li></li>
+    <li></li>
+    <li></li>
+</ul>
+
+
+<!-- Google Analytics -->
+<script type="text/javascript">
+    var _gaq = _gaq || [];
+    _gaq.push(['_setAccount', 'UA-33076528-1']);
+    _gaq.push(['_trackPageview']);
+
+    (function() {
+        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+    })();
+</script>
 
 </body>
 </html>
diff --git a/js/bootstrap.min.js b/js/bootstrap.min.js