Hello friends, welcome back to my blog. Today this blog post I will tell you, Angular HTML Tailwind CSS Free Template Code Snippet
Guys please watch below video before starting code implementation:
Angular13 came and Angular 14 is coming soon and if you are new then you must check below two links:
Friends now I proceed onwards and here is the working code snippet and please use carefully this to avoid the mistakes:
1. Firstly friends we need fresh angular 13 setup and for this we need to run below commands but if you already have angular 13 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:
npm install -g @angular/cli ng new angulardemo //Create new Angular Project cd angulardemo // Go inside the Angular Project Folder ng g c header ng g c footer ng g c home
2. Now guy’s we need to add below code inside our project/scr/styles.css file:
/* You can add global styles to this file, and also import other style files */
@import "https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap";/*!tailwindcss v2.2.17 | MIT License | https://tailwindcss.com*//*!modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize*/*,::before,::after{box-sizing:border-box}html{-moz-tab-size:4;-o-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{font-family:system-ui,-apple-system,segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji}hr{height:0;color:inherit}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Consolas,liberation mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}button{background-color:transparent;background-image:none}fieldset{margin:0;padding:0}ol,ul{list-style:none;margin:0;padding:0}html{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji;line-height:1.5}body{font-family:inherit;line-height:inherit}*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}hr{border-top-width:1px}img{border-style:solid}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:-moz-focusring{outline:auto}table{border-collapse:collapse}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}button,input,optgroup,select,textarea{padding:0;line-height:inherit;color:inherit}pre,code,kbd,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,liberation mono,courier new,monospace}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,::before,::after{--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-border-opacity: 1;border-color:rgba(229,231,235,var(--tw-border-opacity));--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgba(59, 130, 246, 0.5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-blur: var(--tw-empty,/*!*/ /*!*/);--tw-brightness: var(--tw-empty,/*!*/ /*!*/);--tw-contrast: var(--tw-empty,/*!*/ /*!*/);--tw-grayscale: var(--tw-empty,/*!*/ /*!*/);--tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);--tw-invert: var(--tw-empty,/*!*/ /*!*/);--tw-saturate: var(--tw-empty,/*!*/ /*!*/);--tw-sepia: var(--tw-empty,/*!*/ /*!*/);--tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);--tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.aa{width:100%;margin-right:auto;margin-left:auto;padding-right:16px;padding-left:16px}@media(min-width:540px){.aa{max-width:540px}}@media(min-width:720px){.aa{max-width:720px}}@media(min-width:960px){.aa{max-width:960px}}@media(min-width:1140px){.aa{max-width:1140px}}@media(min-width:1320px){.aa{max-width:1320px}}.a1B{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.a2e{position:fixed}.a3{position:absolute}.ad{position:relative}.a4{top:0}.a5{left:0}.ak{right:1rem}.al\/2{top:50%}.aC{top:100%}.a1X{bottom:0}.a_{right:0}.a2a{top:3.5rem}.a2b{bottom:6rem}.a2f{bottom:2rem}.a2g{right:2rem}.a2h{left:auto}.a34{top:1.5rem}.a35{right:1.5rem}.a3W{top:1.25rem}.a3X{bottom:1.25rem}.a12\[-4px\]{top:-4px}.a6{z-index:40}.a1H{z-index:10}.a1Y\[-1\]{z-index:-1}.a1Y\[999\]{z-index:999}.a45{margin:0}.ab\[-16px\]{margin-left:-16px;margin-right:-16px}.au\[6px\]{margin-top:6px;margin-bottom:6px}.aO{margin-left:2rem;margin-right:2rem}.a1L{margin-left:auto;margin-right:auto}.a3e{margin-left:.25rem;margin-right:.25rem}.a3F{margin-left:.5rem;margin-right:.5rem}.a3N{margin-left:.75rem;margin-right:.75rem}.ab\[-12px\]{margin-left:-12px;margin-right:-12px}.a1N{margin-bottom:2.25rem}.a1Q{margin-bottom:1rem}.a1V{margin-bottom:2.5rem}.a21{margin-bottom:4rem}.a23{margin-bottom:2rem}.a25{margin-right:1.5rem}.a11\[6px\]{margin-top:6px}.a2s{margin-bottom:3rem}.a2v{margin-bottom:1.25rem}.a2A{margin-right:.75rem}.a2E{margin-bottom:1.5rem}.a2F{margin-bottom:2.75rem}.a2G{margin-right:1rem}.a2K{margin-bottom:.25rem}.a2N{margin-right:2.5rem}.a2O{margin-right:1.25rem}.a2X{margin-bottom:.5rem}.a30{margin-bottom:.75rem}.a32{margin-left:.75rem}.a3j{margin-top:3rem}.a3s\[6px\]{margin-bottom:6px}.a3s\[100px\]{margin-bottom:100px}.a3s\[70px\]{margin-bottom:70px}.a3I{margin-bottom:5rem}.a3U{margin-right:.25rem}.a41{margin-left:1rem}.a43{margin-bottom:1.75rem}.a4a{margin-top:.25rem}.ah{display:block}.a22{display:inline-block}.a8{display:flex}.aM{display:inline-flex}.aj{display:none}.at\[2px\]{height:2px}.a1t{height:2.25rem}.a1E{height:1.25rem}.a2d{height:2.5rem}.a2l{height:.75rem}.aV{height:.5rem}.at\[30px\]{height:30px}.at\[40px\]{height:40px}.a2Q{height:100%}.at\[50px\]{height:50px}.at\[75px\]{height:75px}.at\[70px\]{height:70px}.a3Z{height:1.75rem}.a40{height:1rem}.at\[18px\]{height:18px}.at\[1px\]{height:1px}.a7{width:100%}.af{width:15rem}.as\[30px\]{width:30px}.as\[250px\]{width:250px}.a1s{width:2.25rem}.a1D{width:1.25rem}.a2c{width:2.5rem}.a28{width:.75rem}.aU{width:.5rem}.as\[70px\]{width:70px}.a1u{width:3.5rem}.a2r{width:1.75rem}.a20{width:1rem}.a3h\[36px\]{min-width:36px}.ag{max-width:100%}.aB\[250px\]{max-width:250px}.aB\[530px\]{max-width:530px}.aB\[360px\]{max-width:360px}.aB\[570px\]{max-width:570px}.aB\[470px\]{max-width:470px}.aB\[40px\]{max-width:40px}.aB\[50px\]{max-width:50px}.aB\[85px\]{max-width:85px}.aB\[770px\]{max-width:770px}.aB\[655px\]{max-width:655px}.aB\[18px\]{max-width:18px}.aB\[500px\]{max-width:500px}.aB\[70px\]{max-width:70px}.aB\[60px\]{max-width:60px}.am\[-50\%\]{--tw-translate-y: -50%;transform:var(--tw-transform)}.aZ{--tw-rotate: 45deg;transform:var(--tw-transform)}.a4e{--tw-rotate: 180deg;transform:var(--tw-transform)}.a1r{cursor:pointer}.a3i{cursor:not-allowed}.a48{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.a3C{resize:none}.a2W{list-style-position:inside}.a2V{list-style-type:disc}.a1K{flex-wrap:wrap}.a9{align-items:center}.a1d{justify-content:flex-end}.a1x{justify-content:center}.ac{justify-content:space-between}.a2p{overflow:hidden}.ar{border-radius:.5rem}.a13{border-radius:.375rem}.a1c{border-radius:.25rem}.a1w{border-radius:9999px}.a3l{border-width:1px}.a2m{border-top-width:1px}.a2n{border-left-width:1px}.a2y{border-top-width:2px}.aX{border-right-width:2px}.a2B{border-bottom-width:1px}.a3b{border-right-width:1px}.a2o{--tw-border-opacity: 1;border-color:rgba(255,255,255,var(--tw-border-opacity))}.a2z{--tw-border-opacity: 1;border-color:rgba(149,156,177,var(--tw-border-opacity))}.a3m{border-color:transparent}.a3p{--tw-border-opacity: 1;border-color:rgba(74,108,247,var(--tw-border-opacity))}.a2C\[\.15\]{--tw-border-opacity: .15}.a2M{--tw-border-opacity: 0.1}.a3v{--tw-border-opacity: 0.25}.a49{--tw-border-opacity: 0.2}.a2{background-color:transparent}.av{--tw-bg-opacity: 1;background-color:rgba(29,33,68,var(--tw-bg-opacity))}.aw{--tw-bg-opacity: 1;background-color:rgba(255,255,255,var(--tw-bg-opacity))}.a1k{--tw-bg-opacity: 1;background-color:rgba(74,108,247,var(--tw-bg-opacity))}.a3f{--tw-bg-opacity: 1;background-color:rgba(149,156,177,var(--tw-bg-opacity))}.a1{--tw-bg-opacity: 1;background-color:rgba(9,14,52,var(--tw-bg-opacity))}.a3w\[\#1D2144\]{--tw-bg-opacity: 1;background-color:rgba(29,33,68,var(--tw-bg-opacity))}.a1Z{--tw-bg-opacity: 0.05}.a29{--tw-bg-opacity: 0.1}.a3g\[15\%\]{--tw-bg-opacity: 15%}.a3g\[3\%\]{--tw-bg-opacity: 3%}.a3J{--tw-bg-opacity: 0.75}.a26{fill:currentColor}.a1C{stroke:currentColor}.a2R{-o-object-fit:cover;object-fit:cover}.a2S{-o-object-position:center;object-position:center}.a14{padding:1rem}.a2Y{padding:2rem}.a36{padding:1.5rem}.a3t{padding:2.75rem}.a44{padding:.75rem}.a47{padding:3rem}.ae{padding-left:1rem;padding-right:1rem}.ai{padding-top:2rem;padding-bottom:2rem}.ap{padding-left:.75rem;padding-right:.75rem}.aq\[6px\]{padding-top:6px;padding-bottom:6px}.ax{padding-top:1.25rem;padding-bottom:1.25rem}.aK{padding-top:.5rem;padding-bottom:.5rem}.aq\[10px\]{padding-top:10px;padding-bottom:10px}.a1i{padding-top:.75rem;padding-bottom:.75rem}.a1j{padding-left:1.75rem;padding-right:1.75rem}.a1l{padding-left:2rem;padding-right:2rem}.a37{padding-left:1.25rem;padding-right:1.25rem}.a3q{padding-top:1rem;padding-bottom:1rem}.aL{padding-top:1.5rem;padding-bottom:1.5rem}.az{padding-left:1.5rem;padding-right:1.5rem}.a1m{padding-left:2.25rem;padding-right:2.25rem}.aq\[120px\]{padding-top:120px;padding-bottom:120px}.aq\[15px\]{padding-top:15px;padding-bottom:15px}.a42{padding-top:2.5rem;padding-bottom:2.5rem}.a1e{padding-right:4rem}.a1I\[180px\]{padding-top:180px}.a1J\[120px\]{padding-bottom:120px}.a1I\[100px\]{padding-top:100px}.a1I\[150px\]{padding-top:150px}.a2x{padding-right:.25rem}.a1I\[120px\]{padding-top:120px}.a1J\[100px\]{padding-bottom:100px}.a2L{padding-bottom:1rem}.a38{padding-bottom:1.5rem}.a39{padding-right:1.25rem}.a3d{padding-top:2rem}.a3u{padding-bottom:2.75rem}.a3A{padding-bottom:5rem}.a1J\[110px\]{padding-bottom:110px}.a1J\[50px\]{padding-bottom:50px}.a3H\[10px\]{padding-right:10px}.a3K{padding-top:4rem}.a3V{padding-bottom:2rem}.a1M{text-align:center}.aH{font-size:1rem;line-height:1.5rem}.a1b{font-size:.875rem;line-height:1.25rem}.a1O{font-size:1.875rem;line-height:2.25rem}.a27{font-size:1.25rem;line-height:1.75rem}.a2u{font-size:1.5rem;line-height:2rem}.a1T{font-size:1.125rem;line-height:1.75rem}.a3c{font-size:.75rem;line-height:1rem}.a1g{font-weight:700}.a1R{font-weight:500}.a2P{font-weight:600}.a2_{font-style:italic}.a1U{line-height:1.625}.a2D{line-height:1.25}.a3r{line-height:1.375}.a1h{--tw-text-opacity: 1;color:rgba(29,33,68,var(--tw-text-opacity))}.aI{--tw-text-opacity: 1;color:rgba(255,255,255,var(--tw-text-opacity))}.a1A{--tw-text-opacity: 1;color:rgba(9,14,52,var(--tw-text-opacity))}.a1S{--tw-text-opacity: 1;color:rgba(149,156,177,var(--tw-text-opacity))}.a24\[\#CED3F6\]{--tw-text-opacity: 1;color:rgba(206,211,246,var(--tw-text-opacity))}.a1W{--tw-text-opacity: 1;color:rgba(74,108,247,var(--tw-text-opacity))}.a3T{--tw-text-opacity: 1;color:rgba(251,176,64,var(--tw-text-opacity))}.a2T{text-decoration:underline}.a3x::-moz-placeholder{--tw-placeholder-opacity: 1;color:rgba(149,156,177,var(--tw-placeholder-opacity))}.a3x:-ms-input-placeholder{--tw-placeholder-opacity: 1;color:rgba(149,156,177,var(--tw-placeholder-opacity))}.a3x::placeholder{--tw-placeholder-opacity: 1;color:rgba(149,156,177,var(--tw-placeholder-opacity))}.aJ{opacity:.7}.a15{opacity:0}.aA{--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.a1n{--tw-shadow: 0px 5px 10px rgba(4, 10, 34, 0.2);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.a2k{--tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.a33{--tw-shadow: 0px 2px 3px rgba(7, 7, 77, 0.05);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.a3Y{--tw-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.a3o{outline:2px solid transparent;outline-offset:2px}.ao{--tw-ring-opacity: 1;--tw-ring-color: rgba(74, 108, 247, var(--tw-ring-opacity))}.a3Q{--tw-grayscale: grayscale(100%);filter:var(--tw-filter)}.a1p{transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}.a1a{transition-duration:300ms}.a2j{transition-timing-function:cubic-bezier(.4,0,.2,1)}body{font-family:inter,sans-serif}input[type=checkbox]:checked~label span svg{display:inline-flex}.sticky{position:fixed;z-index:9999;--tw-bg-opacity: 1;background-color:rgba(255,255,255,var(--tw-bg-opacity));--tw-bg-opacity: 0.8;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}.a0 .sticky{--tw-bg-opacity: 1;background-color:rgba(74,108,247,var(--tw-bg-opacity));--tw-bg-opacity: 0.2}.sticky{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:inset 0 -1px 0 0 rgba(0,0,0,.1)}.sticky .header-logo{padding-top:1.25rem;padding-bottom:1.25rem}@media(min-width:960px){.sticky .header-logo{padding-top:.5rem;padding-bottom:.5rem}}.sticky .menu-scroll.active{opacity:.7}.navbarTogglerActive>span:nth-child(1){top:7px;--tw-rotate: 45deg;transform:var(--tw-transform);transform:var(--tw-transform)}.navbarTogglerActive>span:nth-child(2){opacity:0}.navbarTogglerActive>span:nth-child(3){top:-8px;--tw-rotate: 135deg;transform:var(--tw-transform)}input#togglePlan:checked~.dot{--tw-translate-x: 100%;transform:var(--tw-transform)}input#checkboxLabel:checked~.box span{opacity:1}.after\:a3::after{content:"";position:absolute}.after\:a10::after{content:"";right:.25rem}.after\:al\/2::after{content:"";top:50%}.after\:a11\[-2px\]::after{content:"";margin-top:-2px}.after\:aV::after{content:"";height:.5rem}.after\:aU::after{content:"";width:.5rem}.after\:am\[-50\%\]::after{content:"";--tw-translate-y: -50%;transform:var(--tw-transform)}.after\:aZ::after{content:"";--tw-rotate: 45deg;transform:var(--tw-transform)}.after\:aW::after{content:"";border-bottom-width:2px}.after\:aX::after{content:"";border-right-width:2px}.after\:aY::after{content:"";border-color:currentColor}.hover\:aw:hover{--tw-bg-opacity: 1;background-color:rgba(255,255,255,var(--tw-bg-opacity))}.hover\:a1k:hover{--tw-bg-opacity: 1;background-color:rgba(74,108,247,var(--tw-bg-opacity))}.hover\:a1o:hover{--tw-bg-opacity: 0.9}.hover\:a2i:hover{--tw-bg-opacity: 0.8}.hover\:a31:hover{--tw-bg-opacity: 1}.hover\:a3G:hover{--tw-bg-opacity: 0.2}.hover\:a1W:hover{--tw-text-opacity: 1;color:rgba(74,108,247,var(--tw-text-opacity))}.hover\:aI:hover{--tw-text-opacity: 1;color:rgba(255,255,255,var(--tw-text-opacity))}.hover\:a2T:hover{text-decoration:underline}.hover\:aJ:hover{opacity:.7}.hover\:a17:hover{opacity:1}.hover\:a1n:hover{--tw-shadow: 0px 5px 10px rgba(4, 10, 34, 0.2);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:a3R:hover{--tw-grayscale: grayscale(0);filter:var(--tw-filter)}.focus\:a3p:focus{--tw-border-opacity: 1;border-color:rgba(74,108,247,var(--tw-border-opacity))}.focus\:a3y:focus{--tw-border-opacity: 1}.focus\:an:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\:aE:focus-visible{--tw-shadow: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.aG:hover .group-hover\:aJ{opacity:.7}.aG:hover .group-hover\:a17{opacity:1}.a0 .dark\:ah{display:block}.a0 .dark\:aj{display:none}.a0 .dark\:a2o{--tw-border-opacity: 1;border-color:rgba(255,255,255,var(--tw-border-opacity))}.a0 .dark\:a2M{--tw-border-opacity: 0.1}.a0 .dark\:a3v{--tw-border-opacity: 0.25}.a0 .dark\:a1{--tw-bg-opacity: 1;background-color:rgba(9,14,52,var(--tw-bg-opacity))}.a0 .dark\:aw{--tw-bg-opacity: 1;background-color:rgba(255,255,255,var(--tw-bg-opacity))}.a0 .dark\:av{--tw-bg-opacity: 1;background-color:rgba(29,33,68,var(--tw-bg-opacity))}.a0 .dark\:a3w\[\#242B51\]{--tw-bg-opacity: 1;background-color:rgba(36,43,81,var(--tw-bg-opacity))}.a0 .dark\:a1k{--tw-bg-opacity: 1;background-color:rgba(74,108,247,var(--tw-bg-opacity))}.a0 .dark\:a3w\[\#1D2144\]{--tw-bg-opacity: 1;background-color:rgba(29,33,68,var(--tw-bg-opacity))}.a0 .dark\:a1Z{--tw-bg-opacity: 0.05}.a0 .dark\:a29{--tw-bg-opacity: 0.1}.a0 .dark\:aI{--tw-text-opacity: 1;color:rgba(255,255,255,var(--tw-text-opacity))}.a0 .dark\:a1S{--tw-text-opacity: 1;color:rgba(149,156,177,var(--tw-text-opacity))}.a0 .dark\:a3E{opacity:.9}.a0 .dark\:a3S{opacity:.6}.a0 .dark\:a1n{--tw-shadow: 0px 5px 10px rgba(4, 10, 34, 0.2);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.a0 .dark\:hover\:a3G:hover{--tw-bg-opacity: 0.2}.a0 .dark\:hover\:a1W:hover{--tw-text-opacity: 1;color:rgba(74,108,247,var(--tw-text-opacity))}.a0 .dark\:hover\:aI:hover{--tw-text-opacity: 1;color:rgba(255,255,255,var(--tw-text-opacity))}.a0 .dark\:hover\:a17:hover{opacity:1}@media(min-width:540px){.sm\:a3O{margin-left:1rem;margin-right:1rem}.sm\:a32{margin-left:.75rem}.sm\:ah{display:block}.sm\:a8{display:flex}.sm\:a1_\/2{width:50%}.sm\:a1d{justify-content:flex-end}.sm\:a2Y{padding:2rem}.sm\:a3t{padding:2.75rem}.sm\:a3B\[55px\]{padding:55px}.sm\:a3B\[60px\]{padding:60px}.sm\:a3L{padding-left:2.5rem;padding-right:2.5rem}.sm\:a2H{text-align:right}.sm\:a1P{font-size:2.25rem;line-height:2.5rem}.sm\:a1T{font-size:1.125rem;line-height:1.75rem}.sm\:a1O{font-size:1.875rem;line-height:2.25rem}.sm\:a2u{font-size:1.5rem;line-height:2rem}.sm\:a1U{line-height:1.625}.sm\:a2D{line-height:1.25}}@media(min-width:720px){.md\:a2t{margin-bottom:0}.md\:ah{display:block}.md\:a1v{height:3.5rem}.md\:a1G{height:1.5rem}.md\:a1u{width:3.5rem}.md\:a1F{width:1.5rem}.md\:a1_\/2{width:50%}.md\:a2q\/12{width:66.666667%}.md\:a20\/12{width:33.333333%}.md\:aU\/3{width:66.666667%}.md\:a1d{justify-content:flex-end}.md\:a2Z{padding:2.25rem}.md\:a1m{padding-left:2.25rem;padding-right:2.25rem}.md\:ai{padding-top:2rem;padding-bottom:2rem}.md\:az{padding-left:1.5rem;padding-right:1.5rem}.md\:aq\[40px\]{padding-top:40px;padding-bottom:40px}.md\:a3M\[50px\]{padding-left:50px;padding-right:50px}.md\:a1I\[150px\]{padding-top:150px}.md\:a1J\[120px\]{padding-bottom:120px}.md\:a24\[45px\]{font-size:45px}.md\:a3D{font-size:3rem;line-height:1}.md\:a27{font-size:1.25rem;line-height:1.75rem}.md\:a1T{font-size:1.125rem;line-height:1.75rem}.md\:a2D{line-height:1.25}.md\:a1U{line-height:1.625}}@media(min-width:960px){.lg\:a16{visibility:hidden}.lg\:aD{position:static}.lg\:a3{position:absolute}.lg\:a12\[110\%\]{top:110%}.lg\:aP{margin-right:0}.lg\:aQ{margin-left:2rem}.lg\:a2t{margin-bottom:0}.lg\:a2J{margin-left:0}.lg\:a3k{margin-top:0}.lg\:a30{margin-bottom:.75rem}.lg\:a2v{margin-bottom:1.25rem}.lg\:ah{display:block}.lg\:a8{display:flex}.lg\:aM{display:inline-flex}.lg\:aj{display:none}.lg\:a7{width:100%}.lg\:a20\/12{width:33.333333%}.lg\:aU\/12{width:16.666667%}.lg\:a2r\/12{width:58.333333%}.lg\:a1D\/12{width:41.666667%}.lg\:a1_\/2{width:50%}.lg\:a2q\/12{width:66.666667%}.lg\:a1_\/3{width:33.333333%}.lg\:ag{max-width:100%}.lg\:aB\[130px\]{max-width:130px}.lg\:a2{background-color:transparent}.lg\:a2Y{padding:2rem}.lg\:a3t{padding:2.75rem}.lg\:ay{padding-top:0;padding-bottom:0}.lg\:ae{padding-left:1rem;padding-right:1rem}.lg\:aL{padding-top:1.5rem;padding-bottom:1.5rem}.lg\:aN{padding-left:0;padding-right:0}.lg\:az{padding-left:1.5rem;padding-right:1.5rem}.lg\:a1l{padding-left:2rem;padding-right:2rem}.lg\:a37{padding-left:1.25rem;padding-right:1.25rem}.lg\:aS{padding-left:0}.lg\:aT{padding-right:1rem}.lg\:a1f{padding-right:0}.lg\:a2I{text-align:left}.lg\:a2H{text-align:right}.lg\:a1P{font-size:2.25rem;line-height:2.5rem}.lg\:a27{font-size:1.25rem;line-height:1.75rem}.lg\:aH{font-size:1rem;line-height:1.5rem}.lg\:a2u{font-size:1.5rem;line-height:2rem}.lg\:a2D{line-height:1.25}.lg\:a1U{line-height:1.625}.lg\:a15{opacity:0}.lg\:aE{--tw-shadow: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.lg\:aA{--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.lg\:after\:a_::after{content:"";right:0}.aG:hover .lg\:group-hover\:a18{visibility:visible}.aG:hover .lg\:group-hover\:aC{top:100%}.a0 .lg\:dark\:a2{background-color:transparent}}@media(min-width:1140px){.xl\:a3P{margin-left:1.5rem;margin-right:1.5rem}.xl\:aR{margin-left:3rem}.xl\:a2A{margin-right:.75rem}.xl\:a2t{margin-bottom:0}.xl\:a8{display:flex}.xl\:a1D\/12{width:41.666667%}.xl\:aU\/12{width:16.666667%}.xl\:a28\/12{width:25%}.xl\:a1_\/2{width:50%}.xl\:a1_\/3{width:33.333333%}.xl\:aB\[150px\]{max-width:150px}.xl\:a2Z{padding:2.25rem}.xl\:a3t{padding:2.75rem}.xl\:a3B\[55px\]{padding:55px}.xl\:a3B\[50px\]{padding:50px}.xl\:az{padding-left:1.5rem;padding-right:1.5rem}.xl\:a1m{padding-left:2.25rem;padding-right:2.25rem}.xl\:ai{padding-top:2rem;padding-bottom:2rem}.xl\:a37{padding-left:1.25rem;padding-right:1.25rem}.xl\:a1l{padding-left:2rem;padding-right:2rem}.xl\:a3a{padding-right:.75rem}.xl\:a1I\[180px\]{padding-top:180px}.xl\:a1J\[160px\]{padding-bottom:160px}.xl\:a24\[45px\]{font-size:45px}.xl\:a2u{font-size:1.5rem;line-height:2rem}.xl\:a1T{font-size:1.125rem;line-height:1.75rem}.xl\:a1O{font-size:1.875rem;line-height:2.25rem}.xl\:a2D{line-height:1.25}.xl\:a1U{line-height:1.625}}@media(min-width:1320px){.\32xl\:aO{margin-left:2rem;margin-right:2rem}.\32xl\:a2O{margin-right:1.25rem}.\32xl\:aB\[160px\]{max-width:160px}.\32xl\:a2Y{padding:2rem}.\32xl\:aq\[60px\]{padding-top:60px;padding-bottom:60px}.\32xl\:a3M\[70px\]{padding-left:70px;padding-right:70px}.\32xl\:a39{padding-right:1.25rem}.\32xl\:a1I\[210px\]{padding-top:210px}.\32xl\:a1J\[200px\]{padding-bottom:200px}}
3. Now guy’s we need to add below code inside our project/src/app/header/header.component.html file:
<header class="
header
a2
a3
a4
a5
a6
a7
a8
a9
">
<div class="aa">
<div class="
a8 ab[-16px] a9 ac ad
">
<div class="ae af ag">
<a href="#" class="a7 ah ai header-logo">
<img src="assets/images/logo-2.svg" alt="logo" class="a7 dark:aj" />
<img src="assets/images/logo.svg" alt="logo" class="a7 aj dark:ah" />
</a>
</div>
<div class="a8 ae ac a9 a7">
<div>
<button id="navbarToggler" aria-label="Mobile Menu" class="
ah
a3
ak
al/2
am[-50%]
lg:aj
focus:an
ao ap aq[6px] ar
">
<span class="
ad
as[30px]
at[2px]
au[6px]
ah
av
dark:aw
"></span>
<span class="
ad
as[30px]
at[2px]
au[6px]
ah
av
dark:aw
"></span>
<span class="
ad
as[30px]
at[2px]
au[6px]
ah
av
dark:aw
"></span>
</button>
<nav id="navbarCollapse" class="
a3 ax
lg:ay lg:ae
xl:az
aw
dark:av
lg:dark:a2 lg:a2
aA ar aB[250px] a7
lg:ag lg:a7
ak aC aj
lg:ah lg:aD lg:aE
">
<ul class="aF lg:a8">
<li class="ad aG">
<a href="#home" class="
menu-scroll
aH
text-dark
dark:aI
group-hover:aJ
aK
lg:aL lg:aM lg:aN
a8 aO
lg:aP
">
Home
</a>
</li>
<li class="ad aG">
<a href="#about" class="
menu-scroll
aH
text-dark
dark:aI
group-hover:aJ
aK
lg:aL lg:aM lg:aN
a8 aO
lg:aP lg:aQ
xl:aR
">
About
</a>
</li>
<li class="ad aG">
<a href="#pricing" class="
menu-scroll
aH
text-dark
dark:aI
group-hover:aJ
aK
lg:aL lg:aM lg:aN
a8 aO
lg:aP lg:aQ
xl:aR
">
Pricing
</a>
</li>
<li class="ad aG">
<a href="#contact" class="
menu-scroll
aH
text-dark
dark:aI
group-hover:aJ
aK
lg:aL lg:aM lg:aN
a8 aO
lg:aP lg:aQ
xl:aR
">
Support
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header>
4. Now guy’s we need to add below code inside our project/src/app/footer/footer.component.html file:
<footer class="
ad a1H a1k a1Z a1I[100px]
wow
fadeInUp
" data-wow-delay=".1s">
<div class="aa">
<div class="a8 a1K ab[-16px]">
<div class="a7 md:a1_/2 lg:a20/12 xl:a1D/12 ae">
<div class="a21 aB[360px]">
<a href="#" class="a22 a23">
<img src="assets/images/logo-2.svg" alt="logo" class="a7 dark:aj" />
<img src="assets/images/logo.svg" alt="logo" class="a7 aj dark:ah" />
</a>
<p class="
a1S
aH
a1R
a46
a1N
">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
lobortis.
</p>
<div class="a8 a9">
<a href="javascript:void(0)" aria-label="social-link" class="a24[#CED3F6] hover:a1W a25">
<svg width="9" height="18" viewBox="0 0 9 18" class="a26">
<path d="M8.13643 7H6.78036H6.29605V6.43548V4.68548V4.12097H6.78036H7.79741C8.06378 4.12097 8.28172 3.89516 8.28172 3.55645V0.564516C8.28172 0.254032 8.088 0 7.79741 0H6.02968C4.11665 0 2.78479 1.58064 2.78479 3.92339V6.37903V6.94355H2.30048H0.65382C0.314802 6.94355 0 7.25403 0 7.70564V9.7379C0 10.1331 0.266371 10.5 0.65382 10.5H2.25205H2.73636V11.0645V16.7379C2.73636 17.1331 3.00273 17.5 3.39018 17.5H5.66644C5.81174 17.5 5.93281 17.4153 6.02968 17.3024C6.12654 17.1895 6.19919 16.9919 6.19919 16.8226V11.0927V10.5282H6.70771H7.79741C8.11222 10.5282 8.35437 10.3024 8.4028 9.96371V9.93548V9.90726L8.74182 7.95968C8.76604 7.7621 8.74182 7.53629 8.59653 7.31048C8.54809 7.16935 8.33016 7.02823 8.13643 7Z" />
</svg>
</a>
<a href="javascript:void(0)" aria-label="social-link" class="a24[#CED3F6] hover:a1W a25">
<svg width="19" height="14" viewBox="0 0 19 14" class="a26">
<path d="M16.3024 2.26027L17.375 1.0274C17.6855 0.693493 17.7702 0.436644 17.7984 0.308219C16.9516 0.770548 16.1613 0.924658 15.6532 0.924658H15.4556L15.3427 0.821918C14.6653 0.282534 13.8185 0 12.9153 0C10.9395 0 9.3871 1.48973 9.3871 3.21062C9.3871 3.31336 9.3871 3.46747 9.41532 3.57021L9.5 4.0839L8.90726 4.05822C5.29435 3.95548 2.33065 1.13014 1.85081 0.642123C1.06048 1.92637 1.5121 3.15925 1.99194 3.92979L2.95161 5.36815L1.42742 4.5976C1.45565 5.67637 1.90726 6.52397 2.78226 7.14041L3.54435 7.65411L2.78226 7.93665C3.2621 9.24658 4.33468 9.78596 5.125 9.99144L6.16935 10.2483L5.18145 10.8647C3.60081 11.8921 1.625 11.8151 0.75 11.738C2.52823 12.8682 4.64516 13.125 6.1129 13.125C7.21371 13.125 8.03226 13.0223 8.22984 12.9452C16.1331 11.25 16.5 4.82877 16.5 3.54452V3.36473L16.6694 3.26199C17.629 2.44007 18.0242 2.00342 18.25 1.74658C18.1653 1.77226 18.0524 1.82363 17.9395 1.84932L16.3024 2.26027Z" />
</svg>
</a>
<a href="javascript:void(0)" aria-label="social-link" class="a24[#CED3F6] hover:a1W a25">
<svg width="18" height="14" viewBox="0 0 18 14" class="a26">
<path d="M17.5058 2.07119C17.3068 1.2488 16.7099 0.609173 15.9423 0.395963C14.5778 7.26191e-08 9.0627 0 9.0627 0C9.0627 0 3.54766 7.26191e-08 2.18311 0.395963C1.41555 0.609173 0.818561 1.2488 0.619565 2.07119C0.25 3.56366 0.25 6.60953 0.25 6.60953C0.25 6.60953 0.25 9.68585 0.619565 11.1479C0.818561 11.9703 1.41555 12.6099 2.18311 12.8231C3.54766 13.2191 9.0627 13.2191 9.0627 13.2191C9.0627 13.2191 14.5778 13.2191 15.9423 12.8231C16.7099 12.6099 17.3068 11.9703 17.5058 11.1479C17.8754 9.68585 17.8754 6.60953 17.8754 6.60953C17.8754 6.60953 17.8754 3.56366 17.5058 2.07119ZM7.30016 9.44218V3.77687L11.8771 6.60953L7.30016 9.44218Z" />
</svg>
</a>
<a href="javascript:void(0)" aria-label="social-link" class="a24[#CED3F6] hover:a1W a25">
<svg width="17" height="16" viewBox="0 0 17 16" class="a26">
<path d="M15.2196 0H1.99991C1.37516 0 0.875366 0.497491 0.875366 1.11936V14.3029C0.875366 14.8999 1.37516 15.4222 1.99991 15.4222H15.1696C15.7943 15.4222 16.2941 14.9247 16.2941 14.3029V1.09448C16.3441 0.497491 15.8443 0 15.2196 0ZM5.44852 13.1089H3.17444V5.7709H5.44852V13.1089ZM4.29899 4.75104C3.54929 4.75104 2.97452 4.15405 2.97452 3.43269C2.97452 2.71133 3.57428 2.11434 4.29899 2.11434C5.02369 2.11434 5.62345 2.71133 5.62345 3.43269C5.62345 4.15405 5.07367 4.75104 4.29899 4.75104ZM14.07 13.1089H11.796V9.55183C11.796 8.7061 11.771 7.58674 10.5964 7.58674C9.39693 7.58674 9.222 8.53198 9.222 9.47721V13.1089H6.94792V5.7709H9.17202V6.79076H9.19701C9.52188 6.19377 10.2466 5.59678 11.3711 5.59678C13.6952 5.59678 14.12 7.08925 14.12 9.12897V13.1089H14.07Z" />
</svg>
</a>
</div>
</div>
</div>
<div class="
a7
sm:a1_/2
md:a1_/2
lg:aU/12
xl:aU/12
ae
">
<div class="a21">
<h2 class="
a1g a1A
dark:aI
a27 a1V
">
Useful Links
</h2>
<ul>
<li>
<a href="javascript:void(0)" class="
aH
a1R
a22
a1S
a1Q
hover:a1W
">
Blog
</a>
</li>
<li>
<a href="javascript:void(0)" class="
aH
a1R
a22
a1S
a1Q
hover:a1W
">
Pricing
</a>
</li>
<li>
<a href="javascript:void(0)" class="
aH
a1R
a22
a1S
a1Q
hover:a1W
">
About
</a>
</li>
</ul>
</div>
</div>
<div class="
a7
sm:a1_/2
md:a1_/2
lg:aU/12
xl:aU/12
ae
">
<div class="a21">
<h2 class="
a1g a1A
dark:aI
a27 a1V
">
Terms
</h2>
<ul>
<li>
<a href="javascript:void(0)" class="
aH
a1R
a22
a1S
a1Q
hover:a1W
">
TOS
</a>
</li>
<li>
<a href="javascript:void(0)" class="
aH
a1R
a22
a1S
a1Q
hover:a1W
">
Privacy Policy
</a>
</li>
<li>
<a href="javascript:void(0)" class="
aH
a1R
a22
a1S
a1Q
hover:a1W
">
Refund Policy
</a>
</li>
</ul>
</div>
</div>
<div class="a7 md:a1_/2 lg:a20/12 xl:a28/12 ae">
<div class="a21">
<h2 class="
a1g a1A
dark:aI
a27 a1V
">
Support & Help
</h2>
<ul>
<li>
<a href="javascript:void(0)" class="
aH
a1R
a22
a1S
a1Q
hover:a1W
">
Open Support Ticket
</a>
</li>
<li>
<a href="javascript:void(0)" class="
aH
a1R
a22
a1S
a1Q
hover:a1W
">
Terms of Use
</a>
</li>
<li>
<a href="javascript:void(0)" class="
aH
a1R
a22
a1S
a1Q
hover:a1W
">
About
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="ai a1k a29">
<div class="aa">
<p class="
a1S
dark:aI
aH a1M
">
© Crafted by Therichpost for You!
</p>
</div>
</div>
<div class="a3 a_ a2a a1Y[-1]">
<svg width="55" height="99" viewBox="0 0 55 99" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle opacity="0.8" cx="49.5" cy="49.5" r="49.5" fill="#959CB1" />
<mask id="mask0_94:899" style="mask-type: alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="99" height="99">
<circle opacity="0.8" cx="49.5" cy="49.5" r="49.5" fill="#4A6CF7" />
</mask>
<g mask="url(#mask0_94:899)">
<circle opacity="0.8" cx="49.5" cy="49.5" r="49.5" fill="url(#paint0_radial_94:899)" />
<g opacity="0.8" filter="url(#filter0_f_94:899)">
<circle cx="53.8676" cy="26.2061" r="20.3824" fill="white" />
</g>
</g>
<defs>
<filter id="filter0_f_94:899" x="12.4852" y="-15.1763" width="82.7646" height="82.7646" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="10.5" result="effect1_foregroundBlur_94:899" />
</filter>
<radialGradient id="paint0_radial_94:899" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(49.5 49.5) rotate(90) scale(53.1397)">
<stop stop-opacity="0.47" />
<stop offset="1" stop-opacity="0" />
</radialGradient>
</defs>
</svg>
</div>
<div class="a3 a5 a2b a1Y[-1]">
<svg width="79" height="94" viewBox="0 0 79 94" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect opacity="0.3" x="-41" y="26.9426" width="66.6675" height="66.6675" transform="rotate(-22.9007 -41 26.9426)" fill="url(#paint0_linear_94:889)" />
<rect x="-41" y="26.9426" width="66.6675" height="66.6675" transform="rotate(-22.9007 -41 26.9426)" stroke="url(#paint1_linear_94:889)" stroke-width="0.7" />
<path opacity="0.3" d="M50.5215 7.42229L20.325 1.14771L46.2077 62.3249L77.1885 68.2073L50.5215 7.42229Z" fill="url(#paint2_linear_94:889)" />
<path d="M50.5215 7.42229L20.325 1.14771L46.2077 62.3249L76.7963 68.2073L50.5215 7.42229Z" stroke="url(#paint3_linear_94:889)" stroke-width="0.7" />
<path opacity="0.3" d="M17.9721 93.3057L-14.9695 88.2076L46.2077 62.325L77.1885 68.2074L17.9721 93.3057Z" fill="url(#paint4_linear_94:889)" />
<path d="M17.972 93.3057L-14.1852 88.2076L46.2077 62.325L77.1884 68.2074L17.972 93.3057Z" stroke="url(#paint5_linear_94:889)" stroke-width="0.7" />
<defs>
<linearGradient id="paint0_linear_94:889" x1="-41" y1="21.8445" x2="36.9671" y2="59.8878" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" stop-opacity="0.62" />
<stop offset="1" stop-color="#4A6CF7" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint1_linear_94:889" x1="25.6675" y1="95.9631" x2="-42.9608" y2="20.668" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" stop-opacity="0" />
<stop offset="1" stop-color="#4A6CF7" stop-opacity="0.51" />
</linearGradient>
<linearGradient id="paint2_linear_94:889" x1="20.325" y1="-3.98039" x2="90.6248" y2="25.1062" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" stop-opacity="0.62" />
<stop offset="1" stop-color="#4A6CF7" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint3_linear_94:889" x1="18.3642" y1="-1.59742" x2="113.9" y2="80.6826" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" stop-opacity="0" />
<stop offset="1" stop-color="#4A6CF7" stop-opacity="0.51" />
</linearGradient>
<linearGradient id="paint4_linear_94:889" x1="61.1098" y1="62.3249" x2="-8.82468" y2="58.2156" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" stop-opacity="0.62" />
<stop offset="1" stop-color="#4A6CF7" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint5_linear_94:889" x1="65.4236" y1="65.0701" x2="24.0178" y2="41.6598" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" stop-opacity="0" />
<stop offset="1" stop-color="#4A6CF7" stop-opacity="0.51" />
</linearGradient>
</defs>
</svg>
</div>
</footer>
5. Now guy’s we need to add below code inside our project/src/app/home/home.component.html file:
<section id="home" class="
ad a1H a1I[120px] a1J[110px]
md:a1I[150px] md:a1J[120px]
xl:a1I[180px] xl:a1J[160px]
2xl:a1I[210px] 2xl:a1J[200px]
">
<div class="aa">
<div class="a8 a1K ab[-16px]">
<div class="a7 ae">
<div class="a1L aB[570px] a1M wow fadeInUp" data-wow-delay=".2s">
<h1 class="
a1A
dark:aI
a1g a1O
sm:a1P
md:a3D
a2D
sm:a2D
md:a2D
a2v
">
Startup Focused Angular + Tailwind CSS Template
</h1>
<p class="
a1R a1T
md:a27
a1U
md:a1U
a1S
dark:aI dark:a3E
a2s
">
A Complete Tailwind CSS Web Template Crafted for - Startup,
SaaS, Business, Software and Agencies. Comes with high-quality
design and everything you need!
</p>
<div class="a8 a9 a1x">
<a href="#features" class="
aH
a2P
aI
a1k
a3q
a1l
hover:a2i
a3F
a13
a1p
a1a
a2j
">
Get Started
</a>
<a href="#about" class="
aH
a2P
a1A
a1
a29
dark:aI dark:aw dark:a29
a3q a1l
hover:a3G
dark:hover:a3G
a3F
a13
a1p
a1a
a2j
">
Learn More
</a>
</div>
</div>
</div>
</div>
</div>
<div class="a3 a4 a_ a1Y[-1]">
<svg width="450" height="556" viewBox="0 0 450 556" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="277" cy="63" r="225" fill="url(#paint0_linear_25:217)" />
<circle cx="17.9997" cy="182" r="18" fill="url(#paint1_radial_25:217)" />
<circle cx="76.9997" cy="288" r="34" fill="url(#paint2_radial_25:217)" />
<circle cx="325.486" cy="302.87" r="180" transform="rotate(-37.6852 325.486 302.87)" fill="url(#paint3_linear_25:217)" />
<circle opacity="0.8" cx="184.521" cy="315.521" r="132.862" transform="rotate(114.874 184.521 315.521)" stroke="url(#paint4_linear_25:217)" />
<circle opacity="0.8" cx="356" cy="290" r="179.5" transform="rotate(-30 356 290)" stroke="url(#paint5_linear_25:217)" />
<circle opacity="0.8" cx="191.659" cy="302.659" r="133.362" transform="rotate(133.319 191.659 302.659)" fill="url(#paint6_linear_25:217)" />
<defs>
<linearGradient id="paint0_linear_25:217" x1="-54.5003" y1="-178" x2="222" y2="288" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" />
<stop offset="1" stop-color="#4A6CF7" stop-opacity="0" />
</linearGradient>
<radialGradient id="paint1_radial_25:217" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(17.9997 182) rotate(90) scale(18)">
<stop offset="0.145833" stop-color="#4A6CF7" stop-opacity="0" />
<stop offset="1" stop-color="#4A6CF7" stop-opacity="0.08" />
</radialGradient>
<radialGradient id="paint2_radial_25:217" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(76.9997 288) rotate(90) scale(34)">
<stop offset="0.145833" stop-color="#4A6CF7" stop-opacity="0" />
<stop offset="1" stop-color="#4A6CF7" stop-opacity="0.08" />
</radialGradient>
<linearGradient id="paint3_linear_25:217" x1="226.775" y1="-66.1548" x2="292.157" y2="351.421" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" />
<stop offset="1" stop-color="#4A6CF7" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint4_linear_25:217" x1="184.521" y1="182.159" x2="184.521" y2="448.882" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" />
<stop offset="1" stop-color="white" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint5_linear_25:217" x1="356" y1="110" x2="356" y2="470" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" />
<stop offset="1" stop-color="white" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint6_linear_25:217" x1="118.524" y1="29.2497" x2="166.965" y2="338.63" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" />
<stop offset="1" stop-color="#4A6CF7" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
</div>
<div class="a3 a1X a5 a1Y[-1]">
<svg width="364" height="201" viewBox="0 0 364 201" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.88928 72.3303C33.6599 66.4798 101.397 64.9086 150.178 105.427C211.155 156.076 229.59 162.093 264.333 166.607C299.076 171.12 337.718 183.657 362.889 212.24" stroke="url(#paint0_linear_25:218)" />
<path d="M-22.1107 72.3303C5.65989 66.4798 73.3965 64.9086 122.178 105.427C183.155 156.076 201.59 162.093 236.333 166.607C271.076 171.12 309.718 183.657 334.889 212.24" stroke="url(#paint1_linear_25:218)" />
<path d="M-53.1107 72.3303C-25.3401 66.4798 42.3965 64.9086 91.1783 105.427C152.155 156.076 170.59 162.093 205.333 166.607C240.076 171.12 278.718 183.657 303.889 212.24" stroke="url(#paint2_linear_25:218)" />
<path d="M-98.1618 65.0889C-68.1416 60.0601 4.73364 60.4882 56.0734 102.431C120.248 154.86 139.905 161.419 177.137 166.956C214.37 172.493 255.575 186.165 281.856 215.481" stroke="url(#paint3_linear_25:218)" />
<circle opacity="0.8" cx="214.505" cy="60.5054" r="49.7205" transform="rotate(-13.421 214.505 60.5054)" stroke="url(#paint4_linear_25:218)" />
<circle cx="220" cy="63" r="43" fill="url(#paint5_radial_25:218)" />
<defs>
<linearGradient id="paint0_linear_25:218" x1="184.389" y1="69.2405" x2="184.389" y2="212.24" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" stop-opacity="0" />
<stop offset="1" stop-color="#4A6CF7" />
</linearGradient>
<linearGradient id="paint1_linear_25:218" x1="156.389" y1="69.2405" x2="156.389" y2="212.24" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" stop-opacity="0" />
<stop offset="1" stop-color="#4A6CF7" />
</linearGradient>
<linearGradient id="paint2_linear_25:218" x1="125.389" y1="69.2405" x2="125.389" y2="212.24" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" stop-opacity="0" />
<stop offset="1" stop-color="#4A6CF7" />
</linearGradient>
<linearGradient id="paint3_linear_25:218" x1="93.8507" y1="67.2674" x2="89.9278" y2="210.214" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" stop-opacity="0" />
<stop offset="1" stop-color="#4A6CF7" />
</linearGradient>
<linearGradient id="paint4_linear_25:218" x1="214.505" y1="10.2849" x2="212.684" y2="99.5816" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" />
<stop offset="1" stop-color="#4A6CF7" stop-opacity="0" />
</linearGradient>
<radialGradient id="paint5_radial_25:218" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(220 63) rotate(90) scale(43)">
<stop offset="0.145833" stop-color="white" stop-opacity="0" />
<stop offset="1" stop-color="white" stop-opacity="0.08" />
</radialGradient>
</defs>
</svg>
</div>
</section>
<section id="features" class="a1k a3g[3%] a1I[120px] a1J[50px]">
<div class="aa">
<div class="a8 a1K ab[-16px]">
<div class="a7 ae">
<div class="
a1L aB[570px] a1M a3s[100px]
wow
fadeInUp
" data-wow-delay=".1s">
<h2 class="
a1A
dark:aI
a1g a1O
sm:a1P
md:a24[45px]
a1Q
">
Main Features
</h2>
<p class="
a1S aH
md:a1T
a1U
md:a1U
">
There are many variations of passages of Lorem Ipsum available
but the majority have suffered alteration in some form.
</p>
</div>
</div>
</div>
<div class="a8 a1K ab[-16px]">
<div class="a7 md:a1_/2 lg:a1_/3 ae">
<div class="a3s[70px] wow fadeInUp" data-wow-delay=".15s">
<div class="
as[70px]
at[70px]
a8
a9
a1x
a13
a1k
a29
a1V
a1W
">
<svg width="40" height="41" viewBox="0 0 40 41" class="a26">
<path opacity="0.5" d="M37.7778 40.2223H24C22.8954 40.2223 22 39.3268 22 38.2223V20.0001C22 18.8955 22.8954 18.0001 24 18.0001H37.7778C38.8823 18.0001 39.7778 18.8955 39.7778 20.0001V38.2223C39.7778 39.3268 38.8823 40.2223 37.7778 40.2223Z" />
<path d="M23.2222 0C22.6699 0 22.2222 0.447715 22.2222 1V12.3333C22.2222 12.8856 22.6699 13.3333 23.2222 13.3333H39C39.5523 13.3333 40 12.8856 40 12.3333V0.999999C40 0.447714 39.5523 0 39 0H23.2222ZM0 39C0 39.5523 0.447715 40 1 40H16.7778C17.3301 40 17.7778 39.5523 17.7778 39V27.6667C17.7778 27.1144 17.3301 26.6667 16.7778 26.6667H1C0.447716 26.6667 0 27.1144 0 27.6667V39ZM0 21.2222C0 21.7745 0.447715 22.2222 1 22.2222H16.7778C17.3301 22.2222 17.7778 21.7745 17.7778 21.2222V0.999999C17.7778 0.447714 17.3301 0 16.7778 0H1C0.447716 0 0 0.447715 0 1V21.2222Z" />
</svg>
</div>
<h3 class="
a1g a1A
dark:aI
a27
sm:a2u
lg:a27
xl:a2u
a2v
">
Crafted for Startups
</h3>
<p class="
a1S
aH
a1U
a1R
a3H[10px]
">
Tuae nam ex similique incidunt expedita exerci tationem
laudantium. Repellendus quisquam numquam perferendis earum
sapiente non tempore? Fugit repellat ut maiores.
</p>
</div>
</div>
<div class="a7 md:a1_/2 lg:a1_/3 ae">
<div class="a3s[70px] wow fadeInUp" data-wow-delay=".2s">
<div class="
as[70px]
at[70px]
a8
a9
a1x
a13
a1k
a29
a1V
a1W
">
<svg width="40" height="40" viewBox="0 0 40 40" class="a26">
<path opacity="0.5" d="M20.5914 34.2584C20.2394 34.5172 19.7603 34.5175 19.408 34.2593L4.19163 23.1079C3.8395 22.8498 3.36065 22.85 3.00873 23.1084L1.09802 24.5111C0.553731 24.9107 0.553731 25.7237 1.09802 26.1233L19.4082 39.5655C19.7604 39.824 20.2396 39.824 20.5918 39.5655L38.9029 26.1226C39.4469 25.7232 39.4473 24.9107 38.9036 24.5109L36.9701 23.0889C36.6177 22.8298 36.1378 22.8297 35.7854 23.0888L20.5914 34.2584Z" />
<path d="M19.408 28.931C19.7603 29.1896 20.2396 29.1894 20.5918 28.9306L36.3556 17.3466L38.8979 15.4883C39.4437 15.0894 39.4446 14.275 38.8996 13.8749L20.5918 0.43445C20.2396 0.175911 19.7604 0.175913 19.4082 0.434452L1.09706 13.8774C0.553051 14.2767 0.552712 15.0892 1.09638 15.4891L3.62222 17.3466L19.408 28.931Z" />
</svg>
</div>
<h3 class="
a1g a1A
dark:aI
a27
sm:a2u
lg:a27
xl:a2u
a2v
">
High-quality Design
</h3>
<p class="
a1S
aH
a1U
a1R
a3H[10px]
">
Tuae nam ex similique incidunt expedita exerci tationem
laudantium. Repellendus quisquam numquam perferendis earum
sapiente non tempore? Fugit repellat ut maiores.
</p>
</div>
</div>
<div class="a7 md:a1_/2 lg:a1_/3 ae">
<div class="a3s[70px] wow fadeInUp" data-wow-delay=".25s">
<div class="
as[70px]
at[70px]
a8
a9
a1x
a13
a1k
a29
a1V
a1W
">
<svg width="40" height="40" viewBox="0 0 40 40" class="a26">
<path opacity="0.5" d="M20 30C22.75 30 25 32.25 25 35C25 37.75 22.75 40 20 40C17.25 40 15 37.75 15 35C15 32.25 17.25 30 20 30ZM35 30C37.75 30 40 32.25 40 35C40 37.75 37.75 40 35 40C32.25 40 30 37.75 30 35C30 32.25 32.25 30 35 30ZM35 15C37.75 15 40 17.25 40 20C40 22.75 37.75 25 35 25C32.25 25 30 22.75 30 20C30 17.25 32.25 15 35 15Z" />
<path d="M20 15C22.75 15 25 17.25 25 20C25 22.75 22.75 25 20 25C17.25 25 15 22.75 15 20C15 17.25 17.25 15 20 15ZM20 0C22.75 0 25 2.25 25 5C25 7.75 22.75 10 20 10C17.25 10 15 7.75 15 5C15 2.25 17.25 0 20 0ZM5 30C7.75 30 10 32.25 10 35C10 37.75 7.75 40 5 40C2.25 40 0 37.75 0 35C0 32.25 2.25 30 5 30ZM5 15C7.75 15 10 17.25 10 20C10 22.75 7.75 25 5 25C2.25 25 0 22.75 0 20C0 17.25 2.25 15 5 15ZM5 0C7.75 0 10 2.25 10 5C10 7.75 7.75 10 5 10C2.25 10 0 7.75 0 5C0 2.25 2.25 0 5 0ZM35 0C37.75 0 40 2.25 40 5C40 7.75 37.75 10 35 10C32.25 10 30 7.75 30 5C30 2.25 32.25 0 35 0Z" />
</svg>
</div>
<h3 class="
a1g a1A
dark:aI
a27
sm:a2u
lg:a27
xl:a2u
a2v
">
All Essential Components
</h3>
<p class="
a1S
aH
a1U
a1R
a3H[10px]
">
Tuae nam ex similique incidunt expedita exerci tationem
laudantium. Repellendus quisquam numquam perferendis earum
sapiente non tempore? Fugit repellat ut maiores.
</p>
</div>
</div>
<div class="a7 md:a1_/2 lg:a1_/3 ae">
<div class="a3s[70px] wow fadeInUp" data-wow-delay=".1s">
<div class="
as[70px]
at[70px]
a8
a9
a1x
a13
a1k
a29
a1V
a1W
">
<svg width="40" height="42" viewBox="0 0 40 42" class="a26">
<path opacity="0.5" d="M31.8943 25.3303C34.1233 25.3303 36.1497 26.1409 37.5682 27.762L39.1464 26.1839C39.4614 25.8689 39.9999 26.092 39.9999 26.5374V32.936C39.9999 33.2121 39.7761 33.436 39.4999 33.436H33.1014C32.6559 33.436 32.4328 32.8974 32.7478 32.5825L35.5418 29.7885C34.5286 28.9779 33.3128 28.37 31.8943 28.37C29.0573 28.37 26.8282 30.599 26.8282 33.436C26.8282 36.273 29.0573 38.5021 31.8943 38.5021C33.3549 38.5021 34.6511 37.844 35.6345 36.8244C35.8406 36.6107 36.1187 36.4756 36.4155 36.4756H38.6535C39.0072 36.4756 39.2477 36.833 39.0881 37.1487C37.7427 39.8107 35.0781 41.5417 31.8943 41.5417C27.4361 41.5417 23.7886 37.8941 23.7886 33.436C23.7886 28.9779 27.4361 25.3303 31.8943 25.3303Z" />
<path d="M18.7226 33.436C18.7226 31.3572 19.2513 29.4548 19.9799 27.7285C20.0541 27.5529 19.9264 27.3567 19.7358 27.3567C15.8856 27.3567 12.6433 24.1144 12.6433 20.2642C12.6433 16.414 15.8856 13.1717 19.7358 13.1717C23.586 13.1717 26.8283 16.414 26.8283 20.2642C26.8283 20.5105 27.3897 21.0054 27.6246 20.9313C28.9274 20.5206 30.2827 20.2642 31.8943 20.2642C32.775 20.2642 33.6557 20.4173 34.5364 20.5905C34.7422 20.6309 34.9339 20.4739 34.9339 20.2642C34.9339 19.8699 34.9339 19.3904 34.8787 18.9362C34.827 18.5117 34.9599 18.0636 35.3001 17.8045L38.9868 14.9955C39.3921 14.5902 39.3921 14.1849 39.1894 13.7797L35.1857 6.77316C35.153 6.71599 35.1272 6.65499 35.1021 6.59411C34.9143 6.13895 34.5848 6.08618 34.1135 6.08007C33.9863 6.07841 33.86 6.10354 33.7419 6.15079L29.3957 7.88927C29.0613 8.02302 28.6829 7.96367 28.3887 7.75599C27.6155 7.21023 26.7521 6.75466 25.8752 6.31262C25.5838 6.16573 25.3813 5.88702 25.3335 5.56423L24.6729 1.10574C24.6265 0.792572 24.6613 0.389935 24.3993 0.212245C24.2235 0.0930361 23.9828 0 23.7886 0H15.6829C15.3021 0 14.7424 0.35783 14.6762 0.73726C14.6678 0.785579 14.6661 0.834927 14.6589 0.883445L13.9492 5.67408C13.894 6.04692 13.6313 6.35205 13.2873 6.50604C12.4439 6.88359 11.673 7.42345 10.8193 7.89265C10.5647 8.03264 10.26 8.04143 9.99178 7.92966L5.73545 6.15619C5.61358 6.10541 5.48273 6.07832 5.35072 6.08016C4.8506 6.08715 4.49147 6.1485 4.13234 6.68719L0.0794975 13.7797C-0.123145 14.1849 0.0794976 14.5902 0.484782 14.9955L4.34631 17.9376C4.59456 18.1268 4.74261 18.4216 4.7079 18.7317C4.65068 19.243 4.53762 19.8101 4.53762 20.2642C4.53762 20.6648 4.53762 21.1534 4.59561 21.614C4.64767 22.0276 4.52563 22.4644 4.20164 22.7267L0.484782 25.7355C0.0794976 26.1408 0.0794978 26.5461 0.28214 26.9514L4.33498 34.0439C4.5154 34.4047 4.85644 34.4443 5.35811 34.4486C5.48532 34.4497 5.61152 34.4249 5.72964 34.3776L10.0758 32.6392C10.4102 32.5054 10.7887 32.5648 11.0829 32.7724C11.8561 33.3182 12.7195 33.7738 13.5964 34.2158C13.8878 34.3627 14.0903 34.6414 14.1381 34.9642L14.8616 39.8476C14.8688 39.8961 14.871 39.9453 14.8768 39.994C14.9222 40.3734 15.3145 40.7311 15.8856 40.7311H19.13C19.9191 40.7311 20.4065 39.8523 20.0627 39.1421C19.1998 37.3593 18.7226 35.4573 18.7226 33.436Z" />
</svg>
</div>
<h3 class="
a1g a1A
dark:aI
a27
sm:a2u
lg:a27
xl:a2u
a2v
">
Speed Optimized
</h3>
<p class="
a1S
aH
a1U
a1R
a3H[10px]
">
Tuae nam ex similique incidunt expedita exerci tationem
laudantium. Repellendus quisquam numquam perferendis earum
sapiente non tempore? Fugit repellat ut maiores.
</p>
</div>
</div>
<div class="a7 md:a1_/2 lg:a1_/3 ae">
<div class="a3s[70px] wow fadeInUp" data-wow-delay=".15s">
<div class="
as[70px]
at[70px]
a8
a9
a1x
a13
a1k
a29
a1V
a1W
">
<svg width="40" height="40" viewBox="0 0 40 40" class="a26">
<path opacity="0.5" d="M39 12C39.5523 12 40 12.4477 40 13V39C40 39.5523 39.5523 40 39 40H13C12.4477 40 12 39.5523 12 39V33C12 32.4477 12.4477 32 13 32H31C31.5523 32 32 31.5523 32 31V13C32 12.4477 32.4477 12 33 12H39Z" />
<rect width="28" height="28" rx="1" />
</svg>
</div>
<h3 class="
a1g a1A
dark:aI
a27
sm:a2u
lg:a27
xl:a2u
a2v
">
Fully Customizable
</h3>
<p class="
a1S
aH
a1U
a1R
a3H[10px]
">
Tuae nam ex similique incidunt expedita exerci tationem
laudantium. Repellendus quisquam numquam perferendis earum
sapiente non tempore? Fugit repellat ut maiores.
</p>
</div>
</div>
<div class="a7 md:a1_/2 lg:a1_/3 ae">
<div class="a3s[70px] wow fadeInUp" data-wow-delay=".2s">
<div class="
as[70px]
at[70px]
a8
a9
a1x
a13
a1k
a29
a1V
a1W
">
<svg width="40" height="45" viewBox="0 0 40 45" class="a26">
<path opacity="0.5" d="M31.579 37.8948C28.6737 37.8948 26.3158 35.5369 26.3158 32.6317C26.3158 31.9159 26.4527 31.2306 26.7135 30.6015C26.7959 30.4027 26.7605 30.1711 26.6083 30.019L24.9997 28.4103C24.7766 28.1872 24.4043 28.2238 24.2487 28.4983C23.5588 29.7145 23.1579 31.125 23.1579 32.6317C23.1579 37.2843 26.9263 41.0527 31.579 41.0527V43.0035C31.579 43.449 32.1175 43.6721 32.4325 43.3571L35.9622 39.8273C36.1575 39.6321 36.1575 39.3155 35.9622 39.1202L32.4325 35.5905C32.1175 35.2755 31.579 35.4986 31.579 35.9441V37.8948ZM31.579 24.2106V22.2598C31.579 21.8144 31.0404 21.5913 30.7254 21.9063L27.1957 25.436C27.0004 25.6313 27.0004 25.9479 27.1957 26.1431L30.7254 29.6729C31.0404 29.9879 31.579 29.7648 31.579 29.3193V27.3685C34.4842 27.3685 36.8421 29.7264 36.8421 32.6317C36.8421 33.3474 36.7052 34.0328 36.4444 34.6618C36.362 34.8606 36.3974 35.0922 36.5496 35.2444L38.1582 36.853C38.3813 37.0762 38.7536 37.0396 38.9092 36.7651C39.5991 35.5488 40 34.1384 40 32.6317C40 27.9791 36.2316 24.2106 31.579 24.2106Z" />
<path d="M18.9474 32.6316C18.9474 35.4705 19.8099 38.0969 21.2941 40.2796C21.7904 41.0094 21.3054 42.1053 20.4229 42.1053H4.21053C1.87368 42.1053 0 40.2316 0 37.8947V4.21053C0 1.89474 1.87368 0 4.21053 0H6.31579H16.8421H29.4737C31.7895 0 33.6842 1.87368 33.6842 4.21053V17.9544C33.6842 18.5032 33.1804 18.9474 32.6316 18.9474C25.0737 18.9474 18.9474 25.0737 18.9474 32.6316Z" />
</svg>
</div>
<h3 class="
a1g a1A
dark:aI
a27
sm:a2u
lg:a27
xl:a2u
a2v
">
Regular Updates
</h3>
<p class="
a1S
aH
a1U
a1R
a3H[10px]
">
Tuae nam ex similique incidunt expedita exerci tationem
laudantium. Repellendus quisquam numquam perferendis earum
sapiente non tempore? Fugit repellat ut maiores.
</p>
</div>
</div>
</div>
</div>
</section>
<section class="ad a1H aq[120px]">
<div class="aa">
<div class="a8 a1K ab[-16px]">
<div class="a7 ae">
<div class="
a1L aB[570px] a1M a3I
wow
fadeInUp
" data-wow-delay=".1s">
<h2 class="
a1A
dark:aI
a1g a1O
sm:a1P
md:a24[45px]
a1Q
">
We are ready to help
</h2>
<p class="
a1S aH
md:a1T
a1U
md:a1U
">
There are many variations of passages of Lorem Ipsum available
but the majority have suffered alteration in some form.
</p>
</div>
</div>
</div>
<div class="a8 a1K ab[-16px]">
<div class="a7 ae">
<div class="
a1L aB[770px] a13 a2p
wow
fadeInUp
" data-wow-delay=".15s">
<div class="ad a9 a1x">
<img src="assets/images/video.jpg" alt="video image" class="a7 a2Q a2R a2S" />
<div class="
a3
a7
a2Q
a4
a_
a8
a9
a1x
">
<a href="javascript:void(0)" class="
glightbox
as[70px]
at[70px]
a1w
a8
a9
a1x
aw
a3J
a1W
hover:a31
a1p
">
<svg width="16" height="18" viewBox="0 0 16 18" class="a26">
<path d="M15.5 8.13397C16.1667 8.51888 16.1667 9.48112 15.5 9.86602L2 17.6603C1.33333 18.0452 0.499999 17.564 0.499999 16.7942L0.5 1.20577C0.5 0.43597 1.33333 -0.0451549 2 0.339745L15.5 8.13397Z" />
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="a3 a1X a5 a_ a1Y[-1]">
<img src="assets/images/shape.svg" alt="shape" class="a7" />
</div>
</section>
<section id="about" class="a1I[120px]">
<div class="aa">
<div class="
a1J[100px] a2B a2o a2C[.15]
">
<div class="a8 a1K a9 ab[-16px]">
<div class="a7 lg:a1_/2 ae">
<div class="a2s lg:a2t aB[570px] wow fadeInUp" data-wow-delay=".15s">
<h2 class="
a1A
dark:aI
a1g a1O
sm:a1P
md:a24[45px]
lg:a1P
xl:a24[45px]
a2D
sm:a2D
md:a2D
lg:a2D
xl:a2D
a2E
">
Crafted for Startup, SaaS and Business Sites.
</h2>
<p class="
a1R a1S aH
sm:a1T
a1U
sm:a1U
a2F
">
The main ‘thrust’ is to focus on educating attendees on how to
best protect highly vulnerable business applications with
interactive panel discussions and roundtables.
</p>
<div class="a8 a1K ab[-12px]">
<div class="
a7
sm:a1_/2
lg:a7
xl:a1_/2
ap
">
<p class="
a8
a9
a1S
a1T
a1R
a2v
">
<span class="
as[30px]
at[30px]
a8
a9
a1x
a13
a1k
a29
a1W
a2G
">
<svg width="16" height="13" viewBox="0 0 16 13" class="a26">
<path d="M5.8535 12.6631C5.65824 12.8584 5.34166 12.8584 5.1464 12.6631L0.678505 8.1952C0.483242 7.99994 0.483242 7.68336 0.678505 7.4881L2.32921 5.83739C2.52467 5.64193 2.84166 5.64216 3.03684 5.83791L5.14622 7.95354C5.34147 8.14936 5.65859 8.14952 5.85403 7.95388L13.3797 0.420561C13.575 0.22513 13.8917 0.225051 14.087 0.420383L15.7381 2.07143C15.9333 2.26669 15.9333 2.58327 15.7381 2.77854L5.8535 12.6631Z" />
</svg>
</span>
Premium quality
</p>
<p class="
a8
a9
a1S
a1T
a1R
a2v
">
<span class="
as[30px]
at[30px]
a8
a9
a1x
a13
a1k
a29
a1W
a2G
">
<svg width="16" height="13" viewBox="0 0 16 13" class="a26">
<path d="M5.8535 12.6631C5.65824 12.8584 5.34166 12.8584 5.1464 12.6631L0.678505 8.1952C0.483242 7.99994 0.483242 7.68336 0.678505 7.4881L2.32921 5.83739C2.52467 5.64193 2.84166 5.64216 3.03684 5.83791L5.14622 7.95354C5.34147 8.14936 5.65859 8.14952 5.85403 7.95388L13.3797 0.420561C13.575 0.22513 13.8917 0.225051 14.087 0.420383L15.7381 2.07143C15.9333 2.26669 15.9333 2.58327 15.7381 2.77854L5.8535 12.6631Z" />
</svg>
</span>
No code required
</p>
<p class="
a8
a9
a1S
a1T
a1R
a2v
">
<span class="
as[30px]
at[30px]
a8
a9
a1x
a13
a1k
a29
a1W
a2G
">
<svg width="16" height="13" viewBox="0 0 16 13" class="a26">
<path d="M5.8535 12.6631C5.65824 12.8584 5.34166 12.8584 5.1464 12.6631L0.678505 8.1952C0.483242 7.99994 0.483242 7.68336 0.678505 7.4881L2.32921 5.83739C2.52467 5.64193 2.84166 5.64216 3.03684 5.83791L5.14622 7.95354C5.34147 8.14936 5.65859 8.14952 5.85403 7.95388L13.3797 0.420561C13.575 0.22513 13.8917 0.225051 14.087 0.420383L15.7381 2.07143C15.9333 2.26669 15.9333 2.58327 15.7381 2.77854L5.8535 12.6631Z" />
</svg>
</span>
Use for lifetime
</p>
</div>
<div class="
a7
sm:a1_/2
lg:a7
xl:a1_/2
ap
">
<p class="
a8
a9
a1S
a1T
a1R
a2v
">
<span class="
as[30px]
at[30px]
a8
a9
a1x
a13
a1k
a29
a1W
a2G
">
<svg width="16" height="13" viewBox="0 0 16 13" class="a26">
<path d="M5.8535 12.6631C5.65824 12.8584 5.34166 12.8584 5.1464 12.6631L0.678505 8.1952C0.483242 7.99994 0.483242 7.68336 0.678505 7.4881L2.32921 5.83739C2.52467 5.64193 2.84166 5.64216 3.03684 5.83791L5.14622 7.95354C5.34147 8.14936 5.65859 8.14952 5.85403 7.95388L13.3797 0.420561C13.575 0.22513 13.8917 0.225051 14.087 0.420383L15.7381 2.07143C15.9333 2.26669 15.9333 2.58327 15.7381 2.77854L5.8535 12.6631Z" />
</svg>
</span>
Regular updates
</p>
<p class="
a8
a9
a1S
a1T
a1R
a2v
">
<span class="
as[30px]
at[30px]
a8
a9
a1x
a13
a1k
a29
a1W
a2G
">
<svg width="16" height="13" viewBox="0 0 16 13" class="a26">
<path d="M5.8535 12.6631C5.65824 12.8584 5.34166 12.8584 5.1464 12.6631L0.678505 8.1952C0.483242 7.99994 0.483242 7.68336 0.678505 7.4881L2.32921 5.83739C2.52467 5.64193 2.84166 5.64216 3.03684 5.83791L5.14622 7.95354C5.34147 8.14936 5.65859 8.14952 5.85403 7.95388L13.3797 0.420561C13.575 0.22513 13.8917 0.225051 14.087 0.420383L15.7381 2.07143C15.9333 2.26669 15.9333 2.58327 15.7381 2.77854L5.8535 12.6631Z" />
</svg>
</span>
Rich documentation
</p>
<p class="
a8
a9
a1S
a1T
a1R
a2v
">
<span class="
as[30px]
at[30px]
a8
a9
a1x
a13
a1k
a29
a1W
a2G
">
<svg width="16" height="13" viewBox="0 0 16 13" class="a26">
<path d="M5.8535 12.6631C5.65824 12.8584 5.34166 12.8584 5.1464 12.6631L0.678505 8.1952C0.483242 7.99994 0.483242 7.68336 0.678505 7.4881L2.32921 5.83739C2.52467 5.64193 2.84166 5.64216 3.03684 5.83791L5.14622 7.95354C5.34147 8.14936 5.65859 8.14952 5.85403 7.95388L13.3797 0.420561C13.575 0.22513 13.8917 0.225051 14.087 0.420383L15.7381 2.07143C15.9333 2.26669 15.9333 2.58327 15.7381 2.77854L5.8535 12.6631Z" />
</svg>
</span>
Developer friendly
</p>
</div>
</div>
</div>
</div>
<div class="a7 lg:a1_/2 ae">
<div class="a1M lg:a2H wow fadeInUp" data-wow-delay=".2s">
<img src="assets/images/about-image.svg" alt="about-image" class="ag a1L lg:aP" />
</div>
</div>
</div>
</div>
</div>
</section>
<section class="a1I[100px] a1J[120px]">
<div class="aa">
<div class="a8 a1K a9 ab[-16px]">
<div class="a7 lg:a1_/2 ae">
<div class="
a1M
lg:a2I
a2s
lg:a2t
wow
fadeInUp
" data-wow-delay=".15s">
<img src="assets/images/about-image-2.svg" alt="about image" class="ag a1L lg:a2J" />
</div>
</div>
<div class="a7 lg:a1_/2 ae">
<div class="aB[470px] wow fadeInUp" data-wow-delay=".2s">
<div class="a1N">
<h3 class="
a1g a1A
dark:aI
a27
sm:a2u
lg:a27
xl:a2u
a1Q
">
Bug free code
</h3>
<p class="
a1S aH
sm:a1T
a1U
sm:a1U
a1R
">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="a1N">
<h3 class="
a1g a1A
dark:aI
a27
sm:a2u
lg:a27
xl:a2u
a1Q
">
Premier support
</h3>
<p class="
a1S aH
sm:a1T
a1U
sm:a1U
a1R
">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt.
</p>
</div>
<div class="a2K">
<h3 class="
a1g a1A
dark:aI
a27
sm:a2u
lg:a27
xl:a2u
a1Q
">
Regular updates
</h3>
<p class="
a1S aH
sm:a1T
a1U
sm:a1U
a1R
">
Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt
consectetur adipiscing elit setim.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="
ad
a1H
a1I[120px]
a3A
a1k
a3g[3%]
">
<div class="aa">
<div class="a8 a1K ab[-16px]">
<div class="a7 ae">
<div class="
a1L aB[570px] a1M a3s[100px]
wow
fadeInUp
" data-wow-delay=".1s">
<h2 class="
a1A
dark:aI
a1g a1O
sm:a1P
md:a24[45px]
a1Q
">
What Our Users Says
</h2>
<p class="
a1S aH
md:a1T
a1U
md:a1U
">
There are many variations of passages of Lorem Ipsum available
but the majority have suffered alteration in some form.
</p>
</div>
</div>
</div>
<div class="a8 a1K ab[-16px]">
<div class="a7 md:a1_/2 lg:a1_/3 ae">
<div class="
a33 aw
dark:a3w[#1D2144]
a13 a2Y
lg:a37
xl:a1l
a1V
wow
fadeInUp
" data-wow-delay=".1s">
<div class="a8 a9 a2v">
<span class="a3T a3U ah">
<svg width="18" height="16" viewBox="0 0 18 16" class="a26">
<path d="M9.09815 0.361679L11.1054 6.06601H17.601L12.3459 9.59149L14.3532 15.2958L9.09815 11.7703L3.84309 15.2958L5.85035 9.59149L0.595291 6.06601H7.0909L9.09815 0.361679Z" />
</svg>
</span>
<span class="a3T a3U ah">
<svg width="18" height="16" viewBox="0 0 18 16" class="a26">
<path d="M9.09815 0.361679L11.1054 6.06601H17.601L12.3459 9.59149L14.3532 15.2958L9.09815 11.7703L3.84309 15.2958L5.85035 9.59149L0.595291 6.06601H7.0909L9.09815 0.361679Z" />
</svg>
</span>
<span class="a3T a3U ah">
<svg width="18" height="16" viewBox="0 0 18 16" class="a26">
<path d="M9.09815 0.361679L11.1054 6.06601H17.601L12.3459 9.59149L14.3532 15.2958L9.09815 11.7703L3.84309 15.2958L5.85035 9.59149L0.595291 6.06601H7.0909L9.09815 0.361679Z" />
</svg>
</span>
<span class="a3T a3U ah">
<svg width="18" height="16" viewBox="0 0 18 16" class="a26">
<path d="M9.09815 0.361679L11.1054 6.06601H17.601L12.3459 9.59149L14.3532 15.2958L9.09815 11.7703L3.84309 15.2958L5.85035 9.59149L0.595291 6.06601H7.0909L9.09815 0.361679Z" />
</svg>
</span>
<span class="a3T a3U ah">
<svg width="18" height="16" viewBox="0 0 18 16" class="a26">
<path d="M9.09815 0.361679L11.1054 6.06601H17.601L12.3459 9.59149L14.3532 15.2958L9.09815 11.7703L3.84309 15.2958L5.85035 9.59149L0.595291 6.06601H7.0909L9.09815 0.361679Z" />
</svg>
</span>
</div>
<p class="
aH a1S
dark:aI
a1U a3V a2B a2z
dark:a2o
a2M
dark:a2M
a23
">
“Our members are so impressed. It's intuitive. It's clean. It's
distraction free. If you're building a community.
</p>
<div class="a8 a9">
<div class="
a1w
a2p
aB[50px]
a7
at[50px]
a2G
">
<img src="assets/images/author-01.png" alt="image" />
</div>
<div class="a7">
<h5 class="
a1T
lg:aH
xl:a1T
a1h
dark:aI
a2P a2K
">
Jassa Chy
</h5>
<p class="a1b a1S">
Founder @Rich
</p>
</div>
</div>
</div>
</div>
<div class="a7 md:a1_/2 lg:a1_/3 ae">
<div class="
a33 aw
dark:a3w[#1D2144]
a13 a2Y
lg:a37
xl:a1l
a1V
wow
fadeInUp
" data-wow-delay=".15s">
<div class="a8 a9 a2v">
<span class="a3T a3U ah">
<svg width="18" height="16" viewBox="0 0 18 16" class="a26">
<path d="M9.09815 0.361679L11.1054 6.06601H17.601L12.3459 9.59149L14.3532 15.2958L9.09815 11.7703L3.84309 15.2958L5.85035 9.59149L0.595291 6.06601H7.0909L9.09815 0.361679Z" />
</svg>
</span>
<span class="a3T a3U ah">
<svg width="18" height="16" viewBox="0 0 18 16" class="a26">
<path d="M9.09815 0.361679L11.1054 6.06601H17.601L12.3459 9.59149L14.3532 15.2958L9.09815 11.7703L3.84309 15.2958L5.85035 9.59149L0.595291 6.06601H7.0909L9.09815 0.361679Z" />
</svg>
</span>
<span class="a3T a3U ah">
<svg width="18" height="16" viewBox="0 0 18 16" class="a26">
<path d="M9.09815 0.361679L11.1054 6.06601H17.601L12.3459 9.59149L14.3532 15.2958L9.09815 11.7703L3.84309 15.2958L5.85035 9.59149L0.595291 6.06601H7.0909L9.09815 0.361679Z" />
</svg>
</span>
<span class="a3T a3U ah">
<svg width="18" height="16" viewBox="0 0 18 16" class="a26">
<path d="M9.09815 0.361679L11.1054 6.06601H17.601L12.3459 9.59149L14.3532 15.2958L9.09815 11.7703L3.84309 15.2958L5.85035 9.59149L0.595291 6.06601H7.0909L9.09815 0.361679Z" />
</svg>
</span>
<span class="a3T a3U ah">
<svg width="18" height="16" viewBox="0 0 18 16" class="a26">
<path d="M9.09815 0.361679L11.1054 6.06601H17.601L12.3459 9.59149L14.3532 15.2958L9.09815 11.7703L3.84309 15.2958L5.85035 9.59149L0.595291 6.06601H7.0909L9.09815 0.361679Z" />
</svg>
</span>
</div>
<p class="
aH a1S
dark:aI
a1U a3V a2B a2z
dark:a2o
a2M
dark:a2M
a23
">
“Our members are so impressed. It's intuitive. It's clean. It's
distraction free. If you're building a community.
</p>
<div class="a8 a9">
<div class="
a1w
a2p
aB[50px]
a7
at[50px]
a2G
">
<img src="assets/images/author-02.png" alt="image" />
</div>
<div class="a7">
<h5 class="
a1T
lg:aH
xl:a1T
a1h
dark:aI
a2P a2K
">
Devid Jassa
</h5>
<p class="a1b a1S">Founder @Jassa</p>
</div>
</div>
</div>
</div>
<div class="a7 md:a1_/2 lg:a1_/3 ae">
<div class="
a33 aw
dark:a3w[#1D2144]
a13 a2Y
lg:a37
xl:a1l
a1V
wow
fadeInUp
" data-wow-delay=".2s">
<div class="a8 a9 a2v">
<span class="a3T a3U ah">
<svg width="18" height="16" viewBox="0 0 18 16" class="a26">
<path d="M9.09815 0.361679L11.1054 6.06601H17.601L12.3459 9.59149L14.3532 15.2958L9.09815 11.7703L3.84309 15.2958L5.85035 9.59149L0.595291 6.06601H7.0909L9.09815 0.361679Z" />
</svg>
</span>
<span class="a3T a3U ah">
<svg width="18" height="16" viewBox="0 0 18 16" class="a26">
<path d="M9.09815 0.361679L11.1054 6.06601H17.601L12.3459 9.59149L14.3532 15.2958L9.09815 11.7703L3.84309 15.2958L5.85035 9.59149L0.595291 6.06601H7.0909L9.09815 0.361679Z" />
</svg>
</span>
<span class="a3T a3U ah">
<svg width="18" height="16" viewBox="0 0 18 16" class="a26">
<path d="M9.09815 0.361679L11.1054 6.06601H17.601L12.3459 9.59149L14.3532 15.2958L9.09815 11.7703L3.84309 15.2958L5.85035 9.59149L0.595291 6.06601H7.0909L9.09815 0.361679Z" />
</svg>
</span>
<span class="a3T a3U ah">
<svg width="18" height="16" viewBox="0 0 18 16" class="a26">
<path d="M9.09815 0.361679L11.1054 6.06601H17.601L12.3459 9.59149L14.3532 15.2958L9.09815 11.7703L3.84309 15.2958L5.85035 9.59149L0.595291 6.06601H7.0909L9.09815 0.361679Z" />
</svg>
</span>
<span class="a3T a3U ah">
<svg width="18" height="16" viewBox="0 0 18 16" class="a26">
<path d="M9.09815 0.361679L11.1054 6.06601H17.601L12.3459 9.59149L14.3532 15.2958L9.09815 11.7703L3.84309 15.2958L5.85035 9.59149L0.595291 6.06601H7.0909L9.09815 0.361679Z" />
</svg>
</span>
</div>
<p class="
aH a1S
dark:aI
a1U a3V a2B a2z
dark:a2o
a2M
dark:a2M
a23
">
“Our members are so impressed. It's intuitive. It's clean. It's
distraction free. If you're building a community.
</p>
<div class="a8 a9">
<div class="
a1w
a2p
aB[50px]
a7
at[50px]
a2G
">
<img src="assets/images/author-03.png" alt="image" />
</div>
<div class="a7">
<h5 class="
a1T
lg:aH
xl:a1T
a1h
dark:aI
a2P a2K
">
Jassa Frenci
</h5>
<p class="a1b a1S">
Founder @Jassa
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="a3 a3W a_ a1Y[-1]">
<svg width="238" height="531" viewBox="0 0 238 531" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect opacity="0.3" x="422.819" y="-70.8145" width="196" height="541.607" rx="2" transform="rotate(51.2997 422.819 -70.8145)" fill="url(#paint0_linear_83:2)" />
<rect opacity="0.3" x="426.568" y="144.886" width="59.7544" height="541.607" rx="2" transform="rotate(51.2997 426.568 144.886)" fill="url(#paint1_linear_83:2)" />
<defs>
<linearGradient id="paint0_linear_83:2" x1="517.152" y1="-251.373" x2="517.152" y2="459.865" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" />
<stop offset="1" stop-color="#4A6CF7" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint1_linear_83:2" x1="455.327" y1="-35.673" x2="455.327" y2="675.565" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" />
<stop offset="1" stop-color="#4A6CF7" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
</div>
<div class="a3 a5 a3X a1Y[-1]">
<svg width="279" height="106" viewBox="0 0 279 106" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.5">
<path d="M-57 12L50.0728 74.8548C55.5501 79.0219 70.8513 85.7589 88.2373 79.3692C109.97 71.3821 116.861 60.9642 156.615 63.7423C178.778 65.291 195.31 69.2985 205.911 62.3533C216.513 55.408 224.994 47.7682 243.016 49.1572C255.835 50.1453 265.278 50.8936 278 45.3373" stroke="url(#paint0_linear_72:302)" />
<path d="M-57 1L50.0728 63.8548C55.5501 68.0219 70.8513 74.7589 88.2373 68.3692C109.97 60.3821 116.861 49.9642 156.615 52.7423C178.778 54.291 195.31 58.2985 205.911 51.3533C216.513 44.408 224.994 36.7682 243.016 38.1572C255.835 39.1453 265.278 39.8936 278 34.3373" stroke="url(#paint1_linear_72:302)" />
<path d="M-57 23L50.0728 85.8548C55.5501 90.0219 70.8513 96.7589 88.2373 90.3692C109.97 82.3821 116.861 71.9642 156.615 74.7423C178.778 76.291 195.31 80.2985 205.911 73.3533C216.513 66.408 224.994 58.7682 243.016 60.1572C255.835 61.1453 265.278 61.8936 278 56.3373" stroke="url(#paint2_linear_72:302)" />
<path d="M-57 35L50.0728 97.8548C55.5501 102.022 70.8513 108.759 88.2373 102.369C109.97 94.3821 116.861 83.9642 156.615 86.7423C178.778 88.291 195.31 92.2985 205.911 85.3533C216.513 78.408 224.994 70.7682 243.016 72.1572C255.835 73.1453 265.278 73.8936 278 68.3373" stroke="url(#paint3_linear_72:302)" />
</g>
<defs>
<linearGradient id="paint0_linear_72:302" x1="256.267" y1="53.6717" x2="-40.8688" y2="8.15715" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" stop-opacity="0" />
<stop offset="1" stop-color="#4A6CF7" />
</linearGradient>
<linearGradient id="paint1_linear_72:302" x1="256.267" y1="42.6717" x2="-40.8688" y2="-2.84285" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" stop-opacity="0" />
<stop offset="1" stop-color="#4A6CF7" />
</linearGradient>
<linearGradient id="paint2_linear_72:302" x1="256.267" y1="64.6717" x2="-40.8688" y2="19.1572" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" stop-opacity="0" />
<stop offset="1" stop-color="#4A6CF7" />
</linearGradient>
<linearGradient id="paint3_linear_72:302" x1="256.267" y1="76.6717" x2="-40.8688" y2="31.1572" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" stop-opacity="0" />
<stop offset="1" stop-color="#4A6CF7" />
</linearGradient>
</defs>
</svg>
</div>
</section>
<section id="pricing" class="ad a1H a1I[120px] a3A">
<div class="aa">
<div class="a8 a1K ab[-16px]">
<div class="a7 ae">
<div class="
a1L aB[655px] a1M a3s[100px]
wow
fadeInUp
" data-wow-delay=".1s">
<h2 class="
a1A
dark:aI
a1g a1O
sm:a1P
md:a24[45px]
a1Q
">
Simple and Affordable Pricing
</h2>
<p class="
a1S aH
md:a1T
a1U
md:a1U
aB[570px] a1L
">
There are many variations of passages of Lorem Ipsum available
but the majority have suffered alteration in some form.
</p>
</div>
</div>
</div>
<div class="a8 a1K ab[-16px]">
<div class="a7 ae">
<div class="a8 a1x a21 wow fadeInUp" data-wow-delay=".1s">
<span class="
a1h
dark:aI
aH a2P a2G
monthly
a1r
">
Monthly
</span>
<label for="togglePlan" class="a8 a9 a1r">
<div class="ad">
<input id="togglePlan" type="checkbox" class="a1B" />
<div class="
a1u
a1E
a3w[#1D2144]
a1w
a3Y
"></div>
<div class="
dot
a3
a2r
a3Z
a1k
a1w
a3_
a5
a12[-4px]
a1p
a8
a9
a1x
">
<span class="active a20 a40 a1w aw"></span>
</div>
</div>
</label>
<span class="
a1h
dark:aI
aH a2P a41
yearly
a1r
">
Yearly
</span>
</div>
</div>
</div>
<div class="a8 a1K ab[-16px]">
<div class="a7 md:a1_/2 lg:a1_/3 ae">
<div class="
ad a1H aw
dark:a3w[#1D2144]
a1n a1l a42 a13 a1V
wow
fadeInUp
" data-wow-delay=".1s">
<div class="a8 ac a9">
<h3 class="
a1g a1A
dark:aI
a1O a2X
price
">
$<span class="amount">40</span>
<span class="a1h dark:a1S time">/mo</span
>
</h3>
<h4 class="aI a1g a27 a2X">
Lite
</h4>
</div>
<p class="aH a1S a43">
Lorem ipsum dolor sit amet adiscing elit Mauris egestas enim.
</p>
<div class="
a2B a2z
dark:a2o
a2M
dark:a2M
a3V a23
">
<a href="javascript:void(0)" class="
a2P
aH
aI
a1k
a7
a8
a9
a1x
a13
a44
hover:a1n hover:a2i
a1p a1a a2j
">
Start Free Trial
</a>
</div>
<div>
<div class="a8 a9 a30">
<span class="
a1k
a29
a1W
aB[18px]
a7
at[18px]
a2A
a8
a9
a1x
a1w
">
<svg width="8" height="6" viewBox="0 0 8 6" class="a26">
<path d="M2.90567 6.00024C2.68031 6.00024 2.48715 5.92812 2.294 5.74764L0.169254 3.43784C-0.0560926 3.18523 -0.0560926 2.78827 0.169254 2.53566C0.39461 2.28298 0.74873 2.28298 0.974086 2.53566L2.90567 4.66497L7.02642 0.189715C7.25175 -0.062913 7.60585 -0.062913 7.83118 0.189715C8.0566 0.442354 8.0566 0.839355 7.83118 1.09198L3.54957 5.78375C3.32415 5.92812 3.09882 6.00024 2.90567 6.00024Z" />
</svg>
</span>
<p class="
aH a1R a1S a45
">
All UI Components
</p>
</div>
<div class="a8 a9 a30">
<span class="
a1k
a29
a1W
aB[18px]
a7
at[18px]
a2A
a8
a9
a1x
a1w
">
<svg width="8" height="6" viewBox="0 0 8 6" class="a26">
<path d="M2.90567 6.00024C2.68031 6.00024 2.48715 5.92812 2.294 5.74764L0.169254 3.43784C-0.0560926 3.18523 -0.0560926 2.78827 0.169254 2.53566C0.39461 2.28298 0.74873 2.28298 0.974086 2.53566L2.90567 4.66497L7.02642 0.189715C7.25175 -0.062913 7.60585 -0.062913 7.83118 0.189715C8.0566 0.442354 8.0566 0.839355 7.83118 1.09198L3.54957 5.78375C3.32415 5.92812 3.09882 6.00024 2.90567 6.00024Z" />
</svg>
</span>
<p class="
aH a1R a1S a45
">
Use with Unlimited Projects
</p>
</div>
<div class="a8 a9 a30">
<span class="
a1k
a29
a1W
aB[18px]
a7
at[18px]
a2A
a8
a9
a1x
a1w
">
<svg width="8" height="6" viewBox="0 0 8 6" class="a26">
<path d="M2.90567 6.00024C2.68031 6.00024 2.48715 5.92812 2.294 5.74764L0.169254 3.43784C-0.0560926 3.18523 -0.0560926 2.78827 0.169254 2.53566C0.39461 2.28298 0.74873 2.28298 0.974086 2.53566L2.90567 4.66497L7.02642 0.189715C7.25175 -0.062913 7.60585 -0.062913 7.83118 0.189715C8.0566 0.442354 8.0566 0.839355 7.83118 1.09198L3.54957 5.78375C3.32415 5.92812 3.09882 6.00024 2.90567 6.00024Z" />
</svg>
</span>
<p class="
aH a1R a1S a45
">
Commercial Use
</p>
</div>
<div class="a8 a9 a30">
<span class="
a1k
a29
a1W
aB[18px]
a7
at[18px]
a2A
a8
a9
a1x
a1w
">
<svg width="8" height="6" viewBox="0 0 8 6" class="a26">
<path d="M2.90567 6.00024C2.68031 6.00024 2.48715 5.92812 2.294 5.74764L0.169254 3.43784C-0.0560926 3.18523 -0.0560926 2.78827 0.169254 2.53566C0.39461 2.28298 0.74873 2.28298 0.974086 2.53566L2.90567 4.66497L7.02642 0.189715C7.25175 -0.062913 7.60585 -0.062913 7.83118 0.189715C8.0566 0.442354 8.0566 0.839355 7.83118 1.09198L3.54957 5.78375C3.32415 5.92812 3.09882 6.00024 2.90567 6.00024Z" />
</svg>
</span>
<p class="
aH a1R a1S a45
">
Email Support
</p>
</div>
<div class="a8 a9 a30">
<span class="
a1k
a29
a1W
aB[18px]
a7
at[18px]
a2A
a8
a9
a1x
a1w
">
<svg width="8" height="8" viewBox="0 0 8 8" class="a26 a1C">
<path d="M1.40102 0.95486C1.27421 0.828319 1.07219 0.828354 0.945421 0.954965C0.818519 1.08171 0.818519 1.28389 0.945421 1.41063L0.945612 1.41083L3.54915 4.00184L0.955169 6.60202C0.955106 6.60209 0.95504 6.60215 0.954978 6.60222C0.828263 6.72897 0.82833 6.93101 0.955169 7.05769C1.01288 7.11533 1.09989 7.15024 1.17815 7.15024C1.25641 7.15024 1.34342 7.11533 1.40113 7.05769L1.29513 6.95156L1.40113 7.05769L4.00493 4.45706L6.59917 7.0575L6.59936 7.05769C6.65707 7.11533 6.74408 7.15024 6.82234 7.15024C6.9006 7.15024 6.98761 7.11533 7.04532 7.05769C7.17215 6.93102 7.17222 6.729 7.04553 6.60224C7.04546 6.60217 7.04539 6.6021 7.04532 6.60202L4.46051 4.00165L7.05507 1.4009C7.05511 1.40085 7.05516 1.4008 7.05521 1.40076L7.05526 1.40071L6.94907 1.29477L1.40102 0.95486ZM1.40102 0.95486C1.40106 0.954895 1.40109 0.95493 1.40113 0.954965L1.40102 0.95486Z" stroke-width="0.3" />
</svg>
</span>
<p class="
aH a1R a1S a45
">
Lifetime Access
</p>
</div>
<div class="a8 a9">
<span class="
a1k
a29
a1W
aB[18px]
a7
at[18px]
a2A
a8
a9
a1x
a1w
">
<svg width="8" height="8" viewBox="0 0 8 8" class="a26 a1C">
<path d="M1.40102 0.95486C1.27421 0.828319 1.07219 0.828354 0.945421 0.954965C0.818519 1.08171 0.818519 1.28389 0.945421 1.41063L0.945612 1.41083L3.54915 4.00184L0.955169 6.60202C0.955106 6.60209 0.95504 6.60215 0.954978 6.60222C0.828263 6.72897 0.82833 6.93101 0.955169 7.05769C1.01288 7.11533 1.09989 7.15024 1.17815 7.15024C1.25641 7.15024 1.34342 7.11533 1.40113 7.05769L1.29513 6.95156L1.40113 7.05769L4.00493 4.45706L6.59917 7.0575L6.59936 7.05769C6.65707 7.11533 6.74408 7.15024 6.82234 7.15024C6.9006 7.15024 6.98761 7.11533 7.04532 7.05769C7.17215 6.93102 7.17222 6.729 7.04553 6.60224C7.04546 6.60217 7.04539 6.6021 7.04532 6.60202L4.46051 4.00165L7.05507 1.4009C7.05511 1.40085 7.05516 1.4008 7.05521 1.40076L7.05526 1.40071L6.94907 1.29477L1.40102 0.95486ZM1.40102 0.95486C1.40106 0.954895 1.40109 0.95493 1.40113 0.954965L1.40102 0.95486Z" stroke-width="0.3" />
</svg>
</span>
<p class="
aH a1R a1S a45
">
Free Lifetime Updates
</p>
</div>
</div>
<div class="a3 a1X a_ a1Y[-1]">
<svg width="179" height="158" viewBox="0 0 179 158" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.5" d="M75.0002 63.256C115.229 82.3657 136.011 137.496 141.374 162.673C150.063 203.47 207.217 197.755 202.419 167.738C195.393 123.781 137.273 90.3579 75.0002 63.256Z" fill="url(#paint0_linear_70:153)" />
<path opacity="0.3" d="M178.255 0.150879C129.388 56.5969 134.648 155.224 143.387 197.482C157.547 265.958 65.9705 295.709 53.1024 246.401C34.2588 174.197 100.939 83.7223 178.255 0.150879Z" fill="url(#paint1_linear_70:153)" />
<defs>
<linearGradient id="paint0_linear_70:153" x1="69.6694" y1="29.9033" x2="196.108" y2="83.2919" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" stop-opacity="0.62" />
<stop offset="1" stop-color="#4A6CF7" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint1_linear_70:153" x1="165.348" y1="-75.4466" x2="-3.75136" y2="103.645" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" stop-opacity="0.62" />
<stop offset="1" stop-color="#4A6CF7" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
</div>
</div>
</div>
<div class="a7 md:a1_/2 lg:a1_/3 ae">
<div class="
ad a1H aw
dark:a3w[#1D2144]
a1n a1l a42 a13 a1V
wow
fadeInUp
" data-wow-delay=".15s">
<div class="a8 ac a9">
<h3 class="
a1g a1A
dark:aI
a1O a2X
price
">
$<span class="amount">399</span>
<span class="a1h dark:a1S time">/mo</span
>
</h3>
<h4 class="aI a1g a27 a2X">
Basic
</h4>
</div>
<p class="aH a1S a43">
Lorem ipsum dolor sit amet adiscing elit Mauris egestas enim.
</p>
<div class="
a2B a2z
dark:a2o
a2M
dark:a2M
a3V a23
">
<a href="javascript:void(0)" class="
a2P
aH
aI
a1k
a7
a8
a9
a1x
a13
a44
hover:a1n hover:a2i
a1p a1a a2j
">
Start Free Trial
</a>
</div>
<div>
<div class="a8 a9 a30">
<span class="
a1k
a29
a1W
aB[18px]
a7
at[18px]
a2A
a8
a9
a1x
a1w
">
<svg width="8" height="6" viewBox="0 0 8 6" class="a26">
<path d="M2.90567 6.00024C2.68031 6.00024 2.48715 5.92812 2.294 5.74764L0.169254 3.43784C-0.0560926 3.18523 -0.0560926 2.78827 0.169254 2.53566C0.39461 2.28298 0.74873 2.28298 0.974086 2.53566L2.90567 4.66497L7.02642 0.189715C7.25175 -0.062913 7.60585 -0.062913 7.83118 0.189715C8.0566 0.442354 8.0566 0.839355 7.83118 1.09198L3.54957 5.78375C3.32415 5.92812 3.09882 6.00024 2.90567 6.00024Z" />
</svg>
</span>
<p class="
aH a1R a1S a45
">
All UI Components
</p>
</div>
<div class="a8 a9 a30">
<span class="
a1k
a29
a1W
aB[18px]
a7
at[18px]
a2A
a8
a9
a1x
a1w
">
<svg width="8" height="6" viewBox="0 0 8 6" class="a26">
<path d="M2.90567 6.00024C2.68031 6.00024 2.48715 5.92812 2.294 5.74764L0.169254 3.43784C-0.0560926 3.18523 -0.0560926 2.78827 0.169254 2.53566C0.39461 2.28298 0.74873 2.28298 0.974086 2.53566L2.90567 4.66497L7.02642 0.189715C7.25175 -0.062913 7.60585 -0.062913 7.83118 0.189715C8.0566 0.442354 8.0566 0.839355 7.83118 1.09198L3.54957 5.78375C3.32415 5.92812 3.09882 6.00024 2.90567 6.00024Z" />
</svg>
</span>
<p class="
aH a1R a1S a45
">
Use with Unlimited Projects
</p>
</div>
<div class="a8 a9 a30">
<span class="
a1k
a29
a1W
aB[18px]
a7
at[18px]
a2A
a8
a9
a1x
a1w
">
<svg width="8" height="6" viewBox="0 0 8 6" class="a26">
<path d="M2.90567 6.00024C2.68031 6.00024 2.48715 5.92812 2.294 5.74764L0.169254 3.43784C-0.0560926 3.18523 -0.0560926 2.78827 0.169254 2.53566C0.39461 2.28298 0.74873 2.28298 0.974086 2.53566L2.90567 4.66497L7.02642 0.189715C7.25175 -0.062913 7.60585 -0.062913 7.83118 0.189715C8.0566 0.442354 8.0566 0.839355 7.83118 1.09198L3.54957 5.78375C3.32415 5.92812 3.09882 6.00024 2.90567 6.00024Z" />
</svg>
</span>
<p class="
aH a1R a1S a45
">
Commercial Use
</p>
</div>
<div class="a8 a9 a30">
<span class="
a1k
a29
a1W
aB[18px]
a7
at[18px]
a2A
a8
a9
a1x
a1w
">
<svg width="8" height="6" viewBox="0 0 8 6" class="a26">
<path d="M2.90567 6.00024C2.68031 6.00024 2.48715 5.92812 2.294 5.74764L0.169254 3.43784C-0.0560926 3.18523 -0.0560926 2.78827 0.169254 2.53566C0.39461 2.28298 0.74873 2.28298 0.974086 2.53566L2.90567 4.66497L7.02642 0.189715C7.25175 -0.062913 7.60585 -0.062913 7.83118 0.189715C8.0566 0.442354 8.0566 0.839355 7.83118 1.09198L3.54957 5.78375C3.32415 5.92812 3.09882 6.00024 2.90567 6.00024Z" />
</svg>
</span>
<p class="
aH a1R a1S a45
">
Email Support
</p>
</div>
<div class="a8 a9 a30">
<span class="
a1k
a29
a1W
aB[18px]
a7
at[18px]
a2A
a8
a9
a1x
a1w
">
<svg width="8" height="6" viewBox="0 0 8 6" class="a26">
<path d="M2.90567 6.00024C2.68031 6.00024 2.48715 5.92812 2.294 5.74764L0.169254 3.43784C-0.0560926 3.18523 -0.0560926 2.78827 0.169254 2.53566C0.39461 2.28298 0.74873 2.28298 0.974086 2.53566L2.90567 4.66497L7.02642 0.189715C7.25175 -0.062913 7.60585 -0.062913 7.83118 0.189715C8.0566 0.442354 8.0566 0.839355 7.83118 1.09198L3.54957 5.78375C3.32415 5.92812 3.09882 6.00024 2.90567 6.00024Z" />
</svg>
</span>
<p class="
aH a1R a1S a45
">
Lifetime Access
</p>
</div>
<div class="a8 a9">
<span class="
a1k
a29
a1W
aB[18px]
a7
at[18px]
a2A
a8
a9
a1x
a1w
">
<svg width="8" height="8" viewBox="0 0 8 8" class="a26 a1C">
<path d="M1.40102 0.95486C1.27421 0.828319 1.07219 0.828354 0.945421 0.954965C0.818519 1.08171 0.818519 1.28389 0.945421 1.41063L0.945612 1.41083L3.54915 4.00184L0.955169 6.60202C0.955106 6.60209 0.95504 6.60215 0.954978 6.60222C0.828263 6.72897 0.82833 6.93101 0.955169 7.05769C1.01288 7.11533 1.09989 7.15024 1.17815 7.15024C1.25641 7.15024 1.34342 7.11533 1.40113 7.05769L1.29513 6.95156L1.40113 7.05769L4.00493 4.45706L6.59917 7.0575L6.59936 7.05769C6.65707 7.11533 6.74408 7.15024 6.82234 7.15024C6.9006 7.15024 6.98761 7.11533 7.04532 7.05769C7.17215 6.93102 7.17222 6.729 7.04553 6.60224C7.04546 6.60217 7.04539 6.6021 7.04532 6.60202L4.46051 4.00165L7.05507 1.4009C7.05511 1.40085 7.05516 1.4008 7.05521 1.40076L7.05526 1.40071L6.94907 1.29477L1.40102 0.95486ZM1.40102 0.95486C1.40106 0.954895 1.40109 0.95493 1.40113 0.954965L1.40102 0.95486Z" stroke-width="0.3" />
</svg>
</span>
<p class="
aH a1R a1S a45
">
Free Lifetime Updates
</p>
</div>
</div>
<div class="a3 a1X a_ a1Y[-1]">
<svg width="179" height="158" viewBox="0 0 179 158" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.5" d="M75.0002 63.256C115.229 82.3657 136.011 137.496 141.374 162.673C150.063 203.47 207.217 197.755 202.419 167.738C195.393 123.781 137.273 90.3579 75.0002 63.256Z" fill="url(#paint0_linear_70:153)" />
<path opacity="0.3" d="M178.255 0.150879C129.388 56.5969 134.648 155.224 143.387 197.482C157.547 265.958 65.9705 295.709 53.1024 246.401C34.2588 174.197 100.939 83.7223 178.255 0.150879Z" fill="url(#paint1_linear_70:153)" />
<defs>
<linearGradient id="paint0_linear_70:153" x1="69.6694" y1="29.9033" x2="196.108" y2="83.2919" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" stop-opacity="0.62" />
<stop offset="1" stop-color="#4A6CF7" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint1_linear_70:153" x1="165.348" y1="-75.4466" x2="-3.75136" y2="103.645" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" stop-opacity="0.62" />
<stop offset="1" stop-color="#4A6CF7" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
</div>
</div>
</div>
<div class="a7 md:a1_/2 lg:a1_/3 ae">
<div class="
ad a1H aw
dark:a3w[#1D2144]
a1n a1l a42 a13 a1V
wow
fadeInUp
" data-wow-delay=".2s">
<div class="a8 ac a9">
<h3 class="
a1g a1A
dark:aI
a1O a2X
price
">
$<span class="amount">589</span>
<span class="a1h dark:a1S time">/mo</span
>
</h3>
<h4 class="aI a1g a27 a2X">
Plus
</h4>
</div>
<p class="aH a1S a43">
Lorem ipsum dolor sit amet adiscing elit Mauris egestas enim.
</p>
<div class="
a2B a2z
dark:a2o
a2M
dark:a2M
a3V a23
">
<a href="javascript:void(0)" class="
a2P
aH
aI
a1k
a7
a8
a9
a1x
a13
a44
hover:a1n hover:a2i
a1p a1a a2j
">
Start Free Trial
</a>
</div>
<div>
<div class="a8 a9 a30">
<span class="
a1k
a29
a1W
aB[18px]
a7
at[18px]
a2A
a8
a9
a1x
a1w
">
<svg width="8" height="6" viewBox="0 0 8 6" class="a26">
<path d="M2.90567 6.00024C2.68031 6.00024 2.48715 5.92812 2.294 5.74764L0.169254 3.43784C-0.0560926 3.18523 -0.0560926 2.78827 0.169254 2.53566C0.39461 2.28298 0.74873 2.28298 0.974086 2.53566L2.90567 4.66497L7.02642 0.189715C7.25175 -0.062913 7.60585 -0.062913 7.83118 0.189715C8.0566 0.442354 8.0566 0.839355 7.83118 1.09198L3.54957 5.78375C3.32415 5.92812 3.09882 6.00024 2.90567 6.00024Z" />
</svg>
</span>
<p class="
aH a1R a1S a45
">
All UI Components
</p>
</div>
<div class="a8 a9 a30">
<span class="
a1k
a29
a1W
aB[18px]
a7
at[18px]
a2A
a8
a9
a1x
a1w
">
<svg width="8" height="6" viewBox="0 0 8 6" class="a26">
<path d="M2.90567 6.00024C2.68031 6.00024 2.48715 5.92812 2.294 5.74764L0.169254 3.43784C-0.0560926 3.18523 -0.0560926 2.78827 0.169254 2.53566C0.39461 2.28298 0.74873 2.28298 0.974086 2.53566L2.90567 4.66497L7.02642 0.189715C7.25175 -0.062913 7.60585 -0.062913 7.83118 0.189715C8.0566 0.442354 8.0566 0.839355 7.83118 1.09198L3.54957 5.78375C3.32415 5.92812 3.09882 6.00024 2.90567 6.00024Z" />
</svg>
</span>
<p class="
aH a1R a1S a45
">
Use with Unlimited Projects
</p>
</div>
<div class="a8 a9 a30">
<span class="
a1k
a29
a1W
aB[18px]
a7
at[18px]
a2A
a8
a9
a1x
a1w
">
<svg width="8" height="6" viewBox="0 0 8 6" class="a26">
<path d="M2.90567 6.00024C2.68031 6.00024 2.48715 5.92812 2.294 5.74764L0.169254 3.43784C-0.0560926 3.18523 -0.0560926 2.78827 0.169254 2.53566C0.39461 2.28298 0.74873 2.28298 0.974086 2.53566L2.90567 4.66497L7.02642 0.189715C7.25175 -0.062913 7.60585 -0.062913 7.83118 0.189715C8.0566 0.442354 8.0566 0.839355 7.83118 1.09198L3.54957 5.78375C3.32415 5.92812 3.09882 6.00024 2.90567 6.00024Z" />
</svg>
</span>
<p class="
aH a1R a1S a45
">
Commercial Use
</p>
</div>
<div class="a8 a9 a30">
<span class="
a1k
a29
a1W
aB[18px]
a7
at[18px]
a2A
a8
a9
a1x
a1w
">
<svg width="8" height="6" viewBox="0 0 8 6" class="a26">
<path d="M2.90567 6.00024C2.68031 6.00024 2.48715 5.92812 2.294 5.74764L0.169254 3.43784C-0.0560926 3.18523 -0.0560926 2.78827 0.169254 2.53566C0.39461 2.28298 0.74873 2.28298 0.974086 2.53566L2.90567 4.66497L7.02642 0.189715C7.25175 -0.062913 7.60585 -0.062913 7.83118 0.189715C8.0566 0.442354 8.0566 0.839355 7.83118 1.09198L3.54957 5.78375C3.32415 5.92812 3.09882 6.00024 2.90567 6.00024Z" />
</svg>
</span>
<p class="
aH a1R a1S a45
">
Email Support
</p>
</div>
<div class="a8 a9 a30">
<span class="
a1k
a29
a1W
aB[18px]
a7
at[18px]
a2A
a8
a9
a1x
a1w
">
<svg width="8" height="6" viewBox="0 0 8 6" class="a26">
<path d="M2.90567 6.00024C2.68031 6.00024 2.48715 5.92812 2.294 5.74764L0.169254 3.43784C-0.0560926 3.18523 -0.0560926 2.78827 0.169254 2.53566C0.39461 2.28298 0.74873 2.28298 0.974086 2.53566L2.90567 4.66497L7.02642 0.189715C7.25175 -0.062913 7.60585 -0.062913 7.83118 0.189715C8.0566 0.442354 8.0566 0.839355 7.83118 1.09198L3.54957 5.78375C3.32415 5.92812 3.09882 6.00024 2.90567 6.00024Z" />
</svg>
</span>
<p class="
aH a1R a1S a45
">
Lifetime Access
</p>
</div>
<div class="a8 a9">
<span class="
a1k
a29
a1W
aB[18px]
a7
at[18px]
a2A
a8
a9
a1x
a1w
">
<svg width="8" height="6" viewBox="0 0 8 6" class="a26">
<path d="M2.90567 6.00024C2.68031 6.00024 2.48715 5.92812 2.294 5.74764L0.169254 3.43784C-0.0560926 3.18523 -0.0560926 2.78827 0.169254 2.53566C0.39461 2.28298 0.74873 2.28298 0.974086 2.53566L2.90567 4.66497L7.02642 0.189715C7.25175 -0.062913 7.60585 -0.062913 7.83118 0.189715C8.0566 0.442354 8.0566 0.839355 7.83118 1.09198L3.54957 5.78375C3.32415 5.92812 3.09882 6.00024 2.90567 6.00024Z" />
</svg>
</span>
<p class="
aH a1R a1S a45
">
Free Lifetime Updates
</p>
</div>
</div>
<div class="a3 a1X a_ a1Y[-1]">
<svg width="179" height="158" viewBox="0 0 179 158" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.5" d="M75.0002 63.256C115.229 82.3657 136.011 137.496 141.374 162.673C150.063 203.47 207.217 197.755 202.419 167.738C195.393 123.781 137.273 90.3579 75.0002 63.256Z" fill="url(#paint0_linear_70:153)" />
<path opacity="0.3" d="M178.255 0.150879C129.388 56.5969 134.648 155.224 143.387 197.482C157.547 265.958 65.9705 295.709 53.1024 246.401C34.2588 174.197 100.939 83.7223 178.255 0.150879Z" fill="url(#paint1_linear_70:153)" />
<defs>
<linearGradient id="paint0_linear_70:153" x1="69.6694" y1="29.9033" x2="196.108" y2="83.2919" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" stop-opacity="0.62" />
<stop offset="1" stop-color="#4A6CF7" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint1_linear_70:153" x1="165.348" y1="-75.4466" x2="-3.75136" y2="103.645" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" stop-opacity="0.62" />
<stop offset="1" stop-color="#4A6CF7" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="a3 a5 a1X a1Y[-1]">
<svg width="239" height="601" viewBox="0 0 239 601" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect opacity="0.3" x="-184.451" y="600.973" width="196" height="541.607" rx="2" transform="rotate(-128.7 -184.451 600.973)" fill="url(#paint0_linear_93:235)" />
<rect opacity="0.3" x="-188.201" y="385.272" width="59.7544" height="541.607" rx="2" transform="rotate(-128.7 -188.201 385.272)" fill="url(#paint1_linear_93:235)" />
<defs>
<linearGradient id="paint0_linear_93:235" x1="-90.1184" y1="420.414" x2="-90.1184" y2="1131.65" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" />
<stop offset="1" stop-color="#4A6CF7" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint1_linear_93:235" x1="-159.441" y1="204.714" x2="-159.441" y2="915.952" gradientUnits="userSpaceOnUse">
<stop stop-color="#4A6CF7" />
<stop offset="1" stop-color="#4A6CF7" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
</div>
</section>
<section id="blog" class="bg-primary a1Z a1I[120px] a3A">
<div class="aa">
<div class="a8 a1K ab[-16px]">
<div class="a7 ae">
<div class="
a1L aB[570px] a1M a3s[100px]
wow
fadeInUp
" data-wow-delay=".1s">
<h2 class="
a1A
dark:aI
a1g a1O
sm:a1P
md:a24[45px]
a1Q
">
Our Latest Blogs
</h2>
<p class="
a1S aH
md:a1T
a1U
md:a1U
">
There are many variations of passages of Lorem Ipsum available
but the majority have suffered alteration in some form.
</p>
</div>
</div>
</div>
<div class="a8 a1K ab[-16px] a1x">
<div class="a7 md:aU/3 lg:a1_/2 xl:a1_/3 ae">
<div class="
ad aw
dark:av
a33 a13 a2p a1V
wow
fadeInUp
" data-wow-delay=".1s">
<a href="javascript:void(0)" class="a7 ah ad">
<span class="
a3
a34
a35
a1k
a1w
aM
a9
a1x
aK
ae
a2P
a1b
aI
">
Computer
</span>
<img src="assets/images/blog-01.jpg" alt="image" class="a7" />
</a>
<div class="
a36
sm:a2Y
md:ai md:az
lg:a2Y
xl:ai xl:a37
2xl:a2Y
">
<h3>
<a href="javascript:void(0)" class="
a1g a1A
dark:aI
a27
sm:a2u
ah a1Q
hover:a1W
dark:hover:a1W
">
Best UI components for modern websites
</a>
</h3>
<p class="
aH
a1S
a1R
a38
a2E
a2B
a2z
a2M
dark:a2o dark:a2M
">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
sit amet dictum neque, laoreet dolor.
</p>
<div class="a8 a9">
<div class="
a8 a9 a39 a2O
xl:a3a
2xl:a39
xl:a2A
2xl:a2O
a3b a2z a2M
dark:a2o dark:a2M
">
<div class="
aB[40px]
a7
at[40px]
a1w
a2p
a2G
">
<img src="assets/images/author-01.png" alt="author" class="a7" />
</div>
<div class="a7">
<h4 class="
a1b a1R a1h
dark:aI
a2K
">
By
<a href="javascript:void(0)" class="
a1h
dark:aI
hover:a1W
dark:hover:a1W
">
Jssa
</a>
</h4>
<p class="a3c a1S">
Graphic Designer
</p>
</div>
</div>
<div class="a22">
<h4 class="
a1b a1R a1h
dark:aI
a2K
">
Date
</h4>
<p class="a3c a1S">15 Dec, 2023</p>
</div>
</div>
</div>
</div>
</div>
<div class="a7 md:aU/3 lg:a1_/2 xl:a1_/3 ae">
<div class="
ad aw
dark:av
a33 a13 a2p a1V
wow
fadeInUp
" data-wow-delay=".15s">
<a href="javascript:void(0)" class="a7 ah ad">
<span class="
a3
a34
a35
a1k
a1w
aM
a9
a1x
aK
ae
a2P
a1b
aI
">
Design
</span>
<img src="assets/images/blog-02.jpg" alt="image" class="a7" />
</a>
<div class="
a36
sm:a2Y
md:ai md:az
lg:a2Y
xl:ai xl:a37
2xl:a2Y
">
<h3>
<a href="javascript:void(0)" class="
a1g a1A
dark:aI
a27
sm:a2u
ah a1Q
hover:a1W
dark:hover:a1W
">
9 simple ways to improve your design skills
</a>
</h3>
<p class="
aH
a1S
a1R
a38
a2E
a2B
a2z
a2M
dark:a2o dark:a2M
">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
sit amet dictum neque, laoreet dolor.
</p>
<div class="a8 a9">
<div class="
a8 a9 a39 a2O
xl:a3a
2xl:a39
xl:a2A
2xl:a2O
a3b a2z a2M
dark:a2o dark:a2M
">
<div class="
aB[40px]
a7
at[40px]
a1w
a2p
a2G
">
<img src="assets/images/author-02.png" alt="author" class="a7" />
</div>
<div class="a7">
<h4 class="
a1b a1R a1h
dark:aI
a2K
">
By
<a href="javascript:void(0)" class="
a1h
dark:aI
hover:a1W
dark:hover:a1W
">
Jassa
</a>
</h4>
<p class="a3c a1S">
Content Writer
</p>
</div>
</div>
<div class="a22">
<h4 class="
a1b a1R a1h
dark:aI
a2K
">
Date
</h4>
<p class="a3c a1S">15 Dec, 2023</p>
</div>
</div>
</div>
</div>
</div>
<div class="a7 md:aU/3 lg:a1_/2 xl:a1_/3 ae">
<div class="
ad aw
dark:av
a33 a13 a2p a1V
wow
fadeInUp
" data-wow-delay=".2s">
<a href="javascript:void(0)" class="a7 ah ad">
<span class="
a3
a34
a35
a1k
a1w
aM
a9
a1x
aK
ae
a2P
a1b
aI
">
Computer
</span>
<img src="assets/images/blog-03.jpg" alt="image" class="a7" />
</a>
<div class="
a36
sm:a2Y
md:ai md:az
lg:a2Y
xl:ai xl:a37
2xl:a2Y
">
<h3>
<a href="javascript:void(0)" class="
a1g a1A
dark:aI
a27
sm:a2u
ah a1Q
hover:a1W
dark:hover:a1W
">
Tips to quickly improve your coding speed.
</a>
</h3>
<p class="
aH
a1S
a1R
a38
a2E
a2B
a2z
a2M
dark:a2o dark:a2M
">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
sit amet dictum neque, laoreet dolor.
</p>
<div class="a8 a9">
<div class="
a8 a9 a39 a2O
xl:a3a
2xl:a39
xl:a2A
2xl:a2O
a3b a2z a2M
dark:a2o dark:a2M
">
<div class="
aB[40px]
a7
at[40px]
a1w
a2p
a2G
">
<img src="assets/images/author-03.png" alt="author" class="a7" />
</div>
<div class="a7">
<h4 class="
a1b a1R a1h
dark:aI
a2K
">
By
<a href="javascript:void(0)" class="
a1h
dark:aI
hover:a1W
dark:hover:a1W
">
Jassa
</a>
</h4>
<p class="a3c a1S">
Graphic Designer
</p>
</div>
</div>
<div class="a22">
<h4 class="
a1b a1R a1h
dark:aI
a2K
">
Date
</h4>
<p class="a3c a1S">15 Dec, 2023</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="contact" class="a1I[120px] a3A">
<div class="aa">
<div class="a8 a1K ab[-16px]">
<div class="a7 lg:a2q/12 ae">
<div class="
a1k a3g[3%]
dark:av
a13 a3t a2s
lg:a2v
sm:a3B[55px]
lg:a3t
xl:a3B[55px]
wow
fadeInUp
" data-wow-delay=".15s
">
<h2 class="
a1g a1A
dark:aI
a2u
sm:a1O
lg:a2u
xl:a1O
a30
">
Need Help? Open a Ticket
</h2>
<p class="a1S aH a1R a2s">
Our support team will get back to you ASAP via email.
</p>
<form>
<div class="a8 a1K ab[-16px]">
<div class="a7 md:a1_/2 ae">
<div class="a23">
<label for="name" class="
ah a1b a1R a1h
dark:aI
a30
">
Your Name
</label>
<input type="text" placeholder="Enter your name" class="
a7 a3l a3m
dark:a3w[#242B51]
a13 a33
dark:a1n
a1i
az
a1S
aH
a3x
a3o
focus-visible:aE
focus:a3p
" />
</div>
</div>
<div class="a7 md:a1_/2 ae">
<div class="a23">
<label for="email" class="
ah a1b a1R a1h
dark:aI
a30
">
Your Email
</label>
<input type="email" placeholder="Enter your email" class="
a7 a3l a3m
dark:a3w[#242B51]
a13 a33
dark:a1n
a1i
az
a1S
aH
a3x
a3o
focus-visible:aE
focus:a3p
" />
</div>
</div>
<div class="a7 ae">
<div class="a23">
<label for="message" class="
ah a1b a1R a1h
dark:aI
a30
">
Your Message
</label>
<textarea name="message" rows="5" placeholder="Enter your Message" class="
a7 a3l a3m
dark:a3w[#242B51]
a13 a33
dark:a1n
a1i
az
a1S
aH
a3x
a3o
focus-visible:aE
focus:a3p
a3C
"></textarea>
</div>
</div>
<div class="a7 ae">
<a href="javascript:void(0)" class="
aH
a1R
aI
a1k
a3q
a1m
hover:a2i hover:a1n
a13
a1p
a1a
a2j
">
Submit Ticket
</a>
</div>
</div>
</form>
</div>
</div>
<div class="a7 lg:a20/12 ae">
<div class="
ad
a1H
a13
a1k
a3g[3%]
dark:a29
a2Y
sm:a3t
lg:a2Y
xl:a3t
a2v
wow
fadeInUp
" data-wow-delay=".2s
">
<h3 class="
a1A
dark:aI
a1g a2u a2D a1Q
">
Subscribe to receive future updates
</h3>
<p class="
a1R
aH
a1S
a1U
a3u
a2F
a2B
a2z
a3v
dark:a2o dark:a3v
">
Lorem ipsum dolor sited Sed ullam corper consectur adipiscing
Mae ornare massa quis lectus.
</p>
<form>
<input type="text" name="name" placeholder="Enter your name" class="
a7
a3l
a2z
a2M
dark:a2o
dark:a2M
dark:a3w[#242B51]
a13
a1i
az
a1R
a1S
aH
a3x
a3o
focus-visible:aE
focus:a3p focus:a3y
a1Q
" />
<input type="email" name="email" placeholder="Enter your email" class="
a7
a3l
a2z
a2M
dark:a2o
dark:a2M
dark:a3w[#242B51]
a13
a1i
az
a1R
a1S
aH
a3x
a3o
focus-visible:aE
focus:a3p focus:a3y
a1Q
" />
<input type="button" value="Subscribe" class="
a7
a3l
a3p
a1k
a13
a1i
az
a1R
aI
aH
a1M
a3o
a1r
focus-visible:aE
hover:a1n hover:a2i
a1p a3z a2j a1Q
" />
<p class="
aH
a1S
a1M
a1R
a1U
">
No spam guaranteed, So please don’t send any spam mail.
</p>
</form>
<div class="a3 a4 a5 a1Y[-1]">
<svg width="370" height="596" viewBox="0 0 370 596" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_88:141" style="mask-type: alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="370" height="596">
<rect width="370" height="596" rx="2" fill="#1D2144" />
</mask>
<g mask="url(#mask0_88:141)">
<path opacity="0.15" d="M15.4076 50.9571L54.1541 99.0711L71.4489 35.1605L15.4076 50.9571Z" fill="url(#paint0_linear_88:141)" />
<path opacity="0.15" d="M20.7137 501.422L44.6431 474.241L6 470.624L20.7137 501.422Z" fill="url(#paint1_linear_88:141)" />
<path opacity="0.1" d="M331.676 198.309C344.398 204.636 359.168 194.704 358.107 180.536C357.12 167.363 342.941 159.531 331.265 165.71C318.077 172.69 318.317 191.664 331.676 198.309Z" fill="url(#paint2_linear_88:141)" />
<g opacity="0.3">
<path d="M209 89.9999C216 77.3332 235.7 50.7999 258.5 45.9999C287 39.9999 303 41.9999 314 30.4999C325 18.9999 334 -3.50014 357 -3.50014C380 -3.50014 395 4.99986 408.5 -8.50014C422 -22.0001 418.5 -46.0001 452 -37.5001C478.8 -30.7001 515.167 -45 530 -53" stroke="url(#paint3_linear_88:141)" />
<path d="M251 64.9999C258 52.3332 277.7 25.7999 300.5 20.9999C329 14.9999 345 16.9999 356 5.49986C367 -6.00014 376 -28.5001 399 -28.5001C422 -28.5001 437 -20.0001 450.5 -33.5001C464 -47.0001 460.5 -71.0001 494 -62.5001C520.8 -55.7001 557.167 -70 572 -78" stroke="url(#paint4_linear_88:141)" />
<path d="M212 73.9999C219 61.3332 238.7 34.7999 261.5 29.9999C290 23.9999 306 25.9999 317 14.4999C328 2.99986 337 -19.5001 360 -19.5001C383 -19.5001 398 -11.0001 411.5 -24.5001C425 -38.0001 421.5 -62.0001 455 -53.5001C481.8 -46.7001 518.167 -61 533 -69" stroke="url(#paint5_linear_88:141)" />
<path d="M249 40.9999C256 28.3332 275.7 1.79986 298.5 -3.00014C327 -9.00014 343 -7.00014 354 -18.5001C365 -30.0001 374 -52.5001 397 -52.5001C420 -52.5001 435 -44.0001 448.5 -57.5001C462 -71.0001 458.5 -95.0001 492 -86.5001C518.8 -79.7001 555.167 -94 570 -102" stroke="url(#paint6_linear_88:141)" />
</g>
</g>
<defs>
<linearGradient id="paint0_linear_88:141" x1="13.4497" y1="63.5059" x2="81.144" y2="41.5072" gradientUnits="userSpaceOnUse">
<stop stop-color="white" />
<stop offset="1" stop-color="white" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint1_linear_88:141" x1="28.1579" y1="501.301" x2="8.69936" y2="464.391" gradientUnits="userSpaceOnUse">
<stop stop-color="white" />
<stop offset="1" stop-color="white" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint2_linear_88:141" x1="338" y1="167" x2="349.488" y2="200.004" gradientUnits="userSpaceOnUse">
<stop stop-color="white" />
<stop offset="1" stop-color="white" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint3_linear_88:141" x1="369.5" y1="-53" x2="369.5" y2="89.9999" gradientUnits="userSpaceOnUse">
<stop stop-color="white" />
<stop offset="1" stop-color="white" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint4_linear_88:141" x1="411.5" y1="-78" x2="411.5" y2="64.9999" gradientUnits="userSpaceOnUse">
<stop stop-color="white" />
<stop offset="1" stop-color="white" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint5_linear_88:141" x1="372.5" y1="-69" x2="372.5" y2="73.9999" gradientUnits="userSpaceOnUse">
<stop stop-color="white" />
<stop offset="1" stop-color="white" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint6_linear_88:141" x1="409.5" y1="-102" x2="409.5" y2="40.9999" gradientUnits="userSpaceOnUse">
<stop stop-color="white" />
<stop offset="1" stop-color="white" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
</div>
</div>
</div>
</div>
</div>
</section>
6. Now guy’s we need to add below inside project/src/app/app.component.html file:
<app-header></app-header> <app-home></app-home> <app-footer></app-footer>
7. Now guy’s we need to add below code inside our project/src/index.html file:
... <body class="dark:a1"> ...
Friends in the end must run ng serve command into your terminal to run the angular 13 project (localhost:4200).
Guys click here to check the Angular 13 Bootstrap 5 Free Templates.
Now we are done friends. If you have any kind of query, suggestion and new requirement then feel free to comment below.
Jassa
Thanks
It would be nice if you specify the github url in the blog too.
Okay fine.