From a7f42b4bc577d974b34a93013920252c1e382b8a Mon Sep 17 00:00:00 2001
From: Dunsin <jesudunsinfaiye@gmail.com>
Date: Mon, 8 Aug 2022 09:49:19 +0100
Subject: [PATCH] feat(index.html): create the basic structure for the content
 of gradient background generator

fix #29
---
 index.html | 45 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)

diff --git a/index.html b/index.html
index 50bc4fa2..a03239c1 100644
--- a/index.html
+++ b/index.html
@@ -225,6 +225,51 @@ <h2>Gradient Background</h2>
 							</div>
 						</div>
 					</div>
+					<div class="modal-main-content" data-modal="gradient-background">
+						<div class="input">
+							<p>Pick Your Colors:</p>
+
+							<label for="colorPicker">
+								<input
+									type="color"
+									value="#1DB8CE"
+									id="gradient-background-color1"
+								/>
+								<span>First Color</span>
+							</label>
+
+							<label for="colorPicker">
+								<input
+									type="color"
+									value="#1DB4CE"
+									id="gradient-background-color2"
+								/>
+								<span>Second Color</span>
+							</label>
+
+							<label id="degree">
+								<span>Slide to change the degree</span>
+								<input
+									type="range"
+									max="360"
+									min="0"
+									id="gradient-background-degree"
+								/>
+							</label>
+
+							<div class="btn" data-button="gradient-background">
+								Get Result
+							</div>
+						</div>
+						<div class="download-output">
+							<div class="output"></div>
+							<div class="download-btn">
+								<button class="btn" data-download="gradient-background-code">
+									Get Code
+								</button>
+							</div>
+						</div>
+					</div>
 				</div>
 			</div>
 		</main>