design1 – another ringer CSS challenge

In your first flexbox challenge you created a basic article preview with the media on the left and the content on the right. Now you’re going to use the position property (see recipe text on image) to place the content on-top the media. See screenshots – original left and rebuilt right:

This flexbox problem is going to be a bit more work, so I’ve included a number of the technical elements you’ll need and the requirements:

  • use a css reset to remove all default margins, padding, and borders * {margin: 0; border: 0; padding: 0;} This will help when trying to troubleshoot and set spacing that works for your design.
  • set the width of the container to 414px for both the menu and the article;
  • Google fonts used are Montserrat: 900 and Open Sans: 400, 600, 700
  • Here’s the moon image.
  • There are two greens used: #67c385 and #429e62
  • All top links, “Start Track: Full Moon Rising”, and “The Astro Physicists” have a hover state that changes to green #429e62, create a transition for all links.
  • Use the position property and value absolute to set the article content atop of the media. Remember the parent element will need to be positioned relative!
  • ***Bonus*** You’ll note that the sample from the ringer has a gradient over the image – black at the bottom and becoming transparent as it heads upward. It really helps the text to stand out against the image. There is a linear-gradient() function that can be used with the background property in CSS. See if you can pull it off! Hint is to use it in the background of the article details. Here’s my sample with the gradient added:

Join the Conversation

1 Comment

Leave a comment

Your email address will not be published. Required fields are marked *