generated from technolyceum/g11-m3
Initial commit
This commit is contained in:
298
starter_index.html
Normal file
298
starter_index.html
Normal file
@@ -0,0 +1,298 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user