 |
| A responsive Under Construction Page with PHP |
Here's the code Snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Under Construction by roundCube</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid" bgcolor="black">
<div id="background" style="background-image:url(http://www.galaxiastudio.com/wp-content/uploads/2014/03/DesertBlurredBG012.jpg);background-size:100% 100%;background-color:black;">
<div id="underConstruction">
<h1><b>UNDER</br>CONSTRUCTION</b></h1>
</div>
<div id="barFull">
<div id="barFilled"><h4>65%</h4></div>
</div>
<div id="launchText">
<h3>LET ME KNOW WHEN YOU LAUNCH</h3>
<div id="contactForm">
<form class="form-inline" role="form" method="post" action="form-to-email.php">
<div class="form-group">
<input type="email" class="form-control" id="email" placeholder="Enter your email" name="email">
</div>
<button type="submit" class="btn btn-info">Submit</button>
</form>
</div>
</div>
<div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts"><p>© roundCube</p></a></div>
</div>
</div>
</body>
<style>
#background{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
color:white;
text-align:Center;
}
#underConstruction{
position:absolute;
top:13%;
left:10%;
width:80%;
height:40%;
color:white;
text-align:Center;
text-shadow:1px 1px black;
}
h1{
font-size:100px;
}
#barFull{
position:absolute;
top:60%;
left:20%;
width:60%;
height:5%;
color:white;
text-align:Center;
background-color:white;
border-radius:6px;
}
#barFilled{
position:absolute;
top:0px;
left:0px;
height:100%;
width:65%;
background-color:rgb(0,130,185);
border-radius:6px;
text-align:center;
color:white;
}
#launchText{
position:absolute;
top:77%;
left:30%;
width:40%;
height:18%;
}
#contactForm{
position:absolute;
bottom:0%;
left:16%;
width:68%;
height:45%;
}
#copyright{
position:Absolute;
top:0px;
left:0px;
width:100%;
height:10%;
color:white;
}
a{
color:white;
text-decoration:none;
}
@media only screen and (max-width:1033px)
{
h3{
font-size:22px;
}
}
@media only screen and (max-width:998px)
{
#launchText{
width:50%;
left:25%;
}
}
@media only screen and (max-width:940px)
{
#underConstruction{
width:90%;
left:5%;
}
}
@media only screen and (max-width:870px)
{
#underConstruction h1{
font-size:90px;
}
}
@media only screen and (max-width:797px)
{
#launchText{
left:15%;
width:70%;
}
}
@media only screen and (max-width:770px)
{
#underConstruction h1{
font-size:70px;
}
#barFull{
top:52%;
}
#launchText{
top:70%;
}
}
@media only screen and (max-width:590px)
{
#underConstruction h1{
font-size:50px;
}
#barFull{
top:50%;
}
#launchText{
top:68%;
}
@media only screen and (max-width:540px)
{
h3{
font-size:20px;
}
}
@media only screen and (max-width:436px)
{
h3{
font-size:18px;
}
#launchText{
width:88%;
left:6%;
}
#underConstruction h1{
font-size:40px;
}
}
@media only screen and (max-width:345px)
{
#underConstruction h1{
font-size:35px;
}
}
</style>
</html>
In order to make the email field work you need to add php for this purpose make a file with the name form-to-email.php (it is important to keep use the exact name of the file otherwise this form won't work) and add the following script into it and make sure you enter your email address at the $to field,it has also been highlighted to make it easier for you to find it.
if(!isset($_POST['submit']))
{
//This page should not be accessed directly. Need to submit the form.
echo "error; you need to submit the form!";
}
$email = $_POST['email'];
//Validate first
if(empty($email))
{
echo "Email is mandatory!";
exit;
}
$email_from = 'roundCube';//<== update the email address
$email_subject = "New Subscriber";
$email_body = "Admin!We have a new user waiting for our web to go online: $email.\n".
$to = "someone@domain.com";//<== update the email address
$headers = "From: $email_from \r\n";
$headers .= "Reply-To: $visitor_email \r\n";
//Send the email!
mail($to,$email_subject,$email_body,$headers);
//done. redirect to thank-you page.
header('Location: thank-you.html');
?>
If you have any confusions in mind or want to ask for snippets leave a comment below or leave a message on our page
If you like our work please don't remove the hyperlink to our Facebook page.
![Pinterest](http://pinterest.com/pin/create/button/?url=http://roundcubee.blogspot.com/2015/07/responsive-under-construction-page-v10.html&media=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtIDySJso7sRANB7qmpIjkUR7KioJcJ-SRnnZtMMDEUNtzJ6On4XWmUYGJ2vbSqpUHOIr3FBKLYs7vsfvLk5pcjZR_wMMJJ3rZS2ss7WTuYaR7TufapyaDbpNlVNx-_Rl9W3kgCg46K8U/s72-c/underconstruction.png&description= A responsive Under Construction Page with PHP Here's the code Snippet: <!DOCTYPE html> <html lang="en">...){kind=link}
0 comments: