Huddle landing page

Community feedback

• 

  Loo_cee•230

  @LooceePosted about 2 years ago

  Hi Steve, great job you have done in trying to replicate the website, but you were only able to replicate the mobile design here. Have you tried building desktop first and then making changes for the mobile state? I think you should try that. Here are a few things you can add to your code to achieve the desktop layout:

  1. Visit (https://www.educative.io/answers/how-to-create-columns-in-html) to help you add columns in your row div.
  2. For the background, here are some examples to help you add the background: HTML

  <section>

    <div class="container-fluid">
  
      <div class="row bg-row top-desktop1">  <-- This is the div for the background -->
      
  

  </div>

      <div class="row blue-row">
  
        <div class="col-md-6 col-sm-12 mobile center">
  
          <img class="human-icons" src="images/illustration-grow-together.svg" 
  

  alt="Grow together illustration">

        </div>
  
        <div class="col-md-6 col-sm-12 center">
  
          <div class="grow-together">
  
            <h3 class="margin1">Grow Together</h3>
  
            <p class="margin1">Generate meaningful discussions with your audience and build a strong, loyal community.
            Think of the insightful conversations you miss out on with a feedback form.</p>
  
          </div>
  
        </div>
  
        <div class="col-md-6 col-sm-12 desktop center">
  
          <img class="human-icons" src="images/illustration-grow-together.svg" alt="Grow together illustration">
  
        </div>
  
      </div>
  
      <div class="row bg-row bottom-desktop1">
  
      </div>
  
    </div>
  
  </section>
  

  CSS

  .top-desktop1{

  background-image: url(images/bg-section-top-desktop-1.svg);

  background-position: center; /* Center the image */

  background-repeat: no-repeat; /* Do not repeat the image */

  background-size: cover; /* Resize the background image to cover the entire container */

  }

  You'll need a div in your row div to add the background image. To understand more on how it works, visit (https://www.w3schools.com/cssref/pr_background-image.asp).

  I hope this helps and I'll be glad to give more explanation if you still need any. Happy coding :)

  Marked as helpful

  0