Untitled


<!DOCTYPE html>

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

<meta name="credit" content="coding from gonnashowyou@codepen">


<style>
@import url(https://fonts.googleapis.com/css?family=Oswald:400,700,300);
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700|Yanone+Kaffeesatz:400,200,300,700|Fjalla+One|Quicksand:400,300,700);

#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>