UI-mate/documentation.html at main · Anand0605/UI-mate · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="nkStyle.css">
    <link rel="stylesheet" href="./component.css">
    <link rel="stylesheet" href="Anand.css">
    <link rel="stylesheet" href="componant.css">
    <link rel="stylesheet" href="card.css">

    <title>ANIX</title>
</head>

<body>

    <nav>
        <div class="left-nav">
            <img src="./img/logo1.png" alt="" height="80px">
        </div>
        <div class="right-nav">
            <ul>
                <li><a href="https://github.com/ashutosh2720"><img src="./img/github.png" alt=""></a></li>
                <li><a href="https://www.linkedin.com/in/ashutosh-singh-292b13197/"><img src="./img/linkedin.png" alt=""></a></li>
                <li><a href="index.html"><img src="https://cdn-icons-png.flaticon.com/128/25/25694.png" alt="" height="30px"></a></li>
            </ul>
        </div>
    </nav>


    <div class="docs">
        <div class="left-docs">
            <img src="./img/started.png" alt="" style="height:30px"><h1 style="font-size:25px">Geting Started</h1>
            <ul>
                <li><a href="#intro">Introduction</a></li>
                <li><a href="#navbar">Installation</a></li>
                <hr style="width: 200px">
                <img  src="./img/component.png" alt="" style="height:40px"><h1 style="font-size:25px">Components</h1>
                <li><a href="#button">Buton</a></li>
                <li><a href="#cards">cards</a></li>
                <li><a href="#spinners">spinners</a></li>
                <li><a href="#login">login</a></li>
                <li><a href="#badge">badge</a></li>
                <li><a href="#form">form</a></li>
                <li><a href="#accordian">accordian</a></li>
                <li><a href="#link">link</a></li>
                <li><a href="#button">button</a></li>
                <li><a href="#sidebar">sidebar</a></li>
                <li><a href="#heading">heading</a></li>
                <li><a href="#avater">avater</a></li>
                <li><a href="#icons">icons</a></li>
                <li><a href="#social">social</a></li>
                <li><a href="#myname">myname</a></li>
                <li><a href="#yourname">yourname</a></li>
            </ul>

        </div>

        <div class="right-docs">

           <div id="intro">
            <h1>Getting Started with <span style="color:rgb(33, 123, 128)"> ANIX</span></h1><br><hr>
            <h3>ANIX is a powerful, feature-packed frontend Component Library. Just Think what you want to Build on your website and WebHelpUI Provides it in just a minutes.</h3><br>

            <h1>Quick start</h1><br><hr>
            <h3>Get started by including WenHelpUI production-ready CSS and JavaScript via CDN links without the need for any build steps</h3><br><br><br>
            <h3>1. Create a new <span style="color: rgb(33, 123, 128)"> index.html </span>file in your project root. Include the <meta name="viewport"> tag as well for proper responsive behavior in mobile devices.Create a new index.html file in your project root. Include the <meta name="viewport"> tag as well for proper responsive behavior in mobile devices.</h3>
            <iframe
            src="https://carbon.now.sh/embed?bg=rgba%28124%2C222%2C10%2C1%29&t=base16-dark&wt=none&l=htmlmixed&width=680&ds=false&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=0px&ph=0px&ln=false&fl=1&fm=Fira+Code&fs=18px&lh=152%25&si=false&es=2x&wm=false&code=%253C%21doctype%2520html%253E%250A%253Chtml%2520lang%253D%2522en%2522%253E%250A%2520%2520%2520%2520%253Chead%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Cmeta%2520charset%253D%2522utf-8%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Cmeta%2520name%253D%2522viewport%2522%2520content%253D%2522width%253Ddevice-width%252C%2520initial-scale%253D1%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Ctilte%253EANIX%2520demo%2520%253C%252Ftilte%253E%250A%2520%2520%2520%2520%253C%252Fhead%253E%250A%2520%2520%2520%2520%253Cbody%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Ch1%253Ehello%2520world%2520%25F0%259F%2598%258A%253C%252Fh1%253E%250A%2520%2520%2520%2520%253C%252Fbody%253E%250A%253C%252Fhtml%253E"
            style="width: 874px; height: 358px; border:0; transform: scale(1); overflow:hidden;margin-left: 200px;margin-top: 20px;"
            sandbox="allow-scripts allow-same-origin">
          </iframe>
          <h3>2. Include WebHelpUI's CSS and JS. &Place the <link> tag in the <head></head> for our CSS, and the <script></script> tag for our JavaScript bundle before the closing </body></h3>

          <iframe
          src="https://carbon.now.sh/embed?bg=rgba%28124%2C222%2C10%2C1%29&t=base16-dark&wt=none&l=htmlmixed&width=680&ds=false&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=0px&ph=0px&ln=false&fl=1&fm=Fira+Code&fs=18px&lh=152%25&si=false&es=2x&wm=false&code=%253C%21doctype%2520html%253E%250A%253Chtml%2520lang%253D%2522en%2522%253E%250A%2520%2520%2520%2520%253Chead%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Cmeta%2520charset%253D%2522utf-8%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Cmeta%2520name%253D%2522viewport%2522%2520content%253D%2522width%253Ddevice-width%252C%2520initial-scale%253D1%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Ctilte%253EANIX%2520demo%2520%253C%252Ftilte%253E%250A%2520%2520%2520%2520%253C%252Fhead%253E%250A%2520%2520%2520%2520%253Cbody%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253Ch1%253Ehello%2520world%2520%25F0%259F%2598%258A%253C%252Fh1%253E%250A%2520%2520%2520%2520%253C%252Fbody%253E%250A%253C%252Fhtml%253E"
          style="width: 874px; height: 358px; border:0; transform: scale(1); overflow:hidden;margin-left: 200px;margin-top: 20px;"
          sandbox="allow-scripts allow-same-origin">
        </iframe>


