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.
- 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