technolyceum/g11-m3
Template
15
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added starter_index.html

Browse Source
This commit is contained in:
root
2026-01-14 22:17:01 +03:00
parent 1cebdf297d
commit b666a45f4e
11 changed files with 535 additions and 481 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored
View File

Binary file not shown.

BIN
Bulma_Version/.DS_Store vendored
View File

Binary file not shown.

BIN
Bulma_Version/assets/.DS_Store vendored
View File

Binary file not shown.

9
Bulma_Version/assets/css/all.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
Bulma_Version/assets/css/bulma.min.css vendored
View File

File diff suppressed because one or more lines are too long

103
Bulma_Version/assets/css/style.css
View File

@@ -1,103 +0,0 @@
/* Custom styles for the Maxy Social Platform */
/* Fix for overlapping text issue */
.title.is-5.mb-2 {
margin-bottom: 0.25rem !important;
}
.subtitle.is-6.has-text-grey {
margin-bottom: 0.5rem !important;
}
/* Specific fix for profile card overlap */
.card-content .has-text-centered .title.is-5 {
margin-bottom: 0.25rem;
}
.card-content .has-text-centered .subtitle.is-6 {
margin-bottom: 1rem;
}
/* Custom button styles */
.maxy-primary {
background-color: #3273dc;
color: white;
}
.maxy-primary:hover {
background-color: #2761bb;
}
.maxy-primary-outlined {
border: 1px solid #3273dc;
color: #3273dc;
}
.maxy-primary-outlined:hover {
background-color: #3273dc;
color: white;
}
/* Avatar styles - Fixed distortion */
.post-avatar {
width: 50px;
height: 50px;
min-width: 50px;
min-height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
text-align: center;
line-height: 1;
object-fit: cover;
}
/* Profile stats layout */
.profile-stats {
margin-top: 1rem;
}
/* Card content spacing */
.card-content {
padding: 1.5rem;
}
/* Media queries for responsiveness */
@media screen and (max-width: 768px) {
.columns.is-variable.is-5 {
margin: 0;
}
.column.is-one-quarter {
margin-bottom: 1.5rem;
}
}
/* Navbar item adjustments */
.navbar-brand .logo-img {
max-height: none;
height: 3rem;
margin-right: 0.75rem;
}
/* Adjustments for form elements */
.textarea {
min-height: 8rem;
}
/* Footer adjustments */
.footer {
padding: 3rem 1.5rem 3rem;
}
/* Fallback styles for icon containers */
.icon {
width: 1.5em;
height: 1.5em;
display: flex;
align-items: center;
justify-content: center;
}

BIN
Bulma_Version/assets/image/.DS_Store vendored
View File

Binary file not shown.

BIN
Bulma_Version/assets/image/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 23 KiB

253
Maxy - Social Platform.html
View File

