Custom Order - Bar Harbor - Members Page

<!--about me-->
<link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');

body {
background-color:#232426;
background-repeat:no-repeat;
background-attachment:fixed;
margin: 0;
overflow:auto;
background-image:url('https://i.imgur.com/sEBmlXB.jpg');
background-size:cover;
}

table, tr, td, li, p, div, .profileInfo td.text {
    font-size: 12px;
    color: #fff;
    font-family: 'Playfair Display', sans-serif;}


.container {
width:800px;
height:700px;
position:absolute;
left:0;
right:0;
top:0;
overflow:hidden;
margin:auto;
color:#fff;
background-color:#0c0c0c;
font-family: 'Abel', sans-serif;
}


a.naavigation:link, a.naavigation:visited {
    background-color: #0c0c0c;
    width: 153px;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-family: Playfair Display;
    font-size: 14px;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-left: 2px;
    font-weight: 100;
    margin-top: -32px;
}

a.naavigation:hover, a.naavigation:active {
color: #fff;
letter-spacing: 5px;
}




a.members:link, a.members:visited {
    background-color: #4c4939;
    width: 153px;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-family: Playfair Display;
    font-size: 14px;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-left: 2px;
    font-weight: 100;
    padding: 10px 0px;
    margin-bottom:2px;
}

a.members:hover, a.members:active {
color: #0c0c0c;
}




b {
    background: #303030;
    padding: 5px;
    line-height: 35px;
}

h1 {
    font-family: 'Playfair Display';
    font-weight: 100;
    text-transform: uppercase;
    color: #fff;
    background: #4c4939;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    text-align: center;
}

h2 {
    font-family: 'Playfair Display';
    font-weight: 100;
    text-transform: uppercase;
    color: #fff;
    background: #4c4939;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    text-align: center;
}

h3 {
color: #4c4939;
    font-weight: 100;
    text-align: center;
    margin: 0;
    font-size: 35px;
    margin-bottom: 10px;
}



