Update demo

index.html

@@ -79,11 +79,11 @@
 
       <div class="bann-cont-c">
         <div class="bann-cont">
-          <img class="banner-img" src="img/grapesjs-front-page-m.jpg">
+          <img class="banner-img" src="img/grapesjs-front-page-m.jpg" alt="GrapesJS Webpage Demo">
         </div>
       </div>
 
-      <div class="ddown-c">
+      <div class="ddown-c" style="display:none">
         <div class="ddown-icon-c animated fadeInDown scroll-link" data-target=".what-sect">
           <div id="ddown-icon" style="cursor:pointer">&lang;</div>
         </div>
@@ -117,10 +117,10 @@
 
       <div class="what-images">
         <div class="what-image-cont what-image-cont1">
-          <img class="what-image what-image1" src="img/grapesjs-front-page-m.jpg">
+          <img class="what-image what-image1" src="img/grapesjs-front-page-m.jpg" alt="GrapesJS Webpage Demo">
         </div>
         <div class="what-image-cont what-image-cont2">
-          <img class="what-image what-image2" src="img/sc-grapesjs-newsletter-demo.jpg">
+          <img class="what-image what-image2" src="img/sc-grapesjs-newsletter-demo.jpg" alt="GrapesJS Newsletter Demo">
         </div>
       </div>
     </div>
@@ -134,29 +134,33 @@
         <h1>Available end-user features</h1>
 
 
-        <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">Drag&Drop Built-in Blocks</div>
             <div class="info-card-description">GrapesJS comes with a set of built-in blocks, in this way you're able to
-              build your design content faster. If the default set is not enough you can add your own custom blocks.</div>
+              build your templates faster. If the default set is not enough you can always add your own custom blocks.</div>
           </div>
           <div class="column col-6">
-            <div id="img-c">
-              <img data-gifffer="./img/gif-struct-m.gif"/>
+            <div class="card-images card-images1">
+              <div class="card-image-cont card-image-cont1 brd-image">
+                <img class="card-image card-image1" src="img/sc-grapesjs-blocks-prp.jpg" alt="GrapesJS Blocks">
+              </div>
             </div>
           </div>
         </div>
 
 
-        <div class="info-card fadeInBlock columns">
+        <div class="info-card info-card-blocks fadeInBlock columns">
           <div class="column col-6">
-            <div id="img-c">
-              <img data-gifffer="./img/gif-struct-m.gif"/>
+            <div class="card-images card-images2">
+              <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 class="column col-6">
+          <div class="column col-6 text-right">
             <div class="info-card-title">Responsive by design</div>
-            <div class="info-card-description">GrapesJS gives you all the necessary tools that you need to optimize your
+            <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>
@@ -165,8 +169,8 @@
 
         <div class="info-card fadeInBlock columns">
           <div class="column col-6">
-            <div class="info-card-title">No coding required</div>
-            <div class="info-card-description">Create any kind of templates without any knowledge in coding</div>
+            <div class="info-card-title">Limitless styling</div>
+            <div class="info-card-description">Using the Style Manager you have the limitless possibility of styling, with user-friendly interface</div>
           </div>
           <div class="column col-6">
             <div id="img-c">
@@ -176,40 +180,45 @@
         </div>
 
 
-
-        <div class="info-card fadeInBlock" id="card2">
-          <div id="desc">Easily insert images and text contents</div>
-          <div id="img-c">
-            <img data-gifffer="./img/gif-img-txt.gif"/>
+        <div class="info-card fadeInBlock columns">
+          <div class="column col-6">
+            <div id="img-c">
+              <img data-gifffer="./img/gif-struct-m.gif"/>
+            </div>
           </div>
-          <div class="clearfix"></div>
-        </div>
-
-        <div class="info-card fadeInBlock" id="card3">
-          <div id="desc">Layer Manager, navigate and manage the structure</div>
-          <div id="img-c">
-            <img data-gifffer="./img/layer-m.gif"/>
+          <div class="column col-6">
+            <div class="info-card-title">Your structure always under control</div>
+            <div class="info-card-description">Create any kind of templates without any knowledge in coding</div>
           </div>
-          <div class="clearfix"></div>
         </div>
 
-        <div class="info-card fadeInBlock" id="card4">
-          <div id="desc">Customize style of your components</div>
-          <div id="img-c">
-            <img data-gifffer="./img/style-m.gif"/>
+
+        <div class="info-card fadeInBlock columns">
+          <div class="column col-6">
+            <div class="info-card-title">No coding required</div>
+            <div class="info-card-description">Create any kind of templates without any knowledge in coding</div>
+          </div>
+          <div class="column col-6">
+            <div id="img-c">
+              <img data-gifffer="./img/gif-struct-m.gif"/>
+            </div>
           </div>
-          <div class="clearfix"></div>
         </div>
 
-        <div class="info-card fadeInBlock" id="card4">
-          <div id="desc">Style faster complex stuff</div>
-          <div id="img-c">
-            <img data-gifffer="./img/style-3d-text.gif"/>
+
+        <div class="info-card fadeInBlock columns">
+          <div class="column col-6">
+            <div id="img-c">
+              <img data-gifffer="./img/gif-struct-m.gif"/>
+            </div>
+          </div>
+          <div class="column col-6">
+            <div class="info-card-title">Asset Manager</div>
+            <div class="info-card-description">Create any kind of templates without any knowledge in coding</div>
           </div>
-          <div class="clearfix"></div>
         </div>
+
         <!--
-        --- End user features ---
 
         No coding
          Create any kind of templates without any knowledge in coding
@@ -223,21 +232,6 @@
          without unnecessary parts.
 
       -->
-        <!--div class="info-card fadeInBlock" id="card4">
-          <div id="desc">With any CSS property, even transitions or 3D (experimental)</div>
-          <div id="img-c">
-            <img src="http://placehold.it/450x300/78c5d6/fff/image1.jpg"/>
-          </div>
-          <div class="clearfix"></div>
-        </div-->
-
-        <!--div class="info-card fadeInBlock" id="card4">
-          <div id="desc">Export the code and use it everywhere</div>
-          <div id="img-c">
-            <img src="http://placehold.it/450x300/78c5d6/fff/image1.jpg"/>
-          </div>
-          <div class="clearfix"></div>
-        </div-->
         <!-- 1255-630 -->
 
       </div><!-- close body1 -->

js/main.js

@@ -3,7 +3,7 @@ $(document).ready(function(){
   var $header = $('section.page-header');
   var viewportH = $(window).height();
   var $root = $('html');
-  $header.css('min-height', viewportH);
+  //$header.css('min-height', viewportH);
   //$('#yourElement').one(aniEnd, doSomething);
   //
   var $win = $(window);

stylesheets/stylesheet.css

@@ -154,6 +154,43 @@ a {
   width: 100%;
 }
 
+.info-card-blocks {
+  align-items: center;
+  display: flex;
+}
+
+.card-images {
+  position: relative;
+}
+
+.card-image {
+  display: block;
+  width: 100%;
+}
+
+.card-image-cont1 {
+  border-color: #463a3b;
+  float: right;
+  max-width: 344px;
+}
+
+.card-image-cont2 {
+  border-color: #463a3b;
+  float: right;
+  max-width: 1200px;
+  width: 150%;
+  margin-right: 15%;
+}
+
+.brd-image {
+  border-width: 2px;
+  border-style: solid;
+  border-radius: 3px;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+}
+
+
 @media screen and (min-width: 64em) {
   .btn {
     padding: 0.75rem 1rem; }
@@ -196,7 +233,7 @@ a {
 }
 
 .page-header {
-  min-height: 1000px;
+  min-height: 550px;
 }
 
 .logo-cont {