From b713cc5b50efbe96c7d56bcb99d941cd06d5e8ad Mon Sep 17 00:00:00 2001 From: Nadim Tuhin Date: Sat, 20 Jun 2015 01:41:00 +0600 Subject: [PATCH 1/9] [Refactor] now shapes are in a div with a float that looks better --- index.html | 228 +++++++++++++++++++++++++++-------------------------- 1 file changed, 116 insertions(+), 112 deletions(-) diff --git a/index.html b/index.html index 88ccdae..ab60f14 100644 --- a/index.html +++ b/index.html @@ -25,18 +25,22 @@ .shape li { list-style: none; - height: 60px; - width: 60px; - background: #fff; margin-bottom: 35px; } .shape li:last-child { margin-bottom: 0; } + + .shape li div{ + height: 60px; + width: 60px; + background: #fff; + float: left; + } .shape li span { - margin-left: 75px; + margin-left: 25px; line-height: 60px; font-size: 16px; } @@ -61,34 +65,34 @@

Making shapes just using
    -
  • s-square
    • -
  • s-square-2
    • -
  • s-square-3
    • -
  • s-square-4
    • +
  • s-square
    • +
  • s-square-2
    • +
  • s-square-3
    • +
  • s-square-4
    -
  • s-screen
    • -
  • s-screen-2
    • -
  • s-screen-3
    • -
  • s-screen-4
    • +
  • s-screen
    • +
  • s-screen-2
    • +
  • s-screen-3
    • +
  • s-screen-4
    -
  • s-lope
    • -
  • s-lope-2
    • -
  • s-lope-3
    • -
  • s-lope-4
    • +
  • s-lope
    • +
  • s-lope-2
    • +
  • s-lope-3
    • +
  • s-lope-4
    -
  • s-flag
    • -
  • s-flag-2
    • -
  • s-flag-3
    • -
  • s-flag-4
    • +
  • s-flag
    • +
  • s-flag-2
    • +
  • s-flag-3
    • +
  • s-flag-4
    -
  • s-rag
    • -
  • s-rag-2
    • -
  • s-rag-3
    • -
  • s-rag-4
    • +
  • s-rag
    • +
  • s-rag-2
    • +
  • s-rag-3
    • +
  • s-rag-4
@@ -96,46 +100,46 @@

Making shapes just using
    -
  • s-round
    • -
  • s-round-2
    • -
  • s-round-3
    • -
  • s-round-4
    • +
  • s-round
    • +
  • s-round-2
    • +
  • s-round-3
    • +
  • s-round-4
    -
  • s-egg
    • -
  • s-egg-2
    • -
  • s-egg-3
    • -
  • s-egg-4
    • +
  • s-egg
    • +
  • s-egg-2
    • +
  • s-egg-3
    • +
  • s-egg-4
    -
  • s-rugby
    • -
  • s-rugby-2
    • -
  • s-rugby-3
    • -
  • s-rugby-4
    • +
  • s-rugby
    • +
  • s-rugby-2
    • +
  • s-rugby-3
    • +
  • s-rugby-4
    -
  • s-kula
    • -
  • s-kula-2
    • -
  • s-kula-3
    • -
  • s-kula-4
    • +
  • s-kula
    • +
  • s-kula-2
    • +
  • s-kula-3
    • +
  • s-kula-4
    -
  • s-glap
    • -
  • s-glap-2
    • -
  • s-glap-3
    • -
  • s-glap-4
    • +
  • s-glap
    • +
  • s-glap-2
    • +
  • s-glap-3
    • +
  • s-glap-4
    -
  • s-pick
    • -
  • s-pick-2
    • -
  • s-pick-3
    • -
  • s-pick-4
    • +
  • s-pick
    • +
  • s-pick-2
    • +
  • s-pick-3
    • +
  • s-pick-4
    -
  • s-bomb
    • -
  • s-bomb-2
    • -
  • s-bomb-3
    • -
  • s-bomb-4
    • +
  • s-bomb
    • +
  • s-bomb-2
    • +
  • s-bomb-3
    • +
  • s-bomb-4
@@ -143,34 +147,34 @@

Making shapes just using
    -
  • s-drop
    • -
  • s-drop-2
    • -
  • s-drop-3
    • -
  • s-drop-4
    • +
  • s-drop
    • +
  • s-drop-2
    • +
  • s-drop-3
    • +
  • s-drop-4
    -
  • s-leaf
    • -
  • s-leaf-2
    • -
  • s-leaf-3
    • -
  • s-leaf-4
    • +
  • s-leaf
    • +
  • s-leaf-2
    • +
  • s-leaf-3
    • +
  • s-leaf-4
    -
  • s-lady
    • -
  • s-lady-2
    • -
  • s-lady-3
    • -
  • s-lady-4
    • +
  • s-lady
    • +
  • s-lady-2
    • +
  • s-lady-3
    • +
  • s-lady-4
    -
  • s-bird
    • -
  • s-bird-2
    • -
  • s-bird-3
    • -
  • s-bird-4
    • +
  • s-bird
    • +
  • s-bird-2
    • +
  • s-bird-3
    • +
  • s-bird-4
    -
  • s-holo
    • -
  • s-holo-2
    • -
  • s-holo-3
    • -
  • s-holo-4
    • +
  • s-holo
    • +
  • s-holo-2
    • +
  • s-holo-3
    • +
  • s-holo-4
@@ -178,34 +182,34 @@

Making shapes just using
    -
  • s-uoda
    • -
  • s-uoda-2
    • -
  • s-uoda-3
    • -
  • s-uoda-4
    • +
  • s-uoda
    • +
  • s-uoda-2
    • +
  • s-uoda-3
    • +
  • s-uoda-4
    -
  • s-lealo
    • -
  • s-lealo-2
    • -
  • s-lealo-3
    • -
  • s-lealo-4
    • +
  • s-lealo
    • +
  • s-lealo-2
    • +
  • s-lealo-3
    • +
  • s-lealo-4
    -
  • s-aleto
    • -
  • s-aleto-2
    • -
  • s-aleto-3
    • -
  • s-aleto-4
    • +
  • s-aleto
    • +
  • s-aleto-2
    • +
  • s-aleto-3
    • +
  • s-aleto-4
    -
  • s-hello
    • -
  • s-hello-2
    • -
  • s-hello-3
    • -
  • s-hello-4
    • +
  • s-hello
    • +
  • s-hello-2
    • +
  • s-hello-3
    • +
  • s-hello-4
    -
  • s-kullo
    • -
  • s-kullo-2
    • -
  • s-kullo-3
    • -
  • s-kullo-4
    • +
  • s-kullo
    • +
  • s-kullo-2
    • +
  • s-kullo-3
    • +
  • s-kullo-4
@@ -213,34 +217,34 @@

Making shapes just using
    -
  • s-slope
    • -
  • s-slope-2
    • -
  • s-slope-3
    • -
  • s-slope-4
    • +
  • s-slope
    • +
  • s-slope-2
    • +
  • s-slope-3
    • +
  • s-slope-4
    -
  • s-tray
    • -
  • s-tray-2
    • -
  • s-tray-3
    • -
  • s-tray-4
    • +
  • s-tray
    • +
  • s-tray-2
    • +
  • s-tray-3
    • +
  • s-tray-4
    -
  • s-toope
    • -
  • s-toope-2
    • -
  • s-toope-3
    • -
  • s-toope-4
    • +
  • s-toope
    • +
  • s-toope-2
    • +
  • s-toope-3
    • +
  • s-toope-4
    -
  • s-curv
    • -
  • curv-2
    • -
  • s-curv-3
    • -
  • s-curv-4
    • +
  • s-curv
    • +
  • curv-2
    • +
  • s-curv-3
    • +
  • s-curv-4
    -
  • s-bucket
    • -
  • s-bucket-2
    • -
  • s-bucket-3
    • -
  • s-bucket-4
    • +
  • s-bucket
    • +
  • s-bucket-2
    • +
  • s-bucket-3
    • +
  • s-bucket-4
From a2889cb920289056d8341cb99a31b0d9399ee77f Mon Sep 17 00:00:00 2001 From: Nadim Tuhin Date: Sat, 20 Jun 2015 02:01:17 +0600 Subject: [PATCH 2/9] [Refactor] generating html is complex. so generating dynamic html with javascript --- index.html | 221 +++++++++-------------------------------------------- 1 file changed, 34 insertions(+), 187 deletions(-) diff --git a/index.html b/index.html index ab60f14..84cc6c2 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ Shapes 2015 + @@ -49,6 +50,38 @@ margin-bottom: 75px; } + + + + -
-
    -
  • s-square
    • -
  • s-square-2
    • -
  • s-square-3
    • -
  • s-square-4
    • -
-
    -
  • s-screen
    • -
  • s-screen-2
    • -
  • s-screen-3
    • -
  • s-screen-4
    • -
-
    -
  • s-lope
    • -
  • s-lope-2
    • -
  • s-lope-3
    • -
  • s-lope-4
    • -
-
    -
  • s-flag
    • -
  • s-flag-2
    • -
  • s-flag-3
    • -
  • s-flag-4
    • -
-
    -
  • s-rag
    • -
  • s-rag-2
    • -
  • s-rag-3
    • -
  • s-rag-4
    • -
-
- - - -
-
    -
  • s-round
    • -
  • s-round-2
    • -
  • s-round-3
    • -
  • s-round-4
    • -
-
    -
  • s-egg
    • -
  • s-egg-2
    • -
  • s-egg-3
    • -
  • s-egg-4
    • -
-
    -
  • s-rugby
    • -
  • s-rugby-2
    • -
  • s-rugby-3
    • -
  • s-rugby-4
    • -
-
    -
  • s-kula
    • -
  • s-kula-2
    • -
  • s-kula-3
    • -
  • s-kula-4
    • -
-
    -
  • s-glap
    • -
  • s-glap-2
    • -
  • s-glap-3
    • -
  • s-glap-4
    • -
-
    -
  • s-pick
    • -
  • s-pick-2
    • -
  • s-pick-3
    • -
  • s-pick-4
    • -
-
    -
  • s-bomb
    • -
  • s-bomb-2
    • -
  • s-bomb-3
    • -
  • s-bomb-4
    • -
-
- - - -
-
    -
  • s-drop
    • -
  • s-drop-2
    • -
  • s-drop-3
    • -
  • s-drop-4
    • -
-
    -
  • s-leaf
    • -
  • s-leaf-2
    • -
  • s-leaf-3
    • -
  • s-leaf-4
    • -
-
    -
  • s-lady
    • -
  • s-lady-2
    • -
  • s-lady-3
    • -
  • s-lady-4
    • -
-
    -
  • s-bird
    • -
  • s-bird-2
    • -
  • s-bird-3
    • -
  • s-bird-4
    • -
-
    -
  • s-holo
    • -
  • s-holo-2
    • -
  • s-holo-3
    • -
  • s-holo-4
    • -
-
- - - -
-
    -
  • s-uoda
    • -
  • s-uoda-2
    • -
  • s-uoda-3
    • -
  • s-uoda-4
    • -
-
    -
  • s-lealo
    • -
  • s-lealo-2
    • -
  • s-lealo-3
    • -
  • s-lealo-4
    • -
-
    -
  • s-aleto
    • -
  • s-aleto-2
    • -
  • s-aleto-3
    • -
  • s-aleto-4
    • -
-
    -
  • s-hello
    • -
  • s-hello-2
    • -
  • s-hello-3
    • -
  • s-hello-4
    • -
-
    -
  • s-kullo
    • -
  • s-kullo-2
    • -
  • s-kullo-3
    • -
  • s-kullo-4
    • -
-
- - - -
-
    -
  • s-slope
    • -
  • s-slope-2
    • -
  • s-slope-3
    • -
  • s-slope-4
    • -
-
    -
  • s-tray
    • -
  • s-tray-2
    • -
  • s-tray-3
    • -
  • s-tray-4
    • -
-
    -
  • s-toope
    • -
  • s-toope-2
    • -
  • s-toope-3
    • -
  • s-toope-4
    • -
-
    -
  • s-curv
    • -
  • curv-2
    • -
  • s-curv-3
    • -
  • s-curv-4
    • -
-
    -
  • s-bucket
    • -
  • s-bucket-2
    • -
  • s-bucket-3
    • -
  • s-bucket-4
    • -
-
- - +
From 982575bf5781996b583f48403f29b0a027269149 Mon Sep 17 00:00:00 2001 From: Nadim Tuhin Date: Sat, 20 Jun 2015 02:08:46 +0600 Subject: [PATCH 3/9] the bottom had 1 col that looked bad so created 2 cols --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 84cc6c2..787cbec 100644 --- a/index.html +++ b/index.html @@ -74,7 +74,7 @@ ["lope", "rugby", "lady", "aleto", "toope"], ["flag", "kula", "bird", "hello", "curv"], ["rag", "glap", "holo", "kullo", "bucket"], - ["pick", "bomb"] + ["pick"], ["bomb"] ]; window.onload = function(){ From ece234ff1842e3244e65b04aa89099c8c612aa31 Mon Sep 17 00:00:00 2001 From: Nadim Tuhin Date: Sat, 20 Jun 2015 03:01:07 +0600 Subject: [PATCH 4/9] [feature] added example --- index.html | 103 +++++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 92 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 787cbec..4962e4f 100644 --- a/index.html +++ b/index.html @@ -12,14 +12,6 @@ @@ -92,9 +104,78 @@
-
+

Making shapes just using border-radius property

- + +
+
+

Style

+
+<style> 
+.red{	
+	height: 60px; 
+	width: 60px; 
+	background: red;
+} 
+.green{	
+	height: 60px; 
+	width: 60px; 
+	background: green;
+} 
+.blue{	
+	height: 60px; 
+	width: 60px; 
+	background: green;
+} 
+</style> 
+
+
+ +
+

HTML

+
+<div class="red s-leaf"></div>
+<div class="green s-leaf"></div>
+<div class="blue s-leaf"></div>
+
+<div class="red s-leaf-2"></div>
+<div class="green s-leaf-2"></div>
+<div class="blue s-leaf-2"></div>
+
+<div class="red s-leaf-3"></div>
+<div class="green s-leaf-3"></div>
+<div class="blue s-leaf-3"></div>
+
+<div class="red s-leaf-4"></div>
+<div class="green s-leaf-4"></div>
+<div class="blue s-leaf-4"></div>
+
+
+ + +
+

View

+
+
+
+ +
+
+
+ +
+
+
+ + +
+
+
+
+
+
+ +
From 48c04b69072726e8279da013c2657a7c39b60c14 Mon Sep 17 00:00:00 2001 From: Nadim Tuhin Date: Sat, 20 Jun 2015 03:01:18 +0600 Subject: [PATCH 5/9] [feature] added example --- README.md | 67 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 67 insertions(+) diff --git a/README.md b/README.md index 936f34d..15648e1 100644 --- a/README.md +++ b/README.md @@ -2,3 +2,70 @@ Making shapes just using border-radius property. ##[Live Demo](http://zafree.github.io/shapes/) + +
+
+

Style

+
+<style> 
+.red{	
+	height: 60px; 
+	width: 60px; 
+	background: red;
+} 
+.green{	
+	height: 60px; 
+	width: 60px; 
+	background: green;
+} 
+.blue{	
+	height: 60px; 
+	width: 60px; 
+	background: green;
+} 
+</style> 
+
+
+ +
+

HTML

+ 
+	<div class="red s-leaf"></div>
+	<div class="green s-leaf"></div>
+	<div class="blue s-leaf"></div>
+
+	<div class="red s-leaf-2"></div>
+	<div class="green s-leaf-2"></div>
+	<div class="blue s-leaf-2"></div>
+
+	<div class="red s-leaf-3"></div>
+	<div class="green s-leaf-3"></div>
+	<div class="blue s-leaf-3"></div>
+
+	<div class="red s-leaf-4"></div>
+	<div class="green s-leaf-4"></div>
+	<div class="blue s-leaf-4"></div>
+
+
+ + +
+

View

+
+
+
+ +
+
+
+ +
+
+
+ + +
+
+
+
+
\ No newline at end of file From 07cf5f39c8298bf577aa651ac86225d8039cdb28 Mon Sep 17 00:00:00 2001 From: Nadim Tuhin Date: Sat, 20 Jun 2015 03:09:33 +0600 Subject: [PATCH 6/9] [Refactor] 6 cols --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 4962e4f..c804c95 100644 --- a/index.html +++ b/index.html @@ -86,7 +86,7 @@ ["lope", "rugby", "lady", "aleto", "toope"], ["flag", "kula", "bird", "hello", "curv"], ["rag", "glap", "holo", "kullo", "bucket"], - ["pick"], ["bomb"] + ["pick", "bomb"] ]; window.onload = function(){ From b77e14e007b6445800d66adcc36f8f6762cf1763 Mon Sep 17 00:00:00 2001 From: Nadim Tuhin Date: Sat, 20 Jun 2015 03:09:56 +0600 Subject: [PATCH 7/9] [bug] readme bugfix --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 15648e1..af9a08a 100644 --- a/README.md +++ b/README.md @@ -68,4 +68,4 @@ Making shapes just using border-radius property.
- \ No newline at end of file + \ No newline at end of file From 4447bf895fb72fe26cb34dd5c2621f355fb3f318 Mon Sep 17 00:00:00 2001 From: Nadim Tuhin Date: Sat, 20 Jun 2015 03:09:33 +0600 Subject: [PATCH 8/9] [update] readme example updated --- README.md | 25 +++++-------------------- 1 file changed, 5 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index af9a08a..5e3fb6c 100644 --- a/README.md +++ b/README.md @@ -25,7 +25,7 @@ Making shapes just using border-radius property. } </style> - +

