Webleb - Snippet di Codice - Esempio HTML di mockup dell'interfaccia utente di 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;
}

Esempio HTML di mockup dell'interfaccia utente di Facebook

Consigliato

Modulo di Accesso Panda

Slider di carte animate espandibili

Un codice di yuhhxn

HTML

CSS

JS

Consigliato

Modulo di Accesso Panda

Slider di carte animate espandibili

Un codice di yuhhxn

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS