All comments

• 

  koyada karunakar•40

  @karunakar900Submitted over 2 years ago

  faced difficulty ,while setting the positions of 'music-icon' and link of 'change'

  

  html and css

  2

  50
  

  Ali Nemat•180

  @AliNemattPosted over 2 years ago

  Hi KOYADA KARUNAKAR, congratulations for your solution!

  you faced with problem because of your HTML. It seems that your code is automatically generated because you there is some unnecessary HTML tags! try to use flexbox for your design it will become easier . For Example : HTML :

  <div class="container">
     /// Your other elements (image + title + description & ... )
  </div>
  

  CSS :

  .container {
     display : flex;
     justify-content: center;
     flex-direction: column:
  }
  

  and for your problem : HTML :

  <div class="music-box">
     <div class="left">
        <img src="" alt="#" class="music-icon">
        <div class="texts">
          <h2 class="annual">Annual Plan</h2>
          <span>$59.99/year</span>
        </div>
     </div>
     <a href="#">cancel</a>
  </div>
  

  CSS :

  .music-box{
     display : flex;
     justify-content: space-between;
     align-items: center;
     padding: 1.5rem;
     border-radius: 10px;
  }
  .left{
     display : flex;
     gap : 10px;
     align-items:center;
  }
  .left img{
     width: 45px;
     height: 45px;
  }
  //and other required Styles!
  

  Hope it helps you! Wish you the best.

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  Benjamin Mancuello•40

  @Mancux2premiumSubmitted over 2 years ago

  I'm not sure how to make the html, do I put too many div? what do you think?

  

  utilice HTML y CSS base.

  3

  70
  

  Ali Nemat•180

  @AliNemattPosted over 2 years ago

  Hi Benjamin, congratulations for your solution!

  I saw your code and I have some recommends for you!

  1. It is customary to use style.css for main stylesheet , So it's better to use style.css instead of index.css.
  2. It's not necessary to use same codes for responsivity! for responsive design just change the variable property . for example: if your width in desktop is same with mobile just skip it! and remember that always style desktop at the first!
  3. about your HTML , containerQr & containerImg & containerParrafos aren't important. for example : HTML :

    <div class="mainContainer">
          <img src="images/image-qr-code.png" alt="Qr">
          <h1>Improve your front-end skills by building projects</h1>
          <p> Scan the QR code to visit 
            Frontend Mentor and take your 
            coding skills to the next level</p>
    </div>   
  

  and your CSS :

      body {
          background-color:var(--Lightgray);
          height: 100vh;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          font-size: 10px;
          font-weight: 700;
          font-family:'Outfit', sans-serif;
          text-align: center;
          color: var(--Darkblue);
      }
      .mainContainer{
          background-color: var(--White);
          border-radius: 12px;
          display: flex;
          align-items: center;
          flex-direction: column;
          width: 300px;
          height: 480px;
      }
  

  Hope it helps you! Wish you the best.

  Marked as helpful

  0