Sunnyside landing page with HTML, SASS & JS

Community feedback

• 

  Rio Cantre•9,690

  @RioCantrePosted almost 3 years ago

  Hello there! Good job in this challenge. Viewing the solution, I think you should consider the following as well…

  • Emphasize the CTA button. Create another class and add properties like the following...

  HTML:
  <li class="cta"><a href="">Contact</a></li>
  
  CSS:
  .cta a {
    padding: 1.3rem;
    background-color: white;
    color: black;
    width: 130px;
    border-radius: 30px;
    font-family: "Fraunces", serif;
  }
  
  

  Covert it into Sass later

  The first section in main container, must be position the opposite way. There are possible way to do it...

  • Wrap it with div and use Flexbox

  <div>
       <img class="image" alt="egg image" srcset="images/mobile/image-transform.jpg 750w, images/desktop/image-transform.jpg 720w"
      sizes="100%">
      <article class="text-container">
        <h2 class="text-container__head">Transform your brand</h2>
        <p class="text-container__p">We are a full-service creative agency specializing in helping brands grow fast.
          Engage your clients through compelling visuals that do most of the marketing for you.</p>
          <a class="text-container__link text-container__link--transform" href="">Learn more</a>
      </article>
  </div>
  

  • Reverse the position

  <article class="text-container">
        <h2 class="text-container__head">Transform your brand</h2>
        <p class="text-container__p">We are a full-service creative agency specializing in helping brands grow fast.
          Engage your clients through compelling visuals that do most of the marketing for you.</p>
          <a class="text-container__link text-container__link--transform" href="">Learn more</a>
  </article>
  <img class="image" alt="egg image" srcset="images/mobile/image-transform.jpg 750w, images/desktop/image-transform.jpg 720w"
      sizes="100%">
  

  • Import the attribution style in SCSS file and remove the style tag
  • Add the <section class="attribution"> inside the footer tag
  • For HTML structures, refer it with this one Semantics

  Above all, Well done! Keep it up and Hope this is helpful!

  Marked as helpful

  1

  ---

  

  José Manuel Esperanza•220

  @JoseAngaraPosted almost 3 years ago

  @RioCantre Thank you for your advices, I forgot completely about the first section in main-container, I have already solved it. The cta button and attribution will be the next.

  1