Skip to content
OverviewSolutions
11
Comments
2
Alejandro Ramírez
@alejatraveler98

All comments

  • Alejandro Ramírez•300
    @alejatraveler98Posted about 4 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
    @aokdirovaSubmitted over 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
    Alejandro Ramírez•300
    @alejatraveler98Posted over 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