<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Main banner at the top -->
<div id="banner">
<div id="banner-img-container">
<img src="https://app.bsd.education/resources/projects/personal-webpage/personal-webpage-bannerpic.png" id="banner-pic" />
</div>
<h1>Raeca S.</h1>
<h3>Hi! I'm Raeca, a musician, designer, and content creator.</h3>
</div>
<!-- <div> element container for all the rows -->
<div class="wrapper">
<!-- First row with text on the left, image on the right -->
<div class="row">
<div class="column text-column">
<h2>My Music</h2>
<p>I'm a singer, but I also play guitar, piano, and drums. You can find my music on YouTube and Spotify. I will be releasing my first full-length album in 2022!</p>
</div>
<div class="column img-column">
<img src="https://app.bsd.education/resources/projects/personal-webpage/audio-1867121_1920.jpg" />
</div>
</div>
<!-- Second row with image on the left, text on the right -->
<div class="row">
<div class="column text-column">
<h2>My Clothing Line</h2>
<p>I operate my own eco-friendly and ethical fashion clothing line. Fashion is among the top five-largest polluting industries, so all the materials I use for my clothing line are sustainable, ethical, and don't contribute to climate change.</p>
</div>
<div class="column img-column">
<img src="https://app.bsd.education/resources/projects/personal-webpage/clothing.png" />
</div>
</div>
<!-- Third row with text on the left, image on the right -->
<div class="row">
<div class="column text-column">
<h2>Volunteer Work</h2>
<p>I strongly believe in the power of giving back to others, and helping those who are less fortunate than us. I always try to volunteer or donate to social justice, animal rights, and environmental causes!</p>
</div>
<div class="column img-column">
<img src="https://app.bsd.education/resources/projects/personal-webpage/rainbowheart.png" />
</div>
</div>
<!-- End tag for <div class="wrapper"> -->
</div>
<script src="script.js"></script>
</body>
</html>
@font-face {
font-family: "Work Sans";
src: url("/resources/fonts/WorkSans-Regular.ttf");
}
@font-face {
font-family: "Montserrat";
src: url("/resources/fonts/Montserrat-Bold.ttf");
}
@font-face {
font-family: "Montserrat";
src: url("/resources/fonts/Montserrat-Medium.ttf");
}
* {
box-sizing: border-box;
margin: 0;
}
body {
font-family: "Work Sans", sans-serif;
}
/* Website banner at the top */
div#banner {
background-color: #354458;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 75vh;
text-align: center;
}
div#banner-img-container {
width: 130px;
height: 130px;
border-radius: 50%;
margin: 10px;
}
img#banner-pic {
width: 100%;
border-radius: 50%;
object-fit: contain;
}
h1 {
font-family: "Montserrat", sans-serif;
color: #ffffff;
font-size: 60px;
}
h2 {
margin-bottom: 10px;
font-family: "Montserrat", sans-serif;
font-size: 28px;
}
h3 {
color: #ffffff;
padding: 1rem 5rem;
font-weight: 500;
font-family: "Montserrat", sans-serif;
}
p {
line-height: 1.2;
font-family: "Work Sans", sans-serif;
}
/* Styling for all the rows */
div.row {
display: flex;
align-items: flex-start;
justify-content: space-around;
padding: 5%;
}
/* Styling for the columns inside each row */
div.column {
margin-left: 1rem;
margin-right: 1rem;
}
img {
width: 100%;
object-fit: contain;
}
/* Styling for odd-numbered rows */
.row:nth-child(odd) {
background-color: #e9c46a;
}
/* Styling for even-numbered rows */
.row:nth-child(even) {
background-color: #2a9d8f;
flex-direction: row-reverse;
color: #ffffff;
}
div.text-column {
flex: 3;
}
div.img-column {
flex: 1;
}
@media (max-width: 414px) {
div.row {
flex-direction: column;
}
.row:nth-child(even) {
flex-direction: column;
}
}