Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add arabic text #8

Merged
merged 14 commits into from
Mar 23, 2024
Merged

Add arabic text #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
5b31194
Create README.md
O2sa Mar 14, 2024
ae0b375
Update README.md
O2sa Mar 14, 2024
c45b5e3
Merge pull request #1 from O2sa/overllay
O2sa Mar 14, 2024
28095cb
Merge pull request #2 from O2sa/overllay
O2sa Mar 14, 2024
cc8c0c9
Merge pull request #3 from O2sa/overllay
O2sa Mar 14, 2024
6e7dff9
Merge pull request #4 from O2sa/overllay
O2sa Mar 15, 2024
f863c32
Merge pull request #5 from O2sa/overllay
O2sa Mar 15, 2024
c72140c
Update README.md
O2sa Mar 15, 2024
8d274d6
Update README.md
O2sa Mar 15, 2024
8efcb37
Merge pull request #6 from O2sa/overllay
O2sa Mar 15, 2024
3285d10
Update README.md
O2sa Mar 15, 2024
8eab68e
Merge pull request #7 from O2sa/overllay
O2sa Mar 15, 2024
e79b2e8
add arabic text
O2sa Mar 18, 2024
2034458
Update README.md
O2sa Mar 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
This the implementation of this figma file:
[file](https://www.figma.com/file/qMSlSMf9B3uqG5LHpaidSI/%D8%A7%D8%AE%D8%AA%D8%A8%D8%A7%D8%B1-%D8%A7%D9%84%D9%85%D8%A8%D8%B1%D9%85%D8%AC%D9%8A%D9%86-CSS%2FHTML?type=design&node-id=1627-37733&mode=design&t=xU4bPDyDHu6fe7yo-0)


## Features
1. **Fully responsive**
2. **RTL support**
3. **pixel level implemtation**
4. **Vanilla HTML and CSS**


## Time spent
- 5 hours
- 3 Hours: Improvements

## Demo
[demo](https://o2sa.github.io/Dashboard-with-rtl/)



66 changes: 33 additions & 33 deletions index-rtl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,30 +66,30 @@
<div class="top-navs">
<div class="nav active">
<img class="icon" src="img/element-3.png" />
<div class="label">Overview</div>
<div class="label">لمحة</div>
</div>
<div class="nav">
<img class="icon" src="img/setting.png" />
<div class="text-wrapper-2">Chart</div>
<div class="text-wrapper-2">مخطط</div>
</div>
<div class="nav">
<img class="icon" src="img/setting.png" />
<div class="text-wrapper-2">Transactions</div>
<div class="text-wrapper-2">التحويلات</div>
</div>
<div class="nav">
<img class="icon" src="img/wallet-minus.png" />
<div class="text-wrapper-2">Wallet</div>
<div class="text-wrapper-2">المحفظة</div>
</div>
<div class="nav">
<img class="icon" src="img/message-text.png" />
<div class="text-wrapper-2">Mail box</div>
<div class="text-wrapper-2">رسائل الإيميل</div>
</div>
</div>
</div>
<div class="bottom-navs">
<div class="nav">
<img class="icon" src="img/setting.png" />
<div class="text-wrapper-2">Setting</div>
<div class="text-wrapper-2">الإعدادت</div>
</div>
<a href="index.html">
<div class="nav">
Expand All @@ -100,27 +100,27 @@

<div class="nav">
<img class="icon" src="img/logout.png" />
<div class="text-wrapper-2">Logout</div>
<div class="text-wrapper-2">تسجيل الخروج</div>
</div>
</div>
</div>
</div>
<a href="#" class="overlay">
<span style="font-size: large; color: beige;">
click to close
اضغط للرجوع
</span>
</a>
<div class="main">
<header class="header">
<div class="text-wrapper-3 header-title">Dashboard</div>
<div class="text-wrapper-3 header-title">لوحة التحكم</div>
<a href="#sidebar" class="sidebar-toggler">
<div class="icon-wrapper">
<img class="icon" src="img/Logo.png" />
</div>
</a>
<div class="search-bar">
<img class="icon" src="img/search-normal.png" />
<input type="text" class="text-input" placeholder="Search..">
<input type="text" class="text-input" placeholder="بحث..">
</div>
<div class="user-setting">
<div class="notifcations">
Expand All @@ -131,7 +131,7 @@
</div>
<div class="profile">
<div class="photo"></div>
<div class="name">Courtney Henry</div>
<div class="name">اسم المستخدم</div>
<img class="img-2" src="img/Icon-arrow-down.png" />
</div>
</div>
Expand All @@ -149,7 +149,7 @@
<img class="icon" src="img/bitcoin.png" />
</div>
<div class="title">
<div class="main-title">Bitcoin</div>
<div class="main-title">بيتكوين</div>
<div class="subtitle">BTC</div>
</div>
</div>
Expand All @@ -173,7 +173,7 @@
<img class="icon" src="img/litecoin(ltc).png" />
</div>
<div class="title">
<div class="main-title">Litecoin</div>
<div class="main-title">ليتكوين</div>
<div class="subtitle">BTC</div>
</div>
</div>
Expand All @@ -198,7 +198,7 @@
<img class="icon" src="img/solana-(sol).png" />
</div>
<div class="title">
<div class="main-title">Salana</div>
<div class="main-title">سلانا</div>
<div class="subtitle">BTC</div>
</div>
</div>
Expand All @@ -222,7 +222,7 @@
<img class="icon" src="img/ethereum-(eth).png" />
</div>
<div class="title">
<div class="main-title">Ethereum</div>
<div class="main-title">إثريم</div>
<div class="subtitle">BTC</div>
</div>
</div>
Expand All @@ -248,7 +248,7 @@

<div class="master-card">
<div class="head">
<div class="text-wrapper-6">Credit Card</div>
<div class="text-wrapper-6">بطاقة الدفع</div>
<div class="chip">
<div class="credit-icon">
<div class="rectangle"></div>
Expand All @@ -273,15 +273,15 @@
</div>

<div class="my-portfolio">
<div class="title">My Portfolio</div>
<div class="title">المعرض</div>
<div class="rows">
<div class="row">
<div class="card-logo">
<div class="icon-wrapper">
<img class="icon" src="img/bitcoin.png" />
</div>
<div class="title">
<div class="main-title">Bitcoin</div>
<div class="main-title">بيتكوين</div>
<div class="subtitle">BTC</div>
</div>
</div>
Expand All @@ -296,7 +296,7 @@
<img class="icon" src="img/ethereum-(eth).png" />
</div>
<div class="title">
<div class="main-title">Bitcoin</div>
<div class="main-title">إيثريم</div>
<div class="subtitle">BTC</div>
</div>
</div>
Expand All @@ -311,7 +311,7 @@
<img class="icon" src="img/solana-(sol).png" />
</div>
<div class="title">
<div class="main-title">Bitcoin</div>
<div class="main-title">سُلانا</div>
<div class="subtitle">BTC</div>
</div>
</div>
Expand All @@ -326,7 +326,7 @@
<img class="icon" src="img/litecoin(ltc).png" />
</div>
<div class="title">
<div class="main-title">Bitcoin</div>
<div class="main-title">ليتكوين</div>
<div class="subtitle">BTC</div>
</div>
</div>
Expand All @@ -341,7 +341,7 @@
<img class="icon" src="img/bitcoin.png" />
</div>
<div class="title">
<div class="main-title">Bitcoin</div>
<div class="main-title">بيتكوين</div>
<div class="subtitle">BTC</div>
</div>
</div>
Expand Down Expand Up @@ -387,7 +387,7 @@
<div class="row-2">
<div class="note">
<div class="div-3">
<div class="text-wrapper-9">Bitcoin/BTC</div>
<div class="text-wrapper-9">بيتكوين/BTC</div>
<img class="small-icon" src="img/arrow-down.png" />
</div>
<div class="text-wrapper-10">$35,352.02</div>
Expand All @@ -411,7 +411,7 @@
</div>
</div>
<div class="title-3">
<div class="heading">Chart</div>
<div class="heading">المخطط</div>
<div class="icons">
<img class="button" src="img/candle.png" />
<button class="button-2">
Expand All @@ -425,34 +425,34 @@

<div class="live-market">
<div class="frame">
<div class="heading">Live Market</div>
<div class="heading">المبيعات الحالية</div>
<button class="button-3">
<div class="text-wrapper-13">View More</div>
<div class="text-wrapper-13">عرض المزيد</div>
</button>
</div>
<div class="full-table">
<div class="table">
<div class="coin">
<div class="text-4">Coin</div>
<div class="text-4">العملة</div>
<div class="div-3">
<img class="icon" src="img/bitcoin.png" />
<div class="date">Bitcoin</div>
<div class="date">بيتكوين</div>
</div>
</div>
<div class="data">
<div class="text-5">Change</div>
<div class="text-5">الصرف</div>
<div class="date-2">+12.00%</div>
</div>
<div class="data">
<div class="text-5">Change</div>
<div class="text-5">التبادل</div>
<div class="date-2">+12.00%</div>
</div>
<div class="data">
<div class="text-5">Change</div>
<div class="text-5">التحويل</div>
<div class="date-2">+12.00%</div>
</div>
<div class="data">
<div class="text-5">Change</div>
<div class="text-5">الخسائر</div>
<div class="date-2">+12.00%</div>
</div>
</div>
Expand All @@ -468,4 +468,4 @@
</div>
</body>

</html>
</html>