Click here to Skip to main content
15,868,016 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi guys.
I do appolagize if this is not the right place to post my issue and would appreciate it if your could point my in the right direction and help me to solve my problem. I've launched the new website and as for now I only got the Coming soon page. I used a few templates to make it look like I wanted, however I'm not familiar with coding and need some help to put everything together.
So I have html code for my homepage which could be seen at: welovetranslating.com

The html is as follows:

<meta charset="utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<title>Website Localization and Translation | We Love Translating</title>

<meta name="description" content="Welcome to We Love Translating - the ultimate provider for all your translation and localization needs." />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />


<meta charset="utf-8" />
<title></title>
<link href="http://upagge.com/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="javascripts/jquery.tipsy.js"></script>
<script type="text/javascript">
$(function() {
$('#tipsy').tipsy({fade: true, gravity: 's'});
});
</script><!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


<div class="wrapper">
<img alt="YourLogo" src="http://upagge.com/images/logo.png" title="We got all you translation and localization needs covered!" />

<div class="hr">
</div>

<h1>
Wait for it... wait for it...</h1>

<p>
It seems like we came up with another awesome idea and need some time to implement it. Stay tuned!</p>
<section class="progress">

<div class="progress-bar-container" id="tipsy" title="65% Complete">
<article class="progress-bar" style="width:65%"></article></div>

<article class="txt-launch-day-hat"></article>

</section>

<blockquote>
</blockquote>
<p align="left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp; We Love Being Followed:</p>
<blockquote>
</blockquote>
<br />

<div align="left">
<a href="https://twitter.com/WeLoveTRAN" target="_blank"><img alt="" src="http://welovetranslating.com/welcome/wp-content/uploads/2013/08/twitter-red-check-circle-social-media-icon.png" border="0" width="100" /></a><a href="http://www.linkedin.com/in/welovetranslating" target="_blank"><img alt="" src="http://welovetranslating.com/welcome/wp-content/uploads/2013/08/linkeden-red-check-circle-social-media-icon.png" border="0" width="100" /></a><a href="https://www.facebook.com/dmitry.kornyukhov" target="_blank"><img alt="" src="http://welovetranslating.com/welcome/wp-content/uploads/2013/08/Facebook-red-check-circle-social-media-icon.png" border="0" width="100" /></a></div></div>

And I would like to add the signup form at the bottom of my page (in the middle, right next to the social network icons.) But I have no idea how to do it and would appreciate any tips or suggestions. If you can help me I would be really grateful.

