Skip to content

Commit

Permalink
First Commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sagar-Sharma-7
Sagar-Sharma-7 committed Mar 15, 2021
0 parents commit 767d5ba
Show file tree
Hide file tree
Showing 11 changed files with 1,063 additions and 0 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
node_modules
79 changes: 79 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
## Searching for colors for your project?
## Don't worry just click on the link below.
### [Color Palette]()

### ```NOTE: Open the above link in Google Chrome...```

## If you have any color which you want to be part of my color palette then please pull request or write hex code of color in issues...
<hr>

<p align="center">
<img src="public/images/result1.png" title="result">
<br>
<br>
<img src="public/images/result2.png" title="result">
<br>
<br>
<img src="public/images/result3.png">
</p>

<hr>
<br>

![vscode](https://img.shields.io/badge/Visual_Studio_Code-0078D4?style=for-the-badge&logo=visual%20studio%20code&logoColor=black)

<p float="left">

![html](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)
![css](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)
![js](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)
![node](https://img.shields.io/badge/Node.js-43853D?style=for-the-badge&logo=node.js&logoColor=white)
![express](https://img.shields.io/badge/express-000000?style=for-the-badge&logo=express&logoColor=white)

</p>
<hr>
<br>

## How to get ExpressJS ?
1. First make a package.json file using npm command **`$ npm init`**
2. Then type second command to get express **`$ npm i express`**
3. Now you can check your dependences in **package.json**


## Fonts used in Color Palette
```css
@import url('https://fonts.googleapis.com/css2?family=Merienda:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');

.div1{
font-family: 'Merienda', cursive;
}
.div2{
font-family: 'Special Elite', cursive;
}
```

## Cloning this repositary using command line
1. Open **Git Bash**.
1. Change the current working directory to the location where you want the cloned directory.
1. Type `git clone https://github.com/Sagar-Sharma-7/Color-Palette.git`
1. Press **Enter** to create the clone of this repositary.


## How to reach me?
[ ![ForTheBadge makes-people-smile](https://img.shields.io/badge/Gmail-D14836?style=for-the-badge&logo=gmail&logoColor=white)](mailto:[email protected])
<hr>
<br>

[![Follower](https://img.shields.io/github/followers/sagar-sharma-7?style=social)](https://github.com/Sagar-Sharma-7)
<hr>
<p float="left">

[![ForTheBadge built-with-love](https://forthebadge.com/images/badges/built-with-love.svg)](https://github.com/Sagar-Sharma-7)
[ ![ForTheBadge makes-people-smile](https://forthebadge.com/images/badges/makes-people-smile.svg)](https://github.com/Sagar-Sharma-7)

</p>


[![alttext](https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white)](https://github.com/Sagar-Sharma-7)
![License: MIT](https://img.shields.io/badge/License-MIT-black.svg)
130 changes: 130 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>Color Palette</title>
</head>
<body>
<div class="header">
<h2>Color Palette</h2>
<!-- <h2><a href=""></a></h2> for future editing -->
</div>
<h1>Click To Copy</h1>
<div id="color-container">
<h3>Feeling Blue</h3>
<div id="blue" class="outer-box">
<div class="box blue-box">#3944F7</div>
<div class="box blue-box">#256AE5</div>
<div class="box blue-box">#1184E8</div>
<div class="box blue-box"> #4C8BF5</div>
<div class="box blue-box">#1B98F5</div>
<div class="box blue-box">#92B4F2</div>
</div>

<h3>Feeling Orange</h3>
<div id="orange" class="outer-box">
<div class="box orange-box">#F95700FF</div>
<div class="box orange-box">#FF6600</div>
<div class="box orange-box">#FF781F</div>
<div class="box orange-box">#FF8B3D</div>
<div class="box orange-box">#FF9D5C</div>
<div class="box orange-box">#F2A580</div>
</div>

<h3>Feeling Green</h3>
<div id="green" class="outer-box">
<div class="box green-box">#08DB0F</div>
<div class="box green-box">#09F311</div>
<div class="box green-box">#2FF635</div>
<div class="box green-box">#56F85B</div>
<div class="box green-box">#7DF981</div>
<div class="box green-box">#ACFBAF</div>
</div>

<h3>Feeling Yellow</h3>
<div id="yellow" class="outer-box">
<div class="box yellow-box">#FFFD1A</div>
<div class="box yellow-box">#FFDD3C</div>
<div class="box yellow-box">#FFEA61</div>
<div class="box yellow-box">#FFFE67</div>
<div class="box yellow-box">#FFF192</div>
<div class="box yellow-box">#FFFFB7</div>
</div>

<h3>Feeling Pink</h3>
<div id="pink" class="outer-box">
<div class="box pink-box">#EB008E</div>
<div class="box pink-box">#FE29A9</div>
<div class="box pink-box">#FE48B6</div>
<div class="box pink-box">#FE68C3</div>
<div class="box pink-box">#FE89D0</div>
<div class="box pink-box">#FEB1E0</div>
</div>

<h3>Feeling Grey</h3>
<div id="grey" class="outer-box">
<div class="box grey-box">#333333</div>
<div class="box grey-box">#555555</div>
<div class="box grey-box">#777777</div>
<div class="box grey-box">#999999</div>
<div class="box grey-box">#BBBBBB</div>
<div class="box grey-box">#DDDDDD</div>
</div>

<h3>Feeling Red</h3>
<div id="red" class="outer-box">
<div class="box red-box">#9C0000</div>
<div class="box red-box">#9A0000</div>
<div class="box red-box">#BB0000</div>
<div class="box red-box">#DD0000</div>
<div class="box red-box">#EE0000</div>
<div class="box red-box">#FF0000</div>
</div>

<h3>Feeling Great</h3>
<div id="great" class="outer-box">
<div class="box great-box">#1DE9B6</div>
<div class="box great-box">#85FFF6</div>
<div class="box great-box"> #00E1FF</div>
<div class="box great-box">#B6DCB6</div>
<div class="box great-box">#FCB6D0</div>
<div class="box great-box">#FAD4C0</div>
<div class="box great-box">#E8175D</div>
<div class="box great-box">#1E1E1E</div>
<div class="box great-box">#F8B195</div>
<div class="box great-box">#03DAC5</div>
<div class="box great-box">#BB86FC</div>
<div class="box great-box"> #44008B</div>
<div class="box great-box"> #00B7FF</div>
<div class="box great-box"> #00FFFF</div>
<div class="box great-box"> #F700FF</div>
<div class="box great-box"> #FF7171</div>
<div class="box great-box">#8AFFBB</div>
<div class="box great-box"> #8A92FF</div>
</div>

<br>
<footer>
<h3>Find Your Favourite Color</h3>
<p>Click here👇👇👇</p>
<div id="color-pickr">
<input type="color"id="color-inp">
<br>
<button id="copyBtn">Copy Hex Code</button>
</div>
<br>

<hr width="100%">
<br>
<a href="https://github.com/Sagar-Sharma-7" target="_blank" title="github">Contribute to my <i class="fab fa-github"></i></a>

<p>Made with <i class="fas fa-heart" title="love"></i> by Sagar Sharma</p>

</footer>
</div>
<script src="./public/js/main.js"></script>
</body>
</html>
Loading

0 comments on commit 767d5ba

Please sign in to comment.