The Band
How to Create a Band Web Page
This example shows how to build a responsive band website with W3.CSS.
The page uses Flexbox and Grid together with W3.CSS navigation, slideshow, image, and form classes.
Create a Skeleton
Start with the page structure and a large image.
Skeleton
<html lang="en">
<title>The Band</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">
<body id="home" class="w3-content">
<img src="img_la.jpg" alt="The Band" style="width:100%">
</body>
</html>
Try it Yourself »
Add Slide Show
Replace the single image with a slideshow.
Slide Show
<script src="https://www.w3schools.com/lib/w3.js"></script>
<!-- Slides -->
<img class="slides" src="img_la.jpg" style="width:100%">
<img class="slides" src="img_ny.jpg" style="width:100%">
<img class="slides" src="img_ch.jpg" style="width:100%">
<script>
w3.slideshow(".slides",1500);
</script>
Try it Yourself »
Note!
The slideshow needs the W3.JS library to run the slides.
Add Navigation
Use Flexbox to create the navigation bar.
Navigation
<!-- Navigation (Stays on Top) -->
<nav class="w3-flex w3-top w3-black">
<a href="#home" class="w3-button">Home</a>
<a href="#about" class="w3-button">About</a>
<a href="#members" class="w3-button">Members</a>
<a href="#contact" class="w3-button">Contact</a>
</nav>
Try it Yourself »
Add About
Add some information about the band.
The Band
This is our band website. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
About
<!-- About -->
<section id="about" class="w3-container w3-padding-32">
<h1 class="w3-center">The Band</h1>
<p>This is our band website. Lorem ipsum dolor sit amet...</p>
</section>
Try it Yourself »
Add Band Members
Use Grid to display the band members.
Band Members
John
Paul
Lisa
Band Members
<!-- Members -->
<section id="members" class="w3-container w3-padding-32">
<h2 class="w3-center">Band Members</h2>
<div class="w3-grid w3-center"
style="grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px">
<div>
<img src="img_bandmember.jpg"
alt="John" style="width:60%">
<p>John</p>
</div>
<div>
<img src="img_bandmember.jpg"
alt="Paul" style="width:60%">
<p>Paul</p>
</div>
<div>
<img src="img_bandmember.jpg"
alt="Lisa" style="width:60%">
<p>Lisa</p>
</div>
</div>
</section>
Try it Yourself »
The Grid automatically adjusts the number of columns when the available width changes.
Add Contact
Add contact information and a contact form.
Contact
<section id="contact" class="w3-container w3-center w3-padding-32">
<h2 class="w3-wide">CONTACT</h2>
<p>Chicago, US</p>
<p>Phone: +00 151515</p>
<p>Email: mail@mail.com</p>
<p class="w3-opacity"><i>Fan? Drop a note!</i></p>
<form action="/action_page.php" target="_blank">
<input class="w3-input" type="text" placeholder="Name" required name="Name">
<input class="w3-input" type="email" placeholder="Email" required name="Email">
<input class="w3-input" type="text" placeholder="Message" required name="Message">
<p>
<button class="w3-button w3-black" type="submit">SEND</button>
</p>
</form>
<img src="map.jpg" alt="Map" style="width:100%">
</section>
Try it Yourself »
The Complete Web Page
The completed page uses different W3.CSS tools for different jobs:
| Part | Layout |
|---|---|
| Navigation | Flexbox |
| Slideshow | W3.JS |
| About | Normal document flow |
| Band Members | Grid |
| Contact | Normal document flow |
