https://github.com/tamiko-n/my_linktree
This project is a simple, elegant, and responsive LinkTree built using HTML and CSS. It serves as a central hub for all my important links, making it easy to navigate and access my social media profiles, portfolio, and other significant resources.
https://github.com/tamiko-n/my_linktree
html-css linktree webdevelopment
Last synced: 4 months ago
JSON representation
This project is a simple, elegant, and responsive LinkTree built using HTML and CSS. It serves as a central hub for all my important links, making it easy to navigate and access my social media profiles, portfolio, and other significant resources.
- Host: GitHub
- URL: https://github.com/tamiko-n/my_linktree
- Owner: Tamiko-n
- Created: 2024-08-03T06:28:59.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-08-06T14:58:40.000Z (11 months ago)
- Last Synced: 2025-01-08T14:44:03.769Z (5 months ago)
- Topics: html-css, linktree, webdevelopment
- Language: HTML
- Homepage:
- Size: 20.5 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Here's a detailed description of the given HTML and CSS code:
---
# My LinkTree
My LinkTree is a personalized web page that displays links to various social media profiles and contact methods in a clean, visually appealing layout. This project leverages HTML and CSS to create an organized, stylish presentation of your online presence.
## Features
- **Profile Picture**: Displays a circular profile picture at the top of the page.
- **Social Media Links**: Provides buttons to various social media platforms and contact methods, styled with hover effects.
- **Responsive Design**: Centers content vertically and horizontally within the viewport.
- **Customizable Colors**: Uses a bright color scheme with hover transitions for interactive feedback.
## Code Structure
### HTML
The HTML file defines the structure of the web page. It includes references to a CSS file for styling and defines the content layout.
### CSS
The CSS file styles the elements defined in the HTML, making the page visually appealing and responsive.
## Explanation
### HTML
- **Metadata**:
- `@page` and `@model` directives are used for ASP.NET Core Razor Pages, indicating the page model for the view.
- `@ViewData["Title"]` sets the page title dynamically.
- **Content**:
- `
`: A wrapper div that contains all the page content, styled for centering and background color.
- `` and ``: Headings for the page title and the user's name.
- `![]()
`: An image tag for the profile picture, with classes for styling.
- Multiple `` tags: Link elements styled as buttons, each linking to a different social media platform.
### CSS
- **Body Styling**:
- Centers content both vertically and horizontally within the viewport.
- Sets a light grey background color.
- **Container Styling**:
- Centers the content within the page.
- Applies a rounded border, padding, and a shadow for a card-like appearance.
- **Heading Styling**:
- Sets the color and margin for headings.
- **Profile Picture Styling**:
- Sets dimensions and applies a circular mask using `border-radius`.
- Centers the profile picture and adds margin for spacing.
- **Button Styling**:
- Sets dimensions, background color, text color, and border.
- Centers the buttons and adds margin for spacing.
- Applies a transition effect for a smooth color change on hover.
## Usage
1. **Replace Links**:
- Update the `href` attributes in the `
` tags with your actual social media profile URLs and email address.
2. **Profile Picture**:
- Replace `https://image_source.jpg` with the URL of your profile picture.
3. **Customize Styles**:
- Modify the `styles.css` file to change colors, fonts, and other styles as desired.
4. **Deploy**:
- Host the `index.html` and `styles.css` files on a web server or use a static site hosting service like GitHub Pages, Netlify, or Vercel.
This project provides a stylish and interactive way to present your online presence, making it easy for others to connect with you.