Skip to content
OverviewSolutions
5
Comments
8
Hadiza
@Thedeezat

All comments

  • Carlos H.•90
    @KrossBRSubmitted over 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
    Hadiza•200
    @ThedeezatPosted over 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
  • Raymond Visser•80
    @HalaszraymondSubmitted over 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
    Hadiza•200
    @ThedeezatPosted over 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
  • Hadiza•200
    @ThedeezatPosted over 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
  • Somnath Waghmare•70
    @itssumoSubmitted over 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
    Hadiza•200
    @ThedeezatPosted over 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
  • Hadiza•200
    @ThedeezatPosted over 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
  • Hadiza•200
    @ThedeezatPosted over 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
  • Vanza Setia•27,775
    @vanzasetiaSubmitted over 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

    2
    Hadiza•200
    @ThedeezatPosted over 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
  • sym28•20
    @sym28Submitted over 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
    Hadiza•200
    @ThedeezatPosted over 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