index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Facebook</title>
    <!-- css -->
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <!-- fonts -->
    <link href="https://fonts.googleapis.com/css?family=Padauk" rel="stylesheet">

</head>
<body>
    <div class="header">
        <div class="wrapper">

            <!-- logo starts -->
            <div class="logo">
                <img src="image/facebook.png" alt="logo">
            </div>
            <!-- logo ends -->

            <!--email and password starts -->
            <div class="login">
                <form action="#" method="post">   
                <ul>
                    <li>
                        <label for="email">Email or Phone<br>
                        <input type="email" id="email"></label>
                    </li>
                    <li>
                        <label for="passwords">Password<br>
                        <input type="password" id="passwords"></label>
                    </li>
                    <li>
                        <button type="submit">Log In</button>
                    </li>
                </ul>
                </form>
            <!-- email and password ends -->

                <div class="fa"><a href="#">Forgotten account?
                </a></div>
            </div>
        </div>
    </div>
    <!-- header ends -->

    <div class="banner">
        <div class="wrapper">

            <!-- blog 1 -->
            <div class="blog1">
                <h1>Facebook helps you connect and share with the<br> people in your life.</h1>
                <img src="image/logo.png" alt="conntecting_people">
            </div>

            <!-- blog 2 -->
            <div class="blog2">
                <h1>Create an account</h1>
                <h2>It's free and always will be.</h2>

                <!-- form 2 sign up -->
                <form method="post" action="#">
                    <ul>
                        <li>
                            <input type="name" placeholder=" First name">
                        </li>
                        <li>
                            <input class="" type="name" placeholder=" Surname" style="width: 248px">
                        </li>
                    </ul>
                    <input type="email" placeholder=" Sabber plz your email address" style="width: 495px">
                    <input type="password" placeholder=" New password" style="width: 495px">
            
                <!-- birthday -->
                <div class="birthday">
                    <label for="birthday">Birthday</label><br>
                    <select name="date" id="date">
                        <option value="0">Day</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value=" 12" selected="1">12</option>
                        <option value="13">13</option>
                        <option value="14">14</option>
                        <option value="15">15</option>
                        <option value="16">16</option>
                        <option value="17">17</option>
                        <option value="18">18</option>
                        <option value="19">19</option>
                        <option value="20">20</option>
                        <option value="21">21</option>
                        <option value="22">22</option>
                        <option value="23">23</option>
                        <option value="24">24</option>
                        <option value="25">25</option>
                        <option value="26">26</option>
                        <option value="27">27</option>
                        <option value="28">28</option>
                        <option value="29">29</option>
                        <option value="30">30</option>
                        <option value="31">31</option>
                    </select>
                    <select name="month" id="month">
                        <option value="0">Month</option>
                        <option value="1" selected="1"> Jan</option>
                        <option value="2">Feb</option>
                        <option value="3">Mar</option>
                        <option value="4">Apr</option>
                        <option value="5">May</option>
                        <option value="6">Jun</option>
                        <option value="7">Jul</option>
                        <option value="8">Aug</option>
                        <option value="9">Sept</option>
                        <option value="10">Oct</option>
                        <option value="11">Nov</option>
                        <option value="12">Dec</option>
                    </select>
                    <select>
                            <option value="0">Year</option>
                            <option value="2030">2030</option>
                            <option value="2029">2029</option>
                            <option value="2028">2028</option>
                            <option value="2027">2027</option>
                            <option value="2026">2026</option>
                            <option value="2025">2025</option>
                            <option value="2024">2024</option>
                            <option value="2023">2023</option>
                            <option value="2022">2022</option>
                            <option value="2021">2021</option>
                            <option value="2020">2020</option>
                            <option value="2019">2019</option>
                            <option value="2018">2018</option>
                            <option value="2017">2017</option>
                            <option value="2016">2016</option>
                            <option value="2015">2015</option>
                            <option value="2014">2014</option>
                            <option value="2013">2013</option>
                            <option value="2012">2012</option>
                            <option value="2011">2011</option>
                            <option value="2010">2010</option>
                            <option value="2009">2009</option>
                            <option value="2008">2008</option>
                            <option value="2007">2007</option>
                            <option value="2006">2006</option>
                            <option value="2005">2005</option>
                            <option value="2004">2004</option>
                            <option value="2003">2003</option>
                            <option value="2002">2002</option>
                            <option value="2001">2001</option>
                            <option value="2000">2000</option>
                            <option value="1999">1999</option>
                            <option value="1998">1998</option>
                            <option value="1997">1997</option>
                            <option value="1996">1996</option>
                            <option value="1995">1995</option>
                            <option value=" 1994" selected="1">1994</option>
                    </select>
                    <div class="provide">
                            <a  href="#">Why do I need to provide my<br> date of birth?</a>
                    </div>
                </div>
                <div class="mfbox">
                    <input type="radio" name="gender" style="height: 16px; width: 18px"><span>Female</span>
                    <input type="radio" name="gender" style="height: 16px; width: 18px"><span>Male</span>
                </div>
                <div class="more">
                    <p>By clicking Sign Up, you agree to our <a href="#">Terms</a>, <a href="#">Data Policy</a> and <a href="#">Cookie Policy</a>. You may receive SMS notifications from us and can opt out at any time.</p>
                </div>
                <button type="submit">Sign Up</button></form>
                <span class="page"><a href="#">Create a Page</a> for a celebrity, band or business.</span>
            </div>
        </div>
    </div>
        
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

<!DOCTYPE html>

<head>

<title>Facebook</title>

</head>

<body>

</div>

<ul>

<li>

<label for="email">Email or Phone<br>

</li>

<li>

<label for="passwords">Password<br>

</li>

<li>

</li>

</ul>

</form>

<div class="fa"><a href="#">Forgotten account?

</a></div>

</div>

<h1>Facebook helps you connect and share with the<br> people in your life.</h1>

</div>

<h1>Create an account</h1>

<h2>It's free and always will be.</h2>

<ul>

<li>

</li>

<li>

</li>

</ul>

<label for="birthday">Birthday</label><br>

</select>

<option value="0">Month</option>

</select>

</select>

<a href="#">Why do I need to provide my<br> date of birth?</a>

</div>

<input type="radio" name="gender" style="height: 16px; width: 18px"><span>Female</span>

</div>

<p>By clicking Sign Up, you agree to our <a href="#">Terms</a>, <a href="#">Data Policy</a> and <a href="#">Cookie Policy</a>. You may receive SMS notifications from us and can opt out at any time.</p>

</div>

<span class="page"><a href="#">Create a Page</a> for a celebrity, band or business.</span>

</div>

</body>

</html>

css/style.css

/*font-family: 'Padauk', sans-serif;*/
body{
    padding: 0;
    margin: 0;
    letter-spacing: .45px;
    word-spacing: -5px;
    font-family: 'Padauk', sans-serif;
/*  line-height: 40px;*/
}
.header{
    height: 105px;
    background-color: #3B5998;
}
.wrapper{
    width: 67%;
    margin: 0 auto;
    padding-bottom: 10px;
    overflow: hidden;
}
.logo{
    margin-top: 35px;
    float: left;
}
.login{
    width: 72%;
    float: right;
    position: relative;
    padding-right: 28px;
}
.login ul{
    float: right;
    list-style: none;
}
.login ul li{
    float: left;
}
.login label{
    color: white;
    font-size: 18px;
    height: 100px;
}
.login label input{
    border: none;
    border: 1px solid black;
    height: 24px;
    width: 180px;
    margin-right: 20px;
}
.login label input:active{
    border: 1px solid black; 
}
.login button{
    background-color: #4267B2;
    border: none;
    border: 1px solid #29487D;
    float: right;
    font-weight: 700;
    color: white;
    width:58px;
    height: 28px;
    margin-top: 27px;
}
.login button:hover{
    background-color: #365899
}
.login a{
    color: #73ABD8;
    float: right;
    text-decoration: none;
    font-size: 17px;
}
.login a:hover{
    text-decoration: underline;
}
.fa{
    position: absolute;
    right:149px;
    top: 75px; 
}
  /*header complete*/
.banner{
    height: 750px;
    background-image: url("../images/body.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}
/*blog 1 stars*/
.blog1{
    width: 54%;
    float: left;
}
.blog1 h1{
    font-size: 28px;
    font-weight:700;
    color: #0E385F;
    margin-top: 52px;
    margin-bottom: 0px;
    line-height: 30px; 
}
.blog1 img{
    width: 100%;    
}
/*blog 2 starts*/
.blog2{
    width: 42%;
    float: right;
}
.blog2 h1{
    font-size: 50px;
    font-weight:600;
    margin-top: 20px;
    margin-bottom:-9px;
}
.blog2 h2{
    font-size: 29px;
    font-weight:400;
    margin-top: 1px;
    margin-bottom: 0px;
}
/*sign up forms stars*/
.blog2 form ul{
    padding-left: 0;
}
.blog2 form ul li{
    list-style: none;
    float: left;
}
.blog2 form input{
    width: 232px;
    height: 48px;
    border: 1px solid #BDC7D8;
    border-radius: 6px;
    font-size: 23px;
    color: #989C9F;
    margin-bottom: 13px;
}
.blog2 form ul li:first-child{
    margin-right: 13px;
}
/*birthday starts*/
.birthday label{
    font-size: 27px;
}
.birthday select{
    height: 36px;
    width: 76px;
    border: 1px solid #BDC7D8;
    font-size: 17px;
}
.provide{
    float: right;
    margin-right: 94px;
    line-height: 19px;
}
.provide a{
    text-decoration: none;
    color: #365899;
}
.provide a:hover{
    text-decoration: underline;
}
/*birthday ends*/
/*male female checkbox*/
.mfbox input{
    height: 18px;
    width: 18px;
}

.mfbox{
    margin: 20px 0 20px 10px;
}
.mfbox span{
    font-size: 24px;
}
/*more text*/
.more{
    width: 75%;
    line-height: 19px;
    color: #7D7D7E;
}
.more a{
    text-decoration: none;
    color: #365899;
}
.more a:hover{
    text-decoration: underline;
}
/*button*/
.blog2 button{
    background-color: #5E9B4B;
    border: none;
    border: 1px solid #2F5212;
    border-radius: 6px;
    height:50px;
    width: 242px;
    color: white;
    font-size: 25px;
    margin-bottom: 34px;
}
.blog2 button:hover{
    background-color: #6DAA59;
}
/*button ends*/
.page{
    font-weight: 700;
    color: #666666;
    font-size: 18px;
}
.page a{
    text-decoration: none;
    color: #365899;
}
.page a:hover{
    text-decoration: underline;
}
/*page ends*/

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

/*font-family: 'Padauk', sans-serif;*/

body{

padding: 0;

margin: 0;

letter-spacing: .45px;

word-spacing: -5px;

font-family: 'Padauk', sans-serif;

/* line-height: 40px;*/

}

.header{

height: 105px;

background-color: #3B5998;

}

.wrapper{

width: 67%;

margin: 0 auto;

padding-bottom: 10px;

overflow: hidden;

}

.logo{

margin-top: 35px;

float: left;

}

.login{

width: 72%;

float: right;

position: relative;

padding-right: 28px;

}

.login ul{

float: right;

list-style: none;

}

.login ul li{

float: left;

}

.login label{

color: white;

font-size: 18px;

height: 100px;

}

.login label input{

border: none;

border: 1px solid black;

height: 24px;

width: 180px;

margin-right: 20px;

}

.login label input:active{

border: 1px solid black;

}

.login button{

background-color: #4267B2;

border: none;

border: 1px solid #29487D;

float: right;

font-weight: 700;

color: white;

width:58px;

height: 28px;

margin-top: 27px;

}

.login button:hover{

background-color: #365899

}

.login a{

color: #73ABD8;

float: right;

text-decoration: none;

font-size: 17px;

}

.login a:hover{

text-decoration: underline;

}

.fa{

position: absolute;

right:149px;

top: 75px;

}

/*header complete*/

.banner{

height: 750px;

background-image: url("../images/body.jpg");

background-repeat: no-repeat;

background-size: cover;

}

/*blog 1 stars*/

.blog1{

width: 54%;

float: left;

}

.blog1 h1{

font-size: 28px;

font-weight:700;

color: #0E385F;

margin-top: 52px;

margin-bottom: 0px;

line-height: 30px;

}

.blog1 img{

width: 100%;

}

/*blog 2 starts*/

.blog2{

width: 42%;

float: right;

}

.blog2 h1{

font-size: 50px;

font-weight:600;

margin-top: 20px;

margin-bottom:-9px;

}

.blog2 h2{

font-size: 29px;

font-weight:400;

margin-top: 1px;

margin-bottom: 0px;

}

/*sign up forms stars*/

.blog2 form ul{

padding-left: 0;

}

.blog2 form ul li{

list-style: none;

float: left;

}

.blog2 form input{

width: 232px;

height: 48px;

border: 1px solid #BDC7D8;

border-radius: 6px;

font-size: 23px;

color: #989C9F;

margin-bottom: 13px;

}

.blog2 form ul li:first-child{

margin-right: 13px;

}

/*birthday starts*/

.birthday label{

font-size: 27px;

}

.birthday select{

height: 36px;

width: 76px;

border: 1px solid #BDC7D8;

font-size: 17px;

}

.provide{

float: right;

margin-right: 94px;

line-height: 19px;

}

.provide a{

text-decoration: none;

color: #365899;

}

.provide a:hover{

text-decoration: underline;

}

/*birthday ends*/

/*male female checkbox*/

.mfbox input{

height: 18px;

width: 18px;

}

.mfbox{

margin: 20px 0 20px 10px;

}

.mfbox span{

font-size: 24px;

}

/*more text*/

.more{

width: 75%;

line-height: 19px;

color: #7D7D7E;

}

.more a{

text-decoration: none;

color: #365899;

}

.more a:hover{

text-decoration: underline;

}

/*button*/

.blog2 button{

background-color: #5E9B4B;

border: none;

border: 1px solid #2F5212;

border-radius: 6px;

height:50px;

width: 242px;

color: white;

font-size: 25px;

margin-bottom: 34px;

}

.blog2 button:hover{

background-color: #6DAA59;

}

/*button ends*/

.page{

font-weight: 700;

color: #666666;

font-size: 18px;

}

.page a{

text-decoration: none;

color: #365899;

}

.page a:hover{

text-decoration: underline;

}

/*page ends*/

How to Make Facebook Login Page in HTML5 and CSS3 in 2020 Full Source Code

DOWNLOAD SOURCE CODE

Leave a Reply Cancel reply

DOWNLOAD SOURCE CODE

Related posts:

You Might Also Like

FFMPEG Command to Convert Colored Video to Black & White Using Hue Filter in Terminal

Join 10+ Welders Jobs Whatsapp Group Invite Links For Welding

Join 1000+ Pakistan People Whatsapp Group Invite Links For Friendship

Leave a Reply Cancel reply