<div id="button">
    <h1>Buttons</h1><br><br><hr>
    <h3>Buttons are very important part of any website because buttons can link all the things and gives a good user experience.</h3>

    <h3> ANIX provides different categories of buttons, you can pick any of them according to your requirement</h3><br><br>

    <h2>1. Solid Buttons <br>
    2.Outlined Buttons <br>
    3. Tag Buttons <br>
     </h2><br><br><hr><br><br>

     <h1>Solid Buttons</h1><br>
     <h2>These buttons are build with <span style="color: rgb(33, 123, 128)"> button</span> tag and  <span style="color: rgb(33, 123, 128);">anchor </span>tag so you can add link here also</h2>
     <br><br>
     <div class="bt">
     <a href="#"><button class="btn btn-primary">Primary</button></a>
     <a href="#"><button class="btn btn-secondary">Secondry</button></a>
     <a href="#"><button class="btn btn-success">Success</button></a>
     <a href="#"><button class="btn btn-danger">Danger</button></a>
     <a href="#"><button class="btn btn-warning">Warning</button></a>
     <a href="#"><button class="btn btn-info">Info</button></a>
     <a href="#"><button class="btn btn-light">Light</button></a>
     <a href="#"><button class="btn btn-dark">Dark</button></a>
    </div>
    <iframe
  src="https://carbon.now.sh/embed?bg=rgba%2812%2C105%2C214%2C1%29&t=base16-dark&wt=none&l=htmlmixed&width=680&ds=false&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=0px&ph=0px&ln=false&fl=1&fm=Fira+Code&fs=18px&lh=152%25&si=false&es=2x&wm=false&code=%253Ca%2520href%253D%2522%2523%2522%253E%253Cbutton%2520class%253D%2522btn%2520btn-primary%2522%253EPrimary%253C%252Fbutton%253E%253C%252Fa%253E%250A%253Ca%2520href%253D%2522%2523%2522%253E%253Cbutton%2520class%253D%2522btn%2520btn-secondary%2522%253ESecondry%253C%252Fbutton%253E%253C%252Fa%253E%250A%2520%2520%253Ca%2520href%253D%2522%2523%2522%253E%253Cbutton%2520class%253D%2522btn%2520btn-success%2522%253ESuccess%253C%252Fbutton%253E%253C%252Fa%253E%250A%2520%2520%253Ca%2520href%253D%2522%2523%2522%253E%253Cbutton%2520class%253D%2522btn%2520btn-danger%2522%253EDanger%253C%252Fbutton%253E%253C%252Fa%253E%250A%2520%2520%253Ca%2520href%253D%2522%2523%2522%253E%253Cbutton%2520class%253D%2522btn%2520btn-warning%2522%253EWarning%253C%252Fbutton%253E%253C%252Fa%253E%250A%2520%2520%253Ca%2520href%253D%2522%2523%2522%253E%253Cbutton%2520class%253D%2522btn%2520btn-info%2522%253EInfo%253C%252Fbutton%253E%253C%252Fa%253E%250A%2520%2520%253Ca%2520href%253D%2522%2523%2522%253E%253Cbutton%2520class%253D%2522btn%2520btn-light%2522%253ELight%253C%252Fbutton%253E%253C%252Fa%253E%250A%2520%2520%2520%253Ca%2520href%253D%2522%2523%2522%253E%253Cbutton%2520class%253D%2522btn%2520btn-dark%2522%253EDark%253C%252Fbutton%253E%253C%252Fa%253E"
  style="width: 974px; height: 276px; border:0; transform: scale(1); overflow:hidden; margin-left: 220px; margin-top: 30px;"
  sandbox="allow-scripts allow-same-origin">
