<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scrolllink</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<div class="container">
<aside class="sidebar">
<h2>Scrolllink</h2>
<nav>
<ul>
<li><i class="fas fa-home"></i> Feed</li>
<li><i class="fas fa-compass"></i> Explore</li>
<li><i class="fas fa-shopping-cart"></i> Marketplace</li>
<li><i class="fas fa-users"></i> Groups</li>
<li><i class="fas fa-star"></i> My Favorites</li>
<li><i class="fas fa-comment-dots"></i> Messages</li>
<li><i class="fas fa-cog"></i> Settings</li>
</ul>
</nav>
<h3>My Contacts</h3>
<ul class="contacts">
<li><i class="fas fa-user"></i> Julia Yaseen <span>Juda, KSA</span></li>
<li><i class="fas fa-user"></i> Mark Stefine <span>Sydney, Australia</span></li>
<li><i class="fas fa-user"></i> Sara Cliene <span>Tokyo, Japan</span></li>
<li><i class="fas fa-user"></i> Trinity Sipson <span>Chicago, USA</span></li>
<li><i class="fas fa-user"></i> Lina Ruth <span>New York, USA</span></li>
<li><i class="fas fa-user"></i> Hadeel Thompson <span>New York></li>
</ul>
</aside>
<main class="feed">
<div class="post-input">
<textarea placeholder="What's happening?"></textarea>
<button>Post</button>
</div>
<div class="post">
<h4>codezillaye <span>CodeZilla-Yemen</span></h4>
<img src="https://codezillaye.com/wp-content/uploads/2024/09/cozilye.png" alt="Post Image">
<div class="post-footer">
<span>2k Comments</span>
<span>1k Likes</span>
<button>4k Like</button>
</div>
</div>
<div class="post">
<h4>Hanyi <span>Sana'a, Yemen</span></h4>
<p>If you think Adventure is dangerous, try routine. It's genuine lethal!</p>
<div class="post-footer">
<span>500 Comments</span>
<span>120 Likes</span>
<button>Like</button>
</div>
</div>
</main>
<aside class="sidebar right-sidebar">
<h3>You might like</h3>
<ul>
<li>Madleen Yaseen<span>15 Mutuals</span><button>Follow</button></li>
</ul>
<h3>Upcoming Events</h3>
<ul>
<li>Design Talks <span>8 sep, 13:00 am</span></li>
<li>Design Talks <span>8 sep, 13:00 pm</span></li>
</ul>
<h3>Recent Chats</h3>
<ul>
<li>Julia Clarke <span>New York, USA</span></li>
<li>Sara Cliene <span>Lebanon, Tripoli</span></li>
<li>Amy Ruth <span>Dubai, UAE</span></li>
</ul>
</aside>
</div>
</body>
</html>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
}
.container {
display: flex;
max-width: 1200px;
margin: 0 auto;
}
.sidebar {
width: 250px;
background-color: #fff;
padding: 20px;
border-right: 1px solid #eaeaea;
}
.sidebar h2 {
color: #E1306C;
}
.sidebar nav ul {
list-style: none;
}
.sidebar nav ul li {
padding: 10px 0;
}
.sidebar nav ul li, .contacts li {
display: flex;
align-items: center;
}
.sidebar nav ul li i, .contacts li i {
margin-right: 10px; /* Space between icon and text */
color: #E1306C; /* Match the primary color */
}
.feed {
flex-grow: 1;
padding: 20px;
}
.post-input {
margin-bottom: 20px;
}
.post-input textarea {
width: 100%;
height: 60px;
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
.post-input button {
float: right;
background-color: #E1306C;
color: white;
border: none;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
}
.post {
background-color: white;
padding: 15px;
margin-bottom: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.post img {
width: 100%;
height: auto;
border-radius: 5px;
}
.post-footer {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
.right-sidebar {
width: 250px;
padding-left: 20px;
}
.right-sidebar h3 {
margin-top: 20px;
}
.right-sidebar ul {
list-style: none;
}
.right-sidebar ul li {
padding: 10px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.right-sidebar ul li button {
background-color: #E1306C;
color: white;
border: none;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
}
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.sidebar, .right-sidebar {
width: 100%;
border: none;
}
}
About this design
Instagram Design:
This design is a basic HTML and CSS layout that mimics the look and feel of Instagram. It includes the following key components:
Navbar
- Brand Icon: Uses the Instagram logo represented by a FontAwesome icon.
- Search Box: A simple input field for searching.
- Navigation Icons: FontAwesome icons for Home, Messenger, Add Post, Explore, Notifications, and User Profile.
Main Section
- Status Wrapper: A horizontal scrollable section displaying user status updates. Each status card includes a FontAwesome user icon and a username.
- Post Section: Each post includes:
- Post Header: Displays the user’s profile icon and username.
- Post Image: A placeholder image representing the post content.
- Post Content: Includes reaction icons (like, comment, share), the number of likes, a description with the username, and the time since the post was made.
CSS Styling
- Global Styles: Basic reset and box-sizing rules.
- Body: Sets the font and background color.
- Navbar: Fixed at the top, with a white background and a border at the bottom.
- Main Section: Centers the content and provides a margin to account for the fixed navbar.
- Status Wrapper and Cards: Flexbox layout for horizontal scrolling and alignment.
- Post Styling: Includes borders, padding, and margin to separate posts, with specific styles for the header, image, and content sections.
This design provides a clean and straightforward structure that can be easily expanded and customized to create a fully functional social media page.
FontAwesome icons font-awesome/6.0.0
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css”>
This version uses FontAwesome icons for the navigation bar, profile pictures, and reaction icons. You can further customize it as needed.