done design

lyricsnode/views/index.html

@@ -27,11 +27,19 @@
 {% endmacro %}
 
 {% block content %}
+	<div class='row'>
+		<div class='large-6 columns'>
+			<h3 class='subheader'>Your song</h3>
+		</div>
+
+		<div class='large-6 columns'>
+			<h3 class='subheader'>Other's picks</h3>
+		</div>
+	</div>
+
 	<div class='row'>
 		<div class='large-6 columns' id='song'>
-			<textarea readonly>
-				hello!
-			</textarea>
+			<textarea readonly>hello!</textarea>
 		</div>
 
 		<div class='large-6 columns' id='quick-add'>
@@ -40,6 +48,35 @@
 			</div>
 		</div>
 	</div>
+
+	<div class='row'>
+		<div class='large-6 columns'>
+			<h3 class='subheader'>Tip</h3>
+		</div>
+
+		<div class='large-6 columns'>
+			<h3 class='subheader'>Solution</h3>
+		</div>
+	</div>
+
+	<div class='row'>
+		<div class='large-6 columns' id='pick'>
+			Artist: <span class='artist'></span><br/>
+			Song: <span class='song'></span>
+		</div>
+
+		<div class='large-6 columns' id='solution'>
+			Artist: <span class='artist'></span><br/>
+			Song: <span class='song'></span>
+		</div>
+	</div>
+
+	<div class='row'>
+		<div class='large-12 columns form-close'>
+			<button class='button radius secondary small'>Skip</button>
+			<button class='button radius small'>Next</button>
+		</div>
+	</div>
 {% endblock %}
 
 {% block styles %}
@@ -47,5 +84,20 @@
 #song textarea {
 	width: 100%;
 }
+
+#solution {
+	color: black;
+	background: black
+}
+
+#solution:hover {
+	color: white;
+	background: black;
+}
+
+.form-close {
+	margin-top: 15px;
+	text-align: center;
+}
 </style>
-{% endblock %}
+{% endblock %}