Scribd
Upload
4 views1 page

CSS Effects Assignment

The assignment requires the creation of a responsive web page using HTML and CSS, focusing on text shadows, box shadows, gradients, and animations. Key tasks include applying various shadow effects, creating cards with hover effects, implementing multiple gradient types, and using CSS animations with keyframes. Additionally, there is a bonus task for a gradient button with a hover glow effect, and submissions must include properly formatted and commented HTML and CSS files by a specified deadline.

Uploaded by

A.L Universe
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views1 page

CSS Effects Assignment

The assignment requires the creation of a responsive web page using HTML and CSS, focusing on text shadows, box shadows, gradients, and animations. Key tasks include applying various shadow effects, creating cards with hover effects, implementing multiple gradient types, and using CSS animations with keyframes. Additionally, there is a bonus task for a gradient button with a hover glow effect, and submissions must include properly formatted and commented HTML and CSS files by a specified deadline.

Uploaded by

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

HTML & CSS Assignment

Topic: Text Shadow, Box Shadow, Animations & Gradients

Create a responsive web page using HTML and CSS that demonstrates the following CSS
properties:

1. Text Shadow
- Apply text-shadow to headings and paragraphs.
- Use different colors and blur effects.

2. Box Shadow
- Create at least 3 cards with box-shadow.
- Add hover effect to change shadow and position.

3. CSS Gradients
- Linear Gradient (at least 2 colors)
- Radial Gradient
- Conic Gradient
- Gradient Background for full page

4. CSS Animation
- Create a moving box using @keyframes.
- Add at least one infinite animation.
- Use transform (scale/rotate/translate).

5. Bonus (Optional)
- Create a gradient button with hover glow effect.
- Add smooth transitions.

Submission Guidelines:

• Submit [Link] and [Link] files.


• Code must be properly formatted and commented.
• Design should be clean and visually attractive.
• Deadline: ____________

You might also like