@@ -1,253 +0,0 @@
<!DOCTYPE html>
<!-- saved from url=(0069)file:///Users/home/Downloads/deepseek_html_20260113_03dafe%20(1).html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Maxy - Social Platform</title>
</head>
<body>
<!-- Header -->
<header>
<div class="container">
<div class="header-content">
<div class="logo">Maxy</div>
<nav>
<ul class="nav-menu">
<li><a href="file:///Users/home/Downloads/deepseek_html_20260113_03dafe%20(1).html#" class="nav-item">Home</a></li>
<li><a href="file:///Users/home/Downloads/deepseek_html_20260113_03dafe%20(1).html#" class="nav-item">Explore</a></li>
<li><a href="file:///Users/home/Downloads/deepseek_html_20260113_03dafe%20(1).html#" class="nav-item">Notifications</a></li>
<li><a href="file:///Users/home/Downloads/deepseek_html_20260113_03dafe%20(1).html#" class="nav-item">Messages</a></li>
<li><a href="file:///Users/home/Downloads/deepseek_html_20260113_03dafe%20(1).html#" class="nav-item">Profile</a></li>
</ul>
</nav>
</div>
</div>
</header>
<!-- Main Content -->
<div class="container">
<div class="main-content">
<!-- Left Sidebar -->
<aside class="sidebar">
<!-- Profile Card -->
<div class="profile-card">
<div class="profile-avatar">JS</div>
<div class="profile-name">John Smith</div>
<div class="profile-handle">@johnsmith</div>
<div class="profile-stats">
<div class="stat">
<span class="stat-number">245</span>
<span class="stat-label">Posts</span>
</div>
<div class="stat">
<span class="stat-number">567</span>
<span class="stat-label">Following</span>
</div>
<div class="stat">
<span class="stat-number">1.2K</span>
<span class="stat-label">Followers</span>
</div>
</div>
</div>
<!-- Compose Post -->
<div class="compose-box">
<h3 class="compose-title">Create New Post</h3>
<textarea class="post-textarea" placeholder="What&#39;s on your mind?"></textarea>
<button class="post-button">Post to Maxy</button>
</div>
</aside>
<!-- Main Feed -->
<main class="feed">
<h2 class="feed-title">Your Feed</h2>
<!-- Post 1 -->
<article class="post-card">
<div class="post-header">
<div class="post-avatar">JD</div>
<div class="post-user-info">
<div class="post-username">Jane Doe</div>
<div class="post-handle">@janedoe</div>
</div>
<div class="post-time">2 hours ago</div>
</div>
<div class="post-content">
Just finished building a simple social platform with vanilla HTML and CSS! It's amazing what you can create with just the basics. #webdev #coding #HTML #CSS
</div>
<div class="post-actions">
<div class="action-btn">
<span>💬</span>
<span>12</span>
</div>
<div class="action-btn">
<span>🔄</span>
<span>8</span>
</div>
<div class="action-btn">
<span>❤️</span>
<span>45</span>
</div>
<div class="action-btn">
<span>📤</span>
</div>
</div>
</article>
<!-- Post 2 -->
<article class="post-card">
<div class="post-header">
<div class="post-avatar">BS</div>
<div class="post-user-info">
<div class="post-username">Bob Smith</div>
<div class="post-handle">@bobsmith</div>
</div>
<div class="post-time">4 hours ago</div>
</div>
<div class="post-content">
Learning web development step by step. Today we're focusing on HTML structure and CSS styling. Next week: JavaScript! #codingjourney #webdevelopment
</div>
<div class="post-actions">
<div class="action-btn">
<span>💬</span>
<span>5</span>
</div>
<div class="action-btn">
<span>🔄</span>
<span>3</span>
</div>
<div class="action-btn">
<span>❤️</span>
<span>28</span>
</div>
<div class="action-btn">
<span>📤</span>
</div>
</div>
</article>
<!-- Post 3 -->
<article class="post-card">
<div class="post-header">
<div class="post-avatar">AJ</div>
<div class="post-user-info">
<div class="post-username">Alice Johnson</div>
<div class="post-handle">@alicej</div>
</div>
<div class="post-time">1 day ago</div>
</div>
<div class="post-content">
The weather is beautiful today! Perfect for a walk in the park. Sometimes you just need to step away from the screen and enjoy nature. #sunnyday #nature
</div>
<div class="post-actions">
<div class="action-btn">
<span>💬</span>
<span>24</span>
</div>
<div class="action-btn">
<span>🔄</span>
<span>7</span>
</div>
<div class="action-btn">
<span>❤️</span>
<span>89</span>
</div>
<div class="action-btn">
<span>📤</span>
</div>
</div>
</article>
<!-- Post 4 -->
<article class="post-card">
<div class="post-header">
<div class="post-avatar">CS</div>
<div class="post-user-info">
<div class="post-username">Code School</div>
<div class="post-handle">@codeschool</div>
</div>
<div class="post-time">2 days ago</div>
</div>
<div class="post-content">
New blog post: "From Zero to Hero: Mastering CSS Positioning". Learn how to position elements on a webpage using float, position, and display properties. Check it out!
</div>
<div class="post-actions">
<div class="action-btn">
<span>💬</span>
<span>42</span>
</div>
<div class="action-btn">
<span>🔄</span>
<span>19</span>
</div>
<div class="action-btn">
<span>❤️</span>
<span>156</span>
</div>
<div class="action-btn">
<span>📤</span>
</div>
</div>
</article>
</main>
</div>
</div>
<script>
// Basic JavaScript for interactivity
document.addEventListener('DOMContentLoaded', function() {
const postButton = document.querySelector('.post-button');
const postInput = document.querySelector('.post-textarea');
postButton.addEventListener('click', function() {
if (!postInput.value.trim()) {
alert('Please enter some text for your post!');
return;
}
const preview = postInput.value.length > 50
? postInput.value.substring(0, 50) + '...'
: postInput.value;
alert('Post created: ' + preview);
postInput.value = '';
});
// Add like functionality
const likeButtons = document.querySelectorAll('.action-btn:nth-child(3)');
likeButtons.forEach(function(button) {
button.addEventListener('click', function() {
const span = this.querySelector('span:nth-child(2)');
if (span) {
const current = parseInt(span.textContent) || 0;
span.textContent = current + 1;
}
});
});
// Add reply functionality
const replyButtons = document.querySelectorAll('.action-btn:nth-child(1)');
replyButtons.forEach(function(button) {
button.addEventListener('click', function() {
const span = this.querySelector('span:nth-child(2)');
if (span) {
const current = parseInt(span.textContent) || 0;
span.textContent = current + 1;
}
});
});
});
</script>
</body></html>

