All comments

• 

  Alejandro Ramírez• 300

  @alejatraveler98

  Submitted over 3 years ago

  Is there a better way for the slider event? I appreciate your feedback. Thanks :D

  

  Room Homepage Using Sass

  2

  3

  0

  

  Alejandro Ramírez• 300

  @alejatraveler98

  Posted over 3 years ago

  Hello! ApplePie, thanks for your comments, I will add it to the project, I just can't quite understand what you mean by the extra white space on the page, well maybe it's because of the browser in which the project is probe (Firefox) that I don't see that space

  0
• 

  Aygulio• 75

  @aokdirova

  Submitted almost 4 years ago

  I am not sure why my triangle is moving to the right when I submit solution. When I code and check it on my laptop it looks Ok. Please, help..

  

  Mobile first HTML,CSS

  2

  1

  0

  

  Alejandro Ramírez• 300

  @alejatraveler98

  Posted almost 4 years ago

  Well what I modified in the HTML was that I separated the element with the class "triangle" from the element with the class "container-triangle". Class "triangle" add last element to div with class "container"

  <div class="container">
        <div class="left-container">
          <div class="logo">
            <img src="./images/logo.svg" alt="icon representing a logo">
          </div>
  
          <div class="icons">
            <div class="icon-1">
              <img src="./images/icon-document.svg" alt="icon representing a document" />
            </div>
            <div class="icon-2">
              <img src="./images/icon-folder.svg" alt="icon representing folder">
            </div>
            <div class="icon-3">
              <img src="./images/icon-upload.svg" alt="icon representing upload">
            </div>
          </div>
        </div>
  
        <div class="right-container">
          <div class="text">
            <h3>You’ve used <span>815 GB</span> of your storage</h3>
          </div>
          <div class="gradient-container">
            <div class="gradient">
              <div class="ending-point">
  
              </div>
            </div>
          </div>
  
          <div class="bottom-text">
            <div>
              0 GB
            </div>
  
            <div>
              1000 GB
            </div>
          </div>
        </div>
  
        <div class="floating-container">
          <div class="floating">
          <div>
          <h1>185</h1>
        </div>
        <div>
          <h3>GB LEFT</h3> 
        </div>
        </div>
      </div>
  <div class="triangle"></div>
      
    </div>
  
  

  In the CSS of the class "triangle just add a margin-left:38px

  .triangle {
        
       width: 0px;
       height: 0px;
       margin-left:38px;
       border-left: 20px solid transparent;
       border-right: 20px solid var(--pale-blue);
       border-top: 20px solid var(--pale-blue);
       border-bottom: 20px solid transparent;
       transform: translate(-329%, -150%);
    }
  

  Maybe it is not the best way but I hope it helps you

  0

  This comment has received 1 replyShow