Facebook homepage background tidak muncul?

mau minta bantuan nih dengan tutorial tentang homepage facebook, masalah yang ada background abu tidak muncul di div content middle, tapi muncul jika dibuat di left atau right content.

kode html

 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Facebook - Log In or Sign Up</title>
  <link rel="stylesheet" href="main.css">
</head>

<body>

  <!-- 1. header -->

  <div class="content content-header clearfix">
    <div class="wrapper">

      <h1>facebook</h1>

      <form class="" action="" method="post">
        <div class="group-form">
          <label for="email">Email or Phone</label>
          <input type="text" name="email" id="email">
          <input type="checkbox" name="remember">
          <a href="#">Keep me logged in</a>

        </div>
        <div class="group-form">
          <label for="password">Password</label>
          <input type="password" name="password" id="password">
          <a href="#">Forgot account?</a>
        </div>

        <div class="group-form">
          <input type="submit" value="Log In">

        </div>
      </form>

    </div>
  </div>
  <!-- 2. content -->
  <div class="content content-middle clearfix">
    <div class="wrapper">

      <div class="middle-left">
        <h2>Connect with friends and the <br> world around you on facebook</h2>

        <ul>
          <li>See photos and updates <span> from the friends in News Feed.</span></li>
          <li>Share what's new <span> in your life on your Timeline</span></li>
          <li>Find more <span> of what you're looking for with Facebook Search</span></li>
        </ul>
      </div>
      <div class="middle-right">
        <h3>Sign Up</h3>
        <p>It's free and always will be</p>

        <form class="" action="">
          <input type="text" placeholder="First name" class="inline">
          <input type="text" placeholder="Last name" class="inline inline_last">
          <input type="email" placeholder="Email or mobile number">
          <input type="email" placeholder="Re-enter Email or mobile number">
          <input type="password" placeholder="New password">

          <p>Birthday</p>
          <select name="Month">
            <option value="">Month</option>
            <option value="">Jan</option>
            <option value="">Feb</option>
          </select>

          <select name="Day">
            <option value="">Day</option>
            <option value="">1</option>
            <option value="">2</option>
          </select>

          <select name="Year">
            <option value="">Year</option>
            <option value="">2000</option>
            <option value="">2001</option>
          </select>

          <a href="#" id="Birthday_info">why do i need to provide my birthday?</a>
          <br>
          <input type="radio" name="gender" id="gender_f">
          <label for="gender_f">Female</label>
          <input type="radio" name="gender" id="gender_m">
          <label for="gender_m">Male</label>

          <p id="register_info">
            By clicking Sign Up, you agree to our
            <a href="#">Terms</a> and that you have read our
            <a href="#">Data policy</a> including our
            <a href="#">Cookie Use</a>
          </p>

          <input type="submit" name="" value="sign up">
        </form>

        <p> <a href="#">Create a Page</a> for a celebrity, band or business</p>

      </div>
    </div>
  </div>
  <!-- 3. footer -->

  <div class="content content-footer clearfix">
    <div class="wrapper">
      <ul>
        <li> <a href="">English (US)</a> </li>
        <li> <a href="">Deutsch</a> </li>
        <li> <a href="">Turkce</a> </li>
      </ul>

      <ul>
        <li> <a href="">English (US)</a> </li>
        <li> <a href="">Deutsch</a> </li>
        <li> <a href="">Turkce</a> </li>
        <li> <a href="">English (US)</a> </li>
        <li> <a href="">Deutsch</a> </li>
        <li> <a href="">Turkce</a> </li>
        <li> <a href="">English (US)</a> </li>
        <li> <a href="">Deutsch</a> </li>
        <li> <a href="">Turkce</a> </li>
        <li> <a href="">English (US)</a> </li>
        <li> <a href="">Deutsch</a> </li>
        <li> <a href="">Turkce</a> </li>
        <li> <a href="">English (US)</a> </li>
        <li> <a href="">Deutsch</a> </li>
        <li> <a href="">Turkce</a> </li>
        <li> <a href="">English (US)</a> </li>
        <li> <a href="">Deutsch</a> </li>
        <li> <a href="">Turkce</a> </li>
        <li> <a href="">English (US)</a> </li>
        <li> <a href="">Deutsch</a> </li>
        <li> <a href="">Turkce</a> </li>

      </ul>

      <p>Facebook ©2018</p>
    </div>

  </div>

</body>

</html>

kode CSS

 * {
  padding: 0px;
  margin: 0px;
  font-family: sans-serif;
  box-sizing: border-box;
}

.wrapper {
  width: 900px;
  margin: 0 auto;
}

h1 {
  float: left;
  font-size: 40px;
  padding-top: 10px;
}

.content-header {
  background: #3A5795;
  color: white;
  padding: 10px 0;
}

