PAGE TITLE

<title>mood board: NAME</title>

<style>

#s-m-t-tooltip {max-width:200px; width:auto; padding:3px 5px; margin:5px 0px 0px 10px; background-color: #FFFFFF; font-family: calibri, arial; font-size:8px; line-height: 8px; letter-spacing:+1px; text-transform:uppercase; text-align: justify; color:#000000; z-index:999999999999999999; -moz-box-shadow: 1px 2px 1px rgba(0,0,0,.1); -webkit-box-shadow: 1px 2px 1px rgba(0,0,0,.1);}

.header2 {
  font-family:Oswald;
  font-size:16px;
  position:relative;
  z-index:1;
  width:100%;
  padding: 20px 0px 25px 0px;
  padding-top:40px;
  text-align:center;
  letter-spacing:1px;
  background:#fff;
}

.header2:before {
  position:absolute;
  z-index:-1;
  top:45px;
  right:0;
  bottom:0;
  left:0;
  width:95%;
  margin:0 auto;
  content:'';
  border-top:1px solid #000000;
}

.header2 span {
  padding:0 15px;
  background:#fff;
}

a, a:visited, a:active {
color: #B90303;
text-decoration: none;
}

body, td {
font-family: 'Unica One';
font-size: 10px;
line-height: 16px;
letter-spacing: 1px;
font-weight: none;
color: #000;
text-shadow: 0px 0px 1px #000;
text-transform: uppercase;
background-color: #eee;
background-image: url('https://www.transparenttextures.com/patterns/brushed-alum-dark.png');
}

.bw:hover {-webkit-transition-duration: .3s; -webkit-filter: grayscale(100%);}

.title {
font-family: 'architects daughter'; 
font-size:50px; letter-spacing:-4px; 
line-height:30px; 
color:#000000; 
text-shadow: 0px 1px 1px #fff021;
}

.title2 {
font-family: Great Vibes; 
font-size: 40px; 
line-height: 40px; 
letter-spacing:1px; 
color: #0789bf; 
text-shadow: 2px 1px 0px #fff, 3px 2px 2px #BBB;
font-weight: lighter; 
text-transform: lowercase;
}

.title3 {
font-family: Megrim; 
font-size: 49px; 
line-height: 30px; 
letter-spacing: -1.5px; 
color: #BF0B0B; 
text-shadow: 0px 0px 2px #BF0B0B; 
font-weight: lighter; 
text-transform: lowercase;
}

.etc {
font-family: oswald;
font-size:35px;
letter-spacing:-4px; 
line-height:30px; 
color:#242424; 
text-shadow: 0px 1px 1px #fff021;
}

#fade {
display: none;
background: #000;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: .8;
z-index: 9999;
}

.popup_block{
display: none;
background: #FFFFFF;
padding: 20px;
float: left;
position: fixed;
top: 53%;
left: 51%;
z-index: 99999;
opacity: 1;
}

*html #fade {
position: absolute;
}

*html .popup_block {
position: absolute;
}

#tt {
position: absolute; 
display: block; 
background: #ffffff;
color: #BF0B0B;
border: 1px solid #D0D0D0;
text-transform: uppercase; 
font-family: consolas; 
font-size: 8px;
line-height: 5px;
padding: 5px;
z-index: 2;
}

