Skip to content

Commit

Permalink
Added Community Spotlight
Browse files Browse the repository at this point in the history
  • Loading branch information
@Vin205
Vin205 committed Jul 31, 2024
1 parent 62b8f3c commit 059356b
Show file tree
Hide file tree
Showing 6 changed files with 267 additions and 1 deletion.
264 changes: 264 additions & 0 deletions assets/html/comsp.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,264 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SwapReads - Comunity Spotlight</title>
<style>


header {
background-color: #f5c7c8;
color: white;
padding: 1em;
text-align: center;

}

nav ul {
list-style-type: none;
padding: 0;
}

nav ul li {
display: inline;
margin: 0 1em;
}

nav ul li a {
color: white;
text-decoration: none;
}

main {
padding: 1em;
}

section {
margin-bottom: 2em;
}

h2 {
color: #450105;
}


footer {
background-color: #f5cbd7;
color: white;
text-align: center;
padding: 1em;
position: fixed;
width: 100%;
bottom: 0;
}

.close-button {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}

.close-button:hover,
.close-button:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.ul{
text-decoration: black;
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f7f7f7;
}

.community-spotlight {
padding: 2em 0;
background-color: #fafceb;
text-align: center;
}

.section__container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1em;
}

.section__title {
font-size: 2em;
margin-bottom: 0.5em;
}

.section__subtitle {
font-size: 1.1em;
color: #666;
margin-bottom: 2em;
}

.spotlight__grid {
display: flex;
flex-wrap: wrap;
gap: 1em;
justify-content: center;
}

.spotlight__card {
background-color: #fff2ba;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 250px;
max-width: 100%;
transition: transform 0.3s ease;
text-align: left;
}

.spotlight__card img {
width: 100%;
height: 200px;
object-fit: cover;
}

.spotlight__details {
padding: 1em;
}

.spotlight__details h4 {
font-size: 1.2em;
margin: 0;
}

.spotlight__details p {
font-size: 1em;
margin: 0.5em 0 0;
}

.spotlight__card:hover {
transform: scale(1.05);
}
</style>
</head>
<body>
<header>
<h1 style="color: black;">SwapReads</h1>
<nav>
<ul>
<li><a href="./index.html">Home</a></li>
<li><a href="./about.html">About Us</a></li>
<li><a href="./index.html">Contact</a></li>
<li><a href="#authors">Authors</a></li>
<li><a href="#community">Community</a></li>

</ul>
</nav>
</header>
<main>
<section class="community-spotlight">
<div class="section__container">
<h2 class="section__title" style="color: maroon;">Community Spotlight</h2>
<p class="section__subtitle" style="color: black;">Meet our active community members and explore their book recommendations</p>
<div class="spotlight__grid">
<div class="spotlight__card">
<img src="../images/ja.jpeg" alt="Jane Doe">
<div class="spotlight__details">
<h4 style="color: maroon;">Jane Doe</h4>
<p>Recommended Book: "To Kill a Mockingbird" by Harper Lee</p>
</div>
</div>
<div class="spotlight__card">
<img src="../images/jo.jpeg" alt="John Smith">
<div class="spotlight__details">
<h4 style="color: maroon;">John Smith</h4>
<p>Recommended Book: "1984" by George Orwell</p>
</div>
</div>
<div class="spotlight__card">
<img src="../images/em.jpeg" alt="Emily Johnson">
<div class="spotlight__details">
<h4 style="color: maroon;">Emily Johnson</h4>
<p>Recommended Book: "Pride and Prejudice" by Jane Austen</p>
</div>
</div>
<div class="spotlight__card">
<img src="../images/ma.jpg" alt="Mark Brown">
<div class="spotlight__details">
<h4 style="color: maroon;">Mark Brown</h4>
<p>Recommended Book: "The Great Gatsby" by F. Scott Fitzgerald</p>
</div>
</div>
</div>
</div>
</section>

</main>
<footer>
<p style="color: rgb(0, 0, 0);">&copy; 2024 SwapReads. All rights reserved.</p>
</footer>

<!-- Modal for displaying content -->
<div id="content-modal">
<div class="modal-content">
<span class="close-button">&times;</span>
<div id="modal-body"></div>
</div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
const buttons = document.querySelectorAll(".author button");
const modal = document.getElementById("content-modal");
const modalBody = document.getElementById("modal-body");
const closeButton = document.querySelector(".close-button");

buttons.forEach(button => {
button.addEventListener("click", function() {
const author = this.getAttribute("data-author");
const action = this.getAttribute("data-action");
let content = '';

switch(action) {
case 'interview':
content = `<h2>Interview with ${author.replace(/-/g, ' ')}</h2>
<p>${author.replace(/-/g, ' ')} shares insights into their writing process, latest work, and experiences as an author.</p>`;
break;
case 'articles':
content = `<h2>Articles by ${author.replace(/-/g, ' ')}</h2>
<ul>
<li><a href="#">The Craft of Writing</a></li>
<li><a href="#">Understanding Narrative Structures</a></li>
</ul>`;
break;
case 'recommendations':
content = `<h2>Reading Recommendations by ${author.replace(/-/g, ' ')}</h2>
<ul>
<li><a href="#">Book Title 1</a> by Author 1</li>
<li><a href="#">Book Title 2</a> by Author 2</li>
</ul>`;
break;
default:
content = '<p>No content available.</p>';
}

modalBody.innerHTML = content;
modal.style.display = "block";
});
});

closeButton.addEventListener("click", function() {
modal.style.display = "none";
});

window.addEventListener("click", function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
});
});
</script>
</body>
</html>
Binary file added assets/images/em.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.
Binary file added assets/images/ja.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.
Binary file added assets/images/jo.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.
Binary file added assets/images/ma.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 3 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -798,7 +798,9 @@
<li class="navbar-item" id="login-signup-link">
<a href="./assets/html/login.html" class="navbar-link">Login/Signup</a>
</li>

<li class="navbar-item" id="login-signup-link">
<a href="./assets/html/comsp.html" class="navbar-link">Community Spotlight</a>
</li>

<li class="navbar-item dropdown" id="more-dropdown">
<a href="#" class="navbar-link" id="more-link">More
Expand Down

0 comments on commit 059356b

Please sign in to comment.