Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/stefruseva88/html-css-styles-part2

HTML/CSS for creating and styling different web page layouts
https://github.com/stefruseva88/html-css-styles-part2

html-css-javascript layouts

Last synced: 20 days ago
JSON representation

HTML/CSS for creating and styling different web page layouts

Awesome Lists containing this project

README 

        
# HTML and CSS - Part 2



[![Font Awesome](https://img.shields.io/badge/Font%20Awesome-005C7F.svg)](https://fontawesome.com/)

[![CSS](https://img.shields.io/badge/Made%20with-CSS-1572B6.svg)](https://developer.mozilla.org/en-US/docs/Web/CSS)

[![HTML](https://img.shields.io/badge/Made%20with-HTML-E34F26.svg)](https://developer.mozilla.org/en-US/docs/Web/HTML)

### This is a project for Front-End Technologies May 2024 Course @ SoftUni

---

## Table of Contents

1. [Box Model Container](#box-model-container)

2. [Brazil Coffee](#brazil-coffee)

3. [Article](#article)

4. [Navigation Inline Block](#navigation-inline-block)

5. [Photo Gallery Inline Block](#photo-gallery-inline-block)

6. [Position Playground](#position-playground)

7. [Center Position and Transform](#center-position-and-transform)

8. [Navigation](#navigation)

9. [Social Media Icons](#social-media-icons)

10. [Flexbox Layout](#flexbox-layout)

11. [FlexModel Articles](#flexmodel-articles)

12. [ABC Game](#abc-game)

13. [Calendar](#calendar)

14. [Navigation Flexbox](#navigation-flexbox)

15. [Photo Gallery Flexbox](#photo-gallery-flexbox)

16. [Blog Layout Flexbox](#blog-layout-flexbox)

17. [Sticky Footer Flexbox](#sticky-footer-flexbox)

18. [Center Flexbox](#center-flexbox)

19. [License](#License)

20. [Contact](#Contact)



## Box Model Container

- Demonstrates the box model concept by creating a centered container with padding, a solid border, and a unique border-radius to give the container a rounded look. This exercise focuses on understanding how the content, padding, and border interact, emphasizing the importance of layout structure.



## Brazil Coffee

- A visually rich section that showcases a coffee-themed layout. Includes a large heading, a call-to-action button, and a stylized paragraph. It emphasizes typography, button styling, and the aesthetic balance between text and visuals, all using HTML and CSS properties.



## Article

- Styles an article layout with a combination of floated images and justified text to create a balanced and readable layout. This section focuses on utilizing float properties to wrap text around images, creating visually engaging articles with well-structured content blocks.



## Navigation Inline Block

- Builds a horizontal navigation bar using the `inline-block` display property. List items are transformed into navigational links, each styled to fit seamlessly together. This exercise demonstrates how to manage horizontal navigation menus without using flexbox or grid systems.



## Photo Gallery Inline Block

- Develops a simple, responsive photo gallery using the `inline-block` display for the images. Each photo is styled with borders and padding, and images are centrally aligned within the gallery container. This section explores basic gallery layout techniques without flexbox.



## Position Playground

- Focuses on the use of absolute and relative positioning to create complex layouts. This exercise explores how content can be layered and precisely positioned within containers, providing hands-on practice with the `position` property for creating dynamic and responsive layouts.



## Center Position and Transform

- Demonstrates how to center content within the viewport using a combination of `position` and `transform`. This technique ensures elements are perfectly centered both horizontally and vertically, even when the viewport size changes, making it ideal for card layouts or modals.



## Navigation

- This section creates a more advanced navigation bar with multiple levels of links, headers, and sections. It utilizes hover effects and different states to create an interactive menu system, providing a deep dive into more complex navigational structures using CSS.



## Social Media Icons

- Implements social media icons using FontAwesome, adding hover effects for interactivity. Each icon is styled to change color or size when hovered over, creating a visually appealing way to link to social media profiles. This exercise explores iconography and hover state management.



## Flexbox Layout

- Builds a responsive layout using Flexbox, consisting of a header, main content area, aside section, and footer. The exercise emphasizes Flexbox's ability to create flexible, responsive designs that adapt to different screen sizes, ensuring consistent spacing and alignment.



## FlexModel Articles

- Creates a section of articles displayed in a grid-like fashion using Flexbox. Each article is spaced evenly within its container, allowing for a clean and organized layout. This exercise focuses on Flexbox's alignment and spacing properties, ideal for blog or news page layouts.



## ABC Game

- Develops an interactive alphabet game using Flexbox to arrange letters in an ordered, flexible grid. The game layout adapts to different screen sizes, ensuring the letters remain evenly spaced and responsive. This section showcases the versatility of Flexbox in creating game interfaces.



## Calendar

- Designs a functional calendar layout using Flexbox. The calendar displays days of the week, with space for notes or events. This section highlights how Flexbox can be used to create structured, grid-like layouts, perfect for organizing content such as dates or schedules.



## Navigation Flexbox

- Creates a fully responsive navigation bar using Flexbox. The links are evenly distributed and realigned based on the screen size, offering a modern approach to navigational menus. This exercise focuses on Flexbox’s ability to handle dynamic layouts efficiently.



## Photo Gallery Flexbox

- Builds a flexible and responsive photo gallery using Flexbox. The images are spaced evenly, and the gallery adjusts to the screen size, ensuring all photos maintain their proportions. This section explores Flexbox’s use in aligning and distributing items within a container.



## Blog Layout Flexbox

- Designs a blog page layout with a flexbox-based structure. The content is arranged with a main article section and a sidebar, both of which adjust based on the screen size. This layout focuses on Flexbox's ability to create scalable and adaptable page structures for content-heavy websites.



## Sticky Footer Flexbox

- Creates a layout that ensures the footer stays "sticky" at the bottom of the page using Flexbox. This exercise demonstrates how to maintain the footer’s position even when content is limited, utilizing Flexbox’s space-distribution properties to manage vertical layouts.



## Center Flexbox

- Centers a content card in the middle of the viewport using Flexbox. The card remains perfectly centered regardless of the viewport size, showcasing the simplicity and effectiveness of Flexbox in handling alignment and centering tasks within a web page layout.



## License

This project is licensed under the [MIT License](LICENSE). See the [LICENSE](LICENSE) file for details.



## Contact

For any questions or suggestions, please open an issue in the repository.