AndrewTrieu/chatline
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add basic HTML files

Browse Source
This commit is contained in:
Andrew Trieu
2023-02-03 10:23:41 +02:00
commit db56a1529d
8 changed files with 672 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
home.html Normal file
View File

@@ -0,0 +1,117 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>ChatLine - Real-time Messaging App</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>
<body>
<div class="wrapper">
<section class="user">
<header>
<div class="content">
<img src="assets/default.png" alt="Profile photo">
<div class="details">
<span>User</span>
<p>Active now</p>
</div>
</div>
<a href="#" class="logout">Logout</a>
</header>
<div class="search">
<span class="text">
Who do you want to chat with?
</span>
<input type="text" placeholder="Enter name to search...">
<button><i class="fas fa-search"></i></button>
</div>
<div class="users">
<a href="#">
<div class="content">
<img src="assets/default.png" alt="Profile photo">
<div class="details">
<span>Friend #1</span>
<p>This is a test message</p>
</div>
</div>
<div class="status-dot"><i class="fas fa-circle"></i></div>
</a>
<a href="#">
<div class="content">
<img src="assets/default.png" alt="Profile photo">
<div class="details">
<span>Friend #1</span>
<p>This is a test message</p>
</div>
</div>
<div class="status-dot"><i class="fas fa-circle"></i></div>
</a>
<a href="#">
<div class="content">
<img src="assets/default.png" alt="Profile photo">
<div class="details">
<span>Friend #1</span>
<p>This is a test message</p>
</div>
</div>
<div class="status-dot"><i class="fas fa-circle"></i></div>
</a>
<a href="#">
<div class="content">
<img src="assets/default.png" alt="Profile photo">
<div class="details">
<span>Friend #1</span>
<p>This is a test message</p>
</div>
</div>
<div class="status-dot"><i class="fas fa-circle"></i></div>
</a>
<a href="#">
<div class="content">
<img src="assets/default.png" alt="Profile photo">
<div class="details">
<span>Friend #1</span>
<p>This is a test message</p>
</div>
</div>
<div class="status-dot"><i class="fas fa-circle"></i></div>
</a>
<a href="#">
<div class="content">
<img src="assets/default.png" alt="Profile photo">
<div class="details">
<span>Friend #1</span>
<p>This is a test message</p>
</div>
</div>
<div class="status-dot"><i class="fas fa-circle"></i></div>
</a>
<a href="#">
<div class="content">
<img src="assets/default.png" alt="Profile photo">
<div class="details">
<span>Friend #1</span>
<p>This is a test message</p>
</div>
</div>
<div class="status-dot"><i class="fas fa-circle"></i></div>
</a>
<a href="#">
<div class="content">
<img src="assets/default.png" alt="Profile photo">
<div class="details">
<span>Friend #1</span>
<p>This is a test message</p>
</div>
</div>
<div class="status-dot"><i class="fas fa-circle"></i></div>
</a>
</div>
</section>
</div>
<script src="js/search-visibility.js"></script>
</body>
</html>