upsteer.github.io/index.html at master · upsteer/upsteer.github.io · 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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Upsteer</title>

    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom fonts for this template -->
    <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>

    <!-- Plugin CSS -->
    <link href="vendor/magnific-popup/magnific-popup.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/creative.css" rel="stylesheet">
    <style type="text/css">
      #animate{
        stroke-dasharray: 210;
        stroke-dashoffset: 210;
        animation: sign 3s ease;
        animation-fill-mode: forwards;
      }
      @keyframes sign{
        to{
          stroke-dashoffset: 0;
        }
      }
      #animate1{
        stroke-dasharray: 358;
        stroke-dashoffset: 358;
        animation: sign1 3s ease;
        animation-fill-mode: forwards;
      }
      @keyframes sign1{
        to{
          stroke-dashoffset: 0;
        }
      }
      #animate2{
        stroke-dasharray: 85;
        stroke-dashoffset: 85;
        animation: sign2 3s ease;
        animation-fill-mode: forwards;
      }
      @keyframes sign2{
        to{
          stroke-dashoffset: 0;
        }
      }
      #animate3{
        stroke-dasharray: 111;
        stroke-dashoffset: 111;
        animation: sign3 3s ease;
        animation-fill-mode: forwards;
      }
      @keyframes sign3{
        to{
          stroke-dashoffset: 0;
        }
      }
      #animate4{
        stroke-dasharray: 36;
        stroke-dashoffset: 36;
        animation: sign4 3s ease;
        animation-fill-mode: forwards;
      }
      @keyframes sign4{
        to{
          stroke-dashoffset: 0;
        }
      }
      #animate5{
        stroke-dasharray: 23;
        stroke-dashoffset: 23;
        animation: sign5 3s ease;
        animation-fill-mode: forwards;
      }
      @keyframes sign5{
        to{
          stroke-dashoffset: 0;
        }
      }
      #animate6{
        stroke-dasharray: 78;
        stroke-dashoffset: 78;
        animation: sign6 3s ease;
        animation-fill-mode: forwards;
      }
      @keyframes sign6{
        to{
          stroke-dashoffset: 0;
        }
      }
      #animate7{
        stroke-dasharray: 27;
        stroke-dashoffset: 27;
        animation: sign7 3s ease;
        animation-fill-mode: forwards;
      }
      @keyframes sign7{
        to{
          stroke-dashoffset: 0;
        }
      }
    </style>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
  </head>

  <body id="page-top">

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
      <div class="container">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#about">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <header class="masthead text-center text-white d-flex">
      <div class="container my-auto">
        <div class="row">
          <div class="col-lg-10 mx-auto">
            <h1 class="text-uppercase customFont">
              <svg width="746" height="511" viewBox="0 0 746 511" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path id="animate" d="M207.324 189.44C206.614 230.749 205.905 272.057 205.196 313.366C204.864 332.677 205.266 352.149 203.7 371.405C202.949 380.625 201.878 390.137 201.719 399.375" stroke="grey" stroke-width="3" stroke-linecap="round"/>
              <path id="animate1" d="M185.31 190.062C202.961 200.957 219.698 213.416 236.656 225.338C249.779 234.562 264.276 241.975 277.044 251.646C280.607 254.345 263.233 261.685 261.294 262.822C253.707 267.268 243.476 270.568 237.326 276.968C235.488 278.88 231.986 280.204 236.198 281.171C250.73 284.507 263.296 303.341 271.749 314.064C284.241 329.91 295.637 346.601 307.584 362.853C321.747 382.12 336.702 400.839 350.492 420.376C352.85 423.717 353.434 426.704 357.25 428.049" stroke="grey" stroke-width="3" stroke-linecap="round"/>
              <path id="animate2" d="M327.314 307.517C320.116 317.237 325.264 333.677 338.996 332.666C344.927 332.229 349.883 327.554 351.516 321.879C352.151 319.67 352.148 317.442 352.187 315.167C352.329 306.864 334.521 307.66 329.331 306.551" stroke="grey" stroke-width="3" stroke-linecap="round"/>
              <path id="animate3" d="M371.964 328.286C368.584 323.466 366.701 308.049 370.958 302.765C377.627 294.488 387.456 299.811 387.28 310.047C387.253 311.633 387.083 321.488 387.155 317.323C387.238 312.472 386.162 306.546 389.186 302.578C392.548 298.167 399.646 296.562 402.171 303.579C404.476 309.987 404.178 316.149 404.063 322.837" stroke="grey" stroke-width="3" stroke-linecap="round"/>
              <path id="animate4" d="M424.558 294.184C424.417 302.387 423.802 310.74 424.633 318.911C425.012 322.639 426.004 326.469 425.939 330.213" stroke="grey" stroke-width="3" stroke-linecap="round"/>
              <path id="animate5" d="M421.833 278.135C424.744 278.696 427.81 279.495 427.876 275.683C427.921 273.039 428.191 272.243 425.435 272.196C421.235 272.124 419.625 275.724 421.815 279.135" stroke="red" stroke-width="3" stroke-linecap="round"/>
              <path id="animate6" d="M445.846 277.547C445.626 290.379 445.406 303.21 445.185 316.042C445.046 324.189 453.853 328.588 460.746 328.811C464.688 328.938 474.649 330.63 477.018 326.089" stroke="grey" stroke-width="3" stroke-linecap="round"/>
              <path id="animate7" d="M437.624 290.408C446.623 291.476 455.56 291.716 464.603 291.871" stroke="grey" stroke-width="3" stroke-linecap="round"/>
              </svg>
            </h1>
            <hr>
          </div>
          <div class="col-lg-8 mx-auto">
            <p class="text-faded mb-5">Computer Engineer</p>
            <a class="btn btn-primary btn-xl js-scroll-trigger" href="#about">Button That Takes You Down!</a>
          </div>
        </div>
      </div>
    </header>

    <section class="bg-primary-change" id="about">
      <div class="container">
        <div class="row">
          <div class="col-lg-8 mx-auto text-center">
            <h2 class="section-heading text-white">Beautiful is what we see, more beautiful is what we know, most beautiful by far is what we don't.
