Facebook Style Homepage Design Using HTML And CSS
Last Updated : Jul 1, 2023
In this tutorial we will show you how to create facebook style homepage design using HTML and CSS, Facebook is always a major source of inspiration among all the web developers every one likes facebook whether it is there homepage design, wall design etc today we are also inspired from facebook.
You may also like login with facebook using PHP.
CHECK OUT THIS TUTORIAL LIVE DEMO →
To Create Facebook Style Homepage It Takes Only Two Steps:-
- Make a HTML file and define markup
- Make a CSS file and define styling
Step 1. Make a HTML file and define markup
We make a HTML file and save it with a name homepage.html
<html> <head> <link href="homepage_style.css" type="text/css" rel="stylesheet"/> </head> <body> <div id="header_wrapper"> <div id="header"> <li id="sitename"><a href="http://talkerscode.com">talkerscode</a></li> <form action="post"> <li>Email or Phone<br><input type="text" name="email"></li> <li>Password<br><input type="password" name="password"><br><a href="">Forgotten account?</a></li> <li><input type="submit" name="login" value="Log In"></li> </form> </div> </div> <div id="wrapper"> <div id="div1"> <p<Talkerscode helps you connect and share with the <br>people in your life.</p> <img src="images/fb_map_image.png"> </div> <div id="div2"> <h1>Create an account</h1> <p>It's free and always will be.</p> <li><input type="text" placeholder="First Name" id="firstname"><input type="text" placeholder="Surname" id="surname"></li> <li><input type="text" placeholder="Mobile number or email address"></li> <li><input type="text" placeholder="Re-enter mobile number or email address"></li> <li><input type="password" placeholder="New password"></li> <p>Birthday</p> <li> <select><option>Day</option></select> <select><option>Month</option></select> <select><option>Year</option></select> <a href="">Why do I need to provide my date of birth?</a> </li> <li><input type="radio">Female <input type="radio">Male</li> <li id="terms">By clicking Create an account, you agree to our <a href="">Terms</a> and that <br>you have read our <a href="">Data Policy</a>, including our <a href="">Cookie Use</a>.</li> <li><input type="submit" value="Create an account"></li> <li id="create_page"><a href="">Create a Page</a> for a celebrity, band or business.</li> </div> </div> <div id="footer_wrapper"> <div id="footer1"> English (UK) <a href="">हिन्दी</a><a href="">ਪੰਜਾਬੀ</a><a href=""> اردو</a><a href="">தமிழ்</a><a href="">বাংলা</a><a href="">मराठी</a><a href="">తెలుగు</a><a href="">ગુજરાતી</a><a href="">ಕನ್ನಡ</a><a href="">മലയാളം</a> </div> <div id="footer2"> <a href="">Sign Up</a><a href="">Log In</a><a href="">Messenger</a><a href="">Talkerscode</a><a href="">Mobile</a><a href="">Find Friends</a><a href="">Badges</a><a href="">People</a><a href="">Pages</a><a href="">Places</a><a href="">Games</a><a href="">Locations</a><a href="">Celebrities</a><a href="">Groups</a><a href="">Moments</a><a href="">About</a><a href="">Create Advert</a><a href="">Create Page</a><a href="">Developers</a><a href="">Careers</a><a href="">Privacy</a><a href="">Cookies</a><a href="">Ads</a><a href="">Terms</a><a href="">Help</a> <p>Design By TalkersCode.com</a> </div> </div> </body> </html>
In this step we create three main div for three main homepage section header, wrapper and footer and add all the content as it is like facebook. You may also like auto post on facebook using PHP.
Step 2. Make a CSS file and define styling
We make a CSS file and save it with a name homepage_style.css
body
{
text-align:center;
width:100%;
margin:0 auto;
padding:0px;
font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
background: linear-gradient(white, #D3D8E8);
}
#header_wrapper
{
width:100%;
min-width:980px;
background-color:#4c66a4;
}
#header
{
width:980px;
margin:0px auto;
padding:0px;
height:85px;
}
#header li
{
list-style-type:none;
float:left;
text-align:left;
color:white;
}
#header #sitename
{
margin-top:25px;
}
#header #sitename a
{
color:white;
text-decoration:none;
font-size:30px;
font-weight:900;
}
#header form
{
margin-top:15px;
float:right;
}
#header form li
{
font-size:13px;
margin-left:15px;
}
#header form li a
{
color:#A9BCF5;
text-decoration:none;
}
#header form input[type="text"]
{
margin-top:3px;
margin-bottom:3px;
width:150px;
border:1px solid #08298A;
height:25px;
padding-left:3px;
}
#header form input[type="password"]
{
margin-top:3px;
margin-bottom:3px;
width:150px;
border:1px solid #08298A;
height:25px;
padding-left:3px;
}
#header form input[type="submit"]
{
height:25px;
margin-top:20px;
background-color:#084B8A;
color:white;
border:1px solid #08298A;
}
#wrapper
{
margin:0 auto;
padding:0px;
text-align:center;
width:980px;
}
#wrapper div
{
float:left;
font-family: helvetica, arial, sans-serif;
}
#wrapper #div1
{
margin-top:30px;
width:590px;
text-align:left;
}
#wrapper #div1 p
{
font-size:20px;
font-family:arial;
font-weight:bold;
margin:0px;
color:#0e385f;
}
#wrapper #div2
{
margin-top:10px;
width:390px;
text-align:left;
}
#wrapper #div2 h1
{
margin:0px;
font-size:37px;
color:#2E2E2E;
}
#wrapper #div2 p
{
font-size:18px;
color:#2E2E2E;
}
#wrapper #div2 li
{
list-style-type:none;
margin-top:10px;
}
#wrapper #div2 li #firstname
{
width:49%;
}
#wrapper #div2 li #surname
{
margin-left:2%;
width:49%;
}
#wrapper #div2 li input[type="text"]
{
width:100%;
height:40px;
border-radius:5px;
padding-left:10px;
font-size:18px;
border:1px solid #BDBDBD;
}
#wrapper #div2 li input[type="password"]
{
width:100%;
height:40px;
border-radius:5px;
padding-left:10px;
font-size:18px;
border:1px solid #BDBDBD;
}
#wrapper #div2 li select
{
padding:4px;
float:left;
}
#wrapper #div2 li a
{
margin-left:10px;
width:150px;
color:#045FB4;
text-decoration:none;
font-size:11px;
display: inline-block;
vertical-align: middle;
line-height:15px;
}
#wrapper #div2 li a:hover
{
text-decoration:underline;
}
#wrapper #div2 li
{
color:#2E2E2E;
font-size:18px;
}
#wrapper #div2 #terms
{
color:#424242;
font-size:11px;
}
#wrapper #div2 #terms a
{
display:inline;
margin:0px;
}
#wrapper #div2 li input[type="submit"]
{
width:205px;
height:45px;
text-align:center;
font-size:19px;
margin-top: 10px;
margin-bottom: 10px;
font-family: 'Freight Sans Bold', helvetica, arial, sans-serif !important;
font-weight: bold !important;
background: linear-gradient(#67ae55, #578843);
background-color: #69a74e;
box-shadow: inset 0 1px 1px #a4e388;
border-color: #3b6e22 #3b6e22 #2c5115;
border: 1px solid;
border-radius: 5px;
color: #fff;
cursor: pointer;
display: inline-block;
position: relative;
text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
#wrapper #div2 #create_page
{
color:#424242;
font-size:13px;
font-weight:bold;
}
#wrapper #div2 #create_page a
{
display:inline;
margin:0px;
font-size:13px;
}
#footer_wrapper
{
width:100%;
clear:both;
float:left;
margin-top:30px;
min-width:995px;
background-color:white;
text-align:left;
}
#footer1
{
width:980px;
margin:0px auto;
padding:0px;
border-bottom:1px solid #E6E6E6;
height:30px;
line-height:30px;
font-size:12px;
color:#848484;
}
#footer1 a
{
color:#365899;
display:inline;
margin-left:10px;
text-decoration:none;
}
#footer1 a:hover
{
text-decoration:underline;
}
#footer2
{
width:980px;
margin:0px auto;
padding:0px;
font-size:12px;
color:#848484;
}
#footer2 a
{
color:#365899;
display:inline-block;
margin:5px;
margin-left:0px;
min-width:80px;
text-decoration:none;
}
#footer2 a:hover
{
text-decoration:underline;
}
That's all, this is how to create facebook style homepage design using HTML and CSS. You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.
I hope this tutorial on facebook login page helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
Passionate Electronics and Communication Engineering student with expertise in web development (HTML, CSS, JS,PHP, Bootstrap, React.js) and content writing. Eager problem solver and tech enthusiast, adept at creating engaging web experiences.
RELATED TUTORIALS
Facebook Style Homepage Design Using HTML And CSS
Youtube Style Like And Dislike Rating System Using jQuery,Ajax And PHP
Simple And Best Responsive Web Design Using CSS- Simple And Best Responsive Web Design Using CSS Part 2
Material Design Login Form Using jQuery And CSS
Change The Design Of All Elements In A WebPage Using JavaScript And CSS
Login With Facebook Using PHP
Auto Post On Facebook Using PHP
Get Facebook Like, Share And Comment Count Using PHP
Facebook Like Auto Expanding Textarea Using JavaScript And CSS