Scribd
Upload
7 views4 pages

2

The document contains CSS styles for a user interface, including styles for category tabs, tool cards, feature cards, and animations. It defines layout properties using grid systems, hover effects, and transitions for various elements. Additionally, it includes keyframe animations for visual effects like pulse, float, and shake.

Uploaded by

saifjutt1959
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
7 views4 pages

2

The document contains CSS styles for a user interface, including styles for category tabs, tool cards, feature cards, and animations. It defines layout properties using grid systems, hover effects, and transitions for various elements. Additionally, it includes keyframe animations for visual effects like pulse, float, and shake.

Uploaded by

saifjutt1959
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

.

category-tab {
padding: 8px 20px;
border-radius: 50px;
background: var(--light-gray);
color: var(--gray);
font-weight: 500;
cursor: pointer;
transition: var(--transition);
}

.category-tab.active {
background: var(--primary);
color: var(--white);
}

.tools-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 25px;
}

.tool-card {
background-color: var(--white);
border-radius: var(--radius-lg);
padding: 30px;
box-shadow: var(--shadow);
transition: var(--transition);
text-align: center;
position: relative;
overflow: hidden;
transform: translateY(20px);
opacity: 0;
}

.tool-card.animated {
transform: translateY(0);
opacity: 1;
}

.tool-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(to right, var(--primary), var(--primary-dark));
}

.tool-card:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: var(--shadow-hover);
}

.tool-icon {
width: 70px;
height: 70px;
background-color: rgba(115, 9, 188, 0.1);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto 20px;
font-size: 1.8rem;
color: var(--primary);
transition: var(--transition);
}

.tool-card:hover .tool-icon {
background-color: var(--primary);
color: var(--white);
transform: rotateY(180deg);
}

.tool-card h3 {
font-size: 1.3rem;
margin-bottom: 12px;
}

.tool-card p {
color: var(--gray);
font-size: 0.95rem;
}

.load-more {
margin-top: 50px;
text-align: center;
}

.load-more button {
padding: 12px 30px;
background-color: var(--primary);
color: var(--white);
border: none;
border-radius: 50px;
font-weight: 500;
cursor: pointer;
transition: var(--transition);
box-shadow: var(--shadow);
}

.load-more button:hover {
background-color: var(--primary-dark);
transform: translateY(-3px);
box-shadow: var(--shadow-hover);
}

/* Features Section */
.features {
background-color: var(--light-gray);
}

.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.feature-card {
background-color: var(--white);
border-radius: var(--radius-lg);
padding: 40px 30px;
box-shadow: var(--shadow);
text-align: center;
transition: var(--transition);
}

.feature-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-hover);
}

.feature-icon {
width: 80px;
height: 80px;
background-color: rgba(115, 9, 188, 0.1);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto 25px;
font-size: 2rem;
color: var(--primary);
}

.feature-card h3 {
font-size: 1.5rem;
margin-bottom: 15px;
}

.feature-card p {
color: var(--gray);
}

/* Animation Classes */
.pulse {
animation: pulse 2s infinite;
}

.float {
animation: float 6s infinite ease-in-out;
}

.shake {
animation: shake 3s infinite;
}

@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}

@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-15px);
}
}

@keyframes shake {
0%, 100% {
transform: rotate(0deg);
}
25% {
transform: rotate(-5deg);
}
75% {
transform: rotate(5deg);
}
}

/* How It Works Section */


.how-it-works {
background-color: var(--white);
}

.steps {
max-width: 800px;
margin: 0 auto;
position: relative;
}

.steps::before {
content: '';
position: absolute;
left: 30px;
top: 40px;
bottom: 40px;
width: 2px;
background-color: var(--light-gray);
z-index: 1;
}

.step {
display: flex;
margin-bottom: 40px;
position: relative;
z-index: 2;
}

.step:last-child {
margin-bottom: 0;
}

.step-number {

You might also like