Scribd
Upload
6 views

untitled

The document is an HTML template for a website titled 'Cute Teal Design' featuring a welcoming interface with tabs for Home, Gallery, Contact, and About sections. It includes styled elements such as buttons, forms, and images, all designed with a pastel teal color scheme. The JavaScript functionality allows users to switch between different tab contents seamlessly.

Uploaded by

shengni734
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
6 views

untitled

The document is an HTML template for a website titled 'Cute Teal Design' featuring a welcoming interface with tabs for Home, Gallery, Contact, and About sections. It includes styled elements such as buttons, forms, and images, all designed with a pastel teal color scheme. The JavaScript functionality allows users to switch between different tab contents seamlessly.

Uploaded by

shengni734
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cute Teal Design</title>
<style>
/* Overall Page Style */
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #a0d8d3, #a6f7ff);
color: #4e4e4e;
margin: 0;
padding: 0;
}

h1, h2 {
text-align: center;
color: #3e5c5b;
}

.container {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
}

/* Tabs Section */
.tabs {
display: flex;
justify-content: center;
background-color: #ffffff;
padding: 10px;
border-radius: 10px;
margin-bottom: 20px;
}

.tab {
padding: 10px 20px;
background-color: #4bd0c7;
margin: 5px;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
}

.tab:hover {
background-color: #6ee0d6;
}

.tab-content {
display: none;
background-color: #f0ffff;
padding: 20px;
border-radius: 10px;
width: 80%;
max-width: 500px;
}
.tab-content.active {
display: block;
}

/* Button Style */
.button {
background-color: #ff9a8b;
color: white;
border: none;
padding: 12px 30px;
margin: 10px;
border-radius: 30px;
cursor: pointer;
font-size: 16px;
transition: all 0.3s ease;
}

.button:hover {
background-color: #ff6b5b;
}

/* Form Inputs */
input[type="text"], input[type="email"], input[type="number"], textarea {
width: 100%;
padding: 10px;
margin: 5px 0;
border-radius: 5px;
border: 1px solid #4bd0c7;
font-size: 16px;
}

/* Cute Icon Styles */


.icon {
width: 40px;
height: 40px;
margin: 10px;
}

/* Footer */
footer {
margin-top: 40px;
text-align: center;
font-size: 14px;
color: #4e4e4e;
}
</style>
</head>
<body>

<div class="container">
<h1>Welcome to the Cute Teal Corner!</h1>
<p>Choose an option below to explore.</p>

<!-- Tabs Section -->


<div class="tabs">
<div class="tab" id="tab1">Home</div>
<div class="tab" id="tab2">Gallery</div>
<div class="tab" id="tab3">Contact</div>
<div class="tab" id="tab4">About</div>
</div>

<!-- Tab Content -->


<div class="tab-content" id="content1">
<h2>Welcome Home!</h2>
<p>This is your cute home section. Relax and enjoy the pastel teal
vibes!</p>
<button class="button">Explore More</button>
</div>

<div class="tab-content" id="content2">


<h2>Gallery</h2>
<p>Here are some cute and colorful images to brighten your day!</p>
<img class="icon" src="https://via.placeholder.com/150/4bd0c7"
alt="Image 1">
<img class="icon" src="https://via.placeholder.com/150/ff9a8b"
alt="Image 2">
<img class="icon" src="https://via.placeholder.com/150/a0d8d3"
alt="Image 3">
</div>

<div class="tab-content" id="content3">


<h2>Contact Us</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" placeholder="Your Name">
<label for="email">Email:</label>
<input type="email" id="email" placeholder="Your Email">
<label for="message">Message:</label>
<textarea id="message" placeholder="Your Message"></textarea>
<button type="submit" class="button">Send</button>
</form>
</div>

<div class="tab-content" id="content4">


<h2>About Us</h2>
<p>We are a small team dedicated to spreading cuteness everywhere! Our
mission is to bring a smile to your face.</p>
</div>
</div>

<footer>
<p>&copy; 2025 Cute Teal Designs | All Rights Reserved</p>
</footer>

<script>
// Tab switching functionality
const tabs = document.querySelectorAll('.tab');
const contents = document.querySelectorAll('.tab-content');

tabs.forEach(tab => {
tab.addEventListener('click', () => {
// Hide all content
contents.forEach(content => {
content.classList.remove('active');
});

// Show the clicked tab's content


const contentId = `content${tab.id.charAt(3)}`;
document.getElementById(contentId).classList.add('active');
});
});
</script>

</body>
</html>

You might also like