PK iU %' ' va-missing-chapter-1.cccomp PK $UWp01% ,% component.json,%{"UUID":"35bfcaae-8032-4a29-a0ce-8df88124dbdb","additional_states":{"Container":{"outofview":{"character":".","name":"Out of View","value":"outofview"}},"Heading 3":{"outofview":{"character":".","name":"Out of View","value":"outofview"}},"Paragraph":{"outofview":{"character":".","name":"Out of View","value":"outofview"},"target":{"character":":","name":"Target","value":"target"}},"Picture":{"outofview":{"character":".","name":"Out of View","value":"outofview"}},"Text":{"outofview":{"character":".","name":"Out of View","value":"outofview"}}},"appBuildInfo":"RSD 5.0.3519","appId":"RSD","appVersion":3519,"buildNumber":5973,"component_resources":{"classes":12,"file_sizes_values":[65942,0,0],"file_type_values":[1,0,0],"html_elements":0,"ids":0,"links_external":0,"links_internal":0,"local_files":"1 (local size 64,40 kB)","styled_breakpoints":"600px"},"description":"Your component description","element_name":"Container","framework":"vanillacss","html":"
Do you recognize this guy?
\n .chapter-name {background-color: red;\n color: white;\n font-size: 24px;\n\">His name will appear in this box when you preview.
He was born on Jan. 8th 1935.
How old would he have been today?
\nfunction years() {\nvar a = document.querySelector(".anniv");\nvar s = new Date(1935, 00, 08); // start date as yyyy, mm-1, dd\nvar t = new Date(); // today\nvar n = t.getFullYear() - s.getFullYear();\n// Reduce number of years by 1 if today is before the anniversary\nif(t.getMonth() < s.getMonth()) {n--;}\nif(t.getMonth() == s.getMonth() && t.getDate() < s.getDate()) {n--;}\na.innerHTML = "He would now have been " + n + " years old.";\n}\nwindow.onload = years;\n\" data-ce-custom-head=\"\">You don't need a calculator, just preview the page to see
what his age would have been.
Above the 'Content code' box has been used, once for just a bit of text, the other one for some JS. The styling of the two boxes was done in the Head code box, to let the styling not appear until the page is being previewed.
\n .chapter-hit {background-color: green;\n color: white;\n font-weight: bold;\n font-size: 17px;\n }\na {color: white;\n font-weight: bold;\n}\n\n\">\" data-replace-after=\" was one of Elvis' greatest hits.\" data-ce-custom-head=\"\">\"Always on my Mind\"
If you hover over the song title in preview, you'll see a little tool-tip with the year the song was recorded. The HTML code for that has been put partly in the 'Before' and partly in the 'After' box along with the rest of the sentence.
\n .chapter-code {background-color: black;\n color: white;\n font-weight: bold;\n }\na {color: white;\n font-weight: bold;\n}\n\n\" data-outline-closed=\"\"> © 2016 - \">Company Name All Rights Reserved
The last example is a common copyright statement used in page footers. After the two first words the 'After' box was utilised for the JS script that fetches the years, then the rest of the words were added as a separate text element.
You could also try to use the 'HTML comment' tags; <!-- and --> on this paragraph. Select it, and pop the tags into the 'Before' and the 'After' box respectively, and then preview!
","htmlembed":{},"mobile_first":true,"name":"va-missing-chapter-1","resources":{"./img/elvis.jpg":{"breakpoints":{},"elements":{"counter":0},"pictures":{"default":1},"type":"image"}},"stylesheet":".container.chapter-example {\n clear:both;\n display:flex;\n flex-wrap:wrap;\n justify-content:center;\n margin-top:35px;\n margin-bottom:20px;\n max-width:1200px;\n}\n\ndiv.responsive-picture.elvis-pic {\n max-width:400px;\n width:100%;\n}\n\n.container.chapter-coding {\n width:100%;\n max-width:500px;\n}\n\nh3.heading-2-1 {\n text-align:center;\n}\n\np.paragraph.chapter-name {\n border-top-width:0.0625rem;\n border-top-style:solid;\n border-right-style:solid;\n border-bottom-style:solid;\n border-left-style:solid;\n border-right-width:0.0625rem;\n border-bottom-width:0.0625rem;\n border-left-width:0.0625rem;\n border-top-color:rgba(246, 18, 18, 1);\n border-right-color:rgba(246, 18, 18, 1);\n border-bottom-color:rgba(246, 18, 18, 1);\n border-left-color:rgba(246, 18, 18, 1);\n text-align:center;\n}\n\np.paragraph.anniv {\n border-top-width:0.0625rem;\n border-top-style:solid;\n border-right-style:solid;\n border-bottom-style:solid;\n border-left-style:solid;\n border-right-width:0.0625rem;\n border-bottom-width:0.0625rem;\n border-left-width:0.0625rem;\n border-top-color:rgba(10, 12, 239, 1);\n border-right-color:rgba(10, 12, 239, 1);\n border-bottom-color:rgba(10, 12, 239, 1);\n border-left-color:rgba(10, 12, 239, 1);\n text-align:center;\n}\n\np.paragraph.chapter-para-1 {\n padding-top:5px;\n padding-left:15px;\n font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;\n font-size:16px;\n margin-bottom:20px;\n max-width:none;\n}\n\n.container.chapter-hit {\n display:flex;\n justify-content:center;\n align-items:center;\n padding-top:12px;\n padding-bottom:12px;\n max-width:500px;\n margin-right:auto;\n margin-left:auto;\n border-top-width:0.0625rem;\n border-top-style:solid;\n border-right-style:solid;\n border-bottom-style:solid;\n border-left-style:solid;\n border-right-width:0.0625rem;\n border-bottom-width:0.0625rem;\n border-left-width:0.0625rem;\n border-top-color:rgba(13, 220, 21, 1);\n border-right-color:rgba(13, 220, 21, 1);\n border-bottom-color:rgba(13, 220, 21, 1);\n border-left-color:rgba(13, 220, 21, 1);\n font-size:17px;\n margin-top:16px;\n margin-bottom:16px;\n flex-wrap:wrap;\n}\n\nspan.text-element.chapter-song {\n padding-top:0px;\n padding-bottom:0px;\n font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;\n font-size:17px;\n text-decoration:none;\n}\n\n.container.chapter-code {\n display:flex;\n justify-content:center;\n align-items:center;\n padding-top:12px;\n padding-bottom:12px;\n max-width:500px;\n margin-right:auto;\n margin-left:auto;\n border-top-width:0.0625rem;\n border-top-style:solid;\n border-right-style:solid;\n border-bottom-style:solid;\n border-left-style:solid;\n border-right-width:0.0625rem;\n border-bottom-width:0.0625rem;\n border-left-width:0.0625rem;\n border-top-color:rgba(2, 11, 2, 1);\n border-right-color:rgba(2, 11, 2, 1);\n border-bottom-color:rgba(2, 11, 2, 1);\n border-left-color:rgba(2, 11, 2, 1);\n font-size:17px;\n margin-top:16px;\n margin-bottom:16px;\n flex-wrap:wrap;\n}\n\nspan.text-element.chaptercode-1 {\n padding-top:0px;\n padding-bottom:0px;\n font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;\n font-size:17px;\n}\n\nspan.text-element.chaptercode-2 {\n padding-top:0px;\n padding-bottom:0px;\n font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;\n font-size:17px;\n}\n\n@media screen and (min-width: 37.5rem) {\n .container.chapter-example {\n clear:both;\n flex-wrap:nowrap;\n justify-content:space-between;\n }\n\n div.responsive-picture.elvis-pic {\n max-width:600px;\n width:50%;\n margin-left:15px;\n margin-right:15px;\n }\n\n .container.chapter-coding {\n margin-right:15px;\n width:55%;\n max-width:600px;\n }\n\n h3.heading-2-1 {\n text-align:center;\n margin-bottom:26px;\n }\n\n p.paragraph.chapter-name {\n text-align:center;\n padding-top:5px;\n padding-bottom:5px;\n max-width:500px;\n margin-right:auto;\n margin-left:auto;\n margin-bottom:30px;\n }\n\n p.paragraph.anniv {\n text-align:center;\n padding-top:5px;\n padding-bottom:5px;\n max-width:500px;\n margin-right:auto;\n margin-left:auto;\n margin-bottom:30px;\n }\n\n p.paragraph.chapter-para-1 {\n font-size:16px;\n font-family:'Roboto', sans-serif;\n }\n}","timestamp":1659883699405,"type":"Container","units":"rem"}
PK $Uw resources/img/elvis.jpg JFIF C !"$"$ C " tJ5'R6%d$,F
@ af-4 R
DX8u#ad$ 0$kJ
X@iU( )"Bh!q"A,!y#Q5Itfp` d LHHq*T0#EjU.+B9TX% #H
bU(f 61&f&` fA' :RNI,J
5I(uŜrU JJ ( D$RgW+^rXfbA@0 A5F` JI@I(i
J@DE8j8Xei;>rME93428^ VpzޝS%} Dd
Ff
P@"YJ%+HQ@ *E8ф'!M9݃fkBL7Bl
6&v,Lw,4,?FD25:6Ěd %&`IyY
2]ث=~Y-A`tPq!UҟS,(&?d ol|.A;:j@Cn @@RB# # RT J#;pHq&!c8`;.f
4Ɓ/R*y.]
6mٟ̆gVT9j|(k6ҳ8Hꅝy