-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
54 lines (50 loc) · 2.87 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Gradient Palette is a user-friendly and creative web application designed for artists,
designers, and developers seeking to enhance their projects with stunning color gradients. The website offers an intuitive
and visually appealing interface that allows users to explore, create, and customize beautiful gradients effortlessly.">
<meta name="author" content="Sagar Sharma">
<meta property="og:title" content="Gradient Palette">
<meta property="og:description" content="Gradient Palette is a user-friendly and creative web application designed for artists,
designers, and developers seeking to enhance their projects with stunning color gradients. The website offers an intuitive
and visually appealing interface that allows users to explore, create, and customize beautiful gradients effortlessly.">
<!-- <meta property="og:image" content="URL to the image associated with your portfolio"> -->
<!-- <meta property="og:url" content="URL of your portfolio website"> -->
<meta property="og:type" content="Design and coding">
<meta property="og:locale" content="en_UK" />
<link rel="shortcut icon" href="./public/images/title_logo.png" type="image/png">
<link rel="stylesheet" href="./public/style/style.css">
<title>Gradient Palette</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<header>
<div id="logo">
<img src="./public/images/logo.png" alt="Gradient Palette Logo image">
</div>
<div id="social_btn">
<button class="insta_btn"><i class="fa-brands fa-instagram"></i> <span> Follow on Instagram</span></button>
<button class="github_btn"><i class="fa-brands fa-github"></i></button>
</div>
</header>
<div class="container">
<div class="palettes_wrap">
<!-- generating palette divs using javascript -->
</div>
<div class="copy_wrap">
<div class="hexcode">
<div class="color1 color"></div>
<div class="code1 code"></div>
<div class="arrow"><i class="fa-solid fa-arrow-right"></i></div>
<div class="color2 color"></div>
<div class="code2 code"></div>
</div>
<div class="toggle_down"><i class="fa-solid fa-angle-down"></i></div>
<button class="copy_btn">Copy CSS</button>
</div>
<script src="./public/js/main.js" type="module"></script>
</body>
</html>