Skip to content
OverviewSolutions
17
Comments
9

Nemanja NIkolic

@nmnjnklcKragujevac, Serbia270 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Nemanja NIkolic•270
    @nmnjnklc

    I found out what is happening with bug I mentioned in question. It says that form.reset() method restores a form element's default values. Even though I did not set default values, it saved last typed values. Setting input value to empty string solved the problem.

  • Nemanja NIkolic•270
    @nmnjnklc

    Hello @bajra03,

    Try removing background properties from all media queries except general body css and this should work:

      background-image: 
                    url(./images/bg-pattern-top.svg),
                    url(./images/bg-pattern-bottom.svg);
  background-repeat: 
                    no-repeat, 
                    no-repeat;
  background-position: 
                    right 52vw bottom 35vh, 
                    left 48vw top 52vh;

    Happy coding!

  • Nemanja NIkolic•270
    @nmnjnklc

    Hello @yathishg,

    there is no need for margins to center a div or some other element. Just add these properties to its parent element and you are good. For your particular situation:

    body {
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
}

    This will also fix width problem on that card. Note that without that height: 100vh property, card would be horizontally centered, but not vertically. Centering card like does not require additional margins, widths, heights etc. to element.

    Hope this helps. Happy coding!

    Marked as helpful
  • Nemanja NIkolic•270
    @nmnjnklc

    Hello @leoweabo,

    Instead of unordered lists (<ul>), try something like this for HTML:

    <div class="statistics">
        <div class="followers">
          <span>80K</span>
          <p>Followers</p>
        </div>
        <div class="likes">
          <span>803K</span>
          <p>Likes</p>
        </div>
        <div class="photos">
          <span>1.4K</span>
          <p>Photos</p>
        </div>
</div>

    and to get that proper design, CSS would be:

    .statistics {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     padding: 1rem;
     border-top: 1px solid #9696964f;
}
.followers,
.likes,
.photos {
     min-width: 6rem;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
}

    Hope this helps. Happy coding!

    Marked as helpful
  • Nemanja NIkolic•270
    @nmnjnklc

    Hello @funupulu,

    You could wrap his age with <span> tag in order to target it in CSS. So HTML should look something like this:

    <section class="row-1">
<h2>Victor Crest <span>26</span></h2>
      <p>London</p>
</section>

    and to target that particular <span> you can either give it a class/id, or:

    section.row-1 h2 span {
      font-weight: 400;
      color: #6a6f81;
}

    To get those background patterns in place, try adding following css to your body:

    body {
     background-image: 
                 url(./images/bg-pattern-top.svg),
                 url(./images/bg-pattern-bottom.svg);
     background-repeat: 
                 no-repeat, 
                 no-repeat;
     background-position: 
                 right 52vw bottom 35vh, 
                 left 48vw top 52vh;
}

    Hope this helps. Happy coding!

    Marked as helpful
  • Nemanja NIkolic•270
    @nmnjnklc

    To get that mobile design, try it like this:

    <div class="illustration-container">
        <img class="mobile" src="./images/illustration-woman-online-mobile.svg">
        <img class="desktop" src="./images/illustration-box-desktop.svg">
</div>

    and the css would be:

    .illustration-container {
  width: 50%;
  position: relative;
  min-height: 32.88rem;
  background-image: 
       url(./images/illustration-woman-online-desktop.svg),
       url(./images/bg-pattern-desktop.svg);
  background-position: 
       left -5.2rem top 5.8rem, 
       left -36rem top -16.8rem;
  background-repeat: 
       no-repeat, 
       no-repeat;
}
.illustration-container img {
  position: absolute;
  top: 14.3rem;
  left: -6rem;
}
@media only screen and (max-width: 375px) {
    .illustration-container img.desktop {
          display: none;
     }
    .illustration-container img.mobile {
          display: block;
          position: absolute;
          top: -6.6rem;
          left: 0;
    }
    .illustration-container {
         position:relative;
         background-image: url(./images/bg-pattern-mobile.svg);
         background-position: left 0rem top 0vh;
         background-repeat: no-repeat;
         background-size: contain;
         width: 80%;
         min-height: 8rem;
    }
}

    Hope this helps. Happy coding!

    Marked as helpful
View more comments