298 lines
12 KiB
HTML
298 lines
12 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>
|
|
</head>
|
|
<body>
|
|
<!-- 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 id="navbarMenu">
|
|
<div>
|
|
<a>
|
|
<span>
|
|
<!-- Home icon would go here -->
|
|
</span>
|
|
<span>Home</span>
|
|
</a>
|
|
<a>
|
|
<span>
|
|
<!-- Hashtag icon would go here -->
|
|
</span>
|
|
<span>Explore</span>
|
|
</a>
|
|
<a>
|
|
<span>
|
|
<!-- Bell icon would go here -->
|
|
</span>
|
|
<span>Notifications</span>
|
|
</a>
|
|
<a>
|
|
<span>
|
|
<!-- Envelope icon would go here -->
|
|
</span>
|
|
<span>Messages</span>
|
|
</a>
|
|
<a>
|
|
<span>
|
|
<!-- User icon would go here -->
|
|
</span>
|
|
<span>Profile</span>
|
|
</a>
|
|
<a>
|
|
<span>
|
|
<!-- User icon would go here -->
|
|
</span>
|
|
<button>Message</button>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main Content -->
|
|
<section>
|
|
<div>
|
|
<div>
|
|
<!-- Left Sidebar -->
|
|
<div>
|
|
<!-- Profile Card -->
|
|
<div>
|
|
<div>
|
|
<div>
|
|
JS
|
|
</div>
|
|
<h2>John Smith</h2>
|
|
<p>@johnsmith</p>
|
|
|
|
<div>
|
|
<div>
|
|
<div>
|
|
<p>Posts</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>
|
|
|
|
<!-- Removed Trending Card -->
|
|
</div>
|
|
|
|
<!-- Main Feed -->
|
|
<div>
|
|
<!-- Create Post Card -->
|
|
<div>
|
|
<div>
|
|
<div>
|
|
<textarea placeholder="What's happening?"></textarea>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
<button>
|
|
<span>
|
|
<!-- Image icon would go here -->
|
|
</span>
|
|
</button>
|
|
<button>
|
|
<span>
|
|
<!-- Smile icon would go here -->
|
|
</span>
|
|
</button>
|
|
<button>
|
|
<span>
|
|
<!-- Chart icon would go here -->
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<button>
|
|
Send a Message
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<article>
|
|
<div>
|
|
<div>
|
|
BM
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
<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>
|
|
<div>
|
|
<div>
|
|
SB
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
<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>
|
|
<div>
|
|
<div>
|
|
SJ
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
<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>
|
|
<div>
|
|
<div>
|
|
MC
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
<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>
|
|
<div>
|
|
<div>
|
|
KE
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
<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>
|
|
<div>
|
|
<div>
|
|
UU
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
<p class="control">
|
|
<textarea placeholder="Add a comment..."></textarea>
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p class="control">
|
|
<button>Post comment</button>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 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> |