responsive landing page

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!🚀💻