Add style manager images

index.html

@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8">
     <title>GrapesJS</title>
+    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico"/>
     <meta property="og:url" content="http://grapesjs.com" />
     <meta property="og:type" content="website" />
     <meta property="og:title" content="GrapesJS" />
@@ -149,37 +150,45 @@
           </div>
         </div>
 
-
         <div class="info-card info-card-blocks fadeInBlock columns">
           <div class="column col-6">
-            <div class="card-images card-images2">
+            <div class="card-images card-images3">
-              <div class="card-image-cont card-image-cont2 brd-image">
+              <div class="card-image-cont card-image-cont3 brd-image">
-                <img class="card-image card-image2" src="img/sc-grapesjs-responsive-2.jpg" alt="GrapesJS Responsive">
+                <img class="card-image card-image3" src="img/sc-grapesjs-style-3.jpg" alt="GrapesJS Style Manager">
+              </div>
+              <div class="card-image-cont card-image-cont32 brd-image">
+                <img class="card-image card-image3" src="img/sc-grapesjs-style-2.jpg" alt="GrapesJS Style Manager">
+              </div>
+              <div class="card-image-cont card-image-cont33 brd-image">
+                <img class="card-image card-image3" src="img/sc-grapesjs-style-1.jpg" alt="GrapesJS Style Manager">
               </div>
             </div>
           </div>
           <div class="column col-6 text-right">
-            <div class="info-card-title">Responsive by design</div>
+            <div class="info-card-title">Limitless styling</div>
-            <div class="info-card-description">GrapesJS gives you all the necessary tools you need to optimize your
+            <div class="info-card-description">Using the Style Manager you have the limitless possibility of styling, with user-friendly interface</div>
-              templates to look awesomely on any device. In this way you're able to provide various viewing experience.
-              In case more device options are required, you can easily add them to the editor.</div>
           </div>
         </div>
 
 
-        <div class="info-card fadeInBlock columns">
+        <div class="info-card info-card-blocks fadeInBlock columns">
           <div class="column col-6">
-            <div class="info-card-title">Limitless styling</div>
+            <div class="info-card-title">Responsive by design</div>
-            <div class="info-card-description">Using the Style Manager you have the limitless possibility of styling, with user-friendly interface</div>
+            <div class="info-card-description">GrapesJS gives you all the necessary tools you need to optimize your
+              templates to look awesomely on any device. In this way you're able to provide various viewing experience.
+              In case more device options are required, you can easily add them to the editor.</div>
           </div>
           <div class="column col-6">
-            <div id="img-c">
+            <div class="card-images card-images2">
-              <img data-gifffer="./img/gif-struct-m.gif"/>
+              <div class="card-image-cont card-image-cont2 brd-image">
+                <img class="card-image card-image2" src="img/sc-grapesjs-responsive-2.jpg" alt="GrapesJS Responsive">
+              </div>
             </div>
           </div>
         </div>
 
 
+
         <div class="info-card fadeInBlock columns">
           <div class="column col-6">
             <div id="img-c">

stylesheets/stylesheet.css

@@ -168,20 +168,45 @@ a {
   width: 100%;
 }
 
-.card-image-cont1 {
+.card-image-cont {
   border-color: #463a3b;
+}
+
+.card-image-cont1 {
   float: right;
   max-width: 344px;
 }
 
 .card-image-cont2 {
-  border-color: #463a3b;
+  float: left;
-  float: right;
   max-width: 1200px;
   width: 150%;
-  margin-right: 15%;
+  margin-left: 15%;
 }
 
+.card-image-cont3 {
+  margin: 0 auto;
+  max-width: 277px;
+}
+
+.card-image-cont32 {
+  left: -23%;
+  max-width: 277px;
+  position: absolute;
+  top: -7%;
+  z-index: -1;
+}
+
+.card-image-cont33 {
+  left: -23%;
+  max-width: 277px;
+  position: absolute;
+  top: 7%;
+  z-index: -1;
+}
+
+.card-image-cont33 {
  left: -50%;
  max-width: 277px;
  position: absolute;
  top: 15%;
  z-index: -2;
}
+
 .brd-image {
   border-width: 2px;
   border-style: solid;
@@ -454,12 +479,17 @@ a {
   width: 100%;
   z-index: 20;
 }
+/*  */
 @media screen and (min-width: 64em) {
+
   .main-content {
     background-color: #fafafa;
     padding: 2rem 6rem;
     margin: 0 auto;
-    font-size: 1.1rem; } }
+    font-size: 1.1rem;
+    overflow: hidden;
+  }
+}
 
 @media screen and (min-width: 42em) and (max-width: 64em) {
   .main-content {
@@ -546,7 +576,7 @@ a {
 
 .info-card {
   font-size: 25px;
-  margin: 0 0 250px;
+  margin: 0 0 100px;
   clear: both;
 }