CODEWITHSUNDEEP
htmlcss
P. Murtagh
P. Murtagh

Reputation: 17

How to get rid of the background in between sections on webpage

I am having a little bit of trouble figuring this out. On the site I am working on, in between the two sections and footer, there seems to be a blank space with the background color showing, and I can't figure out how to get rid of that so the sections and footer sit on top of each other with no space between them. If someone could check out the code, it'll be much appreciated. 

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

body {
  background-color: #5CDB95;
  font-family: 'Gamja Flower', sans-serif;
  line-height: 20px;
}

h1 {
  margin: 10px 0px 24px;
  font-family: 'Petit Formal Script', sans-serif;
  color: #2d3338;
  font-size: 69px;
  line-height: 54px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0px;
  text-shadow: none;
}

h2 {
  margin: 0px 0px 10px;
  font-size: 32px;
  line-height: 36px;
  font-weight: 400;
  text-shadow: none;
}

p {
  color: #05386B;
}

.button {
  width: 35%;
  height: 54px;
  background-color: #1abc9c;
  color: #fff;
  font-size: 16px;
  font-weight: 300;
  margin-top: 10px;
}

.subtitle {
  margin-right: 89px;
  margin-bottom: 63px;
  margin-left: 89px;
  font-family: 'Times New Roman';
  color: black;
  font-size: 25px;
  line-height: 31px;
  font-weight: 400;
}

.field {
  width: 70%;
  height: 54px;
  padding-left: 20px;
  border: 0px solid #000;
  font-size: 16px;
}

.sign-up-form {
  display: inline-block;
  width: 100%;
  font-size: 16px;
  text-align: center;
}

.header-section {
  height: 100%;
  padding-top: 104px;
  background-color: #5CDB95;
  text-align: center;
}

.bars-wrapper {
  background-color: #1abc9c;
}

.bar {
  width: 14.285%;
  height: 7px;
  float: left;
  background-color: #1abc9c;
}

.bar._2 {
  background-color: #f2ca27;
}

.bar._3 {
  background-color: #e67e22;
}

.bar._4 {
  background-color: #16a085;
}

.bar._5 {
  background-color: #2980b9;
}

.bar._6 {
  background-color: #e74c3c;
}


/*will be using this to hide parts of image
    .image-crop {
      overflow: hidden;
      height: 260px;
    }
    */

.about-section {
  padding: 80px 0 80px;
  background-color: white;
  margin: 50px 0px 50px;
  font-size: 20px;
}

.about-section h2 {
  font-size: 40px;
  font-weight: 800;
  color: #033048;
  margin-bottom: 40px;
  text-align: center;
}

.about-book p {
  font-size: 22px;
  font-weight: 600;
}

.aboutus {
  padding: 80px 0 80px;
  background-color: white;
  margin: 50px 0px 50px;
  font-size: 20px;
  text-align: center;
}

footer {
  background-color: black;
  padding: 80px 0 80px;
  margin: 50px 0px 50px;
  text-align: center;
  font-size: 20px;
}
<!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">
  <link href="https://fonts.googleapis.com/css?family=Gamja+Flower" rel="stylesheet">
  <title>Raijin Studios</title>
</head>
<header>

  <body>
    <div class="bars-wrapper">
      <div class="bar"></div>
      <div class="bar _2"></div>
      <div class="bar _3"></div>
      <div class="bar _4"></div>
      <div class="bar _5"></div>
      <div class="bar _6"></div>
      <div class="bar"></div>
    </div>
    <div class="header-section">
      <h1 class="heading">Raijin Studios</h1>
      <p class="subtitle" onmouseover="changeColor(this)" onmouseout="changeColor(this)">Raijin Studios is excited to announce our new upcoming novella, The Water King.</p>

    </div>
    <div class="sign-up-form">
      <form name="sign-up"><input type="email" name="email" placeholder="Enter Your Email" maxlength="256" required="" class="field"><input class="button" type="submit" value="Get Notified"></form>
    </div>
</header>

<!--This is where an image of the new book will go -->

