component---src-pages-clp-morphic-website-builder-alternatives-js-82bd04b2e237a4a28333.js

js quarkly.io collected 2026-09-26 04:18:13 UTC 59,565 bytes, 1 lines download raw bytes

1"use strict";(self.webpackChunkquarkly_export=self.webpackChunkquarkly_export||[]).push([[8849],{91963: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/morphic-website-builder-alternatives"}),r.createElement(x.q,null,r.createElement("title",null,"Looking for Morphic Website Builder alternatives? Meet Quarkly."),r.createElement("meta",{name:"description",content:"Create your website from scratch or ready-to-use templates. Completely free â you should try it now. All-in-one website builder on React â Quarkly"}),r.createElement("meta",{property:"og:title",content:"Looking for Morphic Website Builder alternatives? Meet Quarkly."}),r.createElement("meta",{property:"og:description",content:"Create your website from scratch or ready-to-use templates. Completely free â you should try it now. All-in-one website builder on React â Quarkly"}),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 Morphic Website Builder 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. Completely free â you should try it now. All-in-one website builder on React â Quarkly"," "),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"}," ","The simplest, most basic components similar to HTML tags. For example, Text, Image, and ÐÐ¾Ñ."," ")),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"}," ","You can make your site's design consistent by 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"}," ","You can choose an element (or a group of elements) on the page and convert them into a component. Add copies 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"}," ","Add videos, pop-ups, customized blocks, and much more to 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"}," ","Check out your 100% adaptive website by using different design solutions for elements and 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"}," ","Place elements however you want on the page â that is your choice. You can drop them in the desired area, or nest them in other ones."," ")),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"}," ","This option allows you to select multiple elements and change their styles, place them on the page, etc."," "),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"}," ","Double-click to go up and down the hierarchy of elements. To dive into the hierarchy, hold down the Ctrl key on Windows and the Cmd key 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"}," ","We follow up-to-date frontend coding approaches at Quarkly."," "),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 appearance of an element, such as changing its behavior on hover, just enable "hover" and set up the 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"}," ","If you want your site design to look more professional, consider using a library of more than 990 font families."," "),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"}," ","Unsplash is one of the most trending free image stocks. Browse its collection and choose images 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"}," ","This offers 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"}," ","To alter the appearance of your text, use the properties in this section."," "),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"}," ","Open these settings to configure 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 offers props for setting 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"}," ","In this section, 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"}," ","With this category, you can fine-tune 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 an element transition 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"}," ","This property allows you to transform the element, for example, 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"}," ","Making custom React components in 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"}," ","With the Quarkly code editor, you can create unique React components and then place them on the page.","  ")),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"}," ","Importing modules to your component from NPM has never been easier."," ")),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 easily export your projects to Gatsby, a popular static site generator."," "),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"}," ","You can store your project in a GitHub repository and make changes to it."," ")),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"}," ","Publish your site on Netlify once it's ready. A technical domain will be created automatically for it, for example: 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"}," ","In the Quarkly editor, you can monitor all the entities that are present on 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"}," ","Our debug console will help you 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 hints"," "),r.createElement(u.Z,{slot:"text1",itemprop:"description"}," ","If you are not sure how to spell a property, start typing and the editor will help 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 changes made to the pages are displayed 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"}," ","Amazing"," ",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"}," ","Check out the Quarkly collaboration tool: send an invite to your teammates to work on a project with them."," ")),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"}," ","You can make a component act as a tag by setting the âasâ property to the desired value."," ")),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 set desired attributes to 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"}," ","A special 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"}," ","Set up exclusive icons for various 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"}," ","Use these settings for the correct display of your site on social networks and in search engines."," ")),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"}," ","Clean URLs will help you improve your site's SEO."," "),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. But you can edit them the way you like."," "),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.