</h2>
            <hr class="light my-4">
            <p class="text-faded mb-4">Nicholas Steno</p>
            <a class="btn btn-light btn-xl js-scroll-trigger" href="#love">Find Out How I made this Site!</a>
          </div>
        </div>
      </div>
    </section>


    <section class="bg-dark text-white" id="love">
      <div class="container text-center">
        <h2 class="mb-4 text-light">Made with Love</h2>
              <i class="fa fa-4x fa-heart icon-red mb-3 sr-icons"></i>
              <p class="text-muted mb-0">You have to make everything with love these days!</p>
    </section>


    <footer class="footer text-center" background = "black">
     <div class="wrapper">
      <p class="text-muted mb-0">Keep in Touch!</p>
    </section>
     <ul class="social-icons icon-circle icon-rotate list-unstyled list-inline">
        <li><a href="https://www.facebook.com/upsteer"><i class="fa fa-facebook"></i></a> </li>
        <li><a href="https://www.twitter.com/upsteer"><i class="fa fa-twitter"></i></a> </li>
        <li> <a href="https://www.linkedin.com/in/romit-khanal-225727101/"><i class="fa fa-linkedin"></i></a> </li>
        <li> <a href="https://www.github.com/upsteer"><i class="fa fa-github"></i></a> </li>
        <li> <a href="https://www.instagram.com/khanalromit"><i class="fa fa-instagram instagram"></i></a> </li>
      </ul>
    </div>
    </footer>
    <!-- Bootstrap core JavaScript -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Plugin JavaScript -->
    <script src="vendor/jquery-easing/jquery.easing.min.js"></script>
    <script src="vendor/scrollreveal/scrollreveal.min.js"></script>
    <script src="vendor/magnific-popup/jquery.magnific-popup.min.js"></script>

    <!-- Custom scripts for this template -->
    <script src="js/creative.min.js"></script>

  </body>

</html>