Facebook Signup Design Clone HTML & CSS

Facebook Signup and login design clone using HTML and CSS Language.

Facebook Signup and Login Clone:

Facebook is the most popular social network nowadays in the world, everybody knows facebook I hope you will also from those peoples who know facebook, and you will see a couple of times facebook signup and login form design. In this today article, we will design facebook signup and login form using only HTML and CSS. so now let's get started, First of all, you need to create an index.html file and copy the below code and paste the copied code in an index.html file
Facebook Signup design clone
Facebook Signup design clone

Index.html



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Facebook Clone</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <nav id="nav">
     <ul class="left-ul">
         <li><a href="">Facebook</a></li>
     </ul>
     <div class="empty"></div>
     <ul class="right-ul">
         <li>
             <input type="email" class="nav-control" placeholder="Enter email...">
         </li>
         <li>
            <input type="password" class="nav-control" placeholder="Enter password...">
        </li>
        <li>
            <input type="submit" class="nav-btn" value="Login">
        </li>
     </ul>
    </nav>
    <!-- Close nav -->

    <div class="container">
        <div class="left-section">
         <div class="left-heading">
             <h3>Facebook helps you connect and share with the people in your life.</h3>
             <div class="image">
                 <img src="bg.png" alt="">
             </div>
         </div>
        </div>
        <div class="right-section">
          <h1 class="form-heading">
            Create an account
          </h1>
          <p class="text">It's free and always will be.</p>
          <form action="" id="formSection">
              <div class="form-group">
                  <input type="text" class="control half" placeholder="First Name">
                  <input type="text" class="control half" placeholder="Last Name">
              </div>
              <div class="form-group">
                  <input type="text" class="control" placeholder="Mobile number or Email">
              </div>
              <div class="form-group">
                  <input type="password" class="control" placeholder="New Password">
              </div>
              <div class="form-group">
                  <p class="birth">Birthday</p>
                  <select  id="">
                      <option value="">1</option>
                      <option value="">2</option>
                      <option value="">3</option>
                      <option value="">4</option>
                  </select>
                  <select  id="">
                    <option value="">Jan</option>
                    <option value="">Be</option>
                    <option value="">Mar</option>
                    <option value="">Apr</option>
                </select>
                <select  id="">
                    <option value="">2015</option>
                    <option value="">2016</option>
                    <option value="">2017</option>
                    <option value="">2018</option>
                </select>
              </div>
              <div class="form-group">
                  <input type="radio" name="" id=""> <b>Female</b>
                  <input type="radio" name="" id="male"> <b>Male</b>
              </div>
              <div class="form-group">
                  <p class="someText">By clicking Sign Up, you agree to our Terms, Data Policy and Cookie Policy. You may receive SMS notifications from us and can opt out at any time.</p>
              </div>
              <div class="form-group">
                  <button class="btn">Sign Up</button>
              </div>
              
          </form>
        </div>
    </div>

</body>
</html>

style.css


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;  
}

:root {
    --bgColor: #e9ebee;
    --navBg: #3b5998;
    --colorWhite: #fff;
    --colorBlack: #000;
}

body {
    font-family: sans-serif;
    font-weight: 400;
    background: var(--bgColor);
}

nav#nav {
    width: 100%;
    height: 70px;
    background: var(--navBg);
    line-height: 70px;
    padding: 0 180px;
    display: flex;

}

.left-ul li {
    list-style: none;
}

.left-ul li a {
    color: var(--colorWhite);
    font-size: 30px;
    text-decoration: none;
    font-weight: bold;
}

.right-ul {
    display: flex;
}

.right-ul li {
    list-style: none;
}

.empty {
    margin: 0 auto;
}

.nav-control {
    height: 33px;
    padding: 0 10px;
    border-radius: 3px;
    border:0px;
    margin-right: 10px;
}

.nav-btn {
    display: inline-block;
    height: 33px;
    padding: 0 10px;
    border-radius: 3px;
    background: var(--colorWhite);
    color: var(--colorBlack);
    border: 0px;
}

.container {
    display: flex;
    padding: 48px 180px;
}

.left-section, .right-section {
    width: 50%;
}

.right-section {
    padding-left: 20px;
}

.left-heading {
    font-size: 20px;
    font-weight: normal;
    line-height: 35px;
}

.image {
    margin-top: 15px;
    overflow: hidden;
}

.image img {
    width: 100%;
    height: 100%;
}

.form-heading {
    font-size: 30px;
    color: #333;
}

.text {
    margin: 10px 0;
    font-weight: normal;
    font-size: 17px;
}

#formSection {
    width: 100%;

}

.form-group {
    margin-bottom: 15px;
}

.control {
    padding: 8px 10px;
    font-size: 18px;
    border-radius: 4px;
    border:1px solid #bdc7d8 ;
    width: 100%;
}

.half {
    width: 48%;
}

.half:nth-child(2){
    margin-left: 2%;
}

.birth {
    font-size: 17px;
    letter-spacing: 1px;
    margin-bottom: 7px;
}

select {
    padding: 5px 10px;
}

#male {
    margin-left: 6px;
}

.someText {
    font-size: 13px;
    width: 80%;
    color: #777;
}

.btn {
    font-size: 19px;
    font-weight: bold;
    min-width: 194px;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
    margin: 10px 0px;
    padding: 10px 20px;
    background: linear-gradient(#67ae55,#578843);
    border: 0;
    color: var(--colorWhite);
}

@media(max-width: 765px){
    nav#nav {
        flex-direction: column;
        height: auto;
        padding: 0 50px;
    }

    .container {
        flex-direction: column;
        padding: 30px 50px;
    }

    .left-section, .right-section {
        width: 100%;
    }
}

COMMENTS

Name

ajax,2,HTML & CSS,19,JavaScript,1,PHP,11,
ltr
item
webtipstricks: Facebook Signup Design Clone HTML & CSS
Facebook Signup Design Clone HTML & CSS
Facebook Signup and login design clone using HTML and CSS Language.
https://1.bp.blogspot.com/-hUrp12sTosc/XEm88tvQ8_I/AAAAAAAABy8/Ba9SJDXhboEsagGUm7X9C8mHQN7Wayh1QCLcBGAs/s640/facebook%2Bdesign%2Bclone.png
https://1.bp.blogspot.com/-hUrp12sTosc/XEm88tvQ8_I/AAAAAAAABy8/Ba9SJDXhboEsagGUm7X9C8mHQN7Wayh1QCLcBGAs/s72-c/facebook%2Bdesign%2Bclone.png
webtipstricks
https://www.webtipstricks.com/2019/01/facebook-signup-design-clone-html-css.html
https://www.webtipstricks.com/
https://www.webtipstricks.com/
https://www.webtipstricks.com/2019/01/facebook-signup-design-clone-html-css.html
true
4027471107773963481
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy