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

Update main content

pull/2301/head
Artur Arseniev 10 years ago
parent
f0d147ee91
commit
c84bfc583f
7 changed files with 172 additions and 68 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      img/sc-grapesjs-assets-1.jpg
  2. BIN
      img/sc-grapesjs-assets-2.jpg
  3. BIN
      img/sc-grapesjs-code.jpg
  4. BIN
      img/sc-grapesjs-layers-1.jpg
  5. BIN
      img/sc-grapesjs-layers-2.jpg
  6. 106
      index.html
  7. 134
      stylesheets/stylesheet.css

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 84 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 137 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

106
index.html
View File

@ -30,7 +30,7 @@
<div class="width-all top-header">
<div class="columns">
<div class="column col-6 col-md-12 text-left">
<div class="column col-6 col-md-12 text-left column-logo">
<span class="logo-cont no-sel">
<img class="top-logo-grapesjs" src="img/grapesjs-logo-cl.png"/>
GrapesJS <span class="b-badge" style="display: none">beta</span>
@ -132,16 +132,16 @@
<section class="main-content">
<div class="body-c body1 width-all">
<h1>Available end-user features</h1>
<h1 class="main-section-title">Available end-user features</h1>
<div class="info-card info-card-blocks fadeInBlock columns">
<div class="column col-6">
<div class="column col-6 col-md-12">
<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 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 class="column col-6 col-md-12">
<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">
@ -151,7 +151,7 @@
</div>
<div class="info-card info-card-blocks fadeInBlock columns">
<div class="column col-6">
<div class="column col-6 col-md-12 card-column3-1">
<div class="card-images card-images3">
<div class="card-image-cont card-image-cont3 brd-image">
<img class="card-image card-image3" src="img/sc-grapesjs-style-3.jpg" alt="GrapesJS Style Manager">
@ -164,21 +164,23 @@
</div>
</div>
</div>
<div class="column col-6 text-right">
<div class="column col-6 col-md-12 text-right card-column3-2">
<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 class="info-card-description">GrapesJS implements simple and powerful Style Manager module which enables
independent styling of any component inside the canvas. It's also possible to configure it to use any of the
CSS properties</div>
</div>
</div>
<div class="info-card info-card-blocks fadeInBlock columns">
<div class="column col-6">
<div class="info-card-title">Responsive by design</div>
<div class="column col-6 col-md-12">
<div class="info-card-title">Responsive design</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 class="column col-6 col-md-12">
<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">
@ -188,61 +190,62 @@
</div>
<div class="info-card fadeInBlock columns">
<div class="column col-6">
<div id="img-c">
<img data-gifffer="./img/gif-struct-m.gif"/>
<div class="info-card info-card-blocks fadeInBlock columns">
<div class="column col-6 col-md-12 card-column4-1">
<div class="card-images card-images3">
<div class="card-image-cont card-image-cont4 brd-image">
<img class="card-image card-image3" src="img/sc-grapesjs-layers-1.jpg" alt="GrapesJS Style Manager">
</div>
<div class="card-image-cont card-image-cont42 brd-image">
<img class="card-image card-image3" src="img/sc-grapesjs-layers-2.jpg" alt="GrapesJS Style Manager">
</div>
</div>
</div>
<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 class="column col-6 col-md-12 card-column4-2 text-right">
<div class="info-card-title">The structure always under control</div>
<div class="info-card-description">You can nest components as much as you can but when the structure begins to grow
the Layer Manager comes very handy. It allows you to manage and rearrange your elements extremely faster, focusing
always on the architecture of your structure.</div>
</div>
</div>
<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 info-card-blocks fadeInBlock columns">
<div class="column col-6 col-md-12">
<div class="info-card-title">The code is there when you need it</div>
<div class="info-card-description">You don't have to care about the code, but it's always there, available for you. When
the work is done you can grab and use it wherever you want. Developers could also implement their own storage interfaces
to use inside the editor.</div>
</div>
<div class="column col-6">
<div id="img-c">
<img data-gifffer="./img/gif-struct-m.gif"/>
<div class="column col-6 col-md-12">
<div class="card-images card-images2">
<div class="card-image-cont card-image-cont6 brd-image">
<img class="card-image card-image6" src="img/sc-grapesjs-code.jpg" alt="GrapesJS Code">
</div>
</div>
</div>
</div>
<div class="info-card fadeInBlock columns">
<div class="column col-6">
<div id="img-c">
<img data-gifffer="./img/gif-struct-m.gif"/>
<div class="info-card info-card-blocks fadeInBlock columns">
<div class="column col-6 col-md-12 card-column5-1">
<div class="card-images card-images3">
<div class="card-image-cont card-image-cont5 brd-image">
<img class="card-image card-image5" src="img/sc-grapesjs-assets-1.jpg" alt="GrapesJS Asset Manager">
</div>
<div class="card-image-cont card-image-cont52 brd-image">
<img class="card-image card-image52" src="img/sc-grapesjs-assets-2.jpg" alt="GrapesJS Asset Manager">
</div>
</div>
</div>
<div class="column col-6">
<div class="column col-6 col-md-12 card-column5-2 text-right">
<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 class="info-card-description">With the Asset Manager is easier to organize your media files and it's
enough to double click on the image to change it</div>
</div>
</div>
<!--
No coding
Create any kind of templates without any knowledge in coding
Fast
GrapesJS gives you great performances so you can
manage large nested templates without losing frame rates
Clean output
Under the hood GrapesJS generates a clean and optimized code,
without unnecessary parts.
-->
<!-- 1255-630 -->
</div><!-- close body1 -->
</section>
@ -275,7 +278,12 @@
<section class="footer-content">
<div class="footer-c width-all">
<div class="title">The project is still in beta, so stay tuned for new features</div>
<div class="title">
The project is still under development, so
<a class="darker-link" href="https://twitter.com/GrapesJS_feed" target="_blank">stay tuned</a>.
<br/>
Being a free and open source project contributors and supporters are extremely welcome.
</div>
<div class="btns-c">
<a class="btn btn-gjs" href="https://github.com/artf/grapesjs/wiki" target="_blank">View Docs</a>
</div>
@ -292,7 +300,7 @@
<section class="copyr-content">
<div class="copyr-c width-all">
made with <span class="animated pulse infinite" style="display: inline-block">♥</span> by <a href="https://github.com/artf">Artur Arseniev</a>
made with <span class="animated pulse infinite" style="display: inline-block">♥</span> by <a class="darker-link" href="https://github.com/artf">Artur Arseniev</a>
</div>
</section>

