Skip to content

Commit 68c2d96

Browse files
author
core.autocrlf
committed
Commit
1 parent 0165d5c commit 68c2d96

3 files changed

Lines changed: 357 additions & 0 deletions

File tree

‎quasi.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Alexisonfire - Official Site</title>
7+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<nav>
12+
<ul>
13+
<li><a href="#slideshow">Home</a></li>
14+
<li><a href="#upcoming-shows">Shows</a></li>
15+
<li><a href="#about-us">About</a></li>
16+
<li><a href="#guest-artists">Guests</a></li>
17+
<li><a href="#our-poetry">Poetry</a></li>
18+
</ul>
19+
</nav>
20+
21+
<section id="slideshow">
22+
<h1>Quasi Local</h1>
23+
<div class="slideshow-container">
24+
<!-- Slides will be added dynamically via JS -->
25+
</div>
26+
</section>
27+
28+
<section id="upcoming-shows">
29+
<h2>Upcoming Shows</h2>
30+
<ul id="gigs-list">
31+
<!-- Gigs will be added dynamically via JS -->
32+
</ul>
33+
</section>
34+
35+
<section id="about-us">
36+
<h2>The Band</h2>
37+
<div class="bio-container">
38+
<!-- Bios will be added dynamically via JS -->
39+
</div>
40+
</section>
41+
42+
<section id="guest-artists">
43+
<h2>Guest Artists</h2>
44+
<div class="bio-container">
45+
<!-- Guest bios will be added dynamically via JS -->
46+
</div>
47+
</section>
48+
49+
<section id="our-poetry">
50+
<h2>Our Poetry</h2>
51+
<div id="poems-container">
52+
<!-- Poems will be added dynamically via JS -->
53+
</div>
54+
</section>
55+
56+
<script src="script.js"></script>
57+
</body>
58+
</html>

‎script.js‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
// Data for sections - Edit these arrays/objects to update content
2+
3+
// Image Slideshow: Add image paths (place images in an 'images' folder in your repo)
4+
const slides = [
5+
'images/slide1.jpg',
6+
'images/slide2.jpg',
7+
'images/slide3.jpg'
8+
// Add more as needed
9+
];
10+
11+
// Upcoming Shows: Array of gig objects with date in YYYY-MM-DD format
12+
const gigs = [
13+
{ date: '2025-10-01', time: '8:00 PM', venue: 'Local Theater', description: 'Poetry Night' },
14+
{ date: '2025-09-15', time: '7:00 PM', venue: 'City Hall', description: 'Past Event' }, // This will be hidden
15+
// Add more gigs here
16+
];
17+
18+
// About Us: Array of 4 people
19+
const aboutUs = [
20+
{
21+
name: 'Person 1',
22+
bio: 'Short bio for Person 1, passionate about poetry and performance.',
23+
image: 'images/person1.jpg'
24+
},
25+
{
26+
name: 'Person 2',
27+
bio: 'Short bio for Person 2, a creative soul with a love for words.',
28+
image: 'images/person2.jpg'
29+
},
30+
{
31+
name: 'Person 3',
32+
bio: 'Short bio for Person 3, blending music and poetry.',
33+
image: 'images/person3.jpg'
34+
},
35+
{
36+
name: 'Person 4',
37+
bio: 'Short bio for Person 4, dedicated to storytelling.',
38+
image: 'images/person4.jpg'
39+
}
40+
];
41+
42+
// Guest Artists: Up to 3 people (add fewer if needed)
43+
const guestArtists = [
44+
{
45+
name: 'Guest 1',
46+
bio: 'Guest artist with a unique perspective on poetry.',
47+
image: 'images/guest1.jpg'
48+
},
49+
{
50+
name: 'Guest 2',
51+
bio: 'Guest artist known for evocative performances.',
52+
image: 'images/guest2.jpg'
53+
}
54+
// Add a third if needed
55+
];
56+
57+
// Our Poetry: Array of poems
58+
const poems = [
59+
{
60+
title: 'Poem 1',
61+
content: `Line 1
62+
Line 2
63+
Line 3`
64+
},
65+
{
66+
title: 'Poem 2',
67+
content: `Another line 1
68+
Another line 2`
69+
}
70+
// Add more poems
71+
];
72+
73+
// Function to initialize slideshow
74+
function initSlideshow() {
75+
const container = document.querySelector('.slideshow-container');
76+
slides.forEach((src, index) => {
77+
const slide = document.createElement('div');
78+
slide.classList.add('slide');
79+
if (index === 0) slide.style.display = 'block';
80+
const img = document.createElement('img');
81+
img.src = src;
82+
img.alt = `Slide ${index + 1}`;
83+
slide.appendChild(img);
84+
container.appendChild(slide);
85+
});
86+
87+
let currentSlide = 0;
88+
setInterval(() => {
89+
const slidesElements = document.querySelectorAll('.slide');
90+
slidesElements[currentSlide].style.display = 'none';
91+
currentSlide = (currentSlide + 1) % slides.length;
92+
slidesElements[currentSlide].style.display = 'block';
93+
}, 3000); // Change slide every 3 seconds
94+
}
95+
96+
// Function to populate upcoming shows
97+
function populateGigs() {
98+
const list = document.getElementById('gigs-list');
99+
const section = document.getElementById('upcoming-shows');
100+
const now = new Date();
101+
const futureGigs = gigs.filter(gig => new Date(gig.date) > now);
102+
103+
if (futureGigs.length === 0) {
104+
section.classList.add('hidden');
105+
return;
106+
}
107+
108+
futureGigs.forEach(gig => {
109+
const li = document.createElement('li');
110+
li.innerHTML = `<strong>${gig.date} at ${gig.time}</strong> - ${gig.venue}<br>${gig.description}`;
111+
list.appendChild(li);
112+
});
113+
}
114+
115+
// Function to populate bios
116+
function populateBios(containerId, people) {
117+
const container = document.querySelector(`#${containerId} .bio-container`);
118+
people.forEach(person => {
119+
const div = document.createElement('div');
120+
div.classList.add('bio');
121+
div.innerHTML = `
122+
<img src="${person.image}" alt="${person.name}">
123+
<h3>${person.name}</h3>
124+
<p>${person.bio}</p>
125+
`;
126+
container.appendChild(div);
127+
});
128+
}
129+
130+
// Function to populate poems
131+
function populatePoems() {
132+
const container = document.getElementById('poems-container');
133+
poems.forEach(poem => {
134+
const div = document.createElement('div');
135+
div.classList.add('poem');
136+
div.innerHTML = `
137+
<h3>${poem.title}</h3>
138+
<p>${poem.content}</p>
139+
`;
140+
container.appendChild(div);
141+
});
142+
}
143+
144+
// Initialize everything on page load
145+
window.addEventListener('DOMContentLoaded', () => {
146+
initSlideshow();
147+
populateGigs();
148+
populateBios('about-us', aboutUs);
149+
populateBios('guest-artists', guestArtists);
150+
populatePoems();
151+
});

