How to place the image TOP Right under the navbar?

I'm currently learning the basics of HTML and CSS and I wanna try to practice and to make some research when I get some troubles. Now I wanted to style the landing page just like in this screenshot I made but I didnt't found how to place the image under the navbar. I could use the power of photoshop and insert it in background but I think I can do in css that withouth making background basically an image. Don't judge me if I wrote something too wrong but I tried to think it before copy and paste from somewhere. That's my entire code. I hope somebody can help me to place that image where I want. Thank you so much in advance and don't kill me please :)

:root {
    --color-dark: #1C2126;
    --color-green: #185858;
    --color-hoverlinks: #576471;
    --color-light: #BFADA3;
    --color-accent-light: #A65C41;
    --color-accent-dark: #733F2D;
    --color-white: #fff;
}

html {
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Raleway', 'Montserrat';
    background-color: var(--color-dark);
}

a {
    text-decoration: none;
}

li {
    list-style: none;
}

/* NAVBAR STYLING STARTS */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background: var(--color-dark);
    color: var(--color-white);


}

.nav-links a {
    color: #fff;
}

.logo img {
    height: 40px;

}

/* NAVBAR MENU */
.menu {
    font-family: 'Montserrat';
    display: flex;
    gap: 1.5em;
    font-size: 50px;
    z-index: 2;
}

.menu li a:hover {
    color: var(--color-accent-light);

    transition: 0.3s ease;
}

.menu li {
    padding: 5px 14px;
}

input[type=checkbox] {
    display: none;
}

/*HAMBURGER MENU*/
.hamburger {
    display: none;
    font-size: 24px;
    user-select: none;
}

/* APPLYING MEDIA QUERIES */
@media (max-width: 768px) {
    .menu {
        display: none;
        position: absolute;
        background-color: teal;
        right: 0;
        left: 0;
        text-align: center;
        padding: 16px 0;
    }

    .menu li:hover {
        display: inline-block;
        background-color: #4c9e9e;
        transition: 0.3s ease;
    }

    .menu li li {
        margin-top: 12px;
    }

    input[type=checkbox]:checked~.menu {
        display: block;
    }

    .hamburger {
        display: block;
    }

    .dropdown {
        left: 50%;
        top: 30px;
        transform: translateX(35%);
    }

    .dropdown li:hover {
        background-color: #4c9e9e;
    }
}





.landing_h1 {
    font-size: 120px;
    color: var(--color-green);
}

.landing_h3 {
    font-size: 90px;
    color: var(--color-white);
    font-weight: lighter;
}

.landing_image{
    display:inline;
    justify-content: right;
    align-items: right;
    z-index: -1;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/style.css" />
    <title>RAWNDY</title>
</head>

<body>
    <img src="images/landingpage_picture.jpg" alt="Landing Image" >
    <nav >
        <!-- LOGO -->
        <div ><a href="index.html"><img src="images/logo.png" alt=""></a></div>
        <!-- NAVIGATION MENU -->
        <ul >
            <!-- USING CHECKBOX HACK -->
            <input type="checkbox" id="checkbox_toggle" />
            <label for="checkbox_toggle" >&#9776;</label>
            <!-- NAVIGATION MENUS -->
            <div >
                <li><a href="index.html">Home</a></li>
                <li><a href="portofolio.html">My Work</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </div>
        </ul>
    </nav>

    <section  id="landing">
        <div >
            <div >
                <h1 >NICOLAE ANDONE</h1> <br>
                <h3 >Portrait photographer & <br> FrontEnd Developer</h3>
            </div>

        </div>


    </section>

</body>

</html>

CodePudding user response：

You can do this by turning the page into a flexbox/grid to ensure responsiveness, then adding a left shadow to the image (if you want the shadow)

CodePudding user response：

You mean like this?? Just change your img its on the body.

:root {
    --color-dark: #1C2126;
    --color-green: #185858;
    --color-hoverlinks: #576471;
    --color-light: #BFADA3;
    --color-accent-light: #A65C41;
    --color-accent-dark: #733F2D;
    --color-white: #fff;
}



html {
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Raleway', 'Montserrat';
    background-image: url("https://icatcare.org/app/uploads/2018/06/Layer-1704-1200x630.jpg");
    background-size:cover;
    background-repeat:no-repeat;
    
}

a {
    text-decoration: none;
}

li {
    list-style: none;
}

/* NAVBAR STYLING STARTS */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    color: var(--color-white);
   

}

.nav-links a {
    color: #fff;
}

.logo img {
    height: 40px;

}

/* NAVBAR MENU */
.menu {
    font-family: 'Montserrat';
    display: flex;
    gap: 1.5em;
    font-size: 50px;
    z-index: 2;
}

.menu li a:hover {
    color: var(--color-accent-light);

    transition: 0.3s ease;
}

.menu li {
    padding: 5px 14px;
}

input[type=checkbox] {
    display: none;
}

.landing_image {
    display:flex;
    justify-content:right;
    }

/*HAMBURGER MENU*/
.hamburger {
    display: none;
    font-size: 24px;
    user-select: none;
}

/* APPLYING MEDIA QUERIES */
@media (max-width: 768px) {
    .menu {
        display: none;
        position: absolute;
        background-color: teal;
        right: 0;
        left: 0;
        text-align: center;
        padding: 16px 0;
    }

    .menu li:hover {
        display: inline-block;
        background-color: #4c9e9e;
        transition: 0.3s ease;
    }

    .menu li li {
        margin-top: 12px;
    }

    input[type=checkbox]:checked~.menu {
        display: block;
    }

    .hamburger {
        display: block;
    }

    .dropdown {
        left: 50%;
        top: 30px;
        transform: translateX(35%);
    }

    .dropdown li:hover {
        background-color: #4c9e9e;
    }
}





.landing_h1 {
    font-size: 120px;
    color: var(--color-green);
}

.landing_h3 {
    font-size: 90px;
    color: var(--color-white);
    font-weight: lighter;
}

.landing_image{
    display:inline;
    justify-content: right;
    align-items: right;
    z-index: -1;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/style.css" />
    <title>RAWNDY</title>
</head>

<body>
    
    <nav >
        <!-- LOGO -->
        <div ><a href="index.html"><img src="images/logo.png" alt=""></a></div>
        <!-- NAVIGATION MENU -->
        <ul >
            <!-- USING CHECKBOX HACK -->
            <input type="checkbox" id="checkbox_toggle" />
            <label for="checkbox_toggle" >&#9776;</label>
            <!-- NAVIGATION MENUS -->
            <div >
                <li><a href="index.html">Home</a></li>
                <li><a href="portofolio.html">My Work</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </div>
        </ul>
    </nav>
    <section  id="landing">
        <div >
            <div >
                <h1 >NICOLAE ANDONE</h1> <br>
                <h3 >Portrait photographer & <br> FrontEnd Developer</h3>
            </div>

        </div>


    </section>

</body>

</html>