Skip to content
OverviewSolutions
20
Comments
2
Carlos Rubio
@CarlosRubio9827

All comments

  • Carlos Rubio•330
    @CarlosRubio9827Posted over 3 years ago

    Hello, the calculator application looks good, but the maximum height should be 100vh, so that it does not go off the screen of the device and it does not have to be scrolled.

    0
  • Shiryumee•210
    @Shiryu790Submitted over 3 years ago

    Hi everyone, there are some problems on this challenge, the mobile menu is not good, because I don't know the javascript yet and I didn't arrange in the right order with flexbox on the mobile version. But I will progress and change these mistakes. Good day to all

    Flexboox

    1
    Carlos Rubio•330
    @CarlosRubio9827Posted over 3 years ago

    Excuse me for my writting in English, but dont is my native languaje. Hi, in the section of menu you have to use javascript and a property of css that don't is common In the part of HTML, after of tag "<body>", you should put this (it have of be the first after tag body):

    <section class="menu"> <ul> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Projects</a></li> <li class="menu-contact"><a href="#">Contact</a></li> </ul> </section> In the CSS, is important that use the property position: absolute and opacity: 0, and the keyframes is for the transitions. ".menu{ position: absolute; background: var(--White); height: 430px; width: 89vw; top: 110px; left: 0; right: 0; margin: auto; opacity: 0; } .menu-desactive{ animation: example1 1s linear forwards; } @keyframes example1 { 0%{ opacity: 1; } 100%{ opacity: 0; } } .menu-active{ animation: example 1s linear forwards; } @keyframes example { 0%{ opacity: 0; } 100%{ opacity: 1; } } .menu::before{ position: absolute; content:""; width: 0px; height: 0px; top: -25px; right: 0px; border-top: 50px solid transparent; border-left: 50px solid transparent; border-right: 50px solid var(--White); }" And in the javascript, you have to access al DOM and add event to the element that have the class hamburger-menu: This part of HTML is for the first section, I add the images in CSS. " <section class="orange"> <p class="orange-title">sunnyside</p> <span class="orange-menu"></span> <p class="orange-description">WE ARE CREATIVES</p> <span class="orange-arrowDown"></span> </section>" " const orangeMenu = document.querySelector('.orange-menu'); orangeMenu.addEventListener('click', ()=>{ const menu = document.querySelector('.menu'); if(menu.classList.contains('menu-active')){ menu.classList.remove('menu-active'); menu.classList.add('menu-desactive'); }else{ menu.classList.add('menu-active'); menu.classList.remove('menu-desactive'); } })"
    1