Assignment 1: CSS

📹 Final Effect Demo

Watch this video to see the expected final result for all four questions:

⚠️ IMPORTANT: Do NOT Modify the HTML

You are ONLY allowed to edit the styles.css file. Do NOT change any HTML structure, classes, IDs, or content. All required animations and styling must be achieved purely through CSS.

Note: If specific sizes, colors, or values are not mentioned in the requirements, you may choose values that are similar to the final demo. These unspecified details will not affect your grade.

Question 1: Colorful Pulsing Dots Loader

Task: Create a loading animation with three circular dots that pulse (scale up) sequentially with a rhythmic timing delay.

Requirements:

  • Structure: Three circular elements (spans) displayed horizontally
  • Appearance: Dark gradient background, three colorful glowing dots (red, cyan, yellow), no borders
  • Animation: Each dot scales from size 1 to 2 with glowing effect. First dot starts, second dot starts 0.27s later, third dot starts 0.53s later
  • Timing: 0.8s duration, ease-in-out easing, alternate direction (grows then shrinks), infinite loop
  • Technical: Use CSS variables for colors and sizing, flexbox for centering, transform: scale(), box-shadow for glow, filter for brightness

Demo: Watch the pulsing dots animation below

Question 2: Navigation Menu with Animated Underline

Task: Create a navigation bar where hovering over any item displays an animated cyan underline that expands from the center outward.

Requirements:

  • Structure: Navigation bar containing 4 items (item1, item2, item3, item4) evenly distributed
  • Appearance: Dark gray background, white text, 50px height, horizontally centered navigation items
  • Animation: On hover, a bright cyan underline smoothly expands from the center to fill the full width of the item
  • Timing: Smooth transition with 0.2s duration

Demo: Hover over the navigation items below

Question 3: SVG Animation with Hover Effects

Task: Create an interactive SVG circle that transforms a play icon into pause bars on hover, with an animated border.

Requirements:

  • SVG Elements: Two ellipses (cx="65", cy="65", rx="55", ry="55"), one polygon play icon (points="52,45 52,85 82,65"), two pause bars (width="6", height="30")
  • Colors: Navy background (#1a1a2e), purple (#9b59b6), orange (#f39c12)
  • Initial State: Purple circle visible, play icon visible (opacity: 1), pause bars hidden (opacity: 0)
  • Hover State: Orange circle animates around (stroke-dashoffset: 350 → 0), play icon fades/shrinks, pause bars fade/grow
  • Animations: Use stroke-dasharray/offset for border, transform scale for icons, opacity transitions (250ms, 400ms, 900ms)

Demo: Hover over the circle below

Play/Pause

Question 4: Clock with Millisecond Timer

Task: Create an animated clock face with hour markers positioned around the circle, three clock hands (hour, minute, second), and two sub-dials: a millisecond timer on the right side and a 30-minute timer at the bottom.

Requirements:

  • Structure: Clock container with 12 hour markers (tick marks), three hands (hour, minute, second), and two sub-dial circles: millisecond timer positioned on the right side and 30-minute timer at bottom, each containing their own hand, label, and center dot
  • Appearance: Circular clock face with 12 tick marks positioned around the edge, gradient background, three distinct hands of different lengths. Blue semi-transparent millisecond sub-dial with "millisecond" label at top right. Purple semi-transparent 30-minute timer sub-dial with "30 MIN" label at bottom
  • Positioning: 12 hour markers positioned at 30° intervals using absolute positioning and transform-origin. Clock hands use bottom: 50% and transform-origin: center bottom to rotate from center. Millisecond sub-dial positioned at right: 25%, top: 50%. 30-minute timer sub-dial positioned at left: 50%, top: 75%. Each sub-dial has its own center dot
  • Animation: Three separate animations for hour (slow), minute (medium), second (fast) hands rotating continuously. Millisecond indicator spins rapidly (1 second per rotation) in the right sub-dial. 30-minute timer hand completes one rotation in 30 seconds in the bottom sub-dial
  • Technical: Use position: absolute, transform (rotate, translate), transform-origin for pivot points, multiple @keyframes animations with different durations, nested positioning for sub-dial components, right-based and percentage-based positioning for multiple sub-dials

Demo: Watch the animated clock below

millisecond
30 MIN

Grading Criteria

Question Criteria Points
Q1 (20 pts) CSS structure & variables 6
Keyframe animation & timing delays 10
Code quality & styling 4
Q2 (20 pts) Navigation structure & layout 6
Animated underline effect 10
Code quality & styling 4
Q3 (30 pts) SVG styling & layout 10
Animation implementation (border, icons) 15
Code quality & transitions 5
Q4 (30 pts) Clock positioning & hour markers 10
Multiple animations & sub-dials 15
Code quality & accuracy 5

Submission Instructions