HTML

@@ -46,26 +46,11 @@ Making shapes just using border-radius property. <div class="green s-leaf-4"></div> <div class="blue s-leaf-4"></div> -
+

View

-
-
-
- -
-
-
- -
-
-
- - -
-
-
-
- \ No newline at end of file + ![Alt text](https://lh5.googleusercontent.com/nHy1CheF6Bvi6oLETm2XApTvkmYpIvAntLebg7NpsZ_olkTJ1XoPb-qWyAwVwAu2VI8Eq2UfU1N_NWo=w1342-h561 "Demo") + + From 86136df703955bbd65a7a77fbc6d1fdb60bd9788 Mon Sep 17 00:00:00 2001 From: Nadim Tuhin Date: Sat, 20 Jun 2015 03:17:45 +0600 Subject: [PATCH 9/9] updated readme example image --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 5e3fb6c..057754d 100644 --- a/README.md +++ b/README.md @@ -51,6 +51,6 @@ Making shapes just using border-radius property.

View

- ![Alt text](https://lh5.googleusercontent.com/nHy1CheF6Bvi6oLETm2XApTvkmYpIvAntLebg7NpsZ_olkTJ1XoPb-qWyAwVwAu2VI8Eq2UfU1N_NWo=w1342-h561 "Demo") +