425
README.md
View File

@@ -0,0 +1,425 @@
# Building a Modern Social Media Platform with Bulma CSS
This guide will walk you through the process of transforming a basic HTML structure ([starter_index.html](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/g11/G11M3-Web Development Frameworks/3.4 Sub-Project: CMS Website/g11-m3/bulma_version/starter_index.html)) into a fully styled modern social media platform ([index.html](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/g11/G11M3-Web Development Frameworks/3.4 Sub-Project: CMS Website/g11-m3/bulma_version/index.html)) using the Bulma CSS framework.
## What is Bulma?
Bulma is a free, open-source CSS framework based on Flexbox. It provides ready-to-use frontend components for building modern, responsive websites. Unlike some other CSS frameworks, Bulma is **pure CSS** and does **not require JavaScript** to function, making it lightweight and easy to implement.
### Key Features of Bulma:
- **Responsive**: Works on mobile, tablet, and desktop
- **Flexbox-based**: Uses modern CSS technology for layout
- **Pure CSS**: No JavaScript dependency
- **Modular**: Pick and choose only the components you need
- **Modern**: Clean, minimalist design by default
## Prerequisites
- Basic understanding of HTML
- A text editor (like VS Code, Sublime Text, etc.)
- A modern web browser for testing
## Setting Up Your Project Files
Before adding Bulma classes to your HTML, you need to properly set up your project structure and CSS files.
### Step 1: Create the Proper Folder Structure
Create the following folder structure in your project:
```
your-project-folder/
├── assets/
│ └── css/
│ ├── bulma.min.css # Bulma framework CSS
│ └── style.css # Your custom CSS
├── index.html # Your main HTML file
├── starter_index.html # Your starter HTML template
└── assets/
└── image/
└── logo.png # Your logo image
```
### Step 2: Obtain Bulma CSS Files
You have two options to get the Bulma CSS file:
#### Option A: Download and Place Locally (Recommended for Beginners)
1. Go to the official Bulma website: https://bulma.io/
2. Click on "Download" and select "Standalone version"
3. Extract the downloaded file and find the `bulma.min.css` file
4. Place the `bulma.min.css` file in your [assets/css](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/g11/G11M3-Web Development Frameworks/3.4 Sub-Project:%20CMS%20Website/g11-m3/bulma_version/assets/css) folder
Alternatively, you can download it directly from: https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css
#### Option B: Use CDN (Content Delivery Network)
Instead of downloading the file, you can link directly to Bulma hosted on a CDN by replacing the local link with:
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
```
##### Advantages of CDN approach:
- No need to download and store files locally
- Potentially faster loading if users have already cached the file from another site
- Automatic updates when you change the version in the URL
##### Disadvantages of CDN approach:
- Requires an internet connection to load the styles
- Slight dependency risk if the CDN goes down (though rare with major CDNs)
- Less control over the exact version used
### Step 3: Create Your Custom Style Sheet
Create a file called [style.css](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/g11/G11M3-Web Development Frameworks/3.4 Sub-Project:%20CMS%20Website/g11-m3/bulma_version/assets/css/style.css) in your [assets/css](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/g11/G11M3-Web Development Frameworks/3.4 Sub-Project:%20CMS%20Website/g11-m3/bulma_version/assets/css) folder to add your custom styles that complement Bulma.
## Step-by-Step Transformation Guide
### Step 1: Setting Up Bulma in Your Project
First, you need to add the Bulma CSS framework to your HTML file. In the [head](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/g11/G11M3-Web Development Frameworks/3.4 Sub-Project:%20CMS%20Website/g11-m3/bulma_version/simple_version.html#L7-L11) section of your HTML document, add the following links:
```html
<head>
<!-- ... existing code ... -->
<!-- BULMA LOCAL FILE -->
<link rel="stylesheet" href="./assets/css/bulma.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="./assets/css/style.css">
</head>
```
The first link imports the Bulma CSS framework from your local assets folder, and the second imports your custom styles that complement Bulma.
### Step 2: Applying Bulma Classes to Your Navigation
In the [starter_index.html](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/g11/G11M3-Web Development Frameworks/3.4 Sub-Project: CMS Website/g11-m3/bulma_version/starter_index.html) file, the navigation is basic HTML. Transform it using Bulma classes:
**Before (starter version):**
```
<!-- Navigation Bar -->
<nav>
<div>
<div>
<a href="#">
<!-- Logo Image -->
<div>
M
</div>
<span>Maxy</span>
</a>
<!-- Mobile menu button -->
<a role="button" aria-label="menu" aria-expanded="false" data-target="navbarMenu">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
</div>
</nav>
```
**After (improved version):**
```
<nav class="navbar is-fixed-top has-shadow">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item" href="#">
<!-- Logo Image -->
<div class="bg-indigo-600 text-white font-bold text-xl w-10 h-10 rounded-lg flex items-center justify-center mr-2 animate-float">
M
</div>
<span class="has-text-weight-bold is-size-4 has-text-maxy">Maxy</span>
</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarMenu">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarMenu" class="navbar-menu">
<div class="navbar-end">
<a class="navbar-item is-active">
<span class="icon">
<!-- Home icon would go here -->
</span>
<span class="ml-2">Home</span>
</a>
<!-- More navigation items -->
</div>
</div>
</div>
</nav>
```
#### Key Bulma Classes Used:
- `navbar`: Creates a navigation bar component
- `is-fixed-top`: Fixes the navbar at the top of the page
- `has-shadow`: Adds a shadow to the navbar
- `container`: Centers content and adds padding
- `navbar-brand`: Contains the logo and brand name
- `navbar-item`: An item inside the navbar (links, buttons, etc.)
- `navbar-burger`: Creates a responsive hamburger menu for mobile
- `navbar-menu`: Contains the navigation items
- `navbar-end`: Aligns navbar items to the right
- `is-active`: Highlights the currently active page
- `icon`: Creates an icon container
- `ml-2`: Adds left margin (margin-left: 0.5rem)
- `has-text-weight-bold`: Makes text bold
- `is-size-4`: Sets font size to level 4
### Step 3: Creating Responsive Layout with Columns
Let's compare the transformation of the main content area using Bulma's grid system:
#### Before (Basic HTML Structure)
```
<section>
<div>
<div>
<!-- Left Sidebar -->
<div>
<!-- Profile Card -->
</div>
</div>
</div>
</section>
```
#### After (Bulma Styled Version)
```
<section class="section" style="padding-top: 80px;">
<div class="container">
<div class="columns is-variable is-5">
<div class="column is-one-quarter">
<!-- Left Sidebar -->
<div class="card has-text-centered mb-5">
<!-- Profile Card Content -->
</div>
</div>
<div class="column">
<!-- Main Feed Content -->
</div>
<div class="column is-one-quarter">
<!-- Right Sidebar -->
</div>
</div>
</div>
</section>
```
#### Key Bulma Classes Used:
- `section`: Adds padding around content
- `columns`: Creates a row of columns
- `column`: Defines a column within the row
- `is-one-quarter`: Makes the column take up 1/4 of the row width
- `is-variable`: Allows spacing between columns to be adjusted
- `is-5`: Sets column spacing to level 5 (2rem)
- `card`: Creates a box with shadow for content
- `has-text-centered`: Centers text alignment
- `mb-5`: Adds bottom margin (margin-bottom: 1.5rem)
### Step 4: Creating Responsive Layout with Columns
Transform your main content area to use Bulma's grid system:
**Before:**
```
<section>
<div>
<div>
<!-- Left Sidebar -->
<div>
<!-- Profile Card -->
</div>
</div>
</div>
</section>
```
**After:**
```
<section class="section" style="padding-top: 80px;">
<div class="container">
<div class="columns is-variable is-5">
<div class="column is-one-quarter">
<!-- Left Sidebar -->
<div class="card has-text-centered mb-5">
<!-- Profile Card Content -->
</div>
</div>
<div class="column">
<!-- Main Feed Content -->
</div>
<div class="column is-one-quarter">
<!-- Right Sidebar -->
</div>
</div>
</div>
</section>
```
#### Key Bulma Classes Used:
- `section`: Adds padding around content
- `columns`: Creates a row of columns
- `column`: Defines a column within the row
- `is-one-quarter`: Makes the column take up 1/4 of the row width
- `is-variable`: Allows spacing between columns to be adjusted
- `is-5`: Sets column spacing to level 5 (2rem)
- `card`: Creates a box with shadow for content
- `has-text-centered`: Centers text alignment
- `mb-5`: Adds bottom margin (margin-bottom: 1.5rem)
### Step 5: Styling Cards and Content Elements
Apply Bulma classes to make cards and content look professional:
**Before:**
```
<div>
<div>
<div>JS</div>
<h2>John Smith</h2>
<p>@johnsmith</p>
<div>
<div>
<div>
<p>Posts</p>
<p>245</p>
</div>
</div>
<!-- More stats -->
</div>
</div>
</div>
```
**After:**
```
<div class="card has-text-centered mb-5">
<div class="card-content">
<div class="post-avatar mx-auto mb-4" style="background-color: #ff5722;">
JS
</div>
<h2 class="title is-5">John Smith</h2>
<p class="subtitle is-6 has-text-grey">@johnsmith</p>
<div class="level is-mobile profile-stats mt-4">
<div class="level-item has-text-centered">
<div>
<p class="heading">Posts</p>
<p class="title is-5">245</p>
</div>
</div>
<div class="level-item has-text-centered">
<div>
<p class="heading">Followers</p>
<p class="title is-5">1.2K</p>
</div>
</div>
<div class="level-item has-text-centered">
<div>
<p class="heading">Following</p>
<p class="title is-5">562</p>
</div>
</div>
</div>
</div>
</div>
```
#### Key Bulma Classes Used:
- `title`: Styles heading text
- `subtitle`: Styles subheading text
- `is-5`: Font size level 5
- `is-6`: Font size level 6
- `has-text-grey`: Grey text color
- `level`: Flexible horizontal layout component
- `is-mobile`: Makes level responsive for mobile
- `level-item`: Individual item in a level component
- `mx-auto`: Margin left and right auto (centers element)
- `mt-4`: Top margin (margin-top: 1rem)
- `heading`: Smaller heading text for labels
### Step 6: Adding Buttons with Bulma
Replace basic buttons with styled Bulma buttons:
**Before:**
```
<button>Message</button>
```
**After:**
```
<button class="button maxy-primary">Message</button>
```
#### Key Bulma Classes Used:
- `button`: Creates a styled button
- `maxy-primary`: Custom class defined in style.css for our brand color
### Step 7: Understanding Custom CSS
While Bulma provides many built-in styles, we've added custom CSS in [style.css](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/g11/G11M3-Web Development Frameworks/3.4 Sub-Project:%20CMS%20Website/g11-m3/bulma_version/assets/css/style.css) to enhance the design:
```css
/* Custom button styles */
.maxy-primary {
background-color: #3273dc;
color: white;
}
.maxy-primary:hover {
background-color: #2761bb;
}
/* Avatar styles - Fixed distortion */
.post-avatar {
width: 50px;
height: 50px;
min-width: 50px;
min-height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
```
## Advantages of Using Bulma
1. **Responsive by Default**: Everything automatically adapts to different screen sizes
2. **No JavaScript Required**: Pure CSS framework means faster loading and fewer conflicts
3. **Modern Design**: Clean aesthetic without additional customization needed
4. **Flexbox-Based**: Modern CSS technology for reliable layouts
5. **Extensive Documentation**: Well-documented with many examples
6. **Modular Approach**: Only use the parts you need
7. **Consistent Spacing**: Built-in spacing utilities make design consistent
## Common Bulma Utilities
Throughout the project, you'll see various utility classes:
- **Spacing**: `m-*` (margin), `p-*` (padding), combined with directions (`t`, `b`, `l`, `r`) and sizes (1-6)
- **Text**: `has-text-centered`, `has-text-weight-bold`, `is-capitalized`
- **Colors**: `has-text-primary`, `has-background-info`, etc.
- **Typography**: `title`, `subtitle`, `is-size-1` through `is-size-7`
## Troubleshooting Tips
1. **Layout Not Responsive**: Ensure you're using the `columns` and `column` classes correctly
2. **Elements Overlapping**: Check that you're using proper spacing classes (`mt-*`, `mb-*`, `pt-*`, `pb-*`)
3. **Buttons Not Styled**: Make sure you've added the `button` class
4. **Navigation Not Working on Mobile**: Verify that your navbar-burger and navbar-menu IDs match
## Next Steps
Once you've successfully transformed your [starter_index.html](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/g11/G11M3-Web Development Frameworks/3.4 Sub-Project: CMS Website/g11-m3/bulma_version/starter_index.html) into the full featured [index.html](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/g11/G11M3-Web Development Frameworks/3.4 Sub-Project: CMS Website/g11-m3/bulma_version/index.html), consider exploring more Bulma components like modals, dropdowns, panels, and tabs to further enhance your social media platform.

213
Bulma_Version/index.html → starter_index.html
View File

@@ -4,104 +4,103 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Maxy - Social Platform</title> <title>Maxy - Social Platform</title>
<!-- ================= BULMA CDN ================= -->
<link rel="stylesheet" href="./assets/css/bulma.min.css">
<!-- ================= CUSTOM CSS ================= -->
<link rel="stylesheet" href="./assets/css/style.css">
</head> </head>
<body> <body>
<!-- Navigation Bar --> <!-- Navigation Bar -->
<nav class="navbar is-fixed-top has-shadow"> <nav>
<div class="container"> <div>
<div class="navbar-brand"> <div>
<a class="navbar-item" href="#"> <a href="#">
<!-- Logo Image --> <!-- Logo Image -->
<img src="./assets/image/logo.png" alt="Maxy Logo" class="logo-img"> <div>
<span class="has-text-weight-bold is-size-4 has-text-maxy">Maxy</span> M
</div>
<span>Maxy</span>
</a> </a>
<!-- Mobile menu button --> <!-- Mobile menu button -->
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarMenu"> <a role="button" aria-label="menu" aria-expanded="false" data-target="navbarMenu">
<span aria-hidden="true"></span> <span aria-hidden="true"></span>
<span aria-hidden="true"></span> <span aria-hidden="true"></span>
<span aria-hidden="true"></span> <span aria-hidden="true"></span>
</a> </a>
</div> </div>
<div id="navbarMenu" class="navbar-menu"> <div id="navbarMenu">
<div class="navbar-end"> <div>
<a class="navbar-item is-active"> <a>
<span class="icon"> <span>
<!-- Home icon would go here --> <!-- Home icon would go here -->
</span> </span>
<span class="ml-2">Home</span> <span>Home</span>
</a> </a>
<a class="navbar-item"> <a>
<span class="icon"> <span>
<!-- Hashtag icon would go here --> <!-- Hashtag icon would go here -->
</span> </span>
<span class="ml-2">Explore</span> <span>Explore</span>
</a> </a>
<a class="navbar-item"> <a>
<span class="icon"> <span>
<!-- Bell icon would go here --> <!-- Bell icon would go here -->
</span> </span>
<span class="ml-2">Notifications</span> <span>Notifications</span>
</a> </a>
<a class="navbar-item"> <a>
<span class="icon"> <span>
<!-- Envelope icon would go here --> <!-- Envelope icon would go here -->
</span> </span>
<span class="ml-2">Messages</span> <span>Messages</span>
</a> </a>
<a class="navbar-item"> <a>
<span class="icon"> <span>
<!-- User icon would go here --> <!-- User icon would go here -->
</span> </span>
<span class="ml-2">Profile</span> <span>Profile</span>
</a>
<a>
<span>
<!-- User icon would go here -->
</span>
<button>Message</button>
</a> </a>
<div class="navbar-item">
<button class="button maxy-primary">
Message
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
</nav> </nav>
<!-- Main Content --> <!-- Main Content -->
<section class="section" style="padding-top: 80px;"> <section>
<div class="container"> <div>
<div class="columns is-variable is-5"> <div>
<!-- Left Sidebar --> <!-- Left Sidebar -->
<div class="column is-one-quarter"> <div>
<!-- Profile Card --> <!-- Profile Card -->
<div class="card has-text-centered mb-5"> <div>
<div class="card-content"> <div>
<div class="post-avatar mx-auto mb-4" style="background-color: #ff5722;"> <div>
JS JS
</div> </div>
<h2 class="title is-5">John Smith</h2> <h2>John Smith</h2>
<p class="subtitle is-6 has-text-grey">@johnsmith</p> <p>@johnsmith</p>
<div class="level is-mobile profile-stats mt-4">
<div class="level-item has-text-centered">
<div> <div>
<p class="heading">Posts</p>
<p class="title is-5">245</p>
</div>
</div>
<div class="level-item has-text-centered">
<div> <div>
<p class="heading">Followers</p>
<p class="title is-5">1.2K</p>
</div>
</div>
<div class="level-item has-text-centered">
<div> <div>
<p class="heading">Following</p> <p>Posts</p>
<p class="title is-5">562</p> <p>245</p>
</div>
</div>
<div>
<div>
<p>Followers</p>
<p>1.2K</p>
</div>
</div>
<div>
<div>
<p>Following</p>
<p>562</p>
</div> </div>
</div> </div>
</div> </div>
@@ -112,50 +111,47 @@
</div> </div>
<!-- Main Feed --> <!-- Main Feed -->
<div class="column">
<!-- Create Post Card -->
<div class="card mb-5">
<div class="card-content">
<div class="content">
<div class="field">
<textarea class="textarea" placeholder="What's happening?"></textarea>
</div>
<div class="is-flex is-justify-content-space-between is-align-items-center">
<div> <div>
<button class="button is-text"> <!-- Create Post Card -->
<span class="icon"> <div>
<div>
<div>
<textarea placeholder="What's happening?"></textarea>
</div>
<div>
<div>
<button>
<span>
<!-- Image icon would go here --> <!-- Image icon would go here -->
</span> </span>
</button> </button>
<button class="button is-text"> <button>
<span class="icon"> <span>
<!-- Smile icon would go here --> <!-- Smile icon would go here -->
</span> </span>
</button> </button>
<button class="button is-text"> <button>
<span class="icon"> <span>
<!-- Chart icon would go here --> <!-- Chart icon would go here -->
</span> </span>
</button> </button>
</div> </div>
<button class="button maxy-primary"> <button>
Send a Message Send a Message
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- Posts Feed using Bulma Media Objects with post-avatar style --> <div>
<div class="box"> <article>
<article class="media"> <div>
<div class="media-left"> <div>
<div class="post-avatar" style="background-color: #2196f3;">
BM BM
</div> </div>
</div> </div>
<div class="media-content"> <div>
<div class="content"> <div>
<p> <p>
<strong>Barbara Middleton</strong> <strong>Barbara Middleton</strong>
<br /> <br />
@@ -167,14 +163,14 @@
</p> </p>
</div> </div>
<article class="media"> <article>
<div class="media-left"> <div>
<div class="post-avatar" style="background-color: #4caf50;"> <div>
SB SB
</div> </div>
</div> </div>
<div class="media-content"> <div>
<div class="content"> <div>
<p> <p>
<strong>Sean Brown</strong> <strong>Sean Brown</strong>
<br /> <br />
@@ -187,14 +183,14 @@
</p> </p>
</div> </div>
<article class="media"> <article>
<div class="media-left"> <div>
<div class="post-avatar" style="background-color: #ff9800;"> <div>
SJ SJ
</div> </div>
</div> </div>
<div class="media-content"> <div>
<div class="content"> <div>
<p> <p>
<strong>Sarah Johnson</strong> <strong>Sarah Johnson</strong>
<br /> <br />
@@ -207,14 +203,14 @@
</div> </div>
</article> </article>
<article class="media"> <article>
<div class="media-left"> <div>
<div class="post-avatar" style="background-color: #9c27b0;"> <div>
MC MC
</div> </div>
</div> </div>
<div class="media-content"> <div>
<div class="content"> <div>
<p> <p>
<strong>Michael Chen</strong> <strong>Michael Chen</strong>
<br /> <br />
@@ -230,14 +226,14 @@
</div> </div>
</article> </article>
<article class="media"> <article>
<div class="media-left"> <div>
<div class="post-avatar" style="background-color: #e91e63;"> <div>
KE KE
</div> </div>
</div> </div>
<div class="media-content"> <div>
<div class="content"> <div>
<p> <p>
<strong>Kayli Eunice</strong> <strong>Kayli Eunice</strong>
<br /> <br />
@@ -255,21 +251,21 @@
</div> </div>
</article> </article>
<article class="media"> <article>
<div class="media-left"> <div>
<div class="post-avatar" style="background-color: #3f51b5;"> <div>
UU UU
</div> </div>
</div> </div>
<div class="media-content"> <div>
<div class="field"> <div>
<p class="control"> <p class="control">
<textarea class="textarea" placeholder="Add a comment..."></textarea> <textarea placeholder="Add a comment..."></textarea>
</p> </p>
</div> </div>
<div class="field"> <div>
<p class="control"> <p class="control">
<button class="button is-link">Post comment</button> <button>Post comment</button>
</p> </p>
</div> </div>
</div> </div>
@@ -277,7 +273,6 @@
</div> </div>
</div> </div>
<!-- Right Sidebar - Removed Who to follow and Suggestions sections -->
</div> </div>
</div> </div>
</section> </section>