yeffersonsilva / example-of-amazing-sports-website

This is an example of a sports-themed website created for GitHub, demonstrating the use of HTML and CSS to implement various design elements. The website showcases a dynamic layout using the display: grid property and incorporates a color scheme that includes Gold, Darkred, and Black.

Example of Amazing Sports Website

This is an example of a sports-themed website created for GitHub, demonstrating the use of HTML and CSS to implement various design elements. The website showcases a dynamic layout using the display: grid property and incorporates a color scheme that includes Gold, Darkred, and Black.

Design Features

• Utilizes color tags including #Gold, #Darkred, and #Black.
• Implements the display: grid property for layout structuring.
• Integrates images from both Moodle resources and additional internet sources.
• Incorporates social media icons as clickable images, aligned to the right with a width of 120px.
• Includes a logo with a width of 50px and automatic left and right margins.
• Implements a menu using an unordered list (ul) with customized styling. List items are displayed inline, and links are displayed inline-block. Border color changes on link hover to indicate interactivity.
• Features a main news section with a central non-repeating background image, 600px in height, and automatic left and right margins. The title has a 10px padding and serves as a link.
• Displays the latest game section with centered content, automatic left and right margins, and adjusted text size and colors. Images are 60px wide.
• Includes an arena banner with a centered non-repeating background image and a height of 280px.
• Presents sponsor logos as clickable images, each with a width of 100px and 20px padding between them.
• Exhibits the upcoming game section with centered and vertically aligned content. Images are 60px wide, and there is 20px padding.
• Lists upcoming games similarly to the previous section, but with images scaled to 50px width and no padding.
• Uses a grid layout for news articles, displaying four columns per row with a 20px gap between them.
• Styles each news article box with a centered title functioning as a link and images with a width of 100px. Top padding is set to 4px.
• Aligns the footer to the right side.

Note: This is a fictional example created for educational purposes and does not represent an actual sports website. The design features mentioned above are based on the provided requirements and specifications.

Tags: #sports #website #HTML #CSS #gridlayout #designelements #colorscheme #socialmedia #dynamiclayout #images #responsivedesign