-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
9 changed files
with
122 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,5 @@ | ||
.status-bar { | ||
z-index: 10; | ||
z-index: 2; | ||
display: flex; | ||
justify-content: center; | ||
position: fixed; | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,112 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<link href="css/styles.css" rel="stylesheet" /> | ||
<title>Freinds - Kokoa Clone</title> | ||
</head> | ||
<body> | ||
<div class="status-bar"> | ||
<div class="status-bar__column"> | ||
<span>No Service</span> | ||
<i class="fa-solid fa-wifi"></i> | ||
</div> | ||
<div class="status-bar__column"> | ||
<span>18:43</span> | ||
</div> | ||
<div class="status-bar__column"> | ||
<span>100%</span> | ||
<i class="fa-solid fa-battery-full fa-xl"></i> | ||
<i class="fa-solid fa-bolt"></i> | ||
</div> | ||
</div> | ||
|
||
<header class="screen-header"> | ||
<h1 class="screen-header__title">Friends</h1> | ||
<div class="screen-header__icons"> | ||
<span><i class="fa-solid fa-magnifying-glass fa-lg"></i></span> | ||
<span><i class="fa-solid fa-music fa-lg"></i></span> | ||
<span><i class="fa-solid fa-gear fa-lg"></i></span> | ||
</div> | ||
</header> | ||
|
||
<a id="friends-display-link"> | ||
<i class="fa-solid fa-circle-info"></i> Friends's Names Display | ||
<i class="fa-solid fa-chevron-right fa-xs"></i> | ||
</a> | ||
|
||
<main class="main-screen friends-screen"> | ||
<div class="user-component"> | ||
<div class="user-component__column"> | ||
<img | ||
class="user-component__avatar user-component__avatar--xl" | ||
src="screenshots/profile.jpg" | ||
/> | ||
<div class="user-component__text"> | ||
<h4 class="user-component__title">Jaehyun</h4> | ||
<!--<h6 class="user-component__subtitle">This text is whatever</h6>--> | ||
</div> | ||
</div> | ||
<div class="user-component__column"></div> | ||
</div> | ||
<div class="friends-screen__channel"> | ||
<div class="friends-screen__channel-header"> | ||
<span>Channel</span> | ||
<i class="fa-solid fa-chevron-up fa-xs"></i> | ||
</div> | ||
<div class="user-component"> | ||
<div class="user-component__column"> | ||
<img | ||
class="user-component__avatar user-component__avatar--sm" | ||
src="screenshots/profile.jpg" | ||
/> | ||
<div class="user-component__text"> | ||
<h4 class="user-component__title user-component__title--not-bold"> | ||
멍멍이들... | ||
</h4> | ||
<!--<h6 class="user-component__subtitle">This text is whatever</h6>--> | ||
</div> | ||
</div> | ||
<div class="user-component__column"> | ||
<span>2 <i class="fa-solid fa-chevron-right fa-xs"></i></span> | ||
</div> | ||
</div> | ||
</div> | ||
</main> | ||
|
||
<nav class="nav"> | ||
<ul class="nav__list"> | ||
<li class="nav__btn"> | ||
<a class="nav__link" href="friends2.html" | ||
><i class="fa-solid fa-user fa-2x"></i | ||
></a> | ||
</li> | ||
<li class="nav__btn"> | ||
<a class="nav__link" href="chats.html"> | ||
<span class="badge nav__notification">1</span> | ||
<i class="fa-regular fa-comment fa-2x"></i | ||
></a> | ||
</li> | ||
<li class="nav__btn"> | ||
<a class="nav__link" href="find.html" | ||
><i class="fa-solid fa-magnifying-glass fa-2x"></i | ||
></a> | ||
</li> | ||
<li class="nav__btn"> | ||
<a class="nav__link" href="more.html"> | ||
<span class="badge badge--small"></span> | ||
<i class="fa-solid fa-ellipsis fa-2x"></i> | ||
</a> | ||
</li> | ||
</ul> | ||
</nav> | ||
<div id="no-mobile"> | ||
<span>Your screen is too big!!</span> | ||
</div> | ||
<script | ||
src="https://kit.fontawesome.com/23b670e447.js" | ||
crossorigin="anonymous" | ||
></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters