Interest Blocks

Documentation for Interest Blocks, as hosted on https://online.wpdev.dixie.edu/

  • Teaching Online at DSU
    Contact us to learn more about current online teaching opportunities.
  • Earning a Certificate or Degree Online
    Visit our programs page to learn more about existing and future online programs.
The Code

<div class="interestRow">
    <ul class="interestBlock">
        <li class="dixieHexagon">
            <div class="default"></div>
        </li>
        <li class="dixieHexagon hover">
            <div class="hex">
                <div class="hex fill bright">
                    <span class="top">Continuing and Professional Learning Opportunities</span><br />
                    <span class="bottom">We offer a variety of <a href="https://ce.dixie.edu/continuing.php">online, professional courses and certificates</a></span>
                </div>
            </div>
        </li>
    </ul>
    <ul class="interestBlock">
        <li class="dixieHexagon hover">
            <div class="hex">
                <div class="hex fill dark">
                    <span class="top">Teaching Online at DSU</span><br />
                    <span class="bottom"><a href="http://online.wpdev.dixie.edu/about-dsuonline/">Contact us</a> to learn more about current online teaching opportunities.</span>
                </div>
            </div>
        </li>
        <li class="dixieHexagon">
            <div class="default"></div>
        </li>
    </ul>
    <ul class="interestBlock">
        <li class="dixieHexagon hover">
            <div class="hex">
                <div class="hex fill bright">
                    <span class="top">Earning a Certificate or Degree Online</span><br />
                    <span class="bottom">Visit our <a href="https://online.wpdev.dixie.edu/courses-programs/">programs page</a> to learn more about existing and future online programs.</span>
                </div>
            </div>
        </li>
    </ul>
</div>

The Styling

.interestRow, ul.interestBlock {
    display: flex;
}
.interestRow {
    flex-flow:row wrap;
    justify-content: center;
}
ul.interestBlock {
    width: 220px;
    padding: 10vh 0 10vh 0;
}
li.dixieHexagon {
    list-style:none;
    display:inline-block;
    margin: 0;
    position:relative;
}
.dixieHexagon:nth-child(even) {
    top:160px;
    right:90px;
}
.dixieHexagon .default, .hex, .dixieHexagon.hover div span, .dixieHexagon.hover div span {
    text-align:center;
}
.dixieHexagon .default, .hex {
    width: 210px;
    height: 90px;
    position: relative;
}
.dixieHexagon.hover div, .dixieHexagon.hover div span { cursor:pointer; }
.dixieHexagon div::before, .dixieHexagon div::after {
    content: "";
    position: absolute;
    left:0;
    border-left: 106px solid transparent;
    border-right: 106px solid transparent;
}
.dixieHexagon .default::before, .hex:before, .hex.fill:before {
    border-bottom-style:solid;
    border-bottom-width: 50px;
}
.dixieHexagon .default::after, .hex:after, .hex.fill:after {
    border-top-style:solid;
    border-top-width: 50px;
}
.dixieHexagon.hover div span {
    font-size:20px;
    display:block;
    position:absolute;
    top:50%;
    left:50%;
    transform:translateX(-50%) translateY(-50%);
}
.dixieHexagon.hover div .top {
    opacity:1;
    font-family: 'rbno2.1alight';
    font-size: 2.8rem;
    width: 85%;
    line-height: 105%;
    letter-spacing: .1rem;
}
.dixieHexagon.hover div .bottom {
    font-size: 16px;
    width:100%;
    z-index:10;
    opacity:0;
}
.dixieHexagon div.bright .top { color:#fff; }
.dixieHexagon.hover div:hover .top { opacity: 0; }
.dixieHexagon.hover div:hover .bottom { opacity: 1; }
.hex:before, .hex:after {
    content:"";
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    position: absolute;
}
.hex:before {
    top: -49px;
    border-bottom:50px solid #aeaeae;
}
.hex:after {
    bottom: -49px;
    border-top:50px solid #aeaeae;
}
.fill {
    border-left:1px solid #aeaeae;
    border-right:1px solid #aeaeae;
    -webkit-transform: scale(.99, .99);
    -moz-transform: scale(.99, .99);
    transform: scale(.99, .99);
    z-index:1;
}
.fill:after { z-index:-1; }
.dixieHexagon .default { background: #efefef; }
.dixieHexagon .default::before {
    top: -4.9rem;
    border-bottom-color:#efefef;
}
.dixieHexagon .default::after{
    bottom: -4.9rem;
    border-top-color:#efefef;
}
.dixieHexagon div.dark { background: #aeaeae; }
.dixieHexagon div.dark::before { border-bottom-color: #aeaeae; }
.dixieHexagon div.dark::after { border-top-color: #aeaeae; }
.dixieHexagon div.bright { background: #ba1c21; }
.dixieHexagon div.bright::before { border-bottom-color: #ba1c21; }
.dixieHexagon div.bright::after { border-top-color: #ba1c21; }
div.bright:hover, div.dark:hover{ background-color:#fff; }
div.bright:hover::before, div.dark:hover::before { border-bottom-color:#fff; }
div.bright:hover::after, div.dark:hover::after { border-top-color: #fff; }
/* responsive design */
@media screen and (max-width:769px) {
    #dsu-fw-Iminterestedin {
            margin: 0 2rem 2rem;
        }
}
@media screen and (min-width:768px) and (max-width: 996px) {
    ul.interestBlock {
        transform: scaleX(.8) scaleY(.85);
        width:170px;
    }
    .dixieHexagon:nth-child(2n) {
        top: 140px;
        right: 95px;
    }
}
@media screen and (min-width:997px) {
    ul.interestBlock {
        width: 220px;
    }
    .dixieFact .factDetails {
        font-size: 2.4rem;
        width: calc( 100% - 185px);
    }
}
@media screen and (min-width:1200px) {
    ul.interestBlock {
        width: 240px;
        transform: scale(1.1);
    }
    .dixieHexagon.hover div span {
        transform: translateX(-50%) translateY(-50%) scale(.8);
    }
}

Documentation

The interest blocks are visually breaking elements designed to capture your reader’s attention and give them chunked, digestable information. For example, quick facts and a short description. Not all of the blocks should be filled, and there should be no more than two rows of elements per section.

Essentially, the “interestRow” div holds all of your interest blocks. Each interest block is an unordered list element, containing at least one list item, which nests the default state of your block and its hover state. You can add an empty light-gray hexagon to the left or right of the element by adding another hexagon list-item.