PK vDS4L< E f-hero-heading-topnav.cccomp PK vDSĀQ: L: component.jsonL:{"UUID":"7b68e325-2bd8-428a-8e08-ea74ae755d18","additional_states":{},"appBuildInfo":"RSD 5.0.3490","appId":"RSD","appVersion":3490,"buildNumber":5947,"component_resources":{"classes":18,"file_sizes_values":[1333152,0,0],"file_type_values":[2,0,0],"html_elements":1,"ids":0,"links_external":0,"links_internal":4,"local_files":"2 (local size 1,27 MB)","styled_breakpoints":"640px / 662px / 815px / 1024px"},"description":"Your component description","element_name":"Container","framework":"foundation","html":"
Live preview not available for this HTML element
Lost in Space?
1. This is where you put your content. You can remove the flex positioning (change to block) and have the paragraphs run right across the page if you like. You can even remove the paragraphs (but not the containing .content.wrap) and add images, sliders or any content you prefer.
2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
","htmlembed":{"2":""},"mobile_first":true,"name":"f-hero-heading-topnav","resources":{"./images/logo-menu.png":{"breakpoints":{},"elements":{"counter":0},"pictures":{"default":3},"type":"image"},"./img/space2.jpg":{"breakpoints":{},"elements":{"counter":0},"pictures":{"default":1},"type":"image"}},"stylesheet":".container.topnav-wrap {\n position:relative;\n width:100%;\n z-index:10;\n background-color:rgba(0, 0, 0, 1);\n top:0px;\n max-width:1200px;\n height:83px;\n margin-top:0px;\n padding-bottom:4px;\n}\n\n.container.links-wrap {\n display:none;\n flex-direction:column;\n align-items:center;\n float:left;\n width:100%;\n position:absolute;\n top:140px;\n justify-content:center;\n z-index:20;\n margin-top:8px;\n}\n\na.link-text {\n color:rgba(255, 255, 255, 1);\n font-size:17px;\n margin-top:12px;\n margin-right:20px;\n margin-bottom:30px;\n margin-left:20px;\n}\n\na.link-text.menulink {\n font-size:20px;\n text-decoration:none;\n color:rgba(255, 255, 255, 1);\n text-align:center;\n margin-bottom:30px;\n margin-right:20px;\n margin-top:12px;\n font-weight:600;\n margin-left:20px;\n}\n\n.container.wide-wrap {\n display:none;\n position:relative;\n top:0px;\n}\n\ndiv.responsive-picture.logo-wide {\n width:0%;\n}\n\n.container.narrow-wrap {\n left:0px;\n display:flex;\n justify-content:space-between;\n width:100%;\n}\n\ndiv.responsive-picture.logo-narrow {\n width:100px;\n padding-top:3px;\n padding-left:0px;\n max-width:75px;\n min-width:50px;\n padding-bottom:8px;\n margin-left:22px;\n}\n\nspan.glyph.hamburger {\n padding-top:20px;\n padding-right:30px;\n font-size:34px;\n color:rgba(255, 255, 255, 1);\n}\n\n.container.dark {\n height:100vh;\n min-height:70px;\n background-color:rgba(68, 6, 6, 1);\n display:none;\n position:fixed;\n width:100%;\n top:0px;\n}\n\nspan.glyph.close-menu {\n color:rgba(255, 255, 255, 1);\n font-size:34px;\n text-align:right;\n margin-right:30px;\n margin-top:25px;\n}\n\ndiv.responsive-picture.logo-dark {\n width:70px;\n margin-right:auto;\n margin-left:auto;\n}\n\n.container.hero-container {\n max-width:1200px;\n margin-right:auto;\n margin-left:auto;\n}\n\nh1.page-name {\n background-image:linear-gradient(90deg, rgba(255, 255, 255, 0.5) 20%, rgba(6, 21, 27, 1) 80%);\n background-blend-mode:normal;\n background-position:left top;\n background-attachment:scroll;\n background-repeat:repeat;\n background-size:auto auto;\n background-origin:padding-box;\n background-clip:border-box;\n font-weight:600;\n font-size:50px;\n text-align:center;\n font-variant:small-caps;\n margin-bottom:0px;\n -webkit-text-stroke-color:rgba(255, 255, 255, 1);\n -webkit-text-stroke-width:0.01em;\n}\n\ndiv.responsive-picture.space {\n max-width:none;\n}\n\n.container.content-wrap {\n padding-right:10px;\n padding-left:10px;\n padding-top:60px;\n}\n\n@supports (display: grid) {\n .container.dark {\n background-color:rgba(0, 0, 0, 1);\n }\n\n .container.hero-container {\n width:100%;\n padding-top:0px;\n }\n\n h1.page-name {\n margin-bottom:0px;\n -webkit-text-stroke-color:rgba(255, 255, 255, 1);\n -webkit-text-stroke-width:0.01em;\n font-size:55px;\n }\n\n div.responsive-picture.space {\n align-self:stretch;\n margin-top:0px;\n margin-bottom:0px;\n }\n\n .container.content-wrap {\n display:flex;\n flex-wrap:wrap;\n padding-right:10px;\n padding-left:10px;\n }\n\n p.paragraph.space-para {\n padding-top:10px;\n padding-right:10px;\n padding-bottom:10px;\n padding-left:10px;\n }\n\n p.paragraph.one.space-para {\n padding-left:15px;\n }\n\n p.paragraph.space-para.two {\n padding-left:15px;\n }\n\n p.paragraph span.paragraph-text-4 {\n font-weight:600;\n }\n\n p.paragraph span.paragraph-text-5 {\n font-family:'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;\n }\n}\n\n@media screen and (min-width: 40rem) {\n .container.topnav-wrap {\n height:92px;\n }\n\n h1.page-name {\n font-weight:600;\n text-align:center;\n font-variant:small-caps;\n font-size:60px;\n background-image:linear-gradient(90deg, rgba(255, 255, 255, 0.5) 20%, rgba(6, 21, 27, 1) 80%);\n background-blend-mode:normal;\n background-position:left top;\n background-attachment:scroll;\n background-repeat:repeat;\n background-size:auto auto;\n background-origin:padding-box;\n background-clip:border-box;\n }\n\n @supports (display: grid) {\n .container.hero-container {\n display:grid;\n margin-right:auto;\n margin-left:auto;\n grid-template-columns:100px 1fr 1fr;\n grid-template-rows:auto auto auto auto;\n max-width:1200px;\n min-height:auto;\n align-self:flex-end;\n grid-template-areas:\"H1 img img\" \"H1 img img\" \"H1 menu menu\" \"H1 paragr. paragr.\";\n padding-top:0px;\n }\n\n h1.page-name {\n transform:rotateZ(270deg) translateX(0px) translateY(0px);\n grid-area:1/1/span 3/span 1;\n width:540px;\n height:100px;\n justify-self:start;\n padding-top:8px;\n font-size:65px;\n text-align:left;\n padding-right:0px;\n padding-left:0px;\n margin-left:-220px;\n margin-top:219px;\n }\n\n div.responsive-picture.space {\n grid-area:1/2/span 2/span 3;\n justify-self:auto;\n align-self:auto;\n margin-bottom:0px;\n }\n\n .container.content-wrap {\n grid-area:3/2/span 2/span 2;\n flex-wrap:nowrap;\n padding-top:60px;\n position:relative;\n display:flex;\n }\n\n p.paragraph.one.space-para {\n grid-area:2/3/span 1/span 1;\n margin-bottom:0px;\n padding-top:25px;\n width:50%;\n }\n\n p.paragraph.space-para.two {\n grid-area:2/3/span 1/span 1;\n align-self:center;\n padding-top:25px;\n width:50%;\n }\n }\n}\n\n@media screen and (min-width: 41.375rem) {\n .container.topnav-wrap {\n height:83px;\n background-color:rgba(0, 0, 0, 1);\n padding-top:1px;\n }\n\n .container.links-wrap {\n flex-direction:row;\n justify-content:flex-end;\n width:auto;\n top:0px;\n right:0px;\n display:flex;\n margin-right:33px;\n }\n\n a.link-text.menulink {\n color:rgba(255, 255, 255, 1);\n font-size:14px;\n margin-right:20px;\n margin-top:22px;\n display:block;\n margin-bottom:20px;\n }\n\n .container.wide-wrap {\n display:block;\n }\n\n div.responsive-picture.logo-wide {\n width:75px;\n margin-top:-3px;\n margin-left:22px;\n display:block;\n max-width:80px;\n padding-top:5px;\n }\n\n .container.narrow-wrap {\n display:none;\n }\n\n div.responsive-picture.logo-narrow {\n padding-top:0px;\n }\n\n .container.dark {\n display:none;\n }\n}\n\n@media screen and (min-width: 50.9375rem) {\n a.link-text {\n margin-top:22px;\n margin-bottom:20px;\n }\n}\n\n@media screen and (min-width: 64rem) {\n .container.topnav-wrap {\n margin-right:auto;\n margin-left:auto;\n padding-bottom:4px;\n background-color:rgba(0, 0, 0, 1);\n }\n\n a.link-text.menulink {\n color:rgba(255, 255, 255, 1);\n }\n\n h1.page-name {\n font-size:70px;\n }\n\n @supports (display: grid) {\n .container.hero-container {\n max-width:1200px;\n margin-right:auto;\n margin-left:auto;\n grid-template-columns:120px 1fr 1fr;\n grid-template-rows:auto auto auto;\n grid-area:1/1/span 1/span 1;\n width:100%;\n margin-bottom:30px;\n position:relative;\n padding-top:0px;\n grid-template-areas:\"H1 img img\" \"H1 img img\" \"H1 paragr. paragr.\";\n }\n\n h1.page-name {\n height:120px;\n position:relative;\n grid-area:1/1/span 1/span 3;\n justify-self:auto;\n transform:rotateZ(270deg) translateX(0px) translateY(0px);\n width:613px;\n font-size:75px;\n padding-top:0px;\n padding-bottom:0px;\n line-height:105px;\n padding-left:0px;\n padding-right:0px;\n margin-top:246px;\n margin-left:-246px;\n }\n\n div.responsive-picture.space {\n justify-self:auto;\n align-self:auto;\n }\n\n p.paragraph.one.space-para {\n grid-area:2/2/span 1/span 1;\n width:50%;\n }\n\n p.paragraph.space-para.two {\n align-self:stretch;\n margin-bottom:0px;\n width:50%;\n }\n\n p.paragraph span.paragraph-text-1 {\n font-weight:500;\n }\n\n p.paragraph span.paragraph-text-2 {\n font-weight:600;\n }\n\n p.paragraph span.paragraph-text-3 {\n font-family:'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;\n }\n }\n}","timestamp":1633351944139,"type":"Container","units":"rem"}
PK vDS. ' ' resources/images/logo-menu.png'X؉PNG
IHDR Z= iTXtXML:com.adobe.xmp
' iCCPsRGB IEC61966-2.1 (uKA$),XD
A_I6%q%Hl
BmkAPAkEs2;vg؝k0:739?u.
pD?s 5oZk-јQx\QZN5y[SI§.M.(|k(Zk3Qő*VZZX^NO:W1_beŻ3'3Lc2{`AYQ#?OVrU
h Iy=E߾Ruh}GT0.zC]VoA
k_&nZCq
˥9|Ao[;ygҫM pHYs IDATxyu`AYJ@0b (G^\s5FUc1G.F\# ";#300qzާ9u)(<~
t
}u Ptm(z:P* T} [` KwRn ` 01]\CCa-XRH XLbZBrX 2`1}t7X m\95L{\X&@Zr=EA.^Xz`0Ki)hLuwj`*jn0xKtB$AOic=hnAEӵK+" z*̱Ut`c5(0[&AOƯ;77\Fķ <*.&_I
@kR;.&Hug6Ո R{.&_Hp+0
NE-65cTŸ0x9*^`&woz"fvۥXLRn_t&]pE0
Ku\*uK7tRꁇԡtM5RD^YLR.i_~KyRnݯz](ہ;nKۥ4ktY5UL ~V]]tsM#Į].D&0ӡ尅tsK*ؽW-@rCC.Ex*B,ۅdvHȅKC\A*oKEB;n/uk̪](jWaZIUݯoaM&ۖ.IEa]a6
a.z4|roBh^Yۥ@g`Ah_[tY$@p
PgR~ݯ/^xo-,
Osоw/~}% (4́Cp^ɯQwi"$Dꂘ^vts|#uGK<| @B.0K-pnA.@Fׅ7 gaO,ݠo9νKo8lƸ57ޝms[HEs.A7דFB`v(9F~r=(^a2Sd1Kk
.RՋ.f}).g)Dt͒sѠ0'
9t3Zцbp.-MHd
rm)r$!;v7ZtsWG8uɌ#٘噅陀ޱI_?|R'#!"S=1-_>9(Ng`v=}A ۞S:dǓu
r!2)[Ӣ `%̖B ðlȮ1$I)JܮBfle-D`bxWPnW"
PƲ]ݯ+U@8xJD[R>A-Hȓ
d-c~ml
B
臥28V$BJL2YםMmȥ/ڛ!!"`[tl ZeBclI~'r!
עu'` }Teۢ߈\d1ef@jB8`p,KW!!"_td2%N_C2I XJ7T[Hȅ7C0lRAy-Bͦ~YXB|TR;=(j$Bf&E7p$p`@AZ3cPSAO<UInf m.Ha}@D3咵㑐Q(IrN=Y/!f6~twe$_55^=Q> DA?߹ZDA`!Bnlzjpx-0Qa k~h;tR~ݢEB.DkQA?-w!x-EdݯK=
@d~"r!
&@dХ.txOq!sf:<1h`; tӌTm5w T\`5yXǵ#7|wb~ +U0e@wvh
!f4orzM`>XRq[>VϷ#vO ]v)U0FzW~_qTKL4t=m >Ju/KO,'#?Ք{7y!7чXctOôk^d
AZKEaZb!vsb`,]ؽvV)vUARY=5~c?~}_&іRSOrfpԠŧiXy3?CBd/4{uoH[8Ȁ<W1wsӃ:uB1K?