learn-javascript-the-hard-way
/
fsckcss
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Last demo is overlaying a grid on top of a graphic for that fancy landing page look.

Browse Source
master
Zed A. Shaw 4 years ago
parent 3abcc20886
commit c31e280bb8
8 changed files with 444 additions and 92 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 4
      public/build/bundle.css
  2. 353
      public/build/bundle.js
  3. 2
      public/build/bundle.js.map
  4. 56
      public/code/GridOverGraphic.css
  5. 23
      public/code/GridOverGraphic.html
  6. 3
      src/demos/GridOverGraphic.svelte
  7. 2
      src/demos/index.svelte
  8. 93
      src/thumbs/GridOverGraphic.svelte

4
public/build/bundle.css
View File

File diff suppressed because one or more lines are too long

353
public/build/bundle.js
Unescape View File

@ -7282,8 +7282,9 @@ var app = (function () {
}
}
/* src/demos/GridOverGraphic.svelte generated by Svelte v3.30.0 */
const file$e = "src/demos/GridOverGraphic.svelte";
/* src/thumbs/GridOverGraphic.svelte generated by Svelte v3.30.0 */
const file$e = "src/thumbs/GridOverGraphic.svelte";
function create_fragment$f(ctx) {
let content;
@ -7341,30 +7342,30 @@ var app = (function () {
t12 = space();
p2 = element("p");
p2.textContent = "I don't know why I put that sphere there.";
add_location(h10, file$e, 71, 2, 1223);
add_location(h10, file$e, 65, 2, 1084);
if (img.src !== (img_src_value = "/ice_cream_graphic.svg")) attr_dev(img, "src", img_src_value);
attr_dev(img, "class", "svelte-15ytpc8");
add_location(img, file$e, 75, 4, 1285);
attr_dev(background, "class", "svelte-15ytpc8");
add_location(background, file$e, 74, 4, 1268);
add_location(h11, file$e, 80, 8, 1375);
add_location(p0, file$e, 81, 8, 1414);
attr_dev(one, "class", "svelte-15ytpc8");
add_location(one, file$e, 79, 6, 1361);
add_location(h12, file$e, 86, 6, 1527);
add_location(p1, file$e, 87, 6, 1557);
attr_dev(two, "class", "svelte-15ytpc8");
add_location(two, file$e, 85, 6, 1515);
add_location(h13, file$e, 91, 6, 1720);
add_location(p2, file$e, 92, 6, 1748);
attr_dev(three, "class", "svelte-15ytpc8");
add_location(three, file$e, 90, 6, 1706);
attr_dev(overlay, "class", "svelte-15ytpc8");
add_location(overlay, file$e, 78, 4, 1345);
attr_dev(icecream, "class", "svelte-15ytpc8");
add_location(icecream, file$e, 73, 2, 1253);
attr_dev(content, "class", "svelte-15ytpc8");
add_location(content, file$e, 70, 0, 1211);
attr_dev(img, "class", "svelte-1n9y415");
add_location(img, file$e, 69, 4, 1146);
attr_dev(background, "class", "svelte-1n9y415");
add_location(background, file$e, 68, 4, 1129);
add_location(h11, file$e, 74, 8, 1236);
add_location(p0, file$e, 75, 8, 1275);
attr_dev(one, "class", "svelte-1n9y415");
add_location(one, file$e, 73, 6, 1222);
add_location(h12, file$e, 80, 6, 1388);
add_location(p1, file$e, 81, 6, 1418);
attr_dev(two, "class", "svelte-1n9y415");
add_location(two, file$e, 79, 6, 1376);
add_location(h13, file$e, 85, 6, 1581);
add_location(p2, file$e, 86, 6, 1609);
attr_dev(three, "class", "svelte-1n9y415");
add_location(three, file$e, 84, 6, 1567);
attr_dev(overlay, "class", "svelte-1n9y415");
add_location(overlay, file$e, 72, 4, 1206);
attr_dev(icecream, "class", "svelte-1n9y415");
add_location(icecream, file$e, 67, 2, 1114);
attr_dev(content, "class", "svelte-1n9y415");
add_location(content, file$e, 64, 0, 1072);
},
l: function claim(nodes) {
throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@ -7412,7 +7413,7 @@ var app = (function () {
return block;
}
function instance$f($$self, $$props, $$invalidate) {
function instance$f($$self, $$props) {
let { $$slots: slots = {}, $$scope } = $$props;
validate_slots("GridOverGraphic", slots, []);
const writable_props = [];
@ -7421,7 +7422,6 @@ var app = (function () {
if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<GridOverGraphic> was created with unknown prop '${key}'`);
});
$$self.$capture_state = () => ({ CodeView, Icon });
return [];
}
@ -7597,57 +7597,57 @@ var app = (function () {
t35 = space();
figcaption10 = element("figcaption");
figcaption10.textContent = "Grid Over Graphic";
add_location(h10, file$f, 54, 0, 1361);
add_location(h10, file$f, 54, 0, 1362);
attr_dev(figcaption0, "class", "svelte-1bny7ze");
add_location(figcaption0, file$f, 60, 2, 1462);
add_location(figcaption0, file$f, 60, 2, 1463);
attr_dev(figure0, "class", "svelte-1bny7ze");
add_location(figure0, file$f, 58, 0, 1395);
add_location(figure0, file$f, 58, 0, 1396);
attr_dev(figcaption1, "class", "svelte-1bny7ze");
add_location(figcaption1, file$f, 65, 2, 1572);
add_location(figcaption1, file$f, 65, 2, 1573);
attr_dev(figure1, "class", "svelte-1bny7ze");
add_location(figure1, file$f, 63, 0, 1505);
add_location(figure1, file$f, 63, 0, 1506);
attr_dev(figcaption2, "class", "svelte-1bny7ze");
add_location(figcaption2, file$f, 70, 2, 1683);
add_location(figcaption2, file$f, 70, 2, 1684);
attr_dev(figure2, "class", "svelte-1bny7ze");
add_location(figure2, file$f, 68, 0, 1616);
add_location(figure2, file$f, 68, 0, 1617);
attr_dev(figcaption3, "class", "svelte-1bny7ze");
add_location(figcaption3, file$f, 75, 2, 1798);
add_location(figcaption3, file$f, 75, 2, 1799);
attr_dev(figure3, "class", "svelte-1bny7ze");
add_location(figure3, file$f, 73, 0, 1727);
add_location(figure3, file$f, 73, 0, 1728);
attr_dev(figcaption4, "class", "svelte-1bny7ze");
add_location(figcaption4, file$f, 80, 2, 1916);
add_location(figcaption4, file$f, 80, 2, 1917);
attr_dev(figure4, "class", "svelte-1bny7ze");
add_location(figure4, file$f, 78, 0, 1845);
add_location(figure4, file$f, 78, 0, 1846);
attr_dev(images0, "class", "svelte-1bny7ze");
add_location(images0, file$f, 56, 0, 1385);
add_location(hr, file$f, 84, 0, 1973);
add_location(h11, file$f, 85, 0, 1978);
add_location(images0, file$f, 56, 0, 1386);
add_location(hr, file$f, 84, 0, 1974);
add_location(h11, file$f, 85, 0, 1979);
attr_dev(figcaption5, "class", "svelte-1bny7ze");
add_location(figcaption5, file$f, 91, 2, 2080);
add_location(figcaption5, file$f, 91, 2, 2081);
attr_dev(figure5, "class", "svelte-1bny7ze");
add_location(figure5, file$f, 89, 0, 2017);
add_location(figure5, file$f, 89, 0, 2018);
attr_dev(figcaption6, "class", "svelte-1bny7ze");
add_location(figcaption6, file$f, 97, 2, 2192);
add_location(figcaption6, file$f, 97, 2, 2193);
attr_dev(figure6, "class", "svelte-1bny7ze");
add_location(figure6, file$f, 95, 0, 2129);
add_location(figure6, file$f, 95, 0, 2130);
attr_dev(figcaption7, "class", "svelte-1bny7ze");
add_location(figcaption7, file$f, 102, 2, 2297);
add_location(figcaption7, file$f, 102, 2, 2298);
attr_dev(figure7, "class", "svelte-1bny7ze");
add_location(figure7, file$f, 100, 0, 2234);
add_location(figure7, file$f, 100, 0, 2235);
attr_dev(figcaption8, "class", "svelte-1bny7ze");
add_location(figcaption8, file$f, 107, 2, 2404);
add_location(figcaption8, file$f, 107, 2, 2405);
attr_dev(figure8, "class", "svelte-1bny7ze");
add_location(figure8, file$f, 105, 0, 2339);
add_location(figure8, file$f, 105, 0, 2340);
attr_dev(figcaption9, "class", "svelte-1bny7ze");
add_location(figcaption9, file$f, 112, 2, 2508);
add_location(figcaption9, file$f, 112, 2, 2509);
attr_dev(figure9, "class", "svelte-1bny7ze");
add_location(figure9, file$f, 110, 0, 2447);
add_location(figure9, file$f, 110, 0, 2448);
attr_dev(figcaption10, "class", "svelte-1bny7ze");
add_location(figcaption10, file$f, 117, 2, 2632);
add_location(figcaption10, file$f, 117, 2, 2633);
attr_dev(figure10, "class", "svelte-1bny7ze");
add_location(figure10, file$f, 115, 0, 2549);
add_location(figure10, file$f, 115, 0, 2550);
attr_dev(images1, "class", "svelte-1bny7ze");
add_location(images1, file$f, 87, 0, 2007);
add_location(images1, file$f, 87, 0, 2008);
},
l: function claim(nodes) {
throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@ -13905,6 +13905,185 @@ var app = (function () {
}
}
/* src/demos/GridOverGraphic.svelte generated by Svelte v3.30.0 */
const file$w = "src/demos/GridOverGraphic.svelte";
function create_fragment$x(ctx) {
let content;
let h10;
let t1;
let icecream;
let background;
let img;
let img_src_value;
let t2;
let overlay;
let one;
let h11;
let t4;
let p0;
let t6;
let two;
let h12;
let t8;
let p1;
let t10;
let three;
let h13;
let t12;
let p2;
let t14;
let codeview;
let current;
codeview = new CodeView({
props: { source: "/code/GridOverGraphic" },
$$inline: true
});
const block = {
c: function create() {
content = element("content");
h10 = element("h1");
h10.textContent = "Grid Over Graphic";
t1 = space();
icecream = element("icecream");
background = element("background");
img = element("img");
t2 = space();
overlay = element("overlay");
one = element("one");
h11 = element("h1");
h11.textContent = "Do You Like Icecream?";
t4 = space();
p0 = element("p");
p0.textContent = "This square is placed over this image using a\n CSS Grid.";
t6 = space();
two = element("two");
h12 = element("h1");
h12.textContent = "Icecream Rules";
t8 = space();
p1 = element("p");
p1.textContent = "Sometimes you want to put a graphic behind some creatively\n organize text and panels. You can dot that with CSS grids.";
t10 = space();
three = element("three");
h13 = element("h1");
h13.textContent = "Bottom Right";
t12 = space();
p2 = element("p");
p2.textContent = "I don't know why I put that sphere there.";
t14 = space();
create_component(codeview.$$.fragment);
add_location(h10, file$w, 70, 2, 1175);
if (img.src !== (img_src_value = "/ice_cream_graphic.svg")) attr_dev(img, "src", img_src_value);
attr_dev(img, "class", "svelte-15ytpc8");
add_location(img, file$w, 74, 4, 1237);
attr_dev(background, "class", "svelte-15ytpc8");
add_location(background, file$w, 73, 4, 1220);
add_location(h11, file$w, 79, 8, 1327);
add_location(p0, file$w, 80, 8, 1366);
attr_dev(one, "class", "svelte-15ytpc8");
add_location(one, file$w, 78, 6, 1313);
add_location(h12, file$w, 85, 6, 1479);
add_location(p1, file$w, 86, 6, 1509);
attr_dev(two, "class", "svelte-15ytpc8");
add_location(two, file$w, 84, 6, 1467);
add_location(h13, file$w, 90, 6, 1672);
add_location(p2, file$w, 91, 6, 1700);
attr_dev(three, "class", "svelte-15ytpc8");
add_location(three, file$w, 89, 6, 1658);
attr_dev(overlay, "class", "svelte-15ytpc8");
add_location(overlay, file$w, 77, 4, 1297);
attr_dev(icecream, "class", "svelte-15ytpc8");
add_location(icecream, file$w, 72, 2, 1205);
attr_dev(content, "class", "svelte-15ytpc8");
add_location(content, file$w, 69, 0, 1163);
},
l: function claim(nodes) {
throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
},
m: function mount(target, anchor) {
insert_dev(target, content, anchor);
append_dev(content, h10);
append_dev(content, t1);
append_dev(content, icecream);
append_dev(icecream, background);
append_dev(background, img);
append_dev(icecream, t2);
append_dev(icecream, overlay);
append_dev(overlay, one);
append_dev(one, h11);
append_dev(one, t4);
append_dev(one, p0);
append_dev(overlay, t6);
append_dev(overlay, two);
append_dev(two, h12);
append_dev(two, t8);
append_dev(two, p1);
append_dev(overlay, t10);
append_dev(overlay, three);
append_dev(three, h13);
append_dev(three, t12);
append_dev(three, p2);
insert_dev(target, t14, anchor);
mount_component(codeview, target, anchor);
current = true;
},
p: noop,
i: function intro(local) {
if (current) return;
transition_in(codeview.$$.fragment, local);
current = true;
},
o: function outro(local) {
transition_out(codeview.$$.fragment, local);
current = false;
},
d: function destroy(detaching) {
if (detaching) detach_dev(content);
if (detaching) detach_dev(t14);
destroy_component(codeview, detaching);
}
};
dispatch_dev("SvelteRegisterBlock", {
block,
id: create_fragment$x.name,
type: "component",
source: "",
ctx
});
return block;
}
function instance$x($$self, $$props, $$invalidate) {
let { $$slots: slots = {}, $$scope } = $$props;
validate_slots("GridOverGraphic", slots, []);
const writable_props = [];
Object.keys($$props).forEach(key => {
if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<GridOverGraphic> was created with unknown prop '${key}'`);
});
$$self.$capture_state = () => ({ CodeView });
return [];
}
class GridOverGraphic$1 extends SvelteComponentDev {
constructor(options) {
super(options);
init(this, options, instance$x, create_fragment$x, safe_not_equal, {});
dispatch_dev("SvelteRegisterComponent", {
component: this,
tagName: "GridOverGraphic",
options,
id: create_fragment$x.name
});
}
}
var routes = {
"/": Home,
"/about": About,
@ -13921,14 +14100,14 @@ var app = (function () {
"/demos/pinterest": Pinterest$1,
"/demos/navbar": NavBar$1,
"/demos/tabs": Tabs$1,
"/demos/gridovergraphic": GridOverGraphic,
"/demos/gridovergraphic": GridOverGraphic$1,
"/demos/xoracademy": XorAcademy,
"/demos/xoracademy/watch": XorAcademyWatch,
"*": NotFound,
};
/* src/components/Darkmode.svelte generated by Svelte v3.30.0 */
const file$w = "src/components/Darkmode.svelte";
const file$x = "src/components/Darkmode.svelte";
// (26:0) {:else}
function create_else_block$1(ctx) {
@ -13947,7 +14126,7 @@ var app = (function () {
c: function create() {
span = element("span");
create_component(icon.$$.fragment);
add_location(span, file$w, 26, 2, 578);
add_location(span, file$x, 26, 2, 578);
},
m: function mount(target, anchor) {
insert_dev(target, span, anchor);
@ -14005,7 +14184,7 @@ var app = (function () {
c: function create() {
span = element("span");
create_component(icon.$$.fragment);
add_location(span, file$w, 22, 2, 485);
add_location(span, file$x, 22, 2, 485);
},
m: function mount(target, anchor) {
insert_dev(target, span, anchor);
@ -14046,7 +14225,7 @@ var app = (function () {
return block;
}
function create_fragment$x(ctx) {
function create_fragment$y(ctx) {
let current_block_type_index;
let if_block;
let if_block_anchor;
@ -14119,7 +14298,7 @@ var app = (function () {
dispatch_dev("SvelteRegisterBlock", {
block,
id: create_fragment$x.name,
id: create_fragment$y.name,
type: "component",
source: "",
ctx
@ -14128,7 +14307,7 @@ var app = (function () {
return block;
}
function instance$x($$self, $$props, $$invalidate) {
function instance$y($$self, $$props, $$invalidate) {
let { $$slots: slots = {}, $$scope } = $$props;
validate_slots("Darkmode", slots, []);
@ -14179,13 +14358,13 @@ var app = (function () {
class Darkmode extends SvelteComponentDev {
constructor(options) {
super(options);
init(this, options, instance$x, create_fragment$x, safe_not_equal, { theme: 0 });
init(this, options, instance$y, create_fragment$y, safe_not_equal, { theme: 0 });
dispatch_dev("SvelteRegisterComponent", {
component: this,
tagName: "Darkmode",
options,
id: create_fragment$x.name
id: create_fragment$y.name
});
}
@ -14199,9 +14378,9 @@ var app = (function () {
}
/* src/App.svelte generated by Svelte v3.30.0 */
const file$x = "src/App.svelte";
const file$y = "src/App.svelte";
function create_fragment$y(ctx) {
function create_fragment$z(ctx) {
let header;
let nav0;
let a0;
@ -14300,31 +14479,31 @@ var app = (function () {
li4 = element("li");
create_component(darkmode.$$.fragment);
attr_dev(a0, "href", "/");
add_location(a0, file$x, 28, 4, 423);
add_location(a0, file$y, 28, 4, 423);
attr_dev(a1, "href", "/demos");
add_location(a1, file$x, 32, 10, 513);
add_location(li0, file$x, 32, 6, 509);
add_location(a1, file$y, 32, 10, 513);
add_location(li0, file$y, 32, 6, 509);
attr_dev(a2, "href", "/about");
add_location(a2, file$x, 33, 10, 564);
add_location(li1, file$x, 33, 6, 560);
add_location(ul0, file$x, 31, 4, 498);
add_location(nav0, file$x, 27, 2, 413);
add_location(a2, file$y, 33, 10, 564);
add_location(li1, file$y, 33, 6, 560);
add_location(ul0, file$y, 31, 4, 498);
add_location(nav0, file$y, 27, 2, 413);
attr_dev(header, "class", "svelte-khlxmc");
add_location(header, file$x, 26, 0, 402);
add_location(header, file$y, 26, 0, 402);
attr_dev(main, "class", "svelte-khlxmc");
add_location(main, file$x, 38, 0, 635);
add_location(hr, file$x, 42, 0, 702);
add_location(p, file$x, 46, 6, 756);
add_location(main, file$y, 38, 0, 635);
add_location(hr, file$y, 42, 0, 702);
add_location(p, file$y, 46, 6, 756);
attr_dev(a3, "href", "/");
add_location(a3, file$x, 45, 4, 728);
add_location(li2, file$x, 49, 6, 811);
add_location(li3, file$x, 50, 6, 860);
add_location(li4, file$x, 51, 6, 911);
add_location(ul1, file$x, 48, 4, 800);
add_location(a3, file$y, 45, 4, 728);
add_location(li2, file$y, 49, 6, 811);
add_location(li3, file$y, 50, 6, 860);
add_location(li4, file$y, 51, 6, 911);
add_location(ul1, file$y, 48, 4, 800);
attr_dev(nav1, "class", "svelte-khlxmc");
add_location(nav1, file$x, 44, 2, 718);
add_location(nav1, file$y, 44, 2, 718);
attr_dev(footer, "class", "svelte-khlxmc");
add_location(footer, file$x, 43, 0, 707);
add_location(footer, file$y, 43, 0, 707);
},
l: function claim(nodes) {
throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@ -14412,7 +14591,7 @@ var app = (function () {
dispatch_dev("SvelteRegisterBlock", {
block,
id: create_fragment$y.name,
id: create_fragment$z.name,
type: "component",
source: "",
ctx
@ -14421,7 +14600,7 @@ var app = (function () {
return block;
}
function instance$y($$self, $$props, $$invalidate) {
function instance$z($$self, $$props, $$invalidate) {
let { $$slots: slots = {}, $$scope } = $$props;
validate_slots("App", slots, []);
const writable_props = [];
@ -14437,13 +14616,13 @@ var app = (function () {
class App extends SvelteComponentDev {
constructor(options) {
super(options);
init(this, options, instance$y, create_fragment$y, safe_not_equal, {});
init(this, options, instance$z, create_fragment$z, safe_not_equal, {});
dispatch_dev("SvelteRegisterComponent", {
component: this,
tagName: "App",
options,
id: create_fragment$y.name
id: create_fragment$z.name
});
}
}

2
public/build/bundle.js.map
View File

File diff suppressed because one or more lines are too long

56
public/code/GridOverGraphic.css
Unescape View File

@ -0,0 +1,56 @@
icecream {
position: relative;
}
icecream background {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
}
icecream background img {
width: 100vh;
}
overlay {
display: grid;
grid-template-columns: repeat(2,1fr);
grid-template-rows: auto;
grid-template-areas:
"topleft topright"
"middle middle"
"bottomleft bottomright";
height: 100vh;
}
one {
grid-area: topright;
background-color: var(--color-accent);
border-radius: 50% 0 0;
font-size: 2em;
color: #fff;
text-align: right;
}
two {
grid-area: middle;
background-color: var(--color-accent);
opacity: 80%;
font-size: 2em;
color: #fff;
text-align: center;
border-radius: 20% 0 20% 0;
}
three {
grid-area: bottomleft;
background-color: var(--color-accent);
opacity: 90%;
font-size: 2em;
color: #fff;
text-align: center;
border-radius: 0 0 10% 40%;
}

23
public/code/GridOverGraphic.html
Unescape View File

@ -0,0 +1,23 @@
<icecream>
<background>
<img src="/ice_cream_graphic.svg" />
</background>
<overlay>
<one>
<h1>Do You Like Icecream?</h1>
<p>This square is placed over this image using a
CSS Grid.
</p>
</one>
<two>
<h1>Icecream Rules</h1>
<p>Sometimes you want to put a graphic behind some creatively
organize text and panels. You can dot that with CSS grids.
</two>
<three>
<h1>Bottom Right</h1>
<p>I don't know why I put that sphere there.</p>
</three>
</overlay>
</icecream>

3
src/demos/GridOverGraphic.svelte
Unescape View File

@ -1,6 +1,5 @@
<script>
import CodeView from '../components/CodeView.svelte';
import Icon from '../components/Icon.svelte';
</script>
<style>
@ -96,4 +95,4 @@
</icecream>
</content>
<CodeView source="/code/GridOverGraphic" />

2
src/demos/index.svelte
Unescape View File

@ -10,7 +10,7 @@
import Panels from '../thumbs/Panels.svelte';
import NavBar from '../thumbs/NavBar.svelte';
import Tabs from '../thumbs/Tabs.svelte';
import GridOverGraphic from '../demos/GridOverGraphic.svelte';
import GridOverGraphic from '../thumbs/GridOverGraphic.svelte';
import {push} from 'svelte-spa-router';
import { holder } from '../../lib/imgholder.js';

93
src/thumbs/GridOverGraphic.svelte
Unescape View File

@ -0,0 +1,93 @@
<style>
content {
display: flex;
flex-direction: column;
}
icecream {
position: relative;
}
icecream background {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
}
icecream background img {
width: 100vh;
}
overlay {
display: grid;
grid-template-columns: repeat(2,1fr);
grid-template-rows: auto;
grid-template-areas:
"topleft topright"
"middle middle"
"bottomleft bottomright";
}
one {
grid-area: topright;
background-color: var(--color-accent);
border-radius: 50% 0 0;
font-size: 0.8em;
color: #fff;
text-align: right;
}
two {
grid-area: middle;
background-color: var(--color-accent);
opacity: 80%;
font-size: 0.8em;
color: #fff;
text-align: center;
border-radius: 20% 0 20% 0;
}
three {
grid-area: bottomleft;
background-color: var(--color-accent);
opacity: 90%;
font-size: 0.8em;
color: #fff;
text-align: center;
border-radius: 0 0 10% 40%;
}
</style>
<content>
<h1>Grid Over Graphic</h1>
<icecream>
<background>
<img src="/ice_cream_graphic.svg" />
</background>
<overlay>
<one>
<h1>Do You Like Icecream?</h1>
<p>This square is placed over this image using a
CSS Grid.
</p>
</one>
<two>
<h1>Icecream Rules</h1>
<p>Sometimes you want to put a graphic behind some creatively
organize text and panels. You can dot that with CSS grids.
</two>
<three>
<h1>Bottom Right</h1>
<p>I don't know why I put that sphere there.</p>
</three>
</overlay>
</icecream>
</content>
Write Preview
Loading…
Cancel
Save