HTML & CSS Mini Profile Help

[lilrebelfighter]

Hello!

I was hoping I could reach out here regarding some coding help. I have used the Jcink forum and they weren't too responsive. If anyone is good with this, anything is helpful.

I am trying to place my mini profile obviously next to posts. It shows up at the bottom of the site. In order to keep this short, I'll provide my link and then the link where I got the mini profile at. Just let me know if you need more information.

I am really new to coding and tried my best to figure this out this past week myself. So help is appreciated so much.

My site: https://acrossthestars.jcink.net/index.php?showtopic=3
Mini profile code: http://cttw.jcink.net/index.php?showtopic=1242

 

[Malcolm]

Mini profile code: http://cttw.jcink.net/index.php?showtopic=1242

Hi there, could you provide the code? If you don't have an account we are unable to view this post.

 

[lilrebelfighter]

Hi there, could you provide the code? If you don't have an account we are unable to view this post.

Sure! I just didn't want to post it and overwhelm with it right off the bat. Everything will be below:

This is what I have where (if it's not in these places it doesn't show up at all.) At the moment, the mini profile shows up at the bottom of the forum no matter what I do.


WRAPPER CODE SECTION

<div class="ncttw-mini wide">
<div class="ncttw-hover large">
   <!-- |avatar| -->
 
   <div class="ncttw-bg">
   
     <div class="ncttw-info">
       <h2><!-- |field_1| --></h2>
       <h3><!-- |status| --></h3>
       <h3><!-- |posts| --> posts</h3>
     
       <h4 style="margin-top: 30px;"><!-- |field_3| --></h4>
       <h4><!-- |field_5| --></h4>
       <h4 style="margin-bottom: 10px;"><!-- |g_title| --></h4>
     
       <h3><a href="<!-- |field_5| -->">application</a></h3>
       <h3><a href="<!-- |field_6| -->">shipper</a></h3>
     </div>
   
   </div>
 
</div>

<h1><!-- |name| --></h1>
</div>

MINI PROFILE CODE SECTION:

/****************************************
NICOLE/THUNDERSTRUCK DUSK MINI
*****************************************/

.ncttw-mini {
   width: 200px;
   height: auto;
   background-color: #fff;
   padding: 10px;
   font: normal normal normal 11px/100% arial, sans-serif;
   text-align: center;
   color: #222;
   margin: 0 auto;
   outline: 1px solid #eee;
}

.ncttw-mini br {
   display: none;
}
.ncttw-mini.wide {
   width: 250px;
}

.ncttw-mini h1 {
   margin: 5px 0 0;
   background-color: #eee;
   padding: 20px 15px;
   text-transform: uppercase;
   font-weight: bold;
   font-size: 2.2em;
   letter-spacing: -3px;
}

.ncttw-mini .ncttw-hover.small {
   width: 200px;
   height: 300px;
   position: relative;
}

.ncttw-mini .ncttw-hover.medium {
   width: 250px;
   height: 350px;
   position: relative;
}

.ncttw-mini .ncttw-hover.large {
   width: 250px;
   height: 400px;
   position: relative;
}

.ncttw-mini .ncttw-bg {
   background-color: rgba(0,0,0,0);
   position: absolute;
   top: 5px;
   left: 5px;
   right: 5px;
   bottom: 5px;
   box-sizing: border-box;
   border-top: 20px solid transparent;
   border-bottom: 20px solid transparent;
   overflow: hidden;
   transition: all 1.2s ease 0s;
   -webkit-transition: all 1.2s ease 0s;
   -moz-transition: all 1.2s ease 0s;
   -o-transition: all 1.2s ease 0s;
}

.ncttw-mini .ncttw-info {
   background-color: #fff;
   overflow: hidden;
   position: absolute;
   padding: 2px;
   left: 10%;
   right: 10%;
   top: -50%;
   transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -webkit-transform: translateY(-50%);
   -o-transform: translateY(-50%);
   text-transform: uppercase;
   transition: all 0.8s ease 0s;
   -webkit-transition: all 0.8s ease 0s;
   -moz-transition: all 0.8s ease 0s;
   -o-transition: all 0.8s ease 0s;
}

.ncttw-mini h2 {
   margin: 0 0 2px;
   background-color: #eee;
   padding: 10px;
   text-transform: uppercase;
   font-weight: bold;
   font-size: 1.3em;
   letter-spacing: -1px;
}

.ncttw-mini h3 {
   width: 50%;
   float: left;
   background-color: #eee;
   margin: 0;
   padding: 5px 3px 3px;
   box-sizing: border-box;
   font-weight: bold;
   font-size: 8px;
   line-height: 100%;
}

.ncttw-mini h3:nth-of-type(even) {
   border-left: 1px solid #fff;
}

.ncttw-mini h3:nth-of-type(odd) {
   border-right: 1px solid #fff;
}

.ncttw-mini h4 {
   margin: 5px 0;
   font-weight: normal;
   font-style: italic;
   font-size: 0.90em;
   clear: both;
}

.ncttw-mini:hover .ncttw-bg {
   background-color: rgba(0,0,0,0.6);
   transition: all 1.2s ease 0s;
   -webkit-transition: all 1.2s ease 0s;
   -moz-transition: all 1.2s ease 0s;
   -o-transition: all 1.2s ease 0s;
}

.ncttw-mini:hover .ncttw-info {
   top: 50%;
   transition: all 0.8s ease 0s;
   -webkit-transition: all 0.8s ease 0s;
   -moz-transition: all 0.8s ease 0s;
   -o-transition: all 0.8s ease 0s;
}

.ncttw-mini a {
   color: #222;
   text-transform: uppercase;
   text-decoration: none;
}