.play {font-size: 10pt;}
.play:hover {color: #303030;}

.mbtipic1ben {
  z-index:1;
  display:inline-block;
  overflow:hidden;
  width:200px;
  height:200px;
  text-align:center;
  background-color:#acacac;
  background-image:url(https://codiefoster.neocities.org/pics/pokescreencaps/pokemon_traces_007_squirtle_by_riseagainstlife.jpg); /* replace image url with your own  */
  background-position:center;
  background-size:auto 100%;
}

.mbtitext {
  font-family:Oswald;
/*mbti title font*/
  font-size:40px;
  margin-top:90px;
  margin-bottom:25px;
  -webkit-transition:ease-in-out .5s;
  -moz-transition:ease-in-out .5s;
  -o-transition:ease-in-out .5s;
  transition:ease-in-out .5s;
  text-align:center;
  letter-spacing:5px;
  color:#FFFFFF;
  -webkit-filter:blur(2px);
}

.mbtihover {
/*css literally for the word "hover" just so people know to hover*/
  font-size:9px;
  margin-top:-10px;
  -webkit-transition:ease-in-out .5s;
  -moz-transition:ease-in-out .5s;
  -o-transition:ease-in-out .5s;
  transition:ease-in-out .5s;
  letter-spacing:.5px;
  opacity:.8;
  color:#FFFFFF;
}

.mbtipic1ben:hover .mbtitext {
  font-size:13px;
  margin-top:40px;
  margin-left:20px;
  letter-spacing:25px;
  -webkit-filter:blur(0px);
}

.mbtipic1ben:hover .mbtihover {
  opacity:0;
}
/*-----------bar graph. theres no reason to really mess with this-----------*/
.mbtitraits {
  font-size:8px;
  line-height:13px;
  top:-30px;
  height:100px;
  margin-top:-11px;
  -webkit-transition:ease-in-out .5s;
  -moz-transition:ease-in-out .5s;
  -o-transition:ease-in-out .5s;
  transition:ease-in-out .5s;
  text-align:right;
  letter-spacing:1px;
  text-transform:uppercase;
  opacity:0;
  color:#f5f5f5;
}

.mbtitraits b {
  padding-left:3px;
  text-decoration:none;
  color:#fff;
  background-color:rgba(0,0,0,.2);
}

.mbtipic1ben:hover .mbtitraits {
  opacity:1;
}

.bar {
  height:10px;
  padding-left:2px;
  text-align:left;
}

.barsblock {
  display:inline-block;
  float:right;
  width:100px;
  margin-right:15px;
}

.bars {
  font-size:10px;
  width:90px;
  height:10px;
  margin:3px;
  -webkit-transition:ease-in-out .5s;
  -moz-transition:ease-in-out .5s;
  transition:ease-in-out .5s;
  letter-spacing:1px;
  text-transform:uppercase;
  opacity:0;
  color:#f5f5f5;
  background-color:rgba(255,255,255,.3);
}

.mbtipic1ben:hover .bars {
  z-index:99999;
  opacity:1;
}

/*----------------------strengths and weaknesses----------------------*/
.strengthsweaknesses {
  float:right;
  width:270px;
  margin-top:10px;
  padding-left:25px;
}

.swlist {
  font-size:10px;
  line-height:10px;
  display:inline-block;
  overflow:auto;
  overflow-x:hidden;
  width:120px;
  height:100px;
  padding-top:10px;
  text-align:center;
  text-transform:uppercase;
  background-color:transparent;
}

.swlist b,bold,strong {
  font-family:Oswald; /*header font*/
  text-decoration:underline;
  letter-spacing:2px;
}

.swhorizontalbar { /*white strip behind strengths and weaknesses*/
  float:right;
  width:300px;
  height:100px;
  margin-bottom:-110px;
  background-color:#fff; /*strip color*/
}

.mbtipic2 { 
  z-index:-999;
  float:right;
  overflow:hidden;
  width:280px;
  height:200px;
  margin-top:-10px;
  margin-bottom:-150px;
  background-color:#acacac;
  background-image:url(https://codiefoster.neocities.org/pics/backgrounds/background-repeat.jpg); /*picture behind strengths and weakness*/
  background-position:center;
  background-size: auto;
  -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
  -moz-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
  box-shadow:inset 0 0 6px rgba(0,0,0,.3);
}

/*--------------------- MORAL ALIGNMENT CSS ---------------------*/
.alignmentdesc {
  line-height:9px;
  float:left;
  width:180px;
  height:264px;
  margin-top:3px;
  padding:10px 10px 0;
  text-align:right;
  font-family:Oswald,sans-serif;
  font-size:10px;
  background-color:#fff;
  background-image:url(https://codiefoster.neocities.org/pics/backgrounds/free_canvas_texture-dark_brown.jpg); /*image behind list of alignment descriptions*/
  background-position:center;
  background-size:auto ;
}

#selected {
  background-color:#879D55; /*color of the selected alignment*/
}

.alignment {
  display:inline-block;
  width:279px;
  margin-left:17px;
  font-family:Oswald,sans-serif;
  font-size:9px;
  font-color: #fff;
  background-color:#acacac;
  background-image:url(https://codiefoster.neocities.org/pics/backgrounds/free_canvas_texture-dark_brown.jpg); /*image behind alignment squares*/
  background-position:center;
  background-size: auto;
}

.alignmentblock {
  font-size:8px;
  line-height:100%;
  position:relative;
  display:block;
  font-family:Oswald,sans-serif;
  font-size:9px;
  font-color: #fff;
  float:left;
  width:67px;
  height:47px;
  padding:10px;
  padding-top: 30px;
  text-align:center;
  text-transform:uppercase;
  color:#000;
  border:3px solid #fff;
}

.alignmentblock p {
  padding:0;
}

/* ------------------------INSPIRATION CSS.-------------------------
 
          ONLY MESS WITH THIS IF YOU KNOW WHAT YOURE DOING.
    THE COLUMN THING IS EASY TO CHANGE BUT THE REST CAN GET TRICKY
    YOU CAN CHANGE THE HEIGHT OF ".MASONRYBOX" TO ADD MORE IMAGES */
.masonry2 {
  overflow:hidden;
  -moz-column-count:3;
  -moz-column-gap:0;
  -webkit-column-count:3;
  -webkit-column-gap:0;
  column-count:3;
  column-gap:0;
  -ms-column-count:3;
  -ms-column-gap:0;
  -moz-padding-start:0;
  -webkit-padding-start:0;
}

.masonry2 img {
  display:inline-block;
  width:100%;
  margin-bottom:-4px;
  -webkit-transition:ease-in-out .3s;
  -moz-transition:ease-in-out .3s;
  -o-transition:ease-in-out .3s;
  transition:ease-in-out .3s;
  -webkit-filter:grayscale(100%);
  -webkit-backface-visibility:hidden;
}

.masonry2 img:hover {
  -webkit-transform:scale(1.25);
  -moz-transform:scale(1.25);
  -ms-transform:scale(1.25);
  -o-transform:scale(1.25);
  transform:scale(1.25);
  -webkit-filter:grayscale(0%);
}

.masonrybox2 {
  overflow:hidden;
  height:1090px; /*change the height here if you add more pictures*/
}

.divTable{
	display: table;
	width: 500px;
}
.divTableRow {
	display: table-row;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
}
.divTableCell, .divTableHead {
	border: 1px solid #FFFFFF;
	display: table-cell;
	padding: 3px 10px;
	text-align; left;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
	font-weight: bold;
}
.divTableFoot {
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
}
.divTableBody {
	display: table-row-group;
}
</style>

<noframes></noframes><noscript></noscript>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

$(document).ready(function() {

//When you click on a link with class of poplight and the href starts with a #

$('a.poplight[href^=#]').click(function() {

var popID = $(this).attr('rel'); //Get Popup Name

var popURL = $(this).attr('href'); //Get Popup href to define size

//Pull Query & Variables from href URL

var query= popURL.split('?');

var dim= query[1].split('&');

var popWidth = dim[0].split('=')[1]; //Gets the first query string value

//Fade in the Popup and add close button

$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend();

//Define margin for center alignment (vertical   horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css

var popMargTop = ($('#' + popID).height() + 80) / 2;

var popMargLeft = ($('#' + popID).width() + 80) / 2;

//Apply Margin to Popup

$('#' + popID).css({

'margin-top' : -popMargTop,

'margin-left' : -popMargLeft

});

//Fade in Background

$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.

$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies

return false;

});

//Close Popups and Fade Layer

$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...

$('#fade , .popup_block').fadeOut(function() {

$('#fade, a.close').remove();  //fade them both out

});

return false;

});

</script>
</head>

<a style="display: block" href="#?w=500" onmouseover="tooltip.show('gift');" onmouseout="tooltip.hide();" class="poplight" rel="02" title="moral"><div style="border: solid 2px #fff; height:205px; width:100px; background: #FFFFFF url('https://codiefoster.neocities.org/pics/pokescreencaps/636043680074436294577590681_cute.jpg') no-repeat scroll 0 0 / cover; background-position:center;"></div></a>
    
  <div style="border: solid 2px #fff; height:205px; width:200px; background: #FFFFFF url('https://codiefoster.neocities.org/pics/pokescreencaps/images.jpg') no-repeat scroll 0 0 / cover; background-position:center;"></div>
    
    <a style="display: block" href="#?w=500" onmouseover="tooltip.show('gift');" onmouseout="tooltip.hide();" class="poplight" rel="03" title="inspiration"><div style="border: solid 2px #fff; height:205px; width: 187px; float:right; background: #FFFFFF url('https://codiefoster.neocities.org/pics/pokescreencaps/article_post_width_Pikachu.jpg') no-repeat scroll 0 0 / cover; background-position: left;"></div></a>
 
</div><div style="left: 52px; position: relative !important; top: -280px; width: 155px;margin-bottom:-150px">
<a style="display: block" href="#?w=700" onmouseover="tooltip.show('gift');" onmouseout="tooltip.hide();" class="poplight" rel="04" title="playlist"><div style="width: 100px; height: 100px; margin: 25px; overflow: hidden; border: 4px solid #fff; border-radius:300px; background: #fff url('https://static1.squarespace.com/static/551ed270e4b07f2b9a28489c/t/59848e13f7e0ab6f61df1b05/1501859351405/') no-repeat scroll 0 0 / cover;"></div></a></div><div style="width:500px; height:; display:flex; background-color:#fff; display: inline-block;"><div style="height:; width:500px;"><br><br><center><span style="text-transform:lowercase; letter-spacing:4px; margin-top: 5px; color: #000; text-shadow: 0px 1px 1px #879D55; font-family :shadows into light two,sans-serif; font-size:55px;"><a href="http://USERNAME.insanejournal.com" style="text-decoration: none; color: #000000;">FIRST LAST</a></span><br><span style="text-transform: uppercase; font-weight:100!important; font-family:calibri,Times New Roman,serif; font-size: 11px; letter-spacing: 2px; line-height:100%">SUB-INFO GOES HERE.</span><br><br></center></div></div><div style="width:500px; height:100px; display:flex; background-color:black;">

</div></div></center>

<div id="01" class="popup_block">
<div class="header2"><span>MYERS-BRIGGS TYPE INDICATOR</span></div>

<div class="mbtipic1ben">
    <div class="mbtitext"> INFP</div>
    <div class="mbtihover"> [ HOVER ] </div>
    

    
<div class="barsblock">
<div class="bars">
<div class="bar" style="background-color: #879D55; width: 61%; text-shadow: 1px 1px 0px #000000;">50%</div></div>
<div class="bars">
<div class="bar" style="background-color: #F3B453; width: 75%;">61%</div></div>
<div class="bars">
<div class="bar" style="background-color: #fff; width: 72%;">70%</div></div>
<div class="bars">
<div class="bar" style="background-color: #745131; width: 93%;">53%</div></div>
<div class="bars">
<div class="bar" style="background-color: #4B3831; width: 76%;">65%</div></div>

</div>

<div class="mbtitraits"> 
         <br><b>Introverted</b> 
         <br><b>Observant</b>
         <br><b>Thinking</b>
        <br><b>Prospecting</b>
        <br><b>Assertive</b>

</div>

</div>

<div class="swlist">
    <b> ISTP STRENGTHS</b> <br><br>
        Idealistic<br>
        Seek Value & Harmony<br>
        Open-Minded & Flexible<br>
        Very Creative<br>
        Passionate<br>
        Energetic<br>
        </div>

<div class="swlist">
    <b> ISTP WEAKNESSES</b><br><br>
	  Too Idealistic<br>
        Impractical<br>
        Takes things Personal<br>
        Almost Too Private <br>
        Altruistic<br>

</div>
</div>
</div>
</div>

<div class="header2"><span>MORAL ALIGNMENT</span></div>

<!---

to highlight your characters moral alignment, place <div id="selected> and </div> around the correct alignment as shown below.

EXAMPLE. if your moral alignment was neutral evil, it would look like this:

<div id="selected">
        represents pure evil without honor and without variation;<p></div>

<!-lawful good--><font color="#fff">combines honor and compassion;</font><p>
<font color="#fff">doing what is good without bias for or against order;</font></p><p>
<font color="#fff">combines a good heart with a free spirit;</font></p><p>
<font color="#fff">reliable and honorable without being a zealot;</font></p><p>
<font color="#fff">act naturally, without prejudice or compulsion;</font></p><p>
</p><div id="selected"><font color="#fff">represents true freedom from society's restricitons and a do-gooders zeal;</font></div><p>
<font color="#fff">represents methodical, intentional, and frequently sucessful evil;</font></p><p>
 <font color="#fff">represents pure evil without honor and without variation;</font></p><p>
<font color="#fff">destruction not only of beauty and life but also of the order on which beauty and life depend.</font></p></div>

<!-- for this one, you can just place id="selected next to the alignmentblock.

EXAMPLE. If your alignment is lawful neutral instead of this:

<div class="alignmentblock">LAWFUL NEUTRAL <p>"the judge"</div>
 
it would look like this:

<div class="alignmentblock" id="selected" >LAWFUL NEUTRAL <p>"the judge"</div>

-->

<div class="alignment">
    <div class="alignmentblock"><font color="#fff">LAWFUL GOOD<br>"the crusader"</font></div>
    <div class="alignmentblock"><font color="#fff">NEUTRAL GOOD <br>"the benefactor"</font></div>
    <div class="alignmentblock"><font color="#fff">CHAOTIC GOOD <br>"the rebel"</font></div>
    <div class="alignmentblock"><font color="#fff">LAWFUL NEUTRAL <br>"the judge"</font></div>
    <div class="alignmentblock"><font color="#fff">TRUE NEUTRAL <br>"the undecided"</font> </div>
    <div class="alignmentblock" id="selected"><font color="#fff">CHAOTIC NEUTRAL <br>"the free spirit"</font></div>
    <div class="alignmentblock"><font color="#fff">LAWFUL EVIL <br>"the dominator"</font></div>
    <div class="alignmentblock"><font color="#fff">NEUTRAL EVIL <br>"the malefactor"</font></div>
    <div class="alignmentblock"><font color="#fff">CHAOTIC EVIL <br>"the destroyer"</font></div>
    </div>

</div>

</div>

<div class="header2"><span>INSPIRATION</span></div>
<div class="content">
<div class="masonrybox2">
    <ul class="masonry2">

</ul> 
    </div>
</div>

</div>

<div id="04" class="popup_block">
<div class="header2"><span>PLAYLIST</span></div>
<div class="content">
<center>
<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell" align="justify"><a href="LINK" style="color: #000; text-shadow: 0px 1px 1px #dbdb37" target="_blank">SONG</a> - BAND </div>
<div class="divTableCell" align="justify"><a href="LINK" style="color: #000; text-shadow: 0px 1px 1px #dbdb37" target="_blank">SONG</a> - BAND</div>
</div>
<div class="divTableRow">
<div class="divTableCell" align="justify"><a href="LINK" style="color: #000; text-shadow: 0px 1px 1px #dbdb37" target="_blank">SONG</a> - BAND</div>
<div class="divTableCell" align="justify"><a href="LINK" style="color: #000; text-shadow: 0px 1px 1px #dbdb37" target="_blank">SONG</a> - BAND</div>
</div>
<div class="divTableRow">
<div class="divTableCell" align="justify"><a href="LINK" style="color: #000; text-shadow: 0px 1px 1px #dbdb37" target="_blank">SONG</a> - BAND</div>
<div class="divTableCell" align="justify"><a href="LINK" style="color: #000; text-shadow: 0px 1px 1px #dbdb37" target="_blank">SONG</a> - BAND</div>
</div>
<div class="divTableRow">
<div class="divTableCell" align="justify"><a href="LINK" style="color: #000; text-shadow: 0px 1px 1px #dbdb37" target="_blank">SONG</a> - BAND</div>
<div class="divTableCell" align="justify"><a href="LINK" style="color: #000; text-shadow: 0px 1px 1px #dbdb37" target="_blank">SONG</a> - BAND</div>
</div>
<div class="divTableRow">
<div class="divTableCell" align="justify"><a href="LINK" style="color: #000; text-shadow: 0px 1px 1px #dbdb37" target="_blank">SONG</a> - BAND</div>
<div class="divTableCell" align="justify"><a href="LINK" style="color: #000; text-shadow: 0px 1px 1px #dbdb37" target="_blank">SONG</a> - BAND</div>
</div>
</div>
</div>
</center>
</div>
</div>
<div id="s-m-t-tooltip" style="position: absolute; z-index: -1; left: 969px; top: 508px; opacity: 0;"><div style="width: 100%; height: 100%;">inspiration</div></div></body></html>

<html><head>
<meta charset="UTF-8">
<title>TITLE HERE</title>
<link rel="shortcut icon" href="">

</body></html>

<html><head>
<meta charset="UTF-8">
<title>TITLE HERE</title>
<link rel="shortcut icon" href="">

#main {
  position: absolute;
  left: 16.5%;
  top: 33.5%;
  width: 700px;
  height: 120px;
  border: 1px rgb(41, 41, 41) solid;
  background: rgb(41, 41, 41);
}

#smtxt {
  position: absolute;
  color: #F7F7F7;
  text-transform: uppercase;
  top: 87px;
  left: 40%;
  font-family: quicksand;
  letter-spacing: -1px;
  font-size: 12px;
  font-weight: 100;
}

#txtcl {
  font-family: oswald;
  color: #F2CA6B;
  left: 21%;
  top: 35px;
  position: absolute;
  text-transform: uppercase;
  font-size: 35px;
}

#txt {
  color: #F7F7F7;
  font-family: oswald;
  left: 50%;
  top: 35px;
  position: absolute;
  text-transform: uppercase;
  font-size: 35px;
}

