Skip to content
OverviewSolutions
1
Comments
5
Mauro Aguilar
@mauro1998

All comments

  • Mauro Aguilar•70
    @mauro1998Posted over 2 years ago

    I think you can achieve that background (in desktop mode) by playing with the background-size and background-position properties but you'd need to change your layout a little bit in some layers:

    First, I'd make that header a fixed element:

    .header {
    position: fixed;
    top: 0;
    background: #fff;
    height: 5rem;
    width: 100%;
    z-index: 1000;
    ...
}

    Next, I'd limit the height of the first section:

    .section--next {
    background-color: var(--Very-Light-Gray);
    height: 60vh;
    position: relative;
}

    Then, I'd start laying out the background images, removing the <img> and using ::before and ::after pseudo elements to render the images:

    .section--next__img {
    position: relative;
    width: 100%;
    height: 100%;
}

.section--next__img::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0; // align to the right
    width: 35rem; // set a fixed width to work with
    height: 100%;
    background-image: url(./images/bg-intro-desktop.svg);
    background-size: 60rem; // play around til you get the desired size
    background-position: -50px -115px; // play around til you get the desired position
    background-repeat: no-repeat;
}

.section--next__img::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0; // align to the right
    width: 35rem; // set the same width as ::before
    height: 120%; // add 20% of additional height on this one
    background-image: url(./images/image-mockups.png);
    background-repeat: no-repeat;
    background-size: 35rem; // play around til you get the desired size
    background-position: 95px 0px; // play around til you get the desired position
}

    and lastly I'd put the text of the first section on top of the background images:

    .section--next__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.77rem;
    justify-content: center;
    position: absolute;
    z-index: 20;
    padding-top: 5rem;  // padding-top same height as the header 
    padding-left: 9.16rem;
    width: 100%;
    height: 100%;
}
    Marked as helpful
    0
  • Mauro Aguilar•70
    @mauro1998Posted over 2 years ago

    Well done!

    You can center the green underline of the links no matter the size of the link by doing this:

    .nav__link:hover::before {
    ...
    right: 0;
    left: 0;
    margin: auto;
}
    Marked as helpful
    0
  • Mauro Aguilar•70
    @mauro1998Posted over 2 years ago

    I also noticed that your rounded avatar image is not displaying correctly when setting the background-image property.

    Try adding the following properties to .main__pic class:

    .main__pic {
    ...
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

    Other than that I think you did a very nice job, the component is looking so beautiful. Congrats!

    Marked as helpful
    0
  • Mauro Aguilar•70
    @mauro1998Posted over 2 years ago

    Hi @Hanka8

    It doesn't work because the nullity checks you are using in Javascript are not strong enough to take into account different scenarios where the response could be empty or falsy. Falsy values in javascript are those values that when evaluated the result is false (in an if condition for example).

    So values like "null", "undefined", an empty string (""), the number "0", "NaN", and the boolean value "false" are falsy values and may need to take them into account when writing conditions depending on the situation.

    This is your current code:

    //check if there is a blog
if (data.blog == null) {                  // !! data.blog could be any of the falsy values, not just "null"
        website.textContent = "Not Avaílable";
        website.classList.add("not--available");
} else {
        website.textContent = data.blog;
        website.classList.remove("not--available");
}

    The easiest and more generic way to check if a value is falsy in javascript is by negating it:

    if (!bar) {
  // bar is falsy
} else {
  // bar contains something
}

    So you could solve this bug doing something similar:

    if (!data.blog) {                  // now it will check if data.blog is "falsy" and not just "null"
        website.textContent = "Not Avaílable";
        website.classList.add("not--available");
} else {
        website.textContent = data.blog;
        website.classList.remove("not--available");
}

    But be careful with this approach, there might be situations where you'd like to be more specific, for example if you are expecting a number but the number is 0 (a valid number) then a condition like if (!num) { ... } might end up doing unexpected behaviors.

    Marked as helpful
    0
  • Nwaburu Emeka Christian•20
    @Christone007Submitted over 2 years ago

    I found it difficult to have total control over the positioning of my divs. Making it responsive was quite a challenge.

    Been a while since i completed any frontend project and i'm really rusty.

    I would like to see how someone else solved the challenge

    Product Preview page using HTML and CSS

    3
    Mauro Aguilar•70
    @mauro1998Posted over 2 years ago

    Hey Christian, congrats on completing the challenge. Here is a quick suggestion about how to define the dimensions of your container elements thinking on responsiveness and other good practices:

    I noticed that your div.content-card has the following styles:

    .content-card {
    border-radius: 15px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: 50%;
    transform: translate(-50%, -50%);
    width: 35%;
    height: 55%;
    background-color: #fff;
}

    1- Try not to use % for dimensions (widths and heights). If you want this element to be responsive, a better approach could be:

    .content-card {
    width: 100%;
    max-width: 400px; // set a desired max-width in px or even better in em/rem unit
}

    This way even if the screen size is bigger than 400px your element will always have a consistent width of 400px. Otherwise if the screen size is less than 400px it will adapt to the 100% of the space available because the max-width condition won't apply anymore which will make it responsive. This strategy is really easy to implement and you may not even need media queries.

    2- (optional) a good practice would be to separate the positioning styles (centering) from the other styles in a different class. This way you could easily:

    • Control when to center the container (if it was an actual application where you'd like to reuse the card component, it's very likely that you wouldn't want it to be centered by default, so instead you let the consumer center/position it).
    • Reuse this same class to center anything else, not just the card component (it becomes kind of a "util" class). Something like this:
    // this is just another approach for centering stuff using absolute positioning and margin: auto;
.element-xy-centered {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
    Marked as helpful
    1