Skip to content

Commit

Permalink
scroll animation
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sagar-Sharma-7
Sagar-Sharma-7 committed May 29, 2021
1 parent 7fe9b8f commit 7a88101
Show file tree
Hide file tree
Showing 2 changed files with 78 additions and 72 deletions.
141 changes: 70 additions & 71 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Sagar Sharma">
<link rel="shortcut icon" href="./public/images/logo.jpg" type="image/png">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" integrity="sha512-PgQMlq+nqFLV4ylk1gwUOgm6CtIIXkKwaIHp/PAIWHzig/lKZSEGKEysh0TCVbHJXCLN7WetD8TFecIky75ZfQ==" crossorigin="anonymous" />
<link rel="stylesheet" href="./public/css/style.css">
<title>Gradient Palatte</title>
Expand All @@ -14,15 +15,13 @@

<a name="top"></a>
<header>
<h2>
Gradient Palette
</h2>
<h2></h2>
<button onclick="window.open('https://sagar-sharma-7.github.io/Color-Palette/index.html')">
Color Palette
</button>
</header>

<h1>Click To Copy</h1>
<h1></h1>

<a href="#down">
<button class="navBtn" id="downBtn">&dArr;</button>
Expand All @@ -33,72 +32,72 @@ <h1>Click To Copy</h1>


