added comments

hejsek · Dec 30, 2012 · 597bcd8 · 597bcd8
1 parent 6106f4e
commit 597bcd8
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 0 deletions.
diff --git a/_/css/default.css b/_/css/default.css
@@ -40,6 +40,14 @@ h1 a:hover {
 	padding: 8px;
 }
 
+.comment {
+	margin-bottom: 30px;
+}
+
+.comment .bottom {
+	color: #777777;
+}
+
 .footer {
 	background-color: #F5F5F5;
 	border-top: 1px solid #E5E5E5;

diff --git a/detail.html b/detail.html
@@ -67,6 +67,88 @@ <h2>Article name</h2>
 			<p>
 				<em class="pull-right">20 hours ago, by Tomáš Kolinger</em>
 			</p>
+
+			<h3>Comments</h3>
+			<div class="comment" id="comment-1">
+				<h4>
+					<a href="#comment-1">#1</a>
+					Tomáš Kolinger
+				</h4>
+				<p>
+					Nam vestibulum arcu at tellus commodo ultricies. Sed quis lectus ac mi tincidunt lobortis non nec
+					tellus. Vivamus malesuada adipiscing tempus. Sed quis lectus ac mi tincidunt lobortis non nec.
+				</p>
+				<p class="bottom">
+					20 minutes ago - <a href="#">respond</a>, reactions: <a href="#comment-2">[2] Franta Novák</a>, <a href="#comment-3">[3] Tomáš Kolinger</a>
+				</p>
+			</div>
+
+			<div class="comment" id="comment-2">
+				<h4>
+					<a href="#comment-2">#2</a>
+					Franta Novák
+				</h4>
+				<p>
+					<a href="#comment-1">[1] Tomáš Kolinger</a>: Nam vestibulum arcu at tellus commodo ultricies. Sed quis lectus ac mi tincidunt lobortis non nec
+					tellus. Vivamus malesuada adipiscing tempus. Sed quis lectus ac mi tincidunt lobortis non nec.
+				</p>
+				<p class="bottom">
+					23 minutes ago - <a href="#">respond</a>, reactions: <a href="#comment-3">[3] Tomáš Kolinger</a>
+				</p>
+			</div>
+
+			<div class="comment" id="comment-3">
+				<h4>
+					<a href="#comment-3">#3</a>
+					Tomáš Kolinger
+				</h4>
+				<p>
+					<a href="#comment-1">[1] Tomáš Kolinger</a>: Nam vestibulum arcu at tellus commodo ultricies. Sed quis lectus ac mi tincidunt lobortis non nec
+					tellus. Vivamus malesuada adipiscing tempus. Sed quis lectus ac mi tincidunt lobortis non nec.
+					<br>
+					<br>
+					<a href="#comment-2">[2] Franta Novák</a>: Nam vestibulum arcu at tellus commodo ultricies. Sed quis lectus ac mi tincidunt lobortis non nec
+					tellus. Vivamus malesuada adipiscing tempus. Sed quis lectus ac mi tincidunt lobortis non nec.
+				</p>
+				<p class="bottom">
+					1 day ago - <a href="#">respond</a>
+				</p>
+			</div>
+
+			<h3>Add comment</h3>
+			<form class="form-inline">
+				<div class="row-fluid">
+					<div class="pull-left">
+						<div class="control-group">
+							<label class="control-label" for="inputName">Name:</label>
+							<div class="controls">
+								<input type="text" id="inputName" placeholder="Name">
+							</div>
+						</div>
+					</div>
+					<div class="span5">
+						<div class="control-group">
+							<label class="control-label" for="inputEmail">E-mail:</label>
+							<div class="controls">
+								<input type="text" id="inputEmail" placeholder="E-mail">
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<div class="control-group">
+					<label class="control-label" for="inputContent">Text:</label>
+					<div class="controls">
+						<textarea rows="5" class="span11" id="inputContent"></textarea>
+					</div>
+				</div>
+
+				<div class="control-group">
+					<div class="controls">
+						<button type="submit" class="btn btn-primary btn-large">Send</button>
+					</div>
+				</div>
+			</form>
 		</div>
 	</div>