Webleb - fragmentos de código - Maqueta de interfaz de usuario de Facebook: ejemplo HTML

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

Maqueta de interfaz de usuario de Facebook: ejemplo HTML

Recomendado

Un código de gurbetshopelectronics

Plantilla HTML de cuenta regresiva para Navidad

Interruptor de Bombilla

HTML

CSS

JS

Recomendado

Un código de gurbetshopelectronics

Plantilla HTML de cuenta regresiva para Navidad

Interruptor de Bombilla

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS