Webleb - UI Elements - Facebook UI Mockup

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Facebook Mockup</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="header">
        <div class="logo">f</div>
        <div class="search-bar">
            <input type="text" placeholder="Search Facebook">
        </div>
        <div class="nav-icons">
            <span>Home</span>
            <span>Watch</span>
            <span>Marketplace</span>
            <span>Groups</span>
            <span>Profile</span>
        </div>
    </div>

<div class="sidebar">
        <div class="story">Your Story</div>
        <div class="story">Friend 1</div>
        <div class="story">Friend 2</div>
    </div>

<div class="post">
            <div class="post-header">
                <img src="https://via.placeholder.com/40" alt="User">
                <span>John Doe</span>
            </div>
            <p>Hello world! This is a sample post.</p>
            <div class="post-actions">
                <button>Like</button>
                <button>Comment</button>
                <button>Share</button>
            </div>
        </div>

<div class="post">
            <div class="post-header">
                <img src="https://via.placeholder.com/40" alt="User">
                <span>Jane Smith</span>
            </div>
            <p>Just had coffee! ☕</p>
            <div class="post-actions">
                <button>Like</button>
                <button>Comment</button>
                <button>Share</button>
            </div>
        </div>
    </div>

CSS

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f2f5;
}

.header {
    display: flex;
    align-items: center;
    background-color: #1877f2;
    color: white;
    padding: 10px 20px;
    justify-content: space-between;
}

.logo {
    font-size: 2em;
    font-weight: bold;
    background: white;
    color: #1877f2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-bar input {
    width: 300px;
    padding: 10px;
    border: none;
    border-radius: 20px;
}

.nav-icons span {
    margin-left: 20px;
    cursor: pointer;
}

.sidebar {
    position: fixed;
    left: 0;
    top: 70px;
    width: 200px;
    height: calc(100vh - 70px);
    background: white;
    padding: 20px;
}

.story {
    background: #f0f2f5;
    margin: 10px 0;
    padding: 10px;
    border-radius: 10px;
    text-align: center;
}

.main-feed {
    margin-left: 220px;
    margin-top: 20px;
    padding: 20px;
}

.create-post textarea {
    width: 100%;
    height: 80px;
    border: none;
    border-radius: 20px;
    padding: 15px;
    margin-bottom: 10px;
    resize: none;
}

.create-post button {
    background: #1877f2;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

.post {
    background: white;
    margin: 20px 0;
    padding: 15px;
    border-radius: 10px;
}

.post-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.post-header img {
    border-radius: 50%;
    margin-right: 10px;
}

.post-actions button {
    background: none;
    border: none;
    margin-right: 15px;
    cursor: pointer;
    color: #65676b;
}

Facebook UI Mockup - HTML Example

Recommended

Matrix Login Register Form HTML CSS

Auth Page Liquide

CSS Loading Animation Example

HTML

CSS

JS

Recommended

Matrix Login Register Form HTML CSS

Auth Page Liquide

CSS Loading Animation Example

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS