<!DOCTYPE html>
<html lang="">
<head>
<title>Profil | PhilBook</title>
</head>
<style>
#blue_bar{
height: 50px;
background-color: #405d9b;
color: #d9dfeb;
}
#search_box{
width: 400px;
height: 20px;
border-radius: 5px;
border: none;
padding: 4px;
font-size: 14px;
}
#profile_pic{
width: 150px;
border-radius: 50%;
border: solid 2px white;
}
#menu_buttons{
width: 100px;
display: inline-block;
margin: 2px;
}
#friends_img{
width: 75px;
float: left;
margin: 8px;
}
#friends_bar{
background-color: white;
min-height: 400px;
margin-top: 20px;
color: #aaa;
padding: 8px;
}
#friends{
clear: both;
font-size: 12px;
font-weight: bold;
color: #405d9b;
}
textarea{
width: 100%;
border: none;
font-family: Tahoma, serif;
font-size: 14px;
height: 60px;
resize: none;
}
#post_button{
float: right;
background-color: #405d9b;
border: none;
color: white;
padding: 4px;
font-size: 14px;
border-radius: 2px;
width: 50px;
}
#post_bar{
margin-top: 20px;
background-color: white;
}
</style>
<body style="font-family: Tahoma,serif; background-color: #d0d8e4;">
<br>
<!--top bar -->
<div id="blue_bar">
<div style="margin: auto; width: 800px; font-size: 30px;">
PhilBook     <label for="search_box"></label><input type="text" id="search_box" placeholder="Suche nach Personen">
<img src="selfie.jpg" style="width: 50px; float: right; margin-bottom: 10px;" alt="Bild">
</div>
</div>
<!--cover-->
<div id="content" style="width: 800px; margin: auto; min-height:400px;">
<div style="background-color: white; text-align: center; color: #405d9b">
<img src="mountain.jpg" style="width: 100%;" alt="Bild">
<img src="selfie.jpg" id="profile_pic" alt="Bild"><br>
<div style="font-size: 20px;">Mary Bender</div>
<br>
<div id="menu_buttons">Zeitleiste</div>
<div id="menu_buttons">Über</div>
<div id="menu_buttons">Freunde</div>
<div id="menu_buttons">Fotos</div>
<div id="menu_buttons">Einstellungen</div>
</div>
<!-- below -->
<div style="display: flex;">
<!--freunde-->
<div style="min-height: 400px;flex:1;">
<div id="friends_bar">
Freunde <br>
<div id="friends">
<img src="user1.jpg" id="friends_img" alt="BILD">
<br>
Erster Nutzer
</div>
<div id="friends">
<img src="user2.jpg" id="friends_img" alt="Bild">
<br>
Zweiter Nutzer
</div>
<div id="friends">
<img src="user3.jpg" id="friends_img" alt="Bikld">
<br>
Dritter Nutzer
</div>
<div id="friends">
<img src="user4.jpg " id="friends_img" alt="Bild">
<br>
Vierter Nutzer
</div>
</div>
</div>
<!--posts-->
<div style="min-height: 400px; flex: 2.5; padding: 20px 0 20px 20px;">
<div style="style="/*! border: solid thin #aaa; */ /*! padding: 10px; */ /*! background-color: white */""> </div>
<label>
<textarea placeholder="Was möchtest du sagen?"></textarea>
</label>
<input type="submit" id="post_button" value="Posten">
<br>
</div>
<!-- postsvonanderen-->
<div id="post_bar">
<div id="post">
<div>
<br> <br><br><br><br><br>-+<br><img src="user1.jpg" style="width: 75px;">
</div>
<div>
</div>
</div>
</div>
</body>
</html>
