Format

Web Format Exploration.

by Ken Watanabe

HTML

<div class="pagewrap">
    
    <section class="text">
        <h1 class="title">
            Project Title
        </h1>
        <p class="information">
            Project Text. A hidden class that was swapped with .title.
        </p>
    </section>
    
    <section class="image">

        <figure class="four-forth">
            <img src="http://i58.tinypic.com/rvf574.jpg"/>
            <figcaption>
                FOUR-FORTH
            </figcaption>
        </figure>
        
        <figure class="three-forth">
            <img src="http://i58.tinypic.com/rvf574.jpg"/>
            <figcaption>
                THREE-FORTH
            </figcaption>
        </figure>

        <figure class="two-forth">
            <img src="http://i58.tinypic.com/rvf574.jpg"/>
            <figcaption>
                TWO-FORTH
            </figcaption>
        </figure><!-- Comment here or delete it
     --><figure class="two-forth">
            <img src="http://i58.tinypic.com/rvf574.jpg"/>
            <figcaption>
                ONE-FORTH
            </figcaption>
        </figure>
    </section>
        
</div>

CSS

/* General */
html, body { height:100%; width:100%; font-size:100%; color:#212121; }
html, html a, section, p, h1, body, img, figure, figcaption { margin:0; padding:0; }

/* Wrap */
div.pagewrap { width:80%; max-width:900px; margin:0 auto; }

/* Text */
section.text { padding-top:20px; position:fixed; z-index: 1000; }
section.text h1.title { opacity:1; }
section.text p.information { opacity:0; }

/* Image */
img { max-width:100%; vertical-align:bottom; }
section.image { padding-top:50px; }
section.image figure { position:relative; display:inline-block; padding-top:50px; }
section.image figure.one-forth { width:25%; }
section.image figure.two-forth { width:50%; }
section.image figure.three-forth { width:75%; }
section.image figure.four-forth { width:100%; }
section.image figcaption { display:none; position:absolute; color:white; top:50%; text-align:center; transform:translateY(-50%); width:100%; } 
section.image figure:hover figcaption { display:block; }

/* Typography */
body, h1 { font-family:"HelveticaNeue"; font-size:20px; line-height:24px; letter-spacing:0.06em; font-weight:normal; font-style:normal; }

JavaScript

// div.pagewrap { width:80%; max-width:960px; margin:0 auto; }