Samoina

Latest comments

• 

  Samoina•260

  @samoinaSubmitted about 2 months ago

  What challenges did you encounter, and how did you overcome them?

  I opted to use React Hookstate. Managing global state for the orders, and local state for the specific product items was a bit confusing at the start but I did figure it out. Setting global state covered the total order, and local state covered the details specific to the product itself

  

  Product List with Cart using ReactJS

  #react#tailwind-css

  2

  30
  

  Samoina•260

  @samoinaPosted about 1 month ago

  Thank you Jay, the blending of the colors on hover must have escaped my mind. this is helpful

  2. I also hadn't thought abut cart quantity starting from 1 for the reasons you stated...that's insightful

  3. i will be sure to correct the modal appearance too.

  again, thanks for taking the time to share this.

  0
• 

  Stefan•90

  @SaitenhexerSubmitted over 1 year ago

  

  Profile Card - With CSS Grid

  1

  30
  

  Samoina•260

  @samoinaPosted over 1 year ago

  Hi @saitenhexer,

  I checked your code and noticed you used the background position for the circles on the page, at the top and bottom.

  Just sharing that you might also consider using the z-index. So, essentially, the z-index allows us to place items 'in front' of each other. This way, an item with a higher z-index will stack in front of another with a lower z-index.

  In my code, I placed the circle images directly in the body, and then everything else in the profile under 'main'. I then styled the 'main' section to give it a higher z-index so that it'd appear stacked infront of the circles.

  .main {
  	width: 20rem;
  	text-align: center;
  	border-radius: 10px;
  	z-index: 1;
  }
  

  Hope this is insightful.

  Happy coding!

  Marked as helpful

  0
• 

  Vivek Upadhyay•90

  @vivek33upSubmitted over 1 year ago

  

  Stat card

  1

  01
  

  Samoina•260

  @samoinaPosted over 1 year ago

  The Purple color over the image is called an overlay. Here's how I went about it.

  1. Place the image in a parent container, say class main__picture. PS: I used the <picture> element to show different images depending on the screen size.
  2. We get to use the ::before pseudoselector. This allows us to create an 'extra layer' on top of the existing image to give it that purple color, hence why it is called an overlay. Using ::before means this 'layer' is added as though it was a child of the parent container, but just before my picture element.
  3. We position the parent container relative, and the overlay absolute so that it covers the image entirely.
  4. We then add the background color provided for this challenge (hsl(277, 64%, 61%)) .
  5. There's a blend mode that CSS allows to combine the colors of the overlay with the white of the image. so we use the property mix-blend-mode and set it to multiply..
  6. Lastly we set opacity to determine how much of the white shows through the overlay. Here's a code snippet to illustrate this:

  <picture class="main__picture">
  <source media="(min-width: 375px)" srcset="images/image-header-desktop.jpg" sizes="">
  <img src="images/image-header-mobile.jpg" alt="background image">
  </picture>
  

  /* Create the purple overlay on CSS*/
  .main__picture {
  position: relative;
  }
  
  .main__picture ::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--soft-violet);
  mix-blend-mode: multiply;
  opacity: 0.5;
  }
  

  This worked for me and I hope you find it helpful. All the best Vivek! Happy Coding

  Marked as helpful

  1
• 

  anuraggcoder•70

  @anuraggcoderSubmitted almost 2 years ago

  

  Responsive layout using a mix of CSS Grid, Flexbox and Tables

  1

  20
  

  Samoina•260

  @samoinaPosted almost 2 years ago

  Hi @anuraggcoder,

  I fumbled a little with the font as well and finally figured out to import it into my style sheet from Google Fonts: I included the regular style in the body styling, and created two extra classes for the bold and extra bold styles (which i used for the '76' value in the circle on the results side. )

  @import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@500;700;800&display=swap');
  
  body {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 500;
  }
  
  .bold {
  font-weight: 700;
  }
  
  .extra-bold {
  font-weight: 800;
  }
  
  

  I hope this is helpful for you as well. All the best and Happy Coding!

  Marked as helpful

  1