Add profile template

README.md

@@ -16,6 +16,7 @@ Templates:
 -  hero ([demo](https://dansup.github.io/bulma-templates/templates/hero.html) | [source](https://raw.githubusercontent.com/dansup/bulma-templates/master/templates/hero.html))
 -  login ([demo](https://dansup.github.io/bulma-templates/templates/login.html) | [source](https://raw.githubusercontent.com/dansup/bulma-templates/master/templates/login.html))
 -  product ([demo](https://dansup.github.io/bulma-templates/templates/product.html) | [source](https://raw.githubusercontent.com/dansup/bulma-templates/master/templates/product.html))
+-  profile ([demo](https://dansup.github.io/bulma-templates/templates/profile.html) | [source](https://raw.githubusercontent.com/dansup/bulma-templates/master/templates/profile.html))
 -  projects ([demo](https://dansup.github.io/bulma-templates/templates/projects.html) | [source](https://raw.githubusercontent.com/dansup/bulma-templates/master/templates/projects.html))
 -  register ([demo](https://dansup.github.io/bulma-templates/templates/register.html) | [source](https://raw.githubusercontent.com/dansup/bulma-templates/master/templates/register.html))
 -  timeline ([demo](https://dansup.github.io/bulma-templates/templates/timeline.html) | [source](https://raw.githubusercontent.com/dansup/bulma-templates/master/templates/timeline.html))

css/profile.css

@@ -0,0 +1,65 @@
+body {
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+}
+.container.profile {
+  margin-top:50px;
+}
+.profile-heading {
+  margin: 20px 0;
+  padding-bottom: 30px;
+}
+.profile-heading .name {
+  border-right: 1px solid #f1f1f1;
+  margin:-30px 0;
+  padding: 40px 30px 0 30px;
+}
+.profile-heading .followers, .profile-heading .following {
+  border-right: 1px solid #f1f1f1;
+  margin:-30px 0;
+  padding: 70px 30px;
+}
+.profile-heading .likes {
+  margin:-30px 0;
+  padding: 70px 30px;
+}
+.profile-heading .stat-key {
+  font-size: 20px;
+  font-weight: 200;
+}
+.profile-heading .stat-val {
+  font-size: 35px;
+  font-weight: bold;
+}
+.profile-options {
+  background-color: #f1f1f1;
+  margin:-20px 0 20px 0;
+}
+.profile-options .link a {
+  padding:18px;
+  font-size: 18px;
+}
+.profile-options .link .icon {
+  font-size: 16px;
+  padding-top:2px;
+}
+.tagline {
+  padding:20px 0;
+  font-size: 16px;
+  line-height: 1.4;
+}
+.avatar {
+  float: right;
+}
+.follow {
+  float: right;
+}
+.avatar img {
+  border-radius: 200px;
+}
+p.title.is-bold {
+  font-weight: bold;
+}
+.card .timestamp {
+  float:right;
+  color:#bbb;
+}

index.html

@@ -152,6 +152,18 @@ <h4 class="subtitle is-5">An ecommerce product page</h4>
             <figure class="image"><img src="images/product.png"></figure>
           </a>
         </div>
+        <div class="column is-one-third">
+          <a class="box" href="templates/profile.html">
+            <h3 class="title is-4">
+            Profile
+            <span class="tag is-primary">
+              v 0.1.0
+            </span>
+            </h3>
+            <h4 class="subtitle is-5">A user profile layout page</h4>
+            <figure class="image"><img src="images/profile.png"></figure>
+          </a>
+        </div>
         <div class="column is-one-third">
           <a class="box" href="templates/projects.html">
             <h3 class="title is-4">