Skip to content

Commit

Permalink
Addition: Envelop & Top Bar
Browse files Browse the repository at this point in the history 
Added envelop and functionality. Scroll works in firefox & webkit.
  • Loading branch information
@chadbercea
chadbercea committed Sep 19, 2011
1 parent 5cbc86f commit 371143f
Show file tree
Hide file tree
Showing 6 changed files with 174 additions and 14 deletions.
Binary file added images/envelope.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed images/images/tag-and-form---loc-box_01.png
View file
Binary file not shown.
Binary file removed images/images/tag-and-form---loc-box_03.png
View file
Binary file not shown.
Binary file removed images/images/tag-and-form---loc-box_04.png
View file
Binary file not shown.
31 changes: 26 additions & 5 deletions landingpage.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -101,6 +104,9 @@ <h3> A special offer just for you… </h3>
<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">
Expand All @@ -120,7 +126,22 @@ <h3> Our Hours </h3>
</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 -->
Expand Down
157 changes: 148 additions & 9 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@


html {
/* background: #999;*/
background: #999;
}

h1, h2, h3, h4, div, p, a, ul, li {
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;

}
Expand Down Expand Up @@ -349,7 +391,7 @@ h4 {

#social img:active {
position:relative;
top:1px /* or more */
top:2px /* or more */
}

#social p {
Expand Down Expand Up @@ -466,5 +508,102 @@ top:1px /* or more */
padding: 5px 0 0 0;
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.