Rosi

Latest comments

• 

  anna•340

  @annab6Submitted about 3 years ago

  

  Responsive landing page

  1

  61
  

  Rosi•440

  @strosiPosted about 3 years ago

  Hi Anna :) You have done good work and your solution looks well and it's responsive. To the questions:

  • I don't think there is single right way to use grid or flex in this case or any other. You could use only one of them or combine them. Just choose what fits more to the design as you did here.
  • to change the opacity only of the underline your selectors should be:

  article #btn-yellow:hover > .underliner-yellow {
      opacity: 80%; 
  }
  
  article #btn-red:hover > .underliner-red {
      opacity: 80%;
  }
  

  And you could change the radius-border measure from % to px so the corners look more rounded.

  Marked as helpful

  1
• 

  Amelia Thomas•120

  @riemann0Submitted about 3 years ago

  

  Interactive Article Preview Component

  2

  20
  

  Rosi•440

  @strosiPosted about 3 years ago

  Hi Amelia, if you just change the border-top from 24px to 12px your triangle will look closer to the one of the provided design. Another way to make the triangle arrow under the share bar only with CSS is to use pseudo element. For this remove the element with id=arrow and add

  #share-bar::after {
              content: "";
              width: 1rem;
              height: 1rem;
              background-color: #48556a;
              position: absolute;
              left: 50%;
              bottom: 0;
              transform: rotate(45deg) translateY(75%);
          }
  

  Marked as helpful

  1
• 

  Davide Tarpini•110

  @SparkhandSubmitted about 3 years ago

  

  Mobile-first landing page using Flexbox, Grid and SASS

  #sass/scss

  3

  30
  

  Rosi•440

  @strosiPosted about 3 years ago

  Hi Davide. You've created the underlining of "Learn more" as linear background half of it transparent and the lower part of it with color (yellow or red). This way the roundness of the upper corners will never be visible because the corners are not visible itself. Try useing pseudo elements to implement this decoration - something like this.

  Marked as helpful

  1
• 

  sunseeker773•70

  @rauf-devSubmitted about 3 years ago

  

  Profile Card Component

  1

  30
  

  Rosi•440

  @strosiPosted about 3 years ago

  I'm not sure if that possible :) Even with media queries is difficult to achieve the result from the original design. Here's the best solution I've came across but it is also with media queries.

  ("Perfect is the enemy of finished" - I have to frame this... :D)

  Marked as helpful

  0
• 

  Genie Wu•20

  @geniewu007Submitted about 3 years ago

  

  React Spilt Page using Styled Component and CSS Flexbox

  #react

  1

  30
  

  Rosi•440

  @strosiPosted about 3 years ago

  Hi Genie! I have no much experience using styles with React so I'm just guessing. Try to change the logo style:

  @media (max-width: 768px) {
      max-width: 100%;
      height: auto;
  }
  

  with

  min-width: 8rem;
  width: 100%;
  max-width: 13.5rem;
  

  or with

  width: clamp(8rem, 15vw, 13.5rem);
  

  1
• 

  Yazdun•1,310

  @YazdunSubmitted about 3 years ago

  

  NFT card using plain css

  3

  100
  

  Rosi•440

  @strosiPosted about 3 years ago

  I like the blur effect on hovering the image :)

  1