‎style.css‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
body {
2+
font-family: 'Roboto', sans-serif;
3+
margin: 0;
4+
padding: 0;
5+
background-color: #1a1a1a;
6+
color: #ffffff;
7+
line-height: 1.6;
8+
}
9+
10+
nav {
11+
background-color: #000000;
12+
position: fixed;
13+
width: 100%;
14+
top: 0;
15+
z-index: 1000;
16+
}
17+
18+
nav ul {
19+
list-style: none;
20+
padding: 15px 0;
21+
margin: 0;
22+
display: flex;
23+
justify-content: center;
24+
align-items: center;
25+
}
26+
27+
nav li {
28+
margin: 0 20px;
29+
}
30+
31+
nav a {
32+
color: #ffffff;
33+
text-decoration: none;
34+
font-size: 1.2rem;
35+
font-weight: 700;
36+
text-transform: uppercase;
37+
transition: color 0.3s;
38+
}
39+
40+
nav a:hover {
41+
color: #ff4d4d;
42+
}
43+
44+
section {
45+
padding: 80px 20px;
46+
min-height: 100vh;
47+
display: flex;
48+
flex-direction: column;
49+
align-items: center;
50+
justify-content: center;
51+
text-align: center;
52+
}
53+
54+
h1, h2 {
55+
font-weight: 700;
56+
text-transform: uppercase;
57+
margin-bottom: 20px;
58+
}
59+
60+
h1 {
61+
font-size: 3.5rem;
62+
}
63+
64+
h2 {
65+
font-size: 2.5rem;
66+
}
67+
68+
.slideshow-container {
69+
max-width: 1000px;
70+
width: 100%;
71+
position: relative;
72+
}
73+
74+
.slide {
75+
display: none;
76+
width: 100%;
77+
}
78+
79+
.slide img {
80+
width: 100%;
81+
height: auto;
82+
object-fit: cover;
83+
max-height: 500px;
84+
}
85+
86+
#gigs-list {
87+
list-style: none;
88+
max-width: 600px;
89+
width: 100%;
90+
padding: 0;
91+
}
92+
93+
#gigs-list li {
94+
background: #2a2a2a;
95+
padding: 15px;
96+
margin: 10px 0;
97+
border-radius: 5px;
98+
font-size: 1.1rem;
99+
}
100+
101+
.bio-container {
102+
display: flex;
103+
flex-wrap: wrap;
104+
justify-content: center;
105+
max-width: 1200px;
106+
width: 100%;
107+
gap: 20px;
108+
}
109+
110+
.bio {
111+
background: #2a2a2a;
112+
padding: 20px;
113+
border-radius: 5px;
114+
width: 250px;
115+
text-align: center;
116+
}
117+
118+
.bio img {
119+
width: 120px;
120+
height: 120px;
121+
border-radius: 50%;
122+
object-fit: cover;
123+
margin-bottom: 10px;
124+
}
125+
126+
.bio h3 {
127+
font-size: 1.5rem;
128+
margin: 10px 0;
129+
}
130+
131+
.poem {
132+
background: #2a2a2a;
133+
padding: 20px;
134+
margin: 20px 0;
135+
max-width: 600px;
136+
width: 100%;
137+
border-radius: 5px;
138+
white-space: pre-wrap;
139+
}
140+
141+
.poem h3 {
142+
font-size: 1.8rem;
143+
margin-bottom: 10px;
144+
}
145+
146+
.hidden {
147+
display: none;
148+
}

0 commit comments

Comments
 (0)