<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Complex Nested Structure</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<style>
.box {
border: 2px solid #000;
margin: 10px;
padding: 10px;
border-radius: 5px;
transition: all 0.3s ease;
}
.box-1 {
background-color: #f9f9f9;
}
.box-2 {
background-color: #e9e9e9;
}
.box-3 {
background-color: #d9d9d9;
}
.box-4 {
background-color: #c9c9c9;
}
.box-5 {
background-color: #b9b9b9;
}
.box:hover {
transform: scale(1.05);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.highlight {
background-color: yellow;
font-weight: bold;
animation: flash 1s infinite;
}
.italic {
font-style: italic;
}
.shadow {
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.dashed {
border-style: dashed;
}
.dotted {
border-style: dotted;
}
.gradient {
background: linear-gradient(45deg, #ff9a9e, #fad0c4);
}
ul {
list-style-type: square;
}
ol {
list-style-type: upper-roman;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
border: 1px solid #000;
padding: 8px;
text-align: left;
}
.circle {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #ffebcd;
display: inline-block;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 5px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.flex-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.flex-item {
flex: 1 1 200px;
border: 1px solid #ccc;
padding: 10px;
background-color: #fff;
}
form {
margin-top: 20px;
}
input,
select,
textarea,
button {
display: block;
margin: 10px 0;
padding: 5px;
font-size: 16px;
}
a {
color: blue;
text-decoration: underline;
}
.button-primary {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.button-primary:hover {
background-color: #0056b3;
}
.button-secondary {
background-color: #6c757d;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.button-secondary:hover {
background-color: #5a6268;
}
@keyframes flash {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
</style>
</head>
<body>
<div class="box box-1 animate__animated animate__bounceIn">
Level 1
<div class="box box-2 animate__animated animate__fadeInLeft">
Level 2
<div class="box box-3 animate__animated animate__fadeInRight">
Level 3
<div class="box box-4 animate__animated animate__fadeInUp">
Level 4
<div class="box box-5 animate__animated animate__fadeInDown">
Level 5
<div id="target" class="flex-container">
<div class="flex-item">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>
Item 3
<ol>
<li>Sub-item A</li>
<li>Sub-item B</li>
<li>Sub-item C</li>
</ol>
</li>
</ul>
</div>
<div class="flex-item">
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Row 1 Col 1</td>
<td>Row 1 Col 2</td>
<td>Row 1 Col 3</td>
</tr>
<tr>
<td>Row 2 Col 1</td>
<td>Row 2 Col 2</td>
<td>Row 2 Col 3</td>
</tr>
</table>
</div>
<div class="flex-item gradient">
Gradient Background
<div class="tooltip">
Hover me
<span class="tooltiptext">Tooltip Text</span>
</div>
<div class="circle"></div>
</div>
<div
class="flex-item gradient"
style="
border: 2px solid #000;
margin: 10px;
padding: 10px;
border-radius: 5px;
transition: all 0.3s ease;
background-color: #b9b9b9;
transform: scale(1.05);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
background: linear-gradient(45deg, #ff9a9e, #fad0c4);
"
>
All Styles Applied
</div>
</div>
<div class="text-center shadow">
<p class="highlight">Highlighted Centered Text</p>
<p class="italic">Italic Centered Text</p>
</div>
<div>
<form>
<label for="name">Name:</label>
<input
type="text"
id="name"
name="name"
placeholder="Enter your name"
/>
<label for="email">Email:</label>
<input
type="email"
id="email"
name="email"
placeholder="Enter your email"
/>
<label for="gender">Gender:</label>
<select id="gender" name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
<label for="message">Message:</label>
<textarea
id="message"
name="message"
rows="4"
placeholder="Write your message"
></textarea>
<button type="submit" class="button-primary">Submit</button>
<button type="reset" class="button-secondary">Reset</button>
</form>
</div>
<div>
<p>
Visit our
<a href="https://example.com" target="_blank">website</a> for
more information.
</p>
</div>
<div>
<button
onclick="alert('Button Clicked!')"
class="button-primary"
>
Click Me
</button>
<button class="button-secondary">Another Button</button>
</div>
</div>
</div>
</div>
</div>
</div>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter