Looooooooooooong bookmark landing page using Tailwind CSS

Community feedback

• 

  Yousef Attia•310

  @Deeperr0Posted 3 months ago

  Positioning and Styling the Soft Blue Div

  First of all, great job on completing the task! I see that you had some difficulty positioning the soft blue div behind the image. Here are some key points to help you:

  Understanding position: absolute

  The position: absolute property positions an element relative to its nearest positioned ancestor. If the ancestor does not have position: relative (or another position value), the element will be positioned relative to the initial containing block. Using position: relative on the ancestor is often the easiest approach as it doesn't affect the flow of the document.

  Positioning Tips

  You used bottom and left properties to position the element. However, positioning it from the bottom-right might be more straightforward.

  border-radius Basics

  The border-radius property can be used to round corners of an element. Here’s how it works:

  • One value: border-radius: 8px; applies a radius of 8px to all four corners.
  • Two values: border-radius: 8px 4px; applies 8px to the top-left and bottom-right corners, and 4px to the top-right and bottom-left corners.
  • Three values: border-radius: 8px 6px 4px; applies 8px to the top-left, 6px to the top-right and bottom-left, and 4px to the bottom-right corner.

  The values follow a clockwise order starting from the top-left corner: border-radius: top-left top-right bottom-right bottom-left;.

  Making the Div Rounded

  To achieve a fully rounded appearance on the left side of the soft blue div:

  1. Set the border-radius for the top-left and bottom-left corners to a very large value (Think 1000px).
  2. For example: border-radius: 1000px 0 0 1000px;.

  This will make the left side of the div completely rounded. Apply the same technique to the other soft blue div in the features section.

  Your soft-blue class css would look something like this in the end for it to be positioned properly. I am not sure of its responsiveness but use it as a guide

  @media (min-width: 63em) {
      .main__part1 .soft-blue {
          background-color: var(--Soft-blue);
          border: .125rem solid var(--Soft-blue);
          border-radius: 1000px 0 0 1000px;
          bottom: 0;
          display: flex;
          height: calc(15rem + 4vw);
          right: 0;
          margin-bottom: -11.25rem;
          position: absolute;
          width: 50%;
          z-index: -1;
          margin-left: 10%;
      }
  }
  

  Marked as helpful

  1

  ---

  

  Alex 🤸🏻‍♂️•1,020

  @sksksk2024Posted 3 months ago

  Solid advice and thanks, @Deeperr0 !! I'll try them out asap!🔥👍

  0