Webleb - Snippets de Código - Modelo de interface do usuário do Facebook

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;
}

Modelo de interface do usuário do Facebook - Exemplo em HTML

Recomendado

Página de login

Site do blog do Daniel

Um código de securearray494

HTML

CSS

JS

Recomendado

Página de login

Site do blog do Daniel

Um código de securearray494

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS