tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Update demo

pull/2301/head
Artur Arseniev 10 years ago
parent
1e536ff7f7
commit
49ee7e836e
7 changed files with 87 additions and 56 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      img/sc-grapesjs-blocks-prp.jpg
  2. BIN
      img/sc-grapesjs-blocks.jpg
  3. BIN
      img/sc-grapesjs-responsive-1.jpg
  4. BIN
      img/sc-grapesjs-responsive-2.jpg
  5. 102
      index.html
  6. 2
      js/main.js
  7. 39
      stylesheets/stylesheet.css

BIN
img/sc-grapesjs-blocks-prp.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
img/sc-grapesjs-blocks.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
img/sc-grapesjs-responsive-1.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 132 KiB

BIN
img/sc-grapesjs-responsive-2.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 104 KiB

102
index.html
View File

@ -79,11 +79,11 @@
<div class="bann-cont-c"> <div class="bann-cont-c">
<div class="bann-cont"> <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> </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 class="ddown-icon-c animated fadeInDown scroll-link" data-target=".what-sect">
<div id="ddown-icon" style="cursor:pointer">&lang;</div> <div id="ddown-icon" style="cursor:pointer">&lang;</div>
</div> </div>
@ -117,10 +117,10 @@
<div class="what-images"> <div class="what-images">
<div class="what-image-cont what-image-cont1"> <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>
<div class="what-image-cont what-image-cont2"> <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> </div>
</div> </div>
@ -134,29 +134,33 @@
<h1>Available end-user features</h1> <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="column col-6">
<div class="info-card-title">Drag&Drop Built-in Blocks</div> <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 <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>
<div class="column col-6"> <div class="column col-6">
<div id="img-c"> <div class="card-images card-images1">
<img data-gifffer="./img/gif-struct-m.gif"/> <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>
</div> </div>
<div class="info-card fadeInBlock columns"> <div class="info-card info-card-blocks fadeInBlock columns">
<div class="column col-6"> <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>
<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-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. 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> In case more device options are required, you can easily add them to the editor.</div>
</div> </div>
@ -165,8 +169,8 @@
<div class="info-card fadeInBlock columns"> <div class="info-card fadeInBlock columns">
<div class="column col-6"> <div class="column col-6">
<div class="info-card-title">No coding required</div> <div class="info-card-title">Limitless styling</div>
<div class="info-card-description">Create any kind of templates without any knowledge in coding</div> <div class="info-card-description">Using the Style Manager you have the limitless possibility of styling, with user-friendly interface</div>
</div> </div>
<div class="column col-6"> <div class="column col-6">
<div id="img-c"> <div id="img-c">
@ -176,40 +180,45 @@
</div> </div>
<div class="info-card fadeInBlock columns">
<div class="info-card fadeInBlock" id="card2"> <div class="column col-6">
<div id="desc">Easily insert images and text contents</div> <div id="img-c">
<div id="img-c"> <img data-gifffer="./img/gif-struct-m.gif"/>
<img data-gifffer="./img/gif-img-txt.gif"/> </div>
</div> </div>
<div class="clearfix"></div> <div class="column col-6">
</div> <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 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> </div>
<div class="clearfix"></div>
</div> </div>
<div class="info-card fadeInBlock" id="card4">
<div id="desc">Customize style of your components</div> <div class="info-card fadeInBlock columns">
<div id="img-c"> <div class="column col-6">
<img data-gifffer="./img/style-m.gif"/> <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>
<div class="clearfix"></div>
</div> </div>
<div class="info-card fadeInBlock" id="card4">
<div id="desc">Style faster complex stuff</div> <div class="info-card fadeInBlock columns">
<div id="img-c"> <div class="column col-6">
<img data-gifffer="./img/style-3d-text.gif"/> <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>
<div class="clearfix"></div>
</div> </div>
<!-- <!--
--- End user features ---
No coding No coding
Create any kind of templates without any knowledge in coding Create any kind of templates without any knowledge in coding
@ -223,21 +232,6 @@
without unnecessary parts. 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 --> <!-- 1255-630 -->
</div><!-- close body1 --> </div><!-- close body1 -->

2
js/main.js
View File

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

39
stylesheets/stylesheet.css
View File

@ -154,6 +154,43 @@ a {
width: 100%; 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) { @media screen and (min-width: 64em) {
.btn { .btn {
padding: 0.75rem 1rem; } padding: 0.75rem 1rem; }
@ -196,7 +233,7 @@ a {
} }
.page-header { .page-header {
min-height: 1000px; min-height: 550px;
} }
.logo-cont { .logo-cont {

Write Preview
Loading…
Cancel
Save