.content-header form {
  float: right;
}

.group-form {
  float: left;
  margin-left: 10px;
}

.content-header:after {
  content: "";
  display: block;
  clear: both;
}

.content-header label {
  font-size: 12px;
  padding-bottom: 2px;
}

.content-header label, input {
  display: block;
}

.content-header input[type="checkbox"] {
  display: inline-block;
}

.group-form a {
  color: #9daccb;
  font-size: 12px;
  text-decoration: none;
}

.content-header input[type="submit"] {
  margin-top: 10px;
  background-color: #3A5795;
  color: white;
  font-weight: bold;
  padding: 5px;
  border: 1px solid black;
  font-size: 15px;
}

/*-------content middle---------*/

.content-middle {
  background: #edf0f5;
}

.content-middle .middle-left, .content-middle .middle-right {
  float: left;
  width: 50%;
  background: #edf0f5;
}

h2 {
  margin-top: 50px;
  margin-bottom: 40px;
  font-weight: bold;
}

.content .middle-left ul li {
  list-style: none;
  font-weight: bold;
  margin-bottom: 30px;
}

.content .middle-left ul li span {
  font-weight: normal;
  margin-left: 10px;
  color: grey;
}

h3 {
  margin-top: 10px;
  font-size: 30px;
}

.middle-right p:nth-child(2) {
  color: grey;
  margin-bottom: 10px;
  font-size: 15px;
}

.middle-right input {
  border-radius: 5px;
  border: 1px solid grey;
  padding: 10px;
  width: 100%;
  margin-bottom: 15px;
}

.middle-right input.inline {
  float: left;
  width: 49%;
  margin-right: 2%;
}

.middle-right input.inline_last {
  margin-right: 0%;
}

#Birthday_info, #register_info {
  font-size: 12px;
  color: grey;
}

.middle-right p:last-child a, #register_info a {
  text-decoration: none;
  color: rgb(46, 113, 228);
}

#register_info a:hover {
  text-decoration: underline;
}

input[type="radio"] {
  display: inline-block;
  width: 20px;
  margin-top: 15px;
}

.middle-right input[type="submit"] {
  background-color: green;
  color: white;
  padding: 5px;
  width: 150px;
  margin-top: 10px;
  text-align: center;
}

.middle-right form {
  border-bottom: 1px solid grey;
  margin-bottom: 10px;
}

.middle-right p:last-child {
  color: grey;
  margin-bottom: 50px;
}

.content-footer {
  padding: 5px 0;
}

.content-footer a {
  text-decoration: none;
  font-size: 12px;
}

.content-footer li {
  display: inline-block;
  margin-bottom: 0px;
}

.content-footer ul:first-child {
  border-bottom: 1px solid grey;
  padding-bottom: 5px;
  margin-bottom: 5px;
}

.content-footer p {
  color: grey;
  margin: 10px 0;
  font-size: 12px;
}
avatar endogram
@endogram

3 Kontribusi 0 Poin

Diperbarui 5 tahun yang lalu

5 Jawaban:

sepintas terlihat mungkin css-nya tak mengerti apa yang harus di lakukan ketika

 .middle-right

t di suruh untuk

 float:left;

Tapi oleh karena saya tak tahu hasil akhir dari design nya maka saya hanya menerka, coba di kasih

 float: none;

pada

 .content-middle .middle-left, .content-middle .middle-right

itu akan dmewarna latar belakangnya secara meyeluruh tapi mungkin akan mempengaruhi printah css lain nya.

avatar VikSintus
@VikSintus

96 Kontribusi 36 Poin

Dipost 5 tahun yang lalu

ini gan hasilnya background nya bisa di middle left = kolom Connect with friend dan middle right = kolom sign up, maka dari itu pake float: left, background tidak muncul kalau dibuat di .content-middle = .middle-left dan .middle-right

avatar endogram
@endogram

3 Kontribusi 0 Poin

Dipost 5 tahun yang lalu

ohhh, kalau begitu background .wrapper dan .content-footer nya harus di kasih warna yang sama yaitu background: #edf0f5;

avatar VikSintus
@VikSintus

96 Kontribusi 36 Poin

Dipost 5 tahun yang lalu

kalau wrapper diberi background cuma 900px dari tulisan facebook sampai tombol login aja lebarnya gan. padahal uda ikuti video gatau selipnya dimana.

avatar endogram
@endogram

3 Kontribusi 0 Poin

Dipost 5 tahun yang lalu

kalau selipnya susah di ketemukan maka .content-footernya juga harus di kasih warna yan sama agar bisa mendekati hasil yang di harapkan

avatar VikSintus
@VikSintus

96 Kontribusi 36 Poin

Dipost 5 tahun yang lalu

Login untuk ikut Jawaban