viafoura-comment-widget-demo

by darcyclarke

HTML

<div class="viafoura">
        <header class="vf-header clearfix">
            <div class="vf-login">
                <a href="#">Login</a> / <a href="#">Signup</a>
            </div>
            <div class="vf-branding clearfix">
                <h1>powered by: </h1>
                <img src="http://darcyclarke.me/work/viafoura/logo.jpg" alt="Viafoura">        
            </div>
        </header> <!-- end of .vf-comment-form header -->
        <form class="vf-comment-form">
            <textarea placeholder="Add video, photo, or type here..."></textarea>
            <div class="clearfix">
                <div class="vf-options clearfix">
                    <h3>Upload / Attach:</h3> 
                    <a href="#" class="vf-button vf-video-button">Video</a>
                    <a href="#" class="vf-button vf-photo-button">Photo</a>
                </div>
                <button type="submit" class="vf-button vf-submit-button">Submit</button>
            </div>
        </form>
        <section class="vf-comments">
            <header class="vf-comments-header clearfix">
                <h1><b>42</b> Comments</h1>
                <div class="vf-comments-sort">
                    <h3>Sort By: <a href="#">Date</a> | <a href="#">Liked</a></h3>
                </div> <!-- end of .vf-comments-sort -->
            </header> <!-- end of .vf-comments-header -->
            <div class="vf-comment">
                <article class="clearfix">
                    <aside class="vf-comment-avatar">
                        <img src="http://simonjung.com/images/avatar.jpg" alt="Ali Ghafour">
                    </aside> <!-- end of .vf-comment -->
                    <div class="vf-comment-container">
                        <div class="vf-comment-content">
                            <header class="vf-comment-header clearfix">
                                <h1 class="vf-username"><a href="#">alighafour</a><b class="vf-rank"> | rank 12</b></h1>
                              ...

CSS

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

blockquote, q { quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after { content: ""; content: none; }

ins { background-color: #ff9; color: #000; text-decoration: none; }

mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }

table { border-collapse: collapse; border-spacing: 0; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

input, select { vertical-align: middle; }


/**
 * Font normalization inspired by YUI Library's fonts.css: developer.yahoo.com/yui/
 */

body { font:12px/1.231 sans-serif; *font-size:small; } /* Hack retained to preserve specificity */
select, input, textarea, button { font:99% sans-serif; }

/* Normalize monospace sizing:
   en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */
pre, code, kbd, samp { font-family: monospace, sans-serif; }


/**
 * Minimal base styles.
 */

/* Always force a scrollbar in non-IE */
html { overflow-y: scroll; }

/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active { outline: none; }

ul, ol { margin-left: 0; }
ol { list-style-type: decimal; }

/* Remove margins for navigation lists...