Skip to content

Commit

Permalink
Merge pull request #2710 from pinakviramgama/color
Browse files Browse the repository at this point in the history 
Subscribe color modified in blogs section
  • Loading branch information
@sampadatiwari30
sampadatiwari30 authored Nov 4, 2024
2 parents 1d80a5e + 044b5ac commit 876db78
Show file tree
Hide file tree
Showing 24 changed files with 3,408 additions and 1,997 deletions.
293 changes: 132 additions & 161 deletions about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -564,7 +564,7 @@ <h3 class="join"><i class="fa-solid fa-user"></i> Register to join us....</h3>
.slide {
grid-template-columns: 1fr;
}

.section-title {
font-size: 2.5rem;
}
Expand All @@ -574,7 +574,7 @@ <h3 class="join"><i class="fa-solid fa-user"></i> Register to join us....</h3>
background: white;
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
transition: transform 0.3s ease-in-out;
height: 100%;
Expand Down Expand Up @@ -775,6 +775,11 @@ <h3 class="card-title">Tax Planning</h3>
</div>
</div>

<style>
.about-section {
margin-bottom: 100px;
}
</style>
<script>
class Carousel {
constructor() {
Expand All @@ -787,10 +792,10 @@ <h3 class="card-title">Tax Planning</h3>
// Controls
this.prevBtn = document.getElementById('prevBtn');
this.nextBtn = document.getElementById('nextBtn');

// Create indicators
this.createIndicators();

// Initialize
this.init();
}
Expand All @@ -810,14 +815,14 @@ <h3 class="card-title">Tax Planning</h3>
init() {
// Set initial position
this.updateSlidePosition();

// Add event listeners
this.prevBtn.addEventListener('click', () => this.prev());
this.nextBtn.addEventListener('click', () => this.next());

// Auto-play
this.startAutoPlay();

// Pause auto-play on hover
this.carousel.addEventListener('mouseenter', () => this.stopAutoPlay());
this.carousel.addEventListener('mouseleave', () => this.startAutoPlay());
Expand Down Expand Up @@ -944,187 +949,153 @@ <h1 class="head" id="card3">FinVeda Tools</h1>
</div>

<img style="position: absolute; top: 5px; left: 400px; mix-blend-mode: multiply;"
src="./assets/images/contributors.jpeg" alt="photo">
src="./assets/images/contributors.jpeg" alt="photo" class="good-img" >
</div>

<style>
.head {
justify-self: center;
font-size: 1.5rem;
}

/* Overall background and padding for the blog content */
#good-card {
border: 10px solid white;
display: flex;
justify-content: space-evenly;
background: linear-gradient(135deg, #e0eafc 0%, #cfdef3 100%);
/* Soft gradient background */
padding: 25px;
/* Increased padding for more spacing */
border-radius: 10px;
/* Rounded corners */
max-width: 1200px;
/* Max width for centering */
margin: 0 auto;
/* Center the section */
}

/* Individual good cards styling */
#good-card1,
#good-card2,
#good-card3 {
margin-top: 180px;
width: 300px;
height: 300px;
background: linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%);
/* Gradient background */
border-radius: 12px;
/* Slightly rounded corners */
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
/* Shadow for depth */
padding: 25px;
/* Padding for spacing */
position: relative;
/* Position for shadow overlay */
margin-bottom: 10px;
/* Space between cards */
transition: transform 0.4s ease, box-shadow 0.4s ease;
/* Smooth transition effects */
cursor: pointer;
/* Pointer cursor on hover */
}

#good-card1 {
background: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);
/* Gradient for card 1 */
/* General styles for the blog content and cards */
.blog-content {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
gap: 15px;
}

.good-img {
margin-top: -150px;
margin-left: 150px;
}
.head {
justify-self: center;
font-size: 1.5rem;
}

#good-card {
border: 10px solid white;
display: flex;
justify-content: space-evenly;
background: linear-gradient(135deg, #e0eafc 0%, #cfdef3 100%);
padding: 25px;
border-radius: 10px;
max-width: 1200px;
margin: 0 auto;
}

#good-card1, #good-card2, #good-card3 {
width: 300px;
height: 300px;
border-radius: 12px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
padding: 25px;
position: relative;
margin-bottom: 10px;
transition: transform 0.4s ease, box-shadow 0.4s ease;
cursor: pointer;
}

