responsive landing page

Community feedback

• 

  Tushar Biswas•4,080

  @itushPosted over 1 year ago

  Congratulations on completing the challenge! 🎉

  Nice attempt :)

  • In my solution, to set the background for each activity I structured the HTML as follows:

  <section class="work">
  
  <div class="work-content">
  
  <header>
  Work
  <svg width="21" height="5" xmlns="http://www.w3.org/2000/svg">
  <path
  d="M2.5 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm8 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm8 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Z"
  fill="#BBC0FF" fill-rule="evenodd" />
  </svg>
  </header>
  
  <div class="hrs">
  <p class="w-current">00hrs</p>
  <p class="w-previous">00hrs</p>
  </div>
  
  </div>
  
  </section>
  

  Then applied the following CSS:

  .work {
  grid-area: work;
  width: 18vw;
  height: 22vh;
  background-color: $Lighredwork;
  background-image: url('../images/icon-work.svg');
  background-repeat: no-repeat;
  background-position: 100% 0%;
  border-radius: 1em;
  position: relative;
  }
  
  .work-content {
  background: $Darkblue;
  width: 18vw;
  height: 32vh;
  position: absolute;
  border-radius: 1em;
  margin: 2em 0 0 0;
  padding: 1em;
  }
  
  

  • Feel free to go through the source code to get some ideas.

  • Let me know how it goes, happy hacking!🚀💻

  Marked as helpful

  0