feat(index.html): create the basic structure for the content of gradient background generator

fix #29

Author: Dun-sin

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>