Skip to content

Commit

Permalink
Improved card layout and styling in category page
Browse files Browse the repository at this point in the history
  • Loading branch information
@RushikeshGhodke
RushikeshGhodke committed Oct 9, 2024
1 parent 90e28ca commit 61ae96d
Show file tree
Hide file tree
Showing 2 changed files with 127 additions and 79 deletions.
144 changes: 90 additions & 54 deletions category.css
View file
Original file line number Diff line number Diff line change
@@ -1,106 +1,142 @@
.category-container {
margin: 20px auto;
max-width: 1200px;
padding: 0 15px;
margin-bottom: 100px;

}

.category-row {
display: flex; /* Use flexbox for horizontal layout */
flex-wrap: wrap; /* Allows wrapping for smaller screens */
justify-content: space-between; /* Space between boxes */
gap: 20px; /* Space between boxes */
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 60px;
}

.new-category-box {
background: #f9f9f9;
border-radius: 10px; /* Slightly increased border radius */
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* Stronger shadow for more depth */
transition: transform 0.3s, box-shadow 0.3s; /* Transition for hover effect */
overflow: hidden; /* Prevents content overflow */
flex: 1 1 calc(33% - 20px); /* Responsive sizing: 3 boxes per row */
max-width: calc(33% - 20px); /* Ensure max width for 3 boxes */
padding: 20px; /* Added padding inside boxes */
}

/* Responsive Design */
@media (max-width: 768px) {
.new-category-box {
flex: 1 1 calc(50% - 20px); /* 2 boxes per row on tablets */
max-width: calc(50% - 20px);
}
border-radius: 5px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
transition: transform 0.3s, box-shadow 0.3s;
width: 350px;
display: flex;
flex-direction: column;
height: 100%;
}

@media (max-width: 480px) {
.new-category-box {
flex: 1 1 100%; /* Stacks boxes on small screens */
max-width: 100%; /* Full width for one column */
}

.category-row {
justify-content: center; /* Center the boxes */
}
}

.new-category-title {
font-size: 26px; /* Increased title size */
font-size: 26px;
font-weight: bold;
color: #333;
margin-bottom: 15px; /* Margin added for consistent spacing */
color: #212121;
margin-bottom: 10px;
margin-left: 2px;
}

.new-post-list {
padding: 0; /* Removed inner padding */
padding: 0;
}

.new-post-item {
display: flex;
margin-bottom: 20px; /* Increased margin between posts */
flex-direction: column;
justify-content: space-between;
height: 100%;
}


.new-post-thumbnail {
flex: 0 0 150px; /* Increased width for thumbnails */
height: 100px; /* Increased height for thumbnails */
overflow: hidden; /* Prevents overflow */
border-radius: 8px; /* Rounded corners for thumbnails */
border-radius: 8px;
}

.new-post-thumbnail img {
width: 100%; /* Make the image fill the container */
height: auto; /* Maintain aspect ratio */
object-fit: cover; /* Cover the area while maintaining aspect ratio */
width: 100%;
max-height: 230px;
object-fit: cover;
border-top-left-radius: inherit;
border-top-right-radius: inherit;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}

.new-post-content {
margin-left: 15px; /* Space between image and content */
flex: 1; /* Allow content to take remaining space */
display: flex;
flex-direction: column;
padding: 15px;
}

.new-post-title {
font-size: 20px; /* Increased post title size */
color: #007bff;
margin-bottom: 5px;
font-size: 17px;
color: #686868;
margin-bottom: 7px;
font-weight: 600;
margin-left: 2px;

}

.new-post-excerpt {
color: #666;
margin-bottom: 10px;
margin-bottom: 25px;
margin-left: 2px;
overflow: hidden;
text-overflow: ellipsis;
height: 40px;
}

.new-read-more-link {
display: inline-block;
padding: 12px 18px; /* Increased padding for the button */
background: #007bff;
color: #fff;
width: 100%;
padding: 12px 18px;
background: #2076D9;
border: #2076D9;
border-radius: 5px;
font-size: 16px;
text-align: center;
text-decoration: none;
transition: background 0.3s, transform 0.3s; /* Transition for hover effect */
transition: background 0.3s, transform 0.3s;
}

.new-read-more-link a {
text-decoration: none;
color: #fff;
}

.new-read-more-link:hover {
background: #0056b3;
transform: scale(1.05); /* Slightly enlarges link on hover */
}

/* Responsive Design */
@media (max-width: 768px) {
.new-category-box {

}

.category-row {
flex-direction: column;
align-items: center;
}
}

@media (max-width: 480px) {
.new-category-box {
width: 300px;

}

.category-row {
flex-direction: column;
}

.new-category-title {
font-size: 24px;
}

.new-post-title {
font-size: 16px;
}

.new-post-excerpt {
font-size: 15px;
}
}
/* Swiper */

