Skip to content

Commit

Permalink
add CSS flexbox layout for subsections
Browse files Browse the repository at this point in the history
  • Loading branch information
@raposamillar
raposamillar committed Jul 10, 2024
1 parent c960a02 commit 0a47da0
Show file tree
Hide file tree
Showing 2 changed files with 99 additions and 72 deletions.
149 changes: 77 additions & 72 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,95 +32,100 @@ <h1>Sound Journal</h1>
<!-- SUBSECTION 1: NATURE -->
<div id="nature">
<h2>Nature</h2>
<div class="chirps">
<h3>Chirps</h3>
<div id="birds">
<h4>Birds</h4>
<audio controls>
<source src="assets/audio/birds.mp3" type="audio/mp3">
</audio>
<div class="columns">
<div class="chirps">
<h3>Chirps</h3>
<div id="birds">
<h4>Birds</h4>
<audio controls>
<source src="assets/audio/birds.mp3" type="audio/mp3">
</audio>
</div>
<div id="crickets">
<h4>Crickets</h4>
<audio controls>
<source src="assets/audio/crickets-maine.mp3" type="audio/mp3">
</audio>
</div>
</div>
<div id="crickets">
<h4>Crickets</h4>
<audio controls>
<source src="assets/audio/crickets-maine.mp3" type="audio/mp3">
</audio>
</div>
</div>
</div>
<div class="water">
<h3>Water</h3>
<div id="rain">
<h4>Rain</h4>
<audio controls>
<source src="assets/audio/rain-maine.mp3" type="audio/mp3">
</audio>
</div>
<div id="waves">
<h4>Waves</h4>
<audio controls>
<source src="assets/audio/mackerel-cove-jamestown-rhode-island.mp3" type="audio/mp3">
</audio>

<div class="water">
<h3>Water</h3>
<div id="rain">
<h4>Rain</h4>
<audio controls>
<source src="assets/audio/rain-maine.mp3" type="audio/mp3">
</audio>
</div>
<div id="waves">
<h4>Waves</h4>
<audio controls>
<source src="assets/audio/mackerel-cove-jamestown-rhode-island.mp3" type="audio/mp3">
</audio>
</div>
</div>
</div>
</div>
<hr />

<!-- SUBSECTION 2: MUSIC -->
<div id="music">
<h2>Music</h2>
<div class="piano">
<h3>Piano</h3>
<div id="happy-birthday">
<h4>Happy Birthday Cha-Cha-Cha</h4>
<audio controls>
<source src="assets/audio/happy-birthday-cha-cha-cha.mp3" type="audio/mp3">
</audio>
<div class="columns">
<div class="piano">
<h3>Piano</h3>
<div id="happy-birthday">
<h4>Happy Birthday Cha-Cha-Cha</h4>
<audio controls>
<source src="assets/audio/happy-birthday-cha-cha-cha.mp3" type="audio/mp3">
</audio>
</div>
<div id="bosendorfer">
<h4>Bösendorfer Imperial Grand Piano</h4>
<audio controls>
<source src="assets/audio/bosendorfer-low-c.mp3" type="audio/mp3">
</audio>
</div>
</div>
<div id="bosendorfer">
<h4>Bösendorfer Imperial Grand Piano</h4>
<audio controls>
<source src="assets/audio/bosendorfer-low-c.mp3" type="audio/mp3">
</audio>
<div class="church">
<h3>Church</h3>
<div id="lachine-bells">
<h4>Bells of Lachine</h4>
<audio controls>
<source src="assets/audio/bells-lachine.mp3" type="audio/mp3">
</audio>
</div>
<div id="organ-beckerath">
<h4>Organ at St. Joseph's Cathedral</h4>
<audio controls>
<source src="assets/audio/grand-orgue-beckerath-st-joseph-montreal.mp3" type="audio/mp3">
</audio>
</div>
</div>
</div>
<div class="church">
<h3>Church</h3>
</div>
<div id="lachine-bells">
<h4>Bells of Lachine</h4>
<audio controls>
<source src="assets/audio/bells-lachine.mp3" type="audio/mp3">
</audio>
</div>
<div id="organ-beckerath">
<h4>Organ at St. Joseph's Cathedral</h4>
<audio controls>
<source src="assets/audio/grand-orgue-beckerath-st-joseph-montreal.mp3" type="audio/mp3">
</audio>
</div>
</div>
</div>
<hr />

<!-- SUBSECTION 3: CELEBRATIONS -->
<div id="celebrations">
<h2>Celebrations</h2>
<div class="toronto-nye">
<h3>New Year's Eve in Toronto</h3>
<div id="fireworks">
<h4>Fireworks</h4>
<audio controls>
<source src="assets/audio/fireworks-nye-toronto.mp3" type="audio/mp3">
</audio>
</div>
<div id="cheering">
<h4>Cheering</h4>
<audio controls>
<source src="assets/audio/cheering-nye-toronto.mp3" type="audio/mp3">
</audio>
<div class="columns">
<div class="toronto-nye">
<h3>New Year's Eve in Toronto</h3>
<div id="fireworks">
<h4>Fireworks</h4>
<audio controls>
<source src="assets/audio/fireworks-nye-toronto.mp3" type="audio/mp3">
</audio>
</div>
<div id="cheering">
<h4>Cheering</h4>
<audio controls>
<source src="assets/audio/cheering-nye-toronto.mp3" type="audio/mp3">
</audio>
</div>
</div>
</div>
</div>
</section>
<footer>Created by Lisa Raposa Millar 2024</footer>
<footer>℗2024 Lisa Raposa Millar "Happy Birthday Cha-Cha-Cha" All rights reserved.</footer>
</body>
</html>
22 changes: 22 additions & 0 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,28 @@ body {
font-size: 18px;
}

#nature .columns {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}

#music .columns {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}

#celebrations .columns {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}

footer {
margin: 20px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
navbar .a {
Expand Down

0 comments on commit 0a47da0

Please sign in to comment.