profile.php



<!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: 120px;
 background-color: white;
 float: left;
 }


</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 &nbsp &nbsp <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>
 <img src="user1.jpg" style="width: 75px;">
 </div>

 </div>


 </div>

</body>


</html>