An open API service indexing awesome lists of open source software.

https://github.com/afa-farkhod/portfolio-html-css

Portfolio using HTML and CSS
https://github.com/afa-farkhod/portfolio-html-css

css html

Last synced: 3 months ago
JSON representation

Portfolio using HTML and CSS

Awesome Lists containing this project

README

        

# Portfolio-HTML-CSS
Portfolio using HTML and CSS

- The `HTML` file provides the structure and content of the webpage, while the `CSS` file (style.css) provides the visual styles and layout for the elements. The webpage includes a header with navigation links and a prominent home section introducing the page owner with an image, heading, subheading and social media links.

- `index.html` HTML Structure:
- DOCTYPE html ~ declares the HTML version.
- html lang = en ~ the root HTML element with the language set to English.
- head ~ contains meta information and links to external resources.
- meta tags for character set, compatibility, and viewport settings.
- title links to an external CSS file (style.css) and a font stylesheet.
- body ~ contains the content of the webpage.
- header Section contains a logo and a navigation bar with links.
- home Section contains two main elements: an image and content.
- Image (img) and content (heading, subheading, and paragraph) for a personal introduction.
- Social media icons and a "Download CV" button.

- `style.css` CSS Resets and Global Styles:
- Resets default margins, padding, and box-sizing for all elements.
- Sets the font family to 'Poppins' for the entire document.
- Header Styles ~ styles for the header section, including positioning, background, and styling of the logo and navigation links.
- Home Section Styles ~ styling for the home section, including background gradient, layout, and alignment of the image and content.
- Home Image Styles ~ styling for the circular image.
- Home Content Styles ~ styling for the content within the home section, including typography and layout.
- Animation Styles ~ an animation (animateText) for a text background gradient effect.
- Social Icons Styles ~ styles for the social media icons.
- Button Styles ~ styles for the "Download CV" button.


Image

## [Reference]()

- [boxicons](https://boxicons.com/) - Simple Open Source icons carefully crafted for designers & developers
- [w3schools](https://www.w3schools.com/html/default.asp) - HTML is the standard markup language for Web pages.
- [javatpoint](https://www.javatpoint.com/html-tutorial) - another HTML & CSS related course materials