Skip to content
OverviewSolutions
5
Comments
8

Hadiza

@ThedeezatNigeria200 points

I’m Hadiza, with a passion to bring ideas to life using web technologies.

I’m currently learning...

React, Node js

Latest solutions

Latest comments

  • Hadiza•200
    @Thedeezat

    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
  • Hadiza•200
    @Thedeezat

    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.

  • Hadiza•200
    @Thedeezat

    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
  • Hadiza•200
    @Thedeezat

    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
  • Hadiza•200
    @Thedeezat

    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 😀.

  • Hadiza•200
    @Thedeezat

    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
View more comments