All comments

• 

  Carlos H.• 90

  @KrossBR

  Submitted almost 2 years ago

  One more solution 😁

  Personally, I confess that in this challenge I had a lot of difficulty to set the background according to the reference.

  Could anyone give me a hint?

  I thank you for your help!

  

  Profile card component

  1

  2

  0

  

  Hadiza• 200

  @Thedeezat

  Posted almost 2 years ago

  Hey CARLOS 👋

  I also had issues with the images when i did this project 😅 i suggest for the images in the background you should try out something like this

    background-image: 
      url('images/bg-pattern-top.svg'),
      url('images/bg-pattern-bottom.svg');
  

  You can also add background-position to position it, and background-size to scale it, makes it way easier to use these.

  Well, nice work on this project. I hope you find this helpful.

  Marked as helpful

  1

  This comment has received 2 repliesShow
• 

  Raymond Visser• 80

  @Halaszraymond

  Submitted almost 2 years ago

  Couldnt get rid of the white space between the elements, stackoverflow told to use font-size at parent object and that helped a bit, but not entirely... does anyone has any suggestions for solving this?

  

  3-Column-preview-card-component

  4

  3

  0

  

  Hadiza• 200

  @Thedeezat

  Posted almost 2 years ago

  Hey Raymond 👋

  Nice work on this project 👏

  The whitespace between the containers, can be resolved using flexbox, you should try this out and see.

  .container {
    position: relative;
    width: 100%;
    background-color: hsl(0, 0%, 95%);
  }
  
  .card{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
   }
  
  @media screen and (max-width: 40rem) {
    .card {
      flex-direction: column;
      height: initial;
      padding: 5rem 0;
  }
  

  I decided to remove the transform property because flexbox already align the card for us vertically(as long as the height is 100vh) and horizontally, and also remove the whitespace between them.

  And It's also best to remove the default padding and margin using the universal selector in your css. And also instead of using px it's best to use Rem for font-size, it's a must for accessibility.

  * {
    margin: 0;
    padding: 0;
  }
  

  Well that's all, nice work again! i hope you find this useful.

  1
• 

  Rajesh Janyani• 330

  @Rajesh7rj

  Submitted almost 2 years ago

  all feedback is welcome. first challenge after just completing html and css course.

  

  3-column-preview-card-component

  1

  2

  0

  

  Hadiza• 200

  @Thedeezat

  Posted almost 2 years ago

  Hey, Rajesh 👋

  Congrats on finishing your first project 👏

  Nice one on the project, I have a few suggestions i think can help.

  1. I think instead of using px you should use rem for a more accessible website
  2. You should also try checking out semantic html

  Well, that's all i hope it helps you along the way.

  Marked as helpful

  0

  This comment has received 2 repliesShow
• 

  Somnath Waghmare• 70

  @itssumo

  Submitted almost 2 years ago

  I am aware its not completely right like it suppose to be. Coudn't get the Image hover state right. I am trying to get back at css and web and submitting this solution so I am not stuck on this for long time. Perhaps In future after learning some more I'll get back to it.

  

  NFT Preview card component

  1

  3

  0

  

  Hadiza• 200

  @Thedeezat

  Posted almost 2 years ago

  Hello, somnath 👋

  Good work on finishing this challenge! i have a few suggestions i think can help.

  For the image hover effect i think you should try something like this, for the html

     <figure class="container">
        <span class="image_cover"></span>
        <img class="child-1" src="./images/image-equilibrium.jpg" alt="nft">
        <figcaption class="heading">
          <a href="#"> Equilibrium #3429</a>
        </figcaption>
      </figure>
  

  As long as the image element and the figcaption element is wrapped in the same container, it will be easier when styling to target any of the child's element for the hover effect.

  .container {
    position: relative;
  }
  .container:hover a {
    color: #00FFF8;
  }
  .child-1,
  .image_cover {
    opacity: 1;
    width: 100%;
    height: 200px;
    border-radius: 10px;
    position: relative;
    z-index: 1;
  }
  .container:hover .image_cover {
    position: absolute;
    z-index: 2;
    background-color: rgba(0, 255,  248,  .5);
  }
  

  And also, i think you should check out 👉 semantic html

  Well that's it, nice work again! i hope this helps.

  Marked as helpful

  0

  This comment has received 2 repliesShow
• 

  Tejeshwer Singh Sachdeva• 30

  @Tejeshwer25

  Submitted almost 3 years ago

  Can anyone please help me with the bottom right pattern, because I am unable to find an optimal property to set the pattern?

  

  Please Review the Profile Card Solution

  1

  1

  0

  

  Hadiza• 200

  @Thedeezat

  Posted almost 3 years ago

  Hey Tejeshwer Singh Sachdeva 👋

  I was unable to check your code in github, i think you should check what's wrong but i inspected it and i think instead of using the container::before you should try this:

  .container {
     background-image: 
      url('./images/bg-pattern-top.svg'),
      url('./images/bg-pattern-bottom.svg');
     background-position: top, left, bottom, right;
  }
  

  I also had similar issues with this and i got help which really helped alot i hope it does the same for you 😀.

  0
• 

  Marcus Hugo• 365

  @marcus-hugo

  Submitted almost 3 years ago

  How do I make the horizontal line thinner like the design? How did I do with the background and drop shadow?

  

  profile card using HTML, CSS, and Flexbox

  2

  1

  1

  

  Hadiza• 200

  @Thedeezat

  Posted almost 3 years ago

  Hey Marcus 👋,

  Nice work on this challenge. Both layout in desktop and mobile is pretty good and for the background i think you did a good job in the background positioning 👍.

  I think for the horizontal line you can try this:

  <span class = 'horizontal-line'></span>

  .horizontal-line {
     width: 100%;
     height: 0.1rem;
     background: hsla(0, 0%, 59%, 0.3);
  }
  

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Vanza Setia• 27,855

  @vanzasetia

  Submitted almost 3 years ago

  Hello Everyone! 👋

  I was doing this challenge on my Android phone. Hopefully, it looks good on your deskop. 😅

  Of course, any feedback is appreciated!

  That's it! Happy coding everyone!

  

  Fylo Data Storage Component HTML5 CSS3 Sass

  #bem#sass/scss

  2

  7

  1

  

  Hadiza• 200

  @Thedeezat

  Posted almost 3 years ago

  Hey vanza setia 👋

  This looks amazing in both desktop and ipad 👍, it's fascinating that u did this with an Android phone keep up the good job 👏.

  Can you please recommend any good tutorial for sass the one i found wasn't really helpful?

  0

  This comment has received 2 repliesShow
• 

  sym28• 20

  @sym28

  Submitted almost 3 years ago

  to vertically position the profile image between two elements, I used position: absolute on the image element along with top/left/bottom, and position relative on the parent container.

  Is there an alternative way I can position the image perfectly in the middle without having to eyeball top/bottom/left/right values?

  

  grid, flexbox

  3

  1

  0

  

  Hadiza• 200

  @Thedeezat

  Posted almost 3 years ago

  Hey,

  I just recently tried this challenge and i used position absolute. i got help from @vanzasetia about using background positioning which i think will also be easier for you.

  More information about background positioning, you can try to check this 👉 video

    background-image: 
      url('../images/bg-pattern-top.svg'),
      url('../images/bg-pattern-bottom.svg');
    background-position: top left, bottom right;
  } 
  

  And instead of height: 100%; i think u should use height: 100vh; cause when making an element span the full height of a page it's best to use vh.

  Marked as helpful

  2

  This comment has received 3 repliesShow