Coming Soon Page Design By Using HTML, CSS And JavaScript:
HTML:
_________________________________________________________________________________
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<link rel="stylesheet" href="style.css" type="text/css"/>
<title>Coming Soon</title>
</head>
<body>
<div class="main-container">
<div>
<h1 class="mean-heading">We're on the way</h1>
<h2 class="sub-heading">Stay tuned for something interesting</h2>
</div>
<div class="sequare-container">
<div class="sequare"><h1 class="inner" id="days">00</h1>
<h4 class="inner-headings">Days</h4>
</div>
<div class="sequare"><h1 class="inner" id="hours">00</h1>
<h4 class="inner-headings">Hours</h4>
</div>
<div class="sequare"><h1 id="minutes" class="inner">00</h1>
<h4 class="inner-headings">Minutes</h4>
</div>
<div class="sequare"><h1 id="seconds" class="inner">00</h1>
<h4 class="inner-headings">Seconds</h4>
</div>
</div>
<div class="con1">
<h3 class="notify">notify me when website is ready</h3>
<input type="text" placeholder="Your Email address" class="txt">
<input type="button" value="Submit" class="btn"/>
<h3 class="notify1">© Design By Waseem</h3>
</div>
</div>
<script>
var showDays=document.getElementById('days');
var x=setInterval (function(){
var showHours=document.getElementById('hours');
var showMinutes=document.getElementById('minutes');
var showSeconds=document.getElementById('seconds');
var countDownDate=new Date("31 Dec,2019 00:00:00").getTime();
var now=new Date().getTime();
var distance=countDownDate-now;
var days=Math.floor(distance/(24*60*60*1000));
var remaining=Math.floor(distance%(24*60*60*1000));
var hours=Math.floor(remaining/(60*60*1000));
var remaining=Math.floor(remaining%(60*60*1000));
var minutes=Math.floor(remaining/(60*1000));
var remaining=Math.floor(remaining%(60*1000));
var seconds=Math.floor(remaining/1000);
showDays.innerHTML=days;
showHours.innerHTML=hours;
showMinutes.innerHTML=minutes;
showSeconds.innerHTML=seconds;},1000);
</script>
</body>
</html>
CSS:
_________________________________________________________________________________
body{
padding:0;
margin:0;
background:linear-gradient(to bottom, rgba(30,29,74,0.8), rgba(30, 29, 74, 0.48)),url('asia.jpg') ;
background-repeat:no-repeat;
background-size:cover;
font-family:lato;
}
.main-container{
width:100%;
height:573px;
}
.mean-heading{
padding-top:50px;
text-align:center;
color:white;
font-size:50px;
}
.sub-heading{
text-align:center;
color:white;
font-weight:100;
}
.sequare{
margin-right:15px;
height:150px;
width:150px;
background-color:rgba(255,255,255,0.2);
display:inline-block;
border-style:none;
border-radius:3px;
text-align:center;
font-weight:bold;
color:white;
}
.sequare-container{
margin-left:310px;
}
.inner{
font-size:60px;
}
.inner-headings{
margin-top:-35px;
color:yellowgreen;
}
@font-face{
font-family:"lato";
src:"Lato-Regular.ttf";
}
.txt{
width:400px;
padding-top:10px;
padding-bottom:10px;
}
::placeholder{
color:black;
font-size:12px;
}
.btn{
background-color:yellowgreen;
padding:9px 20px 10px 20px;
border-style:solid;
border-color:yellowgreen;
margin-left:-4px;
margin-top:1px;
outline:none;
font-weight:bold;
color:white;
font-family:lato;
}
.btn:hover{
border-color:white;
background-color:;
}
.notify{
font-size:14px;
color:white;
text-transform:uppercase;
font-weight:100;
padding-left:100px;
}
.con1{
margin-left:400px;
}
.notify1{
font-size:14px;
color:white;
text-transform:uppercase;
font-weight:100;
padding-left:160px;
}
_________________________________________________________________________________
0 Comments