chingu-prework-project/index.html at master · echelonCodes/chingu-prework-project · 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
140
141
142
<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/styles.css">
        <title>TickyBot</title>

    </head>
    <body>

    <header id="main-header">

           <nav id="navbar" class="navbar-menu">
                     <ul>
                         <li><a href="#Home">Home</a></li>
                         <li><a href="#About">About</a></li>
                         <li><a href="#Features">Features</a></li>
                         <li><a href="#Add to Slack">Add to Slack</a></li>

                    </ul>

            </nav>

    </header>
    <img id="btn-return-top"src="images/arrow.jpg" alt="arrow" />
    <div id="Home" class="container">

        <section class="main">

           <div>
           <h1>Ticky<span class="bot">Bot</span></h1>
            <span id="message">Let your team manage their support tickets</span> <br /> <div id="message"> 100% Inside Slack </div>


           <a href="#">
          <button class="button">
          <figure class="nested">

          <img class="img-size" src="images/image.png" alt="">

             <span id="btn">
              Add to <strong>Slack</strong>
             </span>

         </figure>
          </button>
          </a>
          </div>

        <aside id="sidebar">
         <figure>
             <img class="ticky"src="images/ticky.png" alt="TickyBot">
         </figure>

        </aside>

        </section>


    </div>
    <div class="about-ticky" id="About">
    <h1 class="header-1"><a >What Is Ticky<span class="bot">Bot</span></a></h1>

       <div class="container-2">

            <section>
                <strong>Ticky</strong>Bot is a Slack Bot that lets you use support tickets on Slack. <br />This way, you don't need to leave your beloved channel to assist your users, if you don't feel like it.
            </section>

            <aside>With <strong>Ticky</strong>Bot you can easily check if you've received new tickets, change their status, or write a reply, and the ticket will instantly update itself on our site.
             </aside>
      </div>
      <p class="para-2">
Support requests shouldn't be handled through Slack's direct messages.<br />
<em>Image about someone asking <a href="">silly questions</a> and the <a href="">workplace admin</a> asking him/her to open a support ticket so other admins could look into <br />the issue.</em>
        </p>
    </div>
      <div class="feature-works" id="Features">

               <h1 class="header-2"><a >How It Works</a></h1>
       <section class="container-3">
        <div >
        <figure id="color1" class="configs appear" fade-in>
            <img id="img" src="images/image1.png" alt="">
            <figcaption class="fig">
You can add TickyBot to your Slack<br/> workplace by scrolling down or<br/> <a href="#">clicking here</a> </figcaption>
        </figure>
        </div>

        <div >
        <figure id="color2" class="configs appear" fade-in>
            <img id="img" src="images/new.png"  alt="">
            <figcaption class="fig">
Your users can open a ticket by typing<br/> <mark>/ticket</mark> and their message into the<br/> chat field</figcaption>
        </figure>
        </div>

        <div >
        <figure id="color3" class="configs appear fig-3" fade-in>
            <img id="img" class="img-3" src="images/image3.png" alt="">
            <figcaption class="fig">Once you or another admin solved their problems you can type <mark>/ticket</mark><br/> <mark>close #id </mark> to close the ticket</figcaption>
        </figure>
        </div>
        </section>

    </div>

    <div class="start-using" id="Add to Slack">
        <section class="container-4">

        <h1 class="header-3">Start Using Ticky<span class="bot">Bot</span> Today</h1>
        <div class="slack-message">TickyBot allows Slack teams to manage their support tickets 100% <br /></div>  <div>inside Slack, without having to switch between different apps.</div>

        <a href=""><button class="button">
                  <figure class="nested">

                  <img class="img-size" src="images/image.png" alt="">

                     <span id="btn">
                      Add to <strong>Slack</strong>
                     </span>

                 </figure>
        </button>
        </a>
        <div>
                <p>... so you don't need to go back and forth with another app.</p>
        </div>
        </section>
    </div>

     <footer id="main-footer">
        <p1>Made with Love by the Chingu Toucans-15 Team</p1>
        <div>Source code is available on our <a href="#">Github</a> page</div>
        <div>The app is not created by, affiliated with, or supported by Slack Technologies, Inc.</div>
    </footer>
    <script src="js/script.js"></script>

    </body>

</html>