<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to Our Homepage</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h1>Welcome to Our Homepage</h1>
<p>This is a sample homepage.</p>
<button>Learn More</button>
</section>
<section id="about">
<h2>About Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
<section id="contact">
<h2>Get in Touch</h2>
<p>Email: <a href="mailto:info@example.com">info@example.com</a></p>
</section>
</main>
<footer>
<p>© 2023 Our Website</p>
</footer>
</body>
</html>
/* Global Styles */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f9f9f9;
}
/* Header Styles */
header {
background-color: #333;
color: #fff;
padding: 1em;
text-align: center;
}
header nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
}
header nav ul li {
margin-right: 20px;
}
header nav a {
color: #fff;
text-decoration: none;
}
/* Main Styles */
main {
max-width: 800px;
margin: 40px auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
section {
margin-bottom: 40px;
}
h1, h2 {
color: #333;
margin-bottom: 10px;
}
button {
background-color: #333;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #555;
}
/* Footer Styles */
footer {
background-color: #333;
color: #fff;
padding: 1em;
text-align: center;
clear: both;
}
footer p {
margin-bottom: 10px;
}
// Header Styles
header {
background-color: #333;
color: #fff;
padding: 1em;
text-align: center;
nav {
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
}
li {
margin-right: 20px;
}
a {
color: #fff;
text-decoration: none;
}
}
}
// Main Styles
main {
max-width: 800px;
margin: 40px auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
section {
margin-bottom: 40px;
}
h1, h2 {
color: #333;
margin-bottom: 10px;
}
button {
background-color: #333;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
&:hover {
background-color: #555;
}
}
// Footer Styles
footer {
background-color: #333;
color: #fff;
padding: 1em;
text-align: center;
clear: both;
p {
margin-bottom: 10px;
}
}
// Add event listener to the button
document.querySelector('button').addEventListener('click', () => {
alert('Learn more about us!');
});
// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Add active class to navigation links on scroll
window.addEventListener('scroll', () => {
let current = '';
document.querySelectorAll('section').forEach(section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (pageYOffset >= sectionTop - sectionHeight / 3) {
current = section.getAttribute('id');
}
});
document.querySelectorAll('nav ul li a').forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href').includes(current)) {
link.classList.add('active');
}
});
});
<?php
// Define variables
$title = 'Welcome to Our Homepage';
$description = 'This is a sample homepage.';
// Include header
include 'header.php';
?>
<main>
<section id="home">
<h1><?php echo $title; ?></h1>
<p><?php echo $description; ?></p>
<button>Learn More</button>
</section>
<section id="about">
<h2>About Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
<section id="contact">
<h2>Get in Touch</h2>
<p>Email: <a href="mailto:info@example.com">info@example.com</a></p>
</section>
</main>
<?php
// Include footer
include 'footer.php';
?>
fun main() {
println("Simple Calculator")
println("1. Addition")
println("2. Subtraction")
println("3. Multiplication")
println("4. Division")
print("Enter your choice (1-4): ")
val choice = readLine()?.toInt() ?: 0
// Read first number
print("Enter first number: ")
val num1 = readLine()?.toDouble() ?: 0.0
// Read second number
print("Enter second number: ")
val num2 = readLine()?.toDouble() ?: 0.0
// Perform operation based on user choice
when (choice) {
1 -> println("Result: ${num1 + num2}")
2 -> println("Result: ${num1 - num2}")
3 -> println("Result: ${num1 * num2}")
4 -> {
if (num2 != 0.0) {
println("Result: ${num1 / num2}")
} else {
println("Error: Division by zero!")
}
}
else -> println("Invalid choice!")
}
}
import tkinter as tk
from tkinter import messagebox
class ToDoListApp:
def __init__(self, root):
self.root = root
self.root.title("To-Do List App")
self.tasks = []
self.task_entry = tk.Entry(self.root, width=40)
self.task_entry.pack(pady=10)
self.add_task_button = tk.Button(self.root, text="Add Task", command=self.add_task)
self.add_task_button.pack()
self.task_list = tk.Listbox(self.root, width=40)
self.task_list.pack(pady=10)
self.delete_task_button = tk.Button(self.root, text="Delete Task", command=self.delete_task)
self.delete_task_button.pack()
def add_task(self):
task = self.task_entry.get()
if task:
self.tasks.append(task)
self.task_list.insert(tk.END, task)
self.task_entry.delete(0, tk.END)
else:
messagebox.showwarning("Warning", "Task cannot be empty!")
def delete_task(self):
try:
task_index = self.task_list.curselection()[0]
self.task_list.delete(task_index)
self.tasks.pop(task_index)
except IndexError:
messagebox.showwarning("Warning", "Select a task to delete!")
if __name__ == "__main__":
root = tk.Tk()
app = ToDoListApp(root)
root.mainloop()
$(document).ready(function() {
let arr = [64, 34, 25, 12, 22, 11, 90];
let $ul = $('<ul>');
$.each(arr, function(index, value) {
$ul.append('<li>' + value + '</li>');
});
$('body').append($ul);
// Initialize Bubble Sort
function bubbleSort(arr) {
let n = arr.length;
let $li = $('li');
let interval = setInterval(function() {
let swapped = false;
for (let i = 0; i < n - 1; i++) {
if (arr[i] > arr[i + 1]) {
// Swap adjacent elements
let temp = arr[i];
arr[i] = arr[i + 1];
arr[i + 1] = temp;
// Update DOM to reflect changes
$($li[i]).text(arr[i]);
$($li[i + 1]).text(arr[i + 1]);
swapped = true;
}
}
// Stop animation when sorted
if (!swapped) {
clearInterval(interval);
}
}, 500);
}
bubbleSort(arr);
});
{
"name": "John Doe",
"age": 30,
"city": "New York",
"contact": {
"email": "johndoe@example.com",
"phone": "123-456-7890",
"address": {
"street": "123 Main St",
"state": "NY",
"zip": "10001"
}
},
"skills": [
"JavaScript",
"Python",
"Java"
],
"experience": 5,
"education": "Bachelor's"
}