https://github.com/mafsida/goit-markup-hw-04
This is the fourth assignment from the Full Stack Developer course at GoIT. In this module, I applied background images, shadows, and SVG icons, while using transitions and pseudo-elements. The project demonstrates advanced CSS effects and SVG integration.
https://github.com/mafsida/goit-markup-hw-04
background-images css css-transitions frontend goit goit-markup-hw-03 html markup pseudo-elements responsive-web-design shadows svg svg-icons svg-sprite web-development
Last synced: 7 months ago
JSON representation
This is the fourth assignment from the Full Stack Developer course at GoIT. In this module, I applied background images, shadows, and SVG icons, while using transitions and pseudo-elements. The project demonstrates advanced CSS effects and SVG integration.
- Host: GitHub
- URL: https://github.com/mafsida/goit-markup-hw-04
- Owner: mafSida
- Created: 2024-08-03T09:26:36.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-12T16:47:32.000Z (about 1 year ago)
- Last Synced: 2025-01-17T11:34:53.765Z (9 months ago)
- Topics: background-images, css, css-transitions, frontend, goit, goit-markup-hw-03, html, markup, pseudo-elements, responsive-web-design, shadows, svg, svg-icons, svg-sprite, web-development
- Language: HTML
- Homepage: https://mafsida.github.io/goit-markup-hw-04/
- Size: 1.07 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# GoIT Markup Home Work 4
Advanced CSS effects with SVG icons, transitions, and pseudo-elements.
## Overview
This project is the fourth assignment of the GoIT Full Stack Developer course. It focuses on adding advanced CSS effects, including background images, shadows, and SVG icons. The assignment also covers CSS transitions, pseudo-elements, and positioning. Additionally, SVG sprites were optimized and integrated for icons on the webpage.
The design mockup used for this assignment can be found [here](https://www.figma.com/design/wuEpGhwCepGCOUw7mZFRac/Web-Studio-(Version-5.0)?node-id=0-1&node-type=canvas&t=iMO7bWQ8BFWCih1e-0).
## Screenshots
All screenshots related to the project can be found in the [images folder](./images).
## Summary
In this project, I have:
- Applied background images with gradients for visual effects.
- Integrated and optimized SVG sprites for icons.
- Used CSS transitions for hover and focus states.
- Styled elements using pseudo-elements for decorative effects.
- Worked with Flexbox and implemented responsive design.
- Ensured the project follows best practices for modern CSS and web development.
This assignment enhanced my skills in creating advanced CSS effects, using SVG icons, and optimizing user experience with transitions.