diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 000000000..b5319021a Binary files /dev/null and b/favicon.ico differ diff --git a/img/sc-grapesjs-style-1.jpg b/img/sc-grapesjs-style-1.jpg new file mode 100644 index 000000000..020b8a55b Binary files /dev/null and b/img/sc-grapesjs-style-1.jpg differ diff --git a/img/sc-grapesjs-style-2.jpg b/img/sc-grapesjs-style-2.jpg new file mode 100644 index 000000000..a48c9ae59 Binary files /dev/null and b/img/sc-grapesjs-style-2.jpg differ diff --git a/img/sc-grapesjs-style-3.jpg b/img/sc-grapesjs-style-3.jpg new file mode 100644 index 000000000..9d2772edb Binary files /dev/null and b/img/sc-grapesjs-style-3.jpg differ diff --git a/index.html b/index.html index 2bbf02195..4b3111858 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ GrapesJS + @@ -149,37 +150,45 @@ -
-
-
- GrapesJS Responsive +
+
+ GrapesJS Style Manager +
+
+ GrapesJS Style Manager +
+
+ GrapesJS Style Manager
-
Responsive by design
-
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.
+
Limitless styling
+
Using the Style Manager you have the limitless possibility of styling, with user-friendly interface
-
+
-
Limitless styling
-
Using the Style Manager you have the limitless possibility of styling, with user-friendly interface
+
Responsive by design
+
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.
-
- +
+
+ GrapesJS Responsive +
+
diff --git a/stylesheets/stylesheet.css b/stylesheets/stylesheet.css index 7fd5248bc..00dcea15a 100644 --- a/stylesheets/stylesheet.css +++ b/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: right; + float: left; 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; }