affrabby
Grand Guru
- Joined
- Sep 28, 2018
- Messages
- 487
Step-by-step process of how I created the landing page requested by @nishantg04
Step 1: Upload the Image
I started by uploading this image to use as a reference for my landing page design. This gave me a visual layout to work with.
Step 2: Define the Initial Requirements
Prompt:- "Create this landing page for me as follows:
- Background: White
- Main content: Title: 'Scratch & Win' in large, orange text
- Subtitle: 'Just Install & Register In RummyCircle and Get Instant Cashback'
- Scratchable area: A rectangular box with a light gray background
- Contains a gift box icon surrounded by decorative elements (stars, circles, squiggles)
- Text below: 'Scratch for a surprise!'"
Step 3: Create the HTML Structure
Prompt:- "Provide the HTML code for the landing page based on the specifications."
HTML Code:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reward-box - Scratch & Win</title>
</head>
<body>
<div class="container">
<div class="header">
Reward-box ₹
</div>
<div class="title">Scratch & Win</div>
