search

siamkreative / SiamKreative-Studio

https://studio.siamkreative.com/
0 stars 0 forks source link

Revamped portfolio section - Slider vs Grid #17

Open siamkreative opened 8 years ago

siamkreative commented 8 years ago

Instead of using Behance API, how about a slider that features responsives mockups of selected work?

The slider could be composed of different images, one image per device. Clicking on a device opens a modal window that shows the full size image of the selected device...

Code snippet for slider


#portfolio {
    .wrapper--large {
        padding: 4.8rem 2rem;
    }
    .project {
        max-width: 1400px;
        margin: 3em auto 0 auto;
        padding: 0;
    }
    img.project_image {
        float: left;
        width: 800px;
        display: inline;
        margin: 0;
    }
    .project_desc {
        float: left;
        text-align: left;
        max-width: 30%;
        padding-left: 5%;

        a {
            color: white;
        }
        blockquote {
            font-style: italic;
        }
    }
}
<div class="project">
    <img class="project_image" src="images/projects/expique-700x501.png" alt="">
    <div class="project_desc">
        <h3>Expique Co. Ltd.</h3>
        <p>Expique got in touch with us as they were looking at building a WordPress based site. The owner wanted to create a unique brand awareness, based on an existing WordPress theme.</p>
        <a class="btn" href="http://www.expique.com/">View website →</a>
    </div>
</div>
siamkreative commented 8 years ago