The code for signup form is given bellow:

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Website Localization and Translation | We Love Translating</title>
<meta name="description" content="Welcome to We Love Translating - the ultimate provider for all your translation and localization needs.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<!-- Google Fonts CSS -->
<link href='//fonts.googleapis.com/css?family=Pontano+Sans' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Bevan' rel='stylesheet' type='text/css'>
<!-- Bootstrap and default Style -->
<link rel="stylesheet" href="http://welovetranslating.com/welcome/wp-content/plugins/seedprod-coming-soon-pro/themes/default/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="http://welovetranslating.com/welcome/wp-content/plugins/seedprod-coming-soon-pro/themes/default/bootstrap/css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="http://welovetranslating.com/welcome/wp-content/plugins/seedprod-coming-soon-pro/themes/default/style.css">
<style type="text/css">
/* calculated styles */
.progress-striped .bar, .progress.active .bar{background-color:#E85C41}.progress .bar {
background-color: #da4c31;
background-image: -moz-linear-gradient(top,#E85C41,#c53418);
background-image: -ms-linear-gradient(top,#E85C41,#c53418);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#E85C41),to(#c53418));
background-image: -webkit-linear-gradient(top,#E85C41,#c53418);
background-image: -o-linear-gradient(top,#E85C41,#c53418);
background-image: linear-gradient(top,#E85C41,#c53418);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e85c41', endColorstr='#c53418', GradientType=0);
}
.countdown_section {
background-color: #da4c31;
background-image: -moz-linear-gradient(top,#E85C41,#c53418);
background-image: -ms-linear-gradient(top,#E85C41,#c53418);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#E85C41),to(#c53418));
background-image: -webkit-linear-gradient(top,#E85C41,#c53418);
background-image: -o-linear-gradient(top,#E85C41,#c53418);
background-image: linear-gradient(top,#E85C41,#c53418);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e85c41', endColorstr='#c53418', GradientType=0);
}

/* Background Style */
html{
height:100%;
background: #ffffff;
}
body{
height:100%;
background: transparent;
}

/* Text Styles */
body{
font-family: 'Pontano Sans';
}


h1, h2, h3, h4, h5, h6{
font-family: 'Bevan';;
font-weight:normal;
}

button{
font-family: 'Bevan'; }

body{
color:#999999;
}



h1, h2, h3, h4, h5, h6{
color:#444444;
}


a, a:visited, a:hover, a:active{
color:#E85C41;
}

.btn,
.gform_button {
color: white;
text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
background-color: #da4c31;
background-image: -moz-linear-gradient(top,#E85C41,#c53418);
background-image: -ms-linear-gradient(top,#E85C41,#c53418);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#E85C41),to(#c53418));
background-image: -webkit-linear-gradient(top,#E85C41,#c53418);
background-image: -o-linear-gradient(top,#E85C41,#c53418);
background-image: linear-gradient(top,#E85C41,#c53418);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e85c41', endColorstr='#c53418', GradientType=0);
border-color: #c53418 #c53418 #802210;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
*background-color: #c53418;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.btn:hover,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled],
.gform_button:hover,
.gform_button:active,
.gform_button.active,
.gform_button.disabled,
.gform_button[disabled] {
background-color: #c53418;
*background-color: #ae2e15;
}
.btn:active,
.btn.active,
.gform_button:active,
.gform_button.active {
background-color: #972812 \9;
}
#csp3-progressbar span,
.countdown_section {
color: white;
text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
}
.btn:hover {
color: white;
text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
}
input[type='text'] {
border-color: #c53418 #c53418 #802210;
}
input[type='text']:focus {
border-color: rgba(195,53,24,0.8);
webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(195,53,24,0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(195,53,24,0.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(195,53,24,0.6);
}

/* Landscape phones and down */
@media (max-width: 480px) {
#csp3-email{
margin-bottom: 10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#csp3-email,#csp3-fname,#csp3-lname{
width:97% !important;
}
#csp3-fname{
margin-right:0;
}
#csp3-subscribe-btn{
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.csp3-form-wrapper {
text-align:left;
}

#csp3-content {
padding: 15px;
margin-top: 20px;
}
.input-append{
display:block !important;
}
html{
height:auto;
}

#csp3-email{
margin-bottom: 10px;
}
#csp3-headline {
line-height: 46px;
}
.countdown_section{
margin-bottom: 10px;
}

}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
#csp3-fname,
#csp3-lname{
box-sizing:inherit;
width:90%;
}
#csp3-email{
box-sizing:inherit;
width:90%;
}

#csp3-subscribe-btn{
display:block;
}

#csp3-subscribe-btn{
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}

#csp3-email{
margin-bottom: 10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

#csp3-fname,#csp3-fname{
margin-bottom: 10px
}

.input-append{
display:block !important;
}

#csp3-email,#csp3-subscribe-btn{
margin:auto;
}

#csp3-email{
margin-bottom:10px;
}

}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { }

/* Large desktop */
@media (min-width: 1200px) { }

</style>
<!-- JS -->
<script src="http://welovetranslating.com/welcome/wp-includes/js/jquery/jquery.js"></script>
<script src="http://welovetranslating.com/welcome/wp-content/plugins/seedprod-coming-soon-pro/themes/default/bootstrap/js/bootstrap.js"></script>
<!-- FitVid -->
<script src="http://welovetranslating.com/welcome/wp-content/plugins/seedprod-coming-soon-pro/themes/default/js/jquery.fitvids.js"></script>
<script src="http://welovetranslating.com/welcome/wp-content/plugins/seedprod-coming-soon-pro/themes/default/js/script.js"></script>
<!-- Google Analytics -->
<script type='text/javascript'>

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-43649157-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><!-- Modernizr -->
<script src="http://welovetranslating.com/welcome/wp-content/plugins/seedprod-coming-soon-pro/themes/default/js/modernizr.min.js"></script>


</head>
<body>
<div class="container">
<div class="row">
<div class="span10 offset1">
<div id="csp3-content">




<div id="csp3-description"><p>Let&#8217;s stay in touch! Get the latest news and exclusive offers!</p>
</div>
<form id="csp3-form" class="form-inline" method="post"><input id="csp3-ref" name="ref" type="hidden" value="" /><input id="csp3-ajax-url" type="hidden" value="http://welovetranslating.com/welcome/wp-admin/admin-ajax.php" /><div id="csp3-alert" class="alert"></div><div class="csp3-form-wrapper"><input id="csp3-fname" name="fname" class="input-medium" type="text" placeholder="First Name"/><input id="csp3-lname" name="lname" class="input-large" type="text" placeholder="Last Name"/><span class="sep"></span><div class="input-append"><input id="csp3-email" name="email" class="input-xlarge" type="text" placeholder="Enter Your Email"/><button id="csp3-subscribe-btn" type="submit" class="btn btn-large action">Go For It</button></div></div></form>
<div id="csp3-social-profiles"></div>
</div><!-- end of #csp3-content -->
</div><!--! end of .span8 -->
</div> <!--! end of .row -->
</div> <!--! end of .container -->


<!-- Belatedpng -->
<!--[if lt IE 7 ]>
<script src="http://welovetranslating.com/welcome/wp-content/plugins/seedprod-coming-soon-pro/themes/default/js/dd_belatedpng.js"></script>
<script>DD_belatedPNG.fix('img, .png_bg');</script>
<![endif]-->
<!-- Email Form Strings -->
<script>
var seed_csp3_err_msg={
'msgdefault':'Enter Your Email',
'msg600':'Guess what! You&#039;re already subscribed :)',
'msg500':'Error, please try again.',
'msg400':'Please enter a valid email.',
'msg200':'You&#039;ll be notified soon!'
};
</script><script>
jQuery(document).ready(function($){$("#csp3-content").fadeIn("slow").css("display","inline-block");$("#csp3-description").fitVids();$("#csp3-form").off();});</script>
<!--[if lt IE 9]>
<script>
jQuery(document).ready(function($){$.supersized({slides:[ {image : ''} ]});});
</script>
<![endif]-->
</body>
</html>

Thanks in advance for your help!
Posted

1 solution

 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900