</iframe><br><br><hr>

  <h1>Outlined Buttons</h1><br><br>
  <h2>These buttons are build with button tag and anchor tag so you can add link here. If you not need to add link in button then you can just remove anchor tag.</h2><br><br>
   <div class="bt">
    <a href="#"><button class="btn btn-outline-primary">Primary</button></a>
    <a href="#"><button class="btn btn-outline-secondary">Secondary</button></a>
    <a href="#"><button class="btn btn-outline-success">Success</button></a>
    <a href="#"><button class="btn btn-outline-danger">Danger</button></a>
    <a href="#"><button class="btn btn-outline-warning">Warning</button></a>
    <a href="#"><button class="btn btn-outline-info">Info</button></a>
    <a href="#"><button class="btn btn-outline-light">Light</button></a>
    <a href="#"><button class="btn btn-outline-dark">Dark</button></a>
   </div>

   <iframe
   src="https://carbon.now.sh/embed?bg=rgba%28124%2C222%2C10%2C1%29&t=base16-dark&wt=none&l=htmlmixed&width=680&ds=false&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=0px&ph=0px&ln=false&fl=1&fm=Fira+Code&fs=18px&lh=152%25&si=false&es=2x&wm=false&code=%253Ca%2520href%253D%2522%2523%2522%253E%253Cbutton%2520class%253D%2522btn%2520btn-outline-primary%2522%253EPrimary%253C%252Fbutton%253E%253C%252Fa%253E%250A%2520%2520%2520%2520%253Ca%2520href%253D%2522%2523%2522%253E%253Cbutton%2520class%253D%2522btn%2520btn-outline-secondary%2522%253ESecondary%253C%252Fbutton%253E%253C%252Fa%253E%250A%2520%2520%2520%2520%253Ca%2520href%253D%2522%2523%2522%253E%253Cbutton%2520class%253D%2522btn%2520btn-outline-success%2522%253ESuccess%253C%252Fbutton%253E%253C%252Fa%253E%250A%2520%2520%2520%2520%253Ca%2520href%253D%2522%2523%2522%253E%253Cbutton%2520class%253D%2522btn%2520btn-outline-danger%2522%253EDanger%253C%252Fbutton%253E%253C%252Fa%253E%250A%2520%2520%2520%2520%253Ca%2520href%253D%2522%2523%2522%253E%253Cbutton%2520class%253D%2522btn%2520btn-outline-warning%2522%253EWarning%253C%252Fbutton%253E%253C%252Fa%253E%250A%2520%2520%2520%2520%253Ca%2520href%253D%2522%2523%2522%253E%253Cbutton%2520class%253D%2522btn%2520btn-outline-info%2522%253EInfo%253C%252Fbutton%253E%253C%252Fa%253E%250A%2520%2520%2520%2520%253Ca%2520href%253D%2522%2523%2522%253E%253Cbutton%2520class%253D%2522btn%2520btn-outline-light%2522%253ELight%253C%252Fbutton%253E%253C%252Fa%253E%250A%2520%2520%2520%2520%253Ca%2520href%253D%2522%2523%2522%253E%253Cbutton%2520class%253D%2522btn%2520btn-outline-dark%2522%253EDark%253C%252Fbutton%253E%253C%252Fa%253E"
   style="width: 1019px; height: 276px; border:0; transform: scale(1); overflow:hidden;margin-left: 200px;margin-top: 30px;"
   sandbox="allow-scripts allow-same-origin">
 </iframe>


</div>
 <div></div>
</body>

</html>