show-notice
hide-notice

Sunday 7 July 2013

How to Create Facebook page Using Css

Sunday, July 07, 2013 Posted by Unknown
Labels:
Introduction

 This Arttical i will explain How to Create Facebook page Using Css.

 
Example


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <link href="../CSS/facebook1.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="main">
        <div id="image">
            <img src="../IMAGE/kk8dc2UJYJ4.png" />
        </div>
        <div id="table">
            <table cellspacing="2">
                <tr>
                    <td class="email">
                        <label>
                            Email or Phone</label>
                    </td>
                    <td class="email">
                        <label>
                            Password</label>
                </tr>
                <tr>
                    <td>
                        <input id="emailtext" type="text" />
                    </td>
                    <td>
                        <input id="emailtext" type="text" />
                    </td>
                    <td id="button">
                        <input id="button" type="button" value="Log in" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <input id="log" type="checkbox" />
                        <a id="log" href="#">Keep me logged in</a>
                    </td>
                    <td>
                        <a id="log1" href="">Forgot your password?</a>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div id="secmain">
        <div id="slogan">
            <a id="slo">Facebook helps you connect and share with the people in your life.</a>
        </div>
        <div id="image1">
            <img src="../IMAGE/OBaVg52wtTZ.png" />
        </div>
        <div id="signup">
            <a id="sign">Sign Up</a> <a id="sign2">It's free and always will be.</a>
            <hr style="margin-top: 40px;" />
            <div id="table1">
                <table cellspacing="5">
                    <tr>
                        <td id="t2">
                            <lable>First Name:</lable>
                        </td>
                        <td>
                            <input id="regtext" type="text" />
                        </td>
                    </tr>
                    <tr>
                        <td id="t2">
                            <lable>Last Name:</lable>
                        </td>
                        <td>
                            <input id="regtext" type="text" />
                        </td>
                    </tr>
                    <tr>
                        <td id="t2">
                            <lable>Your Email:</lable>
                        </td>
                        <td>
                            <input id="regtext" type="text" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <lable>Re-enter Email:    </lable>
                        </td>
                        <td>
                            <input id="regtext" type="text" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <lable>New Password:</lable>
                        </td>
                        <td>
                            <input id="regtext" type="text" />
                        </td>
                    </tr>
                    <tr id="">
                        <td id="t2">
                            <lable>I am:</lable>
                        </td>
                     
                       
                        <td style="text-align:left">
                            <select id="sel" name="sex">
                                <option>Select Sex:</option>
                                <option>Female</option>
                                <option>Male</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td id="t2">
                            <label>
                                Birthday:</label>
                        </td>
                        <td style="text-align:left;">
                            <select id="sel" name="month">
                                <option value="-1">Month:</option>
                                <option>Jan</option>
                                <option>Feb</option>
                                <option>Mar</option>
                                <option>Apr</option>
                                <option>May</option>
                                <option>Jun</option>
                                <option>Jul</option>
                                <option>Aug</option>
                                <option>Sep</option>
                                <option>Oct</option>
                                <option>Nov</option>
                                <option>Dec</option>
                            </select>
                            <select id="sel" name="day">
                                <option value="-1">Day:</option>
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                                <option>6</option>
                                <option>7</option>
                                <option>8</option>
                                <option>9</option>
                                <option>10</option>
                                <option>11</option>
                                <option>12</option>
                                <option>13</option>
                                <option>14</option>
                                <option>15</option>
                                <option>16</option>
                                <option>17</option>
                                <option>18</option>
                                <option>19</option>
                                <option>20</option>
                                <option>21</option>
                                <option>22</option>
                                <option>23</option>
                                <option>24</option>
                                <option>25</option>
                                <option>26</option>
                                <option>27</option>
                                <option>28</option>
                                <option>29</option>
                                <option>30</option>
                                <option>31</option>
                            </select>
                            <select id="sel" name="years">
                                <option>1990</option>
                                <option>1989</option>
                                <option>1988</option>
                                <option>1987</option>
                                <option>1986</option>
                                <option>1985</option>
                                <option>1984</option>
                                <option>1983</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label>
                            </label>
                        </td>
                        <td style="text-align:left;">
                            <a id="birth" href="#">Why do I need to provide my birthday?</a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                        </td>
                        <td>
                            <div id="info">
                                <p>
                                    <label>
                                        By clicking Sign Up, you agree to our
                                    </label>
                                    <a href="#">Terms </a>
                                    <label>
                                        and that you have read and understand our</label>
                                    <a href="#">Data Use Policy</a>
                                    <label>
                                        including our</label>
                                    <a href="#">Cookie Use.</a>
                                </p>
                            </div>
                        </td>
                    </tr>
                </table>
               
                <div class="button" style="text-align:left;">
                    <input type="button" value="Sign Up" />
                </div>
                <br />
                <hr />
                <br />
                <div class="lable">
                    <a href="#">Create a Page</a>&nbsp<label>for a celebrity, band or business.</label>
                </div>
            </div>
        </div>
    </div>



</body>
</html>
 
CSS 

* {
    margin: 0;
    padding: 0;
}
body {
    background-color: transparent;
}
#main {
    background-color: #3B5998;
    height: 82px;
    position: absolute;
    width: 100%;
margin:0px auto;

}
#image {
    float: left;
    margin-left: 14px;
    margin-top: 30px;
}
#pass {
    color: #FFFFFF;
    font-family: lucida grande,tahoma,verdana,arial,sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    margin-left: 50px;
    margin-top: 10px;
}
#emailtext {
    border-color: #1D2A5B;
    border-width: 1px;
    height: 19px;
    margin:2px;
    width: 142px;
  
}



#passtext {
    border-color: #1D2A5B;
    height: 18px;
    margin-top: -11px;
    width: 142px;
}
#table {
    color: #FFFFFF;
    font-family: lucida grande,tahoma,verdana,arial,sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
  
    margin-left: 625px;
    margin-top: 15px;
   
   
}



#table a {
    color: #98A9CA;
    text-decoration: none;
}
#table #button
{
font-family :Lucida Grande,Tahoma,Verdana,Arial,sans-serif;
font-size   :11px;
font-weight :700;

color :#FFFFFF;

margin-left:10px;
 background-color: #3B5998;
}

slogan {
    height: 55px;
    margin-left: 14px;
    margin-top: 122px;
    position: absolute;
    width: 450px;
}
#slo {
    color: #0E385F;
    font-family: lucida grande,tahoma,verdana,arial,sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 29px;
    word-spacing: -1px;
}
#image1 {
  
    margin-left: 14px;
    margin-top: 200px;
    position: absolute;
  
}
#signup {
    height: 507.65px;
    margin-left: 616px;
    margin-top: 120px;
    position: absolute;
    width: 383px;
}
#sign {
    color: #0E385F;
    font-family: lucida grande,tahoma,verdana,arial,sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    position: absolute;
    width: 100%;
}
#sign2 {
    color: #0E385F;
    font-family: lucida grande,tahoma,verdana,arial,sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    margin-top: 20px;
    position: absolute;
}
#A1 {
    color: #98A9CA;
    font-family: lucida grande,tahoma,verdana,arial,sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
}
#A2 {
    color: #98A9CA;
    font-family: lucida grande,tahoma,verdana,arial,sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    margin-top: 20px;
    position: absolute;
}
.inputtext {
    height: 30px;
    width: 250px;
}
#regtext {
    height: 28px;
    width: 250px;
}
#tr1 {
    margin-left: 54px;
    margin-top: -5px;
    position: absolute;
    text-align: left;
}
#sel {
    font-size: 13px;
    height: 30px;
    padding:5px;
   
}
#table1 {
    color: #1D2A5B;
    font-family: lucida grande,tahoma,verdana,arial,sans-serif;
    font-size: 13px;
    font-style: normal;
    position: absolute;
    text-align:right;


}
#birth {
    font-size: 11px;
    text-decoration: none;
}
#info {
    font-size: 11px;
    width: 250px;
    text-align:left;
}
#info a {
    color: #3B5998;
    text-decoration: none;
}

.button
{
margin-left:98px;

}

.button input {
    background-color: #69A74E;
    color: White;
    font-weight: 700;
    height: 30px;
    margin-top: 20px;
    width: 109px;
}


.lable
{

margin-left:20px;
}



.lable a
{
font-family :lucida grande",tahoma,verdana,arial,sans-serif;
font-size   :11px;
font-weight :700;
font-style  :normal;
text-decoration:none;
color #3B5998

}

.lable a:hover
{
text-decoration:underline;
}


.lable label
{
color:#666666;
font-family :lucida grande",tahoma,verdana,arial,sans-serif;
font-size   :11px;
font-weight :700;
font-style  :normal;
}

SHARE THIS POST   

0 comments :

Post a Comment

Subscribe to: Post Comments ( Atom )

Subscribe Now!

ASP.NET Development

Loading...

Contact Form

Name

Email *

Message *

Design by Gohilinfotech | www.gohilinfotech.blogspot.com