Submitted over 3 years ago

Static Template

Aksharmeet Singh•135

@Aksharmeet

Preview site View code

This is a solution for...Social proof section

HTML
CSS

1newbie

Design comparison

SolutionDesign

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.

Community feedback

Wisdom Ojimah•170

@detachedsoulPosted over 3 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.

Aksharmeet Singh•135

@AksharmeetPosted over 3 years ago

@detachedsoul I agree with you that would certainly make the styling easier though recently I am trying to get better with 'float' property to make the webpage more stable generation-wise.

Wisdom Ojimah•170

@detachedsoulPosted over 3 years ago

@Aksharmeet, you shouldn't use float for layouts though.

Please log in to post a comment

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