Skip to content
OverviewSolutions
8
Comments
7
Yousef Attia
@Deeperr0

All comments

  • Yousef Attia•310
    @Deeperr0Posted 2 months ago

    Firstly good job for completing the task. All I can suggest is that you remove the outline from the input field in the settings when changing the times I see you have tried doing that but for some reason it didnt work for me, so you can use outline:none instead

    <input class="w-1/2 bg-transparent text-sm font-bold outline-none focus-visible:outline-1" id="pomodoro" type="number" name="pomodoro">

Otherwise great work!
    0
  • Yousef Attia•310
    @Deeperr0Posted 2 months ago

    Honestly great job. I do not have any comments. If anything just the image of the artist is a bit off but otherwise everything is great. Great work.

    0
  • Yousef Attia•310
    @Deeperr0Posted 2 months ago

    First of all good job finishing this task. So a few things I noticed are that you didn't add hover states as required by the design. You also have some problems with the fonts. Also try to space the navbar a bit further away from the top of the screen to align more with the design.

    Marked as helpful
    1
  • Alex 🤸🏻‍♂️•960
    @sksksk2024Submitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    That I did my first intermediate challange all by myself and its not even the easiest one in my opinion!! It's not done yet, but I'll comeback to it after I end the learning path and the tutorial of this challange :)

    What challenges did you encounter, and how did you overcome them?

    Organising and keeping everything in place(especially the relative/absolute objects)

    What specific areas of your project would you like help with?

    Any advice in keeping everything in place and other stuff that you may consider helpful for a learner to become pro at frontend development! Thanks in advance! 😊

    Looooooooooooong bookmark landing page using Tailwind CSS

    1
    Yousef Attia•310
    @Deeperr0Posted 2 months ago

    Positioning and Styling the Soft Blue Div

    First of all, great job on completing the task! I see that you had some difficulty positioning the soft blue div behind the image. Here are some key points to help you:

    Understanding position: absolute

    The position: absolute property positions an element relative to its nearest positioned ancestor. If the ancestor does not have position: relative (or another position value), the element will be positioned relative to the initial containing block. Using position: relative on the ancestor is often the easiest approach as it doesn't affect the flow of the document.

    Positioning Tips

    You used bottom and left properties to position the element. However, positioning it from the bottom-right might be more straightforward.

    border-radius Basics

    The border-radius property can be used to round corners of an element. Here’s how it works:

    • One value: border-radius: 8px; applies a radius of 8px to all four corners.
    • Two values: border-radius: 8px 4px; applies 8px to the top-left and bottom-right corners, and 4px to the top-right and bottom-left corners.
    • Three values: border-radius: 8px 6px 4px; applies 8px to the top-left, 6px to the top-right and bottom-left, and 4px to the bottom-right corner.

    The values follow a clockwise order starting from the top-left corner: border-radius: top-left top-right bottom-right bottom-left;.

    Making the Div Rounded

    To achieve a fully rounded appearance on the left side of the soft blue div:

    1. Set the border-radius for the top-left and bottom-left corners to a very large value (Think 1000px).
    2. For example: border-radius: 1000px 0 0 1000px;.

    This will make the left side of the div completely rounded. Apply the same technique to the other soft blue div in the features section.

    Your soft-blue class css would look something like this in the end for it to be positioned properly. I am not sure of its responsiveness but use it as a guide

    @media (min-width: 63em) {
    .main__part1 .soft-blue {
        background-color: var(--Soft-blue);
        border: .125rem solid var(--Soft-blue);
        border-radius: 1000px 0 0 1000px;
        bottom: 0;
        display: flex;
        height: calc(15rem + 4vw);
        right: 0;
        margin-bottom: -11.25rem;
        position: absolute;
        width: 50%;
        z-index: -1;
        margin-left: 10%;
    }
}
    Marked as helpful
    1
  • Peter Godspower•620
    @TheBeyonder616Submitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I was able to make a slider that monitor 2 slides

    What challenges did you encounter, and how did you overcome them?

    making the slider work in sync

    What specific areas of your project would you like help with?

    Any advice would do

    Responsive landing page made interactive with JavaScript

    1
    Yousef Attia•310
    @Deeperr0Posted 2 months ago

    Good job on getting the slider to do that. That's quite cool. However, the fact that the slider also highlights the nav links does not make sense in this context as the sliders do not relate to the nav links but again that was quite cool. One more thing is that your webpage doesn't fill the whole page and seems to be centered in a box instead. This may be because I am using a bigger screen so that means you have a problem with the responsiveness. You are probably using fixed values. Opt for using percentages, flex or grid for better responsiveness and test your website on a variety of screens.

    Marked as helpful
    0
  • Peter Godspower•620
    @TheBeyonder616Submitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I was able to get the design right

    What challenges did you encounter, and how did you overcome them?

    Getting the right aspect ratio for the mobile image

    What specific areas of your project would you like help with?

    Any advice would do

    Responsive landing page created using JavaScript

    1
    Yousef Attia•310
    @Deeperr0Posted 2 months ago

    Great work! However maybe you can add a little bit of padding-top to your header. That way the navbar wont be very close to the top of the screen. So your css would look more like this .header { padding-top: 60px; min-height: 100vh; background-size: cover; background-color: rgba(0, 0, 0, 0.1); background-blend-mode: multiply; background: none; transition: background 0.5s cubic-bezier(0.075, 0.82, 0.165, 1); }

    Marked as helpful
    0
  • Yousef Attia•310
    @Deeperr0Posted 2 months ago

    Hello, I have noticed that you have not used any CSS in your project. I recommend that you use CSS as it gives your website that styling that it needs to achieve something closer to that required by the design. At first use normal CSS, once you are comfortable with it you can opt for more advanced options such as SASS or TailwindCSS which make the process much faster and easier. While you can jump right into using TailwindCSS it is better to know how to use normal CSS for more customization and just in case.

    Marked as helpful
    0