.sliderr * {
Expand Down
62 changes: 37 additions & 25 deletions category.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,103 +132,114 @@ <h2>Signup</h2>
<section class="category-container">
<div class="category-row">
<div class="new-category-box">
<h2 class="new-category-title">Food</h2>
<div class="new-post-list">
<article class="new-post-item">
<div class="new-post-thumbnail">
<img src="./assets/img5.jpg" alt="Post Image">
</div>
<div class="new-post-content">
<h3 class="new-post-title">Mouthwatering Memoirs</h3>
<p class="new-post-excerpt">Mouth watering tales from all over the world...</p>
<a href="#" class="new-read-more-link">Read More</a>
<div class="new-post-data">
<h2 class="new-category-title">Food</h2>
<h3 class="new-post-title">Mouthwatering Memoirs</h3>
<p class="new-post-excerpt">Mouth watering tales from all over the world...</p>
</div>
<button class="new-read-more-link"><a href="#">Read More</a></button>
</div>
</article>
</div>
</div>

<div class="new-category-box">
<h2 class="new-category-title">Travel</h2>
<div class="new-post-list">
<article class="new-post-item">
<div class="new-post-thumbnail">
<img src="./assets/img21.jpg" alt="Post Image">
</div>
<div class="new-post-content">
<h3 class="new-post-title">Roaming Routes</h3>
<p class="new-post-excerpt">In the realm of mechanical marvels.</p>
<a href="#" class="new-read-more-link">Read More</a>
<div class="new-post-data">
<h2 class="new-category-title">Travel</h2>
<h3 class="new-post-title">Roaming Routes</h3>
<p class="new-post-excerpt">In the realm of mechanical marvels.</p>
</div>
<button class="new-read-more-link"><a href="#">Read More</a></button>
</div>
</article>
</div>
</div>

<div class="new-category-box">
<h2 class="new-category-title">Technology</h2>
<div class="new-post-list">
<article class="new-post-item">
<div class="new-post-thumbnail">
<img src="./assets/img2.jpg" alt="Post Image">
</div>
<div class="new-post-content">
<h3 class="new-post-title">The Future of Tech</h3>
<p class="new-post-excerpt">Exploring the innovations that are changing the world.</p>
<a href="#" class="new-read-more-link">Read More</a>
<div class="new-post-data">
<h2 class="new-category-title">Technology</h2>
<h3 class="new-post-title">The Future of Tech</h3>
<p class="new-post-excerpt">Exploring the innovations that are changing the world.</p>
</div>
<button class="new-read-more-link"><a href="#">Read More</a></button>
</div>
</article>
</div>
</div>

<div class="new-category-box">
<h2 class="new-category-title">Lifestyle</h2>
<div class="new-post-list">
<article class="new-post-item">
<div class="new-post-thumbnail">
<img src="./assets/img7.jpg" alt="Post Image">
</div>
<div class="new-post-content">
<h3 class="new-post-title">Living Well</h3>
<p class="new-post-excerpt">Tips and tricks for a balanced life.</p>
<a href="#" class="new-read-more-link">Read More</a>
<div class="new-post-data">
<h2 class="new-category-title">Lifestyle</h2>
<h3 class="new-post-title">Living Well</h3>
<p class="new-post-excerpt">Tips and tricks for a balanced life.</p>
</div>
<button class="new-read-more-link"><a href="#">Read More</a></button>
</div>
</article>
</div>
</div>

<div class="new-category-box">
<h2 class="new-category-title">Health</h2>
<div class="new-post-list">
<article class="new-post-item">
<div class="new-post-thumbnail">
<img src="./assets/health.jpeg" alt="Post Image">
</div>
<div class="new-post-content">
<h3 class="new-post-title">Health Tips</h3>
<p class="new-post-excerpt">Best practices for a healthier you.</p>
<a href="#" class="new-read-more-link">Read More</a>
<div class="new-post-data">
<h2 class="new-category-title">Health</h2>
<h3 class="new-post-title">Health Tips</h3>
<p class="new-post-excerpt">Best practices for a healthier you.</p>
</div>
<button class="new-read-more-link"><a href="#">Read More</a></button>
</div>
</article>
</div>
</div>

<div class="new-category-box">
<h2 class="new-category-title">Fashion</h2>
<div class="new-post-list">
<article class="new-post-item">
<div class="new-post-thumbnail">
<img src="./assets/fashion.jpeg" alt="Post Image">
</div>
<div class="new-post-content">
<h3 class="new-post-title">Fashion Trends</h3>
<p class="new-post-excerpt">Stay stylish with the latest trends.</p>
<a href="#" class="new-read-more-link">Read More</a>
<div class="new-post-data">
<h2 class="new-category-title">Fashion</h2>
<h3 class="new-post-title">Fashion Trends</h3>
<p class="new-post-excerpt">Stay stylish with the latest trends.</p>
</div>
<button class="new-read-more-link"><a href="#">Read More</a></button>
</div>
</article>
</div>
</div>
</div>
</section>
</main>

<div class="sliderr">
<div class="slides">
Expand Down Expand Up @@ -282,6 +293,7 @@ <h3 class="new-post-title">Fashion Trends</h3>
</div>
</div>
<!-- Swiper end -->
</main>


<!-- footer -->
Expand Down

0 comments on commit 61ae96d

Please sign in to comment.