::-webkit-scrollbar-thumb:vertical {height:12px; background:#0c0c0c; border-top:10px solid #4c4939; border-bottom:10px solid #4c4939;}
::-webkit-scrollbar-thumb:horizontal {background-color:#0c0c0c;}
::-webkit-scrollbar {width:5px; height:7px;}


.contacttable, .whitetext12, .nametext, .lightbluetext8, .orangetext15, .blacktext12, .btext, .redtext, .redbtext {display:none;height:0px;!important;visibility:hidden} td td td td {border:0px;width:0px;text-align:left;} table, td, tr {padding:0px;width:;background-color:transparent} table table table {padding:1px;height:.01%;width:100%;} table table,table table table table,table,tr,td {height:0px;!important;border:0px;!important} a.text, table div font a, .navbar font, tr td font {visibility:hidden;display:none;height:0px;!important;} #footerWarpper{display: none;} table table table table,table table table table td.text, td.text td.text table{display:none;} td.text table table{display:inline;visibility:visible;} table td table tr td.text table{visibility:hidden;} table td table tr td.text table table,table td table tr td.text table table td.text{visibility:visible;} table.footer {display: none;} div table a.navbar img {display:none;} div table.navigationBar {margin-bottom:-30px;} .profileInfo {display:none;} .profileInfo td {text-align:left;} .profileInfo a img {position:relative; margin-bottom:-1px; margin-bottom:-2px; width:125px; margin-right:-6px; margin-top:4px; _margin-top:3px; display:block;} .profileInfo td td, .nametext, .msOnlineNow img {display:none;} .profileInfo td td.text {display:table-cell; _display:inline;} .profileInfo .text {font-size:7px; line-height:8px; text-transform:uppercase; font-family:small fonts;} .msOnlineNow {font-family:small fonts; letter-spacing:0px; font-size:7px; line-height:8px; padding:2px; padding-left:0px; text-transform:uppercase; font-weight:normal; display:none; text-decoration:blink; letter-spacing:2px;} .userAlbums {display:none;} div td {display:none;} </span>
</style>











<!--like to meet-->
<html>
<body>
<div class="container">
<img src="https://i.imgur.com/bbSTOoK.png">
<center>
<a href="/home.php" class="naavigation">Home</a>
<a href="/send_message.php?member_id=###" class="naavigation">Message</a>
<a href="/status_stream.php?member_id=###" class="naavigation">Stream</a>
<a href="/status_stream.php?member_id=###" class="naavigation">Content</a>
<a href="/status_stream.php?member_id=###" class="naavigation">Main Page</a>
</center>


<div style="width:760px; height:225px; margin-top:20px; margin-bottom:20px; padding-left:20px; padding-right:20px; overflow:auto; text-align:center;">
<h3>Our Current Members</h3>
<a href="/" class="members">First<br>Last</a>
<a href="/" class="members">First<br>Last</a>
<a href="/" class="members">First<br>Last</a>
<a href="/" class="members">First<br>Last</a>
<a href="/" class="members">First<br>Last</a>
<a href="/" class="members">First<br>Last</a>
<a href="/" class="members">First<br>Last</a>
<a href="/" class="members">First<br>Last</a>
<a href="/" class="members">First<br>Last</a>
<a href="/" class="members">First<br>Last</a>
<a href="/" class="members">First<br>Last</a>
<a href="/" class="members">First<br>Last</a>
<a href="/" class="members">First<br>Last</a>
<a href="/" class="members">First<br>Last</a>
<a href="/" class="members">First<br>Last</a>
<a href="/" class="members">First<br>Last</a>
<a href="/" class="members">First<br>Last</a>
<a href="/" class="members">First<br>Last</a>
<a href="/" class="members">First<br>Last</a>
<a href="/" class="members">First<br>Last</a>
<a href="/" class="members">First<br>Last</a>
<a href="/" class="members">First<br>Last</a>
<a href="/" class="members">First<br>Last</a>
<a href="/" class="members">First<br>Last</a>
<a href="/" class="members">First<br>Last</a>
<a href="/" class="members">First<br>Last</a>
<a href="/" class="members">First<br>Last</a>
<a href="/" class="members">First<br>Last</a>
<a href="/" class="members">First<br>Last</a>
<a href="/" class="members">First<br>Last</a>
<a href="/" class="members">First<br>Last</a>
</div>

<div style="width: 450px; height: 278px; padding-left: 20px; padding-right: 20px; color: #fff; display: inline-block; vertical-align: top; margin-top:20px; margin-bottom:20px; overflow:auto;">
<h1>The group plot</h1>
Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque commodo tortor ante, sed consequat nulla ultrices sit amet. Integer ornare aliquet metus, vitae volutpat dui bibendum eu. Integer eget eleifend ipsum. Aliquam tristique orci non facilisis lobortis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras sagittis vehicula sollicitudin.
<br><br>
Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque commodo tortor ante, sed consequat nulla ultrices sit amet. Integer ornare aliquet metus, vitae volutpat dui bibendum eu. Integer eget eleifend ipsum. Aliquam tristique orci non facilisis lobortis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras sagittis vehicula sollicitudin.
<br><br>
Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque commodo tortor ante, sed consequat nulla ultrices sit amet. Integer ornare aliquet metus, vitae volutpat dui bibendum eu. Integer eget eleifend ipsum. Aliquam tristique orci non facilisis lobortis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras sagittis vehicula sollicitudin.
<br><br>
Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque commodo tortor ante, sed consequat nulla ultrices sit amet. Integer ornare aliquet metus, vitae volutpat dui bibendum eu. Integer eget eleifend ipsum. Aliquam tristique orci non facilisis lobortis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras sagittis vehicula sollicitudin.
</div>

<div style="width: 266px; height: 278px; /* padding: 20px; */ color: #fff; display: inline-block; vertical-align: top; padding-right: 20px; margin-top: 20px; margin-bottom: 20px; padding-left: 20px; text-align: justify; overflow: auto;">
<h2>Member of the month</h2>
<img src="https://i.imgur.com/uJ9iYma.png" align="left"> <b>Name</b> here <br>
<b>month</b> here <br>
<b>Comments about the member</b> Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque commodo tortor ante, sed consequat nulla ultrices sit amet. Integer ornare aliquet metus, vitae volutpat dui bibendum eu. Integer eget eleifend ipsum. Aliquam tristique orci non facilisis lobortis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras sagittis vehicula sollicitudin.

</div>


</div>
</body>
</html>