Skip to content

Commit

Permalink
header style
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sagar-Sharma-7
Sagar-Sharma-7 committed Jul 24, 2023
1 parent 591b919 commit fa3da7f
Show file tree
Hide file tree
Showing 8 changed files with 80 additions and 618 deletions.
212 changes: 20 additions & 192 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,205 +2,33 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./public/images/logo2.png" type="image/x-icon">
<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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<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>
<a name="top"></a>

<div class="copy_div">
<div class="copy_msg">
<h3 id="code">linear-gradient(to right, rgb(105, 36, 255), rgb(150, 102, 255))</h3>
<h3><i class="fa-solid fa-square-check"></i> COPIED</h3>
</div>
</div>
<header>
<img src="./public/images/gradient-palette-icon.png" alt="logo">
<h2>Click on palette to copy</h2>
</header>

<div id="navigator">
<a href="#top">
<button class="nav_btn upward">
<i class="fa-solid fa-arrow-up"></i>
</button>
</a>
<a href="#bottom">
<button class="nav_btn downward">
<i class="fa-solid fa-arrow-down"></i>
</button>
</a>
</div>




<div class="container">
<div class="palettes">
<div class="box horizontal1"></div>
<div class="box horizontal2"></div>
<div class="box vertical1"></div>
<div class="box vertical2"></div>
</div>

<div class="palettes">
<div class="box horizontal1"></div>
<div class="box horizontal2"></div>
<div class="box vertical1"></div>
<div class="box vertical2"></div>
</div>

<div class="palettes">
<div class="box horizontal1"></div>
<div class="box horizontal2"></div>
<div class="box vertical1"></div>
<div class="box vertical2"></div>
</div>

<div class="palettes">
<div class="box horizontal1"></div>
<div class="box horizontal2"></div>
<div class="box vertical1"></div>
<div class="box vertical2"></div>
</div>

<div class="palettes">
<div class="box horizontal1"></div>
<div class="box horizontal2"></div>
<div class="box vertical1"></div>
<div class="box vertical2"></div>
</div>

<div class="palettes">
<div class="box horizontal1"></div>
<div class="box horizontal2"></div>
<div class="box vertical1"></div>
<div class="box vertical2"></div>
</div>

<div class="palettes">
<div class="box horizontal1"></div>
<div class="box horizontal2"></div>
<div class="box vertical1"></div>
<div class="box vertical2"></div>
</div>

<div class="palettes">
<div class="box horizontal1"></div>
<div class="box horizontal2"></div>
<div class="box vertical1"></div>
<div class="box vertical2"></div>
</div>

<div class="palettes">
<div class="box horizontal1"></div>
<div class="box horizontal2"></div>
<div class="box vertical1"></div>
<div class="box vertical2"></div>
</div>

<div class="palettes">
<div class="box horizontal1"></div>
<div class="box horizontal2"></div>
<div class="box vertical1"></div>
<div class="box vertical2"></div>
</div>

<div class="palettes">
<div class="box horizontal1"></div>
<div class="box horizontal2"></div>
<div class="box vertical1"></div>
<div class="box vertical2"></div>
<div id="logo">
<img src="./public/images/logo.png" alt="Gradient Palette Logo image">
</div>

<div class="palettes">
<div class="box horizontal1"></div>
<div class="box horizontal2"></div>
<div class="box vertical1"></div>
<div class="box vertical2"></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>

<div class="palettes">
<div class="box horizontal1"></div>
<div class="box horizontal2"></div>
<div class="box vertical1"></div>
<div class="box vertical2"></div>
</div>

<div class="palettes">
<div class="box horizontal1"></div>
<div class="box horizontal2"></div>
<div class="box vertical1"></div>
<div class="box vertical2"></div>
</div>

<div class="palettes">
<div class="box horizontal1"></div>
<div class="box horizontal2"></div>
<div class="box vertical1"></div>
<div class="box vertical2"></div>
</div>

<div class="palettes">
<div class="box horizontal1"></div>
<div class="box horizontal2"></div>
<div class="box vertical1"></div>
<div class="box vertical2"></div>
</div>

<div class="palettes">
<div class="box horizontal1"></div>
<div class="box horizontal2"></div>
<div class="box vertical1"></div>
<div class="box vertical2"></div>
</div>

<div class="palettes">
<div class="box horizontal1"></div>
<div class="box horizontal2"></div>
<div class="box vertical1"></div>
<div class="box vertical2"></div>
</div>

<div class="palettes">
<div class="box horizontal1"></div>
<div class="box horizontal2"></div>
<div class="box vertical1"></div>
<div class="box vertical2"></div>
</div>

<div class="palettes">
<div class="box horizontal1"></div>
<div class="box horizontal2"></div>
<div class="box vertical1"></div>
<div class="box vertical2"></div>
</div>

<div class="palettes">
<div class="box horizontal1"></div>
<div class="box horizontal2"></div>
<div class="box vertical1"></div>
<div class="box vertical2"></div>
</div>

<div class="palettes">
<div class="box horizontal1"></div>
<div class="box horizontal2"></div>
<div class="box vertical1"></div>
<div class="box vertical2"></div>
</div>


</div>


<a name="bottom"></a>

<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> -->
<script src="./public/js/main.js" type="module"></script>
</header>
</body>
</html>
Binary file removed public/images/gradient-palette-icon.png
View file
Binary file not shown.
Binary file modified public/images/logo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed public/images/logo2.png
View file
Binary file not shown.
Binary file added public/images/title_logo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit fa3da7f

Please sign in to comment.