azpilot2211 / website-starter-files

responsive starter files for website.

Responsive starter files for website

This is the README file for the website starter files.

Description

This HTML starter page showcases various responsive text elements styled using different fonts and CSS properties. It also includes buttons and an image all responsive.

File Structure

• index.html: The main HTML file containing the content structure and styling.
• css/styles.css: The CSS file containing styles for fonts, colors, layout, and responsiveness.
• assets/fonts: The fonts in woff2, woff format.

HTML Content

The HTML file (index.html) contains the following elements:

• Headings (h1 to h6) styled with different fonts and responsive text sizes.
• Paragraphs (p) with varying font styles and responsive sizes.
• Buttons (btn) with different background colors.
• An image (img) displayed with responsive styling.

CSS Styles

The CSS file (css/styles.css) includes:

• Font definitions using @font-face for custom fonts.
• Global styling for elements like body, links, headings, paragraphs, and images.
• Styling for buttons with different color variations.
• Media queries for responsiveness on smaller screens.

Fonts Used

• forumregular: Used for headings.
• robotobold: Used for bold text.
• robotolight: Used for light text.
• robotoregular: Used for regular text.
• playpen: Used for italicized text.
• antonio: Used for special emphasis.
• dida: Used for metadata.

Media Queries

The CSS file includes media queries for responsive design, adjusting layout and font sizes for screens with a width of 400px or less.

Additional Notes

• Images used in the project are located in the images directory.
• Custom fonts are located in the assets/fonts directory.

Preview Responsiveness

Author

This HTML page and its accompanying styles were created by Michael Driggs for demonstration purposes.