Skip to content
OverviewSolutions
7
Comments
6
MOHAMAD NAZIR MD NAZRI
@NAZIRwill29

All comments

  • MOHAMAD NAZIR MD NAZRI•180
    @NAZIRwill29Posted over 2 years ago

    Hi @lucasfernandodev

    It was really great website. How do you make the hover effect for the menu-link? Do you make it change the menu-link::after?

    I just have one suggestion for you:

    • better add animation: transition for navigation after and before the click event so it will make the smooth transition.
    0
  • MOHAMAD NAZIR MD NAZRI•180
    @NAZIRwill29Posted over 2 years ago

    @RTX3070 awesome website.

    The desktop view are not functioning, should change @media screen and (min-width: 1440px) to @media screen and (min-width: 600px). The 1440px will never be trigger because the it is max view for desktop. Make it 600px because it is the size for mobile view. @media (min-width: 1440px) mean the style will apply for size view > 1440px.

    Marked as helpful
    1
  • MOHAMAD NAZIR MD NAZRI•180
    @NAZIRwill29Posted over 2 years ago

    @patrickbasamot

    That was really great.

    div card should be wrapped in <main>. It is best practice to wrap content in <main>.

    For hover to show icon-view.svg, you can make <div> wrap icon-view.svg and background color cyan to the <div>. Make it hover manipulate z-index rather than opacity.

    Marked as helpful
    0
  • Travolgi 🍕•31,400
    @denieldenSubmitted over 2 years ago

    Hi frontEnder :)

    This is my solution with SASS module, css Grid and Vanilla javascript.

    I have deepened the use of SASS focusing on splitting into modules and reusing code through mixins and variables. I got more familiar with the Mobile-first approach and with the Grid css.

    Also I added Login and Sign Up modals and initially had problems with centering because using flex the modal was centered in the center of the whole page and not in the center of the visible screen, but then I fixed it using display: fixed combined with old style alignment preceding flex and grid.

    BUT

    In adding modals, however, I was unable to remove that tremendous positioning effect you notice when modals are opened and centered on the screen.

    Open to feedback on how to fix it 😁

    Thank you for taking the time to check out my project and happy coding!

    Sass modules & Vanilla js Blogr Landing page

    5
    MOHAMAD NAZIR MD NAZRI•180
    @NAZIRwill29Posted over 2 years ago

    Hi deniel,

    your website really awesome.

    I really love the profile picture and attribution.

    But, for mobile-nav-toggle, it is better to make it in div rather than in the image.

    HTML:

    <div class="container" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

    CSS:

    .container {
  display: inline-block;
  cursor: pointer;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}

/* Rotate first bar */
.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
  transform: rotate(-45deg) translate(-9px, 6px) ;
}

/* Fade out the second bar */
.change .bar2 {
  opacity: 0;
}

/* Rotate last bar */
.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
  transform: rotate(45deg) translate(-8px, -8px) ;
}

    javascript:

    function myFunction(x) {
  x.classList.toggle("change");
}
    Marked as helpful
    0
  • MOHAMAD NAZIR MD NAZRI•180
    @NAZIRwill29Posted over 2 years ago

    awesome design

    0
  • MOHAMAD NAZIR MD NAZRI•180
    @NAZIRwill29Posted over 2 years ago

    Thank you for the feedback.

    1