HTML idea Generater code for free
index.html
1
<html>2
<head>3
<meta charset="UTF-8">4
<meta name="viewport" content="width=device-width, initial-scale=1.0">5
<title>Random HTML Ideas Generator App</title>6
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">7
<style>8
body {9
background-color: #f8f9fa;10
color: #333;11
font-family: Arial, sans-serif;12
display: flex;13
justify-content: center;14
align-items: center;15
height: 100vh;16
}17
18
.container {19
max-width: 500px;20
text-align: center;21
padding: 20px;22
border-radius: 10px;23
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);24
background-color: #fff;25
}26
27
h1 {28
color: #007bff;29
}30
31
p {32
font-size: 1.2rem;33
margin-bottom: 20px;34
}35
36
.btn-generate {37
background-color: #28a745;38
color: #fff;39
padding: 10px 20px;40
border: none;41
border-radius: 5px;42
cursor: pointer;43
transition: background-color 0.3s;44
}45
46
.btn-generate:hover {47
background-color: #218838;48
}49
50
.idea {51
font-size: 1.5rem;52
margin-top: 40px;53
}54
55
@keyframes pulse {56
0% {57
transform: scale(1);58
}59
50% {60
transform: scale(1.1);61
}62
100% {63
transform: scale(1);64
}65
}66
67
.animated {68
animation: pulse 2s infinite;69
}70
</style>71
</head>72
<body>73
<div class="container">74
<h1>Random HTML Ideas Generator App</h1>75
<p>Click the button below to generate a random HTML idea!</p>76
<button class="btn-generate" onclick="generateIdea()">Generate Idea</button>77
<div class="idea" id="idea"></div>78
</div>79
80
<script>81
const ideas = [82
"Create a colorful landing page with animated elements",83
"Build a responsive gallery using HTML, CSS, and JavaScript",84
"Design a CSS-only animated navigation menu",85
"Develop a contact form with validation using HTML5",86
"Implement a responsive pricing table for a product page"87
];88
89
function generateIdea() {90
const randomIndex = Math.floor(Math.random() * ideas.length);91
document.getElementById('idea').innerText = ideas[randomIndex];92
document.getElementById('idea').classList.add('animated');93
setTimeout(() => {94
document.getElementById('idea').classList.remove('animated');95
}, 2000);96
}97
</script>98
99
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>100
</body>101
</html>styles.css
1
/* Replace with your CSS Code 2
(Leave empty if not needed) */ 3
main.js
1
/* Replace with your JS Code 2
(Leave empty if not needed) */3
