PageSourceSearch

https://kolpotoru-ui-design.netlify.app/components/button/button

html kolpotoru-ui-design.netlify.app collected 2026-10-03 12:00:30 UTC 24,628 bytes, 410 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5<!-- This site is hosted on Netlify. Anyone can build and deploy a site
6     like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=fb2015e8-07f6-483b-acc4-9df1d58bd7f0
7     Netlify hosting facts for this site: static/SSR served via Netlify Edge. -->
8    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
9    <meta name="author" content="Ranita Saha" />
10    <meta name="description" content="button Component" />
11    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
12    <title>Button</title>
13    <link
14      rel="icon"
15      type="image/png"
16      sizes="32x32"
17      href="../../logo-assets/favicon.ico"
18    />
19    <link
20      rel="stylesheet"
21      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
22      integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA=="
23      crossorigin="anonymous"
24      referrerpolicy="no-referrer"
25    />
26    <link href="../kolpotoru.css" rel="stylesheet" />
27    <link rel="stylesheet" href="../../style.css" />
28  </head>
29  <body>
30
31    <nav class="nav">
32      <!-- <div class="logo-small-screen">
33        <a href="./index.html"> <img src="../../logo-assets/apple-touch-icon.png" alt="logo" class="nav-logo" /></a>
34        <div class="design-font">
35          <h3>Kolpotoru UI</h3>
36          <span>LET'S FULFILL ALL WISHES</span>
37        </div>
38        </div> -->
39
40      <div class="list-style-none logo-alt">
41        <a href="/"> <img src="../../logo-assets/apple-touch-icon.png" alt="logo" class="nav-logo" /></a>
42        <div class="design-font">
43          <h3>Kolpotoru UI</h3>
44          <span>LET'S FULFILL ALL WISHES</span>
45        </div>
46      </div>
47
48      <ul class="nav-links">
49          <li class="list-style-none">
50              <a href="/">Home</a>
51          </li>
52          <li class="list-style-none">
53              <a href='/components/alert/alert'>Documentation</a>
54          </li>
55      </ul>
56      <ul class="social-media-links">
57          <li class="list-style-none">
58              <a href="https://github.com/ranitasahaa1230/Kolpotoru-UI-Component-Library" class="color-text-primary" target="_blank"><i
59                      class="fab fa-github"></i></a>
60          </li>
61          <li class="list-style-none">
62              <a href="https://twitter.com/Ifullofsunshine" class="color-text-primary" target="_blank"><i
63                      class="fab fa-twitter"></i></a>
64          </li>
65          <li class="list-style-none">
66              <a href="https://www.linkedin.com/in/saharanitaa1230dreamer/" class="color-text-primary" target="_blank"><i
67                      class="fab fa-linkedin-in"></i></a>
68          </li>
69      </ul>
70  </nav>
71
72   <!-- responsive section -->
73   <div class="sidebar-toggle-container">
74      <button class="sidebar-toggle">
75        <i class="fas fa-bars"></i>
76      </button>
77    </div>
78
79    <section class="sidebar">
80      <div class="sidebar-header">
81        <a href="/"> <img src="../../logo-assets/apple-touch-icon.png" alt="logo" class="nav-logo" /></a>
82        <div class="design-font">
83          <h3>Kolpotoru UI</h3>
84          <span>LET'S FULFILL ALL WISHES</span>
85        </div>
86        <button class="close-btn"><i class="fas fa-times"></i></button>
87      </div>
88      <ul class="sidebar-nav-links text-lg font-bold">
89        <li class="list-style-none">
90          <a href="/">Home</a>
91        </li>
92        <li class="list-style-none">
93          <a href='/components/alert/alert'>Documentation</a>
94        </li>
95      </ul>
96      <aside class="sidebar-aside">
97        <h2 class="text-xl heading-text-primary">Components</h2>
98        <div class="horizontal-div"></div>
99        <div class="docs-sub-container">
100          <a class='docs-link' href='/components/alert/alert'>Alert</a>
101          <a class='docs-link' href='/components/avatar/avatar'>Avatar</a>
102          <a class='docs-link' href='/components/badge/badge'>Badge</a>
103          <a href="#" class="docs-link active-link">Button</a>
104          <a class='docs-link' href='/components/card/card'>Card</a>
105          <a class='docs-link' href='/components/responsiveimages/image'>Image</a>
106          <a class='docs-link' href='/components/input/input'>Input</a>
107          <a class='docs-link' href='/components/lists/list'>Lists</a>
108          <a class='docs-link' href='/components/modal/modal'>Modal</a>
109          <a class='docs-link' href='/components/navigation/navigation'>Navigation</a>
110          <a class='docs-link' href='/components/rating/rating'>Rating</a>
111          <a class='docs-link' href='/components/slider/slider'>Slider</a>
112          <a class='docs-link' href='/components/grid/grid'>Simplified Grid</a>
113          <a class='docs-link' href='/components/typography/typography'>Typography</a>
114          <a class='docs-link' href='/components/toast/toast'>Toast</a>
115        </div>
116      </aside>
117    </section>
118
119  <!-- section -->
120    <main class="docs-container">
121      <aside class="docs-aside">
122        <h2 class="text-xl heading-text-primary">Components</h2>
123        <div class="horizontal-div"></div>
124        <div class="docs-sub-container">
125          <a class='docs-link' href='/components/alert/alert'>Alert</a>
126          <a class='docs-link' href='/components/avatar/avatar'>Avatar</a>
127          <a class='docs-link' href='/components/badge/badge'>Badge</a>
128          <a href="#" class="docs-link active-link">Button</a>
129          <a class='docs-link' href='/components/card/card'>Card</a>
130          <a class='docs-link' href='/components/responsiveimages/image'>Image</a>
131          <a class='docs-link' href='/components/input/input'>Input</a>
132          <a class='docs-link' href='/components/lists/list'>Lists</a>
133          <a class='docs-link' href='/components/modal/modal'>Modal</a>
134          <a class='docs-link' href='/components/navigation/navigation'>Navigation</a>
135          <a class='docs-link' href='/components/rating/rating'>Rating</a>
136          <a class='docs-link' href='/components/slider/slider'>Slider</a>
137          <a class='docs-link' href='/components/grid/grid'>Simplified Grid</a>
138          <a class='docs-link' href='/components/typography/typography'>Typography</a>
139          <a class='docs-link' href='/components/toast/toast'>Toast</a>
140        </div>
141      </aside>
142
143      <section class="components">
144        <section class="component-features" id="button">
145          <h1>Buttons</h1>
146          <p>
147            Buttons are also called as call to action. Buttons allow users to
148            take actions, and make choices, with a single tap.
149          </p>
150
151          <div>
152            <h2>Primary Button Styles</h2>
153            <p>
154              Whenever you want your user to click on a link or button, use
155              primary style buttons. You can directly copy below html code and
156              use it in your app.
157            </p>
158          </div>
159
160          <div class="btn-primary-box btn-box">
161            <button class="btn btn-solid-primary btn-variant">
162              Primary-Solid
163            </button>
164            <button class="btn btn-outline-primary btn-variant">
165              Primary-Outline
166            </button>
167            <button class="link-text link-text-primary">Primary-Text</button>
168            <button class="btn btn-icon-primary">
169              <span class="btn-icon"
170                ><i class="fas fa-shopping-cart button-icons"></i
171              ></span>
172            </button>
173            <button class="btn btn-text-icon-primary btn-variant">
174              <span class="btn-icon"
175                ><i class="fas fa-shopping-cart button-icons"></i></span
176              >Add to Cart
177            </button>
178          </div>
179
180          <div class="code-snippet-display">
181            <code>
182              <iframe
183                src="https://carbon.now.sh/embed?bg=rgba%28171%2C+184%2C+195%2C+1%29&t=night-owl&wt=none&l=elm&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=0px&ph=0px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=%2509%2509%253Cbutton%2520class%253D%2522btn%2520btn-solid-primary%2522%253EPrimary-Solid%253C%252Fbutton%253E%2520%2520%250A%2509%2509%253Cbutton%2520class%253D%2522btn%2520btn-outline-primary%2522%253EPrimary-Outline%253C%252Fbutton%253E%250A%2509%2509%253Cbutton%2520class%253D%2522link-text%2520link-text-primary%2522%253EPrimary-Text%253C%252Fbutton%253E%250A%2509%2509%253Cbutton%2520class%253D%2522btn%2520btn-icon-primary%2522%253E%253Cspan%2520class%253D%2522btn-icon%2522%253E%253Ci%2520class%253D%2522fas%2520fa-shopping-cart%2522%253E%253C%252Fi%253E%253C%252Fspan%253E%2509%2509%2509%2509%253C%252Fbutton%253E%250A%2509%2509%253Cbutton%2520class%253D%2522btn%2520btn-text-icon-primary%2522%253E%253Cspan%2520class%253D%2522btn-icon%2522%253E%253Ci%2520class%253D%2522fas%2520fa-shopping-cart%2522%253E%253C%252Fi%253E%2509%2509%2509%2509%253C%252Fspan%253EAdd%2520to%2520Cart%253C%252Fbutton%253E%2520%2520%250A%2520%2520%2520%2520%2520%2520"
184                style="border: 0; transform: scale(1); overflow: hidden"
185                sandbox="allow-scripts allow-same-origin"
186              >
187              </iframe>
188            </code>
189          </div>
190
191          <div>
192            <h2>Secondary Button Styles</h2>
193            <p>
194              If you want user not to pay attention to buttons then use
195              Secondary buttons. You can directly copy below html code and use
196              it in your app.
197            </p>
198          </div>
199
200          <div class="btn-secondary-box btn-box">
201            <button class="btn btn-solid-secondary btn-variant">Solid</button>
202            <button class="btn btn-outline-secondary btn-variant">
203              Outline
204            </button>
205            <button class="link-text link-text-secondary">Text Link</button>
206            <button class="btn btn-icon-secondary">
207              <span class="btn-icon"
208                ><i class="fas fa-share-square button-icons"></i
209              ></span>
210            </button>
211            <button class="btn btn-text-icon-secondary">
212              <span class="btn-icon"
213                ><i class="fas fa-trash button-icons"></i></span
214              >Delete
215            </button>
216          </div>
217
218          <div class="code-snippet-display">
219            <code>
220              <iframe
221                src="https://carbon.now.sh/embed?bg=rgba%28171%2C+184%2C+195%2C+1%29&t=night-owl&wt=none&l=elm&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=0px&ph=0px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=%2509%2509%253Cbutton%2520class%253D%2522btn%2520btn-solid-secondary%2522%253ESolid%253C%252Fbutton%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Cbutton%2520class%253D%2522btn%2520btn-outline-secondary%2522%253EOutline%253C%252Fbutton%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Cbutton%2520class%253D%2522link-text%2520link-text-secondary%2522%253EText%2520Link%253C%252Fbutton%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Cbutton%2520class%253D%2522btn%2520btn-icon-secondary%2522%253E%253Cspan%2520class%253D%2522btn-icon%2522%253E%253Ci%2520class%253D%2522fas%2520fa-share-square%2522%253E%253C%252Fi%253E%253C%252Fspan%253E%2509%2509%2509%253C%252Fbutton%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Cbutton%2520class%253D%2522btn%2520btn-text-icon-secondary%2522%253E%253Cspan%2520class%253D%2522btn-icon%2522%253E%253Ci%2520class%253D%2522fas%2520fa-trash%2522%253E%253C%252Fi%253E%2509%2509%2509%2509%2509%2509%253C%252Fspan%253EDelete%253C%252Fbutton%253E%2520%250A%2520%2520%2520%2520%2520%2520"
222                style="border: 0; transform: scale(1); overflow: hidden"
223                sandbox="allow-scripts allow-same-origin"
224              >
225              </iframe>
226            </code>
227          </div>
228
229          <div>
230            <h2>Disabled Button Styles</h2>
231            <p>
232              If you want to style disabled button add
233              <span class="primary-text">btn-disabled</span> class and you are
234              good to go.
235            </p>
236          </div>
237
238          <div class="btn-disabled-box btn-box">
239            <button class="btn btn-solid-primary btn-disabled btn-variant">
240              Primary-Button
241            </button>
242            <button
243              class="btn btn-text-icon-secondary btn-disabled btn-variant"
244            >
245              <span class="btn-icon"
246                ><i class="fas fa-trash button-icons"></i></span
247              >Delete
248            </button>
249          </div>
250
251          <div class="code-snippet-display">
252            <code>
253              <iframe
254                src="https://carbon.now.sh/embed?bg=rgba%28171%2C+184%2C+195%2C+1%29&t=night-owl&wt=none&l=elm&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=0px&ph=0px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=%2509%2509%253Cbutton%2520class%253D%2522btn%2520btn-solid-primary%2520btn-disabled%2522%253EPrimary-Button%253C%252Fbutton%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Cbutton%2520class%253D%2522btn%2520btn-text-icon-secondary%2520btn-disabled%2522%253E%253Cspan%2520class%253D%2522btn-icon%2522%253E%253Ci%2520class%253D%2522fas%2520fa-trash%2522%253E%253C%252Fi%253E%2509%2509%253C%252Fspan%253EDelete%253C%252Fbutton%253E%250A%2520%2520%2520%2520%2520%2520"
255                style="border: 0; transform: scale(1); overflow: hidden"
256                sandbox="allow-scripts allow-same-origin"
257              >
258              </iframe>
259            </code>
260          </div>
261
262          <div>
263            <h2>Button with Icon Styles</h2>
264            <p>
265              All the variants of Button with Icon are also available. You can
266              add
267              <span class="primary-text">btn-lg-size, btn-sm-size</span> class
268              for large and small size respectively.
269            </p>
270          </div>
271
272          <div class="btn-size-box btn-box">
273            <button class="btn btn-solid-primary btn-lg-size btn-variant">
274              <span class="btn-icon"
275                ><i class="fas fa-shopping-basket button-icons"></i></span
276              >Large-Continue Shopping
277            </button>
278            <button class="btn btn-solid-primary btn-sm-size btn-variant">
279              <span class="btn-icon"
280                ><i class="fas fa-arrow-circle-left button-icons"></i></span
281              >Small-Go Back
282            </button>
283          </div>
284
285          <div class="code-snippet-display">
286            <code>
287              <iframe
288                src="https://carbon.now.sh/embed?bg=rgba%28171%2C+184%2C+195%2C+1%29&t=night-owl&wt=none&l=elm&width=739&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=false&pv=0px&ph=0px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=%2509%2509%2509%253Cbutton%2520class%253D%2522btn%2520btn-solid-primary%2520btn-lg-size%2520btn-variant%2522%253E%253Cspan%2520%2509%2509%2509class%253D%2522btn-icon%2522%253E%253Ci%2520class%253D%2522fas%2520fa-shopping-basket%2522%253E%253C%252Fi%253E%253C%252Fspan%253ELarge-Continue%2520%2509%2509%2520Shopping%253C%252Fbutton%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cbutton%2520class%253D%2522btn%2520btn-solid-primary%2520btn-sm-size%2520btn-variant%2522%253E%253Cspan%2520%2509%2509%2509class%253D%2522btn-icon%2522%253E%253Ci%2520class%253D%2522fas%2520fa-arrow-circle-left%2522%253E%253C%252Fi%253E%253C%252Fspan%253ESmall-Go%2520%2509%2509%2509Back%253C%252Fbutton%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520"
289                style="border: 0; transform: scale(1); overflow: hidden"
290                sandbox="allow-scripts allow-same-origin"
291              >
292              </iframe>
293            </code>
294          </div>
295
296          <div>
297            <h2>Social Button Styles</h2>
298            <p>
299              Use your respective social media links in the
300              <span class="primary-text">href of anchor tag</span>.
301            </p>
302          </div>
303
304          <div class="btn-social-box btn-box">
305            <!--twitter-->
306            <button class="btn-social">
307              <a href="https://twitter.com/Ifullofsunshine" target="_blank">
308                <i class="fab fa-twitter button-fab-icons"></i>
309              </a>
310            </button>
311            <!--linked in-->
312            <button class="btn-social">
313              <a
314                href="https://www.linkedin.com/in/saharanitaa1230dreamer/"
315                target="_blank"
316              >
317                <i class="fab fa-linkedin button-fab-icons"></i>
318              </a>
319            </button>
320            <!--github-->
321            <button class="btn-social">
322              <a href="https://github.com/ranitasahaa1230" target="_blank">
323                <i class="fab fa-github button-fab-icons"></i>
324              </a>
325            </button>
326            <!--instagram-->
327            <button class="btn-social">
328              <a
329                href="https://www.instagram.com/suitcase_full_of_sunshine/"
330                target="_blank"
331              >
332                <i class="fab fa-instagram button-fab-icons"></i>
333              </a>
334            </button>
335          </div>
336
337          <div class="code-snippet-display">
338            <code>
339              <iframe
340                src="https://carbon.now.sh/embed?bg=rgba%28171%2C+184%2C+195%2C+1%29&t=night-owl&wt=none&l=elm&width=760&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=false&pv=0px&ph=0px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=%2509%2509%2520%253C%21--twitter--%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cbutton%2520class%2520%253D%2520%2522btn-social%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Ca%2520href%2520%253D%2520%2522https%253A%252F%252Ftwitter.com%252FIfullofsunshine%2522%2520target%253D%2522_blank%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Ci%2520class%253D%2522fab%2520fa-twitter%2522%253E%253C%252Fi%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fa%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fbutton%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%21--linked%2520in--%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cbutton%2520class%2520%253D%2520%2522btn-social%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Ca%2520href%2520%253D%2520%2522https%253A%252F%252Fwww.linkedin.com%252Fin%252Fsaharanitaa1230dreamer%252F%2522%2520target%253D%2522_blank%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Ci%2520class%253D%2522fab%2520fa-linkedin%2522%253E%253C%252Fi%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fa%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fbutton%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%21--github--%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cbutton%2520class%2520%253D%2520%2522btn-social%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Ca%2520href%2520%253D%2520%2522https%253A%252F%252Fgithub.com%252Franitasahaa1230%2522%2520target%253D%2522_blank%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Ci%2520class%253D%2522fab%2520fa-github%2522%253E%253C%252Fi%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fa%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fbutton%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%21--instagram--%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cbutton%2520class%2520%253D%2520%2522btn-social%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Ca%2520href%2520%253D%2520%2522https%253A%252F%252Fwww.instagram.com%252Fsuitcase_full_of_sunshine%252F%2522%2520target%253D%2522_blank%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Ci%2520class%253D%2522fab%2520fa-instagram%2522%253E%253C%252Fi%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fa%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fbutton%253E%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520"
341                style="border: 0; transform: scale(1); overflow: hidden"
342                sandbox="allow-scripts allow-same-origin"
343              >
344              </iframe>
345            </code>
346          </div>
347
348          <div>
349            <h2>Floating Action Button</h2>
350            <p>
351              Floating-action buttons can be customized by adding the
352              font-awesome icon of your choice. This button will be fixed to
353              right-bottom corner.
354            </p>
355          </div>
356
357          <div class="btn-floating-box btn-box">
358            <a href="#" class="action-btn">
359              <button class="btn btn-float-action">
360                <i class="fas fa-arrow-up button-icons"></i>
361              </button>
362            </a>
363            <a href="#down" class="action-btn">
364              <button class="btn btn-float-action">
365                <i class="fas fa-arrow-down button-icons"></i>
366              </button>
367            </a>           
368          </div>
369
370          <div class="code-snippet-display" id="down">
371            <code>
372              <iframe
373              src="https://carbon.now.sh/embed?bg=rgba%28171%2C+184%2C+195%2C+1%29&t=night-owl&wt=none&l=elm&width=655&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=false&pv=0px&ph=0px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=%2509%2509%253Ca%2520href%253D%2522%2523%2522%2520class%253D%2522action-btn%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cbutton%2520class%253D%2522btn%2520btn-float-action%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Ci%2520class%253D%2522fas%2520fa-arrow-up%2520button-icons%2522%253E%253C%252Fi%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fbutton%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fa%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Ca%2520href%253D%2522%2523footer%2522%2520class%253D%2522action-btn%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cbutton%2520class%253D%2522btn%2520btn-float-action%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Ci%2520class%253D%2522fas%2520fa-arrow-down%2520button-icons%2522%253E%253C%252Fi%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fbutton%253E%250A%2520%2520%2520%2520%2520%2520%253C%252Fa%253E%2520%2520%2520%2520%2520%2520%2520%250A%250A"
374              style="border:0; transform: scale(1); overflow:hidden;"
375              sandbox="allow-scripts allow-same-origin">
376            </iframe>
377            </code>
378          </div>
379        </section>
380      </section>
381    </main>
382
383    <footer class="footer">
384      <div>Made with 💕 by Ranita Saha</div>
385      <div class="link-social">
386        <a
387          href="https://github.com/ranitasahaa1230/Kolpotoru-UI-Component-Library"
388          target="_blank"
389          class="nav-pills"
390          ><i class="fab fa-github icon"></i
391        ></a>
392        <a
393          href="https://twitter.com/Ifullofsunshine"
394          target="_blank"
395          class="nav-pills"
396          ><i class="fab fa-twitter icon"></i
397        ></a>
398        <a
399          href="https://www.linkedin.com/in/saharanitaa1230dreamer/"
400          target="_blank"
401          class="nav-pills"
402          ><i class="fab fa-linkedin icon"></i
403        ></a>
404      </div>
405      <span class="footer-copyright">© 2022 || Kolpotoru UI Designs</span>
406    </footer>
407    
408    
408<script src="../../script.js"></script>
408
409  </body>
410</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.