#pic1 {
  position: absolute;
  left: 237px;
  top: 5px;
  width: 330px;
  height: 250px;
  border: 1px rgb(160, 160, 160) solid;
  background: rgb(160, 160, 160);
}
#pic1 img {
 width:330px;
 height:250px;
}

#bar1 {
  position: absolute;
  left: 580px;
  top: 5px;
  width: 30px;
  height: 252px;
  border: 1px #F2CA6B;
  background: #F2CA6B;
}

#pic2 {
  top: 5px;
  left: 620px;
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px rgb(160, 160, 160) solid;
  background: rgb(160, 160, 160);
}

#pic2 img {
  height:100px;
  width:100px;
}

#pic3 {
  top: 5px;
  left: 729px;
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px rgb(160, 160, 160) solid;
  background: rgb(160, 160, 160);
}

#pic3 img {
  height:100px;
  width:100px;
}

#pic4 {
  top: 5px;
  left: 837px;
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px rgb(160, 160, 160) solid;
  background: rgb(160, 160, 160);
}

#pic4 img {
  height:100px;
  width:100px;
}

#pic5 {
  top: 155px;
  left: 620px;
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px rgb(160, 160, 160) solid;
  background: rgb(160, 160, 160);
}

#pic5 img {
  height:100px;
  width:100px;
}

#pic6 {
  top: 155px;
  left: 729px;
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px rgb(160, 160, 160) solid;
  background: rgb(160, 160, 160);
}

#pic6 img {
  height:100px;
  width:100px;
}

#pic7 {
  top: 155px;
  left: 837px;
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px rgb(160, 160, 160) solid;
  background: rgb(160, 160, 160);
}

#pic7 img {
  height:100px;
  width:100px;
}

#bar2 {
  position: absolute;
  left: 620px;
  top: 115px;
  width: 318px;
  height: 30px;
  border: 1px rgb(41, 41, 41) solid;
  background: rgb(41, 41, 41);
}

#pic8 {
  top: 400px;
  left: 237px;
  position: absolute;
  width: 170px;
  height: 100px;
  border: 1px rgb(160, 160, 160) solid;
  background: rgb(160, 160, 160);
}

#pic8 img {
  height:100px;
  width:170px;
}

#pic9 {
  top: 400px;
  left: 417px;
  position: absolute;
  width: 170px;
  height: 100px;
  border: 1px rgb(160, 160, 160) solid;
  background: rgb(160, 160, 160);
}

#pic9 img {
  height:100px;
  width:170px;
}

#pic10 {
  top: 400px;
  left: 610px;
  position: absolute;
  width: 328px;
  height: 180px;
  border: 1px rgb(160, 160, 160) solid;
  background: rgb(160, 160, 160);
}

#pic10 img {
  height:180px;
  width:328px;
}

#bar3 {
  top: 510px;
  left: 237px;
  position: absolute;
  width: 350px;
  height: 70px;
  border: 1px rgb(41, 41, 41) solid;
  background: rgb(41, 41, 41);
}

#bar4 {
  top: 570px;
  left: 237px;
  position: absolute;
  width: 350px;
  height: 10px;
  border: 1px rgb(51, 51, 51) solid;
  background: rgb(51, 51, 51);
}

#bq {
  color: #F2CA6B;
  margin-left: -250px;
  margin-top: -12px;
  font-size: 120px;
}

#btext {
  position: absolute;
  margin-top: 20px;
  margin-left: 45px;
  color: #F7F7F7;
  font-size: 20px;
  font-family: fjalla one;
  letter-spacing: 1px;
  text-transform: uppercase;
}
</style>
</head>

<body>
<center>
  <div id="pic1"><img src="https://i.imgur.com/tTyyG7y.png"></div>
  <div id="bar1"></div>
  <div id="bar2"></div>
  <div id="pic2"><img src="https://i.imgur.com/tTyyG7y.png"></div>
  <div id="pic3"><img src="https://i.imgur.com/tTyyG7y.png"></div>
  <div id="pic4"><img src="https://i.imgur.com/tTyyG7y.png"></div>
  <div id="pic5"><img src="https://i.imgur.com/tTyyG7y.png"></div>
  <div id="pic6"><img src="https://i.imgur.com/tTyyG7y.png"></div>
  <div id="pic7"><img src="https://i.imgur.com/tTyyG7y.png"></div>
  <div id="pic8"><img src="https://i.imgur.com/tTyyG7y.png"></div>
  <div id="pic9"><img src="https://i.imgur.com/tTyyG7y.png"></div>
  <div id="pic10"><img src="https://i.imgur.com/tTyyG7y.png"></div>
  <div id="bar3">
    <div id="btext">short quote or line of lyric</div>
    <div id="bq">"</div>
  </div>
  <div id="bar4"></div>
  <div id="main">
    <div id="txtcl">FIRST NAME'S</div>
    <div id="txt">MOODBOARD</div>
    <div id="smtxt">TYPE OF MOODBOARD</div>
  </div>
</center>
</body></html>