"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { code: "code", p: "p", pre: "pre", span: "span", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "Why is Flexbox used? It allows us to design our website much more easily and effectively. With Flexbox, we can easily spread the width, height and order of the html elements to the field. Flexbox does this automatically for us without any overflow. Also, we can direct our items as we want. We can apply properties such as float, position, that we use in classical css very simply with flexbox. what we need to do is display: flex; write our code" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: ["flex ", _jsx(_components.span, { className: "token operator", children: "-" }), " direction", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "We can list the items listed side by side one under the other" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: ["justify ", _jsx(_components.span, { className: "token operator", children: "-" }), " content", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "We can sort our items horizontally. We can give a certain distance between the elements and bring them to the beginning and the end." }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: ["flex ", _jsx(_components.span, { className: "token operator", children: "-" }), " wrap", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "when the screen width gets smaller our items go to the bottom" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: ["align ", _jsx(_components.span, { className: "token operator", children: "-" }), " items", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "We can align vertically." }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: ["align ", _jsx(_components.span, { className: "token operator", children: "-" }), " content", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "we can adjust the distance between each row." }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: ["align ", _jsx(_components.span, { className: "token operator", children: "-" }), " self", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "We can move each element individually." }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: ["order", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "we can sort" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: ["flex", _jsx(_components.span, { className: "token operator", children: "-" }), "grow", _jsx(_components.span, { className: "token operator", children: ":" }), _jsx(_components.span, { className: "token number", children: "0" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "We can adjust how much our items grow when containers grow." }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: ["flex", _jsx(_components.span, { className: "token operator", children: "-" }), "shrink", _jsx(_components.span, { className: "token operator", children: ":" }), _jsx(_components.span, { className: "token number", children: "1" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "We can adjust how much our items shrink when containers shrink." }), "\n", _jsx(_components.p, { children: "we can initially give width attribute to each element." }), "\n", _jsx(_components.p, { children: "Let's create the containers and items of our web page." }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: [_jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "!" }), _jsx(_components.span, { className: "token constant", children: "DOCTYPE" }), " html", _jsx(_components.span, { className: "token operator", children: ">" }), "\n", _jsx(_components.span, { className: "token operator", children: "<" }), "html lang", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"en\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n\n", _jsx(_components.span, { className: "token operator", children: "<" }), "head", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "meta charset", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"UTF-8\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "meta name", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"viewport\"" }), " content", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"width=device-width, initial-scale=1.0\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "title", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Flexbox" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "title", _jsx(_components.span, { className: "token operator", children: ">" }), "\n", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "head", _jsx(_components.span, { className: "token operator", children: ">" }), "\n", _jsx(_components.span, { className: "token operator", children: "<" }), "style", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "container" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n background", _jsx(_components.span, { className: "token operator", children: "-" }), "color", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token function", children: "rgb" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "148" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "158" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "161" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "border" }), _jsx(_components.span, { className: "token operator", children: ":" }), " 1px solid ", _jsx(_components.span, { className: "token function", children: "rgb" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "95" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "174" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "248" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "padding" }), _jsx(_components.span, { className: "token operator", children: ":" }), " 20px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "item" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n background", _jsx(_components.span, { className: "token operator", children: "-" }), "color", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token function", children: "rgb" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "78" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "78" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "78" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "padding" }), _jsx(_components.span, { className: "token operator", children: ":" }), " 40px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "color" }), _jsx(_components.span, { className: "token operator", children: ":" }), " #fff", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n min", _jsx(_components.span, { className: "token operator", children: "-" }), "height", _jsx(_components.span, { className: "token operator", children: ":" }), " 100px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n font", _jsx(_components.span, { className: "token operator", children: "-" }), "size", _jsx(_components.span, { className: "token operator", children: ":" }), " 35px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "border" }), _jsx(_components.span, { className: "token operator", children: ":" }), " 1px solid black", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "margin" }), _jsx(_components.span, { className: "token operator", children: ":" }), "10px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "item1" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "item2" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "item3" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n\n", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "style", _jsx(_components.span, { className: "token operator", children: ">" }), "\n\n", _jsx(_components.span, { className: "token operator", children: "<" }), "body", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"container\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"item item1\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "item ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"item item2\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "item ", _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"item item3\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "item ", _jsx(_components.span, { className: "token number", children: "3" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "body", _jsx(_components.span, { className: "token operator", children: ">" }), "\n\n", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "html", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "output picture" }), "\n", _jsx("img", { className: "w-full", src: "https://res.cloudinary.com/djfqidbj1/image/upload/v1672449113/jlcljcr8f2or11hlbsg2.jpg" }), "\n", _jsx(_components.p, { children: "Now let's add display to our code" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: [_jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "!" }), _jsx(_components.span, { className: "token constant", children: "DOCTYPE" }), " html", _jsx(_components.span, { className: "token operator", children: ">" }), "\n", _jsx(_components.span, { className: "token operator", children: "<" }), "html lang", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"en\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n\n", _jsx(_components.span, { className: "token operator", children: "<" }), "head", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "meta charset", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"UTF-8\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "meta name", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"viewport\"" }), " content", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"width=device-width, initial-scale=1.0\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "title", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Flexbox" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "title", _jsx(_components.span, { className: "token operator", children: ">" }), "\n", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "head", _jsx(_components.span, { className: "token operator", children: ">" }), "\n", _jsx(_components.span, { className: "token operator", children: "<" }), "style", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "container" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n background", _jsx(_components.span, { className: "token operator", children: "-" }), "color", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token function", children: "rgb" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "148" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "158" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "161" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "border" }), _jsx(_components.span, { className: "token operator", children: ":" }), " 1px solid ", _jsx(_components.span, { className: "token function", children: "rgb" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "95" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "174" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "248" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "padding" }), _jsx(_components.span, { className: "token operator", children: ":" }), " 20px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "display" }), _jsx(_components.span, { className: "token operator", children: ":" }), " flex", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "item" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n background", _jsx(_components.span, { className: "token operator", children: "-" }), "color", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token function", children: "rgb" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "78" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "78" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "78" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "padding" }), _jsx(_components.span, { className: "token operator", children: ":" }), " 40px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "color" }), _jsx(_components.span, { className: "token operator", children: ":" }), " #fff", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n min", _jsx(_components.span, { className: "token operator", children: "-" }), "height", _jsx(_components.span, { className: "token operator", children: ":" }), " 100px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n font", _jsx(_components.span, { className: "token operator", children: "-" }), "size", _jsx(_components.span, { className: "token operator", children: ":" }), " 35px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "border" }), _jsx(_components.span, { className: "token operator", children: ":" }), " 1px solid black", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "margin" }), _jsx(_components.span, { className: "token operator", children: ":" }), "10px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "item1" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "item2" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "item3" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n\n", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "style", _jsx(_components.span, { className: "token operator", children: ">" }), "\n\n", _jsx(_components.span, { className: "token operator", children: "<" }), "body", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"container\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"item item1\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "item ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"item item2\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "item ", _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"item item3\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "item ", _jsx(_components.span, { className: "token number", children: "3" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "body", _jsx(_components.span, { className: "token operator", children: ">" }), "\n\n", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "html", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "output" }), "\n", _jsx("img", { className: "w-full ", src: "https://res.cloudinary.com/djfqidbj1/image/upload/v1672449113/ejtoanify4jcyzwyyrnr.jpg" }), "\n", _jsx(_components.p, { children: "As you can see, our items came side by side. Now we can move it however we want." }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: [_jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "container" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n background", _jsx(_components.span, { className: "token operator", children: "-" }), "color", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token function", children: "rgb" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "148" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "158" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "161" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "border" }), _jsx(_components.span, { className: "token operator", children: ":" }), " 1px solid ", _jsx(_components.span, { className: "token function", children: "rgb" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "95" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "174" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "248" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "padding" }), _jsx(_components.span, { className: "token operator", children: ":" }), " 20px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "display" }), _jsx(_components.span, { className: "token operator", children: ":" }), " flex", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n flex", _jsx(_components.span, { className: "token operator", children: "-" }), "direction", _jsx(_components.span, { className: "token operator", children: ":" }), " row", _jsx(_components.span, { className: "token operator", children: "-" }), "reverse", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "I added row-reverse and it aligns in reverse." }), "\n", _jsx(_components.p, { children: "Now let's add flex-wrap." }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "container" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n background", _jsx(_components.span, { className: "token operator", children: "-" }), "color", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token function", children: "rgb" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "148" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "158" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "161" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "border" }), _jsx(_components.span, { className: "token operator", children: ":" }), " 1px solid ", _jsx(_components.span, { className: "token function", children: "rgb" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "95" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "174" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "248" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "padding" }), _jsx(_components.span, { className: "token operator", children: ":" }), " 20px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "display" }), _jsx(_components.span, { className: "token operator", children: ":" }), " flex", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n flex", _jsx(_components.span, { className: "token operator", children: "-" }), "direction", _jsx(_components.span, { className: "token operator", children: ":" }), " row", _jsx(_components.span, { className: "token operator", children: "-" }), "reverse", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n flex", _jsx(_components.span, { className: "token operator", children: "-" }), "wrap", _jsx(_components.span, { className: "token operator", children: ":" }), " wrap", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "output" }), "\n", _jsx("img", { className: "w-full ", src: "https://res.cloudinary.com/djfqidbj1/image/upload/v1672449113/svvvfakt0s4vbhirpa0c.jpg" }), "\n", _jsx(_components.p, { children: "As you can see, my items went to the bottom. Items that do not fit according to the\nscreen shrinkage will be lowered." }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: [_jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "container" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n background", _jsx(_components.span, { className: "token operator", children: "-" }), "color", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token function", children: "rgb" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "148" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "158" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "161" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "border" }), _jsx(_components.span, { className: "token operator", children: ":" }), " 1px solid ", _jsx(_components.span, { className: "token function", children: "rgb" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "95" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "174" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "248" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "padding" }), _jsx(_components.span, { className: "token operator", children: ":" }), " 20px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "display" }), _jsx(_components.span, { className: "token operator", children: ":" }), " flex", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n flex", _jsx(_components.span, { className: "token operator", children: "-" }), "direction", _jsx(_components.span, { className: "token operator", children: ":" }), " row", _jsx(_components.span, { className: "token operator", children: "-" }), "reverse", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n flex", _jsx(_components.span, { className: "token operator", children: "-" }), "wrap", _jsx(_components.span, { className: "token operator", children: ":" }), " wrap", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n justify", _jsx(_components.span, { className: "token operator", children: "-" }), "content", _jsx(_components.span, { className: "token operator", children: ":" }), " center", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "output" }), "\n", _jsx("img", { className: "w-full ", src: "https://res.cloudinary.com/djfqidbj1/image/upload/v1672449114/f3ajjx1kssuyr0tbqosm.jpg" }), "\n", _jsx(_components.p, { children: "By adding justify-content we have centered our elements as you can see. When the\nscreen shrinks, the spaces from right to left will be equalized." }), "\n", _jsx(_components.p, { children: "We can add flex-grow command to our items and make various settings." }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: [_jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "!" }), _jsx(_components.span, { className: "token constant", children: "DOCTYPE" }), " html", _jsx(_components.span, { className: "token operator", children: ">" }), "\n", _jsx(_components.span, { className: "token operator", children: "<" }), "html lang", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"en\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n\n", _jsx(_components.span, { className: "token operator", children: "<" }), "head", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "meta charset", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"UTF-8\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "meta name", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"viewport\"" }), " content", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"width=device-width, initial-scale=1.0\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "title", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Flexbox" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "title", _jsx(_components.span, { className: "token operator", children: ">" }), "\n", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "head", _jsx(_components.span, { className: "token operator", children: ">" }), "\n", _jsx(_components.span, { className: "token operator", children: "<" }), "style", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "container" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n background", _jsx(_components.span, { className: "token operator", children: "-" }), "color", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token function", children: "rgb" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "148" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "158" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "161" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "border" }), _jsx(_components.span, { className: "token operator", children: ":" }), " 1px solid ", _jsx(_components.span, { className: "token function", children: "rgb" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "95" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "174" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "248" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "padding" }), _jsx(_components.span, { className: "token operator", children: ":" }), " 20px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "display" }), _jsx(_components.span, { className: "token operator", children: ":" }), " flex", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n flex", _jsx(_components.span, { className: "token operator", children: "-" }), "direction", _jsx(_components.span, { className: "token operator", children: ":" }), " row", _jsx(_components.span, { className: "token operator", children: "-" }), "reverse", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n flex", _jsx(_components.span, { className: "token operator", children: "-" }), "wrap", _jsx(_components.span, { className: "token operator", children: ":" }), " wrap", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n justify", _jsx(_components.span, { className: "token operator", children: "-" }), "content", _jsx(_components.span, { className: "token operator", children: ":" }), " center", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "item" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n background", _jsx(_components.span, { className: "token operator", children: "-" }), "color", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token function", children: "rgb" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "78" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "78" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token number", children: "78" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "padding" }), _jsx(_components.span, { className: "token operator", children: ":" }), " 40px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "color" }), _jsx(_components.span, { className: "token operator", children: ":" }), " #fff", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n min", _jsx(_components.span, { className: "token operator", children: "-" }), "height", _jsx(_components.span, { className: "token operator", children: ":" }), " 100px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n min", _jsx(_components.span, { className: "token operator", children: "-" }), "width", _jsx(_components.span, { className: "token operator", children: ":" }), " 300px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n font", _jsx(_components.span, { className: "token operator", children: "-" }), "size", _jsx(_components.span, { className: "token operator", children: ":" }), " 35px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "border" }), _jsx(_components.span, { className: "token operator", children: ":" }), " 1px solid black", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "margin" }), _jsx(_components.span, { className: "token operator", children: ":" }), "10px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "item1" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n flex", _jsx(_components.span, { className: "token operator", children: "-" }), "grow", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "item2" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n flex", _jsx(_components.span, { className: "token operator", children: "-" }), "grow", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "item3" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n flex", _jsx(_components.span, { className: "token operator", children: "-" }), "grow", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "item4" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n flex", _jsx(_components.span, { className: "token operator", children: "-" }), "grow", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "item5" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n flex", _jsx(_components.span, { className: "token operator", children: "-" }), "grow", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n\n", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "style", _jsx(_components.span, { className: "token operator", children: ">" }), "\n\n", _jsx(_components.span, { className: "token operator", children: "<" }), "body", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"container\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"item item1\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "item ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"item item2\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "item ", _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"item item3\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "item ", _jsx(_components.span, { className: "token number", children: "3" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"item item4\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "item ", _jsx(_components.span, { className: "token number", children: "4" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"item item5\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "item ", _jsx(_components.span, { className: "token number", children: "5" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "body", _jsx(_components.span, { className: "token operator", children: ">" }), "\n\n", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "html", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "output" }), "\n", _jsx("img", { className: "w-full ", src: "https://res.cloudinary.com/djfqidbj1/image/upload/v1672449114/sceiaoqusdb0elbsmfbb.jpg" }), "\n", _jsx(_components.p, { children: "We can specify the order of our items by giving the order value." }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: [_jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "item1" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n flex", _jsx(_components.span, { className: "token operator", children: "-" }), "grow", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "order" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "3" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "item2" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n flex", _jsx(_components.span, { className: "token operator", children: "-" }), "grow", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "order" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "item3" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n flex", _jsx(_components.span, { className: "token operator", children: "-" }), "grow", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "order" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token operator", children: "-" }), _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "item4" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n flex", _jsx(_components.span, { className: "token operator", children: "-" }), "grow", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "order" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token operator", children: "-" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "item5" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n flex", _jsx(_components.span, { className: "token operator", children: "-" }), "grow", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "order" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "I built a simple website using flexbox." }), "\n", _jsx(_components.p, { children: "my html codes" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: [_jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "!" }), _jsx(_components.span, { className: "token constant", children: "DOCTYPE" }), " html", _jsx(_components.span, { className: "token operator", children: ">" }), "\n", _jsx(_components.span, { className: "token operator", children: "<" }), "html lang", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"en\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "head", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "meta charset", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"UTF-8\"" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "meta http", _jsx(_components.span, { className: "token operator", children: "-" }), "equiv", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"X-UA-Compatible\"" }), " content", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"IE=edge\"" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "meta name", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"viewport\"" }), " content", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"width=device-width, initial-scale=1.0\"" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "link rel", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"stylesheet\"" }), " href", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"style.css\"" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "title", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Flexbox" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "Web" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "Site" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "title", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "head", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "body", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"header\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"slogan\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Welcome" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "My" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "Web" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "Site" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "nav ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"menu\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "ul ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"links\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "li ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"link\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token operator", children: "<" }), "a href", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"#home\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Home" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "a", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "li", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "li ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"link\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token operator", children: "<" }), "a href", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"#news\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token maybe-class-name", children: "News" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "a", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "li", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "li ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"link\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token operator", children: "<" }), "a href", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"#contact\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Contact" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "a", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "li", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "li ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"link\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token operator", children: "<" }), "a href", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"#about\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token maybe-class-name", children: "About" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "a", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "li", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "ul", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "nav", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "main ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"m-container\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"m-item\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "h2", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token maybe-class-name", children: "My" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "Web" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "Site" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "Post" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "h2", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "p", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token maybe-class-name", children: "Lorem" }), " ipsum dolor sit amet", _jsx(_components.span, { className: "token punctuation", children: "," }), " consectetur adipisicing elit", _jsx(_components.span, { className: "token punctuation", children: "." }), " ", _jsx(_components.span, { className: "token property-access", children: _jsx(_components.span, { className: "token maybe-class-name", children: "In" }) }), " molestias\n libero obcaecati eius architecto sapiente blanditiis", _jsx(_components.span, { className: "token operator", children: "?" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "Natus" }), " sed odio\n totam mollitia vero maxime error", _jsx(_components.span, { className: "token punctuation", children: "," }), " quod", _jsx(_components.span, { className: "token punctuation", children: "," }), " eaque dolor officia harum\n itaque", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: _jsx(_components.span, { className: "token maybe-class-name", children: "Lorem" }) }), " ipsum dolor sit amet consectetur adipisicing elit", _jsx(_components.span, { className: "token punctuation", children: "." }), " ", _jsx(_components.span, { className: "token property-access", children: _jsx(_components.span, { className: "token maybe-class-name", children: "Earum" }) }), "\n distinctio commodi eos consequatur quo voluptate", _jsx(_components.span, { className: "token punctuation", children: "," }), " qui nesciunt vitae\n nihil ullam", _jsx(_components.span, { className: "token operator", children: "?" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "p", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"m-item\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "h2", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token maybe-class-name", children: "This" }), " is ", _jsx(_components.span, { className: "token maybe-class-name", children: "My" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "Web" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "Site" }), " ", _jsx(_components.span, { className: "token maybe-class-name", children: "Post" }), " ", _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "h2", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "p", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token maybe-class-name", children: "Lorem" }), " ipsum dolor sit amet consectetur adipisicing elit", _jsx(_components.span, { className: "token punctuation", children: "." }), " ", _jsx(_components.span, { className: "token property-access", children: _jsx(_components.span, { className: "token maybe-class-name", children: "Earum" }) }), "\n distinctio commodi eos consequatur quo voluptate", _jsx(_components.span, { className: "token punctuation", children: "," }), " qui nesciunt vitae\n nihil ullam", _jsx(_components.span, { className: "token operator", children: "?" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Lorem" }), " ipsum dolor sit amet consectetur adipisicing elit", _jsx(_components.span, { className: "token punctuation", children: "." }), " ", _jsx(_components.span, { className: "token property-access", children: _jsx(_components.span, { className: "token maybe-class-name", children: "Earum" }) }), "\n distinctio commodi eos consequatur quo voluptate", _jsx(_components.span, { className: "token punctuation", children: "," }), " qui nesciunt vitae\n nihil ullam", _jsx(_components.span, { className: "token operator", children: "?" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "p", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"latest\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "h2", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Posts" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "h2", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "a href", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"#\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token operator", children: "<" }), "h3", _jsx(_components.span, { className: "token operator", children: ">" }), "commodi eos consequatur quo voluptate", _jsx(_components.span, { className: "token punctuation", children: "," }), " qui nesciunt vitae", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "h3", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "a", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "a href", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"#\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token operator", children: "<" }), "h3", _jsx(_components.span, { className: "token operator", children: ">" }), "commodi eos consequatur quo voluptate", _jsx(_components.span, { className: "token punctuation", children: "," }), " qui nesciunt vitae", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "h3", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "a", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "a href", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"#\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token operator", children: "<" }), "h3", _jsx(_components.span, { className: "token operator", children: ">" }), "commodi eos consequatur quo voluptate", _jsx(_components.span, { className: "token punctuation", children: "," }), " qui nesciunt vitae", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "h3", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "a", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "a href", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"#\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token operator", children: "<" }), "h3", _jsx(_components.span, { className: "token operator", children: ">" }), "commodi eos consequatur quo voluptate", _jsx(_components.span, { className: "token punctuation", children: "," }), " qui nesciunt vitae", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "h3", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "a", _jsx(_components.span, { className: "token operator", children: ">" }), "\n\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n\n\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "main", _jsx(_components.span, { className: "token operator", children: ">" }), "\n\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "div ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"subscribe\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "h2", _jsx(_components.span, { className: "token operator", children: ">" }), "subscribe 👇", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "h2", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "form action", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"#\"" }), " ", _jsx(_components.span, { className: "token keyword", children: "class" }), _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"form\"" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "input type", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"text\"" }), " placeholder", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token string", children: "\"Email\"" }), " ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), "button", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token maybe-class-name", children: "Submit" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "button", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "form", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "div", _jsx(_components.span, { className: "token operator", children: ">" }), "\n ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "body", _jsx(_components.span, { className: "token operator", children: ">" }), "\n", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "html", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }) }), "\n", _jsx(_components.p, { children: "output" }), "\n", _jsx("img", { className: "w-full ", src: "https://res.cloudinary.com/djfqidbj1/image/upload/v1672449114/k8x3r3bytoiqzgym5bo2.jpg" }), "\n", _jsx(_components.p, { children: "mobile output" }), "\n", _jsx("img", { className: "w-3/12 mx-2", src: "https://res.cloudinary.com/djfqidbj1/image/upload/v1672449114/fg0eoic1coihfpnz3pzg.jpg", alt: "onurtaskiran" }), "\n", _jsx(_components.p, { children: "my css codes" }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript", children: [_jsx(_components.span, { className: "token operator", children: "*" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n font", _jsx(_components.span, { className: "token operator", children: "-" }), "family", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'arial'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " arial", _jsx(_components.span, { className: "token punctuation", children: "," }), " helvetica", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n\nbody", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "margin" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "padding" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n font", _jsx(_components.span, { className: "token operator", children: "-" }), "size", _jsx(_components.span, { className: "token operator", children: ":" }), "28px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\nh3 ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n font", _jsx(_components.span, { className: "token operator", children: "-" }), "size", _jsx(_components.span, { className: "token operator", children: ":" }), " 15px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n text", _jsx(_components.span, { className: "token operator", children: "-" }), "decoration", _jsx(_components.span, { className: "token operator", children: ":" }), "none", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\na", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n text", _jsx(_components.span, { className: "token operator", children: "-" }), "decoration", _jsx(_components.span, { className: "token operator", children: ":" }), "none", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "header" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n background", _jsx(_components.span, { className: "token operator", children: "-" }), "color", _jsx(_components.span, { className: "token operator", children: ":" }), " #1897ff", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "color" }), _jsx(_components.span, { className: "token operator", children: ":" }), " #fff", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "padding" }), _jsx(_components.span, { className: "token operator", children: ":" }), _jsx(_components.span, { className: "token number", children: "0" }), " ", _jsx(_components.span, { className: "token punctuation", children: "." }), "5rem", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "display" }), _jsx(_components.span, { className: "token operator", children: ":" }), "flex", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n align", _jsx(_components.span, { className: "token operator", children: "-" }), "items", _jsx(_components.span, { className: "token operator", children: ":" }), "center", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n justify", _jsx(_components.span, { className: "token operator", children: "-" }), "content", _jsx(_components.span, { className: "token operator", children: ":" }), "space", _jsx(_components.span, { className: "token operator", children: "-" }), "between", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "menu" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "display" }), _jsx(_components.span, { className: "token operator", children: ":" }), " flex", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n flex", _jsx(_components.span, { className: "token operator", children: "-" }), "wrap", _jsx(_components.span, { className: "token operator", children: ":" }), " wrap", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n flex", _jsx(_components.span, { className: "token operator", children: "-" }), "grow", _jsx(_components.span, { className: "token operator", children: ":" }), _jsx(_components.span, { className: "token operator", children: "-" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "menu" }), " ul", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n list", _jsx(_components.span, { className: "token operator", children: "-" }), "style", _jsx(_components.span, { className: "token operator", children: ":" }), "none", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "display" }), _jsx(_components.span, { className: "token operator", children: ":" }), "flex", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "menu" }), " ul li", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n flex", _jsx(_components.span, { className: "token operator", children: "-" }), "grow", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "menu" }), " ul li a", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n font", _jsx(_components.span, { className: "token operator", children: "-" }), "size", _jsx(_components.span, { className: "token operator", children: ":" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: "." }), "2rem", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "links" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "margin" }), _jsx(_components.span, { className: "token operator", children: ":" }), _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n list", _jsx(_components.span, { className: "token operator", children: "-" }), "style", _jsx(_components.span, { className: "token operator", children: ":" }), "none", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "display" }), _jsx(_components.span, { className: "token operator", children: ":" }), "flex", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n flex", _jsx(_components.span, { className: "token operator", children: "-" }), "wrap", _jsx(_components.span, { className: "token operator", children: ":" }), " wrap", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "link" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "padding" }), _jsx(_components.span, { className: "token operator", children: ":" }), _jsx(_components.span, { className: "token punctuation", children: "." }), "5rem", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "link" }), _jsx(_components.span, { className: "token operator", children: ":" }), "hover", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n background", _jsx(_components.span, { className: "token operator", children: "-" }), "color", _jsx(_components.span, { className: "token operator", children: ":" }), " #", _jsx(_components.span, { className: "token number", children: "777" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "link" }), " a", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n text", _jsx(_components.span, { className: "token operator", children: "-" }), "decoration", _jsx(_components.span, { className: "token operator", children: ":" }), "none", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "color" }), _jsx(_components.span, { className: "token operator", children: ":" }), "inherit", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n\n", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "m" }), _jsx(_components.span, { className: "token operator", children: "-" }), "container ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "display" }), _jsx(_components.span, { className: "token operator", children: ":" }), " flex", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n flex", _jsx(_components.span, { className: "token operator", children: "-" }), "wrap", _jsx(_components.span, { className: "token operator", children: ":" }), " wrap", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n padding", _jsx(_components.span, { className: "token operator", children: "-" }), "top", _jsx(_components.span, { className: "token operator", children: ":" }), " 20px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n padding", _jsx(_components.span, { className: "token operator", children: "-" }), "left", _jsx(_components.span, { className: "token operator", children: ":" }), " 25px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n padding", _jsx(_components.span, { className: "token operator", children: "-" }), "right", _jsx(_components.span, { className: "token operator", children: ":" }), " 25px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "m" }), _jsx(_components.span, { className: "token operator", children: "-" }), "item", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "padding" }), _jsx(_components.span, { className: "token operator", children: ":" }), _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token operator", children: "%" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n text", _jsx(_components.span, { className: "token operator", children: "-" }), "align", _jsx(_components.span, { className: "token operator", children: ":" }), " center", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "flex" }), _jsx(_components.span, { className: "token operator", children: ":" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n flex", _jsx(_components.span, { className: "token operator", children: "-" }), "grow", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n flex", _jsx(_components.span, { className: "token operator", children: "-" }), "basis", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "m" }), _jsx(_components.span, { className: "token operator", children: "-" }), "item h2", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "color" }), _jsx(_components.span, { className: "token operator", children: ":" }), " #1897ff", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "m" }), _jsx(_components.span, { className: "token operator", children: "-" }), "item p", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n margin", _jsx(_components.span, { className: "token operator", children: "-" }), "top", _jsx(_components.span, { className: "token operator", children: ":" }), " 5px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "latest" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "padding" }), _jsx(_components.span, { className: "token operator", children: ":" }), " 1rem", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n text", _jsx(_components.span, { className: "token operator", children: "-" }), "align", _jsx(_components.span, { className: "token operator", children: ":" }), " left", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n align", _jsx(_components.span, { className: "token operator", children: "-" }), "self", _jsx(_components.span, { className: "token operator", children: ":" }), " stretch", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n justify", _jsx(_components.span, { className: "token operator", children: "-" }), "content", _jsx(_components.span, { className: "token operator", children: ":" }), " center", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n flex", _jsx(_components.span, { className: "token operator", children: "-" }), "basis", _jsx(_components.span, { className: "token operator", children: ":" }), " 200px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n flex", _jsx(_components.span, { className: "token operator", children: "-" }), "shrink", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n background", _jsx(_components.span, { className: "token operator", children: "-" }), "color", _jsx(_components.span, { className: "token operator", children: ":" }), " #1897ff", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "subscribe" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n\n ", _jsx(_components.span, { className: "token literal-property property", children: "margin" }), _jsx(_components.span, { className: "token operator", children: ":" }), " 1rem", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "display" }), _jsx(_components.span, { className: "token operator", children: ":" }), " flex", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n justify", _jsx(_components.span, { className: "token operator", children: "-" }), "content", _jsx(_components.span, { className: "token operator", children: ":" }), " center", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n flex", _jsx(_components.span, { className: "token operator", children: "-" }), "wrap", _jsx(_components.span, { className: "token operator", children: ":" }), " wrap", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n background", _jsx(_components.span, { className: "token operator", children: "-" }), "color", _jsx(_components.span, { className: "token operator", children: ":" }), " #", _jsx(_components.span, { className: "token number", children: "777" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n border", _jsx(_components.span, { className: "token operator", children: "-" }), "radius", _jsx(_components.span, { className: "token operator", children: ":" }), " 30px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n flex", _jsx(_components.span, { className: "token operator", children: "-" }), "direction", _jsx(_components.span, { className: "token operator", children: ":" }), " column", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "subscribe" }), " h2", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n text", _jsx(_components.span, { className: "token operator", children: "-" }), "align", _jsx(_components.span, { className: "token operator", children: ":" }), " center", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "padding" }), _jsx(_components.span, { className: "token operator", children: ":" }), "1rem", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n font", _jsx(_components.span, { className: "token operator", children: "-" }), "size", _jsx(_components.span, { className: "token operator", children: ":" }), " 2rem", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "color" }), _jsx(_components.span, { className: "token operator", children: ":" }), "#1897ff", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "form" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "padding" }), _jsx(_components.span, { className: "token operator", children: ":" }), "3rem", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "display" }), _jsx(_components.span, { className: "token operator", children: ":" }), "flex", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n align", _jsx(_components.span, { className: "token operator", children: "-" }), "items", _jsx(_components.span, { className: "token operator", children: ":" }), " center", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n flex", _jsx(_components.span, { className: "token operator", children: "-" }), "direction", _jsx(_components.span, { className: "token operator", children: ":" }), " column", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "width" }), _jsx(_components.span, { className: "token operator", children: ":" }), _jsx(_components.span, { className: "token number", children: "40" }), _jsx(_components.span, { className: "token operator", children: "%" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "margin" }), _jsx(_components.span, { className: "token operator", children: ":" }), "auto", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "form" }), " input", _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "form" }), " textarea", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "padding" }), _jsx(_components.span, { className: "token operator", children: ":" }), "1rem", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "width" }), _jsx(_components.span, { className: "token operator", children: ":" }), _jsx(_components.span, { className: "token number", children: "100" }), _jsx(_components.span, { className: "token operator", children: "%" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "outline" }), _jsx(_components.span, { className: "token operator", children: ":" }), "none", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "border" }), _jsx(_components.span, { className: "token operator", children: ":" }), "1px solid #1897ff", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n border", _jsx(_components.span, { className: "token operator", children: "-" }), "radius", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "." }), "3rem", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "form" }), " button", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n background", _jsx(_components.span, { className: "token operator", children: "-" }), "color", _jsx(_components.span, { className: "token operator", children: ":" }), "#1897ff", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "padding" }), _jsx(_components.span, { className: "token operator", children: ":" }), "1rem", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n margin", _jsx(_components.span, { className: "token operator", children: "-" }), "top", _jsx(_components.span, { className: "token operator", children: ":" }), "1rem", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "color" }), _jsx(_components.span, { className: "token operator", children: ":" }), "white", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "width" }), _jsx(_components.span, { className: "token operator", children: ":" }), _jsx(_components.span, { className: "token number", children: "30" }), _jsx(_components.span, { className: "token operator", children: "%" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "border" }), _jsx(_components.span, { className: "token operator", children: ":" }), "none", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n font", _jsx(_components.span, { className: "token operator", children: "-" }), "size", _jsx(_components.span, { className: "token operator", children: ":" }), _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: "." }), "2rem", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n\n\n@media all ", _jsx(_components.span, { className: "token function", children: "and" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsxs(_components.span, { className: "token parameter", children: ["max", _jsx(_components.span, { className: "token operator", children: "-" }), "width", _jsx(_components.span, { className: "token operator", children: ":" }), "600px"] }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "header" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n flex", _jsx(_components.span, { className: "token operator", children: "-" }), "direction", _jsx(_components.span, { className: "token operator", children: ":" }), " column", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n text", _jsx(_components.span, { className: "token operator", children: "-" }), "align", _jsx(_components.span, { className: "token operator", children: ":" }), " center", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "latest" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n flex", _jsx(_components.span, { className: "token operator", children: "-" }), "direction", _jsx(_components.span, { className: "token operator", children: ":" }), " column", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n align", _jsx(_components.span, { className: "token operator", children: "-" }), "self", _jsx(_components.span, { className: "token operator", children: ":" }), " stretch", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n justify", _jsx(_components.span, { className: "token operator", children: "-" }), "content", _jsx(_components.span, { className: "token operator", children: ":" }), " center", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n flex", _jsx(_components.span, { className: "token operator", children: "-" }), "basis", _jsx(_components.span, { className: "token operator", children: ":" }), " 300px", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n flex", _jsx(_components.span, { className: "token operator", children: "-" }), "shrink", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "menu" }), " ul", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n flex", _jsx(_components.span, { className: "token operator", children: "-" }), "direction", _jsx(_components.span, { className: "token operator", children: ":" }), " column", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n padding", _jsx(_components.span, { className: "token operator", children: "-" }), "top", _jsx(_components.span, { className: "token operator", children: ":" }), "1rem", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token property-access", children: "main" }), _jsx(_components.span, { className: "token operator", children: "-" }), "content ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n flex", _jsx(_components.span, { className: "token operator", children: "-" }), "direction", _jsx(_components.span, { className: "token operator", children: ":" }), " column", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "padding" }), _jsx(_components.span, { className: "token operator", children: ":" }), _jsx(_components.span, { className: "token number", children: "2" }), _jsx(_components.span, { className: "token operator", children: "%" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }) })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };