Looking to customize my home page by adding a profile picture on the left side of the navigation panel. Can anyone guide me on achieving this using only HTML and CSS, without the need for JavaScript?
I want the image to be displayed at the top left corner of the webpage, but I've been struggling to make it work after multiple attempts.
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>