322 lines
15 KiB
HTML
322 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Maxy - Social Platform</title>
|
|
<!-- ================= BULMA CDN ================= -->
|
|
<link rel="stylesheet" href="./assets/css/bulma.min.css">
|
|
<!-- ================= FONT AWESOME CDN ================= -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
|
<!-- ================= CUSTOM CSS ================= -->
|
|
<link rel="stylesheet" href="./assets/css/style.css">
|
|
</head>
|
|
<body>
|
|
<!-- Navigation Bar -->
|
|
<nav class="navbar is-fixed-top has-shadow">
|
|
<div class="container">
|
|
<div class="navbar-brand">
|
|
<a class="navbar-item" href="#">
|
|
<!-- Logo Image -->
|
|
<img src="./assets/image/logo.png" alt="Maxy Logo" class="logo-img">
|
|
<span class="has-text-weight-bold is-size-4 has-text-maxy">Maxy</span>
|
|
</a>
|
|
|
|
<!-- Mobile menu button -->
|
|
<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">
|
|
<i class="fas fa-home"></i>
|
|
</span>
|
|
<span class="ml-2">Home</span>
|
|
</a>
|
|
<a class="navbar-item">
|
|
<span class="icon">
|
|
<i class="fas fa-hashtag"></i>
|
|
</span>
|
|
<span class="ml-2">Explore</span>
|
|
</a>
|
|
<a class="navbar-item">
|
|
<span class="icon">
|
|
<i class="fas fa-bell"></i>
|
|
</span>
|
|
<span class="ml-2">Notifications</span>
|
|
</a>
|
|
<a class="navbar-item">
|
|
<span class="icon">
|
|
<i class="fas fa-envelope"></i>
|
|
</span>
|
|
<span class="ml-2">Messages</span>
|
|
</a>
|
|
<a class="navbar-item">
|
|
<span class="icon">
|
|
<i class="fas fa-user"></i>
|
|
</span>
|
|
<span class="ml-2">Profile</span>
|
|
</a>
|
|
<div class="navbar-item">
|
|
<button class="button maxy-primary">
|
|
Message
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main Content -->
|
|
<section class="section" style="padding-top: 80px;">
|
|
<div class="container">
|
|
<div class="columns is-variable is-5">
|
|
<!-- Left Sidebar -->
|
|
<div class="column is-one-quarter">
|
|
<!-- Profile Card -->
|
|
<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>
|
|
|
|
<!-- Removed Trending Card -->
|
|
</div>
|
|
|
|
<!-- 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>
|
|
<button class="button is-text">
|
|
<span class="icon">
|
|
<i class="far fa-image"></i>
|
|
</span>
|
|
</button>
|
|
<button class="button is-text">
|
|
<span class="icon">
|
|
<i class="far fa-smile"></i>
|
|
</span>
|
|
</button>
|
|
<button class="button is-text">
|
|
<span class="icon">
|
|
<i class="far fa-chart-bar"></i>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<button class="button maxy-primary">
|
|
Send a Message
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Posts Feed using Bulma Media Objects with post-avatar style -->
|
|
<div class="box">
|
|
<article class="media">
|
|
<div class="media-left">
|
|
<div class="post-avatar" style="background-color: #2196f3;">
|
|
BM
|
|
</div>
|
|
</div>
|
|
<div class="media-content">
|
|
<div class="content">
|
|
<p>
|
|
<strong>Barbara Middleton</strong>
|
|
<br />
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta eros
|
|
lacus, nec ultricies elit blandit non. Suspendisse pellentesque mauris
|
|
sit amet dolor blandit rutrum. Nunc in tempus turpis.
|
|
<br />
|
|
<small><a>Like</a> · <a>Reply</a> · 3 hrs</small>
|
|
</p>
|
|
</div>
|
|
|
|
<article class="media">
|
|
<div class="media-left">
|
|
<div class="post-avatar" style="background-color: #4caf50;">
|
|
SB
|
|
</div>
|
|
</div>
|
|
<div class="media-content">
|
|
<div class="content">
|
|
<p>
|
|
<strong>Sean Brown</strong>
|
|
<br />
|
|
Donec sollicitudin urna eget eros malesuada sagittis. Pellentesque
|
|
habitant morbi tristique senectus et netus et malesuada fames ac
|
|
turpis egestas. Aliquam blandit nisl a nulla sagittis, a lobortis
|
|
leo feugiat.
|
|
<br />
|
|
<small><a>Like</a> · <a>Reply</a> · 2 hrs</small>
|
|
</p>
|
|
</div>
|
|
|
|
<article class="media">
|
|
<div class="media-left">
|
|
<div class="post-avatar" style="background-color: #ff9800;">
|
|
SJ
|
|
</div>
|
|
</div>
|
|
<div class="media-content">
|
|
<div class="content">
|
|
<p>
|
|
<strong>Sarah Johnson</strong>
|
|
<br />
|
|
Vivamus quis semper metus, non tincidunt dolor. Vivamus in mi eu lorem
|
|
cursus ullamcorper sit amet nec massa.
|
|
<br />
|
|
<small><a>Like</a> · <a>Reply</a> · 1 hr</small>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="media">
|
|
<div class="media-left">
|
|
<div class="post-avatar" style="background-color: #9c27b0;">
|
|
MC
|
|
</div>
|
|
</div>
|
|
<div class="media-content">
|
|
<div class="content">
|
|
<p>
|
|
<strong>Michael Chen</strong>
|
|
<br />
|
|
Morbi vitae diam et purus tincidunt porttitor vel vitae augue.
|
|
Praesent malesuada metus sed pharetra euismod. Cras tellus odio,
|
|
tincidunt iaculis diam non, porta aliquet tortor.
|
|
<br />
|
|
<small><a>Like</a> · <a>Reply</a> · 45 mins</small>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="media">
|
|
<div class="media-left">
|
|
<div class="post-avatar" style="background-color: #e91e63;">
|
|
KE
|
|
</div>
|
|
</div>
|
|
<div class="media-content">
|
|
<div class="content">
|
|
<p>
|
|
<strong>Kayli Eunice</strong>
|
|
<br />
|
|
Sed convallis scelerisque mauris, non pulvinar nunc mattis vel.
|
|
Maecenas varius felis sit amet magna vestibulum euismod malesuada
|
|
cursus libero. Vestibulum ante ipsum primis in faucibus orci luctus
|
|
et ultrices posuere cubilia Curae; Phasellus lacinia non nisl id
|
|
feugiat.
|
|
<br />
|
|
<small><a>Like</a> · <a>Reply</a> · 2 hrs</small>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="media">
|
|
<div class="media-left">
|
|
<div class="post-avatar" style="background-color: #3f51b5;">
|
|
UU
|
|
</div>
|
|
</div>
|
|
<div class="media-content">
|
|
<div class="field">
|
|
<p class="control">
|
|
<textarea class="textarea" placeholder="Add a comment..."></textarea>
|
|
</p>
|
|
</div>
|
|
<div class="field">
|
|
<p class="control">
|
|
<button class="button is-link">Post comment</button>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Sidebar - Removed Who to follow and Suggestions sections -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<div class="content has-text-centered">
|
|
<p>
|
|
<strong>Maxy Social Platform</strong> by ICT
|
|
</p>
|
|
<p>
|
|
<a class="mx-2" href="#">About</a>
|
|
<a class="mx-2" href="#">Terms</a>
|
|
<a class="mx-2" href="#">Privacy</a>
|
|
<a class="mx-2" href="#">Help</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Scripts -->
|
|
<script>
|
|
// Mobile menu toggle
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const navbarBurger = document.querySelector('.navbar-burger');
|
|
|
|
if(navbarBurger) {
|
|
navbarBurger.addEventListener('click', () => {
|
|
const target = navbarBurger.dataset.target;
|
|
const targetElement = document.getElementById(target);
|
|
|
|
navbarBurger.classList.toggle('is-active');
|
|
targetElement.classList.toggle('is-active');
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |