Submitted about 4 years ago

Static Template

@Aksharmeet

A solution to the Social proof section challenge

Solution retrospective

I always have trouble with background images. This time I couldn't position background images bottom and top to where I wanted them to be, I think the solution to this problem would be an obvious one but for me that wasn't the case. I would be glad to get some help on the same.

Code

Couldn’t fetch repository

Please log in to post a comment

Community feedback

Wisdom Ojimah•170

@detachedsoul

Posted about 4 years ago

You could use css gird for the layout.

You can change

<div id="heading-div">
      <h1 id="top-heading" class="dark-violet">
         10,000+ of our <br>users love our <br>products.
      </h1> 

      <p id="para-1">
        We only provide great products combined with excellent customer service.
        See what our satisfied customers are saying about our services.
      </p>
   </div>

    <div id="right-rating">
     <div class="light-pink" id="top-pink">
        <div class="star">
          <img src="icon-star.svg" alt="5 Stars as icons" >
          <img src="icon-star.svg" alt="5 Stars as icons" >
          <img src="icon-star.svg" alt="5 Stars as icons" >
          <img src="icon-star.svg" alt="5 Stars as icons" >
          <img src="icon-star.svg" alt="5 Stars as icons" >
        </div>

        <div class="rating dark-violet" >
           Rated 5 Stars in Reviews
        </div>
     </div>

     <div class="light-pink" id="middle-pink">
        <div class="star">
          <img src="icon-star.svg" alt="5 Stars as icons" >
          <img src="icon-star.svg" alt="5 Stars as icons" >
          <img src="icon-star.svg" alt="5 Stars as icons" >
          <img src="icon-star.svg" alt="5 Stars as icons" >
          <img src="icon-star.svg" alt="5 Stars as icons" >
        </div>

        <div  class="rating dark-violet">
          Rated 5 Stars in Report Guru
        </div>
     </div>

     <div class="light-pink" id="last-pink">
        <div class="star">
          <img src="icon-star.svg" alt="5 Stars as icons" >
          <img src="icon-star.svg" alt="5 Stars as icons" >
          <img src="icon-star.svg" alt="5 Stars as icons" >
          <img src="icon-star.svg" alt="5 Stars as icons" >
          <img src="icon-star.svg" alt="5 Stars as icons" >
        </div>
        
        <div  class="rating dark-violet">
          Rated 5 Stars in BestTech
       </div>
     </div>
</div>


to:

<div class="grid"> <div> <div id="heading-div"> <h1 id="top-heading" class="dark-violet"> 10,000+ of our <br>users love our <br>products. </h1>

  <p id="para-1">
    We only provide great products combined with excellent customer service.
    See what our satisfied customers are saying about our services.
  </p>

</div> <div> <div> <div id="right-rating"> <div class="light-pink" id="top-pink"> <div class="star"> <img src="icon-star.svg" alt="5 Stars as icons" > <img src="icon-star.svg" alt="5 Stars as icons" > <img src="icon-star.svg" alt="5 Stars as icons" > <img src="icon-star.svg" alt="5 Stars as icons" > <img src="icon-star.svg" alt="5 Stars as icons" > </div>

    <div class="rating dark-violet" >
       Rated 5 Stars in Reviews
    </div>
 </div>

 <div class="light-pink" id="middle-pink">
    <div class="star">
      <img src="icon-star.svg" alt="5 Stars as icons" >
      <img src="icon-star.svg" alt="5 Stars as icons" >
      <img src="icon-star.svg" alt="5 Stars as icons" >
      <img src="icon-star.svg" alt="5 Stars as icons" >
      <img src="icon-star.svg" alt="5 Stars as icons" >
    </div>

    <div  class="rating dark-violet">
      Rated 5 Stars in Report Guru
    </div>
 </div>

 <div class="light-pink" id="last-pink">
    <div class="star">
      <img src="icon-star.svg" alt="5 Stars as icons" >
      <img src="icon-star.svg" alt="5 Stars as icons" >
      <img src="icon-star.svg" alt="5 Stars as icons" >
      <img src="icon-star.svg" alt="5 Stars as icons" >
      <img src="icon-star.svg" alt="5 Stars as icons" >
    </div>
    
               <div  class="rating dark-violet">
             Rated 5 Stars in BestTech
          </div>
       </div>
    </div>
</div>

</div>```

Your css can then be something like:

.grid {
    display: grid;
   grid-template-columns: repeat(2, 1fr);
  justify-content: space-between;
}


That would be for the first two columns.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord