Skip to main content

Coming Soon Pages Using Css3

Hey guyz.. lets build a new page which show about your upcoming website. This tutorial is all about coming soon pages. If a website is going to launch then its upcoming page could be like this. Its so attractive and very simple. With simple html code and awesome CSS3 you can build it.
Most developers are using this technique while building their project, a simple description with awesome transitions attract users before launch of website. Lets have a look at this tutorial, this will definitely help you.

Download From Here

Screen Shot:


Simple Html :


<h1 class="main">Splash & Coming Soon Page Effects with CSS3</h1>
       <div class="sp-container">
    <div class="sp-content">
     <div class="sp-wrap sp-left">
      <h2>
       <span class="sp-top">What if you wouldn't get</span> 
       <span class="sp-mid">spam</span> 
       <span class="sp-bottom">anymore?</span>
      </h2>
     </div>
     <div class="sp-wrap sp-right">
      <h2>
       <span class="sp-top">Wouldn't that be absolutely</span> 
       <span class="sp-mid">great<i>!</i><i>?</i></span> 
       <span class="sp-bottom">Yeah, it would!</span> 
      </h2>
     </div>
    </div>
    <div class="sp-full">
     <h2>A great way to get rid of spam!</h2>
     <a href="index3.html">Sign up now!</a>
    </div>
   </div>

Awesome CSS3 :

Cool Effects are child of the css. Fonts, transitions and other effects are displayed by this kind of css. For whole study please download the tutorial and you can easily understand the concept.

.sp-container {
 width: 900px;
 height: 400px;
 position: relative;
 margin: 80px auto 0px auto;
}
.sp-content {
 width: 100%;
 height: 400px;
 position: relative;
 -webkit-animation: open 0.4s linear forwards, squeeze 0.6s linear 5.5s forwards;
 -moz-animation: open 0.4s linear forwards, squeeze 0.6s linear 5.5s forwards;
 -ms-animation: open 0.4s linear forwards, squeeze 0.6s linear 5.5s forwards;
 animation: open 0.4s linear forwards, squeeze 0.6s linear 5.5s forwards;
}
.sp-content:after {
 content: '';
 width: 4px;
 background: #000;
 height: 100%;
 position: absolute;
 left: 50%;
}
.sp-container h2 {
 color: #000;
 text-shadow: 0px 0px 1px rgba(0,0,0,0.9);
}
.sp-wrap {
 width: 400px;
 padding: 0px 25px;
 height: 100%;
 text-align: right;
 font-size: 70px;
 line-height: 80px;
 float: left;
 position: relative;
 background: #ffdd00;
 overflow: hidden;
}
.sp-wrap span {
 display: block;
 background: #ffdd00;
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter: alpha(opacity=0);
 opacity: 0;
}
.sp-wrap span.sp-mid {
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 filter: alpha(opacity=100);
 opacity: 1;
}
.sp-container .sp-right h2 {
 color: #fff;
 text-shadow: 0px 0px 1px rgba(255,255,255,0.9);
}
.sp-wrap span.sp-mid {
 font-family: 'MisoBold';
 text-transform: uppercase;
 font-size: 160px;
 line-height: 130px;
 position: relative;
}
Simple Css is just about paragraph, main area and its link and container. A brief look is given beow.
body{
 background: #ddd;
 color: rgba(255,255,255,1);
 font-family:'Myriad Pro', Arial, sans-serif;
 font-size: 15px;
}
a{
 color: #fff;
 text-decoration: none;
}
.container{
 width: 100%;
 position: relative;
 overflow:hidden;
}
.clr{
 clear: both;
}
h1.main{
 font-size: 30px;
 position:relative;
 font-weight: 400;
 text-shadow: 0px 1px 1px rgba(0,0,0,0.2);
    padding: 10px;
 text-align: center;
 z-index: 1000;
 -webkit-animation: appear 0.6s ease-in-out 6s backwards;
 -moz-animation: appear 0.6s ease-in-out 6s backwards;
}
/* Header Style */
.header{
 font-family:'Arial Narrow', Arial, sans-serif;
 line-height: 24px;
 font-size: 11px;
 background: #000;
 opacity: 0.9;
 text-transform: uppercase;
 z-index: 9999;
 position: relative;
 -moz-box-shadow: 1px 0px 2px #000;
 -webkit-box-shadow: 1px 0px 2px #000;
 box-shadow: 1px 0px 2px #000;
}
.header a{
 padding: 0px 10px;
 letter-spacing: 1px;
 color: #ddd;
 display: block;
 float: left;
}
.header a:hover{
 color: #fff;
}
.header span.right{
 float: right;
}
.header span.right a{
 float: none;
 display: inline;
}
Hope you would like this post.

source codrops

Comments

Popular posts from this blog

Network Topologies (Tutorial-4)

Topology refers to the way in which the network of computers is connected. The choice of topology is dependent upon--- Type and number of equipment being used  Planned applications and rate of data transfers  Required response times  Cost Types of Network Topologies Physical Topology: Physical topology defines how devices are connected to the network through the actual cables that transmit data(physical structure of the network)  Logical Topology: Logical Topology (also referred to as Signal Topology) is a network computing term used to describe the arrangement of devices on a network and how they communicate with one another.

Cisco Hierarchical Model

Cisco Hierarchical Model Defined by Cisco to simplify the design, implementation, and maintenance of responsive, scalable, reliable, and cost-effective networks. The 3 layers are logical and not physical – there may be many devices in a single layer, or a single device may perform the functions of 2 layers, eg: core and distribution. The Cisco Hierarchical Model

Eden: PHP Library To Get Things Easy For PHP Developer

Eden is PHP Library designed for helping developers in their rapid development work. In Our most of the project we have to integrate our developed website or application with most of  the social networking websites like Google, Facebook, Twitter, yahoo etc. so what we do is we integrate libraries of different websites differently Although We could make the code reusable but still if the websites increases then confusion will also increases. Adding different libraries form different sources add more complexity to your project and ends up to be hard to maintain. Eden simply a set of reusable components, that works with any PHP framework and CMS. Eden makes code logical and readable with dead simple syntax. Eden Will work With Most Of Web services including Amazon Web service Facebook Foursquare Google twitter tumbler Paypal Yahoo You could Download the File From  Eden Official Website  and Can use this will just a simply including this...