Skip to content
OverviewSolutions
4
Comments
3

Harshit Bhardwaj

@harshitBhardwaj9790 points

I believe that "Journey is ETERNAL, when the goal is INFINITE". Here to constantly learn and challenge myself for my overall betterment.

Latest solutions

Latest comments

  • Harshit Bhardwaj•90
    @harshitBhardwaj97

    Hi I saw your code and I believe you forgot to add the link or import for the Red Hat Display font.

    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;400;700&family=Red+Hat+Display:wght@400;700&display=swap" rel="stylesheet">

    Adding these lines inside head tag of your html should do the work, since in CSS file you already have specified the font-family (font-family: 'Red Hat Display')

    I hope you find this suggestion helpful and it solves your problem, Happy Coding !

  • Harshit Bhardwaj•90
    @harshitBhardwaj97

    Initially I also faced this problem when I used external .js file in my various projects and used script tag to link it, but based on my experience, I can say that the most common problem with this approach is that when we use script tag and give the path to our file, the .js file code is executed before our DOM is even loaded, leading to this problem. So you can try these 2 approaches and I believe you won't face this problem :-

    • Use defer keyword after script and before src, if you define your script path inside the head tag, like this :
    (script *defer* src="index.js")(/script)
    • Use the script tag at the end of body, which would ensure that all DOM content is loaded before execution of javascript code. In this case, defer keyword is not required.

    Here I used () instead of angular brackets with script tag because due to it my comment was not being parsed properly.I hope you find this suggestion helpful and it solves the problem that you were facing. Happy Coding !

  • Harshit Bhardwaj•90
    @harshitBhardwaj97

    I saw your code and found that you wrapped the entire code inside the class design-container and in gave it height of 650px :-

    .design-container {
    display : flex;
    align-items : center;
    height : 650px;
}

    You can refrain from restricting the height of parent container, and for centering the content vertically, you can use this approach :-

    .design-container {
    display : grid;
    place-content : center;
    min-height : 100vh;
}

    Or you can also do :-

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

    I hope you find this suggestion helpful and it solves your problem, Happy Coding !

    Marked as helpful