Skip to content

Commit

Permalink
updated home page
Browse files Browse the repository at this point in the history
  • Loading branch information
Evangelia Giannikou committed Jul 9, 2024
1 parent 35828d6 commit 953d360
Show file tree
Hide file tree
Showing 3 changed files with 175 additions and 132 deletions.
Binary file added bdd_website/public/IMG_5870.jpeg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
45 changes: 22 additions & 23 deletions bdd_website/src/pages/Home/Home.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,37 +5,36 @@ import './home.css';
function Home() {
return (
<div className="home-container">
<header className="home-header">
</header>
<header className="home-header"></header>
<main className="home-main">
<div className="section-container">
<section className="intro-section">
<h1>Forró with Baile da Dom</h1>
<p>Experience the joy of Forró with us. Forró is a partner dance from the northeast of Brazil. We are bringing this beautiful dance and its culture to Utrecht.</p>
<p>Join us in our regular classes on Wednesdays and a party each month. We also organize workshops with outside teachers.</p>
</section>
<section className="next-event-section">
<img src={process.env.PUBLIC_URL + '/forro_party.jpg'} alt="Next Event" className="event-image" />
</section>
</div>
<div className="section-container">
<section className="intro-section">
<h1>Forró with Baile da Dom</h1>
<p>Experience the joy of Forró with us. Forró is a partner dance from the northeast of Brazil. We are bringing this beautiful dance and its culture to Utrecht.</p>
<p>Join us in our regular classes on Wednesdays and a party each month. We also organize workshops with teachers from all over the world.</p>
</section>
<section className="next-event-section">
<img src={process.env.PUBLIC_URL + '/IMG_5870.jpeg'} alt="Group picture" className="event-image" />
</section>
</div>
<div className="cards-container">
<div className="card classes">
<h3>Classes</h3>
<NavLink to="/" exact className="button">Sign up</NavLink>
<NavLink to="/classes" exact className="button"><h4>Sign up</h4></NavLink>
</div>
<div className="card events">
<h3>Events</h3>
<NavLink to="/events" className="button">Event calendar</NavLink>
<NavLink to="/events" className="button"><h4>Events</h4></NavLink>
</div>
<div className="card about">
<h3>About</h3>
<NavLink to="/about" className="button">About</NavLink>
</div>
<div className="instagram-section">
<h4>Interested in our latest news? Follow us on Instagram <a href="https://www.instagram.com/bailedadom_utrecht">@bailedadom_utrecht</a></h4>
</div>
<div className="spotify-section">
<h4>Listen to our forró playlists</h4>
<div className="playlists-container">
<iframe src="https://open.spotify.com/embed/playlist/2fqqpz3yeI50Mbji6nQqUk?utm_source=generator" width="300" height="380" frameBorder="0" allowtransparency="true" allow="encrypted-media"></iframe>
<iframe src="https://open.spotify.com/embed/playlist/4wLUxqsC8TzQwCAzMD6ajI?utm_source=generator" width="300" height="380" frameBorder="0" allowtransparency="true" allow="encrypted-media"></iframe>
</div>
</div>
<footer className="home-footer">
<p>Contact:</p>
{/* Contact details */}
</footer>
</main>
</div>
);
Expand Down
262 changes: 153 additions & 109 deletions bdd_website/src/pages/Home/home.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,146 +3,190 @@ h1,h2,h3,h4,h5,h6 {
font-size: 38px;
}

h1{
h1 {
font-size: 38px;
}

h4 {
font-size: 25px;
}

a {
color: white;
text-decoration: none;
}

.home-container {
max-width: 1200px;
margin: auto;
padding: 20px;
}
max-width: 1200px;
margin: auto;
padding: 20px;
}

.home-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #fff;
}
.home-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #fff;
}

.logo {
width: 100px; /* Adjust as needed */
height: auto;
}
.logo {
width: 100px; /* Adjust as needed */
height: auto;
}

.navigation ul {
list-style: none;
display: flex;
gap: 20px;
}
.navigation ul {
list-style: none;
display: flex;
gap: 20px;
}

.navigation li {
cursor: pointer;
}
.navigation li {
cursor: pointer;
}

.home-main {
text-align: center;
padding: 20px;
}
.home-main {
text-align: center;
padding: 20px;
}

.cards-container {
display: flex;
justify-content: space-around;
gap: 20px;
margin: 20px 0;
}

.card {
flex-grow: 1;
background-color: #dc3545;
color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.card button {
background-color: #fff;
color: #dc3545;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 10px;
}

.card button:hover {
background-color: #e2e2e2;
}

/* Responsive design for mobile devices */
@media (max-width: 768px) {
.cards-container {
display: flex;
justify-content: space-around;
gap: 20px;
margin: 20px 0;
flex-direction: column;
align-items: center;
}

.card {
flex-grow: 1;
background-color: #dc3545;
color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 90%;
margin-bottom: 20px;
}
}

.card button {
background-color: #fff;
color: #dc3545;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 10px;
.instagram-section {
background-color: #333;
color: #fff;
padding: 20px;
border: none;
border-radius: 4px;
}

.spotify-section {
background-color: #fff;
color: #fff;
padding: 20px;
border: none;
border-radius: 4px;
margin-top: 20px;

h4 {
color: #333;
}
}

.playlists-container {
display: flex;
justify-content: center;
gap: 20px;
}

.card button:hover {
background-color: #e2e2e2;
@media (max-width: 768px) {
.playlists-container {
flex-direction: column;
align-items: center;
}

/* Responsive design for mobile devices */
@media (max-width: 768px) {
.cards-container {
flex-direction: column;
align-items: center;
}

.card {
width: 90%;
margin-bottom: 20px;
}
}

.home-footer {
background-color: #333;
color: #fff;
padding: 20px;
.playlists-container iframe {
width: 90%;
}
}

.section-container {
display: flex;
flex-direction: column;
align-items: stretch; /* Ensure that children (sections) stretch to fill the container */
}

@media (min-width: 769px) { /* This applies to screens wider than 768px */
.section-container {
display: flex;
flex-direction: column;
align-items: stretch; /* Ensure that children (sections) stretch to fill the container */
flex-direction: row;
}

@media (min-width: 769px) { /* This applies to screens wider than 768px */
.section-container {
flex-direction: row;
}

.intro-section {
flex: 3; /* Takes up 2 parts of the available space */
margin: 20px 0;
padding: 20px;
background-color: white;
height: 330px;
}

.next-event-section {
flex: 2; /* Takes up 3 parts of the available space */
margin: 20px 0;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
position: relative; /* This ensures that the image can be absolutely positioned within this container */
}

.event-image {
max-width: 100%;
max-height: 100%;
object-fit: contain; /* This will make sure the image is scaled correctly within its container */
position: absolute; /* Image is positioned absolutely within its container */
}
.intro-section {
flex: 3; /* Takes up 2 parts of the available space */
margin: 20px 0;
padding: 20px;
background-color: white;
height: 330px;
}

@media (max-width: 768px) {
.section-container {
flex-direction: column;
}
.next-event-section {
flex: 2; /* Takes up 3 parts of the available space */
margin: 20px 0;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
position: relative; /* This ensures that the image can be absolutely positioned within this container */
}

.intro-section, .next-event-section {
width: 100%; /* Sections take full width on smaller screens */
}
.event-image {
max-width: 100%;
max-height: 100%;
object-fit: contain; /* This will make sure the image is scaled correctly within its container */
position: absolute; /* Image is positioned absolutely within its container */
border: none;
border-radius: 4px;
}
}

.event-image {
width: 300px; /* Fixed width for mobile, if desired */
height: 300px; /* Fixed height for mobile, if desired */
object-fit: cover; /* Adjust as needed for mobile */
}
@media (max-width: 768px) {
.section-container {
flex-direction: column;
}

.intro-section {
width: 100%; /* Sections take full width on smaller screens */
margin-top: -80px;
}

.next-event-section {
width: 100%; /* Sections take full width on smaller screens */
}

.event-image {
width: 300px; /* Fixed width for mobile, if desired */
height: 300px; /* Fixed height for mobile, if desired */
object-fit: cover; /* Adjust as needed for mobile */
}
}

0 comments on commit 953d360

Please sign in to comment.