#good-card1 { background: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%); }
#good-card2 { background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%); }
#good-card3 { background: linear-gradient(135deg, #d9baf6 0%, #bfa2f9 100%); }

#good-card1:hover, #good-card2:hover, #good-card3:hover {
transform: scale(1.05);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

#white-card1, #white-card2, #white-card3 {
color: #1e293b;
padding: 10px;
margin-bottom: 20px;
}

#color-card-green, #color-card-orange, #color-card-purple {
border-radius: 12px;
}

#shadow1, #shadow2, #shadow3 {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.1);
border-radius: 12px;
top: 0;
left: 0;
z-index: 1;
}

/* Responsive styling for mobile view */


#good-card1, #good-card2, #good-card3 {
width: 100%; /* Full width on mobile */
max-width: 90%; /* Add slight padding on sides */
height: auto; /* Auto height to fit content */
margin: 10px 0; /* Margin between stacked cards */
font-size: 14px;
padding: 20px;
text-align: center;
}

#good-card2 {
background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
/* Gradient for card 2 */
.head {
font-size: 1.2rem;
}

#good-card3 {
background: linear-gradient(135deg, #d9baf6 0%, #bfa2f9 100%);
/* Gradient for card 3 */
#card2, #card3 {
width: 100%;
font-size: 1.1rem;
}


#good-card1:hover,
#good-card2:hover,
#good-card3:hover {
transform: scale(1.05);
/* Slight scaling effect */
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
/* More prominent shadow */
#white-card1, #white-card2, #white-card3 {
padding: 8px;
font-size: 0.9rem;
}


#white-card1,
#white-card2,
#white-card3 {
color: #1e293b;
/* Darker text for readability */
padding: 10px;
margin-bottom: 20px;
}


#color-card-green,
#color-card-orange,
#color-card-purple {
border-radius: 12px;
/* Rounded corners for color cards */
@media screen and (max-width: 480px) {
.head {
font-size: 1rem;
}

#shadow1,
#shadow2,
#shadow3 {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.1);
/* Light shadow for depth */
border-radius: 12px;
/* Match the card's border radius */
top: 0;
left: 0;
z-index: 1;
/* Make sure shadow is under content */
#white-card1, #white-card2, #white-card3 {
font-size: 0.8rem;
}
}

.column-layout {
display: column; /* Use flexbox to enable flex properties */
flex-direction: column; /* Stack the items vertically */
align-items: center; /* Center items horizontally */

}

.column-layout > div {
width: 100%;
max-width: 90%;
margin: 10px 0;
}

@keyframes bounce {

0%,
20%,
50%,
80%,
100% {
transform: translateY(0);
/* Start and end at the original position */
}

40% {
transform: translateY(-10px);
/* Move up */
}

60% {
transform: translateY(-5px);
/* Move down slightly */
}
}

</style>

#good-card1,
#good-card2,
#good-card3 {
animation: bounce 2s infinite;
/* Continuous bounce animation */
}

<script>

#good-card1,
#good-card2,
#good-card3 {
transition: box-shadow 0.4s ease;
/* Keep shadow transition */
function checkScreenSize() {
const goodCard = document.getElementById('good-card');
if (window.innerWidth < 1032 && window.innerHeight < 779) {
goodCard.classList.add('column-layout');
} else {
goodCard.classList.remove('column-layout');
}
}

@media screen and (max-width: 768px) {

#good-card1,
#good-card2,
#good-card3 {
font-size: 12px;
padding-left: 20px;
text-align: center;
}
// Run on page load
checkScreenSize();

#card2 {
font-size: 19px;
width: 130%;
text-align: center;
}

#card3 {
font-size: 21px;
width: 110%;
text-align: center;
}

#white-card1,
#white-card2,
#white-card3 {
padding-left: 4px;
}
}
</style>
// Run whenever the window is resized
window.addEventListener('resize', checkScreenSize);

</script>
<section class="contributors" style="margin-bottom: 65px;">
<h2>Our Contributors</h2>
<div class="contributor-cards" id="contributor-cards"></div>
Expand Down
1 change: 1 addition & 0 deletions blog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1212,4 +1212,5 @@ <h4 class="title custom-margin">Contact Us</h4>

</body>

</head>
</html>
Loading

0 comments on commit 876db78

Please sign in to comment.