1"use strict";(self.webpackChunkquarkly_export=self.webpackChunkquarkly_export||[]).push([[9535],{1727:function(e,t,a){a.r(t);var r=a(67294),o=a(55916),n=a(11522),l=a(25995),i=a(84288),s=a(37524),p=a(15124),m=a(25509),c=a(61552),d=a(35414),g=a(1095),u=a(5982),h=a(93759),x=a(44085),y=a(56507),f=a(89289);t.default=function(){return r.createElement(n.ZP,{theme:o.Z},r.createElement(g.F,{pageUrl:"lp/web-application-builder"}),r.createElement(d.q,null,r.createElement("title",null,"Free web application builder | Quarkly"),r.createElement("meta",{name:"description",content:"Build and launch apps all-in-one â Quarkly is a React powerhouse for you"}),r.createElement("meta",{property:"og:title",content:"Free web application builder | Quarkly"}),r.createElement("meta",{property:"og:description",content:"Build and launch apps all-in-one â Quarkly is a React powerhouse for you"}),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(f.nn,null),r.createElement(f.h4,null),r.createElement(l.Z,{"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-padding":"40px 0 50px 0","md-padding":"40px 0 50px 0"},r.createElement(i.ZP,{color:"--light","sm-font":"--h1Sm","lg-text-align":"left",as:"h1",font:"--h1",margin:"20px 0 30px 0"},r.createElement(s.Z,{color:"--secondary"},"Quarkly"," "),"â a web application builder. Be a pro. Start now."),r.createElement(i.ZP,{margin:"0 auto 48px auto","max-width":"540px","sm-font":"--baseSm","lg-text-align":"left","lg-margin-left":"0px",as:"p",font:"normal 400 24px/1.5 --fontFamily-googleSourceSansPro",color:"--light","sm-margin":"0 auto 32px 0px"},"And for no cost! Quarkly is a free advanced website builder. It defies boundaries and disrupts the traditional website builders. Get ahead of the competitions, use it!"),r.createElement(f.DO,{"border-radius":"100px","letter-spacing":"2px","lg-text-align":"left",margin:"0 auto","text-transform":"uppercase",border:"5px solid #2D8FDD",color:"--light","hover-transform":"translateY(-8px)",href:"/auth/sign-up",font:"--capture","font-weight":"700","text-decoration-line":"initial",transition:"transform 0.2s ease-in-out","background-color":"--darkL1",display:"inline-block","lg-margin-left":"0px",padding:"16px 40px",transform:"translateY(0)"}," ","Create Project"," ")),r.createElement(l.Z,{"text-align":"left","background-color":"--color-darkL1"},r.createElement(p.Z,{"border-radius":"4px","margin-top":"96px","padding-bottom":"56.25%","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://uploads.quarkly.io/landing/promo-video-poster.png) 0% 0%/cover no-repeat",margin:"24px 0px 24px 0px","sm-margin-top":"64px",position:"relative",width:"100%",height:"0px"},r.createElement(f.tL,{width:"100%",height:"100%",left:"0",top:"0",videoId:"K7bAu9BhXh8",position:"absolute"}))),r.createElement(l.Z,{padding:"100px 0",position:"relative","md-
1padding-top":"50px","padding-bottom":"60px","text-align":"left","font-weight":"300","md-padding-bottom":"50px","padding-top":"60px","background-color":"--color-darkL1"},r.createElement(i.ZP,{color:"--primary","text-transform":"uppercase","letter-spacing":"4px",display:"inline-block",font:"--capture"},"DEVELOPER"),r.createElement(i.ZP,{as:"h2",font:"--h2",margin:"4px 0 48px 0",color:"--light","sm-font":"--h2Sm"},r.createElement(s.Z,{color:"--secondary"},"Great tools")," ","for React.js developers."),r.createElement(u.Z,{gap:"12px"},r.createElement(h.Z,{"lg-width":"100%",width:"100%"},r.createElement(x.Z,{slot:"StackItemContent","padding-bottom":"36px","flex-direction":"column",background:"--color-darkL2","border-radius":"12px"}),r.createElement(p.Z,{overflow:"hidden","margin-bottom":"24px","sm-max-height":"340px","md-flex-direction":"column",display:"flex","box-sizing":"border-box","border-radius":"12px 12px 0 0"},r.createElement(p.Z,{height:"400px","margin-left":0,"margin-right":"16px","md-width":"100%","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",width:"50%"}),r.createElement(f.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(x.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(i.ZP,{as:"p",font:"--capture",color:"--greyL2",margin:"24px 36px 36px 36px","sm-font":"--baseSm","sm-margin-bottom":"24px"},r.createElement(s.Z,{color:"--light",font:'500 18px/18px "Source Sans Pro", sans-serif',"overflow-wrap":"normal","word-break":"normal","text-overflow":"clip","font-weight":"700","white-space":"normal","text-indent":"0",hyphens:"manual"},"Making custom React components in the code editor"),r.createElement("br",null),"You can make your own React components in the Quarkly code editor and add them to the page.","Â ")),r.createElement(f.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"33.33%","sm-width":"100%","md-width":"50%"},r.createElement(x.Z,{slot:"text",itemprop:"name"},"Guide for developers"),r.createElement(x.Z,{slot:"text1",itemprop:"description"},"How-to instructions with detailed information about developing components for Quarkly, building apps, and more."),r.createElement(x.Z,{slot:"image",itemprop:"contentUrl",src:"https://test-upl.quarkly.io/5e60efa12db4d10024432a9f/images/quarkly-guide-for-developers.svg?v=2021-08-03T14:19:01.761Z",alt:"Quarkly Features. NPM logo and example of string with module import"})),r.createElement(f.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"33.33%","sm-width":"100%","md-width":"50%"},r.createElement(x.Z,{slot:"text1",itemprop:"description"},"Import modules to your component from NPM in no time, if needed."),r.createElement(x.Z,{slot:"image",itemprop:"contentUrl",src:"https://uploads.quarkly.io/landing/quarkly-features-components-hot-npm-import.svg",alt:"Quarkly Features. NPM logo and example of string with module import"}),r.createElement(x.Z,{slot:"text",itemprop:"name"},"Hot import of NPM modules")),r.createElement(f.by,{itemtype:"http://schema.org/ImageObject",width:"33.33%","md-width":"50%","sm-width":"100%",itemscope:!0},r.createElement(x.Z,{slot:"text",itemprop:"name"},"Export to Create React App"),r.createElement(x.Z,{slot:"text1",itemprop:"description"},"If you need to complete or host your project on your own server, it's easy: just export it into an archive with a create-react-app project."),r.createElement(x.Z,{slot:"image",alt:"Quarkly Features. React.js logo",itemprop:"contentUrl",src:"https://uploads.quarkly.io/landing/quarkly-features-export-cra.svg"})),r.createElement(f.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"33.33%","md-width":"50%","sm-width":"100%"},r.createElement(x.Z,{slot:"text1",itemprop:"description"},"Export your projects to Gatsby â one of the most famous static-site generation web frameworks"),r.createElement(x.Z,{slot:"image",itemprop:"contentUrl",src:"https://uploads.quarkly.io/landing/quarkly-features-export-gatsby.svg",alt:"Quarkly Features. Gatsby logo"}),r.createElement(x.Z,{slot:"text",itemprop:"name"},"Export to Gatsby Project")),r.createElement(f.by,{"md-width":"50%","sm-width":"100%",itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"33.33%"},r.createElement(x.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(x.Z,{slot:"text",itemprop:"name"},"Pushing commits to your GitHub repository"),r.createElement(x.Z,{slot:"text1",itemprop:"description"},"If needed, you can create a GitHub repository for your project and commit changes.")),r.createElement(f.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"33.33%","md-width":"50%","sm-width":"100%"},r.createElement(x.Z,{slot:"text",itemprop:"name"},"Publication on Netlify"),r.createElement(x.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(x.Z,{slot:"image",src:"https://test-upl.quarkly.io/5e60efa12db4d10024432a9f/images/quarkly-features-netlify.svg?v=2020-10-26T13:40:01.248Z",itemprop:"contentUrl"})),r.createElement(f.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"25%","md-width":"50%","sm-width":"100%"},r.createElement(x.Z,{slot:"text",itemprop:"name",font:"--capture"},"Modern built-in code editor"),r.createElement(x.Z,{slot:"text1",itemprop:"description"},"The editor displays all the entities of the page."),r.createElement(x.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(f.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"25%","md-width":"50%","sm-width":"100%"},r.createElement(x.Z,{slot:"text",itemprop:"name"},"Debugger",r.createElement("br",null)),r.createElement(x.Z,{slot:"text1",itemprop:"description"},"Our debug console will help you track errors in the component code and pages."),r.createElement(x.Z,{slot:"image",src:"https://uploads.quarkly.io/landing/quarkly-features-code-editor-debugger.svg",alt:"Quarkly Features. Example of errors in Debugger",itemprop:"contentUrl"})),r.createElement(f.by,{width:"25%","md-width":"50%","sm-width":"100%",itemscope:!0,itemtype:"http://schema.org/ImageObject"},r.createElement(x.Z,{slot:"text",itemprop:"name"},"Code tips"),r.createElement(x.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(x.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(f.by,{"md-width":"50%","sm-width":"100%",itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"25%"},r.createElement(x.Z,{slot:"text",itemprop:"name"},"Synched pages and code editor"),r.createElement(x.Z,{slot:"text1",itemprop:"description"},"Whatever changes you make to the pages, they all will be displayed in the code and vice versa."),r.createElement(x.Z,{slot:"image",src:"https://uploads.quarkly.io/landing/quarkly-features-code-editor-sync.svg",alt:"Quarkly Features. Example of synchronization between code and page",itemprop:"contentUrl"}))),r.createElement(f.DO,{"border-radius":"100px",color:"--light","font-weight":"700","sm-margin":"20px auto 0 0px","text-decoration-line":"initial","text-transform":"uppercase",border:"5px solid --color-light","hover-transform":"translateY(-8px)",transform:"translateY(0)",transition:"transform 0.2s ease-in-out",href:"/auth/sign-up","background-color":"--darkL1",font:"--capture","letter-spacing":"2px",margin:"50px auto 0 auto",padding:"16px 40px",display:"inline-block"},"Create project")),r.createElement(l.Z,{"text-align":"left","background-color":"--color-darkL1",position:"relative","md-
1padding-top":"60px","md-padding-bottom":"60px","padding-top":"60px",padding:"100px 0","font-weight":"300","padding-bottom":"60px"},r.createElement(i.ZP,{font:"--capture",color:"--primary","text-transform":"uppercase","letter-spacing":"4px",display:"inline-block"},"DESIGNER"),r.createElement(i.ZP,{font:"--h2",margin:"4px 0 48px 0",color:"--light","sm-font":"--h2Sm",as:"h2"},"Full"," ",r.createElement(s.Z,{color:"--secondary"},"design"," "),"control."),r.createElement(u.Z,{gap:"12px"},r.createElement(h.Z,{width:"100%","lg-width":"100%"},r.createElement(x.Z,{slot:"StackItemContent",background:"--color-darkL2","border-radius":"12px","padding-bottom":"36px","flex-direction":"column"}),r.createElement(p.Z,{overflow:"hidden",position:"relative"},r.createElement(p.Z,{"z-index":"1","background-image":"linear-gradient(180deg, #22262E 0%, transparent 50%)",height:"374px",position:"absolute",bottom:"auto",right:"0",left:"0","border-radius":"12px 12px 0 0",top:"0"}),r.createElement(p.Z,{height:"374px",display:"flex","align-content":"flex-start","border-radius":"12px 12px 0 0","padding-top":"0px","lg-background":"rgba(0, 0, 0, 0) url(https://uploads.quarkly.io/landing/resources-webdesigner-all.png) 50% 40%/250% no-repeat scroll padding-box","md-background":"rgba(0, 0, 0, 0) url(https://uploads.quarkly.io/landing/resources-webdesigner-all.png) 60% 40%/180% no-repeat scroll padding-box",width:"100%","xl-background":"rgba(0, 0, 0, 0) url(https://uploads.quarkly.io/landing/resources-webdesigner-all.png) 50% 40%/200% no-repeat scroll padding-box",background:"rgba(0, 0, 0, 0) url(https://uploads.quarkly.io/landing/resources-webdesigner-all.png) 60% 40%/160% no-repeat scroll padding-box","sm-background":"rgba(0, 0, 0, 0) url(https://uploads.quarkly.io/landing/resources-webdesigner-all.png) 60% 30%/220% no-repeat scroll padding-box","flex-wrap":"wrap","flex-direction":"row-reverse","margin-top":"0px"})),r.createElement(i.ZP,{as:"p",font:"--capture","md-margin":"24px 36px 24px 36px","sm-margin-bottom":"24px",color:"--greyL2",margin:"24px 36px 32px 36px","sm-font":"--baseSm","text-align":"center","z-index":"2"},r.createElement(s.Z,{"word-break":"normal","white-space":"normal","text-overflow":"clip",color:"--light","overflow-wrap":"normal","text-indent":"0",hyphens:"manual",font:'500 18px/25.2px "Source Sans Pro", sans-serif',"font-weight":"700"},"Features","Â "),r.createElement("br",null),"Now your website will be noticed! Use our unique animations, catchy layouts, and transformations.")),r.createElement(f.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"50%","sm-width":"100%","md-width":"100%","lg-width":"100%"},r.createElement(x.Z,{slot:"text",itemprop:"name"},"Primitives"),r.createElement(x.Z,{slot:"text1",itemprop:"description"},"Basic components which are similar to HTML tags like Text, Image, Box, and others."),r.createElement(x.Z,{slot:"image",itemprop:"contentUrl",src:"https://uploads.quarkly.io/landing/quarkly-features-content-primitives.svg",alt:"Quarkly Features. Several components from Primitives group: Image, Text, Icon, Button, Box"})),r.createElement(f.by,{"sm-width":"100%","md-width":"50%",itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"50%"},r.createElement(x.Z,{slot:"text1",itemprop:"description"},"Select an element or a group of elements on the Layer panel and turn it into a component. Add copies of the components to the page and all the props will be inherited."),r.createElement(x.Z,{slot:"image",itemprop:"contentUrl",src:"https://uploads.quarkly.io/landing/quarkly-features-components-on-a-page.svg",alt:"Quarkly Features. Three card components"}),r.createElement(x.Z,{slot:"text",itemprop:"name"},"Creating components on a page")),r.createElement(f.by,{itemtype:"http://schema.org/ImageObject",width:"50%","sm-width":"100%","md-width":"50%",itemscope:!0},r.createElement(x.Z,{slot:"text",itemprop:"name"},"Displaying custom props on the panel"),r.createElement(x.Z,{slot:"text1",itemprop:"description"},"All custom component properties can be displayed on the right panel."),r.createElement(x.Z,{slot:"image",itemprop:"contentUrl",src:"https://uploads.quarkly.io/landing/quarkly-features-components-custom-props.svg",alt:"Quarkly Features. Displaying custom props on the panel"})),r.createElement(h.Z,{width:"50%","md-width":"50%","lg-width":"50%","sm-width":"100%"},r.createElement(x.Z,{slot:"StackItemContent",padding:"0px 0px 36px 0px",background:"--color-darkL2","border-radius":"12px","flex-direction":"column"}),r.createElement(f.et,{"border-radius":"12px 12px 0 0",overflow:"hidden"}),r.createElement(i.ZP,{"sm-margin-bottom":"24px",as:"p",font:"--capture",color:"--greyL2","sm-font":"--baseSm",margin:"24px 36px 36px 36px"},r.createElement(s.Z,{color:"--light","font-weight":"700",font:'500 18px/25.2px "Source Sans Pro", sans-serif'},"Themes"),r.createElement("br",null),"With themes, you can craft a consistent site design")),r.createElement(f.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"50%","md-width":"50%","sm-width":"100%"},r.createElement(x.Z,{slot:"text",itemprop:"name"},"Customizing design with breakpoints"),r.createElement(x.Z,{slot:"text1",itemprop:"description"},"Your website is completely responsive to mobile devices by using different design solutions for elements at breakpoints."),r.createElement(x.Z,{slot:"image",src:"https://uploads.quarkly.io/landing/quarkly-features-adaptive-design-customizing.svg",alt:"Quarkly Features. Example of how page looks with different breakpoints",itemprop:"contentUrl"})),r.createElement(f.by,{itemtype:"http://schema.org/ImageObject",width:"50%","md-width":"50%","sm-width":"100%",itemscope:!0},r.createElement(x.Z,{slot:"text",itemprop:"name"},"Adding and editing breakpoints"),r.createElement(x.Z,{slot:"text1",itemprop:"description"},"Use your custom breakpoints or choose one of the existing ones."),r.createElement(x.Z,{slot:"image",itemprop:"contentUrl",src:"https://uploads.quarkly.io/landing/quarkly-features-adaptive-design-editing-ad
1ding-breakpoints.svg",alt:"Quarkly Features. Part of Quarkly interface featuring breakpoint settings "})),r.createElement(f.by,{itemtype:"http://schema.org/ImageObject",width:"33.33%","md-width":"50%","sm-width":"100%",itemscope:!0},r.createElement(x.Z,{slot:"text",itemprop:"name"},"Drag'n'Drop"),r.createElement(x.Z,{slot:"text1",itemprop:"description"},"You decide where to place the elements. Move them wherever you want, or nest them in other elements."),r.createElement(x.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(f.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"33.33%","md-width":"50%","sm-width":"100%"},r.createElement(x.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(x.Z,{slot:"text",itemprop:"name"},"Multiselect"),r.createElement(x.Z,{slot:"text1",itemprop:"description"},"You can select multiple elements to set their styles, drag'n'drop them to another place, remove, etc.")),r.createElement(f.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"33.33%","md-width":"50%","sm-width":"100%"},r.createElement(x.Z,{slot:"text",itemprop:"name"},"Text editor"),r.createElement(x.Z,{slot:"text1",itemprop:"description"},"You can edit part of the text making it bold or italic, turning it into a link or converting to span, as well as appyling any style to it."),r.createElement(x.Z,{slot:"image",src:"https://uploads.quarkly.io/landing/quarkly-features-text-editor.svg",alt:"Quarkly Features. Partly styled text with text edit panel",itemprop:"contentUrl"})),r.createElement(f.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"33.33%","md-width":"50%","sm-width":"100%"},r.createElement(x.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(x.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(x.Z,{slot:"text",itemprop:"name"},"Deep select")),r.createElement(f.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"33.33%","md-width":"50%","sm-width":"100%"},r.createElement(x.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(x.Z,{slot:"text",itemprop:"name",font:"--capture"},"Support of Flexbox and Grid"),r.createElement(x.Z,{slot:"text1",itemprop:"description"},"Quarkly supports the most advanced approaches to frontend coding.")),r.createElement(f.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"33.33%","md-width":"50%","sm-width":"100%"},r.createElement(x.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(x.Z,{slot:"text",itemprop:"name"},"Configuring styles of pseudo-classes hover/active/focus, etc."),r.createElement(x.Z,{slot:"text1",itemprop:"description"},'To change the element appearance, for example, the way it behaves on hover, enable "hover" and apply the desired props.')),r.createElement(f.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"33.33%","md-width":"50%","sm-width":"100%"},r.createElement(x.Z,{slot:"text",itemprop:"name",font:"--capture"},"Google Fonts"),r.createElement(x.Z,{slot:"text1",itemprop:"description"},"Use the library of over 990 font families to make your site look more beautiful"),r.createElement(x.Z,{slot:"image",itemprop:"contentUrl",src:"https://uploads.quarkly.io/landing/quarkly-features-styles-google-fonts.png",alt:"Quarkly Features. Google Fonts Logo"})),r.createElement(f.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"33.33%","md-width":"50%","sm-width":"100%"},r.createElement(x.Z,{slot:"text",itemprop:"name",font:"--capture"},"Unsplash images"),r.createElement(x.Z,{slot:"text1",itemprop:"description"},"Make use of Unsplash, one of the most popular free image stocks where you can select images directly from the Quarkly interface"),r.createElement(x.Z,{slot:"image",itemprop:"contentUrl",src:"https://uploads.quarkly.io/landing/quarkly-features-unsplash.svg",alt:"Quarkly Features. Unsplash Logo"})),r.createElement(f.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"33.33%","md-width":"50%","sm-width":"100%"},r.createElement(x.Z,{slot:"text",itemprop:"name"},"Props panel"),r.createElement(x.Z,{slot:"text1",itemprop:"description"},"Take advantage of the categorized style and functional props."),r.createElement(x.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-
1panel.svg"})),r.createElement(f.by,{"md-width":"50%","sm-width":"100%",itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"25%"},r.createElement(x.Z,{slot:"text",itemprop:"name"},"Layout"),r.createElement(x.Z,{slot:"text1",itemprop:"description"},"Check out this section to use element display properties."),r.createElement(x.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(f.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"25%","md-width":"50%","sm-width":"100%"},r.createElement(x.Z,{slot:"text",itemprop:"name"},"Typography"),r.createElement(x.Z,{slot:"text1",itemprop:"description"},"In this section, you can change text styles using special properties"),r.createElement(x.Z,{slot:"image",itemprop:"contentUrl",src:"https://uploads.quarkly.io/landing/quarkly-features-styles-typography.svg",alt:"Quarkly Features. Example of changing properties from Typography group"})),r.createElement(f.by,{width:"25%","md-width":"50%","sm-width":"100%",itemscope:!0,itemtype:"http://schema.org/ImageObject"},r.createElement(x.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(x.Z,{slot:"text",itemprop:"name"},"Indents"),r.createElement(x.Z,{slot:"text1",itemprop:"description"},"In these settings, you can set margins and paddings.")),r.createElement(f.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"25%","md-width":"50%","sm-width":"100%"},r.createElement(x.Z,{slot:"text",itemprop:"name"},"Background"),r.createElement(x.Z,{slot:"text1",itemprop:"description"},"This section contains props that help set element backgrounds."),r.createElement(x.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(f.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"25%","md-width":"50%","sm-width":"100%"},r.createElement(x.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(x.Z,{slot:"text",itemprop:"name"},"Borders"),r.createElement(x.Z,{slot:"text1",itemprop:"description"},"Here you can set up borders and border radius.")),r.createElement(f.by,{"md-width":"50%","sm-width":"100%",itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"25%"},r.createElement(x.Z,{slot:"text",itemprop:"name"},"Position"),r.createElement(x.Z,{slot:"text1",itemprop:"description"},"This category helps you configure element position and z-index settings."),r.createElement(x.Z,{slot:"image",itemprop:"contentUrl",src:"https://uploads.quarkly.io/landing/quarkly-features-styles-position.svg",alt:"Quarkly Features. Example of changing properies from Position group"})),r.createElement(f.by,{width:"25%","md-width":"50%","sm-width":"100%",itemscope:!0,itemtype:"http://schema.org/ImageObject"},r.createElement(x.Z,{slot:"text",itemprop:"name"},"Blend mode"),r.createElement(x.Z,{slot:"text1",itemprop:"description"},"This property gives you additional design opportunities."),r.createElement(x.Z,{slot:"image",itemprop:"contentUrl",src:"https://uploads.quarkly.io/landing/quarkly-features-styles-blending.svg",alt:"Quarkly Features. Example of changing properies from Effects group"})),r.createElement(f.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"25%","md-width":"50%","sm-width":"100%"},r.createElement(x.Z,{slot:"text",itemprop:"name"},"Box shadow"),r.createElement(x.Z,{slot:"text1",itemprop:"description"},"This property lets you configure the element shadow."),r.createElement(x.Z,{slot:"image",src:"https://uploads.quarkly.io/landing/quarkly-features-styles-shadow.svg",alt:"Quarkly Features. Example of changing Box shadow property from Effects group",itemprop:"contentUrl"})),r.createElement(f.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"25%","md-width":"50%","sm-width":"100%"},r.createElement(x.Z,{slot:"text",itemprop:"name"},"Transition"),r.createElement(x.Z,{slot:"text1",itemprop:"description"},"This property helps an element move smoothly from one state to another."),r.createElement(x.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(f.by,{width:"25%","md-width":"50%","sm-width":"100%",itemscope:!0,itemtype:"http://schema.org/ImageObject"},r.createElement(x.Z,{slot:"text",itemprop:"name"},"Transform"),r.createElement(x.Z,{slot:"text1",itemprop:"description"},"This property will help you transform the element, for instance, rotate or zoom."),r.createElement(x.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(f.by,{"md-width":"50%","sm-width":"100%",itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"25%"},r.createElement(x.Z,{slot:"text1",itemprop:"description"},"This property will help you apply a wide range of visual effects."),r.createElement(x.Z,{slot:"image",alt:"Quarkly Features. Example of changing Filter property from Effects group",itemprop:"contentUrl",src:"https://uploads.quarkly.io/landing/quarkly-features-styles-filter.svg"}),r.createElement(x.Z,{slot:"text",itemprop:"name"},"Filter"))),r.createElement(f.DO,{display:"inline-block","hover-transform":"translateY(-8px)",padding:"16px 40px","sm-margin":"20px auto 0 0px",transition:"transform 0.2s ease-in-out","background-color":"--darkL1",border:"5px solid --color-light","border-radius":"100px","letter-spacing":"2px",margin:"50px auto 0 auto",transform:"translateY(0)",href:"/auth/sign-up",color:"--light",font:"--capture","font-weight":"700","text-decoration-line":"initial","text-transform":"uppercase"},"Create project")),r.createElement(l.Z,{"padding-bottom":"60px","md-padding-bottom":"50px","padding-top":"60px","background-color":"--color-darkL1","font-weight":"300",position:"relative","md-
1padding-top":"50px","text-align":"left",padding:"100px 0 150px 0"},r.createElement(i.ZP,{color:"--primary","text-transform":"uppercase","letter-spacing":"4px",display:"inline-block",font:"--capture"},"WEB Entrepreneur"),r.createElement(i.ZP,{as:"h2",font:"--h2",margin:"4px 0 48px 0",color:"--light","sm-font":"--h2Sm"},r.createElement(s.Z,{color:"--secondary"},"Great business")," ","opportunities."),r.createElement(u.Z,{gap:"12px"},r.createElement(h.Z,{width:"100%","md-width":"100%"},r.createElement(x.Z,{slot:"StackItemContent",padding:"54px 36px 36px",background:"--color-darkL2","border-radius":"12px","padding-bottom":"36px","flex-direction":"column"}),r.createElement(m.Z,{src:"https://test-upl.quarkly.io/5e60efa12db4d10024432a9f/images/collaboration-illustration.svg?v=2020-11-04T20:28:52.010Z",height:"320px",margin:"0px 0px 24px 0px",width:"100%"}),r.createElement(i.ZP,{as:"p",font:"--capture",margin:"24px 0px 36px 0px","sm-margin-bottom":"24px","text-align":"center",color:"--greyL2","sm-font":"--baseSm","md-text-align":"left","lg-text-align":"left"},r.createElement(s.Z,{"font-weight":"700","text-overflow":"clip","text-indent":"0",hyphens:"manual",font:'500 18px/25.2px "Source Sans Pro", sans-serif',color:"--light","text-align":"center","overflow-wrap":"normal","word-break":"normal","white-space":"normal"},"Collaboration"),r.createElement("br",null),"Benefit from the Quarkly collaboration tool: work on a project with your team by just sending them an invite.")),r.createElement(h.Z,{width:"50%","lg-width":"100%"},r.createElement(x.Z,{slot:"StackItemContent","border-radius":"12px",background:"--color-darkL2","padding-bottom":"36px","flex-direction":"column"}),r.createElement(p.Z,{overflow:"hidden",position:"relative","margin-bottom":"24px",height:"380px",margin:"0px 0px 16px 0px"},r.createElement(p.Z,{"border-radius":"12px 12px 0 0",top:"0",right:"0",bottom:"0",left:"0","z-index":"1","background-image":"linear-gradient(180deg, #22262E 0%, transparent 50%)",position:"absolute"}),r.createElement(p.Z,{"flex-direction":"row-reverse","margin-top":"0px",background:"rgba(0, 0, 0, 0) url(https://uploads.quarkly.io/landing/resources-all.png) 60% 40%/200% no-repeat scroll padding-box","lg-background":"rgba(0, 0, 0, 0) url(https://uploads.quarkly.io/landing/resources-all.png) 50% 40%/250% no-repeat scroll padding-box","sm-background":"rgba(0, 0, 0, 0) url(https://uploads.quarkly.io/landing/resources-all.png) 60% 30%/220% no-repeat scroll padding-box",height:"400px",width:"100%","xl-background":"rgba(0, 0, 0, 0) url(https://uploads.quarkly.io/landing/resources-all.png) 50% 40%/200% no-repeat scroll padding-box",display:"flex","flex-wrap":"wrap","md-background":"rgba(0, 0, 0, 0) url(https://uploads.quarkly.io/landing/resources-all.png) 60% 40%/180% no-repeat scroll padding-box","padding-top":"0px","align-content":"flex-start","border-radius":"12px 12px 0 0"})),r.createElement(i.ZP,{margin:"0px 36px 32px 36px","md-margin":"24px 36px 24px 36px","sm-margin-bottom":"24px","sm-font":"--baseSm","z-index":"2","text-align":"left",as:"p",color:"--greyL2",font:"--capture"},r.createElement(s.Z,{font:'500 18px/25.2px "Source Sans Pro", sans-serif',"font-weight":"700","word-break":"normal","white-space":"normal","text-indent":"0",color:"--light","overflow-wrap":"normal","text-overflow":"clip",hyphens:"manual"},"Content"),r.createElement("br",null),"Use the ready-made blocks such as pop-ups, maps, videos, and many more!")," "),r.createElement(f.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"50%","sm-width":"100%","md-width":"50%"},r.createElement(x.Z,{slot:"text",itemprop:"name"},"Familiar workflow"),r.createElement(x.Z,{slot:"text1",itemprop:"description"},"No need to climb a steep learning curve since you deal with the workflow you already know"),r.createElement(x.Z,{slot:"image",alt:"Quarkly Features. List of categories and example of blocks",itemprop:"contentUrl",src:"https://test-upl.quarkly.io/5e60efa12db4d10024432a9f/images/quarkly-familiar-workflow.svg?v=2021-08-03T15:37:06.477Z"})),r.createElement(f.by,{itemtype:"http://schema.org/ImageObject",width:"50%","sm-width":"100%","md-width":"50%",itemscope:!0},r.createElement(x.Z,{slot:"text",itemprop:"name"},"Ready-to-go themed blocks"),r.createElement(x.Z,{slot:"text1",itemprop:"description"},"These component blocks consist of thematic content. You can edit them the way you need as you do with regular components."),r.createElement(x.Z,{slot:"image",src:"https://uploads.quarkly.io/landing/quarkly-features-content-thematic-blocks.svg",alt:"Quarkly Features. List of categories and example of blocks",itemprop:"contentUrl"})),r.createElement(f.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"50%","sm-width":"100%","md-width":"50%"},r.createElement(x.Z,{slot:"text1",itemprop:"description"},"Contains over 40 components, and the catalog never stops growing."),r.createElement(x.Z,{slot:"image",src:"https://test-upl.quarkly.io/5e60efa12db4d10024432a9f/images/quarkly-features-content-quarkly-component-catalog.svg?v=2021-05-20T10:54:25.910Z",alt:"Quarkly Features. Several components from Quarkly UI library: Formspree, Map, SocialMedia",itemprop:"contentUrl"}),r.createElement(x.Z,{slot:"text",itemprop:"name"},"Components Catalog")),r.createElement(f.by,{itemtype:"http://schema.org/ImageObject",width:"33.33%","sm-width":"100%","md-width":"50%",itemscope:!0},r.createElement(x.Z,{slot:"text",itemprop:"name"},"Semantic tags"),r.createElement(x.Z,{slot:"text1",itemprop:"description"},"All components can act as a tag. Just select the necessary âasâ property value."),r.createElement(x.Z,{slot:"image",itemprop:"contentUrl",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'})),r.createElement(f.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"33.33%","sm-width":"100%","md-width":"50%"},r.createElement(x.Z,{slot:"text",itemprop:"name"},"Schema.org"),r.createElement(x.Z,{slot:"text1",itemprop:"description"},"You can set desired attributes to elements in the code editor."),r.createElement(x.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(f.by,{itemtype:"http://schema.org/ImageObject",width:"33.33%","sm-width":"100%","md-width":"50%",itemscope:!0},r.createElement(x.Z,{slot:"text",itemprop:"name"},"Image ALT"),r.createElement(x.Z,{slot:"text1",itemprop:"description"},"A special property of the âImageâ element."),r.createElement(x.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(f.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"25%","sm-width":"100%","md-width":"50%"},r.createElement(x.Z,{slot:"text",itemprop:"name"},"Favicons"),r.createElement(x.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(x.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(f.by,{"sm-width":"100%","md-width":"50%",itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"25%"},r.createElement(x.Z,{slot:"text",itemprop:"name"},"Meta tags and open graph"),r.createElement(x.Z,{slot:"text1",itemprop:"description"},"These settings will help your site display correctly on social networks and in search engines."),r.createElement(x.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(f.by,{itemscope:!0,itemtype:"http://schema.org/ImageObject",width:"25%","sm-width":"100%","md-width":"50%"},r.createElement(x.Z,{slot:"text",itemprop:"name"},"SEO-friendly URL"),r.createElement(x.Z,{slot:"text1",itemprop:"description"},"Clean URLs will help you improve your site's SEO."),r.createElement(x.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(f.by,{width:"25%","sm-width":"100%","md-width":"50%",itemscope:!0,itemtype:"http://schema.org/ImageObject"},r.createElement(x.Z,{slot:"text1",itemprop:"description"},"These files are created automatically. But you can edit them if needed."),r.createElement(x.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(x.Z,{slot:"text",itemprop:"name"},"Sitemap.xml and robots.txt")))),r.createElement(l.Z,{"background-color":"--light",position:"relative",background:"--color-indigo","sm-padding-top":"60px","sm-padding-bottom":"60px","sm-text-align":"left","text-align":"center",padding:"100px 0 100px 0"},r.createElement(i.ZP,{"sm-line-height":"1.2",as:"h2",font:"--h2",margin:"4px 0 36px 0",color:"--dark","sm-font-size":"60px"}
1,"Use it for"," ",r.createElement(s.Z,{"white-space":"normal","text-indent":"0","text-overflow":"clip",hyphens:"manual",color:"--light","overflow-wrap":"normal","word-break":"normal"},"free",r.createElement(c.c,{"overflow-wrap":"normal","word-break":"normal","white-space":"normal","text-indent":"0","text-overflow":"clip",hyphens:"manual"},"."))),r.createElement(i.ZP,{as:"p",font:"--h3",margin:"0 auto 58px auto",color:"--dark","max-width":"800px","sm-font":"--h3Sm","sm-margin-bottom":"36px"},"We give you Quarkly for"," ",r.createElement(s.Z,{"white-space":"normal","text-indent":"0","text-overflow":"clip",hyphens:"manual",color:"--light","overflow-wrap":"normal","word-break":"normal"},"free")," ","as long as we can, and then offer"," ",r.createElement(s.Z,{color:"--light"},"the lowest price")," ","among our competitors."),r.createElement(f.DO,{"letter-spacing":"2px",margin:"20px auto 0 auto",padding:"16px 40px",href:"/auth/sign-up","background-color":"--darkL1",display:"inline-block",font:"--capture","font-weight":"700","text-decoration-line":"initial","text-transform":"uppercase",border:"5px solid --color-light",color:"--light","hover-transform":"translateY(-8px)",transition:"transform 0.2s ease-in-out","border-radius":"100px","margin-top":"0px","sm-margin":"20px auto 0 0px",transform:"translateY(0)"},"Create project")),r.createElement(f.sm,null),r.createElement(f.dP,null,r.createElement(x.Z,{slot:"text","sm-width":"100%"}),r.createElement(x.Z,{slot:"socialMedia"},r.createElement(x.Z,{slot:"link-discord","hover-background":"#6D86DA"})),r.createElement(x.Z,{slot:"stackItem2/StackItemContent","justify-content":"flex-end"}),r.createElement(x.Z,{slot:"single-link","justify-content":"center","align-items":"center",padding:"7px 12px 11px 12px"}),r.createElement(x.Z,{slot:"stackItem3"},r.createElement(x.Z,{slot:"StackItemContent","sm-flex-direction":"column"}))),r.createElement(f.KC,{position:"relative"}),r.createElement(f.R,{display:"none"},r.createElement(x.Z,{slot:"image","box-shadow":"--xl","border-radius":"12px","sm-border-radius":"8px"})),r.createElement(y.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'),r.createElement("link",{href:"/lp/web-application-builder/",rel:"canonical",place:"endOfHead",rawKey:"618cddde6511a6433895b9c7"})))}}}]);
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.