Skip to content
OverviewSolutions
12
Comments
8

Atul kumar

@AtulKumar0001200 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Atul kumar•200
    @AtulKumar0001

    Hey @vij6 The first thing I want to say is that you should learn about some media queries so that you can create responsive pages. And if there is only one heading on your page, rather than using h2, use h1 first, and then you can use other heading levels.

  • Atul kumar•200
    @AtulKumar0001

    Hey @Ritesh-Virulkar, To do so, add the class image-2 (or change the name, but then you must also change the CSS selector name provided below) to the div where you have placed your desktop header.jpg, and then apply this after adding the class.

    .image-2{

        width: 50%;

        position: relative;

        background-color: hsl(277, 64%, 61%);

        opacity: 1;

    }

    After that, add another class to your img selector -> img  (you can change this as well) and apply this style.

    .img {

        display: block;

        object-fit: cover;

        min-width: 100%;

        opacity: .75;

        mix-blend-mode: multiply;

    }

    Marked as helpful
  • Atul kumar•200
    @AtulKumar0001

    Hola, @saitraru Consulte esta página para obtener más información sobre el margen y el relleno.

    https://blog.hubspot.com/website/css-margin-vs-padding#:~:text=In%20CSS%2C%20a%20margin%20is,the%20space%20inside%20an%20element.

    Y hay un error de validación html en su archivo index.html. Debe corregir su <bod> a <body>.

  • Atul kumar•200
    @AtulKumar0001

    Hey there, @Jacwilalasey If I understand correctly, the answer to your first query, "How can you avoid the overflowing content," is either by reducing the font size and margin or padding you have provided inside your cards, or by simply increasing the size of your cards.

    Your second question is a little unclear to me.

    The third question's response is that you can use the styling listed below if you want to give each of your cards a different border-radius and you have to give each of your cards a different class.

    border-top-left-radius: ;

    border-top-right-radius: ;

    border-bottom-right-radius: ;

    border-bottom-left-radius: ;

    Additionally, you can employ short-hand properties.

    border-radius:(first value for top-left radius) (second value for top right radius) (third value for bottom-right radius) (fourth value for bottom-left radius);

    e.g : bottom-radius: 2px 10px 10px 20px;

    I will give you a link to learn more about border-radius. https://www.w3schools.com/cssref/css3_pr_border-radius.asp I hope this helps you.

    Marked as helpful
  • Atul kumar•200
    @AtulKumar0001

    Hey Dylan, I have a solution for your bg-pattern that you were unable to set in the background. You can replace your body in the style.css file with the code I have given below. I hope this is going to help you.

    body {

    font-family: 'Kumbh Sans', sans-serif;

background: url(images/bg-pattern-top.svg), url(images/bg-pattern-bottom.svg);

background-repeat: no-repeat, no-repeat;

background-position: bottom 40vh right 105vh, left 105vh top 50vh;

background-color: hsl(185, 75%, 39%);

    }

    Marked as helpful
  • Atul kumar•200
    @AtulKumar0001

    Hey Augustine Asare, I have a suggestion for you. Instead of using div, you should use other html tags like <header>,<section>,<footer>,<main> etc. because they are going to help you better in the long run and they are also much more preferable and helpful for screen readers. I will give you an article link where you can find more info about them and why not use Divs too much.

    https://www.w3schools.com/tags/ref_byfunc.asp

    https://dev.to/kenbellows/stop-using-so-many-divs-an-intro-to-semantic-html-3i9i

    And I have one more suggestion for you. You should read about how to link images in html. I will give you some info.

    1. / = Root directory.
    2. . = This location.
    3. .. = Up a directory.
    4. ./ = Current directory.
    5. ../ = Parent of current directory.
    6. ../../ = Two directories backwards.
View more comments