Problem with project - CSS blocks join together

1

Hi coders,
I’m making the challenges I found on FrontendMentor and I have a problem with the placement of two blocks that need to be joined together and above to have a single block.
This is the project:

and these are my codes:

HTML

<html>
    <head>
    <title>Single Price Grid Component</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="style.css"/>
    </head>
    
    <body>
        <!--First block-->
    
      
     
      <div class="container-one">
      
      
    <h1>Join our community</h1>
        <h2>30-day, hassle-free money back guarantee</h2>
        <p>Gain access to our full library of tutorials along with expert code reviews.<br>Pefect for any developers who are serious about honing their skills. </p>
    </div>
    <div class="container-two">
        <!--Second block-->
        <h3>Monthly Subscription</h3>
        <p>$29 per month</p>
        <p>Full access for less than $1 a day</p>
        <button id ="sign-up" type="submit">Sign up</button>
        </div>
        <!--Third block-->
        <div class="container-three">
        <h3>Why Us</h3>
        <ul>
        <li>Tutorials by industry experts</li>
            <li>Peer & expert code review</li>
            <li>Coding exercises</li>
            <li>Access to our Github repos</li>
            <li>Community forum </li>
            <li>Flashcard decks</li>
            <li>New videos every week</li>
        </ul>
        </div>
        
    </body>
</html>

CSS

h1{
    color: hsl(179, 62%, 43%);
    font-family: 'Karla', sans-serif;
    font-weight: 700;
}
h2{
  color: hsl(71, 73%, 54%);
  font-family: 'Karla', sans-serif;
  font-weight: 400;
}

h3{
  color: #FFFFFF;
  font-weight: 400;
  font-family: 'Karla', sans-serif;
  text-align: left;
}

p{
  font-family: 'Karla', sans-serif;
  font-size: 16px;
  color: hsl(204, 43%, 93%);
}

.container-two{
  float: left;
  background-color: hsl(218, 22%, 67%);
  border: 50px;
  padding: 50px;
  width: 240px;
  text-align: left;

}

#sign-up{
  background-color: hsl(71, 73%, 54%);
  color: hsl(204, 43%, 93%);
  display: inline-block;
  font-size: 16px;
  border-radius: 8px;
  padding: 14px 60px;
  width: 250px;
  box-shadow: 10px 10px 5px grey;
  
}
.container-three{
  float: right;
  background-color: hsl(179, 62%, 43%);
  border: 50px;
  padding: 50px;
  width: 240px;
  text-align: left;
}
ul{
  padding: 0;
}
li {
  list-style-type: none;
  color: #FFFFFF;
}
4
  • html
    wrap all container in a container : you can control the width , the height and center by using margin auto
  • css
    define the height and the width of container-one and container-two
    set width to 50% and height for example to 70%

add at the begining of your css file

  * {
     box-sizing : border-box;
     }

see box-sizing

you can also use flex

1 Like
5

Hi @nxdf2015,
I have added your changes and this is the result:

  • Why is the container-three larger than the container-two?
  • How can I create a single row and under two columns, so that they are joined?
6

with your file you get:
container

you must update your css file:
(i copy class of the css file only with update)

*{
box-sizing: border-box;
width: 100%; /*remove this*/
}
.container{
width: 80%; /* Defines the width as a percentage of the containing block’s content width */
height: 80vh; /* 80% of the height of the view port */
margin: auto;
}

#container-one{
padding: 20px 20px 20px 20px;
height: 40%;
width: 70%; /* you can remove this a block take the full width available, see on mdn */
}

#container-two{
float: left;
background-color: hsl(179, 62%, 43%);
border: 50px;
padding: 50px;
height: 60%;
width: 50%;
text-align: left;

}

#container-three{
float: right;
background-color: hsl(218, 22%, 67%);
border: 50px; /* remove it is not a css property you can use border-width, border-style border-color , see border on mdn */
padding: 50px;
height: 60%;
width: 50%;
text-align: left;
}

1 Like
7

Thanks @nxdf2015 !!!
I will see the properties you told me to look on MDN.
I have other question: (which I had asked before) why is the third block slightly larger than the second?

8

the third block has a height larger : set the height of container to 80vh or a height in pixel(600px) but not 80%, see float on mdn