Skip to content
OverviewSolutions
10
Comments
18

Cacti

@nottohave390 points

I'm here to learn.

Latest solutions

View more solutions

Latest comments

  • Cacti•390
    @nottohave

    Hola Rolando, como estas? Nice work on completing the challenge. I tested your solution on my laptop. The design can look better on a range of screen sizes if you can make these improvements:

    body { display: flex; justify-content: center; align-items: center; min-height: 100vh; }

.contenedor { display: flex; width: 1000px; height: 400px; }

/* Keep these in your tarj, remove the rest */
.tarj_principal {
 border-radius: 15px; background-color: #1C1938; display: flex;
}

/* I'm skipping the next blocks of code */
/* for .tarj_text2 and text_final { remove position absolute and bottom: 250px } Try margin-top and margin-bottom. Read more on margin MDN */

.imagen01 {
 /* Update and keep these: border-radius: 15px; background-size: cover; height: 100%; width: 450px; display: flex; justify-content: flex-end */
}
.imagen01 img { /* just change width & height: 100% */ }
    • For semantic HTML, you can change h5 to p. Wrap h2 and p in <section> instead of repeatedly using div.

    Try these on and let me know how the desktop design looks. I hope it removes the extra paddings, place the right image on full height and give you more control on the text position. Let me know if they don't work out for you. I hope you can get more feedback to improve.

    Keep it up! Nice work!

    Marked as helpful
  • Cacti•390
    @nottohave

    Hey @Sebastian, your solution looks pretty good! The website is responsive to all range of screen sizes and the layout as well. Your code is also easy to read. It has semantic HTML. Everything looks great from my end. I think you can improve by constructing a throughout README using frontendmentor template. It can definitely improve your skill on writing documentation. Keep up the great work!

    Marked as helpful
  • Cacti•390
    @nottohave

    Hi Caio De Alcantara, great work on finishing the challenge. I tested the responsiveness and it looked good on Mobile and Desktop. For your grid concern on Desktop view, you should redefine :

    • the grid-template ... to grid-template-colums: (repeat(2, 22rem));
    • grid-template-areas: "card1 card1" "card2 card3" "card4 card4";
    • Remove grid-column and grid row start in .card1 . card2 .card3
    • change .card3 {grid-area: card2} to card3

    You can test this on the Dev tools before changing your code to see how it works.

    Let me know if this helps :D Have a great one.

    Marked as helpful
  • Cacti•390
    @nottohave

    Hi Sebastian, the website looks great on my devices. It is responsive and has great layout. Your index file has semantic HTML. The code is well-structured and readable. I think there are a couple of improvements you can make, let me know if they help you:

    • In larger screen, you can add more padding to the logo on the top : header img {margin: 45px 0px}. This is just a preference, you can use a different unit if needed to.
    • For the error label, there is another approach instead of using JS DOM. You can take a look at this video class list. I hope it will give you an idea of creating a class in Style file. Then you use your JS email validation to add and remove the Class List. This is to display and remove the error label. This method is a lot more simplified and versatile.

    Have a great weekend, and let me know if these tips help you. Thank you :D

    Marked as helpful
  • Cacti•390
    @nottohave

    Hey superset1607, nice work on completing the profile card challenge. I think I have found the solution to your background. In you CSS code, you should add another background, adjust background-position and let me know if it works.

    /* Add your desired background color to the page. I used Yellow as a preference.*/
html {
    background-color: lightyellow; 
}

/* Add your circles and position them */
body {
  background-image: url(./Assets/images/bg-pattern-top.svg), **url(./Assets/images/bg-pattern-bottom.svg)** ;
   background-position: right 50vw bottom 40vh, left 50vw top 50vh;
   background-repeat: no-repeat;
}

    Credits:

    Let me know if this helps :)

  • Cacti•390
    @nottohave

    Hi Gamel Ayodele, I am unsure what you want to have feedbacks on? I took a look at your website and I have a few suggestion about your web design.

    1. You may want to use border-radius to round corner. You can read it here border-radius.

    2. Try line-height on your paragraphs. line height

    Let me know if it helps. Have a great one!

View more comments