<section class="about-section">
  <h2>About The Water King!</h2>
  <p class="about-book">Beginning in a fictional realm, one heir to the worlds throne is casted to earth by his best friend - his brother, the one he trusted most. When losing his memory causes the mysterious man to forget who he his and where he came from, he turns to the
    help of a strange girl who finds him and helps him remeber who he was and where he came from.</p>
</section>


<section class="aboutus">
  <p>This section will be about the fictionous company. Similar to the about pages on websites.</p>
</section>

<footer>
  <p>©Raijin Studios 2018.</p>
  <!--i will be added more features and elements to both the footer and the sections of the website. For intereactivity, I am going to try to make the color bar at the top fade in and out as well -->
</footer>
</body>

</html>

Upvotes: 1

Views: 226

Answers (3)

Tiko
Tiko

Reputation: 1311

There you go.

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

    body {
        background-color: #5CDB95;
        font-family: 'Gamja Flower', sans-serif;
        line-height: 20px;
    }

    h1 {
        margin: 10px 0px 24px;
        font-family: 'Petit Formal Script', sans-serif;
        color: #2d3338;
        font-size: 69px;
        line-height: 54px;
        font-style: normal;
        font-weight: 400;
        letter-spacing: 0px;
        text-shadow: none;
    }

    h2 {
        margin: 0px 0px 10px;
        font-size: 32px;
        line-height: 36px;
        font-weight: 400;
        text-shadow: none;
    }

    p {
        color: #05386B;
    }

    .button {
        width: 35%;
        height: 54px;
        background-color: #1abc9c;
        color: #fff;
        font-size: 16px;
        font-weight: 300;
        margin-top: 10px;
    }

    .subtitle {
        margin-right: 89px;
        margin-bottom: 63px;
        margin-left: 89px;
        font-family: 'Times New Roman';
        color: black;
        font-size: 25px;
        line-height: 31px;
        font-weight: 400;
    }

    .field {
        width: 70%;
        height: 54px;
        padding-left: 20px;
        border: 0px solid #000;
        font-size: 16px;
    }

    .sign-up-form {
        display: inline-block;
        width: 100%;
        font-size: 16px;
        text-align: center;
    }

    .header-section {
        height: 100%;
        padding-top: 104px;
        background-color: #5CDB95;
        text-align: center;
    }

    .bars-wrapper {
        background-color: #1abc9c;
    }

    .bar {
        width: 14.285%;
        height: 7px;
        float: left;
        background-color: #1abc9c;
    }

    .bar._2 {
        background-color: #f2ca27;
    }

    .bar._3 {
        background-color: #e67e22;
    }

    .bar._4 {
        background-color: #16a085;
    }

    .bar._5 {
        background-color: #2980b9;
    }

    .bar._6 {
        background-color: #e74c3c;
    }


    /*will be using this to hide parts of image
        .image-crop {
            overflow: hidden;
            height: 260px;
        }
        */

    .about-section {
        padding: 80px 0 80px;
        background-color: white;
        font-size: 20px;
    }

    .about-section h2 {
        font-size: 40px;
        font-weight: 800;
        color: #033048;
        text-align: center;
    }

    .about-book p {
        font-size: 22px;
        font-weight: 600;
    }

    .aboutus {
        padding: 80px 0 80px;
        background-color: white;
        font-size: 20px;
        text-align: center;
        margin-top:-50px;
    }

    footer {
        background-color: black;
        padding: 80px 0 80px;
        margin: 50px 0px 50px;
        text-align: center;
        font-size: 20px;
    }

Upvotes: 0

Nika Kurashvili
Nika Kurashvili

Reputation: 6462

1) you can just delete margins for sections and increase paddings instead;

OR

2) You can make body background white, and than change add background color and padding bottom to sign-up-form

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

body {
  font-family: 'Gamja Flower', sans-serif;
  line-height: 20px;
}

h1 {
  margin: 10px 0px 24px;
  font-family: 'Petit Formal Script', sans-serif;
  color: #2d3338;
  font-size: 69px;
  line-height: 54px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0px;
  text-shadow: none;
}

h2 {
  margin: 0px 0px 10px;
  font-size: 32px;
  line-height: 36px;
  font-weight: 400;
  text-shadow: none;
}

p {
  color: #05386B;
}

.button {
  width: 35%;
  height: 54px;
  background-color: #1abc9c;
  color: #fff;
  font-size: 16px;
  font-weight: 300;
  margin-top: 10px;
}

.subtitle {
  margin-right: 89px;
  margin-bottom: 63px;
  margin-left: 89px;
  font-family: 'Times New Roman';
  color: black;
  font-size: 25px;
  line-height: 31px;
  font-weight: 400;
}

.field {
  width: 70%;
  height: 54px;
  padding-left: 20px;
  border: 0px solid #000;
  font-size: 16px;
}

.sign-up-form {
  display: inline-block;
  width: 100%;
  font-size: 16px;
  text-align: center;
  background: #5CDB95;
  padding-bottom: 50px;
}

.header-section {
  height: 100%;
  padding-top: 104px;
  background-color: #5CDB95;
  text-align: center;
}

.bars-wrapper {
  background-color: #1abc9c;
}

.bar {
  width: 14.285%;
  height: 7px;
  float: left;
  background-color: #1abc9c;
}

.bar._2 {
  background-color: #f2ca27;
}

.bar._3 {
  background-color: #e67e22;
}

.bar._4 {
  background-color: #16a085;
}

.bar._5 {
  background-color: #2980b9;
}

.bar._6 {
  background-color: #e74c3c;
}


/*will be using this to hide parts of image
    .image-crop {
      overflow: hidden;
      height: 260px;
    }
    */

.about-section {
  padding: 80px 0 80px;
  background-color: white;
  margin: 50px 0px 50px;
  font-size: 20px;
}

.about-section h2 {
  font-size: 40px;
  font-weight: 800;
  color: #033048;
  margin-bottom: 40px;
  text-align: center;
}

.about-book p {
  font-size: 22px;
  font-weight: 600;
}

.aboutus {
  padding: 80px 0 80px;
  background-color: white;
  margin: 50px 0px 50px;
  font-size: 20px;
  text-align: center;
}

footer {
  background-color: black;
  padding: 80px 0 80px;
  margin: 50px 0px 50px;
  text-align: center;
  font-size: 20px;
}
<!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">
  <link href="https://fonts.googleapis.com/css?family=Gamja+Flower" rel="stylesheet">
  <title>Raijin Studios</title>
</head>
<header>

  <body>
    <div class="bars-wrapper">
      <div class="bar"></div>
      <div class="bar _2"></div>
      <div class="bar _3"></div>
      <div class="bar _4"></div>
      <div class="bar _5"></div>
      <div class="bar _6"></div>
      <div class="bar"></div>
    </div>
    <div class="header-section">
      <h1 class="heading">Raijin Studios</h1>
      <p class="subtitle">Raijin Studios is excited to announce our new upcoming novella, The Water King.</p>

    </div>
    <div class="sign-up-form">
      <form name="sign-up"><input type="email" name="email" placeholder="Enter Your Email" maxlength="256" required="" class="field"><input class="button" type="submit" value="Get Notified"></form>
    </div>
</header>

<!--This is where an image of the new book will go -->

<section class="about-section">
  <h2>About The Water King!</h2>
  <p class="about-book">Beginning in a fictional realm, one heir to the worlds throne is casted to earth by his best friend - his brother, the one he trusted most. When losing his memory causes the mysterious man to forget who he his and where he came from, he turns to the
    help of a strange girl who finds him and helps him remeber who he was and where he came from.</p>
</section>


<section class="aboutus">
  <p>This section will be about the fictionous company. Similar to the about pages on websites.</p>
</section>

<footer>
  <p>©Raijin Studios 2018.</p>
  <!--i will be added more features and elements to both the footer and the sections of the website. For intereactivity, I am going to try to make the color bar at the top fade in and out as well -->
</footer>
</body>

</html>

Upvotes: 2

Hariom Singh
Hariom Singh

Reputation: 1540

Use Margin for section margin: 0px;

Upvotes: 1

Related Questions