Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Fixed my commit

I some how jacked up the last commit but reverted and fixed.
  • Loading branch information...
commit 02f7cfae5f5e0f1b5f191483f1a719585e49fc06 1 parent 641a254
@mynameischad authored
View
BIN  images/lock.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/rsvp-btn-sprite.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
132 landingpage.html
@@ -187,6 +187,138 @@
</div>
+<!-- This is the Credit Card Screen-->
+
+<div class="" id="cc-wrapper" display="hidden">
+ <div class="noise" id="cc-container">
+ <div id="cc-title">
+ <p>Enter payment information to reserve spot</p>
+ </div>
+ <div id="cc">
+<!-- <p> This will be the credit </p>-->
+ <div id="cc-form-container">
+ <div id="cc-form">
+ <form name="cc" action="#" onsubmit="return(showFormData(this))" method="#">
+ <div id="cc-lables">
+ <p> Credit Card: </p>
+ <p> Expiration: </p>
+ <p> CVC: </p>
+ </div>
+ <div id="fields">
+ <input type="text" class="ccbox" name="name" value="xxxx xxxx xxxx xxxx" />
+ <!--<input type="text" class="box" name="email" value="xx/xxxx" />-->
+ <div id="cc-dropdown">
+
+ <select name="Month" class="cc-drop" dir="ltr">
+ <option value="Month">Month</option>
+ <option value="Jan">Jan</option>
+ <option value="Feb">Feb</option>
+ <option value="Mar">Mar</option>
+ <option value="Apr">Apr</option>
+ <option value="May">May</option>
+ <option value="Jun">Jun</option>
+ <option value="Jul">Jul</option>
+ <option value="Aug">Aug</option>
+ <option value="Sep">Sep</option>
+ <option value="Oct">Oct</option>
+ <option value="Nov">Nov</option>
+ <option value="Dec">Dec</option>
+ </select>
+
+ <span> / </span>
+
+ <select name="Year" class="cc-drop" dir="ltr">
+ <option value="Year">Year</option>
+ <option value="2011">2011</option>
+ <option value="2012">2012</option>
+ <option value="2013">2013</option>
+ <option value="2014">2014</option>
+ <option value="2015">2015</option>
+ <option value="2016">2016</option>
+ <option value="2017">2017</option>
+ <option value="2018">2018</option>
+ </select>
+
+
+ </div>
+
+
+ <input type="text" class="ccbox" name="phone" value="***" />
+
+
+<!-- <input type="submit" name="submit-btn" value="buy now!" /> -->
+ </div>
+
+ <div id="cc-submit-wrapper">
+
+ <div id="cc-submit-container">
+ <div class="" id="cc-submit">
+ <p> <a href="#">submit</a></p>
+ </div>
+ </div>
+
+ <div id="cc-check-box">
+<!-- <p> check box </p>-->
+ <input type="checkbox" class="#" name="remember" value="#" />
+ <p>
+ Save my card for <br /> future purchases
+ </p>
+
+ </div>
+ </div>
+
+
+ </form>
+
+
+ </div>
+ </div>
+
+ <div class="lock" id="lock-cc">
+ <img src="images/lock.png" />
+ </div>
+
+ </div>
+
+
+
+ </div>
+ </div>
+
+
+<!-- End Credit Card Screen-->
+
+<!--This is the Confirmation Screen-->
+
+<div id="confirm-wrapper">
+ <div id="confirm-container">
+ <div id="confirm">
+ <div id="confirm-left">
+ <h4> $40 For Your Choise of Manicure and Pedicure (reg. $70) </h4>
+ <p> <img src="images/offer-img.jpg" width="300" />
+
+ </div>
+ <div id="confirm-right">
+ <h4> Reservation Success! </h4>
+ <p>
+ Thank you, we have recorded your RSVP and sent you a confirmation email and/or text.
+ </p>
+ <p>
+ Please follow the instructions <strong>Loma Spa</strong> will email you to book your appointment or call them directly at (408) 234-2942
+ </p>
+ </div>
+
+ <div class="lock" id="lock-confirm">
+ <img src="images/lock.png" />
+ </div>
+ </div>
+
+
+
+</div>
+
+<!--End Confirmation Screen-->
+
<!-- Javascript that drives the form labels -->
<!-- <script type="text/javascript">
View
133 style.css
@@ -135,22 +135,12 @@ h4 {
}
/*#active-btn {
- width: 40px;
-/* height: 100%;*/
- background: #21980b;
- margin-top: 20px;
- padding: 3px 0 0 10px;
- line-height: 15px;
- position: relative;
- font-family: helvetica, arial, sans-serifv;
- font-size: .6em;
- color: white;
-/* clear: both;*/
+ background: url(images/active-sprite.png);
float: left;
border-radius: 5px;
box-shadow: 0px 1px 0px #777;
-}*/
+}*!/*/
#active-btn {
text-indent: -9999px;
@@ -161,7 +151,7 @@ h4 {
/* margin: 10px 0 0 ;*/
position: absolute;
top: 50%;
- margin: -505px 0 0 280px;
+ margin: -500px 0 0 280px;
background: url(images/active-sprite.png);
@@ -451,7 +441,7 @@ OLD FORM
width: 230px;
height: 100px;
padding: -50px 0 0 0;
- margin: 30px 0 0 0;
+ margin: 30px 0 0 -20px;
position: relative;
/* background: red;*/
font-family: helvetica, arial, sans-serif;
@@ -794,7 +784,7 @@ Credit Card Styles
#cc-wrapper {
padding: 10px;
margin: 50px;
- background: black;
+/* background: black;*/
opacity: 75%;
}
@@ -808,6 +798,20 @@ Credit Card Styles
box-shadow: 0px 5px 50px #000;
}
+.lock#lock-cc {
+/* background: orange;*/
+ position: absolute;
+ margin: 200px 0px 0px 480px;
+ padding: 10px;
+}
+
+.lock#lock-confirm {
+/* background: orange;*/
+ position: absolute;
+ margin: 250px 0px 0px 580px;
+ padding: 10px;
+}
+
#cc-container p {
margin-top: -10px 0 0 50px;
padding-top: -10px 0 0 50px;
@@ -890,6 +894,16 @@ input.box {
box-shadow:inset 0px 1px 1px #292929;
margin: 0 auto;
/* padding: 10px 0;*/
+/* margin: 20px 0 0 15px;*/
+}
+
+input.ccbox {
+ width: 180px;
+ height: 15px;
+ border-radius: 5px;
+ box-shadow:inset 0px 1px 1px #292929;
+ margin: 0 auto;
+/* padding: 10px 0;*/
margin: 20px 0 0 15px;
}
@@ -939,7 +953,7 @@ input.box {
}
#cc-submit-container {
- background: blue;
+/* background: blue;*/
/* float: left;*/
display: inline;
width: 150px;
@@ -966,7 +980,7 @@ input.box {
color: white;
font-weight: bold;
font-size: 1.2em;
- margin: 0 0 10px 20px;
+ margin: -3px 0 10px 20px;
/* line-height: 50px;*/
}
@@ -1005,38 +1019,107 @@ input.box {
margin: 3px 0 0 0;
}
+#fields span {
+ position: absolute;
+ padding: 03px 50px 0 2px;
+}
+.cc-drop {
+/* background: #999;*/
+ font-size: 1em;
+ height: 25px;
+ width: 85px;
+/* padding: 5px 0 0 0px;*/
+ margin: 0 0px 0 10px;
+ float: left;
+}
+#cc-dropdown {
+/* background: red;*/
+ float: left;
+ width: 190px;
+ margin: 28px 0 0 -5px;
+}
+/*END NEW FORM*/
+/*End CC*/
+/*************************************************************************
+**************************************************************************
+Confirmation Styles
+**************************************************************************
+*************************************************************************/
+#confirm-wrapper {
+ width: 100%;
+ position: relative;
+ float: left;
+ margin: 135px 0 0 0;
+}
+#confirm-container {
+ width: 610px;
+ margin: auto;
+}
+#confirm {
+ background: white;
+ width: inherit;
+ float: left;
+ padding: 10px;
+ margin: 20px;
+ border-radius: 5px;
+ box-shadow: 0px 1px 50px #292929
+}
+#confirm-left {
+ width: 340px;
+ float: left;
+ color: #292929;
+ border-right-style: dashed;
+ border-right-color: #999;
+ border-right-width: 2px;
+}
+#confirm-right {
+ width: 230px;
+ float: left;
+ padding: 9px;
+ color: #292929;
+
+}
+#confirm-left img {
+ padding: 15px;
+}
+#confirm-right h4 {
+ font-size: 1.28em;
+ font-weight: bold;
+ margin: 0px 0px 25px 10px;
+}
+#confirm-left h4 {
+ font-size: 1em;
+ font-weight: bold;
+ margin: 0 0 0 10px;
+}
-/*END NEW FORM*/
-
-
-
-
-
-
-
+#confirm-right p {
+ margin: 10px;
+}
+/*End Confirmation */
Please sign in to comment.
Something went wrong with that request. Please try again.