Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
4 views

Codingan web html

The document contains two simple HTML page examples: a login page and a feed page for a Facebook-like application. The login page features a form for email/phone and password input, styled with CSS for a clean layout. The feed page displays a navigation bar and a couple of posts, also styled for a user-friendly interface.

Uploaded by

itsdayzein
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views

Codingan web html

The document contains two simple HTML page examples: a login page and a feed page for a Facebook-like application. The login page features a form for email/phone and password input, styled with CSS for a clean layout. The feed page displays a navigation bar and a couple of posts, also styled for a user-friendly interface.

Uploaded by

itsdayzein
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

CONTOH HALAMAN LOGIN SEDERHANA

<!DOCTYPE html>

<html lang="id">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Login Facebook Sederhana</title>

<style>

body {

font-family: Arial, sans-serif;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

background-color: #f0f2f5;

margin: 0;

.login-container {

background-color: white;

width: 300px;

padding: 20px;

border-radius: 8px;

box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);

text-align: center;

h1 {

color: #1877f2;

margin-bottom: 20px;

input[type="text"],

input[type="password"] {
width: 100%;

padding: 10px;

margin: 10px 0;

border: 1px solid #ccc;

border-radius: 4px;

.login-button {

width: 100%;

padding: 10px;

background-color: #1877f2;

color: white;

border: none;

border-radius: 4px;

cursor: pointer;

.login-button:hover {

background-color: #165ec9;

</style>

</head>

<body>

<div class="login-container">

<h1>Facebook</h1>

<form id="loginForm">

<input type="text" placeholder="Email atau Nomor Telepon" required>

<input type="password" placeholder="Kata Sandi" required>

<button type="submit" class="login-button">Masuk</button>

</form>

</div>

</body>

</html>
CONTOH HALAMAN BERANDA (FEED) SEDERHANA
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beranda Facebook Sederhana</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f2f5;
margin: 0;
}
.navbar {
background-color: #1877f2;
color: white;
padding: 10px;
text-align: center;
}
.feed {
max-width: 600px;
margin: 20px auto;
padding: 10px;
background-color: white;
border-radius: 8px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}
.post {
padding: 10px;
border-bottom: 1px solid #e0e0e0;
}
.post:last-child {
border-bottom: none;
}
.post h3 {
margin: 0;
font-size: 18px;
}
.post p {
color: #333;
font-size: 14px;
}
</style>
</head>
<body>
<div class="navbar">
<h2>Facebook</h2>
</div>
<div class="feed">
<div class="post">
<h3>Pengguna 1</h3>
<p>Ini adalah posting pertama di feed Anda!</p>
</div>
<div class="post">
<h3>Pengguna 2</h3>
<p>Bagaimana kabarnya hari ini? 😊</p>
</div>
</div>
</body>
</html>

You might also like