Refactor: directory structure

css_shapes/base.css

@@ -75,20 +75,20 @@ code {
 
 .shape-2 {
   float: left;
-  shape-outside: url('button.png');
+  shape-outside: url('img/button.png');
   margin-right: 15px;
   shape-margin: 10px;
 }
 
 .shape-2b {
   float: right;
-  shape-outside: url('hand.png');
+  shape-outside: url('img/hand.png');
   shape-image-threshold: .1;
 }
 
 .shape-2c {
   float: left;
-  shape-outside: url('blend.png');
+  shape-outside: url('img/blend.png');
   shape-image-threshold: .9;
 }
 

css_shapes/index.html

@@ -43,20 +43,20 @@ <h2 class="primary-heading">properties</h2>
 
     <section>
       <h2 class="primary-heading">shapes from images</h2>
-      <img src="button.png" class="shape-2">
+      <img src="img/button.png" class="shape-2">
       <p>You can use an image that has transparency to define the shape. Here, I've placed and floated and image, then added the property <code>shape-outside: url('button.png')</code>. In order for this to work though, the image has to be <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" target="_blank">CORS compatible</a>, which basically means that the shape-outside image must be on the same server as the web page. Unfortunately though, this doesn't translate when you're testing locally (CORS doesn't seem to like <code>file:///</code>). To work around this do one of the following:</p>
 
       <ul>
         <li>use Safari and from the Develop menu, choose "Disable Local File Restrictions". </li>
         <li>use python to run a simple local server from your testing directory with <code>python -m SimpleHTTPServer</code> OR <code>python3 -m http.server</code>, then access your files through <code>http://localhost:8000/</code>.
       </ul>
 
-      <img src="hand.png" class="shape-2b">
+      <img src="img/hand.png" class="shape-2b">
       <p class="filler">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget sodales arcu. Nulla tincidunt ipsum tortor, ut mollis lacus accumsan id. Phasellus fermentum sem eu orci hendrerit, ac tincidunt velit feugiat. Fusce mollis, ligula sed consectetur sollicitudin, quam erat lobortis risus, in volutpat metus diam ac velit. Nulla luctus magna sed purus lobortis, non laoreet ligula sodales. Phasellus eget sodales arcu. Nulla tincidunt ipsum tortor, ut mollis lacus accumsan id.</p>
 
       <h2 class="primary-heading">...with shape-image-threshold</h2>
 
-      <img src="blend.png" class="shape-2c">
+      <img src="img/blend.png" class="shape-2c">
       <p class="filler">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget sodales arcu. Nulla tincidunt ipsum tortor, ut mollis lacus accumsan id. Phasellus fermentum sem eu orci hendrerit, ac tincidunt velit feugiat. Fusce mollis, ligula sed consectetur sollicitudin, quam erat lobortis risus, in volutpat metus diam ac velit. Nulla luctus magna sed purus lobortis, non laoreet ligula sodales. Phasellus eget sodales arcu. Nulla tincidunt ipsum tortor, ut mollis lacus accumsan id.</p>
     </section>
 
@@ -126,7 +126,7 @@ <h2 class="primary-heading">using pseudo-elements</h2>
 
     <section>
       <h2 class="primary-heading">combining with clip-path</h2>
-      <img src="clouds.jpg" class="shape-12">
+      <img src="img/clouds.jpg" class="shape-12">
       <p class="">The same basic shape values used for shape-outside can be used with clip-path. For example the image to the left has the properties: <code>shape-outside: ellipse(40% 50%); clip-path: ellipse(40% 50%);</code></p>
     </section>