diff --git a/app.js b/app.js
new file mode 100644
index 0000000..0403159
--- /dev/null
+++ b/app.js
@@ -0,0 +1,35 @@
+const colors = ["red","green","rgba(133,122,200)","f15023"];
+const btn = document.getElementById('btn');
+const color = document.querySelector('.color');
+
+btn.addEventListener("click", function(){
+ // get random number between 0-3
+ const randomNumber=getRandomNumber();
+ document.body.style.backgroundColor = colors[randomNumber];
+ color.textContent = colors[randomNumber];
+})
+
+function getRandomNumber(){
+ return Math.floor(Math.random()*colors.length);
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/hex.html b/hex.html
new file mode 100644
index 0000000..9edb80d
--- /dev/null
+++ b/hex.html
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+ hex
+
+
+
+
+
+
+
+
+
background Color:
+ #f1f5f8
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/hex.js b/hex.js
new file mode 100644
index 0000000..3767e0c
--- /dev/null
+++ b/hex.js
@@ -0,0 +1,20 @@
+const hex =[0,1,2,3,4,5,6,7,8,9,"A","B","C","D","E","F"];
+
+// #f15025
+const btn = document.getElementById('btn');
+const color = document.querySelector('.color');
+
+btn.addEventListener("click", function(){
+ let hexColor ='#';
+ for(let i=0; i<6;i++)
+ {
+ hexColor += hex[getRandomNumber()];
+ }
+
+ color.textContent = hexColor;
+ document.body.style.backgroundColor = hexColor;
+})
+
+function getRandomNumber(){
+ return Math.floor(Math.random()*hex.length)
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..990a6ab
--- /dev/null
+++ b/index.html
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
background color :
+ #f1f5f8
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..238f229
--- /dev/null
+++ b/style.css
@@ -0,0 +1,234 @@
+/*
+===============
+Fonts
+===============
+*/
+@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");
+
+/*
+===============
+Variables
+===============
+*/
+
+:root {
+ /* dark shades of primary color*/
+ --clr-primary-1: hsl(205, 86%, 17%);
+ --clr-primary-2: hsl(205, 77%, 27%);
+ --clr-primary-3: hsl(205, 72%, 37%);
+ --clr-primary-4: hsl(205, 63%, 48%);
+ /* primary/main color */
+ --clr-primary-5: hsl(205, 78%, 60%);
+ /* lighter shades of primary color */
+ --clr-primary-6: hsl(205, 89%, 70%);
+ --clr-primary-7: hsl(205, 90%, 76%);
+ --clr-primary-8: hsl(205, 86%, 81%);
+ --clr-primary-9: hsl(205, 90%, 88%);
+ --clr-primary-10: hsl(205, 100%, 96%);
+ /* darkest grey - used for headings */
+ --clr-grey-1: hsl(209, 61%, 16%);
+ --clr-grey-2: hsl(211, 39%, 23%);
+ --clr-grey-3: hsl(209, 34%, 30%);
+ --clr-grey-4: hsl(209, 28%, 39%);
+ /* grey used for paragraphs */
+ --clr-grey-5: hsl(210, 22%, 49%);
+ --clr-grey-6: hsl(209, 23%, 60%);
+ --clr-grey-7: hsl(211, 27%, 70%);
+ --clr-grey-8: hsl(210, 31%, 80%);
+ --clr-grey-9: hsl(212, 33%, 89%);
+ --clr-grey-10: hsl(210, 36%, 96%);
+ --clr-white: #fff;
+ --clr-red-dark: hsl(360, 67%, 44%);
+ --clr-red-light: hsl(360, 71%, 66%);
+ --clr-green-dark: hsl(125, 67%, 44%);
+ --clr-green-light: hsl(125, 71%, 66%);
+ --clr-black: #222;
+ --ff-primary: "Roboto", sans-serif;
+ --ff-secondary: "Open Sans", sans-serif;
+ --transition: all 0.3s linear;
+ --spacing: 0.1rem;
+ --radius: 0.25rem;
+ --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+ --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+ --max-width: 1170px;
+ --fixed-width: 620px;
+}
+/*
+===============
+Global Styles
+===============
+*/
+
+*,
+::after,
+::before {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+body {
+ font-family: var(--ff-secondary);
+ background: var(--clr-grey-10);
+ color: var(--clr-grey-1);
+ line-height: 1.5;
+ font-size: 0.875rem;
+}
+ul {
+ list-style-type: none;
+}
+a {
+ text-decoration: none;
+}
+h1,
+h2,
+h3,
+h4 {
+ letter-spacing: var(--spacing);
+ text-transform: capitalize;
+ line-height: 1.25;
+ margin-bottom: 0.75rem;
+ font-family: var(--ff-primary);
+}
+h1 {
+ font-size: 3rem;
+}
+h2 {
+ font-size: 2rem;
+}
+h3 {
+ font-size: 1.25rem;
+}
+h4 {
+ font-size: 0.875rem;
+}
+p {
+ margin-bottom: 1.25rem;
+ color: var(--clr-grey-5);
+}
+@media screen and (min-width: 800px) {
+ h1 {
+ font-size: 4rem;
+ }
+ h2 {
+ font-size: 2.5rem;
+ }
+ h3 {
+ font-size: 1.75rem;
+ }
+ h4 {
+ font-size: 1rem;
+ }
+ body {
+ font-size: 1rem;
+ }
+ h1,
+ h2,
+ h3,
+ h4 {
+ line-height: 1;
+ }
+}
+/* global classes */
+
+/* section */
+.section {
+ padding: 5rem 0;
+}
+
+.section-center {
+ width: 90vw;
+ margin: 0 auto;
+ max-width: 1170px;
+}
+@media screen and (min-width: 992px) {
+ .section-center {
+ width: 95vw;
+ }
+}
+main {
+ min-height: 100vh;
+ display: grid;
+ place-items: center;
+}
+
+/*
+===============
+Nav
+===============
+*/
+nav {
+ background: var(--clr-white);
+ height: 3rem;
+ display: grid;
+ align-items: center;
+ box-shadow: var(--dark-shadow);
+}
+.nav-center {
+ width: 90vw;
+ max-width: var(--fixed-width);
+ margin: 0 auto;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+.nav-center h4 {
+ margin-bottom: 0;
+ color: var(--clr-primary-5);
+}
+.nav-links {
+ display: flex;
+}
+nav a {
+ text-transform: capitalize;
+ font-weight: 700;
+ font-size: 1rem;
+ color: var(--clr-primary-1);
+ letter-spacing: var(--spacing);
+ margin-right: 1rem;
+}
+nav a:hover {
+ color: var(--clr-primary-5);
+}
+/*
+===============
+Container
+===============
+*/
+main {
+ min-height: calc(100vh - 3rem);
+ display: grid;
+ place-items: center;
+}
+.container {
+ text-align: center;
+}
+.container h2 {
+ background: var(--clr-black);
+ color: var(--clr-white);
+ padding: 1rem;
+ border-radius: var(--radius);
+ margin-bottom: 2.5rem;
+}
+.color {
+ color: var(--clr-primary-5);
+}
+.btn-hero {
+ font-family: var(--ff-primary);
+ text-transform: uppercase;
+ background: transparent;
+ color: var(--clr-black);
+ letter-spacing: var(--spacing);
+ display: inline-block;
+ font-weight: 700;
+ transition: var(--transition);
+ border: 2px solid var(--clr-black);
+ cursor: pointer;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+ border-radius: var(--radius);
+ font-size: 1rem;
+ padding: 0.75rem 1.25rem;
+}
+.btn-hero:hover {
+ color: var(--clr-white);
+ background: var(--clr-black);
+}