Skip to content
Browse files

Addition: Envelop & Top Bar

Added envelop and functionality. Scroll works in firefox & webkit.
  • Loading branch information...
1 parent 5cbc86f commit 371143fafe841b0857d382a01eedf45af95213d8 @mynameischad committed Sep 18, 2011
View
BIN images/envelope.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN images/images/tag-and-form---loc-box_01.png
Deleted file not rendered
View
BIN images/images/tag-and-form---loc-box_03.png
Deleted file not rendered
View
BIN images/images/tag-and-form---loc-box_04.png
Deleted file not rendered
View
31 landingpage.html
@@ -6,17 +6,20 @@
<link rel=stylesheet href="style.css" type="text/css" media=screen>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
- <script type="text/javascript" src="js/Honey_Script_300-Honey_Script_600.font.js"></script>
-
- <!-- put just before closing body tag: Cufon.replace('#header h1'); -->
-
-
+ <script type="text/javascript" src="js/Honey_Script_300-Honey_Script_600.font.js"></script>
<meta charset="utf-8">
<title>LocBox Landing Page</title>
</head>
<body>
<div class="noise" id="wrapper">
+ <div id="top-banner-container">
+ <div id="top-banner">
+ <p> <a href="#"> Sign up for exclusive offers like this one </a></p>
+ </div>
+ </div>
+
<div class="#" id="container">
+
<div id="offer-container">
<div id="offer-tag">
<p> A special offer from </p>
@@ -101,6 +104,9 @@
<p>
Raw denim magna quis, master cleanse tofu organic keytar beard enim irony. VHS homo single-origin coffee, placeat hoodie stumptown odio tumblr shoreditch cliche aliqua gentrify cardigan. Etsy delectus locavore, banh mi pitchfork twee ethical quis +1 yr cillum terry richardson. Adipisicing homo do, sunt yr photo booth nulla portland delectus squid cardigan. Irure ethical aesthetic est, you probably haven't heard of them mixtape reprehenderit quis iphone american apparel twee.
</p>
+ <br />
+ <p> Sincerely, </p>
+ <h3> Loma Spa </h3>
</div>
</div>
<div id="fine-print-container">
@@ -120,7 +126,22 @@
</ul>
</div>
</div>
+
+
+ </div>
+
+ <div class="#" id="envelope-container">
+
+ <div class="#" id="envelope-container">
+ <div id="page">
+ <p> This is the fake page continuation </p>
+ </div>
+ <div id="envelope">
+ <p> This will be the envelop </p>
+ </div>
+ </div>
</div>
+
</div>
<!-- Javascript that drives the form labels -->
View
157 style.css
@@ -3,7 +3,7 @@
html {
-/* background: #999;*/
+ background: #999;
}
h1, h2, h3, h4, div, p, a, ul, li {
@@ -32,16 +32,59 @@ h4 {
#wrapper {
width: 100%;
- height: 1200px;
- background: #666;
- padding-top: 25px;
+/* height: 1268px;*/
+ background: #333;
+ padding-top: 55px;
+}
+
+#top-banner-container {
+ height: 40px;
+ background: #24b0d4;
+/* background: red;*/
+ margin: -55px 0 0 0;
+ position: absolute;
+ width: 100%;
+ line-height: 40px;
+ box-shadow: 0px 1px 2px #393939;
+}
+
+#top-banner {
+/* background: blue;*/
+ width: 960px;
+ margin: auto;
+/* float: right;*/
+}
+
+#top-banner p a {
+/* background: #333;*/
+ float: right;
+/* padding-right: 80px;*/
+ color: white;
+ font-weight: bold;
+ font-size: .8em;
+ text-decoration: none;
+ text-shadow: 0px 1px 1px #555;
+ display: inline;
+}
+
+
+#top-banner a:hover {
+ color: #ffab00;
+}
+
+#top-banner a:active {
+ position: relative;
+ top: 1px /* or more */
}
+
+
+
#container {
width: 965px;
- height: 100%;
+ height: 1100px;
background: white;
- margin: 50px auto;
+ margin: 0 auto;
padding: 0 0 0 5px;
box-shadow: 0px 1px 5px #292929;
}
@@ -151,8 +194,7 @@ h4 {
#price-tag-wrapper {
width: 190px;
height: 400px;
- background: blue;
-
+/* background: blue;*/
background: url(images/tag.png) no-repeat 0 0;
}
@@ -349,7 +391,7 @@ h4 {
#social img:active {
position:relative;
-top:1px /* or more */
+top:2px /* or more */
}
#social p {
@@ -467,4 +509,101 @@ top:1px /* or more */
font-size: .8em;
}
+/*#envelope-container {
+ float: left;
+ width: 1100px;
+ height: 200px;
+ background: red;
+ text-indent: -9999px;
+ background: url(images/envelope.png) no-repeat 0 0;
+ margin: 810px 0 0 -41px;
+ position: absolute;
+
+}*/
+
+
+
+
+#envelope-container {
+ float: left;
+ width: 100%;
+ height: 90px;
+/* background: #666;*/
+ margin: 0;
+ position: fixed;
+ bottom: 0;
+ text-indent: -9999px;
+
+/* position:fixed;*/
+/* left:0px;*/
+/* bottom:0px;*/
+/* height:30px;*/
+/* width: 960px;
+ background:red;
+ position: relative;*/
+}
+
+/* IE 6
+* html #envelope-container {
+ position:absolute;
+ top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
+}*/
+
+#page {
+/* background: white;*/
+ width: 960px;
+ height: 50px;
+ margin: auto;
+}
+
+#envelope-container {
+ width: 100%;
+ height: 190px;
+/* background: green;*/
+ margin: -250px 0 0 0;
+
+
+}
+
+#envelope {
+ width: 1042px;
+ height: 590px;
+ background: url(images/envelope.png) no-repeat;
+ margin: -160px auto;
+
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

0 comments on commit 371143f

Please sign in to comment.
Something went wrong with that request. Please try again.