I am making a project for school where we were going to design a sort of chat app, I decided that i'd really like to make something like the discord display since it's very commonly used (skype, slack etc all look alike in some way, shape or form, thus I proceeded to make a wireframe which looks like this, https://ibb.co/KGmM7ZJ here's what I currently got, https://ibb.co/YN7wftG I know this question asks a different thing but I am also wondering how I can have black lines going the full way e.g 100% height and or 100% width depending on if it's vertical or horizontal. Thanks.
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">
<link rel="stylesheet" href="css/main.css">
<title>Dsqord</title>
</head>
<body>
<!-- Logo -->
<header>
<div class="msg-target">
<img src="img/avatar.png">
<h1>Mohammed</h1>
<span class="target-status">Cool status!</span>
<p style="font-weight: bold;">@mohammed32</p>
</div>
<div>
<img class="logo" src="img/logo.png">
<br>
<input type="search" placeholder="Search for conversations">
</div>
</header>
<!-- Recent conversations -->
<div class="recent-conversations">
<div class="conversation">
<img src="img/avatar.png">
<div>
<h3>Mohammed</h3>
<p>Jag: Hejsan hur mår du?</p>
</div>
</div>
<div class="conversation">
<img src="img/avatar.png">
<div>
<h3>Mohammed</h3>
<p>Jag: Hejsan hur mår du?</p>
</div>
</div>
<div class="conversation">
<img src="img/avatar.png">
<div>
<h3>Mohammed</h3>
<p>Jag: Hejsan hur mår du?</p>
</div>
</div>
</div>
<!-- -->
</body>
</html>
body {
margin: 0%;
padding: 0%;
}
/* Global */
/* Header
logo-search {
display: flex;
flex-direction: row;
} */
/* Logo */
.logo {
margin-left: 1%;
width: 6.5%;
}
/* Input search*/
header input[type=search] {
width: 15%;
margin-left: 1%;
padding: 1%;
border: none;
}
/* Message target */
.msg-target {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* Profile picture */
.msg-target img {
width: 20%;
}
/* Recent Conversations */
.recent-conversations {
display: flex;
flex-direction: column;
margin-left: 1%;
}
/* Flexbox item */
.conversation {
display: inline-flex;
}
/* Profile Picture */
.conversation img {
width: 5%;
}
/* Display name */
.conversation h3 {
}
/* Recent message */
.conversation p {
}
