Untitled

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {box-sizing: border-box;}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #e9e9e9;
}

.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #2196F3;
  color: white;
}

.topnav .search-container {
  float: right;
}

.topnav input[type=text] {
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
}

.topnav .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.topnav .search-container button:hover {
  background: #ccc;
}

@media screen and (max-width: 600px) {
  .topnav .search-container {
    float: none;
  }
  .topnav a, .topnav input[type=text], .topnav .search-container button {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;
  }
}
</style>


<body>


<div class="w3-container">

    <div class="w3-sidebar w3-bar-block w3-collapse w3-card w3-animate-left" id="mySidebar" style="width: 10%">

         <div class="search-container">
             <form action="/action_page.php">
               <div class="w3-row">
                 <input class="w3-col" type="text" placeholder="Search.." name="search" style="width:85%;">
                 <button class="w3-col" type="submit" style="width:15%;"><i class="fa fa-search"></i></button>
               </div>
             </form>
        </div>

        <button onclick="myFunction('Demo1')" class="w3-btn w3-block w3-black w3-left-align">Open Section 1</button>
        <div id="Demo1" class="w3-container w3-hide">
          <h4>Section 1</h4>
          <p>Some text..</p>
        </div>
        <button onclick="myFunction('Demo2')" class="w3-btn w3-block w3-black w3-left-align">Open Section 2</button>
        <div id="Demo2" class="w3-container w3-hide">
          <h4>Section 1</h4>
          <p>Some text..</p>
        </div>
    </div>

    <div class="w3-center" style="margin-left: 10%;">

      <div class="w3-center" style="padding-left: 10%; padding-right: 10%;">
        <header class="w3-container w3-blue">
          <h3>Amazon</h3>
        </header>

        <br>

        <div style="padding-left: 10%;padding-right: 10%;">
          <div class="w3-card-4">
            <header class="w3-container w3-light-grey">
              <h3>John Doe</h3>
            </header>
            <div class="w3-container">
              <br>
              <img src="img_avatar3.png" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="width:60px">
              <p>CEO at Mighty Schools. Marketing and Advertising. Seeking a new job and new opportunities.</p><br>
            </div>
            <div class="w3-row">
              <button class="w3-button w3-block w3-blue w3-col" style="width:50%;">View Profile</button>
              <button class="w3-button w3-block w3-green w3-col" style="width:50%;">Refer Me</button>
            </div>
          </div>
        </div>

        <br>

        <div style="padding-left: 10%;padding-right: 10%;">
          <div class="w3-card-4">
            <header class="w3-container w3-light-grey">
              <h3>John Doe</h3>
            </header>
            <div class="w3-container">
              <br>
              <img src="img_avatar3.png" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="width:60px">
              <p>CEO at Mighty Schools. Marketing and Advertising. Seeking a new job and new opportunities.</p><br>
            </div>
            <div class="w3-row">
              <button class="w3-button w3-block w3-blue w3-col" style="width:50%;">View Profile</button>
              <button class="w3-button w3-block w3-green w3-col" style="width:50%;">Refer Me</button>
            </div>
          </div>
        </div>
      </div>

      <br><br>

      <button class="w3-button w3-blue" onclick="expand()">Expand</button>


    </div>
</div>


<script>
function w3_open() {
  document.getElementById("mySidebar").style.display = "block";
}

function w3_close() {
  document.getElementById("mySidebar").style.display = "none";
}

function myFunction(id) {
  var x = document.getElementById(id);
  if (x.className.indexOf("w3-show") == -1) {
    x.className += " w3-show";
  } else {
    x.className = x.className.replace(" w3-show", "");
  }
}
</script>

</body>
</html>