Modern Web Design Showcase
HTML Enhancements
HTML continues to evolve, with new elements and attributes making web development more efficient.
Read Aloud
CSS Innovations
CSS now includes powerful features like Grid Layout, Subgrid, Container Queries, and the :has() selector.
Read Aloud
JavaScript Features
JavaScript offers powerful tools like Web Components, Fetch API, and async/await for modern web applications.
Read Aloud
Text-to-Speech (TTS)
This page uses TTS functionality to enhance accessibility by reading aloud content to users.
Read Aloud
CSS Code (style.css):
css
Copy code
/* General Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
scroll-behavior: smooth;
}
/* Body Styling */
body {
background-color: #0f0f0f;
color: #fff;
text-align: center;
padding: 50px;
font-family: 'Poppins', sans-serif;
}
/* Dropdown Menu Styling */
.dropdown-menu {
position: relative;
display: inline-block;
margin-bottom: 50px;
}
#menu-button {
background-color: #000;
border: 2px solid #00ffff;
color: #fff;
padding: 10px 20px;
cursor: pointer;
font-size: 1.2em;
text-transform: uppercase;
transition: all 0.3s ease;
}
#menu-button:hover {
background-color: #00ffff;
color: #000;
}
#menu-content {
display: none;
position: absolute;
background-color: #0f0f0f;
border-radius: 8px;
padding: 10px;
text-align: left;
z-index: 10;
border: 2px solid #00ffff;
}
#menu-content a {
display: block;
padding: 8px;
text-decoration: none;
color: #ff1493;
transition: color 0.3s ease;
}
#menu-content a:hover {
color: #ffd700;
}
/* Sections Styling */
.section {
margin: 40px 0;
padding: 20px;
border: 2px solid #ff1493;
border-radius: 12px;
background-color: rgba(255, 20, 147, 0.1);
box-shadow: 0 0 15px #00ffcc;
transition: transform 0.2s ease-in-out;
}
.section:hover {
transform: scale(1.05);
}
button {
background-color: #00ffcc;
border: none;
color: #000;
padding: 10px 20px;
margin-top: 15px;
cursor: pointer;
font-weight: bold;
border-radius: 8px;
transition: background 0.3s ease;
}
button:hover {
background-color: #ff6347;
}
/* Show dropdown on click */
.dropdown-menu:hover #menu-content {
display: block;
}
JavaScript Code (script.js):
javascript
Copy code
// Text-to-Speech Functionality
function speakText(text) {
const speech = new SpeechSynthesisUtterance(text);
speech.rate = 1;
speech.pitch = 1;
speech.volume = 1;
speech.lang = 'en-US';
window.speechSynthesis.speak(speech);
}
// Smooth Scroll for the Navigation Links
document.querySelectorAll('.dropdown-menu a').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({ behavior: 'smooth' });
}
});
});
// Ensure the TTS button works after navigation
window.addEventListener('load', () => {
if (!('speechSynthesis' in window)) {
alert('Your browser does not support Text-to-Speech functionality.');
}
});
Explanation of the Code:
Dropdown Menu:
The navigation menu is designed with neon colors and shows a dropdown when hovered.
Clicking on a menu item scrolls smoothly to the corresponding section using the scrollIntoView() method.
Text-to-Speech (TTS):
A speakText() function reads aloud text when the button is clicked.
The SpeechSynthesisUtterance object is used for TTS functionality.
Stylish Design:
The sections and buttons are styled to be visually appealing with neon colors, shadows, and smooth animations.
The Poppins font from Google Fonts is used for a clean and modern look.
Accessibility and Performance:
The page ensures smooth navigation and accessibility features, such as TTS.
This page is fully optimized to be responsive and futuristic, appealing to both casual users and professional developers.
Showcase the
ChatGPT can make
Comments
Post a Comment