Andrea's Craft - Layout

<!--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/Bo2VEyV.png');
background-size:cover;
}

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

h1{
margin: 0;
font-family: Playfair Display;
text-align: center;
font-weight: 100;
text-transform: uppercase;
color: #5a3636;
font-size: 56px;
margin-top: -22px;
}

h2{
margin: 0;
font-family: Playfair Display;
text-align: center;
font-weight: 100;
text-transform: uppercase;
color: #5a3636;
font-size: 20px;
margin-top:-15px;
}

b{
color:#000;
}


.container {
width:450px;
height:310px;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
overflow:hidden;
margin:auto;
color:#fff;
background:#fff;
padding:20px;
font-family: 'Abel', sans-serif;
}

#affies{
display:none;
}

#affies:target{
display:block;
width:450px;
height:110px;
position:absolute;
left:0;
right:0;
top:501px;
bottom:0;
overflow:auto;
margin:auto;
color:#fff;
background:#fff;
padding:20px;
font-family: 'Abel', sans-serif;
}

#updates{
display:none;
}

#updates:target{
display:block;
width: 207px;
height: 110px;
background: white;
padding: 20px;
font-family: 'Playfair Display';
font-size: 12px;
text-align: justify;
overflow: auto;
margin-bottom: 10px;
margin-top: -160px;
}

#owner{
display:none;
}

#owner:target{
display:block;
width: 207px;
height: 110px;
background: white;
padding: 20px;
font-family: 'Playfair Display';
font-size: 12px;
text-align: justify;
overflow: auto;
margin-bottom: 10px;
margin-top: -160px;
}

#orders{
display:none;
}

#orders:target{
display:block;
width: 207px;
height: 110px;
background: white;
padding: 20px;
font-family: 'Playfair Display';
font-size: 12px;
text-align: justify;
overflow: auto;
margin-bottom: 10px;
margin-top: -160px;
}

.leftSide{
width:200px;
height:200px;
display:inline-block;
vertical-align:top;
}

.rightSide{
width: 247px;
height: 200px;
display: inline-block;
vertical-align: top;
margin-right: -1;
}

.bottomBar{
width:450px;
height:50px;
background:#492b2a;
display:inline-block;
vertical-align:top;
margin-top:10px;
}

a.navigationalLinks:link, a.navigationalLinks:visited {
color: white;
padding: 14px 0px;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: 'Playfair Display', serif;
text-transform: uppercase;
margin-top: 0px;
font-size: 15px;
font-weight: 100;
width: 86px;
}

a.navigationalLinks:hover, a.navigationalLinks:active {
color: #1a1a1a;
}




a.affiliateLinks:link, a.affiliateLinks:visited {
color: white;
padding: 14px 0px;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: 'Playfair Display', serif;
text-transform: uppercase;
margin-top: 0px;
font-size: 15px;
font-weight: 100;
width: 146px;
margin-top: 10px;
background: #492b2a;
}

a.affiliateLinks:hover, a.affiliateLinks:active {
color: #1a1a1a;
}





a.tabLinks:link, a.tabLinks:visited {
color: #492b2a;
padding: 14px 0px;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: 'Playfair Display', serif;
text-transform: uppercase;
margin-top: -5px;
font-size: 15px;
font-weight: 100;
width: 80px;
}

a.tabLinks:hover, a.tabLinks:active {
color: #1a1a1a;
}


::-webkit-scrollbar-thumb:vertical {height:12px; background:#fff; border-top:10px solid #492b2a; border-bottom:10px solid #492b2a;}
::-webkit-scrollbar-thumb:horizontal {background-color:#fff;}
::-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">
<h1>Andrea's Craft</h1>
<div class="leftSide">
<img src="https://i.imgur.com/KaZ8Ki7.png" class="siteImage">
</div>

<div class="rightSide">
<div style="width: 207px; height: 110px; background: white; padding: 20px; font-family: 'Playfair Display'; font-size: 12px; text-align: justify; overflow: auto; margin-bottom: 10px;">
<h2>Welcome</h2>
Welcome message will go here and what not. Welcome message will go here and what not. Welcome message will go here and what not. Welcome message will go here and what not. Welcome message will go here and what not. Welcome message will go here and what not. Welcome message will go here and what not. Welcome message will go here and what not. Welcome message will go here and what not. Welcome message will go here and what not. Welcome message will go here and what not. Welcome message will go here and what not. Welcome message will go here and what not. Welcome message will go here and what not. Welcome message will go here and what not. Welcome message will go here and what not. Welcome message will go here and what not. Welcome message will go here and what not. Welcome message will go here and what not. Welcome message will go here and what not. Welcome message will go here and what not. Welcome message will go here and what not. Welcome message will go here and what not. Welcome message will go here and what not. Welcome message will go here and what not. Welcome message will go here and what not. Welcome message will go here and what not. Welcome message will go here and what not. Welcome message will go here and what not. Welcome message will go here and what not. Welcome message will go here and what not. Welcome message will go here and what not. Welcome message will go here and what not. Welcome message will go here and what not. Welcome message will go here and what not. Welcome message will go here and what not. Welcome message will go here and what not.
</div>
<div id="updates">
<div style="width: 207px; text-align: right; margin-top: -17px; margin-bottom: 10px;"><a href="#close" style="font-family:Playfair Display; color:#000; font-size:12px;">x</a></div>
<h2>site updates</h2>
<b>00.00</b> the update will go here <br>
<b>00.00</b> the update will go here <br>
<b>00.00</b> the update will go here <br>
<b>00.00</b> the update will go here <br>
<b>00.00</b> the update will go here <br>
<b>00.00</b> the update will go here <br>
<b>00.00</b> the update will go here <br>
<b>00.00</b> the update will go here <br>
<b>00.00</b> the update will go here <br>
<b>00.00</b> the update will go here <br>
<b>00.00</b> the update will go here <br>
</div>

<div id="owner">
<div style="width: 207px; text-align: right; margin-top: -17px; margin-bottom: 10px;"><a href="#close" style="font-family:Playfair Display; color:#000; font-size:12px;">x</a></div>
<h2>site oiwner</h2>
owner welcome message here and what not. owner welcome message here and what not. owner welcome message here and what not. owner welcome message here and what not. owner welcome message here and what not. owner welcome message here and what not. owner welcome message here and what not. owner welcome message here and what not. owner welcome message here and what not. owner welcome message here and what not. owner welcome message here and what not. owner welcome message here and what not. owner welcome message here and what not. owner welcome message here and what not. owner welcome message here and what not. owner welcome message here and what not. owner welcome message here and what not. owner welcome message here and what not. owner welcome message here and what not. owner welcome message here and what not.
</div>

<div id="orders">
<div style="width: 207px; text-align: right; margin-top: -17px; margin-bottom: 10px;"><a href="#close" style="font-family:Playfair Display; color:#000; font-size:12px;">x</a></div>
<h2>current orders</h2>
<b>customer</b> - talk about the order will go here. <br>
<b>customer</b> - talk about the order will go here. <br>
<b>customer</b> - talk about the order will go here. <br>
<b>customer</b> - talk about the order will go here. <br>
<b>customer</b> - talk about the order will go here. <br>
<b>customer</b> - talk about the order will go here. <br>
<b>customer</b> - talk about the order will go here. <br>
<b>customer</b> - talk about the order will go here. <br>
<b>customer</b> - talk about the order will go here. <br>
<b>customer</b> - talk about the order will go here. <br>
<b>customer</b> - talk about the order will go here. <br>
<b>customer</b> - talk about the order will go here. <br>
<b>customer</b> - talk about the order will go here. <br>
<b>customer</b> - talk about the order will go here. <br>
</div>

<div style="width:247px; height:40px; background:#fff;">
<a href="#updates" class="tabLinks">updates</a>
<a href="#owner" class="tabLinks">owner</a>
<a href="#orders" class="tabLinks">orders</a>
</div>
</div>


<div class="bottomBar">
<a href="/home.php" class="navigationalLinks" style="margin-top:2px;">home</a>
<a href="/send_message.php?member_id=" class="navigationalLinks">message</a>
<a href="/status_stream.php?member_id=" class="navigationalLinks">stream</a>
<a href="/view_member_blog.php?member_id=" class="navigationalLinks">content</a>
<a href="#affies" class="navigationalLinks">affies</a>
</div>
</div>


<div id="affies">
<h2>Affiliates</h2>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
</div>


</body>
</html>