So i am trying to recreate a instagram post page using html and css But i don't understand why justify content not working Also if there are any suggestions to do this faster or easy way pls let me know Also pls explain why does the justify content not work properly in this case.I tried many different variations but still am not able to figure out what's wrong it would be great if anyone can help
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Instagram View Page</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<nav>
<div class="logo">
<img src="/img/Instagram logo.png" width="103px" height="29px" alt="" />
<input type="text" placeholder="Search" class="search" />
</div>
<div class="navigation">
<ul>
<li>
<img src="/icons/home.svg" height="22px" width="22px" alt="" />
</li>
<li>
<img src="/icons/send.svg" height="22px" width="22px" alt="" />
</li>
<li>
<img src="/icons/compass.svg" height="22px" width="22px" alt="" />
</li>
<li>
<img src="/icons/user.svg" height="22px" width="22px" alt="" />
</li>
</ul>
</div>
</nav>
<div class="post">
<div class="postimage">
<img src="/img/Knowmad.jpg" alt="" />
</div>
<div class="post-details">
<div class="accountdetails">
<img src="/img/Knowmadlogo1.png" alt="" />
<div class="accountname">
<h2>knowmadin</h2>
<p>Everywhere</p>
</div>
</div>
<div class="links">
<a href="#">Follow</a>
</div>
<div class="features">
<div class="like">
<ul>
<li>
<img
src="/icons/heart(1).svg"
height="40px"
width="40px"
alt=""
/>
</li>
<li>
<img
src="/icons/comment.svg"
height="40px"
width="40px"
alt=""
/>
</li>
<li>
<img src="/icons/send.svg"
height="40px"
width="40px"
alt="" />
</li>
</ul>
</div>
<div class="bookmark">
<img src="/icons/bookmark.svg" height="40px" width="40px" alt="" />
</div>
</div>
</div>
</body>
</html>* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
nav {
display: flex;
min-height: 10vh;
flex-direction: row;
border-bottom: 1px solid rgba(var(--ce3, 239, 239, 239), 1);
}
.logo {
display: flex;
padding-left: 10rem;
flex: 1;
align-items: center;
justify-content: space-between;
}
.search {
height: 2.8vh;
width: 18vw;
justify-content: center;
align-items: center;
}
.navigation {
display: flex;
flex: 1;
}
.navigation ul {
padding-right: 10rem;
padding-left: 2rem;
display: flex;
list-style: none;
justify-content: space-between;
align-items: center;
flex: 1 1 40rem;
}
.post {
display: flex;
flex-direction: row;
margin-left: 7rem;
margin-right: 7rem;
margin-top: 3rem;
}
.postimage img {
width: 50vw;
display: flex;
flex: 1;
}
.post-details {
padding-left: 1rem;
display: flex;
flex-direction: row;
height: 10vh;
width: 100%;
align-items: center;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
border-bottom: 1px solid rgba(var(--ce3, 239, 239, 239), 1);
padding-bottom: 1rem;
}
.accountdetails {
align-items: center;
display: flex;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 80%;
padding-right: 1rem;
}
.accountdetails img {
display: flex;
padding-right: 1rem;
align-self: center;
}
.accountname {
display: flex;
flex-direction: column;
}
.links a {
padding-left: 1rem;
color: blue;
}
div:empty {
min-height: 60vh;
border-bottom: 1px solid rgba(var(--ce3, 239, 239, 239), 1);
}
.like {
position: absolute;
display: flex;
flex-direction: row;
bottom: 2rem;
}
.features {
display: flex;
flex-direction: row;
position: absolute;
bottom: 1rem;
}
.like ul {
display: flex;
flex-direction: row;
list-style: none;
flex: 1;
justify-content: space-between;
}
.bookmark {
position: absolute;
bottom: 1rem;
right: 1rem;
}
Aucun commentaire:
Enregistrer un commentaire