forked from CodeChefVIT/Shortify
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
149 lines (149 loc) · 14 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.8/fullpage.min.css">
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
<title>Shortify</title>
</head>
<body>
<nav>
<h1>shortify</h1>
<ul>
<li class="nav-active"><a href="#first">Home</a></li>
<li><a href="#second">Uses</a></li>
<li><a href="#third">Card</a></li>
<li class="login-container"><div class="login"><a href="./login.html">Login</a></div></li>
</ul>
<div class="hamburger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<div class="modal"></div>
<div id="fullpage">
<section class="section" id="home">
<h1>
<span class="head-h1">Shortify</span>
<span class="home-head">A URL shortening and analysis website.</span>
<a href="#third"><button class="headder-button">Shorten</button></a>
</h1>
<div class="cranes">
<span class="head"></span>
<span class="neck"></span>
<span class="side"></span>
<span class="wing"></span>
<span class="tail"></span>
<span class="belly"></span>
</div>
<div class="arrow">
<div class="line"></div>
<div class="head">
<div class="right"></div>
<div class="left"></div>
</div>
</div>
</section>
<section class="section" id="knowMore">
<svg width="761" height="701" viewBox="0 0 761 701" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="undraw_link_shortener_mvf6 1" clip-path="url(#clip0)">
<g id="Vector" filter="url(#filter0_d)">
<path id="Vector_1" d="M50.1765 241.34C72.615 254.84 81.2567 281.654 81.2567 281.654C81.2567 281.654 53.5186 286.581 31.0802 273.081C8.64174 259.581 0 232.767 0 232.767C0 232.767 27.7381 227.841 50.1765 241.34Z" fill="#A8A8A9"/>
</g>
<path id="Vector_2" d="M41.634 248.923C54.0624 271.972 80.44 281.867 80.44 281.867C80.44 281.867 86.6671 254.391 74.2387 231.342C61.8103 208.293 35.4327 198.399 35.4327 198.399C35.4327 198.399 29.2056 225.874 41.634 248.923Z" fill="#2F2E41"/>
<path id="Vector_3" d="M761 623.71C761 648.011 703.245 700.71 632 700.71C560.755 700.71 503 648.011 503 623.71C503 599.41 560.755 612.71 632 612.71C703.245 612.71 761 599.41 761 623.71Z" fill="#3F3D56"/>
<path id="Vector_4" opacity="0.1" d="M761 623.71C761 648.011 703.245 700.71 632 700.71C560.755 700.71 503 648.011 503 623.71C503 599.41 560.755 612.71 632 612.71C703.245 612.71 761 599.41 761 623.71Z" fill="black"/>
<path id="Vector_5" d="M632 667.71C703.245 667.71 761 648.011 761 623.71C761 599.41 703.245 579.71 632 579.71C560.755 579.71 503 599.41 503 623.71C503 648.011 560.755 667.71 632 667.71Z" fill="#3F3D56"/>
<path id="Vector_6" d="M486 301.71H76V535.71H486V301.71Z" fill="#F1F1F1"/>
<path id="Vector_7" d="M677.5 77.7102C699.315 77.7102 717 61.1448 717 40.7102C717 20.2757 699.315 3.71024 677.5 3.71024C655.685 3.71024 638 20.2757 638 40.7102C638 61.1448 655.685 77.7102 677.5 77.7102Z" fill="#2F2E41"/>
<path id="Vector_8" d="M562.5 271.21L552.5 285.21C552.5 285.21 504.5 295.21 522.5 310.21C540.5 325.21 566.5 296.21 566.5 296.21L580.5 278.21L562.5 271.21Z" fill="#FFB8B8"/>
<path id="Vector_9" d="M614.5 112.21C614.5 112.21 601.5 112.21 598.5 130.21C595.5 148.21 592.5 208.21 592.5 208.21C592.5 208.21 550.5 263.21 557.5 270.21C564.5 277.21 572.5 290.21 577.5 288.21C582.5 286.21 625.5 227.21 625.5 227.21L614.5 112.21Z" fill="#8D8C99"/>
<path id="Vector_10" opacity="0.1" d="M614.5 112.21C614.5 112.21 601.5 112.21 598.5 130.21C595.5 148.21 592.5 208.21 592.5 208.21C592.5 208.21 550.5 263.21 557.5 270.21C564.5 277.21 572.5 290.21 577.5 288.21C582.5 286.21 625.5 227.21 625.5 227.21L614.5 112.21Z" fill="black"/>
<path id="Vector_11" d="M654.5 61.2102C654.5 61.2102 653.5 100.21 641.5 102.21C629.5 104.21 633.5 117.21 633.5 117.21C633.5 117.21 672.5 140.21 698.5 117.21L703.5 105.21C703.5 105.21 685.5 92.2102 693.5 74.2102L654.5 61.2102Z" fill="#FFB8B8"/>
<path id="Vector_12" d="M587.5 301.21C587.5 301.21 528.5 411.21 550.5 445.21C572.5 479.21 605.5 549.21 610.5 549.21C615.5 549.21 643.5 535.21 641.5 526.21C639.5 517.21 609.5 450.21 601.5 444.21C593.5 438.21 597.5 422.21 598.5 421.21C599.5 420.21 632.5 367.21 632.5 367.21C632.5 367.21 631.5 451.21 635.5 464.21C639.5 477.21 634.5 570.21 639.5 574.21C644.5 578.21 667.5 585.21 671.5 579.21C675.5 573.21 687.5 482.21 679.5 461.21L694.5 317.21L587.5 301.21Z" fill="#2F2E41"/>
<path id="Vector_13" d="M641.5 568.21L616.5 614.21C616.5 614.21 580.5 640.21 605.5 644.21C630.5 648.21 645.5 638.21 645.5 638.21L667.5 622.21V576.21L641.5 568.21Z" fill="#2F2E41"/>
<path id="Vector_14" d="M607.5 542.21L620.5 573.21C620.5 573.21 625.5 586.21 620.5 589.21C615.5 592.21 601.5 610.21 610.5 612.21C612.311 612.565 614.15 612.748 615.995 612.757C623.49 612.883 630.932 611.491 637.875 608.666C644.817 605.841 651.116 601.64 656.393 596.317L664.5 588.21C664.5 588.21 636.73 524.262 637.115 524.736C637.5 525.21 607.5 542.21 607.5 542.21Z" fill="#2F2E41"/>
<path id="Vector_15" d="M679.5 85.2102C698.278 85.2102 713.5 69.9879 713.5 51.2102C713.5 32.4326 698.278 17.2102 679.5 17.2102C660.722 17.2102 645.5 32.4326 645.5 51.2102C645.5 69.9879 660.722 85.2102 679.5 85.2102Z" fill="#FFB8B8"/>
<path id="Vector_16" d="M699 98.7102L688.5 109.21C688.5 109.21 656.5 121.21 641.5 109.21C641.5 109.21 647 97.7102 647 98.7102C647 99.7102 603.5 106.21 599.5 124.21C595.5 142.21 602.5 173.21 602.5 173.21C602.5 173.21 574.5 305.21 585.5 308.21C596.5 311.21 699.5 336.21 698.5 317.21C697.5 298.21 706.5 220.21 706.5 220.21L741.5 153.21C741.5 153.21 736.5 131.21 724.5 124.21C712.5 117.21 699 98.7102 699 98.7102Z" fill="#5E5E66"/>
<path id="Vector_17" d="M654.5 294.21L641.5 302.21C641.5 302.21 591.5 336.21 617.5 342.21C643.5 348.21 658.5 318.21 658.5 318.21L668.5 306.21L654.5 294.21Z" fill="#FFB8B8"/>
<path id="Vector_18" opacity="0.1" d="M728.5 147.21L737.5 156.21C737.5 156.21 743.5 240.21 731.5 257.21C719.5 274.21 664.5 320.21 661.5 317.21C658.5 314.21 639.5 299.21 643.5 297.21C647.5 295.21 700.683 239.641 700.683 239.641L696.5 162.21L728.5 147.21Z" fill="black"/>
<path id="Vector_19" d="M732.5 144.21L741.5 153.21C741.5 153.21 747.5 237.21 735.5 254.21C723.5 271.21 668.5 317.21 665.5 314.21C662.5 311.21 643.5 296.21 647.5 294.21C651.5 292.21 704.683 236.641 704.683 236.641L700.5 159.21L732.5 144.21Z" fill="#787884"/>
<path id="Vector_20" d="M665.438 2.91536C665.438 2.91536 653.881 -1.28738 638.121 7.64342L646.526 9.74479C646.526 9.74479 633.918 10.7955 632.342 27.6064H638.121C638.121 27.6064 634.443 42.3159 638.121 46.5187L640.485 42.0533L647.314 55.7121L648.89 48.8827L652.042 49.9334L654.143 38.9012C654.143 38.9012 659.397 46.7813 663.6 47.3067V40.4772C663.6 40.4772 675.157 53.6108 678.834 53.0854L673.581 45.7307L680.936 47.3067L677.784 42.0533L696.696 47.3067L692.493 42.0533L705.627 46.256L711.931 48.8827C711.931 48.8827 720.862 28.3944 708.254 14.2102C695.645 0.0259562 677.259 -3.12606 665.438 2.91536Z" fill="#2F2E41"/>
<path id="Vector_21" d="M335.098 428.793C334.258 429.322 333.389 429.813 332.491 430.267C325.186 433.941 316.721 434.567 308.955 432.008C301.189 429.449 294.755 423.914 291.064 416.617L284.412 403.426L288.877 401.175L295.529 414.366C297.056 417.398 299.166 420.099 301.737 422.316C304.309 424.532 307.292 426.22 310.515 427.284C313.739 428.347 317.141 428.764 320.527 428.512C323.912 428.261 327.215 427.344 330.246 425.815C333.277 424.287 335.977 422.176 338.192 419.603C340.407 417.03 342.093 414.047 343.155 410.822C344.216 407.598 344.632 404.195 344.378 400.81C344.125 397.425 343.206 394.123 341.676 391.093L313.739 335.699C312.211 332.669 310.101 329.97 307.53 327.755C304.959 325.54 301.976 323.854 298.753 322.792C295.53 321.73 292.129 321.313 288.745 321.566C285.361 321.818 282.059 322.734 279.029 324.263C275.999 325.791 273.3 327.901 271.085 330.472C268.871 333.043 267.184 336.026 266.123 339.249C265.061 342.472 264.644 345.873 264.896 349.257C265.148 352.641 266.065 355.943 267.593 358.973L277.484 378.585L273.019 380.836L263.128 361.224C259.448 353.92 258.819 345.454 261.379 337.687C263.94 329.92 269.48 323.488 276.782 319.806C284.085 316.123 292.55 315.492 300.318 318.05C308.086 320.608 314.52 326.147 318.204 333.448L346.141 388.841C349.591 395.683 350.371 403.563 348.33 410.948C346.288 418.333 341.572 424.694 335.098 428.793Z" fill="#3F3D56"/>
<path id="Vector_22" d="M337.8 497.165C336.972 497.687 336.113 498.172 335.223 498.622C327.917 502.296 319.453 502.922 311.687 500.363C303.921 497.804 297.487 492.269 293.796 484.973L265.86 429.579C262.177 422.275 261.546 413.808 264.105 406.039C266.665 398.27 272.207 391.836 279.51 388.153C286.814 384.47 295.281 383.839 303.05 386.398C310.819 388.958 317.253 394.5 320.936 401.803L328.275 416.355L323.81 418.606L316.471 404.054C314.943 401.024 312.833 398.325 310.262 396.11C307.69 393.896 304.708 392.209 301.485 391.147C298.262 390.085 294.861 389.669 291.477 389.921C288.093 390.173 284.791 391.09 281.761 392.618C278.731 394.146 276.032 396.256 273.817 398.827C271.603 401.399 269.916 404.381 268.854 407.604C267.792 410.827 267.376 414.228 267.628 417.612C267.88 420.996 268.797 424.298 270.325 427.328L298.261 482.721C299.788 485.753 301.898 488.455 304.469 490.671C307.04 492.888 310.023 494.576 313.247 495.639C316.471 496.702 319.873 497.12 323.259 496.868C326.644 496.616 329.947 495.699 332.978 494.171C336.009 492.642 338.709 490.531 340.924 487.958C343.139 485.386 344.825 482.402 345.887 479.177C346.948 475.953 347.364 472.551 347.11 469.165C346.856 465.78 345.938 462.478 344.408 459.448L334.792 440.381L339.256 438.13L348.873 457.197C352.315 464.045 353.089 471.929 351.042 479.316C348.996 486.702 344.276 493.064 337.8 497.165Z" fill="#3F3D56"/>
<path id="Vector_23" d="M537 537.71H75V280.71H537V537.71ZM77 535.71H535V282.71H77V535.71Z" fill="#2F2E41"/>
</g>
<defs>
<filter id="filter0_d" x="-4" y="231.89" width="89.2567" height="58.6409" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<clipPath id="clip0">
<rect width="761" height="700.71" fill="white"/>
</clipPath>
</defs>
</svg>
<div class="info left">
<div class="img">
<div class="bar-graph">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="horizon"></div>
</div>
</div>
<p class="cont">Shorten your link size, grow your business</p>
</div>
<div class="info right">
<div class="img">
<div class="manage">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
</div>
<p class="cont">Get more manageable and easy to track links. </p>
</div>
<div class="arrow">
<div class="line"></div>
<div class="head">
<div class="right"></div>
<div class="left"></div>
</div>
</div>
</section>
<section class="section" id="card">
<div class="paper-container">
<div class="paper">
<div class="paper-upper effect">
<div class="paper-upper-front">
<p class="card-text">Enter your link here!</p>
</div>
<div class="paper-upper-back">
<p class="card-text" style="transform:rotateZ(180deg)">Loading...</p>
</div>
</div>
<div class="paper-lower">
<input type="text" class="" placeholder="Enter link" onclick="copyfn()" value=''>
<button class="card-submit">Submit</button>
</div>
</div>
</div>
</div>
</section>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.8/fullpage.min.js"></script>
<script src="./script.js"></script>
</body>
</html>