<div class="container">
<div class="palette">#83EAF1, #63A4FF</div>
<div class="palette">#5E72EB, #FF9190</div>
<div class="palette">#20bf55, #01baef</div>
<div class="palette">#FFB75E, #ED8F03</div>
<div class="palette">#8360c3, #2ebf91</div>
<div class="palette">#76b852, #8DC26F</div>
<div class="palette">#e53935, #e35d5b</div>
<div class="palette">#f46b45, #eea849</div>
<div class="palette">#7b4397, #dc2430</div>
<div class="palette">#20DED3, #F6FBA2</div>
<div class="palette">#f12711, #f5af19</div>
<div class="palette">#ff7920, #3877FF</div>
<div class="palette">#7ee8fa, #eec0c6</div>
<div class="palette">#C33764, #1D2671</div>
<div class="palette">#B993D6, #8CA6DB</div>
<div class="palette">#f1a7f1, #fad0c4</div>
<div class="palette">#E6DADA, #274046</div>
<div class="palette">#ffafbd, #ffc3a0</div>
<div class="palette">#2E3192, #1BFFFF</div>
<div class="palette">#516395, #614385</div>
<div class="palette">#43cea2, #185a9d</div>
<div class="palette">#4568dc, #b06ab3</div>
<div class="palette">#4ca1af, #c4e0e5</div>
<div class="palette">#3a1c71, #ffaf7b</div>
<div class="palette">#ed4264, #ffedbc</div>
<div class="palette">#cfd9df, #e2ebf0</div>
<div class="palette">#a3ddcd, #62ffc0</div>
<div class="palette">#42275a, #734b6d</div>
<div class="palette">#BBDBBE, #DEEBDD</div>
<div class="palette">#89D4CF, #734ae8</div>
<div class="palette">#D65BCA, #21D190</div>
<div class="palette">#0575E6, #021B79</div>
<div class="palette">#A5C7B7, #5D4257</div>
<div class="palette">#eeeeee, #000000</div>
<div class="palette">#26F596, #0499F2</div>
<div class="palette">#FFFBFC, #29E7CD</div>
<div class="palette">#ED4264, #FFFFFF</div>
<div class="palette">#009245, #FCEE21</div>
<div class="palette">#FF512F, #DD2476</div>
<div class="palette">#C6EA8D, #FE90AF</div>
<div class="palette"> #4158D0, #C850C0, #FFCC70</div>
<div class="palette">#38ADAE, #CD295A</div>
<div class="palette">#00B7FF, #FFFFC7</div>
<div class="palette">#85FFBD, #FFFB7D</div>
<div class="palette">#FA8BFF, #2BD2FF, #2BFF88</div>
<div class="palette">#A9C9FF, #FFBBEC</div>
<div class="palette">#00FF5B, #0014FF</div>
<div class="palette">#FFFFFF, #6B00AD</div>
<div class="palette">#00B7FF, #BBBBBB</div>
<div class="palette">#fc575e, #90d5ec</div>
<div class="palette">#a5c7b7, #5d4257</div>
<div class="palette">#d7e1ec, #ffffff</div>
<div class="palette">#85cbcc, #a7d676</div>
<div class="palette">#2980B9, #6DD5FA, #FFFFFF</div>
<div class="palette">#FF0099, #493240</div>
<div class="palette">#e676fc, #3488ff</div>
<div class="palette">#E280E9, #F1D46D</div>
<div class="palette">#B589D6, #552586</div>
<div class="palette">#f1a7f1, #fad0c4</div>
<div class="palette">#274b74, #8233c5, #e963fd</div>
<div class="palette">#276174, #33c58e, #63fd86</div>
<div class="palette">#6fc5e7, #752bff</div>
<div class="palette">#ACFBAF, #63fd86</div>
<div class="palette"> #FF7171, #FF1A1A</div>
<div class="palette"> #1fd1f9, #b621fe</div>
<div class="palette">#e7a977, #ebbe9b</div>
<div class="palette" data-aos="flip-left">#83EAF1, #63A4FF</div>
<div class="palette" data-aos="flip-left">#5E72EB, #FF9190</div>
<div class="palette" data-aos="flip-left">#20bf55, #01baef</div>
<div class="palette" data-aos="flip-left">#FFB75E, #ED8F03</div>
<div class="palette" data-aos="flip-left">#8360c3, #2ebf91</div>
<div class="palette" data-aos="flip-left">#76b852, #8DC26F</div>
<div class="palette" data-aos="flip-left">#e53935, #e35d5b</div>
<div class="palette" data-aos="flip-left">#f46b45, #eea849</div>
<div class="palette" data-aos="flip-left">#7b4397, #dc2430</div>
<div class="palette" data-aos="flip-left">#20DED3, #F6FBA2</div>
<div class="palette" data-aos="flip-left">#f12711, #f5af19</div>
<div class="palette" data-aos="flip-left">#ff7920, #3877FF</div>
<div class="palette" data-aos="flip-left">#7ee8fa, #eec0c6</div>
<div class="palette" data-aos="flip-left">#C33764, #1D2671</div>
<div class="palette" data-aos="flip-left">#B993D6, #8CA6DB</div>
<div class="palette" data-aos="flip-left">#f1a7f1, #fad0c4</div>
<div class="palette" data-aos="flip-left">#E6DADA, #274046</div>
<div class="palette" data-aos="flip-left">#ffafbd, #ffc3a0</div>
<div class="palette" data-aos="flip-left">#2E3192, #1BFFFF</div>
<div class="palette" data-aos="flip-left">#516395, #614385</div>
<div class="palette" data-aos="flip-left">#43cea2, #185a9d</div>
<div class="palette" data-aos="flip-left">#4568dc, #b06ab3</div>
<div class="palette" data-aos="flip-left">#4ca1af, #c4e0e5</div>
<div class="palette" data-aos="flip-left">#3a1c71, #ffaf7b</div>
<div class="palette" data-aos="flip-left">#ed4264, #ffedbc</div>
<div class="palette" data-aos="flip-left">#cfd9df, #e2ebf0</div>
<div class="palette" data-aos="flip-left">#a3ddcd, #62ffc0</div>
<div class="palette" data-aos="flip-left">#42275a, #734b6d</div>
<div class="palette" data-aos="flip-left">#BBDBBE, #DEEBDD</div>
<div class="palette" data-aos="flip-left">#89D4CF, #734ae8</div>
<div class="palette" data-aos="flip-left">#D65BCA, #21D190</div>
<div class="palette" data-aos="flip-left">#0575E6, #021B79</div>
<div class="palette" data-aos="flip-left">#A5C7B7, #5D4257</div>
<div class="palette" data-aos="flip-left">#eeeeee, #000000</div>
<div class="palette" data-aos="flip-left">#26F596, #0499F2</div>
<div class="palette" data-aos="flip-left">#FFFBFC, #29E7CD</div>
<div class="palette" data-aos="flip-left">#ED4264, #FFFFFF</div>
<div class="palette" data-aos="flip-left">#009245, #FCEE21</div>
<div class="palette" data-aos="flip-left">#FF512F, #DD2476</div>
<div class="palette" data-aos="flip-left">#C6EA8D, #FE90AF</div>
<div class="palette" data-aos="flip-left"> #4158D0, #C850C0, #FFCC70</div>
<div class="palette" data-aos="flip-left">#38ADAE, #CD295A</div>
<div class="palette" data-aos="flip-left" >#00B7FF, #FFFFC7</div>
<div class="palette" data-aos="flip-left">#85FFBD, #FFFB7D</div>
<div class="palette" data-aos="flip-left">#FA8BFF, #2BD2FF, #2BFF88</div>
<div class="palette" data-aos="flip-left">#A9C9FF, #FFBBEC</div>
<div class="palette" data-aos="flip-left">#00FF5B, #0014FF</div>
<div class="palette" data-aos="flip-left">#FFFFFF, #6B00AD</div>
<div class="palette" data-aos="flip-left">#00B7FF, #BBBBBB</div>
<div class="palette" data-aos="flip-left">#fc575e, #90d5ec</div>
<div class="palette" data-aos="flip-left">#a5c7b7, #5d4257</div>
<div class="palette" data-aos="flip-left">#d7e1ec, #ffffff</div>
<div class="palette" data-aos="flip-left">#85cbcc, #a7d676</div>
<div class="palette" data-aos="flip-left">#2980B9, #6DD5FA, #FFFFFF</div>
<div class="palette" data-aos="flip-left">#FF0099, #493240</div>
<div class="palette" data-aos="flip-left">#e676fc, #3488ff</div>
<div class="palette" data-aos="flip-left">#E280E9, #F1D46D</div>
<div class="palette" data-aos="flip-left">#B589D6, #552586</div>
<div class="palette" data-aos="flip-left">#f1a7f1, #fad0c4</div>
<div class="palette" data-aos="flip-left">#274b74, #8233c5, #e963fd</div>
<div class="palette" data-aos="flip-left">#276174, #33c58e, #63fd86</div>
<div class="palette" data-aos="flip-left">#6fc5e7, #752bff</div>
<div class="palette" data-aos="flip-left">#ACFBAF, #63fd86</div>
<div class="palette" data-aos="flip-left"> #FF7171, #FF1A1A</div>
<div class="palette" data-aos="flip-left"> #1fd1f9, #b621fe</div>
<div class="palette" data-aos="flip-left" >#e7a977, #ebbe9b</div>


</div>
Expand All @@ -109,7 +108,7 @@ <h1>Click To Copy</h1>
<p>Made with <i class="fas fa-heart" title="love"></i> by Sagar Sharma</p>
</footer>


<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="./public/js/main.js"></script>
</body>
</html>
9 changes: 8 additions & 1 deletion public/js/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,14 @@
AOS.init();

const palette = document.querySelectorAll(".palette");
const h1 = document.querySelector("H1");
const h2 = document.querySelectorAll("H2")

h1.innerHTML = "Click To Copy";
h2.innerHTML = "Gradient Palette";

palette.forEach((linear_gradients) => {
linear_gradients.style.background = `linear-gradient(to right, ${linear_gradients.innerHTML})`
linear_gradients.style.background = `linear-gradient(to right, ${linear_gradients.innerHTML})`;
});

palette.forEach((paletteBox) => {
Expand Down

0 comments on commit 7a88101

Please sign in to comment.