Esempio HTML di mockup dell'interfaccia utente di Facebook

532 denielkim237

Apri nell'Editor Pubblica il Tuo Codice

Esempio HTML di mockup dell'interfaccia utente di Facebook

Consigliato

23 September 2025

Frammento HTML di animazione di caricamento CSS

14 December 2024

Un codice di ab_andybv

25 November 2025

Gioco Stick Merge - Codice sorgente del gioco HTML5

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

Consigliato

Frammento HTML di animazione di caricamento CSS

Un codice di ab_andybv

Gioco Stick Merge - Codice sorgente del gioco HTML5

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS