[mockups] added sketches page

mockups/base.html

@@ -19,6 +19,13 @@
         <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
+          <ul class="mr-auto navbar-nav">
+            <li class="nav-item">
+            <a class="nav-link" href="/sketches.html">
+                Sketches
+              </a>
+            </li>
+          </ul>
           <ul class="ml-auto navbar-nav">
             <!-- post login tools -->
             <li class="nav-item">

mockups/sketches.html

@@ -0,0 +1,33 @@
+{% extends "base.html" %}
+
+{% block content %}
+  <div class="container">
+    <div class="course-header">
+      <h1>Sketches</h1>
+    </div>
+
+    <div class="row sketches-gallery">
+      {% for s in sketches %}
+        <div class="col-md-3">
+          <div class="sketch-card">
+            <div class="sketch-image">
+              <a href="#">
+                <svg width="300" height="300" viewBox="0 0 300 300" fill="none" stroke="black" xmlns="http://www.w3.org/2000/svg">
+                  <circle cx="150" cy="150" r="150.0"></circle>
+                </svg>
+              </a>
+            </div>
+            <div class="sketch-footer">
+              <div class="sketch-title">
+                <a href="#">{{s.title}}</a>
+              </div>
+              <div class="sketch-author">
+                by {{s.author}}
+              </div>
+            </div>
+          </div>
+        </div>
+      {% endfor %}
+    </div>
+  </div>
+{% endblock %}

mockups/sketches.yml

@@ -0,0 +1,38 @@
+sketches:
+  - id: 20
+    title: Big Circle
+    author: Anand Chitipothu
+  - id: 19
+    title: Small Circle
+    author: Anand Chitipothu
+  - id: 18
+    title: Circles in Queue
+    author: Chaitanya
+  - id: 17
+    title: Random Bottom Circles
+    author: Anand Chitipothu
+  - id: 16
+    title: Pipes
+    author: Vishal
+  - id: 15
+    title: New Sketch
+    author: Malleshwari
+
+  - id: 20
+    title: Big Circle
+    author: Anand Chitipothu
+  - id: 19
+    title: Small Circle
+    author: Anand Chitipothu
+  - id: 18
+    title: Circles in Queue
+    author: Chaitanya
+  - id: 17
+    title: Random Bottom Circles
+    author: Anand Chitipothu
+  - id: 16
+    title: Pipes
+    author: Vishal
+  - id: 15
+    title: New Sketch
+    author: Malleshwari

mockups/static/style.css

@@ -198,3 +198,24 @@ img.profile-photo {
   max-width: 100%
 }
 
+.sketches-gallery svg {
+  width: 200px;
+  height: 200px;
+}
+
+.sketch-card {
+  background: white;
+  border-radius: 10px;
+  border: 1px solid #ddd;
+
+  margin: 10px;
+}
+
+.sketch-card .sketch-image {
+  padding: 10px;
+}
+
+.sketch-footer {
+  padding: 10px;
+  background: #eee;
+}