134
stylesheets/stylesheet.css
View File

@ -180,7 +180,7 @@ a {
.card-image-cont2 {
float: left;
max-width: 1200px;
width: 150%;
width: 200%;
margin-left: 15%;
}
@ -207,6 +207,42 @@ a {
.card-image-cont33 { left: -50%; max-width: 277px; position: absolute; top: 15%; z-index: -2; }
.card-image-cont4 {
margin: 0 auto;
max-width: 250px;
}
.card-image-cont42 {
left: -15%;
max-width: 250px;
position: absolute;
top: -7%;
z-index: -1;
}
.card-image-cont5 {
float: right;
margin: 0 15% 0 auto;
max-width: 849px;
width: 130%;
}
.card-image-cont52 {
max-width: 1200px;
position: absolute;
right: 80%;
top: -39px;
width: 175%;
z-index: -1;
}
.card-image-cont6 {
float: left;
margin-left: 15%;
max-width: 800px;
width: 150%;
}
.brd-image {
border-width: 2px;
border-style: solid;
@ -338,6 +374,7 @@ a {
opacity: 0.9;
position: relative;
z-index: 10;
font-size: 2em;
}
.project-tagline > span {
@ -345,17 +382,12 @@ a {
opacity: 0.85;
}
@media screen and (min-width: 64em) {
.project-tagline {
font-size: 2rem; } }
@media screen and (min-width: 64em) {}
@media screen and (min-width: 42em) and (max-width: 64em) {
.project-tagline {
font-size: 1.15rem; } }
}
@media screen and (max-width: 42em) {
.project-tagline {
font-size: 1rem; } }
@media screen and (max-width: 42em) { }
.main-content :first-child {
margin-top: 0; }
@ -479,16 +511,19 @@ a {
width: 100%;
z-index: 20;
}
.main-content {
background-color: #fafafa;
padding: 2rem 6rem 10rem;
margin: 0 auto;
font-size: 1.1rem;
overflow: hidden;
}
/* */
@media screen and (min-width: 64em) {
.main-content {
background-color: #fafafa;
padding: 2rem 6rem;
margin: 0 auto;
font-size: 1.1rem;
overflow: hidden;
}
}
@media screen and (min-width: 42em) and (max-width: 64em) {
@ -542,8 +577,12 @@ a {
font-size: 1rem; } }
@media screen and (max-width: 42em) {
.site-footer {
font-size: 0.9rem; } }
font-size: 0.9rem;
}
}
.clearfix{
clear: both;
@ -582,7 +621,8 @@ a {
.info-card-title {
font-size: 2.5rem;
line-height: 5rem;
line-height: 3rem;
margin-bottom: 1rem;
}
.info-card-description {
@ -673,7 +713,7 @@ a {
padding: 10px 0;
text-align: center;
}
.copyr-c a{
.darker-link{
color: #9e5381;
}
.gifffer-play-button {
@ -781,3 +821,59 @@ a {
letter-spacing: 1px;
padding: 3px 8px 7px;
}
@media screen and (max-width: 42em) {
body {
font-size: 14px;
}
.column-logo, .top-nav {
text-align: center;
}
.section-content, .info-card-description {
text-align: justify;
}
.info-card-title {
text-align: center;
font-size: 2rem;
}
.what-images {
height: 250px;
}
.main-section-title {
font-size: 1.5rem;
}
.card-column3-1,
.card-column4-1,
.card-column5-1 {
order: 2;
}
.card-column3-2,
.card-column4-2,
.card-column5-2 {
margin-bottom: 50px;
}
.card-image-cont1,
.card-image-cont2,
.card-image-cont6,
.card-image-cont5 {
margin: 0 auto;
width: 100%;
}
.card-image-cont32,
.card-image-cont33,
.card-image-cont42,
.card-image-cont52 {
display: none;
}
}

Write Preview
Loading…
Cancel
Save