Hanana

Latest comments

• 

  hameedmodibbo•110

  @hameedmodibboSubmitted over 1 year ago

  

  single price grid component made with grid and flexbox

  1

  40
  

  Hanana•170

  @meantoesPosted over 1 year ago

  Hi, good job on completing this challenge🙌🏻

  I see that you used the wrong color for some sections, if you want to match the design, you can try them one by one until it matches.

  If you haven't, I suggest you use Live Server extension on VS Code to see how your code would look like, any browser works fine but I recommend you to use Firefox to live the code. It's my preference, I think it's more convenient, especially to inspect the page.

  I hope you find this helpful, have a nice day and happy coding⭐

  0
• 

  suisoh•10

  @ssuishSubmitted over 1 year ago

  

  QR code component

  3

  60
  

  Hanana•170

  @meantoesPosted over 1 year ago

  Hi! congrats on completing your first challenge⭐

  I have some recommendations for you

  • wrap your whole content with <main> tag, you can learn more about HTML semantic tags here
  • use relative units for margin, padding, width, and height. learn more about it here

  for resources, I recommend you to check Kevin Powell's YouTube Channel, he gives lots of tricks and tips about CSS. I also recommend Web Dev Simplified, this is my preference, I like the way he explained things.

  oh and, check this video from the CEO of Scrimba, you might become more comfortable in web dev after knowing those checklists.

  hope this helps, have a great day⭐ and happy coding🙌🏻

  2
• 

  FSKaura•10

  @FSKauraSubmitted over 1 year ago

  

  HTML: div, img, h1, p. CSS: font-size, border-radios, color, width.

  1

  00
  

  Hanana•170

  @meantoesPosted over 1 year ago

  hi! I see that GitHub can't read your code because of the way you name your file. Try to change your HTML file to index.html. I also recommend you rename your CSS file to style.css and reconnect it in your HTML file.

  You can also check the style-guide file given for background-color. Lastly, try to match the font-size to the design

  Don't forget to download this challenge's starter pack ⭐

  hope this helps, have a good day and keep going🙌🏻⭐

  0
• 

  Mohamed8754•50

  @Mohamed8754Submitted over 1 year ago

  

  prudect-card

  #animation

  1

  50
  

  Hanana•170

  @meantoesPosted over 1 year ago

  hi! congrats on completing the challenge⭐ I have some suggestions that might interest you,

  • wrap the whole content in the <main> tag instead of the div .container

  • use alt attribute for the perfume image

  for the css, use this trick to center the container

  • add these properties to your body element

      
      body {
          /* -- */
          display: flex;
          align-items: center;
          min-height: 100vh
      }
  
  

  • in the .container element, delete margin-top: 100px
  • Use relative units like em or rem for margin, padding, width, and height. here are some sources about CSS units, Relative and Absolute units in CSS and more complex source

  hope this helps

  Marked as helpful

  1
• 

  Aryan Dogra•170

  @aryandogra2003Submitted over 1 year ago

  

  Interactive card form using React

  #react

  1

  20
  

  Hanana•170

  @meantoesPosted over 1 year ago

  hi! congrats on finishing this challenge!

  I have some suggestions for the input type to match the design

  • edit its border and outline's width and color to make it lighter
  • give some space between the label and input-filed by giving a margin
  • create a grid for .exp-date (.month and .year) and CVC

  be sure to check style-guide.md file, it be easier for u to match the design.

  hope this helps🙌🏻 have a nice day⭐

  0
• 

  Andrei•560

  @XeotheosisSubmitted over 1 year ago

  

  Single Page Portfolio / React/EmailJS

  #react

  2

  30
  

  Hanana•170

  @meantoesPosted over 1 year ago

  hi! congrats on finishing this project!

  tbh, I have no idea how u write the code but if I can see the HTML file, I think u need more dividers for each section so u can set them with different sizes and displays.

  here's how I'd do it:

  • div for the hero:

  .hero {
  display: grid;
  grid-template-column: 2fr 1fr
  }
  

  • div for skills:

  .skills {
  display: flex;
  flex-wrap: wrap;
  }
  
  /* add class skill for each item */
  .skill {
  width: calc(100% / 2 - 20px); /* adjust for each screen sizes */
  }
  

  • div for projects' grid:

  .project-grid {
  display: grid;
  grid-template-column: 1fr 1fr; /* adjust for each screen sizes */
  }
  

  • div for contact and input (create two different grids for each):

  .contact {
  display: flex;
  flex-direction: row; /* adjust for each screen sizes */
  justify-content: space-between;
  }
  

  dont forget to add margin for each divs. or in the main-container if u put them in a container.

  hope this helps🙌🏻 have a great day⭐

  0