CODEWITHSUNDEEP
htmlcss
Shresth Gour
Shresth Gour

Reputation: 117

How to add a profile picture in header of my website

I want to add a profile picture on the left side of the home in the navigation panel can anyone tell me how can I do that without javascript just using HTML and CSS
I want a picture on the top left part of the webpage and I tried many time and can't figure out how
Thank You
--------------------------------------------------------------------------------------
Code:

<!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">
    <title>PS 2</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }

        header{
            background-color: black;
            color: white;
            position: sticky;
            top: 0;
        }
        ul{
            padding: 19px;
        }
        li{
            list-style: none;
            display: inline;
            padding: 0 53px;
            font-size: 33px;
        }
        .container{
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            justify-content: space-between;
        }
        .left{
            background-color: red;
            height: 80vh;
            width: 40vw;
        }
        .right{
            background-color: blue;
            height: 80vh;
            width: 40vw;
        }
    </style>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li>Home</li>
                <li>About</li>
                <li>Contact Us</li>
            </ul>
        </nav>
    </header>
    <div class="container">
        <div class="left">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis consequuntur porro recusandae beatae, debitis sapiente, adipisci nostrum voluptate pariatur veniam, aliquid iusto consequatur nemo quidem. Quia eveniet fugit mollitia tempora harum eligendi modi natus?
            </p>
        </div>
        <div class="right">
            <p>
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim, totam sapiente unde quos, quia dolor et natus tenetur, nesciunt tempora cum. Facilis laboriosam quas consectetur, placeat adipisci consequuntur consequatur cupiditate deserunt veritatis odit natus delectus tempore possimus, aspernatur ex amet quaerat vero sequi praesentium inventore. Facere distinctio magni, praesentium modi nemo sit quibusdam laudantium molestiae. Provident.
            </p>
        </div>
    </div>
</body>
</html>

My webpage looks like this

Upvotes: 0

Views: 690

Answers (3)

Adam
Adam

Reputation: 5909

I've made your nav a flex container and used a div to place your image on the lhs of your navbar. The image is placed in the center of the div using grid and place-items:center.

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

header {
  background-color: black;
  color: white;
  position: sticky;
  top: 0;
}

nav {
  display: flex;
  padding: 1rem 2rem;
}

.image {
  flex: 0 1 auto;
  display: grid;
  place-items: center;
}

.image>img {
  width: 4rem;
}

ul {
  padding: 19px;
}

li {
  list-style: none;
  display: inline;
  padding: 0 53px;
  font-size: 33px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
}

.left {
  background-color: red;
  height: 80vh;
  width: 40vw;
}

.right {
  background-color: blue;
  height: 80vh;
  width: 40vw;
}
<header>
  <nav>
    <div class="image"><img src="https://www.fillmurray.com/500/500"></div>
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Contact Us</li>
    </ul>
  </nav>
</header>
<div class="container">
  <div class="left">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis consequuntur porro recusandae beatae, debitis sapiente, adipisci nostrum voluptate pariatur veniam, aliquid iusto consequatur nemo quidem. Quia eveniet fugit mollitia tempora harum eligendi
      modi natus?
    </p>
  </div>
  <div class="right">
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim, totam sapiente unde quos, quia dolor et natus tenetur, nesciunt tempora cum. Facilis laboriosam quas consectetur, placeat adipisci consequuntur consequatur cupiditate deserunt veritatis odit
      natus delectus tempore possimus, aspernatur ex amet quaerat vero sequi praesentium inventore. Facere distinctio magni, praesentium modi nemo sit quibusdam laudantium molestiae. Provident.
    </p>
  </div>
</div>

Upvotes: 2

Bojan Tomić
Bojan Tomić

Reputation: 1085

Add a list element in the header.

            <ul>
                <li><img src="https://smaller-pictures.appspot.com/images/dreamstime_xxl_65780868_small.jpg" alt="Girl in a jacket" width="50" height="50"></li>
                <li>Home</li>
                <li>About</li>
                <li>Contact Us</li>
            </ul>

Upvotes: 0

c.m.
c.m.

Reputation: 326

change your css header to

header{
        background-color: black;
        color: white;
        position: sticky;
        top: 0;
        display: flex;
        align-items: center;
    }

and add the class

.header-img {
        width: 50px;
        height: 50px;
        background-color: red;
        margin: 10px;
    }

and now you can add in your html header

<img class="header-img" src=""/>

in src="" you can chose the path of your img

Upvotes: 0

Related Questions