1"use strict";(self.webpackChunkquarkly_export=self.webpackChunkquarkly_export||[]).push([[7573],{61908:function(e,t,o){o.r(t);var r=o(67294),a=o(55916),i=o(11522),n=o(68858),l=o(25995),p=o(84288),s=o(37524),m=o(61552),d=o(15124),c=o(25509),x=o(35414),g=o(1095),u=o(44085),h=o(5982),f=o(56507),y=o(89289),b=o(51852);t.default=function(){return r.createElement(i.ZP,{theme:a.Z},r.createElement(g.F,{pageUrl:"clp/dragdropr-alternatives"}),r.createElement(x.q,null,r.createElement("title",null,"Looking for DragDropr alternatives? Meet Quarkly."),r.createElement("meta",{name:"description",content:"Create your website from scratch or ready-to-use templates. Unlimited customisation possibilities, no-code tools of a classic editor. Visual interface, adaptive design settings, code editor, React components, all possibilities of CSS"}),r.createElement("meta",{property:"og:title",content:"Looking for DragDropr alternatives? Meet Quarkly."}),r.createElement("meta",{property:"og:description",content:"Create your website from scratch or ready-to-use templates. Unlimited customisation possibilities, no-code tools of a classic editor. Visual interface, adaptive design settings, code editor, React components, all possibilities of CSS"}),r.createElement("meta",{property:"og:image",content:"https://uploads.quarkly.io/landing/q-og-1200.png"}),r.createElement("link",{rel:"shortcut icon",href:"https://test-upl.quarkly.io/5e60efa12db4d10024432a9f/images/favicon.png?v=2020-09-25T11:53:45.486Z",type:"image/x-icon"}),r.createElement("link",{rel:"apple-touch-icon",href:"https://test-upl.quarkly.io/5e60efa12db4d10024432a9f/images/favicon-152w.png?v=2020-09-25T11:53:45.538Z"}),r.createElement("link",{rel:"apple-touch-icon",sizes:"76x76",href:"https://test-upl.quarkly.io/5e60efa12db4d10024432a9f/images/favicon-152w.png?v=2020-09-25T11:53:45.538Z"}),r.createElement("link",{rel:"apple-touch-icon",sizes:"152x152",href:"https://test-upl.quarkly.io/5e60efa12db4d10024432a9f/images/favicon-152w.png?v=2020-09-25T11:53:45.538Z"}),r.createElement("link",{rel:"apple-touch-startup-image",href:"https://test-upl.quarkly.io/5e60efa12db4d10024432a9f/images/favicon-152w.png?v=2020-09-25T11:53:45.538Z"}),r.createElement("meta",{name:"msapplication-TileImage",content:"https://test-upl.quarkly.io/5e60efa12db4d10024432a9f/images/favicon-270w.png?v=2020-09-25T11:53:45.477Z"})),r.createElement(n.Z,{"text-align":"center","align-items":"center","text-decoration-line":"initial","quarkly-title":"Survey banner",href:"https://quarkly.webask.io/ek8kameh7",target:"_blank",color:"--light",background:"--color-darkL1",display:"none","justify-content":"center",font:"--captureSm",padding:"12px 0px 12px 0px"},"What do you think about us? Fill out the survey! ð¤"),r.createElement(n.Z,{"text-align":"center","align-items":"center","text-decoration-line":"initial","quarkly-title":"Hire banner",href:"/careers",target:"_blank",color:"--light",background:"--color-dark",display:"none","justify-content":"center",font:"--captureSm",padding:"12px 0px 12px 0px"},"â¡ï¸ We are hiring! Check out our vacancies â¡ï¸"),r.createElement(y.nn,{"lg-border-width":"0px"},r.createElement(u.Z,{slot:"menu"})),r.createElement(y.h4,{"border-width":"0px"}),r.createElement(l.Z,{"sm-padding":"40px 0 50px 0","md-padding":"40px 0 50px 0","text-align":"center",padding:"100px 0 50px 0","background-image":"linear-gradient(0deg, #0E1317 0%, #22262E 100%)","lg-text-align":"left","md-text-align":"left","sm-overflow-y":"hidden","sm-overflow-x":"hidden"},r.createElement(p.ZP,{as:"h1",font:"--h1",margin:"20px 0 30px 0",color:"--light","sm-font":"--h2Sm","lg-text-align":"left"}," ","Looking for DragDropr alternatives?",r.createElement("br",null),"Meet"," ",r.createElement(s.Z,{color:"--secondary"},"Quarkly"),r.createElement(m.c,{"overflow-wrap":"normal","word-break":"normal","white-space":"normal","text-indent":"0","text-overflow":"clip",hyphens:"manual","user-select":"auto","pointer-events":"auto"},".")," "),r.createElement(p.ZP,{as:"p",font:"normal 400 24px/1.5 --fontFamily-googleSourceSansPro",margin:"0 auto 48px auto","lg-text-align":"left","lg-margin-left":"0px",color:"--light","sm-margin":"0 auto 32px 0px","max-width":"530px","sm-font":"--baseSm"}," ","Create your website from scratch or ready-to-use templates. Unlimited customisation possibilities, no-code tools of a classic editor. Visual interface, adaptive design settings, code editor, React components, all possibilities of CSS"," "),r.createElement(y.DO,{"border-radius":"100px","hover-transform":"translateY(-8px)","letter-spacing":"2px","lg-text-align":"left",margin:"0 auto",padding:"16px 40px","text-decoration-line":"initial","background-color":"--darkL1",border:"5px solid #2D8FDD",transition:"transform 0.2s ease-in-out","text-transform":"uppercase",transform:"translateY(0)",display:"inline-block",font:"--capture","font-weight":"700","lg-margin-left":"0px",href:"/dashboard",color:"--light","border-color":"--color-secondary"},"Create Project"))," ",r.createElement(l.Z,{"text-align":"left","background-color":"--color-darkL1","sm-overflow-y":"hidden","sm-overflow-x":"hidden","sm-padding":"50px 0 0px 0"},r.createElement(d.Z,{"margin-top":"96px","sm-margin-top":"64px",position:"relative",height:"0px","padding-bottom":"56.25%",margin:"24px 0px 18px 0px","border-radius":"12px","box-shadow":"0 10px 15px -3px rgba(0, 0, 0, 0.3),0 4px 6px -2px rgba(0, 0, 0, 0.1)",background:"--color-darkL1 url(https://test-upl.quarkly.io/5e60efa12db4d10024432a9f/images/youtube-ph-promo-cover.png?v=2021-12-09T06:41:28.123Z) 0% 0%/cover no-repeat",width:"100%","overflow-x":"hidden","overflow-y":"hidden","sm-margin":"0px 0px 18px 0px"},r.createElement(y.tL,{left:"0",top:"0",videoId:"K7bAu9BhXh8",position:"absolute",width:"100%",height:"100%"})))," ",r.createElement(l.Z,{"font-weight":"300",position:"relative","md-
1padding-top":"60px","md-padding-bottom":"60px","padding-bottom":"60px",padding:"100px 0","background-color":"--color-darkL1","text-align":"left","padding-top":"60px","sm-overflow-y":"hidden","sm-overflow-x":"hidden","sm-padding":"50px 0 50px 0"},r.createElement(p.ZP,{font:"--capture",color:"--compliment","text-transform":"uppercase","letter-spacing":"4px",display:"inline-block","sm-font":"--captureSm"},"FOR WEB DESIGNERS"),r.createElement(p.ZP,{as:"h2",font:"--h2",margin:"4px 0 48px 0",color:"--light","sm-font":"--h3"}," ","Full"," ",r.createElement(s.Z,{color:"--secondary"},"design")," ","control",r.createElement(m.c,null,".")," "),r.createElement(d.Z,{display:"grid",gap:"12px","grid-gap":"12px","grid-template-columns":"repeat(6, 1fr)","lg-grid-template-columns":"repeat(2, 1fr)"},r.createElement(y.RL,{"md-width":"100%","border-radius":"12px","flex-direction":"column","grid-column":"1/3",display:"flex","xl-grid-column":"1/3","lg-grid-column":"1/3","md-grid-column":"1/3",flipDurationProp:"0.3s",timingFunctionProp:"ease-in-out",width:"auto","max-width":"none",height:"640px","xl-height":"520px","sm-height":"420px"},r.createElement(u.Z,{slot:"Card Flip Icon"}),r.createElement(u.Z,{slot:"Card Flip Content","border-radius":"12px"}),r.createElement(u.Z,{slot:"Card Flip Item",display:"flex","flex-direction":"column",padding:"36px 36px 36px 36px"}),r.createElement(u.Z,{slot:"Card Flip Item Face",background:"--color-darkL2","border-radius":"12px",padding:"54px 36px 36px 36px","sm-padding":"54px 36px 16px 36px"},r.createElement(c.Z,{width:"100%",src:"https://test-upl.quarkly.io/5e60efa12db4d10024432a9f/images/for-designers-primitives-new.svg?v=2022-05-13T08:06:41.005Z","margin-top":"-20px","margin-right":"8px",loading:"lazy",margin:"-20px 8px 54px 0px","object-position":"0% 50%"}),r.createElement(p.ZP,{"sm-margin-bottom":"24px",as:"p",font:"--lead",color:"--light",margin:"auto 0px 0px 0px","lg-min-height":"40px","sm-font":"--baseSm","sm-min-height":"30px"},"Primitives")),r.createElement(u.Z,{slot:"Card Flip Item Back",background:"--color-darkL1","border-width":"2px","border-style":"solid","border-color":"--color-darkL2","border-radius":"12px",padding:"54px 36px 36px 36px","align-items":"flex-start","justify-content":"flex-end"},r.createElement(p.ZP,{"sm-margin-bottom":"24px",as:"p",font:"--lead",color:"--light",margin:"0px 0px 64px 0px","sm-margin":"0px 0px 64px 0px"}," ","These are the most basic components similar to HTML tags: Text, Image, Box, and others."," ")),r.createElement(u.Z,{slot:"Card Flip Icon Front"})),r.createElement(y.RL,{"md-width":"100%","border-radius":"12px","flex-direction":"column","grid-column":"3/7",display:"flex","xl-grid-column":"3/7","lg-grid-column":"1/3","md-grid-column":"1/3",flipDurationProp:"0.3s",timingFunctionProp:"ease-in-out",width:"auto","max-width":"none",height:"640px","xl-height":"520px","sm-max-height":"320px"},r.createElement(u.Z,{slot:"Card Flip Icon",category:"bs",icon:b.BsInfo,size:"46px",color:"--secondary",display:"block",position:"absolute",right:"36px",bottom:"32px"}),r.createElement(u.Z,{slot:"Card Flip Content","border-radius":"12px"}),r.createElement(u.Z,{slot:"Card Flip Item",display:"flex","flex-direction":"column",padding:"0px 0px 36px 0px"}),r.createElement(u.Z,{slot:"Card Flip Item Face",background:"--color-darkL2","border-radius":"12px",padding:"0px 0px 36px 0px","sm-padding":"0px 0px 16px 0px"},r.createElement(y.et,{overflow:"hidden","border-radius":"12px 12px 0 0",margin:"0px 0px 32px 0px"}),r.createElement(p.ZP,{"sm-margin-bottom":"24px",as:"p",font:"--lead",color:"--light",margin:"auto 36px 0px 36px","sm-margin":"auto 96px 24px 36px","lg-min-height":"40px","sm-font":"--baseSm","sm-min-height":"30px"},"Themes")),r.createElement(u.Z,{slot:"Card Flip Item Back",background:"--color-darkL1","border-width":"2px","border-style":"solid","border-color":"--color-darkL2","border-radius":"12px",padding:"54px 36px 36px 36px","align-items":"flex-start","justify-content":"flex-end"},r.createElement(p.ZP,{"sm-margin-bottom":"24px",as:"p",font:"--lead",color:"--light",margin:"0px 0px 64px 0px","sm-margin":"0px 0px 64px 0px"}," ","Build a professional-looking design using themes"," ")),r.createElement(u.Z,{slot:"Card Flip Icon Front","hover-color":"--secondary",color:"--greyL1",transition:"color 0.1s ease-in-out 0s"})),r.createElement(y.RL,{"md-width":"100%","border-radius":"12px","flex-direction":"column","grid-column":"1
1/4",display:"flex","xl-grid-column":"1/4","lg-grid-column":"1/3","md-grid-column":"1/3",flipDurationProp:"0.3s",timingFunctionProp:"ease-in-out",width:"auto","max-width":"none",height:"640px","xl-height":"520px","sm-height":"420px"},r.createElement(u.Z,{slot:"Card Flip Icon",category:"bs",icon:b.BsInfo,size:"46px",color:"--secondary",display:"block",position:"absolute",right:"36px",bottom:"32px"}),r.createElement(u.Z,{slot:"Card Flip Content","border-radius":"12px"}),r.createElement(u.Z,{slot:"Card Flip Item",display:"flex","flex-direction":"column",padding:"0px 0px 36px 0px"}),r.createElement(u.Z,{slot:"Card Flip Item Face",background:"--color-darkL2","border-radius":"12px",padding:"0px 0px 36px 0px","sm-padding":"0px 0px 16px 0px"},r.createElement(d.Z,{overflow:"hidden",position:"relative",margin:"0px 0px 24px 0px","sm-height":"326px"},r.createElement(c.Z,{display:"flex","border-radius":"12px 12px 0 0","margin-top":"0px",width:"100%","padding-top":"0px",src:"https://test-upl.quarkly.io/5e60efa12db4d10024432a9f/images/all-extended-styles.png?v=2022-05-13T13:57:24.917Z","object-fit":"cover",srcSet:"https://test-upl.quarkly.io/5e60efa12db4d10024432a9f/images/[email protected]?v=2022-05-13T13:57:30.436Z 2x","xl-height":"400px",sizes:"(max-width: 576px) 100vw,(max-width: 768px) 100vw,(max-width: 992px) 100vw,(max-width: 1200px) 100vw,(min-width: 1600px) 100vw,100vw"})),r.createElement(p.ZP,{"sm-margin-bottom":"24px",as:"p",font:"--lead",color:"--light",margin:"auto 36px 0px 36px","sm-margin":"auto 96px 24px 36px","lg-min-height":"40px","sm-font":"--baseSm","sm-min-height":"30px"},"Extended Styling")),r.createElement(u.Z,{slot:"Card Flip Item Back",background:"--color-darkL1","border-width":"2px","border-style":"solid","border-color":"--color-darkL2","border-radius":"12px",padding:"54px 36px 36px 36px","align-items":"flex-start","justify-content":"flex-end"},r.createElement(p.ZP,{"sm-margin-bottom":"24px",as:"p",font:"--lead",color:"--light",margin:"0px 0px 64px 0px","sm-margin":"0px 0px 64px 0px"}," ","Now your website will be noticed! Use our unique animations, catchy layouts, and transformations."," ")),r.createElement(u.Z,{slot:"Card Flip Icon Front","hover-color":"--secondary",color:"--greyL1",transition:"color 0.1s ease-in-out 0s"})),r.createElement(y.RL,{"md-width":"100%","border-radius":"12px","flex-direction":"column","grid-column":"4/7",display:"flex","xl-grid-column":"4/7","lg-grid-column":"1/3","md-grid-column":"1/3",flipDurationProp:"0.3s",timingFunctionProp:"ease-in-out",width:"auto","max-width":"none",height:"640px","xl-height":"520px","sm-height":"420px"},r.createElement(u.Z,{slot:"Card Flip Icon",category:"bs",icon:b.BsInfo,size:"46px",color:"--secondary",display:"block",position:"absolute",right:"36px",bottom:"32px"}),r.createElement(u.Z,{slot:"Card Flip Content","border-radius":"12px"}),r.createElement(u.Z,{slot:"Card Flip Item",display:"flex","flex-direction":"column",padding:"0px 0px 36px 0px"}),r.createElement(u.Z,{slot:"Card Flip Item Face",background:"--color-darkL2","border-radius":"12px",padding:"0px 0px 36px 0px","sm-padding":"0px 0px 16px 0px"},r.createElement(d.Z,{height:"100%",display:"flex","flex-direction":"column","align-items":"center","justify-content":"center",margin:"0px 0px 36px 0px","sm-height":"auto","sm-margin":"auto 0px 36px 0px","sm-transform":"scale(0.65)"},r.createElement(y.Fu,null)),r.createElement(p.ZP,{"sm-margin-bottom":"24px",as:"p",font:"--lead",color:"--light",margin:"auto 36px 0px 36px","sm-margin":"auto 96px 24px 36px","lg-min-height":"40px","sm-font":"--baseSm","sm-min-height":"30px"},"Adaptive design")),r.createElement(u.Z,{slot:"Card Flip Item Back",background:"--color-darkL1","border-width":"2px","border-style":"solid","border-color":"--color-darkL2","border-radius":"12px",padding:"54px 36px 36px 36px","align-items":"flex-start","justify-content":"flex-end"},r.createElement(p.ZP,{"sm-margin-bottom":"24px",as:"p",font:"--lead",color:"--light",margin:"0px 0px 64px 0px","sm-margin":"0px 0px 64px 0px"},"Fine-tune your adaptive design")),r.createElement(u.Z,{slot:"Card Flip Icon Front","hover-color":"--secondary",color:"--greyL1",transition:"color 0.1s ease-in-out 0s"})),r.createElement(y.RL,{"md-width":"100%","border-radius":"12px","flex-direction":"column","grid-column":"1
1/3",display:"flex","xl-grid-column":"1/3","lg-grid-column":"1/3","md-grid-column":"1/3",flipDurationProp:"0.3s",timingFunctionProp:"ease-in-out",width:"auto","max-width":"none",height:"640px","xl-height":"520px","sm-height":"420px"},r.createElement(u.Z,{slot:"Card Flip Icon",category:"bs",icon:b.BsInfo,size:"46px",color:"--secondary",display:"block",position:"absolute",right:"36px",bottom:"32px"}),r.createElement(u.Z,{slot:"Card Flip Content","border-radius":"12px"}),r.createElement(u.Z,{slot:"Card Flip Item",display:"flex","flex-direction":"column",padding:"0px 0px 36px 0px"}),r.createElement(u.Z,{slot:"Card Flip Item Face",background:"--color-darkL2","border-radius":"12px",padding:"0px 0px 36px 0px","sm-padding":"0px 0px 16px 0px"},r.createElement(d.Z,{height:"100%",margin:"0px 0px 24px 0px",display:"flex","align-items":"center","justify-content":"center"},r.createElement(y.Do,{"xl-width":"100%","lg-width":"300px",height:"100%","sm-width":"100%",width:"300px","md-margin":"0px auto 0px auto",display:"flex","sm-height":"320px","sm-justify-content":"center"})),r.createElement(p.ZP,{"sm-margin-bottom":"24px",as:"p",font:"--lead",color:"--light",margin:"auto 36px 0px 36px","lg-min-height":"40px","sm-font":"--baseSm","sm-min-height":"30px"},"Components")),r.createElement(u.Z,{slot:"Card Flip Item Back",background:"--color-darkL1","border-width":"2px","border-style":"solid","border-color":"--color-darkL2","border-radius":"12px",padding:"54px 36px 36px 36px","align-items":"flex-start","justify-content":"flex-end"},r.createElement(p.ZP,{"sm-margin-bottom":"24px",as:"p",font:"--lead",color:"--light",margin:"0px 0px 64px 0px","sm-margin":"0px 0px 64px 0px"}," ","Create a component from one or more objects on the page or from the Layer panel. Add copies of the component to the page, and they will inherit all the props."," ")),r.createElement(u.Z,{slot:"Card Flip Icon Front","hover-color":"--secondary",color:"--greyL1",transition:"color 0.1s ease-in-out 0s"})),r.createElement(y.RL,{"md-width":"100%","border-radius":"12px","flex-direction":"column","grid-column":"3/7",display:"flex","xl-grid-column":"3/7","lg-grid-column":"1/3","md-grid-column":"1/3",flipDurationProp:"0.3s",timingFunctionProp:"ease-in-out",width:"auto","max-width":"none",height:"640px","xl-height":"520px","sm-height":"420px"},r.createElement(u.Z,{slot:"Card Flip Icon",category:"bs",icon:b.BsInfo,size:"46px",color:"--secondary",display:"block",position:"absolute",right:"36px",bottom:"32px"}),r.createElement(u.Z,{slot:"Card Flip Content","border-radius":"12px"}),r.createElement(u.Z,{slot:"Card Flip Item",display:"flex","flex-direction":"column",padding:"0px 0px 36px 0px"}),r.createElement(u.Z,{slot:"Card Flip Item Face",background:"--color-darkL2","border-radius":"12px",padding:"0px 0px 36px 0px","sm-padding":"0px 0px 16px 0px"},r.createElement(d.Z,{position:"relative","margin-bottom":"24px",overflow:"hidden"},r.createElement(c.Z,{display:"flex","border-radius":"12px 12px 0 0","margin-top":"0px",width:"100%","padding-top":"0px",src:"https://test-upl.quarkly.io/5e60efa12db4d10024432a9f/images/all-blocks.png?v=2022-05-13T11:29:16.088Z","object-fit":"cover",srcSet:"https://test-upl.quarkly.io/5e60efa12db4d10024432a9f/images/[email protected]?v=2022-05-13T11:31:39.877Z 2x","xl-height":"400px",sizes:"(max-width: 576px) 100vw,(max-width: 768px) 100vw,(max-width: 992px) 100vw,(max-width: 1200px) 100vw,(min-width: 1600px) 100vw,100vw"})),r.createElement(p.ZP,{"sm-margin-bottom":"24px",as:"p",font:"--lead",color:"--light",margin:"auto 36px 0px 36px","sm-margin":"auto 96px 24px 36px","lg-min-height":"40px","sm-font":"--baseSm","sm-min-height":"30px"},"Ready-made Content")),r.createElement(u.Z,{slot:"Card Flip Item Back",background:"--color-darkL1","border-width":"2px","border-style":"solid","border-color":"--color-darkL2","border-radius":"12px",padding:"54px 36px 36px 36px","align-items":"flex-start","justify-content":"flex-end"},r.createElement(p.ZP,{"sm-margin-bottom":"24px",as:"p",font:"--lead",color:"--light",margin:"0px 0px 64px 0px","sm-margin":"0px 0px 64px 0px"}," ","Use the ready-made blocks such as maps, videos, pop-ups, and more to enhance your site."," ")),r.createElement(u.Z,{slot:"Card Flip Icon Front","hover-color":"--secondary",color:"--greyL1",transition:"color 0.1s ease-in-out 0s"}
1)),r.createElement(h.Z,{gap:"12px","grid-column":"1/7","lg-grid-column":"1/3"},r.createElement(y.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"50%","md-width":"50%","sm-width":"100%"},r.createElement(u.Z,{slot:"text1",itemprop:"description"}," ","Your website will automatically adjust to different screen sizes, with different design solutions for elements at breakpoints."," "),r.createElement(u.Z,{slot:"image",alt:"Quarkly Features. Example of how page looks with different breakpoints",itemprop:"contentUrl",src:"https://uploads.quarkly.io/landing/quarkly-features-adaptive-design-customizing.svg"}),r.createElement(u.Z,{slot:"text",itemprop:"name"},"Customizing design with breakpoints")),r.createElement(y.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"50%","md-width":"50%","sm-width":"100%"},r.createElement(u.Z,{slot:"text",itemprop:"name"},"Adding and editing breakpoints"),r.createElement(u.Z,{slot:"text1",itemprop:"description"}," ","Use your custom breakpoints or choose one of the existing ones."," "),r.createElement(u.Z,{slot:"image",itemprop:"contentUrl",src:"https://uploads.quarkly.io/landing/quarkly-features-adaptive-design-editing-adding-breakpoints.svg",alt:"Quarkly Features. Part of Quarkly interface featuring breakpoint settings "})),r.createElement(y.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"33.33%","md-width":"50%","sm-width":"100%"},r.createElement(u.Z,{slot:"image",itemprop:"contentUrl",src:"https://uploads.quarkly.io/landing/quarkly-features-dnd.svg",alt:"Quarkly Features. Drag'n'Drop of elements"}),r.createElement(u.Z,{slot:"text",itemprop:"name"},"Drag'n'Drop"),r.createElement(u.Z,{slot:"text1",itemprop:"description"}," ","Move elements around, place them however you want on the page, or nest them in other elements."," ")),r.createElement(y.by,{itemtype:"http://schema.org/ImageObject",width:"33.33%","md-width":"50%","sm-width":"100%",itemscope:!0},r.createElement(u.Z,{slot:"text",itemprop:"name"},"Multiselect"),r.createElement(u.Z,{slot:"text1",itemprop:"description"}," ","You can select multiple elements and modify their styles or drag'n'drop them to change their location."," "),r.createElement(u.Z,{slot:"image",src:"https://uploads.quarkly.io/landing/quarkly-features-multiselect.svg",alt:"Quarkly Features. Select of multiple elements (button and text)",itemprop:"contentUrl"})),r.createElement(y.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"33.33%","md-width":"50%","sm-width":"100%"},r.createElement(u.Z,{slot:"text",itemprop:"name"},"Text editor"),r.createElement(u.Z,{slot:"text1",itemprop:"description"}," ","You can change the appearance of text in many ways. For example, you can italicize it or make it bold. You can also make it into a link or turn it into a span element."," "),r.createElement(u.Z,{slot:"image",itemprop:"contentUrl",src:"https://uploads.quarkly.io/landing/quarkly-features-text-editor.svg",alt:"Quarkly Features. Partly styled text with text edit panel"})),r.createElement(y.by,{width:"33.33%","md-width":"50%","sm-width":"100%",itemscope:!0,itemtype:"http://schema.org/ImageObject"},r.createElement(u.Z,{slot:"text1",itemprop:"description"}," ","Click twice to go up and down the hierarchy of elements. If you need to get inside the hierarchy, hold down Ctrl on Windows or Cmd on MacOs."," "),r.createElement(u.Z,{slot:"image",alt:"Quarkly Features. Spacing display",itemprop:"contentUrl",src:"https://test-upl.quarkly.io/5e60efa12db4d10024432a9f/images/quarkly-features-deepselect.svg?v=2021-02-10T07:52:47.636Z"}),r.createElement(u.Z,{slot:"text",itemprop:"name"},"Deep select")),r.createElement(y.by,{"md-width":"50%","sm-width":"100%",itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"33.33%"},r.createElement(u.Z,{slot:"text1",itemprop:"description"}," ","Quarkly supports the most advanced approaches to frontend coding."," "),r.createElement(u.Z,{slot:"image",itemprop:"contentUrl",src:"https://uploads.quarkly.io/landing/quarkly-features-styles-flex-grid.svg",alt:"Quarkly Features. Abstract examples of flexbox and grid"}),r.createElement(u.Z,{slot:"text",itemprop:"name",font:"--capture"},"Support of Flexbox and Grid")),r.createElement(y.by,{"md-width":"50%","sm-width":"100%",itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"33.33%"},r.createElement(u.Z,{slot:"image",itemprop:"contentUrl",src:"https://uploads.quarkly.io/landing/quarkly-features-styles-pseudo-class.svg?ver=1",alt:"Quarkly Features. Example of buttons with different styles depending on pseudo-class"}),r.createElement(u.Z,{slot:"text",itemprop:"name"}
1,"Configuring styles of pseudo-classes hover/active/focus, etc."),r.createElement(u.Z,{slot:"text1",itemprop:"description"}," ",'To change the way an element looks, such as its appearance on hover, enable the "hover" prop and set other desired props.'," ")),r.createElement(y.by,{"md-width":"50%","sm-width":"100%",itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"33.33%"},r.createElement(u.Z,{slot:"text",itemprop:"name",font:"--capture"},"Google Fonts Connection"),r.createElement(u.Z,{slot:"text1",itemprop:"description"}," ","Use the library of over 990 font families to make your site look more beautiful"," "),r.createElement(u.Z,{slot:"image",src:"https://uploads.quarkly.io/landing/quarkly-features-styles-google-fonts.png",alt:"Quarkly Features. Google Fonts Logo",itemprop:"contentUrl"})),r.createElement(y.by,{"sm-width":"100%",itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"33.33%","md-width":"50%"},r.createElement(u.Z,{slot:"text",itemprop:"name",font:"--capture"},"Unsplash images"),r.createElement(u.Z,{slot:"text1",itemprop:"description"}," ","Browse Unsplash's collection of free images and choose directly from the Quarkly interface."," "),r.createElement(u.Z,{slot:"image",itemprop:"contentUrl",src:"https://uploads.quarkly.io/landing/quarkly-features-unsplash.svg",alt:"Quarkly Features. Unsplash Logo"})),r.createElement(y.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"33.33%","md-width":"50%","sm-width":"100%"},r.createElement(u.Z,{slot:"text",itemprop:"name"},"Props panel"),r.createElement(u.Z,{slot:"text1",itemprop:"description"}," ","Here you will find categorized style and functional properties."," "),r.createElement(u.Z,{slot:"image",alt:"Quarkly Features. Part of Quarkly interface featuring the props panel",itemprop:"contentUrl",src:"https://uploads.quarkly.io/landing/quarkly-features-styles-props-panel.svg"})),r.createElement(y.by,{itemtype:"http://schema.org/ImageObject",width:"25%","md-width":"50%","sm-width":"100%",itemscope:!0},r.createElement(u.Z,{slot:"text",itemprop:"name"},"Layout"),r.createElement(u.Z,{slot:"text1",itemprop:"description"}," ","This section allows you to configure the display properties of elements."," "),r.createElement(u.Z,{slot:"image",itemprop:"contentUrl",src:"https://uploads.quarkly.io/landing/quarkly-features-styles-layout.svg",alt:"Quarkly Features. Example of changing properties from Layout group"})),r.createElement(y.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"25%","md-width":"50%","sm-width":"100%"},r.createElement(u.Z,{slot:"text",itemprop:"name"},"Typography"),r.createElement(u.Z,{slot:"text1",itemprop:"description"}," ","Here you'll find text style properties that can be applied to your text."," "),r.createElement(u.Z,{slot:"image",alt:"Quarkly Features. Example of changing properties from Typography group",itemprop:"contentUrl",src:"https://uploads.quarkly.io/landing/quarkly-features-styles-typography.svg"})),r.createElement(y.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"25%","md-width":"50%","sm-width":"100%"},r.createElement(u.Z,{slot:"text",itemprop:"name"},"Indents"),r.createElement(u.Z,{slot:"text1",itemprop:"description"}," ","In these settings, you can set margins and paddings."," "),r.createElement(u.Z,{slot:"image",itemprop:"contentUrl",src:"https://uploads.quarkly.io/landing/quarkly-features-styles-indents.svg",alt:"Quarkly Features. Example of changing properies from the Indents group"})),r.createElement(y.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"25%","md-width":"50%","sm-width":"100%"},r.createElement(u.Z,{slot:"text",itemprop:"name"},"Background"),r.createElement(u.Z,{slot:"text1",itemprop:"description"}," ","This section has props you can use to set up element backgrounds."," "),r.createElement(u.Z,{slot:"image",itemprop:"contentUrl",src:"https://uploads.quarkly.io/landing/quarkly-features-styles-background.svg",alt:"Quarkly Features. Example of changing properies from Background group"})),r.createElement(y.by,{itemtype:"http://schema.org/ImageObject",width:"25%","md-width":"50%","sm-width":"100%",itemscope:!0},r.createElement(u.Z,{slot:"text",itemprop:"name"},"Borders"),r.createElement(u.Z,{slot:"text1",itemprop:"description"}," ","Here you can adjust borders and border radius."," "),r.createElement(u.Z,{slot:"image",itemprop:"contentUrl",src:"https://uploads.quarkly.io/landing/quarkly-features-styles-border.svg",alt:"Quarkly Features. Example of changing properies from Borders group"})),r.createElement(y.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"25%","md-width":"50%","sm-width":"100%"},r.createElement(u.Z,{slot:"text",itemprop:"name"},"Position"),r.createElement(u.Z,{slot:"text1",itemprop:"description"}," ","This category helps you configure element position and z-index settings."," "),r.createElement(u.Z,{slot:"image",src:"https://uploads.quarkly.io/landing/quarkly-features-styles-position.svg",alt:"Quarkly Features. Example of changing properies from Position group",itemprop:"contentUrl"})),r.createElement(y.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"25%","md-width":"50%","sm-width":"100%"},r.createElement(u.Z,{slot:"text",itemprop:"name"},"Transition"),r.createElement(u.Z,{slot:"text1",itemprop:"description"}," ","This property makes it possible for elements to move smoothly from one state to another."," "),r.createElement(u.Z,{slot:"image",itemprop:"contentUrl",src:"https://uploads.quarkly.io/landing/quarkly-features-styles-transition.svg",alt:"Quarkly Features. Example of changing Transition property from Effects group"})),r.createElement(y.by,{itemtype:"http://schema.org/ImageObject",width:"25%","md-width":"100%","sm-width":"100%",itemscope:!0,"lg-width":"100%"},r.createElement(u.Z,{slot:"text",itemprop:"name"},"Transform"),r.createElement(u.Z,{slot:"text1",itemprop:"description"}," ","You can transform the element using this property, for instance, rotate or zoom."," "),r.createElement(u.Z,{slot:"image",itemprop:"contentUrl",src:"https://uploads.quarkly.io/landing/quarkly-features-styles-transform.svg",alt:"Quarkly Features. Example of changing Transform property from Effects group"})))),r.createElement(y.DO,{display:"inline-block","background-color":"--darkL1","sm-margin":"20px auto 0 0px",href:"/auth/sign-up",color:"--light",font:"--capture","text-decoration-line":"initial","text-transform":"uppercase",transform:"translateY(0)","border-radius":"100px","font-weight":"700","hover-transform":"translateY(-8px)","letter-spacing":"2px",margin:"50px auto 0 auto",padding:"16px 40px",transition:"transform 0.2s ease-in-out",border:"5px solid --color-light"},"Create project"))," ",r.createElement(l.Z,{"font-weight":"300",position:"relative","md-
1padding-bottom":"50px","padding-bottom":"60px","text-align":"left",padding:"100px 0","background-color":"--color-darkL1","md-padding-top":"50px","padding-top":"60px","sm-overflow-y":"hidden","sm-overflow-x":"hidden","sm-padding":"50px 0 50px 0"},r.createElement(p.ZP,{"letter-spacing":"4px",display:"inline-block",font:"--capture",color:"--compliment","text-transform":"uppercase","sm-font":"--captureSm"},"FOR WEB DEVELOPERS"),r.createElement(p.ZP,{"sm-font":"--h3",as:"h2",font:"--h2",margin:"4px 0 48px 0",color:"--light"},"Development capabilities",r.createElement(m.c,{"overflow-wrap":"normal","word-break":"normal","white-space":"normal","text-indent":"0","text-overflow":"clip",hyphens:"manual"},"."),r.createElement("br",null),r.createElement(s.Z,{"overflow-wrap":"normal","word-break":"normal","white-space":"normal","text-indent":"0","text-overflow":"clip",hyphens:"manual",color:"--secondary"},"Supercharged",r.createElement(m.c,{hyphens:"manual","overflow-wrap":"normal","word-break":"normal","white-space":"normal","text-indent":"0","text-overflow":"clip"},".")))," ",r.createElement(d.Z,{display:"grid",gap:"12px","grid-gap":"12px","grid-template-columns":"repeat(6, 1fr)"},r.createElement(y.RL,{"md-width":"100%","border-radius":"12px","flex-direction":"column","grid-column":"1/7",display:"flex","xl-grid-column":"1/7","lg-grid-column":"1/7","md-grid-column":"1/7",flipDurationProp:"0.3s",timingFunctionProp:"ease-in-out",width:"auto","max-width":"none",height:"640px","xl-height":"520px","sm-height":"420px"},r.createElement(u.Z,{slot:"Card Flip Icon",category:"bs",icon:b.BsInfo,size:"46px",color:"--secondary",display:"block",position:"absolute",right:"36px",bottom:"32px"}),r.createElement(u.Z,{slot:"Card Flip Content","border-radius":"12px"}),r.createElement(u.Z,{slot:"Card Flip Item",display:"flex","flex-direction":"column",padding:"0px 0px 36px 0px"}),r.createElement(u.Z,{slot:"Card Flip Item Face",background:"--color-darkL2","border-radius":"12px",padding:"0px 0px 36px 0px","sm-padding":"0px 0px 16px 0px"},r.createElement(d.Z,{"sm-max-height":"390px","md-flex-direction":"column",display:"flex","box-sizing":"border-box","border-radius":"12px 12px 0 0",overflow:"hidden","margin-bottom":"24px"},r.createElement(d.Z,{"margin-right":"16px","md-width":"100%",width:"50%","margin-left":"{0}",height:"400px","background-repeat":"no-repeat","background-size":"contain",background:"linear-gradient(180deg,transparent 73.3%,--color-darkL2 99%) 0 0 no-repeat,rgba(0, 0, 0, 0) url(https://uploads.quarkly.io/landing/own-component-code.png) 0% 0% /cover no-repeat scroll padding-box","border-radius":"0px",position:"relative"}),r.createElement(y.vB,{"padding-top":"{0}","margin-left":"16px",font:"100 120px/1 --fontFamily-googleSourceSansPro",padding:"7% 0px 0px 0px",move:"enable","flex-wrap":"wrap",mode:"smooth","margin-right":"{0}","align-items":"flex-start","justify-content":"flex-start",width:"50%",display:"block","xl-font":"100 120px/1 --fontFamily-googleSourceSansPro",color:"--secondary","md-width":"auto","sm-min-height":"180px","overflow-x":"hidden","overflow-y":"hidden","md-display":"block","md-padding":"0px 0px 0px 0px","md-margin":"0px 0px 0px 0px","md-height":"250px"},r.createElement(u.Z,{slot:"Text",color:"--secondary","white-space":"nowrap","word-break":"keep-all",margin:"16px 18px 16px 0px"},"This is user's newsticker component!"))),r.createElement(p.ZP,{"sm-margin-bottom":"24px",as:"p",font:"--lead",color:"--light",margin:"auto 36px 0px 36px","sm-margin":"auto 96px 22px 36px","lg-min-height":"40px","sm-font":"--baseSm","sm-min-height":"30px"}," ","Create custom React components using the code editor."," ")),r.createElement(u.Z,{slot:"Card Flip Item Back",background:"--color-darkL1","border-width":"2px","border-style":"solid","border-color":"--color-darkL2","border-radius":"12px",padding:"54px 36px 36px 36px","align-items":"flex-start","justify-content":"flex-end"},r.createElement(p.ZP,{"sm-margin-bottom":"24px",as:"p",font:"--lead",color:"--light",margin:"0px 0px 64px 0px","sm-margin":"0px 0px 64px 0px"}," ","You can build and add custom React components to your Quarkly pages using the code editor."," ")),r.createElement(u.Z,{slot:"Card Flip Icon Front","hover-color":"--secondary",color:"--greyL1",transition:"color 0.1s ease-in-out 0s"})),r.createElement(y.RL,{"md-width":"100%","border-radius":"12px","flex-direction":"column","grid-column":"1
1/4",display:"flex","xl-grid-column":"1/4","lg-grid-column":"1/4","md-grid-column":"1/7",flipDurationProp:"0.3s",timingFunctionProp:"ease-in-out",width:"auto","max-width":"none",height:"640px","xl-height":"520px","sm-height":"420px"},r.createElement(u.Z,{slot:"Card Flip Icon",category:"bs",icon:b.BsInfo,size:"46px",color:"--secondary",display:"block",position:"absolute",right:"36px",bottom:"32px"}),r.createElement(u.Z,{slot:"Card Flip Content","border-radius":"12px"}),r.createElement(u.Z,{slot:"Card Flip Item",display:"flex","flex-direction":"column",padding:"0px 0px 36px 0px"}),r.createElement(u.Z,{slot:"Card Flip Item Face",background:"--color-darkL2","border-radius":"12px",padding:"54px 36px 36px 36px","sm-padding":"54px 36px 16px 36px"},r.createElement(y.vd,{animation:"Rotate",width:"335px",height:"335px",duration:"7.5s","max-width":"100%","max-height":"100%","sm-height":"240px","sm-display":"block"},r.createElement(d.Z,{width:"335px","max-width":"100%","max-height":"100%",height:"335px","margin-bottom":"36px",background:"rgba(0, 0, 0, 0) url(https://test-upl.quarkly.io/5e60efa12db4d10024432a9f/images/react-logo.svg?v=2022-05-13T09:30:04.425Z) center/contain no-repeat scroll padding-box",position:"relative","md-margin-right":"auto","sm-padding":"0px 0px 81% 0px","sm-height":"235px"})),r.createElement(p.ZP,{"sm-margin-bottom":"24px",as:"p",font:"--lead",color:"--light",margin:"auto 36px 0px 0px","lg-min-height":"40px","sm-font":"--baseSm","sm-min-height":"30px"},"React.js")),r.createElement(u.Z,{slot:"Card Flip Item Back",background:"--color-darkL1","border-width":"2px","border-style":"solid","border-color":"--color-darkL2","border-radius":"12px",padding:"54px 36px 36px 36px","align-items":"flex-start","justify-content":"flex-end"},r.createElement(p.ZP,{"sm-margin-bottom":"24px",as:"p",font:"--lead",color:"--light",margin:"0px 0px 64px 0px","sm-margin":"0px 0px 64px 0px"},"The pages are written in JSX code typical for React.js")),r.createElement(u.Z,{slot:"Card Flip Icon Front","hover-color":"--secondary",color:"--greyL1",transition:"color 0.1s ease-in-out 0s"})),r.createElement(y.RL,{"md-width":"100%","border-radius":"12px","flex-direction":"column","grid-column":"4/7",display:"flex","xl-grid-column":"4/7","lg-grid-column":"4/7","md-grid-column":"1/7",flipDurationProp:"0.3s",timingFunctionProp:"ease-in-out",width:"auto","max-width":"none",height:"640px","xl-height":"520px","sm-height":"420px"},r.createElement(u.Z,{slot:"Card Flip Icon",category:"bs",icon:b.BsInfo,size:"46px",color:"--secondary",display:"block",position:"absolute",right:"36px",bottom:"32px"}),r.createElement(u.Z,{slot:"Card Flip Content","border-radius":"12px"}),r.createElement(u.Z,{slot:"Card Flip Item",display:"flex","flex-direction":"column",padding:"0px 0px 36px 0px"}),r.createElement(u.Z,{slot:"Card Flip Item Face",background:"--color-darkL2","border-radius":"12px",padding:"54px 36px 36px 36px","sm-padding":"54px 36px 16px 36px"},r.createElement(d.Z,{height:"335px","margin-bottom":"36px",background:"rgba(0, 0, 0, 0) url(https://uploads.quarkly.io/landing/npm-community.svg) 0% 0% /contain no-repeat scroll padding-box","sm-padding":"0px 0px 0px 0px","sm-width":"220px","sm-min-height":"none","sm-height":"220px"}),r.createElement(p.ZP,{"sm-margin-bottom":"24px",as:"p",font:"--lead",color:"--light",margin:"auto 36px 0px 0px","sm-margin":"auto 52px 22px 0px","lg-min-height":"40px","sm-font":"--baseSm","sm-min-height":"30px"},"Hot import from NPM")),r.createElement(u.Z,{slot:"Card Flip Item Back",background:"--color-darkL1","border-width":"2px","border-style":"solid","border-color":"--color-darkL2","border-radius":"12px",padding:"54px 36px 36px 36px","align-items":"flex-start","justify-content":"flex-end"},r.createElement(p.ZP,{"sm-margin-bottom":"24px",as:"p",font:"--lead",color:"--light",margin:"0px 0px 64px 0px","sm-margin":"0px 0px 64px 0px"}," ","Import modules to your component with ease, if needed."," ")),r.createElement(u.Z,{slot:"Card Flip Icon Front","hover-color":"--secondary",color:"--greyL1",transition:"color 0.1s ease-in-out 0s"})),r.createElement(y.RL,{"md-width":"100%","border-radius":"12px","flex-direction":"column","grid-column":"1
1/3",display:"flex","xl-grid-column":"1/3","lg-grid-column":"1/7","md-grid-column":"1/7",flipDurationProp:"0.3s",timingFunctionProp:"ease-in-out",width:"auto","max-width":"none",height:"640px","xl-height":"520px","sm-height":"420px"},r.createElement(u.Z,{slot:"Card Flip Icon",category:"bs",icon:b.BsInfo,size:"46px",color:"--secondary",display:"block",position:"absolute",right:"36px",bottom:"32px"}),r.createElement(u.Z,{slot:"Card Flip Content","border-radius":"12px"}),r.createElement(u.Z,{slot:"Card Flip Item",display:"flex","flex-direction":"column",padding:"0px 0px 36px 0px"}),r.createElement(u.Z,{slot:"Card Flip Item Face",background:"--color-darkL2","border-radius":"12px",padding:"54px 36px 36px 36px","sm-padding":"54px 36px 16px 36px"},r.createElement(c.Z,{"margin-bottom":"24px",width:"124px",height:"124px",src:"https://uploads.quarkly.io/landing/typo-star.svg",loading:"lazy"}),r.createElement(y.h2,{width:"256px",color:"--secondary",font:"--h3",height:"200px","lg-height":"162px",margin:"0px 0px 36px 0px","overflow-x":"hidden","overflow-y":"hidden"}),r.createElement(p.ZP,{"sm-margin-bottom":"24px",as:"p",font:"--lead",color:"--light",margin:"auto 36px 0px 0px","lg-min-height":"40px","sm-font":"--baseSm","sm-min-height":"30px"},"SEO")),r.createElement(u.Z,{slot:"Card Flip Item Back",background:"--color-darkL1","border-width":"2px","border-style":"solid","border-color":"--color-darkL2","border-radius":"12px",padding:"54px 36px 36px 36px","align-items":"flex-start","justify-content":"flex-end"},r.createElement(p.ZP,{"sm-margin-bottom":"24px",as:"p",font:"--lead",color:"--light",margin:"0px 0px 64px 0px","sm-margin":"0px 0px 64px 0px"},"Optimize your site to promote it on search engines")),r.createElement(u.Z,{slot:"Card Flip Icon Front","hover-color":"--secondary",color:"--greyL1",transition:"color 0.1s ease-in-out 0s"})),r.createElement(y.RL,{"md-width":"100%","border-radius":"12px","flex-direction":"column","grid-column":"3/5",display:"flex","xl-grid-column":"3/5","lg-grid-column":"1/4","md-grid-column":"1/7",flipDurationProp:"0.3s",timingFunctionProp:"ease-in-out",width:"auto","max-width":"none",height:"640px","xl-height":"520px","sm-height":"420px"},r.createElement(u.Z,{slot:"Card Flip Icon",category:"bs",icon:b.BsInfo,size:"46px",color:"--secondary",display:"block",position:"absolute",right:"36px",bottom:"32px"}),r.createElement(u.Z,{slot:"Card Flip Content","border-radius":"12px"}),r.createElement(u.Z,{slot:"Card Flip Item",display:"flex","flex-direction":"column",padding:"0px 0px 36px 0px"}),r.createElement(u.Z,{slot:"Card Flip Item Face",background:"--color-darkL2","border-radius":"12px",padding:"54px 36px 36px 36px","sm-padding":"54px 36px 16px 36px"},r.createElement(d.Z,{height:"335px","margin-bottom":"36px",background:"rgba(0, 0, 0, 0) url(https://test-upl.quarkly.io/5e60efa12db4d10024432a9f/images/export-options.png?v=2022-05-13T09:28:02.341Z) 0% 0% /contain no-repeat scroll padding-box","sm-padding":"0px 0px 0px 0px","sm-background":"rgba(0, 0, 0, 0) url(https://test-upl.quarkly.io/5e60efa12db4d10024432a9f/images/export-options.png?v=2022-05-13T09:28:02.341Z) center/contain no-repeat scroll padding-box","sm-max-height":"300px","sm-max-width":"300px"}),r.createElement(p.ZP,{"sm-margin-bottom":"24px",as:"p",font:"--lead",color:"--light",margin:"auto 36px 0px 0px","lg-min-height":"40px","sm-font":"--baseSm","sm-min-height":"30px"},"Export CRA")),r.createElement(u.Z,{slot:"Card Flip Item Back",background:"--color-darkL1","border-width":"2px","border-style":"solid","border-color":"--color-darkL2","border-radius":"12px",padding:"54px 36px 36px 36px","align-items":"flex-start","justify-content":"flex-end"},r.createElement(p.ZP,{"sm-margin-bottom":"24px",as:"p",font:"--lead",color:"--light",margin:"0px 0px 64px 0px","sm-margin":"0px 0px 64px 0px"}," ","If you want to host your project on your server, you can export it into an archive with create-react-app."," ")),r.createElement(u.Z,{slot:"Card Flip Icon Front","hover-color":"--secondary",color:"--greyL1",transition:"color 0.1s ease-in-out 0s"})),r.createElement(y.RL,{"md-width":"100%","border-radius":"12px","flex-direction":"column","grid-column":"5/7",display:"flex","xl-grid-column":"5/7","lg-gr
1id-column":"4/7","md-grid-column":"1/7",flipDurationProp:"0.3s",timingFunctionProp:"ease-in-out",width:"auto","max-width":"none",height:"640px","xl-height":"520px","sm-height":"420px"},r.createElement(u.Z,{slot:"Card Flip Icon",category:"bs",icon:b.BsInfo,size:"46px",color:"--secondary",display:"block",position:"absolute",right:"36px",bottom:"32px"}),r.createElement(u.Z,{slot:"Card Flip Content","border-radius":"12px"}),r.createElement(u.Z,{slot:"Card Flip Item",display:"flex","flex-direction":"column",padding:"0px 0px 36px 0px"}),r.createElement(u.Z,{slot:"Card Flip Item Face",background:"--color-darkL2","border-radius":"12px",padding:"0px 0px 36px 0px","sm-padding":"0px 0px 16px 0px"},r.createElement(d.Z,{"border-radius":"12px 12px 0 0","background-repeat":"no-repeat","background-size":"contain",background:"linear-gradient(180deg,transparent 73.3%,--color-darkL2 99%) 0 0 no-repeat,rgba(0, 0, 0, 0) url(https://test-upl.quarkly.io/5e60efa12db4d10024432a9f/images/for-developer-code-editor.svg?v=2020-11-04T21:01:48.160Z) 0% 0% /cover no-repeat scroll padding-box",position:"relative","lg-background":"rgba(0, 0, 0, 0) url(https://uploads.quarkly.io/landing/for-webmasters-code-editor.jpg) 0% 0% /cover no-repeat scroll padding-box","lg-height":"412px",height:"400px","sm-height":"320px"}),r.createElement(p.ZP,{"sm-margin-bottom":"24px",as:"p",font:"--lead",color:"--light",margin:"auto 36px 0px 36px","lg-min-height":"40px","sm-font":"--baseSm","sm-min-height":"30px"},"Code Editor")),r.createElement(u.Z,{slot:"Card Flip Item Back",background:"--color-darkL1","border-width":"2px","border-style":"solid","border-color":"--color-darkL2","border-radius":"12px",padding:"54px 36px 36px 36px","align-items":"flex-start","justify-content":"flex-end"},r.createElement(p.ZP,{"sm-margin-bottom":"24px",as:"p",font:"--lead",color:"--light",margin:"0px 0px 64px 0px","sm-margin":"0px 0px 64px 0px"},"Fine-tune elements in the code editor")),r.createElement(u.Z,{slot:"Card Flip Icon Front","hover-color":"--secondary",color:"--greyL1",transition:"color 0.1s ease-in-out 0s"})),r.createElement(h.Z,{gap:"12px","grid-column":"1/7"},r.createElement(y.by,{"sm-width":"100%",itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"33.33%","md-width":"50%"},r.createElement(u.Z,{slot:"text",itemprop:"name"},"Export to Gatsby Project"),r.createElement(u.Z,{slot:"text1",itemprop:"description"}," ","You can export your projects to Gatsby, a popular static site generator (SSG)."," "),r.createElement(u.Z,{slot:"image",itemprop:"contentUrl",src:"https://uploads.quarkly.io/landing/quarkly-features-export-gatsby.svg",alt:"Quarkly Features. Gatsby logo"})),r.createElement(y.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"33.33%","md-width":"50%","sm-width":"100%"},r.createElement(u.Z,{slot:"image",itemprop:"contentUrl",src:"https://test-upl.quarkly.io/5e60efa12db4d10024432a9f/images/quarkly-features-github.svg?v=2020-10-26T15:07:30.957Z"}),r.createElement(u.Z,{slot:"text",itemprop:"name"},"Pushing commits to your GitHub repository"),r.createElement(u.Z,{slot:"text1",itemprop:"description"}," ","Create a GitHub repository for your project and commit changes as you work."," ")),r.createElement(y.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"33.33%","md-width":"50%","sm-width":"100%"},r.createElement(u.Z,{slot:"text",itemprop:"name"},"Publication on Netlify"),r.createElement(u.Z,{slot:"text1",itemprop:"description"}," ","Once your site is ready, you can publish it on Netlify with a technical domain name such as https://inspiring-beaver-d128ed.netlify.app."," "),r.createElement(u.Z,{slot:"image",itemprop:"contentUrl",src:"https://test-upl.quarkly.io/5e60efa12db4d10024432a9f/images/quarkly-features-netlify.svg?v=2020-10-26T13:40:01.248Z"})),r.createElement(y.by,{width:"25%","md-width":"50%","sm-width":"100%",itemscope:!0,itemtype:"http://schema.org/ImageObject"},r.createElement(u.Z,{slot:"text1",itemprop:"description"}," ","The editor displays all the entities of the page."," "),r.createElement(u.Z,{slot:"image",itemprop:"contentUrl",src:"https://uploads.quarkly.io/landing/quarkly-features-code-editor-base.svg",alt:"Quarkly Features. Code in Quarkly editor"}),r.createElement(u.Z,{slot:"text",itemprop:"name",font:"--capture"},"Modern built-in code editor")),r.createElement(y.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"25%","md-width":"50%","sm-width":"100%"},r.createElement(u.Z,{slot:"text",itemprop:"name"},"Debugger",r.createElement("br",null)),r.createElement(u.Z,{slot:"text1",itemprop:"description"}," ","Use our debug console to track errors in the component code and pages."," "),r.createElement(u.Z,{slot:"image",itemprop:"contentUrl",src:"https://uploads.quarkly.io/landing/quarkly-features-code-editor-debugger.svg",alt:"Quarkly Features. Example of errors in Debugger"})),r.createElement(y.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"25%","md-width":"50%","sm-width":"100%"},r.createElement(u.Z,{slot:"image",itemprop:"contentUrl",src:"https://uploads.quarkly.io/landing/quarkly-features-code-editor-hints.svg",alt:"Quarkly Features. Example of hint in Quarkly code editor"}),r.createElement(u.Z,{slot:"text",itemprop:"name"}," ","Code tips"," "),r.createElement(u.Z,{slot:"text1",itemprop:"description"}," ","If you're not sure how to spell a property, type the first few letters and the editor will complete it for you."," ")),r.createElement(y.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"25%","md-width":"100%","sm-width":"100%","lg-width":"100%"},r.createElement(u.Z,{slot:"text",itemprop:"name"},"Synched pages and code editor"),r.createElement(u.Z,{slot:"text1",itemprop:"description"}," ","All edits you apply to the pages are shown in the code and vice versa."," "),r.createElement(u.Z,{slot:"image",itemprop:"contentUrl",src:"https://uploads.quarkly.io/landing/quarkly-features-code-editor-sync.svg",alt:"Quarkly Features. Example of synchronization between code and page"})))),r.createElement(y.DO,{display:"inline-block","background-color":"--darkL1","sm-margin":"20px auto 0 0px",href:"/auth/sign-up",color:"--light",font:"--capture","text-decoration-line":"initial","text-transform":"uppercase",transform:"translateY(0)","border-radius":"100px","font-weight":"700","hover-transform":"translateY(-8px)","letter-spacing":"2px",margin:"50px auto 0 auto",padding:"16px 40px",transition:"transform 0.2s ease-in-out",border:"5px solid --color-light"},"Create project"))," ",r.createElement(l.Z,{padding:"100px 0","background-color":"--color-darkL1",position:"relative","md-
1padding-top":"60px","md-padding-bottom":"60px","padding-bottom":"120px","padding-top":"60px","sm-overflow-y":"hidden","sm-overflow-x":"hidden"},r.createElement(p.ZP,{"letter-spacing":"4px",display:"inline-block",font:"--capture",color:"--compliment","text-transform":"uppercase","sm-font":"--captureSm"},"WEB Entrepreneur"),r.createElement(p.ZP,{margin:"4px 0 48px 0",color:"--light","sm-font":"--h3","sm-margin-bottom":"36px",as:"h2",font:"--h2"}," ","Great"," ",r.createElement(s.Z,{color:"--secondary"},"business")," ","opportunities",r.createElement(m.c,null,".")," "),r.createElement(d.Z,{display:"grid",gap:"12px","grid-gap":"12px","grid-template-columns":"repeat(6, 1fr)","lg-grid-template-columns":"repeat(2, 1fr)"},r.createElement(y.RL,{"md-width":"100%","border-radius":"12px","flex-direction":"column","grid-column":"1/7",display:"flex","xl-grid-column":"1/7","lg-grid-column":"1/3","md-grid-column":"1/3",flipDurationProp:"0.3s",timingFunctionProp:"ease-in-out",width:"auto","max-width":"none",height:"640px","xl-height":"520px","sm-height":"320px"},r.createElement(u.Z,{slot:"Card Flip Icon",category:"bs",icon:b.BsInfo,size:"46px",color:"--secondary",display:"block",position:"absolute",right:"36px",bottom:"32px"}),r.createElement(u.Z,{slot:"Card Flip Content","border-radius":"12px"}),r.createElement(u.Z,{slot:"Card Flip Item",display:"flex","flex-direction":"column",padding:"0px 0px 36px 0px"}),r.createElement(u.Z,{slot:"Card Flip Item Face",background:"--color-darkL2","border-radius":"12px",padding:"54px 36px 36px 36px","sm-padding":"54px 36px 16px 36px"},r.createElement(c.Z,{margin:"0px 0px 36px 0px",width:"100%",src:"https://test-upl.quarkly.io/5e60efa12db4d10024432a9f/images/collaboration-illustration.svg?v=2022-05-13T09:36:03.951Z",height:"100%","sm-height":"auto","sm-margin":"auto 0px 36px 0px"}),r.createElement(p.ZP,{"sm-margin-bottom":"24px",as:"p",font:"--lead",color:"--light",margin:"auto 36px 0px 36px","text-align":"center","md-text-align":"left","md-margin":"auto 36px 0px 0px","sm-margin":"auto 36px 20px 0px","lg-min-height":"40px","sm-font":"--baseSm","sm-min-height":"30px"}," ","Work together as a team"," ")),r.createElement(u.Z,{slot:"Card Flip Item Back",background:"--color-darkL1","border-width":"2px","border-style":"solid","border-color":"--color-darkL2","border-radius":"12px",padding:"54px 36px 36px 36px","align-items":"flex-start","justify-content":"flex-end"},r.createElement(p.ZP,{"sm-margin-bottom":"24px",as:"p",font:"--lead",color:"--light",margin:"0px 0px 64px 0px","sm-margin":"0px 0px 64px 0px"}," ","Take advantage of the Quarkly collaboration tool: work on a project together with your teammates, just send them an invite."," ")),r.createElement(u.Z,{slot:"Card Flip Icon Front","hover-color":"--secondary",color:"--greyL1",transition:"color 0.1s ease-in-out 0s"})),r.createElement(h.Z,{gap:"12px","grid-column":"1 /7","lg-grid-column":"1/3"},r.createElement(y.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"33.33%","sm-width":"100%","md-width":"50%"},r.createElement(u.Z,{slot:"image",src:"https://uploads.quarkly.io/landing/quarkly-features-SEO-semantic-tags.svg",alt:'Quarkly Features. Part of Quarkly interface featuring "as" property of Text element',itemprop:"contentUrl"}),r.createElement(u.Z,{slot:"text",itemprop:"name"},"Semantic tags"),r.createElement(u.Z,{slot:"text1",itemprop:"description"}," ","Every component can act as a tag. Just choose the âasâ property value that you need."," ")),r.createElement(y.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"33.33%","sm-width":"100%","md-width":"50%"},r.createElement(u.Z,{slot:"text",itemprop:"name"},"Schema.org"),r.createElement(u.Z,{slot:"text1",itemprop:"description"}," ","You can edit the necessary attributes of elements in the code editor."," "),r.createElement(u.Z,{slot:"image",itemprop:"contentUrl",src:"https://uploads.quarkly.io/landing/quarkly-features-SEO-schema.svg",alt:"Quarkly Features. Quarkly code editor, adding Schema.org attributes to Box element"})),r.createElement(y.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"33.33%","sm-width":"100%","md-width":"50%"},r.createElement(u.Z,{slot:"text",itemprop:"name"},"Image ALT"),r.createElement(u.Z,{slot:"text1",itemprop:"description"}," ","This is a separate property of the âImageâ element."," "),r.createElement(u.Z,{slot:"image",itemprop:"contentUrl",src:"https://uploads.quarkly.io/landing/quarkly-features-SEO-image-alt.svg",alt:"Quarkly Features. Part of Quarkly editor, editing value of Alt property of Image attribute"})),r.createElement(y.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"25%","sm-width":"100%","md-width":"50%"},r.createElement(u.Z,{slot:"text",itemprop:"name"},"Favicons"),r.createElement(u.Z,{slot:"text1",itemprop:"description"}," ","This feature helps you install unique icons for all devices and individual tile background color for Windows 10."," "),r.createElement(u.Z,{slot:"image",itemprop:"contentUrl",src:"https://test-upl.quarkly.io/5e60efa12db4d10024432a9f/images/quarkly-features-SEO-favicons.svg?v=2020-10-26T14:32:40.948Z"})),r.createElement(y.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"25%","sm-width":"100%","md-width":"50%"},r.createElement(u.Z,{slot:"image",itemprop:"contentUrl",src:"https://test-upl.quarkly.io/5e60efa12db4d10024432a9f/images/quarkly-features-SEO-meta-tags.svg?v=2020-10-26T14:33:02.448Z"}),r.createElement(u.Z,{slot:"text",itemprop:"name"},"Open graph and meta tags"),r.createElement(u.Z,{slot:"text1",itemprop:"description"}," ","These settings are meant for the correct display of your website in search engine results and social media"," ")),r.createElement(y.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"25%","sm-width":"100%","md-width":"50%"},r.createElement(u.Z,{slot:"text1",itemprop:"description"}," ","It's a good idea to use human-readable URLs to improve your site's search engine optimization."," "),r.createElement(u.Z,{slot:"image",itemprop:"contentUrl",src:"https://test-upl.quarkly.io/5e60efa12db4d10024432a9f/images/quarkly-features-SEO-friendly-url.svg?v=2020-10-26T14:33:12.395Z"}),r.createElement(u.Z,{slot:"text",itemprop:"name"},"User-friendly URL")),r.createElement(y.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"25%","sm-width":"100%","md-width":"100%","lg-width":"100%"},r.createElement(u.Z,{slot:"text1",itemprop:"description"}," ","These files are created automatically for you to edit further.","\n\n "),r.createElement(u.Z,{slot:"image",itemprop:"contentUrl",src:"https://test-upl.quarkly.io/5e60efa12db4d10024432a9f/images/quarkly-features-robots-sitemap.svg?v=2021-08-02T10:03:21.769Z"}),r.createElement(u.Z,{slot:"text",itemprop:"name"},"Robots.txt and sitemap.xml")))))," ",r.createElement(l.Z,{"sm-padding-bottom":"60px","sm-text-align":"left","text-align":"center",padding:"100px 0 100px 0","background-color":"--light",position:"relative",background:"--color-darkL2","sm-padding-top":"60px","sm-overflow-y":"hidden","sm-overflow-x":"hidden"},r.createElement(p.ZP,{"sm-font-size":"60px","sm-line-height":"1.2",as:"h2",font:"--h2",margin:"4px 0 36px 0",color:"--light","sm-font":"--h3"},"Try it for"," ",r.createElement(s.Z,{color:"--secondary",font:'600 80px/90px "Source Sans Pro", sans-serif',"sm-font":"--h3"},"free",r.createElement(m.c,null,"."))),r.createElement(p.ZP,{as:"p",font:"--h3",margin:"0 auto 58px auto",color:"--lightD2","max-width":"800px","sm-font":"--h3Sm","sm-margin-bottom":"36px"},"We provide Quarkly"," ",r.createElement(m.c,null,"for free"," "),"as long as we can, and then"," ",r.createElement(m.c,null,"the lowest price"," "),"among competitors."),r.createElement(y.DO,{"sm-margin":"20px auto 0 0px",href:"/dashboard","background-color":"--darkL1",color:"--light",display:"inline-block",font:"--capture","text-decoration-line":"initial",transition:"transform 0.2s ease-in-out",margin:"20px auto 0 auto","margin-top":"0px",padding:"16px 40px","text-transform":"uppercase",transform:"translateY(0)",border:"5px solid --color-light","border-radius":"100px","font-weight":"700","hover-transform":"translateY(-8px)","letter-spacing":"2px",background:"transparent","border-color":"--color-secondary"},"Create project")),r.createElement(y.sm,null,r.createElement(u.Z,{slot:"link"}),r.createElement(u.Z,{slot:"link1"}),r.createElement(u.Z,{slot:"text","sm-font":"--h3"})),r.createElement(y.dP,null,r.createElement(u.Z,{slot:"text","sm-width":"100%"}),r.createElement(u.Z,{slot:"socialMedia"},r.createElement(u.Z,{slot:"link-discord","hover-background":"#6D86DA"})),r.createElement(u.Z,{slot:"stackItem2/StackItemContent","justify-content":"flex-end"}),r.createElement(u.Z,{slot:"single-link","align-items":"center",padding:"7px 12px 11px 12px","justify-content":"center"})),r.createElement(y.KC,{position:"relative"}),r.createElement(y.R,{display:"none"},r.createElement(u.Z,{slot:"image","box-shadow":"--xl","border-radius":"12px","sm-border-radius":"8px"})),r.createElement(f.Z,null,r.createElement("style",{place:"endOfHead",rawKey:"6112594f4be044a4afc89e95"},":root {\n box-sizing: border-box;\n}\n\n* {\n box-sizing: inherit;\n}\n\nh1::selection, p::selection, h1 span::selection, h2::selection, div::selection, strong::selection, span::selection, a::selection {\nbackground-color: #F54C3C;\ncolor: white;\n}\n"),r.createElement("script",{async:!1,src:"",place:"endOfBody",rawKey:"62d3457ba4c93897c6f6eb52"},'(function (w, d, s, l, i) {\n w[l] = w[l] || [];\n w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });\n var f = d.getElementsByTagName(s)[0],\n j = d.createElement(s),\n dl = l != "dataLayer" ? "&l=" + l : "";\n j.async = true;\n j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;\n f.parentNode.insertBefore(j, f);\n})(window, document, "script", "dataLayer", "GTM-KQK6W7P");\n')))}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.