Artistic Boxes

HTML MARKUP

&lt;div class="ct-artisticBox"&gt;
                        &lt;div class="ct-artisticBox-content"&gt;
                            &lt;div class="ct-backgroundContent" data-bg-color="#f7f7f7" data-type="color"&gt;
                                &lt;div class="ct-artisticBox-description"&gt;
                                    &lt;h3 class="ct-artisticBox-date"&gt;2014 - 2015&lt;/h3&gt;
                                    &lt;h4 class="ct-artisticBox-title text-uppercase"&gt;Artistic Staff&lt;/h4&gt;
                                    &lt;ul class="list-unstyled ct-artistBox-members"&gt;
                                        &lt;li&gt;Karen Jenkins - &lt;a href="#"&gt;Ballet Master&lt;/a&gt;&lt;/li&gt;
                                        &lt;li&gt;Lisa Donalds - &lt;a href=""&gt;Ballet Mistress&lt;/a&gt;&lt;/li&gt;
                                        &lt;li&gt;Dana Johnsons - &lt;a href="#"&gt;Rehearsal Director&lt;/a&gt;&lt;/li&gt;
                                        &lt;li&gt;Melissa Kens - &lt;a href="#"&gt;Artistic Director&lt;/a&gt;&lt;/li&gt;
                                    &lt;/ul&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="ct-artisticBox-personImage"&gt;
                            &lt;a href="staff-single-member.html" class="ct-personBox ct-personBox--primary"&gt;
                                &lt;figure class="ct-personBox-image"&gt;
                                    &lt;img src="../assets/images/demo-content/personBox0.jpg" alt="Person 1"&gt;
                                    &lt;figcaption&gt;
                                        &lt;div class="ct-personBox-name"&gt;Karen Jenkins&lt;/div&gt;
                                        &lt;span class="ct-personBox-linkHelper"&gt;See&lt;/span&gt;
                                    &lt;/figcaption&gt;
                                &lt;/figure&gt;
                            &lt;/a&gt;
                            &lt;a href="staff-single-member.html" class="ct-personBox ct-personBox--primary"&gt;
                                &lt;figure class="ct-personBox-image"&gt;
                                    &lt;img src="../assets/images/demo-content/personBox2.jpg" alt="Person 2"&gt;
                                    &lt;figcaption&gt;
                                        &lt;div class="ct-personBox-name"&gt;Lisa Donalds&lt;/div&gt;
                                        &lt;span class="ct-personBox-linkHelper"&gt;See&lt;/span&gt;
                                    &lt;/figcaption&gt;
                                &lt;/figure&gt;
                            &lt;/a&gt;
                            &lt;a href="staff-single-member.html" class="ct-personBox ct-personBox--primary"&gt;
                                &lt;figure class="ct-personBox-image"&gt;
                                    &lt;img src="../assets/images/demo-content/personBox3.jpg" alt="Person 3"&gt;
                                    &lt;figcaption&gt;
                                        &lt;div class="ct-personBox-name"&gt;Dana Johnsons&lt;/div&gt;
                                        &lt;span class="ct-personBox-linkHelper"&gt;See&lt;/span&gt;
                                    &lt;/figcaption&gt;
                                &lt;/figure&gt;
                            &lt;/a&gt;
                            &lt;a href="staff-single-member.html" class="ct-personBox ct-personBox--primary"&gt;
                                &lt;figure class="ct-personBox-image"&gt;
                                    &lt;img src="../assets/images/demo-content/personBox4.jpg" alt="Person 4"&gt;
                                    &lt;figcaption&gt;
                                        &lt;div class="ct-personBox-name"&gt;Monika Belluci&lt;/div&gt;
                                        &lt;span class="ct-personBox-linkHelper"&gt;See&lt;/span&gt;
                                    &lt;/figcaption&gt;
                                &lt;/figure&gt;
                            &lt;/a&gt;
                        &lt;/div&gt;
                        &lt;div class="clearfix"&gt;&lt;/div&gt;
                    &lt;/div&gt;

<h4 class="ct-artisticBox-title text-uppercase">Artistic Staff</h4>

<li>Karen Jenkins - <a href="#">Ballet Master</a></li>

<li>Lisa Donalds - <a href="">Ballet Mistress</a></li>

<li>Dana Johnsons - <a href="#">Rehearsal Director</a></li>

<li>Melissa Kens - <a href="#">Artistic Director</a></li>

</ul>

</div>

<div class="ct-personBox-name">Karen Jenkins</div>

</figcaption>

</figure>

</a>

<div class="ct-personBox-name">Lisa Donalds</div>

</figcaption>

</figure>

</a>

<div class="ct-personBox-name">Dana Johnsons</div>

</figcaption>

</figure>

</a>

<div class="ct-personBox-name">Monika Belluci</div>

</figcaption>

</figure>

</a>

</div>

</div>

Screenshot’s

News

Siver

Estato

Disrupt

We are elite